From 280ee0c8888ec621774d410599e8b6949c1606c9 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 9 Nov 2023 11:28:04 +0300
Subject: [PATCH] Updated tabmenu docs

---
 doc/tabmenu/BasicDoc.vue        | 234 ++-------------------------
 doc/tabmenu/CommandDoc.vue      | 147 +++++++++++++++++
 doc/tabmenu/ControlledDoc.vue   | 113 +++++--------
 doc/tabmenu/RouterDoc.vue       | 279 ++++----------------------------
 doc/tabmenu/TemplateDoc.vue     |  94 +++++++++++
 pages/tabmenu.vue               |  57 -------
 pages/tabmenu/Calendar.vue      |   9 --
 pages/tabmenu/Documentation.vue |   9 --
 pages/tabmenu/Edit.vue          |   9 --
 pages/tabmenu/Settings.vue      |   9 --
 pages/tabmenu/index.vue         |  68 +++++++-
 11 files changed, 398 insertions(+), 630 deletions(-)
 create mode 100644 doc/tabmenu/CommandDoc.vue
 create mode 100644 doc/tabmenu/TemplateDoc.vue
 delete mode 100755 pages/tabmenu.vue
 delete mode 100755 pages/tabmenu/Calendar.vue
 delete mode 100755 pages/tabmenu/Documentation.vue
 delete mode 100755 pages/tabmenu/Edit.vue
 delete mode 100755 pages/tabmenu/Settings.vue

diff --git a/doc/tabmenu/BasicDoc.vue b/doc/tabmenu/BasicDoc.vue
index 8148b975a..153dcaf7e 100644
--- a/doc/tabmenu/BasicDoc.vue
+++ b/doc/tabmenu/BasicDoc.vue
@@ -3,17 +3,7 @@
         <p>TabMenu requires a collection of menuitems as its <i>model</i>.</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>
-            </template>
-        </TabMenu>
-        <router-view />
+        <TabMenu :model="items" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,42 +12,20 @@
 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: 'Dashboard', icon: 'pi pi-home' },
+                { label: 'Transactions', icon: 'pi pi-chart-line' },
+                { label: 'Products', icon: 'pi pi-list' },
+                { label: 'Messages', icon: 'pi pi-inbox' }
             ],
             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>
-    </template>
-</TabMenu>
-<router-view />
+<TabMenu :model="items" />
 `,
                 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>
-            </template>
-        </TabMenu>
-        <router-view />
+        <TabMenu :model="items" />
     </div>
 </template>
 
@@ -65,43 +33,13 @@ export default {
 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: 'Dashboard', icon: 'pi pi-home' },
+                { label: 'Transactions', icon: 'pi pi-chart-line' },
+                { label: 'Products', icon: 'pi pi-list' },
+                { label: 'Messages', icon: 'pi pi-inbox' }
             ]
         }
-    },
-    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>
@@ -109,161 +47,23 @@ export default {
                 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>
-            </template>
-        </TabMenu>
-        <router-view />
+        <TabMenu :model="items" />
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { ref } from "vue";
 
-const router = useRouter();
-const route = useRoute();
-
-const active = 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: 'Dashboard', icon: 'pi pi-home' },
+    { label: 'Transactions', icon: 'pi pi-chart-line' },
+    { label: 'Products', icon: 'pi pi-list' },
+    { label: 'Messages', icon: 'pi pi-inbox' }
 ]);
-
-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>
diff --git a/doc/tabmenu/CommandDoc.vue b/doc/tabmenu/CommandDoc.vue
new file mode 100644
index 000000000..360c59d82
--- /dev/null
+++ b/doc/tabmenu/CommandDoc.vue
@@ -0,0 +1,147 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
+    </DocSectionText>
+    <div class="card">
+        <TabMenu :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Dashboard',
+                    icon: 'pi pi-home',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Transactions',
+                    icon: 'pi pi-chart-line',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Products',
+                    icon: 'pi pi-list',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Messages',
+                    icon: 'pi pi-inbox',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<TabMenu :model="items" />
+<Toast />
+`,
+                options: `
+<template>
+    <div class="card">
+        <TabMenu :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Dashboard',
+                    icon: 'pi pi-home',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Transactions',
+                    icon: 'pi pi-chart-line',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Products',
+                    icon: 'pi pi-list',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Messages',
+                    icon: 'pi pi-inbox',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
+                    }
+                }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TabMenu :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useToast } from "primevue/usetoast";
+
+const toast = useToast();
+
+const items = ref([
+    {
+        label: 'Dashboard',
+        icon: 'pi pi-home',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
+        }
+    },
+    {
+        label: 'Transactions',
+        icon: 'pi pi-chart-line',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
+        }
+    },
+    {
+        label: 'Products',
+        icon: 'pi pi-list',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
+        }
+    },
+    {
+        label: 'Messages',
+        icon: 'pi pi-inbox',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
+        }
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabmenu/ControlledDoc.vue b/doc/tabmenu/ControlledDoc.vue
index c18d14460..0c5ed9845 100644
--- a/doc/tabmenu/ControlledDoc.vue
+++ b/doc/tabmenu/ControlledDoc.vue
@@ -1,9 +1,14 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
+        <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
     </DocSectionText>
     <div class="card">
-        <Button @click="active = 0" text outlined class="mb-2" label="Activate 1st" />
+        <div class="flex mb-2 gap-2 justify-content-end">
+            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        </div>
+
         <TabMenu v-model:activeIndex="active" :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -13,38 +18,32 @@
 export default {
     data() {
         return {
-            active: 3,
+            active: 0,
             items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-fw pi-home'
-                },
-                {
-                    label: 'Calendar',
-                    icon: 'pi pi-fw pi-calendar'
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil'
-                },
-                {
-                    label: 'Documentation',
-                    icon: 'pi pi-fw pi-file'
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog'
-                }
+                { label: 'Dashboard', icon: 'pi pi-home' },
+                { label: 'Transactions', icon: 'pi pi-chart-line' },
+                { label: 'Products', icon: 'pi pi-list' },
+                { label: 'Messages', icon: 'pi pi-inbox' }
             ],
             code: {
                 basic: `
