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