docs(Tabs): improve

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

@@ -8,16 +8,16 @@ const items = [
   }
 ]
 
-const selected = ref('1')
+const active = ref('1')
 
 // Note: This is for demonstration purposes only.
 onMounted(() => {
   setInterval(() => {
-    selected.value = selected.value === '0' ? '1' : '0'
-  }, 1000)
+    active.value = active.value === '0' ? '1' : '0'
+  }, 2000)
 })
 </script>
 
 <template>
-  <UTabs v-model="selected" :content="false" :items="items" />
+  <UTabs v-model="active" :content="false" :items="items" />
 </template>

docs/content/3.components/tabs.md

@@ -18,9 +18,9 @@ Use the `items` prop as an array of objects with the following properties:
 - `label?: string`{lang="ts-type"}
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
-- `slot?: string`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `content?: string`{lang="ts-type"}
-- `value?: StringOrNumber`{lang="ts-type"}
+- `value?: string | number`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 
 ::component-code
@@ -119,25 +119,25 @@ props:
 
 ## Examples
 
-### Control selected tab
+### Control active tab
 
-You can control the selected tab by using the `default-value` prop or the `v-model` directive with the index of the item.
+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-selected-example'
+name: 'tabs-model-value-example'
 props:
   class: 'w-full'
 ---
 ::
 
 ::tip
-You can also pass the value of one of the items if provided.
+You can also pass the `value` of one of the items if provided.
 ::
 
 ### With content slot
 
-Use the `#content` slot to customize each item.
+Use the `#content` slot to customize the content of each item.
 
 ::component-example
 ---
@@ -149,7 +149,7 @@ props:
 
 ### With custom slot
 
-Use the `slot` property to customize a specific item with a form for example.
+Use the `slot` property to customize a specific item.
 
 ::component-example
 ---

src/runtime/components/Tabs.vue

@@ -11,17 +11,19 @@ const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme>
 
 const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
 
-export interface TabsItem extends Partial<Pick<TabsTriggerProps, 'disabled' | 'value'>> {
+export interface TabsItem extends Pick<TabsTriggerProps, 'disabled'> {
   label?: string
   icon?: string
   avatar?: AvatarProps
   slot?: string
   content?: string
+  /** A unique value for the tab item. Defaults to the index. */
+  value?: string | number
 }
 
 type TabsVariants = VariantProps<typeof tabs>
 
-export interface TabsProps<T> extends Pick<TabsRootProps, 'defaultValue' | 'modelValue' | 'activationMode'> {
+export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -45,7 +47,7 @@ export interface TabsProps<T> extends Pick<TabsRootProps, 'defaultValue' | 'mode
   ui?: PartialString<typeof tabs.slots>
 }
 
-export interface TabsEmits extends TabsRootEmits {}
+export interface TabsEmits extends TabsRootEmits<string | number> {}
 
 type SlotProps<T> = (props: { item: T, index: number }) => any