chore(Tabs): move #default slot around trigger

This commit is contained in:
Benjamin Canac
2024-04-17 12:00:39 +02:00
parent 0f69f2bd4b
commit e54dd55053
3 changed files with 96 additions and 31 deletions

View File

@@ -32,8 +32,9 @@ export interface TabsEmits extends TabsRootEmits {}
type SlotProps<T> = (props: { item: T, index: number }) => any
export type TabsSlots<T> = {
leading: SlotProps<T>
default: SlotProps<T>
leading: SlotProps<T>
label: SlotProps<T>
trailing: SlotProps<T>
content: SlotProps<T>
[key: string]: SlotProps<T>
@@ -65,16 +66,18 @@ const ui = computed(() => tv({ extend: tabs, slots: props.ui })({ orientation: p
<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 name="leading" :item="item" :index="index">
<UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.leadingAvatar()" />
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" />
<slot :item="item" :index="index">
<slot name="leading" :item="item" :index="index">
<UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.leadingAvatar()" />
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" />
</slot>
<span v-if="item.label || $slots.label" :class="ui.label()">
<slot name="label" :item="item" :index="index">{{ item.label }}</slot>
</span>
<slot name="trailing" :item="item" :index="index" />
</slot>
<span v-if="item.label || $slots.default" :class="ui.label()">
<slot :item="item" :index="index">{{ item.label }}</slot>
</span>
<slot name="trailing" :item="item" :index="index" />
</TabsTrigger>
</TabsList>