feat(dialog): make tailwind example work

Author: GregOnNet

apps/website/src/routes/docs/tailwind/(components)/dialog/examples.tsx

@@ -1,24 +1,27 @@
-import { component$, Slot } from '@builder.io/qwik';
+import { component$, Slot, useSignal } from '@builder.io/qwik';
 import { Button, Dialog } from '@qwik-ui/tailwind';
 import { PreviewCodeExample } from '../../../../../components/preview-code-example/preview-code-example';
 
 export const Example01 = component$(() => {
+ const dialogRef = useSignal<Dialog.DialogRef>();
+
  return (
  <PreviewCodeExample>
  <div q:slot="actualComponent">
- <Dialog.Root>
- <Dialog.Trigger>
- <button>Open Dialog</button>
- </Dialog.Trigger>
+ <Button onClick$={() => dialogRef.value?.open()}>Open Dialog</Button>
+
+ <Dialog.Root ref={dialogRef}>
+ <Dialog.Header>
+ <h2 id="dialog-heading">Hello 👋</h2>
+ </Dialog.Header>
  <Dialog.Content>
- <Dialog.ContentTitle>Hello 👋</Dialog.ContentTitle>
- <Dialog.ContentText>This is a simple dialog.</Dialog.ContentText>
- <Dialog.Actions>
- <Dialog.Close>
- <Button>Close</Button>
- </Dialog.Close>
- </Dialog.Actions>
+ <p id="dialog-text">I am a simple Dialog.</p>
  </Dialog.Content>
+ <Dialog.Footer>
+ <button onClick$={() => dialogRef.value?.close()}>
+ Close Dialog
+ </button>
+ </Dialog.Footer>
  </Dialog.Root>
  </div>
 

packages/kit-headless/src/components/dialog/dialog.root.tsx

@@ -5,7 +5,6 @@ import {
  component$,
  useSignal,
  useStylesScoped$,
- useTask$,
  useVisibleTask$,
 } from '@builder.io/qwik';
 import styles from './dialog.root.css?inline';
@@ -45,7 +44,7 @@ export const Root = component$((props: RootProps) => {
  * Share the public API of the Dialog if the dialog-caller is interested.
  *
  */
- useTask$(() => {
+ useVisibleTask$(() => {
  if (!props.ref) return;
 
  props.ref.value = { opened, open, close };

packages/kit-tailwind/src/components/dialog/dialog.tsx

@@ -4,8 +4,11 @@ import {
  useComputed$,
  useSignal,
  useStyles$,
+ useVisibleTask$,
 } from '@builder.io/qwik';
-import { Dialog, DialogRef } from '@qwik-ui/headless';
+import { Dialog } from '@qwik-ui/headless';
+
+export type DialogRef = Dialog.DialogRef;
 
 export const Root = component$((props: Dialog.RootProps) => {
  /**
@@ -33,38 +36,42 @@ export const Root = component$((props: Dialog.RootProps) => {
  }
  `);
 
- const dialog = useSignal<DialogRef>();
+ const dialogRef = useSignal<Dialog.DialogRef>();
 
  const dialogClass = useComputed$(() => {
- const clazz = dialog.value?.opened ? 'modal modal-open' : 'modal';
+ const dialog = dialogRef.value;
+ console.log('as;dlaksd;ka', dialogRef.value);
+ const clazz = dialog?.opened.value ? 'modal modal-open' : 'modal';
 
  return clazz;
  });
 
+ useVisibleTask$(({ track }) => {
+ // HACK: If the dialogRef is not tracked, the ref is not propagated sometimes.
+ // Normally, we should not need to track the dialogRef.
+ track(() => dialogRef.value);
+
+ if (!props.ref) return;
+
+ props.ref.value = dialogRef.value;
+ });
+
  return (
  <>
  <Dialog.Root
- class={`${dialogClass.value} modal--backdrop`}
  {...props}
- ref={dialog}
+ class={`${dialogClass.value} modal--backdrop`}
+ ref={dialogRef}
  >
- <Slot />
+ <div class="modal-box">
+ <Slot />
+ </div>
  </Dialog.Root>
  </>
  );
 });
 
-export const Content = component$(() => {
- return (
- <Dialog.Content>
- <div class="modal-box">
- <Slot />
- </div>
- </Dialog.Content>
- );
-});
-
-export const ContentTitle = component$(() => {
+export const Header = component$(() => {
  return (
  <Dialog.Header>
  <h3 class="font-bold text-lg">
@@ -73,18 +80,9 @@ export const ContentTitle = component$(() => {
  </Dialog.Header>
  );
 });
+export const Content = Dialog.Content;
 
-export const ContentText = component$(() => {
- return (
- <Dialog.Content>
- <p class="py-4">
- <Slot />
- </p>
- </Dialog.Content>
- );
-});
-
-export const Actions = component$(() => {
+export const Footer = component$(() => {
  return (
  <Dialog.Footer>
  <div class="modal-action">