TabMenu router docs added

doc/tabmenu/BasicDoc.vue

@@ -1,9 +1,18 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Steps requires a collection of menuitems as its <i>model</i>. TabMenu can be also integrated with Vue Router.</p>
+        <p>TabMenu requires a collection of menuitems as its <i>model</i>.</p>
     </DocSectionText>
     <div class="card">
-        <TabMenu :model="items" />
+        <TabMenu v-model:activeIndex="active" :model="items">
+            <template #item="{ label, item, 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.space="($event) => routerProps.navigate($event)">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+            </template>
+        </TabMenu>
         <router-view />
     </div>
     <DocSectionCode :code="code" />
@@ -13,19 +22,38 @@
 export default {
     data() {
         return {
+            active: 0,
             items: [
-                { label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu' },
+                { label: 'Home', icon: 'pi pi-fw pi-home', route: '/tabmenu' },
-                { label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar' },
+                { label: 'Calendar', icon: 'pi pi-fw pi-calendar', route: '/tabmenu/calendar' },
-                { label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit' },
+                { label: 'Edit', icon: 'pi pi-fw pi-pencil', route: '/tabmenu/edit' },
-                { label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation' },
+                { label: 'Documentation', icon: 'pi pi-fw pi-file', route: '/tabmenu/documentation' },
-                { label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings' }
+                { label: 'Settings', icon: 'pi pi-fw pi-cog', route: '/tabmenu/settings' }
             ],
             code: {
-                basic: `<TabMenu :model="items" />
+                basic: `<TabMenu v-model:activeIndex="active" :model="items">
+    <template #item="{ label, item, 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.space="($event) => routerProps.navigate($event)">
+                <span v-bind="props.icon" />
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+    </template>
+</TabMenu>
 <router-view />`,
                 options: `<template>
     <div class="card">
-        <TabMenu :model="items" />
+        <TabMenu v-model:activeIndex="active" :model="items">
+            <template #item="{ label, item, 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.space="($event) => routerProps.navigate($event)">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+            </template>
+        </TabMenu>
         <router-view />
     </div>
 </template>
@@ -34,75 +62,109 @@ export default {
 export default {
     data() {
         return {
+            active: 0,
             items: [
                 {
                     label: 'Home',
                     icon: 'pi pi-fw pi-home',
-                    to: '/'
+                    route: '/'
                 },
                 {
                     label: 'Calendar',
                     icon: 'pi pi-fw pi-calendar',
-                    to: '/calendar'
+                    route: '/calendar'
                 },
                 {
                     label: 'Edit',
                     icon: 'pi pi-fw pi-pencil',
-                    to: '/edit'
+                    route: '/edit'
                 },
                 {
                     label: 'Documentation',
                     icon: 'pi pi-fw pi-file',
-                    to: '/documentation'
+                    route: '/documentation'
                 },
                 {
                     label: 'Settings',
                     icon: 'pi pi-fw pi-cog',
-                    to: '/settings'
+                    route: '/settings'
                 }
             ]
         }
+    },
+    watch: {
+        $route() {
+            this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
+        }
+    },
+    mounted() {
+        this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
     }
 }
 <\/script>`,
                 composition: `<template>
     <div class="card">
-        <TabMenu :model="items" />
+        <TabMenu v-model:activeIndex="active" :model="items">
+            <template #item="{ label, item, 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.space="($event) => routerProps.navigate($event)">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+            </template>
+        </TabMenu>
         <router-view />
     </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
 
+const router = useRouter();
+const route = useRoute();
+
+const actvie = ref(0);
 const items = ref([
     {
         label: 'Home',
         icon: 'pi pi-fw pi-home',
-        to: '/'
+        route: '/'
     },
     {
         label: 'Calendar',
         icon: 'pi pi-fw pi-calendar',
-        to: '/calendar'
+        route: '/calendar'
     },
     {
         label: 'Edit',
         icon: 'pi pi-fw pi-pencil',
-        to: '/edit'
+        route: '/edit'
     },
     {
         label: 'Documentation',
         icon: 'pi pi-fw pi-file',
-        to: '/documentation'
+        route: '/documentation'
     },
     {
         label: 'Settings',
         icon: 'pi pi-fw pi-cog',
-        to: '/settings'
+        route: '/settings'
     }
 ]);
 
+onMounted(() => {
+    active.value = items.value.findIndex((item) => route.path === router.resolve(item.route).path);
+})
+
+watch(
+    route,
+    () => {
+        active.value = items.value.findIndex((item) => route.path === router.resolve(item.route).path);
+    },
+    { immediate: true }
+);
 <\/script>`,
                 pages: [
                     {
@@ -187,6 +249,14 @@ export default {
                 ]
             }
         };
+    },
+    watch: {
+        $route() {
+            this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
+        }
+    },
+    mounted() {
+        this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
     }
 };
 </script>

doc/tabmenu/RouterDoc.vue

@@ -0,0 +1,293 @@
+<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 example with vue-router.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <TabMenu v-model:activeIndex="active" :model="items">
+            <template #item="{ label, item, 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.space="($event) => routerProps.navigate($event)">
+                        <span v-bind="props.icon" />
+                        <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.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </TabMenu>
+        <router-view />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: 0,
+            items: [
+                { label: 'Home', icon: 'pi pi-fw pi-home', route: '/tabmenu' },
+                { label: 'Calendar', icon: 'pi pi-fw pi-calendar', route: '/tabmenu/calendar' },
+                { label: 'Edit', icon: 'pi pi-fw pi-pencil', route: '/tabmenu/edit' },
+                { label: 'Documentation', icon: 'pi pi-fw pi-file', route: '/tabmenu/documentation' },
+                { label: 'Settings', icon: 'pi pi-fw pi-cog', route: '/tabmenu/settings' },
+                { label: 'FileUpload', icon: 'pi pi-fw pi-upload', url: '/fileupload' }
+            ],
+            code: {
+                basic: `<TabMenu v-model:activeIndex="active" :model="items">
+    <template #item="{ label, item, 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.space="($event) => routerProps.navigate($event)">
+                <span v-bind="props.icon" />
+                <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.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+        </a>
+    </template>
+</TabMenu>
+<router-view />`,
+                options: `<template>
+    <div class="card">
+        <TabMenu v-model:activeIndex="active" :model="items">
+            <template #item="{ label, item, 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.space="($event) => routerProps.navigate($event)">
+                        <span v-bind="props.icon" />
+                        <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.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </TabMenu>
+        <router-view />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: 0,
+            items: [
+                {
+                    label: 'Home',
+                    icon: 'pi pi-fw pi-home',
+                    route: '/'
+                },
+                {
+                    label: 'Calendar',
+                    icon: 'pi pi-fw pi-calendar',
+                    route: '/calendar'
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    route: '/edit'
+                },
+                {
+                    label: 'Documentation',
+                    icon: 'pi pi-fw pi-file',
+                    route: '/documentation'
+                },
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog',
+                    route: '/settings'
+                },
+                { 
+                    label: 'FileUpload',
+                    icon: 'pi pi-fw pi-upload',
+                    url: '/fileupload'
+                }
+            ]
+        }
+    },
+    watch: {
+        $route() {
+            this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
+        }
+    },
+    mounted() {
+        this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
+    }
+}
+<\/script>`,
+                composition: `<template>
+    <div class="card">
+        <TabMenu v-model:activeIndex="active" :model="items">
+            <template #item="{ label, item, 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.space="($event) => routerProps.navigate($event)">
+                        <span v-bind="props.icon" />
+                        <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.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </TabMenu>
+        <router-view />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+
+const actvie = ref(0);
+const items = ref([
+    {
+        label: 'Home',
+        icon: 'pi pi-fw pi-home',
+        route: '/'
+    },
+    {
+        label: 'Calendar',
+        icon: 'pi pi-fw pi-calendar',
+        route: '/calendar'
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        route: '/edit'
+    },
+    {
+        label: 'Documentation',
+        icon: 'pi pi-fw pi-file',
+        route: '/documentation'
+    },
+    {
+        label: 'Settings',
+        icon: 'pi pi-fw pi-cog',
+        route: '/settings'
+    },
+    { 
+        label: 'FileUpload',
+        icon: 'pi pi-fw pi-upload',
+        url: '/fileupload'
+    }
+]);
+
+onMounted(() => {
+    active.value = items.value.findIndex((item) => route.path === router.resolve(item.route).path);
+})
+
+watch(
+    route,
+    () => {
+        active.value = items.value.findIndex((item) => route.path === router.resolve(item.route).path);
+    },
+    { immediate: true }
+);
+
+<\/script>`,
+                pages: [
+                    {
+                        tabName: 'HomeDemo',
+                        content: `
+<template>
+    <div class="p-4">
+        <h5>Home Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+<\/script>
+`
+                    },
+                    {
+                        tabName: 'CalendarDemo',
+                        content: `
+<template>
+    <div class="p-4">
+        <h5>Calendar Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+<\/script>
+`
+                    },
+                    {
+                        tabName: 'EditDemo',
+                        content: `
+<template>
+    <div class="p-4">
+        <h5>Edit Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+<\/script>
+`
+                    },
+                    {
+                        tabName: 'DocumentationDemo',
+                        content: `
+<template>
+    <div class="p-4">
+        <h5>Documentation Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+<\/script>
+`
+                    },
+                    {
+                        tabName: 'SettingsDemo',
+                        content: `
+<template>
+    <div class="p-4">
+        <h5>Settings Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+<\/script>`
+                    }
+                ]
+            }
+        };
+    },
+    watch: {
+        $route() {
+            this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
+        }
+    },
+    mounted() {
+        this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
+    }
+};
+</script>

pages/tabmenu.vue

@@ -17,6 +17,7 @@ import AccessibilityDoc from '../doc/tabmenu/AccessibilityDoc.vue';
 import BasicDoc from '../doc/tabmenu/BasicDoc.vue';
 import ControlledDoc from '../doc/tabmenu/ControlledDoc.vue';
 import ImportDoc from '../doc/tabmenu/ImportDoc.vue';
+import RouterDoc from '../doc/tabmenu/RouterDoc.vue';
 
 export default {
     data() {
@@ -37,6 +38,11 @@ export default {
                     label: 'Controlled',
                     component: ControlledDoc
                 },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',