From 0f69f2bd4b65755ac515c50cf90fcb5ade15e594 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 17 Apr 2024 12:00:12 +0200 Subject: [PATCH] chore(Accordion): move `#default` slot around trigger --- src/runtime/components/Accordion.vue | 21 +- test/components/Accordion.spec.ts | 32 +- .../__snapshots__/Accordion.spec.ts.snap | 296 +++++++++++++++--- 3 files changed, 285 insertions(+), 64 deletions(-) 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`] = ` "