feat(component): add the Accordion Component

apps/website/src/components/menu/menu.tsx

@@ -11,6 +11,10 @@ type Props = {
 export const Menu = component$<Props>(({ onClose$ }) => {
  const appState = useContext(APP_STATE);
  const menu = [
+ {
+ label: 'Accordion',
+ path: `/docs/${appState.theme.toLowerCase()}/accordion`,
+ },
  { label: 'Button', path: `/docs/${appState.theme.toLowerCase()}/button` },
  {
  label: 'ButtonGroup',

apps/website/src/routes/docs/daisy/accordion/index.tsx

@@ -0,0 +1,56 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { Accordion, AccordionItem } from '@qwik-ui/theme-daisy';
+
+export default component$(() => {
+ useStylesScoped$(`
+ h1 { margin: 2rem 0; padding-top: 1rem; font-weight: bold; border-top: 1px dotted #222}
+ .container { width: 300px } Accordion {border: 1px solid white}
+ `);
+ return (
+ <>
+ <div className="container">
+ <h2>This is the documentation for the Accordion</h2>
+
+ <h1>Accordion Example</h1>
+ <Accordion>
+ <AccordionItem label="Heading 1">
+ <div class="p-2">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Accusamus aliquid architecto delectus deleniti dolor
+ </p>
+ </div>
+ </AccordionItem>
+ <AccordionItem label="Heading 2">
+ <div className="p-2">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Accusamus aliquid architecto delectus deleniti dolor
+ </p>
+ </div>
+ </AccordionItem>
+ </Accordion>
+
+ <h1>Accordion with Disabled Item Example</h1>
+ <Accordion>
+ <AccordionItem label="Heading 1">
+ <div class="p-2">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Accusamus aliquid architecto delectus deleniti dolor
+ </p>
+ </div>
+ </AccordionItem>
+ <AccordionItem label="Heading 2 - Disabled" disabled>
+ <div className="p-2">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Accusamus aliquid architecto delectus deleniti dolor
+ </p>
+ </div>
+ </AccordionItem>
+ </Accordion>
+ </div>
+ </>
+ );
+});

apps/website/src/routes/docs/headless/accordion/index.tsx

@@ -0,0 +1,51 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { Accordion, AccordionItem } from '@qwik-ui/headless';
+
+export default component$(() => {
+ useStylesScoped$(`
+ h1 { margin: 2rem 0; padding-top: 1rem; font-weight: bold; border-top: 1px dotted #222}
+ .container { width: 300px }
+ `);
+ return (
+ <div class="container">
+ <h2>This is the documentation for the Accordion</h2>
+
+ <h1>Accordion Example</h1>
+
+ <Accordion>
+ <AccordionItem label="Heading 1">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
+ aliquid architecto delectus deleniti dolor
+ </p>
+ </AccordionItem>
+ <AccordionItem label="Heading 2">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
+ aliquid architecto delectus deleniti dolor
+ </p>
+ </AccordionItem>
+ </Accordion>
+
+ <h1>Accordion with Disabled Item Example</h1>
+ <Accordion>
+ <AccordionItem label="Heading 1">
+ <div>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Accusamus aliquid architecto delectus deleniti dolor
+ </p>
+ </div>
+ </AccordionItem>
+ <AccordionItem label="Heading 2 - Disabled" disabled>
+ <div>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Accusamus aliquid architecto delectus deleniti dolor
+ </p>
+ </div>
+ </AccordionItem>
+ </Accordion>
+ </div>
+ );
+});

packages/daisy/src/components/accordion/accordion.tsx

@@ -0,0 +1,45 @@
+import {
+ component$,
+ HTMLAttributes,
+ PropFunction,
+ Slot,
+} from '@builder.io/qwik';
+
+import {
+ Accordion as HeadlessAccordion,
+ AccordionItem as HeadlessAccordionItem,
+} from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
+
+export type AccordionProps = HTMLAttributes<HTMLElement>;
+export interface AccordionItemProps {
+ label: string;
+ disabled?: boolean;
+ class?: string;
+ style?: string;
+ onClick$?: PropFunction<() => void>;
+}
+
+export const Accordion = component$((props: AccordionProps) => {
+ const { class: classNames, ...rest } = props;
+ return (
+ <HeadlessAccordion
+ class={clsq('border collapse border collapse-arrow', classNames)}
+ {...rest}
+ >
+ <Slot />
+ </HeadlessAccordion>
+ );
+});
+
+export const AccordionItem = component$((props: AccordionItemProps) => {
+ const { class: classNames, ...rest } = props;
+ return (
+ <HeadlessAccordionItem
+ class={clsq('collapse-title border', classNames)}
+ {...rest}
+ >
+ <Slot />
+ </HeadlessAccordionItem>
+ );
+});

packages/daisy/src/index.ts

@@ -1,3 +1,4 @@
+export * from './components/accordion/accordion';
 export * from './components/button/button';
 export * from './components/progress/progress';
 export * from './components/button-group/button-group';

packages/headless/src/components/accordion/accordion.tsx

@@ -0,0 +1,100 @@
+import {
+ $,
+ component$,
+ createContextId,
+ HTMLAttributes,
+ PropFunction,
+ QRL,
+ Signal,
+ Slot,
+ useBrowserVisibleTask$,
+ useContext,
+ useContextProvider,
+ useSignal,
+ useStore,
+ useStylesScoped$,
+} from '@builder.io/qwik';
+
+export type AccordionProps = HTMLAttributes<HTMLElement>;
+
+export const accordionContext =
+ createContextId<AccordionContextService>('accordion');
+
+interface AccordionContextService {
+ items: HTMLElement[];
+ setItemsBoxRef$: QRL<(ref: Signal<HTMLElement | undefined>) => void>;
+}
+
+interface AccordionItemProps {
+ label: string;
+ disabled?: boolean;
+ class?: string;
+ style?: string;
+ onClick$?: PropFunction<() => void>;
+}
+
+export const Accordion = component$((props: AccordionProps) => {
+ const items = useStore([]);
+ const itemsBoxRef = useSignal<HTMLElement>();
+ const setItemsBoxRef$ = $((ref: Signal<HTMLElement | undefined>) => {
+ if (ref) {
+ itemsBoxRef.value = ref.value;
+ }
+ });
+ const contextService: AccordionContextService = {
+ items,
+ setItemsBoxRef$,
+ };
+
+ useContextProvider(accordionContext, contextService);
+
+ useBrowserVisibleTask$(() => {
+ contextService.setItemsBoxRef$(itemsBoxRef);
+ const items = itemsBoxRef.value?.querySelectorAll<HTMLElement>('div.item');
+ if (items?.length) {
+ items.forEach((item) => contextService.items.push(item));
+ }
+ });
+
+ return (
+ <div {...props} ref={itemsBoxRef}>
+ <Slot></Slot>
+ </div>
+ );
+});
+
+export const AccordionItem = component$((props: AccordionItemProps) => {
+ useStylesScoped$(`
+ div.item .content {
+ display: none;
+ }
+ div.item[open] .content {
+ display: block;
+ }
+ `);
+ const contextService = useContext(accordionContext);
+ return (
+ <div class="item">
+ <button
+ onClick$={(e) => {
+ const target = (e.target as HTMLElement).parentElement;
+ const isTargetOpen = target?.hasAttribute('open');
+ contextService.items.forEach((i: HTMLElement) => {
+ i.removeAttribute('open');
+ });
+ isTargetOpen
+ ? target?.removeAttribute('open')
+ : target?.setAttribute('open', '');
+ }}
+ style={props.style}
+ class={props.class}
+ disabled={props.disabled}
+ >
+ {props.label}
+ </button>
+ <div class="content">
+ <Slot />
+ </div>
+ </div>
+ );
+});

packages/headless/src/index.ts

@@ -1,3 +1,4 @@
+export * from './components/accordion/accordion';
 export * from './components/button/button';
 export * from './components/progress/progress';
 export * from './components/button-group/button-group';