Dialog

<script lang="ts">
  import { DialogContainer } from '@lyeve-labs/ui-kit';
  let { children } = $props();
</script>

{@render children()}
<DialogContainer />

<script lang="ts">
  import { confirm } from '@lyeve-labs/ui-kit';

  async function handleDelete(id: string) {
    const ok = await confirm('Delete this item?', 'This action cannot be undone.', {
      confirmLabel: 'Delete',
      detail: id,
    });
    if (!ok) return;
    await fetch(`/api/items/${id}`, { method: 'DELETE' });
  }
</script>

<script lang="ts">
  import { Button, Input, closeDialog, dismissDialog, openDialog } from '@lyeve-labs/ui-kit';

  let name = $state('');

  async function openCreate() {
    // Resolves with the payload passed to closeDialog(). Dismissing the
    // dialog rejects it instead: see Error handling below.
    const result = await openDialog<string>({
      title: 'Create project',
      body: createBody,
      footer: createFooter,
    });
    console.log('Created:', result);
  }
</script>

{#snippet createBody()}
  <Input label="Project name" bind:value={name} />
{/snippet}

{#snippet createFooter()}
  <Button variant="secondary" onclick={() => dismissDialog()}>Cancel</Button>
  <Button onclick={() => closeDialog(name)}>Create</Button>
{/snippet}

<Button onclick={openCreate}>New project</Button>

const result = await openDialog({
  title: 'Rename view',
  persistent: false,
  onClose: () => {
    if (nameChanged) return false; // stays open
  },
  body: renameSnippet,
  footer: actionsSnippet,
});

<script lang="ts">
  import { Button, closeDialog, dismissDialog, openDialog } from '@lyeve-labs/ui-kit';

  async function askTerms() {
    const result = await openDialog<string>({
      id: 'terms',
      title: 'Required action',
      persistent: true,
      body: termsBody,
      footer: termsFooter,
    });
    console.log('Terms:', result);
  }
</script>

{#snippet termsBody()}
  <p>Accept the updated terms to keep using the workspace.</p>
{/snippet}

{#snippet termsFooter()}
  <Button variant="ghost" onclick={() => dismissDialog('terms')}>Decline</Button>
  <Button onclick={() => closeDialog('accepted', 'terms')}>Accept</Button>
{/snippet}

<Button onclick={askTerms}>Review terms</Button>

import {
  openDialog,
  closeDialog,
  dismissDialog,
  dismissAllDialogs,
  getDialogStack,
} from '@lyeve-labs/ui-kit';

const a = openDialog({ title: 'First' });
const b = openDialog({ title: 'Second' });

getDialogStack();           // [{ depth: 0, ... }, { depth: 1, ... }]

dismissDialog();            // dismisses "Second"
closeDialog('done');        // resolves "First" with "done"

dismissAllDialogs();        // rejects every open dialog

try {
  const result = await openDialog({ title: 'Edit' });
  await save(result);
} catch (err) {
  if (err instanceof DOMException && err.name === 'AbortError') {
    // the reader canceled, so there is nothing to do
    return;
  }
  throw err;
}