chore(Tabs): improve slots

This commit is contained in:
Benjamin Canac
2024-03-21 12:54:39 +01:00
parent 2756d35458
commit f4a1d4a7c3
3 changed files with 12 additions and 16 deletions

View File

@@ -10,7 +10,7 @@ const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme>
const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
export interface TabsItem {
label: string
label?: string
value?: string
slot?: string
disabled?: boolean
@@ -25,13 +25,13 @@ export interface TabsProps<T extends TabsItem> extends Omit<TabsRootProps, 'asCh
export interface TabsEmits extends TabsRootEmits {}
type SlotFunction<T> = (props: { item: T, index: number }) => any
type SlotProps<T> = (props: { item: T, index: number }) => any
export type TabsSlots<T extends TabsItem> = {
default(): any
content(): SlotFunction<T>
default: SlotProps<T>
content: SlotProps<T>
} & {
[key in T['slot'] as string]?: SlotFunction<T>
[key in T['slot'] as string]?: SlotProps<T>
}
</script>
@@ -54,9 +54,9 @@ const ui = computed(() => tv({ extend: tabs, slots: props.ui })())
<TabsIndicator :class="ui.indicator()" />
<TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger()">
<slot :item="item" :index="index">
<span class="truncate">{{ item.label }}</span>
</slot>
<span v-if="item.label || $slots.default" :class="ui.label()">
<slot :item="item" :index="index">{{ item.label }}</slot>
</span>
</TabsTrigger>
</TabsList>