Merge pull request #139 from qwikerx/fix/dropdown-trigger

fix: dropdown custom trigger and use cards in hompage
qwikerx · Jun 22, 2024 · e5c0e41 · e5c0e41
2 parents 63e98cc + 450af11
commit e5c0e41
Show file tree

Hide file tree

Showing 16 changed files with 144 additions and 135 deletions.
diff --git a/apps/web/src/components/Preview/Preview.tsx b/apps/web/src/components/Preview/Preview.tsx
@@ -34,8 +34,7 @@ export const Preview = component$<PreviewProps>(({ url, class: classNames, heigh
 
   const fileUrl = useComputed$(() => `${liveDir}${url}`)
   const iframeSrc = useComputed$(() => {
-    let src = url.replace('[theme-rtl]', `${themeName.value}-${rtl.value ? 'rtl' : 'ltr'}`)
-    src += '?example=true'
+    const src = url.replace('[theme-rtl]', `${themeName.value}-${rtl.value ? 'rtl' : 'ltr'}`)
     return src
   })
 

diff --git a/apps/web/src/generated-examples.ts b/apps/web/src/generated-examples.ts
@@ -505,7 +505,7 @@ export const examples: Record<string, Example[]> = {
       description: 'You can add a link to a Button component.',
       url: '/examples/[theme-rtl]/button/12-button-as-link',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex gap-2 flex-wrap">\n      <Button href="https://google.com" target="_blank">\n        Google.com\n      </Button>\n      <Button href="/pages/getting-started">Quickstart</Button>\n      <Button href="/" tag={Link}>\n        Internal link\n      </Button>\n    </div>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex gap-2 flex-wrap">\n      <Button href="https://google.com" target="_blank">\n        Google.com\n      </Button>\n      <Button href="/examples/blue-ltr/button/11-button-disabled">Quickstart</Button>\n      <Button href="/examples/blue-ltr/button/13-button-full" tag={Link}>\n        Internal link\n      </Button>\n    </div>\n  )\n})',
       height: '200',
     },
     {
@@ -540,6 +540,14 @@ export const examples: Record<string, Example[]> = {
         "import { component$ } from '@builder.io/qwik'\nimport { Button } from 'flowbite-qwik'\nimport { IconArrowRightOutline } from 'flowbite-qwik-icons'\n\nexport default component$(() => {\n  return (\n    <div class=\"flex gap-2 items-center flex-wrap\">\n      <Button suffix={IconArrowRightOutline}>Choose plan</Button>\n    </div>\n  )\n})",
       height: '200',
     },
+    {
+      title: 'Button with custom tag',
+      description: 'You can use a custom tag for the Button component.',
+      url: '/examples/[theme-rtl]/button/17-button-with-custom-tag',
+      content:
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex gap-2 items-center flex-wrap">\n      <Button tag="div">I\'am a div</Button>\n      <Button tag="span">I\'am a span</Button>\n    </div>\n  )\n})',
+      height: '200',
+    },
   ],
   'button-group': [
     {
@@ -861,7 +869,8 @@ export const examples: Record<string, Example[]> = {
     },
     {
       title: 'User avatar',
-      description: 'This example can be used to show a list of menu items and options when a user is logged into your application.',
+      description:
+        'You can use the `as` prop to set the trigger element to an image. The trigger passed as props should not be a button element as Dropdown use button element internally. This example can be used to show a list of menu items and options when a user is logged into your application.',
       url: '/examples/[theme-rtl]/dropdown/06-dropdown-user-avatar',
       content:
         'import { component$ } from \'@builder.io/qwik\'\nimport { Dropdown } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex gap-5">\n      <Dropdown\n        as={\n          <img\n            class="w-8 h-8 rounded-full"\n            src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"\n            alt="user photo"\n          />\n        }\n      >\n        <Dropdown.Item header>\n          <span class="block text-sm">Bonnie Green</span>\n          <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>\n        </Dropdown.Item>\n        <Dropdown.Item>Dashboard</Dropdown.Item>\n        <Dropdown.Item>Settings</Dropdown.Item>\n        <Dropdown.Item divider />\n        <Dropdown.Item>Sign out</Dropdown.Item>\n      </Dropdown>\n\n      <Dropdown\n        as={\n          <img\n            class="w-8 h-8 rounded-full"\n            src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"\n            alt="user photo"\n          />\n        }\n      >\n        <Dropdown.Item header>\n          <span class="block text-sm">Bonnie Green</span>\n          <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>\n        </Dropdown.Item>\n        <Dropdown.Item>Dashboard</Dropdown.Item>\n        <Dropdown.Item>Settings</Dropdown.Item>\n        <Dropdown.Item divider />\n        <Dropdown.Item>Sign out</Dropdown.Item>\n      </Dropdown>\n\n      <Dropdown\n        as={\n          <img\n            class="w-8 h-8 rounded-full"\n            src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"\n            alt="user photo"\n          />\n        }\n      >\n        <Dropdown.Item header>\n          <span class="block text-sm">Bonnie Green</span>\n          <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>\n        </Dropdown.Item>\n        <Dropdown.Item>Dashboard</Dropdown.Item>\n        <Dropdown.Item>Settings</Dropdown.Item>\n        <Dropdown.Item divider />\n        <Dropdown.Item>Sign out</Dropdown.Item>\n      </Dropdown>\n    </div>\n  )\n})',
@@ -1810,15 +1819,15 @@ export const examples: Record<string, Example[]> = {
         'Wrap the trigger component with the <Tooltip> component and pass the tooltip content to the content prop of the <Tooltip> component.',
       url: '/examples/[theme-rtl]/tooltip/01-default',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center p-8">\n      <Tooltip style="dark" trigger={<Button>Hover me</Button>} content={<div>This is a tooltip</div>} />\n    </div>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center p-8">\n      <Tooltip style="dark">\n        <Button q:slot="trigger">Hover me</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n    </div>\n  )\n})',
       height: '200',
     },
     {
       title: 'Default styles',
       description: 'Use the style prop to change the style of the tooltip. The default style is light and you can also use dark.',
       url: '/examples/[theme-rtl]/tooltip/02-styles',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip style="dark" trigger={<Button>Dark tooltip</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip style="light" trigger={<Button>Light tooltip</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip style="auto" trigger={<Button>Auto tooltip</Button>} content={<div>This is a tooltip</div>} />\n    </div>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip style="dark">\n        <Button q:slot="trigger">Dark tooltip</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip style="light">\n        <Button q:slot="trigger">Light tooltip</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip style="auto">\n        <Button q:slot="trigger">Auto tooltip</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n    </div>\n  )\n})',
       height: '200',
     },
     {
@@ -1827,7 +1836,7 @@ export const examples: Record<string, Example[]> = {
         'Update the placement of the tooltip using the placement prop. The default placement is top and you can also use right, bottom, and left.',
       url: '/examples/[theme-rtl]/tooltip/03-placement',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip placement="top" trigger={<Button>Tooltip top</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip placement="right" trigger={<Button>Tooltip right</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip placement="bottom" trigger={<Button>Tooltip bottom</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip placement="left" trigger={<Button>Tooltip left</Button>} content={<div>This is a tooltip</div>} />\n    </div>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip placement="top">\n        <Button q:slot="trigger">Tooltip top</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip placement="right">\n        <Button q:slot="trigger">Tooltip right</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip placement="bottom">\n        <Button q:slot="trigger">Tooltip bottom</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip placement="left">\n        <Button q:slot="trigger">Tooltip left</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n    </div>\n  )\n})',
       height: '200',
     },
     {
@@ -1836,7 +1845,7 @@ export const examples: Record<string, Example[]> = {
         'Use the trigger prop to change the trigger type of the tooltip if you want to show the tooltip when clicking on the trigger element instead of hovering over it.',
       url: '/examples/[theme-rtl]/tooltip/04-trigger',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip triggerStrategy="hover" trigger={<Button>Tooltip hover</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip triggerStrategy="click" trigger={<Button>Tooltip click</Button>} content={<div>This is a tooltip</div>} />\n    </div>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip trigger="hover">\n        <Button q:slot="trigger">Tooltip hover</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip trigger="click">\n        <Button q:slot="trigger">Tooltip click</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n    </div>\n  )\n})',
       height: '200',
     },
   ],

diff --git a/apps/web/src/routes/examples/[theme-rtl]/button/12-button-as-link/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/button/12-button-as-link/index@examples.tsx
@@ -14,8 +14,8 @@ export default component$(() => {
       <Button href="https://google.com" target="_blank">
         Google.com
       </Button>
-      <Button href="/pages/getting-started">Quickstart</Button>
-      <Button href="/" tag={Link}>
+      <Button href="/examples/blue-ltr/button/11-button-disabled">Quickstart</Button>
+      <Button href="/examples/blue-ltr/button/13-button-full" tag={Link}>
         Internal link
       </Button>
     </div>

diff --git a/apps/web/src/routes/examples/[theme-rtl]/button/17-button-with-custom-tag/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/button/17-button-with-custom-tag/index@examples.tsx
@@ -0,0 +1,22 @@
+/**
+ * title: Button with custom tag
+ * description: You can use a custom tag for the Button component.
+ */
+
+import { component$ } from '@builder.io/qwik'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Button } from 'flowbite-qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+
+export default component$(() => {
+  return (
+    <div class="flex gap-2 items-center flex-wrap">
+      <Button tag="div">I'am a div</Button>
+      <Button tag="span">I'am a span</Button>
+    </div>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}
diff --git a/apps/web/src/routes/examples/[theme-rtl]/dropdown/06-dropdown-user-avatar/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/dropdown/06-dropdown-user-avatar/index@examples.tsx
@@ -1,6 +1,6 @@
 /**
  * title: User avatar
- * description: This example can be used to show a list of menu items and options when a user is logged into your application.
+ * description:  You can use the `as` prop to set the trigger element to an image. The trigger passed as props should not be a button element as Dropdown use button element internally. This example can be used to show a list of menu items and options when a user is logged into your application.
  */
 
 import { component$ } from '@builder.io/qwik'

diff --git a/apps/web/src/routes/examples/[theme-rtl]/tooltip/01-default/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/tooltip/01-default/index@examples.tsx
@@ -11,7 +11,10 @@ import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 export default component$(() => {
   return (
     <div class="flex text-center justify-center p-8">
-      <Tooltip style="dark" trigger={<Button>Hover me</Button>} content={<div>This is a tooltip</div>} />
+      <Tooltip style="dark">
+        <Button q:slot="trigger">Hover me</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
     </div>
   )
 })

diff --git a/apps/web/src/routes/examples/[theme-rtl]/tooltip/02-styles/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/tooltip/02-styles/index@examples.tsx
@@ -11,11 +11,18 @@ import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 export default component$(() => {
   return (
     <div class="flex text-center justify-center gap-3 p-8">
-      <Tooltip style="dark" trigger={<Button>Dark tooltip</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip style="light" trigger={<Button>Light tooltip</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip style="auto" trigger={<Button>Auto tooltip</Button>} content={<div>This is a tooltip</div>} />
+      <Tooltip style="dark">
+        <Button q:slot="trigger">Dark tooltip</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip style="light">
+        <Button q:slot="trigger">Light tooltip</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip style="auto">
+        <Button q:slot="trigger">Auto tooltip</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
     </div>
   )
 })

diff --git a/apps/web/src/routes/examples/[theme-rtl]/tooltip/03-placement/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/tooltip/03-placement/index@examples.tsx
@@ -11,13 +11,22 @@ import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 export default component$(() => {
   return (
     <div class="flex text-center justify-center gap-3 p-8">
-      <Tooltip placement="top" trigger={<Button>Tooltip top</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip placement="right" trigger={<Button>Tooltip right</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip placement="bottom" trigger={<Button>Tooltip bottom</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip placement="left" trigger={<Button>Tooltip left</Button>} content={<div>This is a tooltip</div>} />
+      <Tooltip placement="top">
+        <Button q:slot="trigger">Tooltip top</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip placement="right">
+        <Button q:slot="trigger">Tooltip right</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip placement="bottom">
+        <Button q:slot="trigger">Tooltip bottom</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip placement="left">
+        <Button q:slot="trigger">Tooltip left</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
     </div>
   )
 })

diff --git a/apps/web/src/routes/examples/[theme-rtl]/tooltip/04-trigger/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/tooltip/04-trigger/index@examples.tsx
@@ -11,9 +11,14 @@ import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 export default component$(() => {
   return (
     <div class="flex text-center justify-center gap-3 p-8">
-      <Tooltip triggerStrategy="hover" trigger={<Button>Tooltip hover</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip triggerStrategy="click" trigger={<Button>Tooltip click</Button>} content={<div>This is a tooltip</div>} />
+      <Tooltip trigger="hover">
+        <Button q:slot="trigger">Tooltip hover</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip trigger="click">
+        <Button q:slot="trigger">Tooltip click</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
     </div>
   )
 })

diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
@@ -1,6 +1,6 @@
 import { component$ } from '@builder.io/qwik'
 import { DocFooter } from '~/components/Footer/Footer'
-import { Button, Heading, Jumbotron } from 'flowbite-qwik'
+import { Button, Card, Heading, Jumbotron } from 'flowbite-qwik'
 import { IconArrowRightOutline } from 'flowbite-qwik-icons'
 
 export default component$(() => {
@@ -43,12 +43,12 @@ export default component$(() => {
       </Jumbotron>
 
       <section class="flex-1">
-        <div class="grid p-6 grid-cols-2 md:grid-cols-4 gap-6 mt-8 mx-auto max-w-6xl">
-          {boxes.map((box, i) => (
-            <div key={i} class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
+        <div class="grid p-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-8 mx-auto max-w-6xl">
+          {boxes.map((box) => (
+            <Card>
               <Heading tag="h3">{box.title}</Heading>
               <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">{box.text}</p>
-            </div>
+            </Card>
           ))}
         </div>
       </section>

diff --git a/apps/web/src/routes/layout.tsx b/apps/web/src/routes/layout.tsx
@@ -39,7 +39,7 @@ export default component$(() => {
           <Dropdown
             title="Switch Flowbite theme"
             as={
-              <Button square color="light" title="Switch Flowbite theme">
+              <Button square color="light" title="Switch Flowbite theme" tag="span">
                 <svg
                   class="w-4 h-4 text-gray-800 dark:text-white"
                   aria-hidden="true"

diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite-qwik",
-  "version": "0.29.0",
+  "version": "0.29.1",
   "description": "Unofficial Qwik components built for Flowbite and Tailwind CSS",
   "keywords": [
     "design-system",