-<Button @click="active = 0" text outlined label="Activate 1st" />
+<div class="flex mb-2 gap-2 justify-content-end">
+    <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+    <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+    <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+</div>
+
 <TabMenu v-model:activeIndex="active" :model="items" />
 `,
                 options: `
 <template>
     <div class="card">
-        <Button @click="active = 0" text outlined label="Activate 1st" />
+        <div class="flex mb-2 gap-2 justify-content-end">
+            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        </div>
+
         <TabMenu v-model:activeIndex="active" :model="items" />
     </div>
 </template>
@@ -53,38 +52,27 @@ export default {
 export default {
     data() {
         return {
-            active: 3,
+            active: 0,
             items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-fw pi-home'
-                },
-                {
-                    label: 'Calendar',
-                    icon: 'pi pi-fw pi-calendar'
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil'
-                },
-                {
-                    label: 'Documentation',
-                    icon: 'pi pi-fw pi-file'
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog'
-                }
+                { label: 'Dashboard', icon: 'pi pi-home' },
+                { label: 'Transactions', icon: 'pi pi-chart-line' },
+                { label: 'Products', icon: 'pi pi-list' },
+                { label: 'Messages', icon: 'pi pi-inbox' }
             ]
-        };
+        }
     }
-};
+}
 <\/script>
 `,
                 composition: `
 <template>
     <div class="card">
-        <Button @click="active = 0" text outlined label="Activate 1st" />
+        <div class="flex mb-2 gap-2 justify-content-end">
+            <Button @click="active.value = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active.value = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active.value = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        </div>
+
         <TabMenu v-model:activeIndex="active" :model="items" />
     </div>
 </template>
@@ -92,28 +80,13 @@ export default {
 <script setup>
 import { ref } from "vue";
 
-const active = ref(3);
+const active = ref(0);
+
 const items = ref([
-    {
-        label: 'Home',
-        icon: 'pi pi-fw pi-home'
-    },
-    {
-        label: 'Calendar',
-        icon: 'pi pi-fw pi-calendar'
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil'
-    },
-    {
-        label: 'Documentation',
-        icon: 'pi pi-fw pi-file'
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog'
-    }
+    { label: 'Dashboard', icon: 'pi pi-home' },
+    { label: 'Transactions', icon: 'pi pi-chart-line' },
+    { label: 'Products', icon: 'pi pi-list' },
+    { label: 'Messages', icon: 'pi pi-inbox' }
 ]);
 <\/script>
 `
diff --git a/doc/tabmenu/RouterDoc.vue b/doc/tabmenu/RouterDoc.vue
index e80b53550..d6d72fad1 100644
--- a/doc/tabmenu/RouterDoc.vue
+++ b/doc/tabmenu/RouterDoc.vue
@@ -1,27 +1,23 @@
 <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>
+        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</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)">
+    <div class="card">
+        <TabMenu :model="items">
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
                         <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
+                        <span v-bind="props.label">{{ item.label }}</span>
                     </a>
                 </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
                     <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
+                    <span v-bind="props.label">{{ item.label }}</span>
                 </a>
             </template>
         </TabMenu>
-        <router-view />
-    </div> -->
+    </div>
     <DocSectionCode :code="code" />
 </template>
 
@@ -29,51 +25,25 @@
 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' }
-            // ],
+            items: [
+                { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-palette',
+                    command: () => {
+                        this.$router.push('/unstyled');
+                    }
+                },
+                { label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
+            ],
             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 />
+<TabMenu :model="items" />
 `,
                 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 />
+        <TabMenu :model="items" />
     </div>
 </template>
 
@@ -81,48 +51,13 @@ export default {
 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'
-                }
+                { label: 'Dashboard', icon: 'pi pi-home' },
+                { label: 'Transactions', icon: 'pi pi-chart-line' },
+                { label: 'Products', icon: 'pi pi-list' },
+                { label: 'Messages', icon: 'pi pi-inbox' }
             ]
         }
