feat: use slot again for tooltip

qwikerx · Jun 22, 2024 · 450af11 · 450af11
1 parent 7154bb8
commit 450af11
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 75 deletions.
diff --git a/apps/web/src/generated-examples.ts b/apps/web/src/generated-examples.ts
@@ -1819,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',
     },
     {
@@ -1836,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',
     },
     {
@@ -1845,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]/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/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<HTMLElement | undefined>
-  triggerEl: JSXOutput
-}
-
-export const RenderFloatingTrigger = component$<RenderTriggerProps>((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<HTMLDivElement | undefined>

diff --git 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$<TooltipProps>(
-  ({ 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$<TooltipProps>(({ placement = 'top', trigger = 'hover', style = 'auto', noArrow = false }) => {
+  const isVisible = useSignal(false)
+  const { floatingRef, arrowRef, triggerRef } = useFloating(placement, trigger, noArrow, isVisible)
 
-    return (
-      <>
-        <RenderFloatingTrigger ref={triggerRef} triggerEl={trigger} />
+  return (
+    <>
+      <div ref={triggerRef}>
+        <Slot name="trigger" />
+      </div>
 
-        <RenderFloatingElement
-          q:slot="floating"
-          ref={floatingRef}
-          isVisible={isVisible.value}
-          class={[
-            'inline-block px-3 py-2 text-sm font-medium transition-opacity duration-300 rounded-lg shadow-sm',
-            {
-              'bg-gray-900 text-white dark:bg-gray-700': style === 'dark',
-              'border border-gray-200 bg-white text-gray-900': style === 'light',
-              'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white': style === 'auto',
-            },
-          ]}
-        >
-          {content}
+      <RenderFloatingElement
+        q:slot="floating"
+        ref={floatingRef}
+        isVisible={isVisible.value}
+        class={[
+          'inline-block px-3 py-2 text-sm font-medium transition-opacity duration-300 rounded-lg shadow-sm',
+          {
+            'bg-gray-900 text-white dark:bg-gray-700': style === 'dark',
+            'border border-gray-200 bg-white text-gray-900': style === 'light',
+            'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white': style === 'auto',
+          },
+        ]}
+      >
+        <Slot name="content" />
 
-          {!noArrow && (
-            <RenderFloatingArrow
-              ref={arrowRef}
-              class={[
-                {
-                  'bg-gray-900 dark:bg-gray-700': style === 'dark',
-                  'bg-white': style === 'light',
-                  'bg-white dark:bg-gray-700': style === 'auto',
-                },
-              ]}
-            />
-          )}
-        </RenderFloatingElement>
-      </>
-    )
-  },
-)
+        {!noArrow && (
+          <RenderFloatingArrow
+            ref={arrowRef}
+            class={[
+              {
+                'bg-gray-900 dark:bg-gray-700': style === 'dark',
+                'bg-white': style === 'light',
+                'bg-white dark:bg-gray-700': style === 'auto',
+              },
+            ]}
+          />
+        )}
+      </RenderFloatingElement>
+    </>
+  )
+})