Refactor #4196 - For Steps

components/lib/steps/BaseSteps.vue

@@ -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',

components/lib/steps/Steps.d.ts

@@ -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.
  */

components/lib/steps/Steps.vue

@@ -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('step')" v-bind="getPTOptions('step', item, index)">{{ index + 1 }}</span>
-                                <span :class="cx('label')" v-bind="ptm('label')">{{ label(item) }}</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 v-else :class="cx('action')" @keydown="onItemKeydown($event, item)" v-bind="getPTOptions('action', item, index)">
-                            <span :class="cx('step')" v-bind="ptm('step')">{{ index + 1 }}</span>
+                            <span :class="cx('step')" v-bind="getPTOptions('step', item, index)">{{ index + 1 }}</span>
-                            <span :class="cx('label')" v-bind="ptm('label')">{{ label(item) }}</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();