refactor: accordion (wip)

BeanWei · Dec 27, 2024 · 8fcaf54 · 8fcaf54
1 parent 872333f
commit 8fcaf54
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 100 deletions.
diff --git a/docs/src/content/docs/components/accordion.mdx b/docs/src/content/docs/components/accordion.mdx
@@ -19,28 +19,28 @@ import { Accordion } from '@beanwei/astro-ui'
   <Fragment slot="preview">
     <Accordion.Root class="w-full">
       <Accordion.Item value="1">
-        <Accordion.ItemTrigger>
+        <Accordion.Header>
           Item 1
-        </Accordion.ItemTrigger>
-        <Accordion.ItemContent>
+        </Accordion.Header>
+        <Accordion.Panel >
           Item 1 content
-        </Accordion.ItemContent>
+        </Accordion.Panel >
       </Accordion.Item>
       <Accordion.Item value="2">
-        <Accordion.ItemTrigger>
+        <Accordion.Header>
           Item 2
-        </Accordion.ItemTrigger>
-        <Accordion.ItemContent>
+        </Accordion.Header>
+        <Accordion.Panel >
           Item 2 content
-        </Accordion.ItemContent>
+        </Accordion.Panel >
       </Accordion.Item>
       <Accordion.Item value="3">
-        <Accordion.ItemTrigger>
+        <Accordion.Header>
           Item 3
-        </Accordion.ItemTrigger>
-        <Accordion.ItemContent>
+        </Accordion.Header>
+        <Accordion.Panel >
           Item 3 content
-        </Accordion.ItemContent>
+        </Accordion.Panel >
       </Accordion.Item>
     </Accordion.Root>
   </Fragment>
@@ -51,28 +51,28 @@ import { Accordion } from '@beanwei/astro-ui'
 
   <Accordion.Root>
     <Accordion.Item value="1">
-      <Accordion.ItemTrigger>
+      <Accordion.Header>
         Item 1
-      </Accordion.ItemTrigger>
-      <Accordion.ItemContent>
+      </Accordion.Header>
+      <Accordion.Panel >
         Item 1 content
-      </Accordion.ItemContent>
+      </Accordion.Panel >
     </Accordion.Item>
     <Accordion.Item value="2">
-      <Accordion.ItemTrigger>
+      <Accordion.Header>
         Item 2
-      </Accordion.ItemTrigger>
-      <Accordion.ItemContent>
+      </Accordion.Header>
+      <Accordion.Panel >
         Item 2 content
-      </Accordion.ItemContent>
+      </Accordion.Panel >
     </Accordion.Item>
     <Accordion.Item value="3">
-      <Accordion.ItemTrigger>
+      <Accordion.Header>
         Item 3
-      </Accordion.ItemTrigger>
-      <Accordion.ItemContent>
+      </Accordion.Header>
+      <Accordion.Panel >
         Item 3 content
