vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

#1275 for Steps

pull/1533/head
Cagatay Civici 2021-08-27 16:47:45 +03:00
parent 30a1d5c72d
commit a023df876c
4 changed files with 38 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/steps.js
View File

@ -16,6 +16,12 @@ const StepsProps = [
type: "boolean",
default: "true",
description: "Whether the items are clickable or not."
},
{
name: "exact",
type: "boolean",
default: "true",
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
}
];

1
src/components/steps/Steps.d.ts vendored
View File

@ -4,6 +4,7 @@ interface StepsProps {
id?: string;
model?: any[];
readonly?: boolean;
exact?: boolean;
}
declare class Steps {

16
src/components/steps/Steps.vue
View File

@ -4,13 +4,13 @@
<template v-for="(item,index) of model" :key="item.to">
<li v-if="visible(item)" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
<template v-if="!$slots.item">
<router-link :to="item.to" v-if="!isItemDisabled(item)" custom v-slot="{navigate, href}">
<a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation">
<router-link :to="item.to" v-if="!isItemDisabled(item)" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" :class="linkClass({isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
</a>
</router-link>
<span v-else class="p-menuitem-link" role="presentation">
<span v-else :class="linkClass()" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
</span>
@ -39,6 +39,10 @@ export default {
readonly: {
type: Boolean,
default: true
},
exact: {
type: Boolean,
default: true
}
},
methods: {
@ -68,6 +72,12 @@ export default {
'p-disabled': this.isItemDisabled(item)
}];
},
linkClass(routerProps) {
return ['p-menuitem-link', {
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}];
},
isItemDisabled(item) {
return (this.disabled(item) || (this.readonly && !this.isActive(item)));
},

18
src/views/steps/StepsDoc.vue
View File

@ -60,6 +60,18 @@ export default {
&lt;/template&gt;
&lt;/Steps&gt;
</template>
</code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre>
&lt;Steps :model="items"&gt;
&lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt;
&lt;/template&gt;
&lt;/Steps&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -92,6 +104,12 @@ export default {
<td>boolean</td>
<td>true</td>
<td>Whether the items are clickable or not.</td>
</tr>
<tr>
<td>exact</td>
<td>boolean</td>
<td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
</tr>
</tbody>
</table>