docs(tabs): update

docs/app/components/content/examples/tabs/TabsContentSlotExample.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Account',
+    icon: 'i-heroicons-user'
+  },
+  {
+    label: 'Password',
+    icon: 'i-heroicons-lock-closed'
+  }
+]
+</script>
+
+<template>
+  <UTabs :items="items">
+    <template #content="{ item }">
+      <p>This is the {{ item.label }} tab.</p>
+    </template>
+  </UTabs>
+</template>

docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Account',
+    description: 'Make changes to your account here. Click save when you\'re done.',
+    icon: 'i-heroicons-user',
+    slot: 'account'
+  },
+  {
+    label: 'Password',
+    description: 'Change your password here. After saving, you\'ll be logged out.',
+    icon: 'i-heroicons-lock-closed',
+    slot: 'password'
+  }
+]
+
+const state = reactive({
+  name: 'Benjamin Canac',
+  username: 'benjamincanac',
+  currentPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+</script>
+
+<template>
+  <UTabs :items="items" variant="link" class="gap-4" :ui="{ trigger: 'flex-1' }">
+    <template #account="{ item }">
+      <p class="text-gray-500 dark:text-gray-400 mb-4">
+        {{ item.description }}
+      </p>
+
+      <UForm :state="state" class="flex flex-col gap-4">
+        <UFormField label="Name" name="name">
+          <UInput v-model="state.name" class="w-full" />
+        </UFormField>
+        <UFormField label="Username" name="username">
+          <UInput v-model="state.username" class="w-full" />
+        </UFormField>
+
+        <UButton label="Save changes" type="submit" variant="soft" class="self-end" />
+      </UForm>
+    </template>
+
+    <template #password="{ item }">
+      <p class="text-gray-500 dark:text-gray-400 mb-4">
+        {{ item.description }}
+      </p>
+
+      <UForm :state="state" class="flex flex-col gap-4">
+        <UFormField label="Current Password" name="current" required>
+          <UInput v-model="state.currentPassword" type="password" required class="w-full" />
+        </UFormField>
+        <UFormField label="New Password" name="new" required>
+          <UInput v-model="state.newPassword" type="password" required class="w-full" />
+        </UFormField>
+        <UFormField label="Confirm Password" name="confirm" required>
+          <UInput v-model="state.confirmPassword" type="password" required class="w-full" />
+        </UFormField>
+
+        <UButton label="Change password" type="submit" variant="soft" class="self-end" />
+      </UForm>
+    </template>
+  </UTabs>
+</template>

docs/app/components/content/examples/tabs/TabsModelValueExample.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Account'
+  },
+  {
+    label: 'Password'
+  }
+]
+
+const selected = ref('1')
+</script>
+
+<template>
+  <UTabs v-model="selected" :content="false" :items="items" />
+</template>

docs/content/3.components/tabs.md

@@ -30,15 +30,12 @@ hide:
 props:
   class: 'w-full'
   items:
-    - label: Tab 1
+    - label: Account
-      icon: 'i-heroicons-academic-cap'
-      content: 'Content 1'
-    - label: Tab 2
       icon: 'i-heroicons-user'
-      content: 'Content 2'
+      content: 'This is the account content.'
-    - label: Tab 3
+    - label: Password
-      icon: 'i-heroicons-bell'
+      icon: 'i-heroicons-lock-closed'
-      content: 'Content 3'
+      content: 'This is the password content.'
 ---
 ::
 
@@ -65,9 +62,8 @@ props:
   class: 'w-full'
   content: false
   items:
-    - label: Tab 1
+    - label: Account
-    - label: Tab 2
+    - label: Password
-    - label: Tab 3
 ---
 ::
 
@@ -86,12 +82,12 @@ hide:
   - class
 props:
   size: md
+  variant: pill
   class: 'w-full'
   content: false
   items:
-    - label: Tab 1
+    - label: Account
-    - label: Tab 2
+    - label: Password
-    - label: Tab 3
 ---
 ::
 
@@ -114,14 +110,73 @@ props:
   class: 'w-full'
   content: false
   items:
-    - label: Tab 1
+    - label: Account
-    - label: Tab 2
+    - label: Password
-    - label: Tab 3
+---
+::
+
+### Default value
+
+Use the `default-value` prop to set the default value of the Tabs with the index of the item. You can also pass the value of one of the items if provided.
+
+::component-code
+---
+ignore:
+  - items
+  - content
+  - defaultValue
+external:
+  - items
+hide:
+  - class
+props:
+  defaultValue: '1'
+  class: 'w-full'
+  content: false
+  items:
+    - label: Account
+    - label: Password
+---
+::
+
+### Model value
+
+You can control the selected tab by using the `v-model` directive.
+
+::component-example
+---
+name: 'tabs-model-value-example'
+props:
+  class: 'w-full'
 ---
 ::
 
 ## Examples
 
+### With content slot
+
+Use the `#content` slot to customize each item.
+
+::component-example
+---
+name: 'tabs-content-slot-example'
+props:
+  class: 'w-full'
+---
+::
+
+### With custom slot
+
+Use the `slot` property to customize a specific item with a form for example.
+
+::component-example
+---
+name: 'tabs-custom-slot-example'
+props:
+  class: 'w-full'
+---
+::
+
 ## API
 
 ### Props