useDialog

A composable to facilitate the use of Dialog;

Import

import useDialog from '@leaflink/stash/useDialog';

Usage

Async/await

Call the composable in your component and call the open function. It returns a promise that will resolve when the dialog is confirmed/canceled.

<script setup>
  import useDialog from '@leaflink/stash/useDialog';

  const dialog = useDialog();

  async function displayDialog() {
    const result = await dialog.open({
      dangerZone: true,
      header: 'Test dialog',
      description: 'Bacon ipsum dolor amet tri-tip deserunt nostrud, nisi consequat corned beef dolore short loin fugiat turkey',
      cancelText: 'cancel',
      confirmText: 'confirm test',
    });
  }
</script>

Callback

Instead of awaiting for the promise to resolve you can pass both onConfirm and onCancel methods. They will be invoked when the user clicks the confirm button or the cancel button.

<script setup>
  import useDialog from '@leaflink/stash/useDialog';

  const dialog = useDialog();

  function onConfirm() {
    console.log('Confirmed!');
  }

  function onCancel() {
    console.log('Canceled!');
  }

  function displayDialogWithCallback() {
    dialog.open({
      dangerZone: true,
      header: 'Test dialog',
      description: 'Bacon ipsum dolor amet tri-tip deserunt nostrud, nisi consequat corned beef dolore short loin fugiat turkey',
      cancelText: 'cancel',
      confirmText: 'confirm test',
      onConfirm: () => onConfirm(),
      onCancel: () => onCancel(),
    });
  }
</script>

async onConfirm

You can provide a custom async onConfirm function. It will be called and awaited with the dialog still open. A good use case for this is a removal dialog where you want the user to confirm removal. When the user clicks the confirm button, the method will be invoked and the dialog will be kept open until the promise resolves or fails.

<script setup>
  import useDialog from '@leaflink/stash/useDialog';

  const dialog = useDialog();

  function onConfirm() {
    console.log('Confirmed!');
  }

  function onCancel() {
    console.log('Canceled!');
  }

  function displayDialogWithAsyncOnConfirm() {
    dialog.open({
      dangerZone: true,
      header: 'Test dialog',
      cancelText: 'cancel',
      confirmText: 'confirm test',
      onConfirm: () => {
        return new Promise((resolve, reject) => {
          setTimeout(resolve, 2000);
        });
      },
      onCancel: () => onCancel(),
      description: 'Bacon ipsum dolor amet tri-tip deserunt nostrud, nisi consequat corned beef dolore short loin fugiat turkey',
    });
  }
</script>

Slots

You can use the default slot to provide rich markup.

<script setup>
  import useDialog from '@leaflink/stash/useDialog';

  const dialog = useDialog();

  function onConfirm() {
    console.log('Confirmed!');
  }

  function onCancel() {
    console.log('Canceled!');
  }

  function displayDialogWithSlot() {
    dialog.open({
      dangerZone: true,
      header: 'Test dialog',
      cancelText: 'cancel',
      confirmText: 'confirm test',
      onConfirm: () => onConfirm(),
      onCancel: () => onCancel(),
      slots: {
        default: () => h(
          'span',
          {
            class: "tw-text-green",
          },
          'Bacon ipsum dolor amet tri-tip deserunt nostrud, nisi consequat corned beef dolore short loin fugiat turkey'
        ),
      },
    });
  }
</script>