chore(Accordion): move #default slot around trigger

This commit is contained in:
Benjamin Canac
2024-04-17 12:00:12 +02:00
parent ab83053fef
commit 0f69f2bd4b
3 changed files with 285 additions and 64 deletions

View File

@@ -31,8 +31,9 @@ export interface AccordionEmits extends AccordionRootEmits {}
type SlotProps<T> = (props: { item: T, index: number }) => any
export type AccordionSlots<T> = {
leading: SlotProps<T>
default: SlotProps<T>
leading: SlotProps<T>
label: SlotProps<T>
trailing: SlotProps<T>
content: SlotProps<T>
[key: string]: SlotProps<T>
@@ -64,16 +65,18 @@ const ui = computed(() => tv({ extend: accordion, slots: props.ui })({ disabled:
<AccordionItem v-for="(item, index) in items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.item()">
<AccordionHeader :class="ui.header()">
<AccordionTrigger :class="ui.trigger({ disabled: item.disabled })">
<slot name="leading" :item="item" :index="index">
<UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" />
</slot>
<slot :item="item" :index="index">
<slot name="leading" :item="item" :index="index">
<UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" />
</slot>
<span v-if="item.label || $slots.default" :class="ui.label()">
<slot :item="item" :index="index">{{ item.label }}</slot>
</span>
<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">
<UIcon :name="appConfig.ui.icons.chevronDown" :class="ui.trailingIcon()" />
<slot name="trailing" :item="item" :index="index">
<UIcon :name="appConfig.ui.icons.chevronDown" :class="ui.trailingIcon()" />
</slot>
</slot>
</AccordionTrigger>
</AccordionHeader>