-    },
-    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>
@@ -130,171 +65,23 @@ export default {
                 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 />
+        <TabMenu :model="items" />
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { ref } from "vue";
 
-const router = useRouter();
-const route = useRoute();
-
-const active = 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'
-    }
+    { label: 'Dashboard', icon: 'pi pi-home' },
+    { label: 'Transactions', icon: 'pi pi-chart-line' },
+    { label: 'Products', icon: 'pi pi-list' },
+    { label: 'Messages', icon: 'pi pi-inbox' }
 ]);
-
-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>
diff --git a/doc/tabmenu/TemplateDoc.vue b/doc/tabmenu/TemplateDoc.vue
new file mode 100644
index 000000000..06e060e9b
--- /dev/null
+++ b/doc/tabmenu/TemplateDoc.vue
@@ -0,0 +1,94 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TabMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+    </DocSectionText>
+    <div class="card">
+        <TabMenu :model="items">
+            <template #item="{ item, props }">
+                <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+                    <img :alt="item.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${item.image}`" style="width: 32px" />
+                    <span class="font-bold">{{ item.name }}</span>
+                </a>
+            </template>
+        </TabMenu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
+            ],
+            code: {
+                basic: `
+<TabMenu :model="items">
+    <template #item="{ item, props }">
+        <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+            <img :alt="item.name" :src="\`/images/avatar/\${item.image}\`" style="width: 32px" />
+            <span class="font-bold">{{ item.name }}</span>
+        </a>
+    </template>
+</TabMenu>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TabMenu :model="items">
+            <template #item="{ item, props }">
+                <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+                    <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
+                    <span class="font-bold">{{ item.name }}</span>
+                </a>
+            </template>
+        </TabMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TabMenu :model="items">
+            <template #item="{ item, props }">
+                <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+                    <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
+                    <span class="font-bold">{{ item.name }}</span>
+                </a>
+            </template>
+        </TabMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/tabmenu.vue b/pages/tabmenu.vue
deleted file mode 100755
index 94f529e0e..000000000
--- a/pages/tabmenu.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue TabMenu Component"
-        header="TabMenu"
-        description="TabMenu is a navigation/command component that displays items as tab headers."
-        :componentDocs="docs"
-        :apiDocs="['TabMenu', 'MenuItem']"
-        :ptTabComponent="ptComponent"
-        :themingDocs="themingDoc"
-    />
-</template>
-
-<script>
-import PTComponent from '@/doc/tabmenu/pt/index.vue';
-import ThemingDoc from '@/doc/tabmenu/theming/index.vue';
-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() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'router',
-                    label: 'Router',
-                    component: RouterDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            ptComponent: PTComponent,
-            themingDoc: ThemingDoc
-        };
-    }
-};
-</script>
diff --git a/pages/tabmenu/Calendar.vue b/pages/tabmenu/Calendar.vue
deleted file mode 100755
index 66e22b018..000000000
--- a/pages/tabmenu/Calendar.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="p-4">
-        <h3>Calendar Component Content</h3>
-    </div>
-</template>
-
-<script>
-export default {};
-</script>
diff --git a/pages/tabmenu/Documentation.vue b/pages/tabmenu/Documentation.vue
deleted file mode 100755
index 92ce7b82d..000000000
--- a/pages/tabmenu/Documentation.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="p-4">
-        <h3>Documentation Component Content</h3>
-    </div>
-</template>
-
-<script>
-export default {};
-</script>
diff --git a/pages/tabmenu/Edit.vue b/pages/tabmenu/Edit.vue
deleted file mode 100755
index 1dd70c31f..000000000
--- a/pages/tabmenu/Edit.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="p-4">
-        <h3>Edit Component Content</h3>
-    </div>
-</template>
-
-<script>
-export default {};
-</script>
diff --git a/pages/tabmenu/Settings.vue b/pages/tabmenu/Settings.vue
deleted file mode 100755
index b0c6d8ae4..000000000
--- a/pages/tabmenu/Settings.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="p-4">
-        <h3>Settings Component Content</h3>
-    </div>
-</template>
-
-<script>
-export default {};
-</script>
diff --git a/pages/tabmenu/index.vue b/pages/tabmenu/index.vue
index 467345483..3676b0fe6 100755
--- a/pages/tabmenu/index.vue
+++ b/pages/tabmenu/index.vue
@@ -1,9 +1,69 @@
 <template>
-    <div class="p-4">
-        <h3>Home Component Content</h3>
-    </div>
+    <DocComponent
+        title="Vue TabMenu Component"
+        header="TabMenu"
+        description="TabMenu is a navigation component displaying menu items as tabs."
+        :componentDocs="docs"
+        :apiDocs="['TabMenu', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
-export default {};
+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';
+import CommandDoc from '@/doc/tabmenu/CommandDoc.vue';
+import TemplateDoc from '@/doc/tabmenu/TemplateDoc.vue';
+import PTComponent from '@/doc/tabmenu/pt/index.vue';
+import ThemingDoc from '@/doc/tabmenu/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'controlled',
+                    label: 'Controlled',
+                    component: ControlledDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'command',
+                    label: 'Command',
+                    component: CommandDoc
+                },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
+        };
+    }
+};
 </script>