From 40e42c1f698388af3cc3a30666e37ca46c49f454 Mon Sep 17 00:00:00 2001
From: Michael Meier <michael@meier.ws>
Date: Fri, 31 May 2024 11:17:41 +0200
Subject: [PATCH] doc(Tabs/TabMenu): add missing Tabs component to sample code

---
 doc/tabs/TabMenuDoc.vue | 66 ++++++++++++++++++++++-------------------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/doc/tabs/TabMenuDoc.vue b/doc/tabs/TabMenuDoc.vue
index 5f43170c9..306ead932 100644
--- a/doc/tabs/TabMenuDoc.vue
+++ b/doc/tabs/TabMenuDoc.vue
@@ -30,30 +30,34 @@ export default {
             ],
             code: {
                 basic: `
-<TabList>
-    <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
-        <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
-            <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
-                <i :class="tab.icon" />
-                <span>{{ tab.label }}</span>
-            </a>
-        </router-link>
-    </Tab>
-</TabList>
+<Tabs value="/dashboard">
+    <TabList>
+        <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
+            <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
+                <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
+                    <i :class="tab.icon" />
+                    <span>{{ tab.label }}</span>
+                </a>
+            </router-link>
+        </Tab>
+    </TabList>
+</Tabs>
 `,
                 options: `
 <template>
     <div class="card">
-        <TabList>
-            <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
-                <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
-                    <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
-                        <i :class="tab.icon" />
-                        <span>{{ tab.label }}</span>
-                    </a>
-                </router-link>
-            </Tab>
-        </TabList>
+        <Tabs value="/dashboard">
+            <TabList>
+                <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
+                    <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
+                        <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
+                            <i :class="tab.icon" />
+                            <span>{{ tab.label }}</span>
+                        </a>
+                    </router-link>
+                </Tab>
+            </TabList>
+        </Tabs>
     </div>
 </template>
 
@@ -75,16 +79,18 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TabList>
-            <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
-                <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
-                    <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
-                        <i :class="tab.icon" />
-                        <span>{{ tab.label }}</span>
-                    </a>
-                </router-link>
-            </Tab>
-        </TabList>
+        <Tabs value="/dashboard">
+            <TabList>
+                <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
+                    <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
+                        <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
+                            <i :class="tab.icon" />
+                            <span>{{ tab.label }}</span>
+                        </a>
+                    </router-link>
+                </Tab>
+            </TabList>
+        </Tabs>
     </div>
 </template>