Refactor #3907 - For Steps

api-generator/components/steps.js

@@ -22,6 +22,12 @@ const StepsProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/steps/Steps.d.ts

@@ -11,6 +11,53 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type StepsPassThroughOptionType = StepsPassThroughAttributes | ((options: StepsPassThroughMethodOptions) => StepsPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepsPassThroughMethodOptions {
+    props: StepsProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link StepsProps.pt}
+ */
+export interface StepsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the step's DOM element.
+     */
+    step?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: StepsPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface StepsPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Steps component.
  */
@@ -33,6 +80,11 @@ export interface StepsProps {
      * @defaultValue true
      */
     exact?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {StepsPassThroughOptions}
+     */
+    pt?: StepsPassThroughOptions;
 }
 
 /**

components/lib/steps/Steps.vue

@@ -1,8 +1,8 @@
 <template>
-    <nav :id="id" :class="containerClass">
-        <ol ref="list" class="p-steps-list">
+    <nav :id="id" :class="containerClass" v-bind="ptm('root')">
+        <ol ref="list" class="p-steps-list" v-bind="ptm('menu')">
             <template v-for="(item, index) of model" :key="item.to">
-                <li v-if="visible(item)" :class="getItemClass(item)" :style="item.style">
+                <li v-if="visible(item)" :class="getItemClass(item)" :style="item.style" v-bind="ptm('menuitem')">
                     <template v-if="!$slots.item">
                         <router-link v-if="!isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
                             <a
@@ -12,14 +12,15 @@
                                 :aria-current="isExactActive ? 'step' : undefined"
                                 @click="onItemClick($event, item, navigate)"
                                 @keydown="onItemKeydown($event, item, navigate)"
+                                v-bind="ptm('action')"
                             >
-                                <span class="p-steps-number">{{ index + 1 }}</span>
-                                <span class="p-steps-title">{{ label(item) }}</span>
+                                <span class="p-steps-number" v-bind="ptm('step')">{{ index + 1 }}</span>
+                                <span class="p-steps-title" v-bind="ptm('label')">{{ label(item) }}</span>
                             </a>
                         </router-link>
-                        <span v-else :class="linkClass()" @keydown="onItemKeydown($event, item)">
-                            <span class="p-steps-number">{{ index + 1 }}</span>
-                            <span class="p-steps-title">{{ label(item) }}</span>
+                        <span v-else :class="linkClass()" @keydown="onItemKeydown($event, item)" v-bind="ptm('action')">
+                            <span class="p-steps-number" v-bind="ptm('step')">{{ index + 1 }}</span>
+                            <span class="p-steps-title" v-bind="ptm('label')">{{ label(item) }}</span>
                         </span>
                     </template>
                     <component v-else :is="$slots.item" :item="item"></component>
@@ -30,10 +31,12 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Steps',
+    extends: BaseComponent,
     props: {
         id: {
             type: String,