Steps router docs fixed

doc/steps/BasicDoc.vue

@@ -3,7 +3,16 @@
         <p>Steps requires a collection of menuitems as its <i>model</i>.</p>
     </DocSectionText>
     <div class="card">
-        <Steps :model="items" aria-label="Form Steps" :readonly="false">
+        <Steps
+            :model="items"
+            aria-label="Form Steps"
+            :readonly="false"
+            :pt="{
+                menuitem: ({ context }) => ({
+                    class: isActive(context.item) && 'p-highlight p-steps-current'
+                })
+            }"
+        >
             <template #item="{ label, item, index, props }">
                 <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
                     <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
@@ -11,10 +20,6 @@
                         <span v-bind="props.label">{{ label }}</span>
                     </a>
                 </router-link>
-                <span v-else v-bind="props.action">
-                    <span v-bind="props.step">{{ index + 1 }}</span>
-                    <span v-bind="props.label">{{ label }}</span>
-                </span>
             </template>
         </Steps>
     </div>
@@ -44,7 +49,12 @@ export default {
                 }
             ],
             code: {
-                basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false">
+                basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false"
+    :pt="{
+        menuitem: ({ context }) => ({
+            class: isActive(context.item) && 'p-highlight p-steps-current'
+        })
+    }">
     <template #item="{ label, item, index, props }">
         <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
             <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
@@ -61,7 +71,12 @@ export default {
                 options: `<template>
     <div>        
         <div class="card">
-            <Steps :model="items" aria-label="Form Steps" :readonly="false">
+            <Steps :model="items" aria-label="Form Steps" :readonly="false"
+                :pt="{
+                    menuitem: ({ context }) => ({
+                        class: isActive(context.item) && 'p-highlight p-steps-current'
+                    })
+                }">
                 <template #item="{ label, item, index, props }">
                     <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
                         <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
@@ -102,13 +117,23 @@ export default {
                 }
             ]
         }
+    },
+    methods: {
+        isActive(item) {
+            return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
+        }
     }
 }
 <\/script>`,
                 composition: `<template>
     <div>
         <div class="card">
-            <Steps :model="items" aria-label="Form Steps" :readonly="false">
+            <Steps :model="items" aria-label="Form Steps" :readonly="false"
+                :pt="{
+                    menuitem: ({ context }) => ({
+                        class: isActive(context.item) && 'p-highlight p-steps-current'
+                    })
+                }">
                 <template #item="{ label, item, index, props }">
                     <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
                         <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
@@ -128,6 +153,10 @@ export default {
 
 <script setup>
 import { ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
 
 const items = ref([
     {
@@ -147,9 +176,18 @@ const items = ref([
         route: "/confirmation",
     }
 ]);
+
+const isActive = (item) => {
+    return item.route ? router.resolve(item.route).path === route.path : false;
+}
 <\/script>`
             }
         };
+    },
+    methods: {
+        isActive(item) {
+            return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
+        }
     }
 };
 </script>

doc/steps/InteractiveDoc.vue

@@ -3,7 +3,15 @@
         <p>In order to add interactivity to the component, disable <i>readonly</i> to control the Steps.</p>
     </DocSectionText>
     <div class="card">
-        <Steps :model="items" aria-label="Form Steps">
+        <Steps
+            :model="items"
+            aria-label="Form Steps"
+            :pt="{
+                menuitem: ({ context }) => ({
+                    class: isActive(context.item) && 'p-highlight p-steps-current'
+                })
+            }"
+        >
             <template #item="{ label, item, index, props }">
                 <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
                     <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
@@ -49,7 +57,15 @@ export default {
             formObject: {},
             code: {
                 basic: `<div class="card">
-    <Steps :model="items" aria-label="Form Steps">
+        <Steps
+            :model="items"
+            aria-label="Form Steps"
+            :pt="{
+                menuitem: ({ context }) => ({
+                    class: isActive(context.item) && 'p-highlight p-steps-current'
+                })
+            }"
+        >
         <template #item="{ label, item, index, props }">
             <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
                 <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
@@ -69,7 +85,15 @@ export default {
                 options: `<template>
     <div>
         <div class="card">
-            <Steps :model="items" aria-label="Form Steps">
+            <Steps
+                :model="items"
+                aria-label="Form Steps"
+                :pt="{
+                    menuitem: ({ context }) => ({
+                        class: isActive(context.item) && 'p-highlight p-steps-current'
+                    })
+                }"
+            >
                 <template #item="{ label, item, index, props }">
                     <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
                         <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
@@ -128,6 +152,9 @@ export default {
         },
         complete() {
             this.$toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.'});
+        },
+        isActive(item) {
+            return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
         }
     }
 }
