WIP: add daisy collapse

qwikifiers · Dec 15, 2022 · 9cb27c0 · 9cb27c0
1 parent 40a0f82
commit 9cb27c0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/packages/daisy/src/components/collapse/collapse.tsx b/packages/daisy/src/components/collapse/collapse.tsx
@@ -13,9 +13,11 @@ export const Collapse = component$(
   ({ showArrow = false, showPlus = false, ...props }: CollapseProps) => {
     return (
       <HeadlessCollapse
-        class={`collapse border border-base-300 bg-base-100 rounded-box 
-    ${showArrow && !showPlus && 'collapse-arrow'} 
-    ${showPlus && !showArrow && 'collapse-plus'}`}
+        collapseClass={`collapse border border-base-300 bg-base-100 rounded-box 
+                        ${showArrow && !showPlus && 'collapse-arrow'} 
+                        ${showPlus && !showArrow && 'collapse-plus'}`}
+        contentClass={'collapse-content max-h-fit'}
+        titleClass={'collapse-title text-xl font-medium '}
         {...props}
       >
         <Slot />

diff --git a/packages/headless/src/components/collapse/collapse.tsx b/packages/headless/src/components/collapse/collapse.tsx
@@ -1,7 +1,9 @@
 import { component$, Slot, useSignal } from '@builder.io/qwik';
 
 export interface CollapseProps {
-  class?: string;
+  collapseClass?: string;
+  titleClass?: string;
+  contentClass?: string;
   label: string;
 }
 
@@ -11,7 +13,7 @@ export const Collapse = component$((props: CollapseProps) => {
   const random = Math.random() * 1000;
   const state = useSignal<CollapseState>('closed');
   return (
-    <div data-state={state.value} class={props.class}>
+    <div data-state={state.value} className={props.collapseClass}>
       <style
         dangerouslySetInnerHTML={`
       @keyframes DummyIn {
@@ -32,6 +34,7 @@ export const Collapse = component$((props: CollapseProps) => {
     `}
       />
       <button
+        className={props.titleClass}
         aria-expanded={state.value === 'open'}
         aria-controls={random.toString()}
         onClick$={() =>
@@ -48,7 +51,9 @@ export const Collapse = component$((props: CollapseProps) => {
           state.value === 'closing' ? (state.value = 'closed') : state.value;
         }}
       >
-        <Slot />
+        <div className={props.contentClass}>
+          <Slot />
+        </div>
       </div>
     </div>
   );

diff --git a/packages/website/src/routes/daisy-example/index.tsx b/packages/website/src/routes/daisy-example/index.tsx
@@ -5,7 +5,14 @@ import { Collapse } from '@qwik-ui/daisy';
 export default component$(() => {
   return (
     <div>
-      <Collapse label="Hi Glenn and Gil!">Bla</Collapse>
+      <div style="width: 300px">
+        <Collapse label="Hi Glenn and Gil!" showPlus={true}>
+          <div class="text-center">QwikUI 🚀</div>
+        </Collapse>
+      </div>
+
+      {/* hack to prevent tailwind purge */}
+      <div class="collapse collapse-title text-xl font-medium collapse-content max-h-fit" />
     </div>
   );
 });