feat(accordion): more variant

BeanWei · Dec 31, 2024 · 2012cde · 2012cde
1 parent 8fcaf54
commit 2012cde
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 43 deletions.
diff --git 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'
   <Fragment slot="preview">
     <Accordion.Root class="w-full">
       <Accordion.Item value="1">
-        <Accordion.Header>
-          Item 1
-        </Accordion.Header>
-        <Accordion.Panel >
-          Item 1 content
-        </Accordion.Panel >
+        <Accordion.Header>Item 1</Accordion.Header>
+        <Accordion.Panel>Item 1 content</Accordion.Panel>
       </Accordion.Item>
       <Accordion.Item value="2">
-        <Accordion.Header>
-          Item 2
-        </Accordion.Header>
-        <Accordion.Panel >
-          Item 2 content
-        </Accordion.Panel >
+        <Accordion.Header>Item 2</Accordion.Header>
+        <Accordion.Panel>Item 2 content</Accordion.Panel>
       </Accordion.Item>
       <Accordion.Item value="3">
-        <Accordion.Header>
-          Item 3
-        </Accordion.Header>
-        <Accordion.Panel >
-          Item 3 content
-        </Accordion.Panel >
+        <Accordion.Header>Item 3</Accordion.Header>
+        <Accordion.Panel>Item 3 content</Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
   </Fragment>
@@ -51,28 +39,100 @@ import { Accordion } from '@beanwei/astro-ui'
 
   <Accordion.Root>
     <Accordion.Item value="1">
-      <Accordion.Header>
-        Item 1
-      </Accordion.Header>
-      <Accordion.Panel >
-        Item 1 content
-      </Accordion.Panel >
+      <Accordion.Header>Item 1</Accordion.Header>
+      <Accordion.Panel>Item 1 content</Accordion.Panel>
     </Accordion.Item>
     <Accordion.Item value="2">
-      <Accordion.Header>
-        Item 2
-      </Accordion.Header>
-      <Accordion.Panel >
-        Item 2 content
-      </Accordion.Panel >
+      <Accordion.Header>Item 2</Accordion.Header>
+      <Accordion.Panel>Item 2 content</Accordion.Panel>
     </Accordion.Item>
     <Accordion.Item value="3">
-      <Accordion.Header>
-        Item 3
-      </Accordion.Header>
-      <Accordion.Panel >
-        Item 3 content
-      </Accordion.Panel >
+      <Accordion.Header>Item 3</Accordion.Header>
+      <Accordion.Panel>Item 3 content</Accordion.Panel>
+    </Accordion.Item>
+  </Accordion.Root>
+  ```
+</Preview>
+
+
+### Bordered
+
+<Preview>
+  <Fragment slot="preview">
+    <Accordion.Root class="w-full" variant="bordered">
+      <Accordion.Item value="1">
+        <Accordion.Header>Item 1</Accordion.Header>
+        <Accordion.Panel>Item 1 content</Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="2">
+        <Accordion.Header>Item 2</Accordion.Header>
+        <Accordion.Panel>Item 2 content</Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="3">
+        <Accordion.Header>Item 3</Accordion.Header>
+        <Accordion.Panel>Item 3 content</Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  </Fragment>
+  ```tsx
+  ---
+  import { Accordion } from '@beanwei/astro-ui'
+  ---
+
+  <Accordion.Root variant="bordered">
+    <Accordion.Item value="1">
+      <Accordion.Header>Item 1</Accordion.Header>
+      <Accordion.Panel>Item 1 content</Accordion.Panel>
+    </Accordion.Item>
+    <Accordion.Item value="2">
+      <Accordion.Header>Item 2</Accordion.Header>
+      <Accordion.Panel>Item 2 content</Accordion.Panel>
+    </Accordion.Item>
+    <Accordion.Item value="3">
+      <Accordion.Header>Item 3</Accordion.Header>
+      <Accordion.Panel>Item 3 content</Accordion.Panel>
+    </Accordion.Item>
+  </Accordion.Root>
+  ```
+</Preview>
+
+
+### Splitted
+
+<Preview>
+  <Fragment slot="preview">
+    <Accordion.Root class="w-full" variant="splitted">
+      <Accordion.Item value="1">
+        <Accordion.Header>Item 1</Accordion.Header>
+        <Accordion.Panel>Item 1 content</Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="2">
+        <Accordion.Header>Item 2</Accordion.Header>
+        <Accordion.Panel>Item 2 content</Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="3">
+        <Accordion.Header>Item 3</Accordion.Header>
+        <Accordion.Panel>Item 3 content</Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  </Fragment>
+  ```tsx
+  ---
+  import { Accordion } from '@beanwei/astro-ui'
+  ---
+
+  <Accordion.Root variant="splitted">
+    <Accordion.Item value="1">
+      <Accordion.Header>Item 1</Accordion.Header>
+      <Accordion.Panel>Item 1 content</Accordion.Panel>
+    </Accordion.Item>
+    <Accordion.Item value="2">
+      <Accordion.Header>Item 2</Accordion.Header>
+      <Accordion.Panel>Item 2 content</Accordion.Panel>
+    </Accordion.Item>
+    <Accordion.Item value="3">
+      <Accordion.Header>Item 3</Accordion.Header>
+      <Accordion.Panel>Item 3 content</Accordion.Panel>
     </Accordion.Item>
   </Accordion.Root>
   ```

diff --git 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) {
 
 <div
   {...restProps}
-  class={className}
+  class={accordion().base({ variant, className })}
   data-part="accordion-root"
+  data-accordion-variant={variant}
 >
   {multiple ? <slot /> : <Fragment set:html={childHtml} />}
 </div>
diff --git 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
 
 <summary
   {...restProps}
-  class:list={['flex flex-1 items-center justify-between py-4 text-sm font-medium', className]}
+  class={accordion().header({ className })}
   data-part="accordion-header"
 >
 	<slot />
+  <slot name="indicator">
+    <svg aria-hidden class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+  </slot>
 </summary>
diff --git 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
 
 <details
   {...restProps}
-  class:list={['border-b', className]}
+  class={accordion().item({ className })}
   data-value={value}
   data-part="accordion-item"
 >

diff --git 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
 
 <div
   {...restProps}
-  class="overflow-hidden text-sm"
+  class={accordion().panel()}
   data-part="accordion-panel"
   role="region"
 >
-  <div class:list={['pb-4 pt-0', className]}>
+  <div class:list={["pt-0 pb-2 text-muted-foreground", className]}>
     <slot />
   </div>
 </div>
diff --git a/src/utils/tailwind.ts 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
@@ -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<typeof accordion>
diff --git 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'