From 81b2102c5657becd4bef0eb5a7f1b6eb5c0452ea 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:38:19 +0300
Subject: [PATCH] Steps docs for router

---
 doc/steps/BasicDoc.vue       | 84 +++++++++++++++++++++++++++++-------
 doc/steps/InteractiveDoc.vue | 74 ++++++++++++++++++++++---------
 doc/steps/RouterDoc.vue      |  8 ++++
 doc/tieredmenu/RouterDoc.vue |  2 +-
 pages/steps.vue              |  6 +++
 5 files changed, 137 insertions(+), 37 deletions(-)
 create mode 100644 doc/steps/RouterDoc.vue

diff --git a/doc/steps/BasicDoc.vue b/doc/steps/BasicDoc.vue
index 181611af8..617a9cb39 100644
--- a/doc/steps/BasicDoc.vue
+++ b/doc/steps/BasicDoc.vue
@@ -3,7 +3,20 @@
         <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">
+            <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>
+                <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>
     <DocSectionCode :code="code" />
 </template>
@@ -15,27 +28,53 @@ export default {
             items: [
                 {
                     label: 'Personal',
-                    to: '/steps'
+                    route: '/steps'
                 },
                 {
                     label: 'Seat',
-                    to: '/steps/seat'
+                    route: '/steps/seat'
                 },
                 {
                     label: 'Payment',
-                    to: '/steps/payment'
+                    route: '/steps/payment'
                 },
                 {
                     label: 'Confirmation',
-                    to: '/steps/confirmation'
+                    route: '/steps/confirmation'
                 }
             ],
             code: {
-                basic: `<Steps :model="items" aria-label="Form Steps" />`,
+                basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false">
+    <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>
+        <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>`,
                 options: `<template>
     <div>        
         <div class="card">
-            <Steps :model="items" :readonly="false" aria-label="Form Steps" />
+            <Steps :model="items" aria-label="Form Steps" :readonly="false">
+                <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>
+                    <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>
     </div>
 </template>
@@ -47,19 +86,19 @@ export default {
             items: [
                 {
                     label: 'Personal',
-                    to: '/'
+                    route: '/steps'
                 },
                 {
                     label: 'Seat',
-                    to: '/seat'
+                    route: '/steps/seat'
                 },
                 {
                     label: 'Payment',
-                    to: '/payment'
+                    route: '/steps/payment'
                 },
                 {
                     label: 'Confirmation',
-                    to: '/confirmation'
+                    route: '/steps/confirmation'
                 }
             ]
         }
@@ -69,7 +108,20 @@ export default {
                 composition: `<template>
     <div>
         <div class="card">
-            <Steps :model="items" :readonly="false" aria-label="Form Steps" />
+            <Steps :model="items" aria-label="Form Steps" :readonly="false">
+                <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>
+                    <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>
     </div>
 </template>
@@ -80,19 +132,19 @@ import { ref } from "vue";
 const items = ref([
     {
         label: 'Personal',
-        to: "/"
+        route: "/"
     },
     {
         label: 'Seat',
-        to: "/seat",
+        route: "/seat",
     },
     {
         label: 'Payment',
-        to: "/payment",
+        route: "/payment",
     },
     {
         label: 'Confirmation',
-        to: "/confirmation",
+        route: "/confirmation",
     }
 ]);
 <\/script>`
diff --git a/doc/steps/InteractiveDoc.vue b/doc/steps/InteractiveDoc.vue
index d439c215b..a377aa5b0 100644
--- a/doc/steps/InteractiveDoc.vue
+++ b/doc/steps/InteractiveDoc.vue
@@ -3,7 +3,16 @@
         <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">
+            <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>
+            </template>
+        </Steps>
     </div>
 
     <NuxtPage v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
@@ -22,25 +31,34 @@ export default {
             items: [
                 {
                     label: 'Personal',
-                    to: '/steps'
+                    route: '/steps'
                 },
                 {
                     label: 'Seat',
-                    to: '/steps/seat'
+                    route: '/steps/seat'
                 },
                 {
                     label: 'Payment',
-                    to: '/steps/payment'
+                    route: '/steps/payment'
                 },
                 {
                     label: 'Confirmation',
-                    to: '/steps/confirmation'
+                    route: '/steps/confirmation'
                 }
             ],
             formObject: {},
             code: {
                 basic: `<div class="card">
-    <Steps :model="items" aria-label="Form Steps" />
+    <Steps :model="items" aria-label="Form Steps">
+        <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>
+        </template>
+    </Steps>
 </div>
 
 <router-view v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
@@ -50,11 +68,19 @@ export default {
 </router-view>`,
                 options: `<template>
     <div>
-        <Toast />
-        
         <div class="card">
-            <Steps :model="items" aria-label="Form Steps" />
+            <Steps :model="items" aria-label="Form Steps">
+                <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>
+                </template>
+            </Steps>
         </div>
+        <Toast />
 
         <router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
             <keep-alive>
@@ -71,19 +97,19 @@ export default {
             items: [
                 {
                     label: 'Personal',
-                    to: '/'
+                    route: '/'
                 },
                 {
                     label: 'Seat',
-                    to: '/seat'
+                    route: '/seat'
                 },
                 {
                     label: 'Payment',
-                    to: '/payment'
+                    route: '/payment'
                 },
                 {
                     label: 'Confirmation',
-                    to: '/confirmation'
+                    route: '/confirmation'
                 }
             ],
             formObject: {}
@@ -118,11 +144,19 @@ export default {
 </style>`,
                 composition: `<template>
     <div>
-        <Toast />
-
         <div class="card">
-            <Steps :model="items" aria-label="Form Steps" />
+            <Steps :model="items" aria-label="Form Steps">
+                <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>
+                </template>
+            </Steps>
         </div>
+        <Toast />
 
         <router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
             <keep-alive>
@@ -142,19 +176,19 @@ const toast = useToast();
 const items = ref([
     {
         label: 'Personal',
-        to: "/"
+        route: "/"
     },
     {
         label: 'Seat',
-        to: "/seat",
+        route: "/seat",
     },
     {
         label: 'Payment',
-        to: "/payment",
+        route: "/payment",
     },
     {
         label: 'Confirmation',
-        to: "/confirmation",
+        route: "/confirmation",
     }
 ]);
 const formObject = ref({});
diff --git a/doc/steps/RouterDoc.vue b/doc/steps/RouterDoc.vue
new file mode 100644
index 000000000..de745dd60
--- /dev/null
+++ b/doc/steps/RouterDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <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.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/tieredmenu/RouterDoc.vue b/doc/tieredmenu/RouterDoc.vue
index 82394cdd2..597c49be1 100644
--- a/doc/tieredmenu/RouterDoc.vue
+++ b/doc/tieredmenu/RouterDoc.vue
@@ -2,7 +2,7 @@
     <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>.
+            <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
diff --git a/pages/steps.vue b/pages/steps.vue
index d7b183cdd..63547de31 100755
--- a/pages/steps.vue
+++ b/pages/steps.vue
@@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/steps/AccessibilityDoc';
 import BasicDoc from '@/doc/steps/BasicDoc';
 import ImportDoc from '@/doc/steps/ImportDoc';
 import InteractiveDoc from '@/doc/steps/InteractiveDoc';
+import RouterDoc from '@/doc/steps/RouterDoc';
 import PTComponent from '@/doc/steps/pt/index.vue';
 import ThemingDoc from '@/doc/steps/theming/index.vue';
 
@@ -37,6 +38,11 @@ export default {
                     label: 'Interactive',
                     component: InteractiveDoc
                 },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',