mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-26 18:00:43 +01:00
fix(components): improve generic types (#3331)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
@@ -26,9 +26,10 @@ export interface AccordionItem {
|
||||
/** A unique value for the accordion item. Defaults to the index. */
|
||||
value?: string
|
||||
disabled?: boolean
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
|
||||
export interface AccordionProps<T extends AccordionItem = AccordionItem> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
|
||||
/**
|
||||
* The element or component this component should render as.
|
||||
* @defaultValue 'div'
|
||||
@@ -52,15 +53,15 @@ export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible
|
||||
|
||||
export interface AccordionEmits extends AccordionRootEmits {}
|
||||
|
||||
type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
|
||||
type SlotProps<T extends AccordionItem> = (props: { item: T, index: number, open: boolean }) => any
|
||||
|
||||
export type AccordionSlots<T extends { slot?: string }> = {
|
||||
export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
|
||||
leading: SlotProps<T>
|
||||
default: SlotProps<T>
|
||||
trailing: SlotProps<T>
|
||||
content: SlotProps<T>
|
||||
body: SlotProps<T>
|
||||
} & DynamicSlots<T, SlotProps<T>>
|
||||
} & DynamicSlots<T, 'body', { index: number, open: boolean }>
|
||||
|
||||
</script>
|
||||
|
||||
@@ -92,7 +93,7 @@ const ui = computed(() => accordion({
|
||||
<template>
|
||||
<AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
|
||||
<AccordionItem
|
||||
v-for="(item, index) in items"
|
||||
v-for="(item, index) in props.items"
|
||||
v-slot="{ open }"
|
||||
:key="index"
|
||||
:value="item.value || String(index)"
|
||||
@@ -115,10 +116,10 @@ const ui = computed(() => accordion({
|
||||
</AccordionTrigger>
|
||||
</AccordionHeader>
|
||||
|
||||
<AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body`])" :class="ui.content({ class: props.ui?.content })">
|
||||
<slot :name="item.slot || 'content'" :item="item" :index="index" :open="open">
|
||||
<AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot as keyof AccordionSlots<T>]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body` as keyof AccordionSlots<T>])" :class="ui.content({ class: props.ui?.content })">
|
||||
<slot :name="((item.slot || 'content') as keyof AccordionSlots<T>)" :item="item" :index="index" :open="open">
|
||||
<div :class="ui.body({ class: props.ui?.body })">
|
||||
<slot :name="item.slot ? `${item.slot}-body`: 'body'" :item="item" :index="index" :open="open">
|
||||
<slot :name="((item.slot ? `${item.slot}-body`: 'body') as keyof AccordionSlots<T>)" :item="item" :index="index" :open="open">
|
||||
{{ item.content }}
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user