From 637b3b398c1055e42770e14973b05a27e28fa05a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 30 Aug 2023 17:29:26 +0300
Subject: [PATCH] Refactor #4351 - For Steps

---
 components/lib/steps/Steps.d.ts | 12 ++++++++++++
 components/lib/steps/Steps.vue  | 34 +++++++++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/components/lib/steps/Steps.d.ts b/components/lib/steps/Steps.d.ts
index 389f3b91e..3b2563b6e 100755
--- a/components/lib/steps/Steps.d.ts
+++ b/components/lib/steps/Steps.d.ts
@@ -137,6 +137,18 @@ export interface StepsSlots {
          * Menuitem instance
          */
         item: MenuItem;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Order of the menuitem
+         */
+        index: number;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: (...args: any) => string;
     }): VNode[];
 }
 
diff --git a/components/lib/steps/Steps.vue b/components/lib/steps/Steps.vue
index c32c160d3..447b4c0a1 100755
--- a/components/lib/steps/Steps.vue
+++ b/components/lib/steps/Steps.vue
@@ -23,7 +23,7 @@
                             <span :class="cx('label')" v-bind="getPTOptions('label', item, index)">{{ label(item) }}</span>
                         </span>
                     </template>
-                    <component v-else :is="$slots.item" :item="item"></component>
+                    <component v-else :is="$slots.item" :item="item" :index="index" :label="label(item)" :props="getMenuItemProps(item, index)"></component>
                 </li>
             </template>
         </ol>
@@ -32,11 +32,17 @@
 
 <script>
 import { DomHandler } from 'primevue/utils';
+import { mergeProps } from 'vue';
 import BaseSteps from './BaseSteps.vue';
 
 export default {
     name: 'Steps',
     extends: BaseSteps,
+    beforeMount() {
+        if (!this.$slots.item) {
+            console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
+        }
+    },
     mounted() {
         const firstItem = this.findFirstItem();
 
@@ -159,7 +165,7 @@ export default {
             focusableItem.focus();
         },
         isActive(item) {
-            return item.to ? this.$router.resolve(item.to).path === this.$route.path : false;
+            return item.to || item.route ? this.$router.resolve(item.to || item.route).path === this.$route.path : false;
         },
         isItemDisabled(item) {
             return this.disabled(item) || (this.readonly && !this.isActive(item));
@@ -172,6 +178,30 @@ export default {
         },
         label(item) {
             return typeof item.label === 'function' ? item.label() : item.label;
+        },
+        getMenuItemProps(item, index) {
+            return {
+                action: mergeProps(
+                    {
+                        class: this.cx('action'),
+                        onClick: ($event) => this.onItemClick($event, item),
+                        onKeyDown: ($event) => this.onItemKeydown($event, item)
+                    },
+                    this.getPTOptions('action', item, index)
+                ),
+                step: mergeProps(
+                    {
+                        class: this.cx('step')
+                    },
+                    this.getPTOptions('step', item, index)
+                ),
+                label: mergeProps(
+                    {
+                        class: this.cx('label')
+                    },
+                    this.getPTOptions('label', item, index)
+                )
+            };
         }
     }
 };