From 2012cde239d11cb8d2ca8850185d358bf29a388e Mon Sep 17 00:00:00 2001 From: "Bean.Wei" Date: Tue, 31 Dec 2024 23:00:19 +0800 Subject: [PATCH] feat(accordion): more variant --- .../src/content/docs/components/accordion.mdx | 132 +++++++++++++----- src/components/accordion/Accordion.astro | 8 +- .../accordion/AccordionHeader.astro | 6 +- src/components/accordion/AccordionItem.astro | 3 +- src/components/accordion/AccordionPanel.astro | 5 +- src/utils/tailwind.ts | 4 + src/variants/accordion.ts | 39 ++++++ src/variants/index.ts | 1 + 8 files changed, 155 insertions(+), 43 deletions(-) create mode 100644 src/utils/tailwind.ts create mode 100644 src/variants/accordion.ts diff --git a/docs/src/content/docs/components/accordion.mdx b/docs/src/content/docs/components/accordion.mdx index 0464253..74818e5 100644 --- a/docs/src/content/docs/components/accordion.mdx +++ b/docs/src/content/docs/components/accordion.mdx @@ -19,28 +19,16 @@ import { Accordion } from '@beanwei/astro-ui' - - Item 1 - - - Item 1 content - + Item 1 + Item 1 content - - Item 2 - - - Item 2 content - + Item 2 + Item 2 content - - Item 3 - - - Item 3 content - + Item 3 + Item 3 content @@ -51,28 +39,100 @@ import { Accordion } from '@beanwei/astro-ui' - - Item 1 - - - Item 1 content - + Item 1 + Item 1 content - - Item 2 - - - Item 2 content - + Item 2 + Item 2 content - - Item 3 - - - Item 3 content - + Item 3 + Item 3 content + + + ``` + + + +### Bordered + + + + + + Item 1 + Item 1 content + + + Item 2 + Item 2 content + + + Item 3 + Item 3 content + + + + ```tsx + --- + import { Accordion } from '@beanwei/astro-ui' + --- + + + + Item 1 + Item 1 content + + + Item 2 + Item 2 content + + + Item 3 + Item 3 content + + + ``` + + + +### Splitted + + + + + + Item 1 + Item 1 content + + + Item 2 + Item 2 content + + + Item 3 + Item 3 content + + + + ```tsx + --- + import { Accordion } from '@beanwei/astro-ui' + --- + + + + Item 1 + Item 1 content + + + Item 2 + Item 2 content + + + Item 3 + Item 3 content ``` diff --git a/src/components/accordion/Accordion.astro b/src/components/accordion/Accordion.astro index 62a491a..1147782 100644 --- a/src/components/accordion/Accordion.astro +++ b/src/components/accordion/Accordion.astro @@ -4,12 +4,13 @@ import type { HTMLAttributes } from 'astro/types' import render from 'dom-serializer' import { DomUtils, parseDocument } from 'htmlparser2' import useId from '../../utils/useId' +import { type AccordionVariantProps, accordion } from '../../variants' -interface Props extends HTMLAttributes<'div'> { +interface Props extends HTMLAttributes<'div'>, AccordionVariantProps { multiple?: boolean } -const { multiple, class: className, ...restProps } = Astro.props +const { multiple, variant = 'light', class: className, ...restProps } = Astro.props let childHtml = '' if (!multiple) { @@ -25,8 +26,9 @@ if (!multiple) {
{multiple ? : }
diff --git a/src/components/accordion/AccordionHeader.astro b/src/components/accordion/AccordionHeader.astro index 7efc1e6..000cb48 100644 --- a/src/components/accordion/AccordionHeader.astro +++ b/src/components/accordion/AccordionHeader.astro @@ -1,5 +1,6 @@ --- import type { HTMLAttributes } from 'astro/types' +import { accordion } from '../../variants' interface Props extends HTMLAttributes<'summary'> {} @@ -8,8 +9,11 @@ const { class: className, ...restProps } = Astro.props + + + diff --git a/src/components/accordion/AccordionItem.astro b/src/components/accordion/AccordionItem.astro index df9fed8..d5bb954 100644 --- a/src/components/accordion/AccordionItem.astro +++ b/src/components/accordion/AccordionItem.astro @@ -1,5 +1,6 @@ --- import type { HTMLAttributes } from 'astro/types' +import { accordion } from '../../variants' interface Props extends HTMLAttributes<'details'> { value?: string @@ -10,7 +11,7 @@ const { class: className, value, ...restProps } = Astro.props
diff --git a/src/components/accordion/AccordionPanel.astro b/src/components/accordion/AccordionPanel.astro index 7fbf413..36bc3e3 100644 --- a/src/components/accordion/AccordionPanel.astro +++ b/src/components/accordion/AccordionPanel.astro @@ -1,5 +1,6 @@ --- import type { HTMLAttributes } from 'astro/types' +import { accordion } from '../../variants' interface Props extends HTMLAttributes<'div'> {} @@ -8,11 +9,11 @@ const { class: className, ...restProps } = Astro.props
-
+
diff --git a/src/utils/tailwind.ts b/src/utils/tailwind.ts new file mode 100644 index 0000000..196525a --- /dev/null +++ b/src/utils/tailwind.ts @@ -0,0 +1,4 @@ +export function multipleVariant(variant: string, classNames: string | string[]) { + const classNames_ = Array.isArray(classNames) ? classNames : classNames.split(' ').filter(Boolean) + return classNames_.map((s) => `${variant}:${s}`).join(' ') +} diff --git a/src/variants/accordion.ts b/src/variants/accordion.ts new file mode 100644 index 0000000..9d7dc70 --- /dev/null +++ b/src/variants/accordion.ts @@ -0,0 +1,39 @@ +import { type VariantProps, tv } from 'tailwind-variants' +import { multipleVariant } from '../utils/tailwind' + +export const accordion = tv({ + slots: { + base: 'group', + item: [ + 'group border-b border-border py-2', + multipleVariant( + 'group-data-[accordion-variant=bordered]', + 'border bg-background px-4 py-1 first:rounded-t-lg last:rounded-b-lg' + ), + multipleVariant( + 'group-data-[accordion-variant=splitted]', + 'rounded-lg border bg-background px-4 py-1' + ), + ], + header: [ + 'flex flex-1 items-center justify-between py-2 text-left font-medium text-[15px] leading-6 group-open:[&>svg]:rotate-180', + ], + panel: ['overflow-hidden text-sm'], + }, + variants: { + variant: { + light: {}, + bordered: { + base: '-space-y-px', + }, + splitted: { + base: 'space-y-2', + }, + }, + }, + defaultVariants: { + variant: 'light', + }, +}) + +export type AccordionVariantProps = VariantProps diff --git a/src/variants/index.ts b/src/variants/index.ts index 352a25a..211bc6d 100644 --- a/src/variants/index.ts +++ b/src/variants/index.ts @@ -1,3 +1,4 @@ +export * from './accordion' export * from './alert' export * from './avatar' export * from './badge'