diff --git a/docs/app/components/content/examples/tabs/TabsSelectedExample.vue b/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
similarity index 59%
rename from docs/app/components/content/examples/tabs/TabsSelectedExample.vue
rename to docs/app/components/content/examples/tabs/TabsModelValueExample.vue
index 34d3ecc2..ea1ff251 100644
--- a/docs/app/components/content/examples/tabs/TabsSelectedExample.vue
+++ b/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)
})
-
+
diff --git a/docs/content/3.components/tabs.md b/docs/content/3.components/tabs.md
index e8c91c21..46321a46 100644
--- a/docs/content/3.components/tabs.md
+++ b/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
---
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index fc67814c..576cc7df 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -11,17 +11,19 @@ const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial
const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
-export interface TabsItem extends Partial> {
+export interface TabsItem extends Pick {
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
-export interface TabsProps extends Pick {
+export interface TabsProps extends Pick, 'defaultValue' | 'modelValue' | 'activationMode'> {
/**
* The element or component this component should render as.
* @defaultValue 'div'
@@ -45,7 +47,7 @@ export interface TabsProps extends Pick
}
-export interface TabsEmits extends TabsRootEmits {}
+export interface TabsEmits extends TabsRootEmits {}
type SlotProps = (props: { item: T, index: number }) => any