feat(Tabs): add list-leading and list-trailing slots (#3837)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Guillaume Chau
2025-04-10 21:50:20 +02:00
committed by GitHub
parent 063a23e738
commit 3447a062b6
2 changed files with 18 additions and 4 deletions

View File

@@ -73,10 +73,12 @@ export interface TabsEmits extends TabsRootEmits<string | number> {}
type SlotProps<T extends TabsItem> = (props: { item: T, index: number }) => any
export type TabsSlots<T extends TabsItem = TabsItem> = {
leading: SlotProps<T>
default: SlotProps<T>
trailing: SlotProps<T>
content: SlotProps<T>
'leading': SlotProps<T>
'default': SlotProps<T>
'trailing': SlotProps<T>
'content': SlotProps<T>
'list-leading': (props?: {}) => any
'list-trailing': (props?: {}) => any
} & DynamicSlots<T, undefined, { index: number }>
</script>
@@ -114,6 +116,8 @@ const ui = computed(() => tabs({
<TabsList :class="ui.list({ class: props.ui?.list })">
<TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
<slot name="list-leading" />
<TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: props.ui?.trigger })">
<slot name="leading" :item="item" :index="index">
<UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
@@ -126,6 +130,8 @@ const ui = computed(() => tabs({
<slot name="trailing" :item="item" :index="index" />
</TabsTrigger>
<slot name="list-trailing" />
</TabsList>
<template v-if="!!content">