From 85d172339f690aeb83a7ae7d3ad812938bb6e000 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 4 Sep 2024 17:50:38 +0200 Subject: [PATCH] feat(Accordion): add `body` slot to solve animation flick --- .../accordion/AccordionBodySlotExample.vue | 24 ++ .../accordion/AccordionContentSlotExample.vue | 12 +- .../accordion/AccordionCustomSlotExample.vue | 12 +- .../accordion/AccordionModelValueExample.vue | 10 +- docs/content/3.components/accordion.md | 53 ++- docs/content/3.components/tabs.md | 2 +- playground/app/pages/components/accordion.vue | 14 +- src/runtime/components/Accordion.vue | 9 +- src/theme/accordion.ts | 3 +- test/components/Accordion.spec.ts | 12 +- .../__snapshots__/Accordion.spec.ts.snap | 306 +++++++++++------- 11 files changed, 301 insertions(+), 156 deletions(-) create mode 100644 docs/app/components/content/examples/accordion/AccordionBodySlotExample.vue diff --git a/docs/app/components/content/examples/accordion/AccordionBodySlotExample.vue b/docs/app/components/content/examples/accordion/AccordionBodySlotExample.vue new file mode 100644 index 00000000..80f4ef12 --- /dev/null +++ b/docs/app/components/content/examples/accordion/AccordionBodySlotExample.vue @@ -0,0 +1,24 @@ + + + diff --git a/docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue b/docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue index a5b16f9e..73020917 100644 --- a/docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue +++ b/docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue @@ -1,13 +1,13 @@ @@ -95,9 +96,13 @@ const ui = computed(() => accordion({ - + - {{ item.content }} +
+ + {{ item.content }} + +
diff --git a/src/theme/accordion.ts b/src/theme/accordion.ts index a2eed4cc..3cc626d6 100644 --- a/src/theme/accordion.ts +++ b/src/theme/accordion.ts @@ -4,7 +4,8 @@ export default { item: 'border-b border-gray-200 dark:border-gray-800 last:border-b-0', header: 'flex', trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400', - content: 'text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none', + content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none', + body: 'text-sm pb-3.5', leadingIcon: 'shrink-0 size-5', trailingIcon: 'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200', label: 'truncate' diff --git a/test/components/Accordion.spec.ts b/test/components/Accordion.spec.ts index 49c4e9c8..1aa49f10 100644 --- a/test/components/Accordion.spec.ts +++ b/test/components/Accordion.spec.ts @@ -47,11 +47,13 @@ describe('Accordion', () => { ['with class', { props: { ...props, class: 'w-96' } }], ['with ui', { props: { ...props, ui: { item: 'border-gray-300 dark:border-gray-700' } } }], // Slots - ['with leading slot', { props, slots: { leading: () => 'Leading slot' } }], - ['with default slot', { props, slots: { default: () => 'Default 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' } }] + ['with leading slot', { props: { ...props, modelValue: '1' }, slots: { leading: () => 'Leading slot' } }], + ['with default slot', { props: { ...props, modelValue: '1' }, slots: { default: () => 'Default slot' } }], + ['with trailing slot', { props: { ...props, modelValue: '1' }, slots: { trailing: () => 'Trailing slot' } }], + ['with content slot', { props: { ...props, modelValue: '1' }, slots: { content: () => 'Content slot' } }], + ['with body slot', { props: { ...props, modelValue: '1' }, slots: { body: () => 'Body slot' } }], + ['with custom slot', { props: { ...props, modelValue: '5' }, slots: { custom: () => 'Custom slot' } }], + ['with custom body slot', { props: { ...props, modelValue: '5' }, slots: { 'custom-body': () => 'Custom body slot' } }] ])('renders %s correctly', async (nameOrHtml: string, options: { props?: AccordionProps, slots?: Partial> }) => { 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 95eed824..f63e718a 100644 --- a/test/components/__snapshots__/Accordion.spec.ts.snap +++ b/test/components/__snapshots__/Accordion.spec.ts.snap @@ -4,78 +4,119 @@ exports[`Accordion > renders with as correctly 1`] = ` "

-

-

-

-

-

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

+ +
+
+

+
+
Body slot
+
+
+
+

+ +
+
+

+ +
+
+

+ +
+
+

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

-

-

-

-

-

- @@ -86,37 +127,37 @@ exports[`Accordion > renders with collapsible correctly 1`] = ` "

-

-

-

-

-

- @@ -127,80 +168,117 @@ exports[`Accordion > renders with content slot correctly 1`] = ` "

- -
-

- +
+

+
Content slot

-

-

-

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

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

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

-
-

-
-

-
-

-
-

- -
-

- +
+

+
Custom slot
" `; @@ -209,37 +287,37 @@ exports[`Accordion > renders with default slot correctly 1`] = ` "

- -
-

-