mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-19 14:31:47 +01:00
chore(Tabs): improve slots
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user