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

Refactor #4196 - For Steps

pull/4203/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/steps/BaseSteps.vue
View File

@ -57,7 +57,7 @@ const styles = `
`;
const classes = {
root: ({ instance }) => ['p-steps p-component', { 'p-readonly': instance.readonly }],
root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
menu: 'p-steps-list',
menuitem: ({ instance, item }) => [
'p-steps-item',

21
components/lib/steps/Steps.d.ts vendored
View File

@ -20,6 +20,7 @@ export declare type StepsPassThroughOptionType = StepsPassThroughAttributes | ((
export interface StepsPassThroughMethodOptions {
instance: any;
props: StepsProps;
context: StepsContext;
}
/**
@ -65,6 +66,26 @@ export interface StepsPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current options in Steps component.
*/
export interface StepsContext {
/**
* Index of the menuitem.
*/
index: number;
/**
* Current active state of menuitem as a boolean.
* @defaultValue false
*/
active: boolean;
/**
* Current disabled state of menuitem as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
/**
* Defines valid properties in Steps component.
*/

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();