From 279f55ee2cb1e17d38ddcf156b1203f6d3ce69b4 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 6 Aug 2024 12:41:47 +0200
Subject: [PATCH] docs(tabs): update

---
 .../examples/tabs/TabsContentSlotExample.vue  |  2 +-
 .../examples/tabs/TabsCustomSlotExample.vue   |  2 +-
 .../examples/tabs/TabsModelValueExample.vue   |  2 +-
 docs/content/3.components/tabs.md             | 59 ++++++-------------
 4 files changed, 20 insertions(+), 45 deletions(-)

diff --git a/docs/app/components/content/examples/tabs/TabsContentSlotExample.vue b/docs/app/components/content/examples/tabs/TabsContentSlotExample.vue
index 3f25fe32..035ff4af 100644
--- a/docs/app/components/content/examples/tabs/TabsContentSlotExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsContentSlotExample.vue
@@ -12,7 +12,7 @@ const items = [
 </script>
 
 <template>
-  <UTabs :items="items">
+  <UTabs :items="items" class="w-full">
     <template #content="{ item }">
       <p>This is the {{ item.label }} tab.</p>
     </template>
diff --git a/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue b/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
index 158fe5d7..066ba961 100644
--- a/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
@@ -24,7 +24,7 @@ const state = reactive({
 </script>
 
 <template>
-  <UTabs :items="items" variant="link" class="gap-4" :ui="{ trigger: 'flex-1' }">
+  <UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'flex-1' }">
     <template #account="{ item }">
       <p class="text-gray-500 dark:text-gray-400 mb-4">
         {{ item.description }}
diff --git a/docs/app/components/content/examples/tabs/TabsModelValueExample.vue b/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
index c3a8c074..88681ca2 100644
--- a/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
@@ -19,5 +19,5 @@ onMounted(() => {
 </script>
 
 <template>
-  <UTabs v-model="active" :content="false" :items="items" />
+  <UTabs v-model="active" :content="false" :items="items" class="w-full" />
 </template>
diff --git a/docs/content/3.components/tabs.md b/docs/content/3.components/tabs.md
index a7590f53..024a7c63 100644
--- a/docs/content/3.components/tabs.md
+++ b/docs/content/3.components/tabs.md
@@ -25,12 +25,10 @@ Use the `items` prop as an array of objects with the following properties:
 ---
 ignore:
   - items
+  - class
 external:
   - items
-hide:
-  - class
 props:
-  class: 'w-full'
   items:
     - label: Account
       icon: 'i-heroicons-user'
@@ -38,6 +36,7 @@ props:
     - label: Password
       icon: 'i-heroicons-lock-closed'
       content: 'This is the password content.'
+  class: 'w-full'
 ---
 ::
 
@@ -52,12 +51,10 @@ You can set it to `false` to prevent the Tabs from rendering any content and act
 ignore:
   - content
   - items
+  - class
 external:
   - items
-hide:
-  - class
 props:
-  class: 'w-full'
   content: false
   items:
     - label: Account
@@ -66,6 +63,7 @@ props:
     - label: Password
       icon: 'i-heroicons-lock-closed'
       content: 'This is the password content.'
+  class: 'w-full'
 ---
 ::
 
@@ -77,12 +75,10 @@ prettier: true
 ignore:
   - content.forceMount
   - items
+  - class
 external:
   - items
-hide:
-  - class
 props:
-  class: 'w-full'
   content:
     forceMount: false
   items:
@@ -92,6 +88,7 @@ props:
     - label: Password
       icon: 'i-heroicons-lock-closed'
       content: 'This is the password content.'
+  class: 'w-full'
 ---
 ::
 
@@ -108,17 +105,16 @@ Use the `color` prop to change the color of the Tabs.
 ignore:
   - content
   - items
+  - class
 external:
   - items
-hide:
-  - class
 props:
   color: gray
-  class: 'w-full'
   content: false
   items:
     - label: Account
     - label: Password
+  class: 'w-full'
 ---
 ::
 
@@ -131,18 +127,17 @@ Use the `variant` prop to change the variant of the Tabs.
 ignore:
   - content
   - items
+  - class
 external:
   - items
-hide:
-  - class
 props:
   color: gray
   variant: link
-  class: 'w-full'
   content: false
   items:
     - label: Account
     - label: Password
+  class: 'w-full'
 ---
 ::
 
@@ -155,18 +150,17 @@ Use the `size` prop to change the size of the Tabs.
 ignore:
   - content
   - items
+  - class
 external:
   - items
-hide:
-  - class
 props:
   size: md
   variant: pill
-  class: 'w-full'
   content: false
   items:
     - label: Account
     - label: Password
+  class: 'w-full'
 ---
 ::
 
@@ -179,18 +173,17 @@ Use the `orientation` prop to change the orientation of the Tabs. Defaults to `h
 ignore:
   - content
   - items
+  - class
 external:
   - items
-hide:
-  - class
 props:
   orientation: vertical
   variant: pill
-  class: 'w-full'
   content: false
   items:
     - label: Account
     - label: Password
+  class: 'w-full'
 ---
 ::
 
@@ -200,13 +193,7 @@ props:
 
 You can control the active tab by using the `default-value` prop or the `v-model` directive with the index of the item.
 
-::component-example
----
-name: 'tabs-model-value-example'
-props:
-  class: 'w-full'
----
-::
+:component-example{name="tabs-model-value-example"}
 
 ::tip
 You can also pass the `value` of one of the items if provided.
@@ -216,25 +203,13 @@ You can also pass the `value` of one of the items if provided.
 
 Use the `#content` slot to customize the content of each item.
 
-::component-example
----
-name: 'tabs-content-slot-example'
-props:
-  class: 'w-full'
----
-::
+:component-example{name="tabs-content-slot-example"}
 
 ### With custom slot
 
 Use the `slot` property to customize a specific item.
 
-::component-example
----
-name: 'tabs-custom-slot-example'
-props:
-  class: 'w-full'
----
-::
+:component-example{name="tabs-custom-slot-example"}
 
 ## API