diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue index 525e3d1a..85bc9ba8 100644 --- a/src/runtime/components/Accordion.vue +++ b/src/runtime/components/Accordion.vue @@ -31,8 +31,9 @@ export interface AccordionEmits extends AccordionRootEmits {} type SlotProps = (props: { item: T, index: number }) => any export type AccordionSlots = { - leading: SlotProps default: SlotProps + leading: SlotProps + label: SlotProps trailing: SlotProps content: SlotProps [key: string]: SlotProps @@ -64,16 +65,18 @@ const ui = computed(() => tv({ extend: accordion, slots: props.ui })({ disabled: - - - + + + + - - {{ item.label }} - + + {{ item.label }} + - - + + + diff --git a/test/components/Accordion.spec.ts b/test/components/Accordion.spec.ts index b5874911..a3020355 100644 --- a/test/components/Accordion.spec.ts +++ b/test/components/Accordion.spec.ts @@ -26,25 +26,31 @@ describe('Accordion', () => { content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.' }, { label: 'Utilities', - slot: 'toto', icon: 'i-heroicons-wrench-screwdriver', - content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.' + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.', + slot: 'custom' }] + const props = { items } + it.each([ // Props - ['with items', { props: { items } }], - ['with modelValue', { props: { items, modelValue: '1' } }], - ['with defaultValue', { props: { items, defaultValue: '1' } }], - ['with as', { props: { items, as: 'section' } }], - ['with type', { props: { items, type: 'multiple' as const } }], - ['with disabled', { props: { items, disabled: true } }], - ['with collapsible', { props: { items, collapsible: false } }], - ['with class', { props: { items, class: 'w-96' } }], - ['with ui', { props: { ui: { items, item: 'border-gray-300 dark:border-gray-700' } } }], + ['with items', { props }], + ['with modelValue', { props: { ...props, modelValue: '1' } }], + ['with defaultValue', { props: { ...props, defaultValue: '1' } }], + ['with as', { props: { ...props, as: 'section' } }], + ['with type', { props: { ...props, type: 'multiple' as const } }], + ['with disabled', { props: { ...props, disabled: true } }], + ['with collapsible', { props: { ...props, collapsible: false } }], + ['with class', { props: { ...props, class: 'w-96' } }], + ['with ui', { props: { ui: { ...props, item: 'border-gray-300 dark:border-gray-700' } } }], // Slots - ['with default slot', { props: { items }, slots: { default: () => 'Default slot' } }], - ['with content slot', { props: { items }, slots: { content: () => 'Content slot' } }] + ['with default slot', { props, slots: { default: () => 'Default slot' } }], + ['with leading slot', { props, slots: { leading: () => 'Leading slot' } }], + ['with label slot', { props, slots: { label: () => 'Label slot' } }], + ['with trailing slot', { props, slots: { trailing: () => 'Trailing slot' } }], + ['with content slot', { props, slots: { content: () => 'Content slot' } }], + ['with custom slot', { props, slots: { custom: () => 'Custom slot' } }] ])('renders %s correctly', async (nameOrHtml: string, options: { props?: AccordionProps, slots?: any }) => { const html = await ComponentRender(nameOrHtml, options, Accordion) expect(html).toMatchSnapshot() diff --git a/test/components/__snapshots__/Accordion.spec.ts.snap b/test/components/__snapshots__/Accordion.spec.ts.snap index 9604979f..9904e5a5 100644 --- a/test/components/__snapshots__/Accordion.spec.ts.snap +++ b/test/components/__snapshots__/Accordion.spec.ts.snap @@ -198,62 +198,127 @@ exports[`Accordion > renders with collapsible correctly 1`] = ` exports[`Accordion > renders with content slot correctly 1`] = ` "
-

-
-

-
-

-
-

-
-

-
-

- +
" +`; + +exports[`Accordion > renders with custom slot correctly 1`] = ` +"
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+
@@ -263,61 +328,37 @@ exports[`Accordion > renders with content slot correctly 1`] = ` exports[`Accordion > renders with default slot correctly 1`] = ` "
-

+

-

+

-

+

-

+

-

+

-

+

@@ -518,6 +559,124 @@ exports[`Accordion > renders with items correctly 1`] = `
" `; +exports[`Accordion > renders with label slot correctly 1`] = ` +"
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; + +exports[`Accordion > renders with leading slot correctly 1`] = ` +"
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; + exports[`Accordion > renders with modelValue correctly 1`] = ` "
@@ -581,6 +740,59 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
" `; +exports[`Accordion > renders with trailing slot correctly 1`] = ` +"
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; + exports[`Accordion > renders with type correctly 1`] = ` "