@@ -145,7 +172,15 @@ export default {
                 composition: `<template>
     <div>
         <div class="card">
-            <Steps :model="items" aria-label="Form Steps">
+            <Steps
+                :model="items"
+                aria-label="Form Steps"
+                :pt="{
+                    menuitem: ({ context }) => ({
+                        class: isActive(context.item) && 'p-highlight p-steps-current'
+                    })
+                }"
+            >
                 <template #item="{ label, item, index, props }">
                     <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
                         <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
@@ -206,6 +241,10 @@ const prevPage = (event) => {
 const complete = () => {
     toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + formObject.value.firstname + ' ' + formObject.value.lastname + ' your order completed.'});
 };
+
+const isActive = (item) => {
+    return item.route ? router.resolve(item.route).path === route.path : false;
+};
 <\/script>
 
 <style scoped>
@@ -537,6 +576,9 @@ export default {
         },
         complete() {
             this.$toast.add({ severity: 'success', summary: 'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.' });
+        },
+        isActive(item) {
+            return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
         }
     }
 };

doc/steps/RouterDoc.vue

@@ -2,7 +2,211 @@
     <DocSectionText v-bind="$attrs">
         <p>
             Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
-            <i>NuxtLink</i> or <i>router-link</i>. Here is an <NuxtLink to="/steps/#basic">example</NuxtLink> with vue-router.
+            <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
         </p>
     </DocSectionText>
+    <div class="card">
+        <Steps
+            :model="items"
+            aria-label="Form Steps"
+            :readonly="false"
+            :pt="{
+                menuitem: ({ context }) => ({
+                    class: isActive(context.item) && 'p-highlight p-steps-current'
+                })
+            }"
+        >
+            <template #item="{ label, item, index, props }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                        <span v-bind="props.step">{{ index + 1 }}</span>
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.step">{{ index + 1 }}</span>
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </Steps>
+    </div>
+    <DocSectionCode :code="code" />
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Personal',
+                    route: '/steps'
+                },
+                {
+                    label: 'Seat',
+                    route: '/steps/seat'
+                },
+                {
+                    label: 'Payment',
+                    route: '/steps/payment'
+                },
+                {
+                    label: 'Confirmation',
+                    route: '/steps/confirmation'
+                },
+                {
+                    label: 'File Upload',
+                    url: '/fileupload'
+                }
+            ],
+            code: {
+                basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false"
+    :pt="{
+        menuitem: ({ context }) => ({
+            class: isActive(context.item) && 'p-highlight p-steps-current'
+        })
+    }">
+    <template #item="{ label, item, index, props }">
+        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+            <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                <span v-bind="props.step">{{ index + 1 }}</span>
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span v-bind="props.step">{{ index + 1 }}</span>
+            <span v-bind="props.label">{{ label }}</span>
+        </a>
+    </template>
+</Steps>`,
+                options: `<template>
+    <div>        
+        <div class="card">
+            <Steps :model="items" aria-label="Form Steps" :readonly="false"
+                :pt="{
+                    menuitem: ({ context }) => ({
+                        class: isActive(context.item) && 'p-highlight p-steps-current'
+                    })
+                }">
+                <template #item="{ label, item, index, props }">
+                    <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                        <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                            <span v-bind="props.step">{{ index + 1 }}</span>
+                            <span v-bind="props.label">{{ label }}</span>
+                        </a>
+                    </router-link>
+                    <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                        <span v-bind="props.step">{{ index + 1 }}</span>
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </template>
+            </Steps>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Personal',
+                    route: '/steps'
+                },
+                {
+                    label: 'Seat',
+                    route: '/steps/seat'
+                },
+                {
+                    label: 'Payment',
+                    route: '/steps/payment'
+                },
+                {
+                    label: 'Confirmation',
+                    route: '/steps/confirmation'
+                },
+                {
+                    label: 'File Upload',
+                    url: '/fileupload'
+                }
+            ]
+        }
+    },
+    methods: {
+        isActive(item) {
+            return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
+        }
+    }
+}
+<\/script>`,
+                composition: `<template>
+    <div>
+        <div class="card">
+            <Steps :model="items" aria-label="Form Steps" :readonly="false"
+                :pt="{
+                    menuitem: ({ context }) => ({
+                        class: isActive(context.item) && 'p-highlight p-steps-current'
+                    })
+                }">
+                <template #item="{ label, item, index, props }">
+                    <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                        <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                            <span v-bind="props.step">{{ index + 1 }}</span>
+                            <span v-bind="props.label">{{ label }}</span>
+                        </a>
+                    </router-link>
+                    <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                        <span v-bind="props.step">{{ index + 1 }}</span>
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </template>
+            </Steps>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+
+const items = ref([
+    {
+        label: 'Personal',
+        route: "/"
+    },
+    {
+        label: 'Seat',
+        route: "/seat",
+    },
+    {
+        label: 'Payment',
+        route: "/payment",
+    },
+    {
+        label: 'Confirmation',
+        route: "/confirmation",
+    },
+    {
+        label: 'File Upload',
+        url: '/fileupload'
+    }
+]);
+
+const isActive = (item) => {
+    return item.route ? router.resolve(item.route).path === route.path : false;
+}
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        isActive(item) {
+            return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
+        }
+    }
+};
+</script>