-      </Accordion.ItemContent>
+      </Accordion.Panel >
     </Accordion.Item>
   </Accordion.Root>
   ```

diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.12",
     "dom-serializer": "^2.0.0",
-    "htmlparser2": "^9.1.0",
+    "htmlparser2": "^10.0.0",
     "tailwind-variants": "^0.3.0",
     "tailwindcss-animate": "^1.0.7"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/accordion/Accordion.astro b/src/components/accordion/Accordion.astro
@@ -16,7 +16,7 @@ if (!multiple) {
 	childHtml = await Astro.slots.render('default')
 	const childDoc = parseDocument(childHtml.trim())
 	const itemName = useId(scope())
-	for (const n of DomUtils.findAll((node) => node.tagName === 'input', childDoc.children)) {
+	for (const n of DomUtils.findAll((node) => node.tagName === 'details', childDoc)) {
 		n.attribs.name = itemName
 	}
 	childHtml = render(childDoc)

diff --git a/src/components/accordion/AccordionHeader.astro b/src/components/accordion/AccordionHeader.astro
@@ -0,0 +1,15 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'summary'> {}
+
+const { class: className, ...restProps } = Astro.props
+---
+
+<summary
+  {...restProps}
+  class:list={['flex flex-1 items-center justify-between py-4 text-sm font-medium', className]}
+  data-part="accordion-header"
+>
+	<slot />
+</summary>
diff --git a/src/components/accordion/AccordionItem.astro b/src/components/accordion/AccordionItem.astro
@@ -1,18 +1,18 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-interface Props extends HTMLAttributes<'div'> {
+interface Props extends HTMLAttributes<'details'> {
 	value?: string
 }
 
 const { class: className, value, ...restProps } = Astro.props
 ---
 
-<div
+<details
   {...restProps}
   class:list={['border-b', className]}
   data-value={value}
   data-part="accordion-item"
 >
 	<slot />
-</div>
+</details>
diff --git a/src/components/accordion/AccordionItemTrigger.astro b/src/components/accordion/AccordionItemTrigger.astro
diff --git a/...ents/accordion/AccordionItemContent.astro → ...components/accordion/AccordionPanel.astro b/...ents/accordion/AccordionItemContent.astro → ...components/accordion/AccordionPanel.astro
@@ -9,7 +9,7 @@ const { class: className, ...restProps } = Astro.props
 <div
   {...restProps}
   class="overflow-hidden text-sm"
-  data-part="accordion-item-content"
+  data-part="accordion-panel"
   role="region"
 >
   <div class:list={['pb-4 pt-0', className]}>

diff --git a/src/components/accordion/namespace.ts b/src/components/accordion/namespace.ts
@@ -1,4 +1,4 @@
 export { default as Root } from './Accordion.astro'
 export { default as Item } from './AccordionItem.astro'
-export { default as ItemContent } from './AccordionItemContent.astro'
-export { default as ItemTrigger } from './AccordionItemTrigger.astro'
+export { default as Header } from './AccordionHeader.astro'
+export { default as Panel } from './AccordionPanel.astro'
diff --git a/src/tailwind.ts b/src/tailwind.ts
@@ -60,29 +60,19 @@ export default function (): PresetsConfig {
 					sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
 				},
 				keyframes: {
-					'accordion-down': {
-						from: { height: '0' },
-						to: { height: 'var(--accordion-content-height)' },
-					},
-					'accordion-up': {
-						from: { height: 'var(--accordion-content-height)' },
-						to: { height: '0' },
-					},
 					'caret-blink': {
 						'0%,70%,100%': { opacity: '1' },
 						'20%,50%': { opacity: '0' },
 					},
 				},
 				animation: {
-					'accordion-down': 'accordion-down 0.2s ease-out',
-					'accordion-up': 'accordion-up 0.2s ease-out',
 					'caret-blink': 'caret-blink 1.25s ease-out infinite',
 				},
 			},
 		},
 		plugins: [
 			animate,
-			plugin(({ addBase, addComponents }) => {
+			plugin(({ addBase }) => {
 				addBase({
 					':root': {
 						'--background': '0 0% 100%',
@@ -151,41 +141,6 @@ export default function (): PresetsConfig {
 						'font-feature-settings': `"rlig" 1, "calt" 1`,
 					},
 				})
-
-				addComponents({
-					// accordion unstyle by daisyui unstyled/collapse.css
-					'[data-part="accordion-item"]:not(td):not(tr):not(colgroup)': {
-						'@apply visible': {},
-					},
-					'[data-part="accordion-item"]': {
-						'@apply relative grid overflow-hidden': {},
-						'grid-template-rows': 'auto 0fr',
-						transition: 'grid-template-rows 0.2s',
-					},
-					'[data-part="accordion-item-trigger"], [data-part="accordion-item"] > input[type="checkbox"], [data-part="accordion-item"] > input[type="radio"], [data-part="accordion-item-content"]':
-						{
-							'@apply col-start-1 row-start-1': {},
-						},
-					'[data-part="accordion-item"] > input[type="checkbox"], [data-part="accordion-item"] > input[type="radio"]':
-						{
-							'@apply appearance-none opacity-0': {},
-						},
-					'[data-part="accordion-item-content"]': {
-						'@apply invisible col-start-1 row-start-2 min-h-0': {},
-						transition: 'visibility 0.2s',
-					},
-					'[data-part="accordion-item"][open], [data-part="accordion-item"]:focus': {
-						'grid-template-rows': 'auto 1fr',
-					},
-					'[data-part="accordion-item"]:has(> input[type="checkbox"]:checked), [data-part="accordion-item"]:has(> input[type="radio"]:checked)':
-						{
-							'grid-template-rows': 'auto 1fr',
-						},
-					'[data-part="accordion-item"][open] > [data-part="accordion-item-content"], [data-part="accordion-item"]:focus > [data-part="accordion-item-content"], [data-part="accordion-item"] > input[type="checkbox"]:checked ~ [data-part="accordion-item-content"], [data-part="accordion-item"] > input[type="radio"]:checked ~ [data-part="accordion-item-content"]':
-						{
-							'@apply visible min-h-fit': {},
-						},
-				})
 			}),
 		],
 	}