From 7154bb83bebac1210da168f33001f416e63050a5 Mon Sep 17 00:00:00 2001 From: Jean-Charles FAUCHET Date: Sat, 22 Jun 2024 19:21:02 +0200 Subject: [PATCH 1/2] fix: dropdown custom trigger and use cards in hompage --- apps/web/src/components/Preview/Preview.tsx | 3 +- apps/web/src/generated-examples.ts | 13 +++++- .../12-button-as-link/index@examples.tsx | 4 +- .../index@examples.tsx | 22 ++++++++++ .../index@examples.tsx | 2 +- apps/web/src/routes/index.tsx | 10 ++--- apps/web/src/routes/layout.tsx | 2 +- packages/lib/package.json | 2 +- packages/lib/src/components/Button/Button.tsx | 16 ++++--- .../lib/src/components/Dropdown/Dropdown.tsx | 44 +++---------------- 10 files changed, 58 insertions(+), 60 deletions(-) create mode 100644 apps/web/src/routes/examples/[theme-rtl]/button/17-button-with-custom-tag/index@examples.tsx diff --git a/apps/web/src/components/Preview/Preview.tsx b/apps/web/src/components/Preview/Preview.tsx index 78f38a16..eb8c7c42 100644 --- a/apps/web/src/components/Preview/Preview.tsx +++ b/apps/web/src/components/Preview/Preview.tsx @@ -34,8 +34,7 @@ export const Preview = component$(({ 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 index adfd7682..ecf4f52b 100644 --- a/apps/web/src/generated-examples.ts +++ b/apps/web/src/generated-examples.ts @@ -505,7 +505,7 @@ export const examples: Record = { 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
\n \n \n \n
\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
\n \n \n \n
\n )\n})', height: '200', }, { @@ -540,6 +540,14 @@ export const examples: Record = { "import { component$ } from '@builder.io/qwik'\nimport { Button } from 'flowbite-qwik'\nimport { IconArrowRightOutline } from 'flowbite-qwik-icons'\n\nexport default component$(() => {\n return (\n
\n \n
\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
\n \n \n
\n )\n})', + height: '200', + }, ], 'button-group': [ { @@ -861,7 +869,8 @@ export const examples: Record = { }, { 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
\n \n }\n >\n \n Bonnie Green\n bonnie@flowbite.com\n \n Dashboard\n Settings\n \n Sign out\n \n\n \n }\n >\n \n Bonnie Green\n bonnie@flowbite.com\n \n Dashboard\n Settings\n \n Sign out\n \n\n \n }\n >\n \n Bonnie Green\n bonnie@flowbite.com\n \n Dashboard\n Settings\n \n Sign out\n \n
\n )\n})', 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 index b3dda303..e8ca58dc 100644 --- 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$(() => { - - + 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 new file mode 100644 index 00000000..b0dc3bf4 --- /dev/null +++ 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 ( +
+ + +
+ ) +}) + +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 index 765148c6..a3f99077 100644 --- 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/index.tsx b/apps/web/src/routes/index.tsx index 9f0b9ec5..48a0bd46 100644 --- 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$(() => {
-
- {boxes.map((box, i) => ( -
+
+ {boxes.map((box) => ( + {box.title}

{box.text}

-
+ ))}
diff --git a/apps/web/src/routes/layout.tsx b/apps/web/src/routes/layout.tsx index 1ec47bee..32ae8ec7 100644 --- a/apps/web/src/routes/layout.tsx +++ b/apps/web/src/routes/layout.tsx @@ -39,7 +39,7 @@ export default component$(() => { + ) From 450af11f4be4e1b535578ac737f791bab473160f Mon Sep 17 00:00:00 2001 From: Jean-Charles FAUCHET Date: Sat, 22 Jun 2024 19:41:13 +0200 Subject: [PATCH 2/2] feat: use slot again for tooltip --- apps/web/src/generated-examples.ts | 8 +- .../tooltip/01-default/index@examples.tsx | 5 +- .../tooltip/02-styles/index@examples.tsx | 17 ++-- .../tooltip/03-placement/index@examples.tsx | 23 +++-- .../tooltip/04-trigger/index@examples.tsx | 11 ++- .../lib/src/components/Floating/Floating.tsx | 13 +-- .../lib/src/components/Tooltip/Tooltip.tsx | 84 +++++++++---------- 7 files changed, 86 insertions(+), 75 deletions(-) diff --git a/apps/web/src/generated-examples.ts b/apps/web/src/generated-examples.ts index ecf4f52b..26f8e36a 100644 --- a/apps/web/src/generated-examples.ts +++ b/apps/web/src/generated-examples.ts @@ -1819,7 +1819,7 @@ export const examples: Record = { 'Wrap the trigger component with the component and pass the tooltip content to the content prop of the 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
\n Hover me} content={
This is a tooltip
} />\n
\n )\n})', + 'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n
This is a tooltip
\n \n
\n )\n})', height: '200', }, { @@ -1827,7 +1827,7 @@ export const examples: Record = { 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
\n Dark tooltip} content={
This is a tooltip
} />\n\n Light tooltip} content={
This is a tooltip
} />\n\n Auto tooltip} content={
This is a tooltip
} />\n
\n )\n})', + 'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n
This is a tooltip
\n \n \n \n
This is a tooltip
\n \n \n \n
This is a tooltip
\n \n
\n )\n})', height: '200', }, { @@ -1836,7 +1836,7 @@ export const examples: Record = { '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
\n Tooltip top} content={
This is a tooltip
} />\n\n Tooltip right} content={
This is a tooltip
} />\n\n Tooltip bottom} content={
This is a tooltip
} />\n\n Tooltip left} content={
This is a tooltip
} />\n
\n )\n})', + 'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n
This is a tooltip
\n \n \n \n
This is a tooltip
\n \n \n \n
This is a tooltip
\n \n \n \n
This is a tooltip
\n \n
\n )\n})', height: '200', }, { @@ -1845,7 +1845,7 @@ export const examples: Record = { '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
\n Tooltip hover} content={
This is a tooltip
} />\n\n Tooltip click} content={
This is a tooltip
} />\n
\n )\n})', + 'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n
This is a tooltip
\n \n \n \n
This is a tooltip
\n \n
\n )\n})', height: '200', }, ], 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 index cf8e4611..a7acc29a 100644 --- 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 (
- Hover me} content={
This is a tooltip
} /> + + +
This is a tooltip
+
) }) 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 index e1f3089e..ef7e33d7 100644 --- 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 (
- Dark tooltip} content={
This is a tooltip
} /> - - Light tooltip} content={
This is a tooltip
} /> - - Auto tooltip} content={
This is a tooltip
} /> + + +
This is a tooltip
+ + + +
This is a tooltip
+ + + +
This is a tooltip
+
) }) 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 index dba33f67..67bd2f06 100644 --- 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 (
- Tooltip top} content={
This is a tooltip
} /> - - Tooltip right} content={
This is a tooltip
} /> - - Tooltip bottom} content={
This is a tooltip
} /> - - Tooltip left} content={
This is a tooltip
} /> + + +
This is a tooltip
+ + + +
This is a tooltip
+ + + +
This is a tooltip
+ + + +
This is a tooltip
+
) }) 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 index 49b999c4..6d371edc 100644 --- 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 (
- Tooltip hover} content={
This is a tooltip
} /> - - Tooltip click} content={
This is a tooltip
} /> + + +
This is a tooltip
+ + + +
This is a tooltip
+
) }) diff --git a/packages/lib/src/components/Floating/Floating.tsx b/packages/lib/src/components/Floating/Floating.tsx index 0a119359..3996de8b 100644 --- a/packages/lib/src/components/Floating/Floating.tsx +++ b/packages/lib/src/components/Floating/Floating.tsx @@ -1,15 +1,4 @@ -import { JSXNode, JSXOutput, PropsOf, Signal, Slot, component$ } from '@builder.io/qwik' - -type RenderTriggerProps = PropsOf<'button'> & { - ref: Signal - triggerEl: JSXOutput -} - -export const RenderFloatingTrigger = component$((props) => { - ;(props.triggerEl as JSXNode).props.ref = props.ref - - return <>{props.triggerEl} -}) +import { PropsOf, Signal, Slot, component$ } from '@builder.io/qwik' type RenderFloatingElementProps = PropsOf<'div'> & { ref: Signal diff --git a/packages/lib/src/components/Tooltip/Tooltip.tsx b/packages/lib/src/components/Tooltip/Tooltip.tsx index 914c3e87..334aed6b 100644 --- a/packages/lib/src/components/Tooltip/Tooltip.tsx +++ b/packages/lib/src/components/Tooltip/Tooltip.tsx @@ -1,57 +1,55 @@ -import { JSXOutput, PropsOf, component$, useSignal } from '@builder.io/qwik' +import { PropsOf, Slot, component$, useSignal } from '@builder.io/qwik' import { Placement } from '@floating-ui/dom' import { TooltipStyle } from './tooltip-types' import { FloatingTrigger } from '../Floating/floating-types' -import { RenderFloatingArrow, RenderFloatingElement, RenderFloatingTrigger } from '../Floating/Floating' +import { RenderFloatingArrow, RenderFloatingElement } from '../Floating/Floating' import { useFloating } from '~/composables/use-floating' type TooltipProps = PropsOf<'div'> & { placement?: Placement style?: TooltipStyle - triggerStrategy?: FloatingTrigger + trigger?: FloatingTrigger noArrow?: boolean - trigger?: JSXOutput - content?: JSXOutput } -export const Tooltip = component$( - ({ placement = 'top', trigger, content, triggerStrategy = 'hover', style = 'auto', noArrow = false }) => { - const isVisible = useSignal(false) - const { floatingRef, arrowRef, triggerRef } = useFloating(placement, triggerStrategy, noArrow, isVisible) +export const Tooltip = component$(({ placement = 'top', trigger = 'hover', style = 'auto', noArrow = false }) => { + const isVisible = useSignal(false) + const { floatingRef, arrowRef, triggerRef } = useFloating(placement, trigger, noArrow, isVisible) - return ( - <> - + return ( + <> +
+ +
- - {content} + + - {!noArrow && ( - - )} - - - ) - }, -) + {!noArrow && ( + + )} + + + ) +})