vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #4196 - For Steps

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-07-24 13:57:49 +03:00
parent e01a3f1f36
commit 974a963218
3 changed files with 38 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/lib/steps/Steps.vue
View file

@ -2,7 +2,7 @@
<nav :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="steps">
<ol ref="list" :class="cx('menu')" v-bind="ptm('menu')">
<template v-for="(item, index) of model" :key="item.to">
<li v-if="visible(item)" :class="[cx('menuitem', { item }), item.class]" :style="item.style" v-bind="ptm('menuitem')" :data-p-highlight="isActive(item)" :data-p-disabled="isItemDisabled(item)">
<li v-if="visible(item)" :class="[cx('menuitem', { item }), item.class]" :style="item.style" v-bind="getPTOptions('menuitem', item, index)" :data-p-highlight="isActive(item)" :data-p-disabled="isItemDisabled(item)">
<template v-if="!$slots.item">
<router-link v-if="!isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a
@ -12,15 +12,15 @@
:aria-current="isExactActive ? 'step' : undefined"
@click="onItemClick($event, item, navigate)"
@keydown="onItemKeydown($event, item, navigate)"
v-bind="ptm('action')"
v-bind="getPTOptions('action', item, index)"
>
<span :class="cx('step')" v-bind="ptm('step')">{{ index + 1 }}</span>
<span :class="cx('label')" v-bind="ptm('label')">{{ label(item) }}</span>
<span :class="cx('step')" v-bind="getPTOptions('step', item, index)">{{ index + 1 }}</span>
<span :class="cx('label')" v-bind="getPTOptions('label', item, index)">{{ label(item) }}</span>
</a>
</router-link>
<span v-else :class="cx('action')" @keydown="onItemKeydown($event, item)" v-bind="ptm('action')">
<span :class="cx('step')" v-bind="ptm('step')">{{ index + 1 }}</span>
<span :class="cx('label')" v-bind="ptm('label')">{{ label(item) }}</span>
<span v-else :class="cx('action')" @keydown="onItemKeydown($event, item)" v-bind="getPTOptions('action', item, index)">
<span :class="cx('step')" v-bind="getPTOptions('step', item, index)">{{ index + 1 }}</span>
<span :class="cx('label')" v-bind="getPTOptions('label', item, index)">{{ label(item) }}</span>
</span>
</template>
<component v-else :is="$slots.item" :item="item"></component>
@ -43,6 +43,15 @@ export default {
firstItem.tabIndex = '0';
},
methods: {
getPTOptions(key, item, index) {
return this.ptm(key, {
context: {
index,
active: this.isActive(item),
disabled: this.isItemDisabled(item)
}
});
},
onItemClick(event, item, navigate) {
if (this.disabled(item) || this.readonly) {
event.preventDefault();