Dialog

import { dialog } from '@uniaria/core/dialog';
import { useBehavior } from '@uniaria/react';

export function DeleteFile(props: { onDelete(): void }) {
  const confirm = useBehavior(dialog, {
    onDismiss: (event) => {
      if (event.returnValue === 'delete') props.onDelete();
    },
  });
  return (
    <>
      <button {...confirm.parts.trigger}>Delete file…</button>
      <dialog {...confirm.parts.root}>
        <h2 {...confirm.parts.title}>Delete “report.pdf”?</h2>
        <p {...confirm.parts.description}>It stays in the trash for 30 days.</p>
        <form method="dialog">
          <button {...confirm.parts.close}>Cancel</button>
          <button value="delete">Delete</button>
        </form>
      </dialog>
    </>
  );
}

<script setup lang="ts">
import { dialog } from '@uniaria/core/dialog';
import { useBehavior } from '@uniaria/vue';

const emit = defineEmits<{ delete: [] }>();

const confirm = useBehavior(dialog, {
  onDismiss: (event) => {
    if (event.returnValue === 'delete') emit('delete');
  },
});
</script>

<template>
  <button v-bind="confirm.parts.trigger">Delete file…</button>
  <dialog v-bind="confirm.parts.root">
    <h2 v-bind="confirm.parts.title">Delete “report.pdf”?</h2>
    <p v-bind="confirm.parts.description">It stays in the trash for 30 days.</p>
    <form method="dialog">
      <button v-bind="confirm.parts.close">Cancel</button>
      <button value="delete">Delete</button>
    </form>
  </dialog>
</template>

<uni-dialog id="delete-file">
  <button data-uni-part="dialog-trigger">Delete file…</button>
  <dialog data-uni="dialog">
    <h2 data-element="Title">Delete “report.pdf”?</h2>
    <p data-element="Description">It stays in the trash for 30 days.</p>
    <form method="dialog">
      <button data-element="Close">Cancel</button>
      <button value="delete">Delete</button>
    </form>
  </dialog>
</uni-dialog>

<script type="module">
  import '@uniaria/elements/dialog';

  document
    .querySelector('#delete-file')
    .addEventListener('dismiss', (event) => {
      if (event.detail.returnValue === 'delete') console.log('Delete the file');
    });
</script>

export function RenameFile(props: {
  name: string;
  onRename(name: string): void;
}) {
  const rename = useBehavior(dialog, {});
  return (
    <>
      <button {...rename.parts.trigger}>Rename…</button>
      <dialog {...rename.parts.root}>
        <h2 {...rename.parts.title}>Rename file</h2>
        <form
          method="dialog"
          onSubmit={(event) => {
            const data = new FormData(event.currentTarget);
            props.onRename(String(data.get('name')));
          }}
        >
          <label>
            Name{' '}
            <input
              name="name"
              defaultValue={props.name}
              required
              data-autofocus
            />
          </label>
          <button {...rename.parts.close}>Cancel</button>
          <button value="rename">Rename</button>
        </form>
      </dialog>
    </>
  );
}

<script setup lang="ts">
import { dialog } from '@uniaria/core/dialog';
import { useBehavior } from '@uniaria/vue';

defineProps<{ name: string }>();
const emit = defineEmits<{ rename: [name: string] }>();

const rename = useBehavior(dialog);

function submit(event: SubmitEvent) {
  const data = new FormData(event.currentTarget as HTMLFormElement);
  emit('rename', String(data.get('name')));
}
</script>

<template>
  <button v-bind="rename.parts.trigger">Rename…</button>
  <dialog v-bind="rename.parts.root">
    <h2 v-bind="rename.parts.title">Rename file</h2>
    <form method="dialog" @submit="submit">
      <label>
        Name
        <input name="name" :value.attr="name" required data-autofocus />
      </label>
      <button v-bind="rename.parts.close">Cancel</button>
      <button value="rename">Rename</button>
    </form>
  </dialog>
</template>

<uni-dialog id="rename">
  <button data-uni-part="dialog-trigger">Rename…</button>
  <dialog data-uni="dialog">
    <h2 data-element="Title">Rename file</h2>
    <form method="dialog">
      <label for="new-name">Name</label>
      <input id="new-name" name="name" value="report.pdf" required autofocus />
      <button data-element="Close">Cancel</button>
      <button value="rename">Rename</button>
    </form>
  </dialog>
</uni-dialog>

<script type="module">
  import '@uniaria/elements/dialog';

  const rename = document.querySelector('#rename');
  rename.addEventListener('dismiss', (event) => {
    if (event.detail.returnValue === 'rename') {
      console.log('Renamed to', rename.querySelector('input').value);
    }
  });
</script>

const discard = useBehavior(dialog, {
  role: 'alertdialog',
  isDismissable: false,
  onDismiss: (event) => {
    if (event.returnValue === 'discard') props.onDiscard();
  },
});
return (
  <>
    <button {...discard.parts.trigger}>Close editor</button>
    <dialog {...discard.parts.root}>
      <h2 {...discard.parts.title}>Discard changes?</h2>
      <p {...discard.parts.description}>
        Your edits to this page will be lost.
      </p>
      <form method="dialog">
        <button {...discard.parts.close} data-autofocus>
          Keep editing
        </button>
        <button value="discard">Discard</button>
      </form>
    </dialog>
  </>
);

<script setup lang="ts">
const emit = defineEmits<{ discard: [] }>();

const discard = useBehavior(dialog, {
  role: 'alertdialog',
  isDismissable: false,
  onDismiss: (event) => {
    if (event.returnValue === 'discard') emit('discard');
  },
});
</script>

<template>
  <button v-bind="discard.parts.trigger">Close editor</button>
  <dialog v-bind="discard.parts.root">
    <h2 v-bind="discard.parts.title">Discard changes?</h2>
    <p v-bind="discard.parts.description">
      Your edits to this page will be lost.
    </p>
    <form method="dialog">
      <button v-bind="discard.parts.close" data-autofocus>Keep editing</button>
      <button value="discard">Discard</button>
    </form>
  </dialog>
</template>

<uni-dialog dismissable="false">
  <button data-uni-part="dialog-trigger">Close editor</button>
  <dialog data-uni="dialog" role="alertdialog">
    <h2 data-element="Title">Discard changes?</h2>
    <p data-element="Description">Your edits to this page will be lost.</p>
    <form method="dialog">
      <button data-element="Close" autofocus>Keep editing</button>
      <button value="discard">Discard</button>
    </form>
  </dialog>
</uni-dialog>

const [isOpen, setOpen] = useState(false);
const settings = useBehavior(dialog, { isOpen, onOpenChange: setOpen });
return (
  <>
    <MenuItem onAction={() => setOpen(true)}>Settings…</MenuItem>
    <dialog {...settings.parts.root}>…</dialog>
  </>
);

<script setup lang="ts">
const isOpen = ref(false);

const settings = useBehavior(dialog, () => ({
  isOpen: isOpen.value,
  onOpenChange: (open) => (isOpen.value = open),
}));
</script>

<template>
  <MenuItem @action="isOpen = true">Settings…</MenuItem>
  <dialog v-bind="settings.parts.root">…</dialog>
</template>

const settings = document.querySelector('#settings');

// Setting the isOpen property makes the element controlled.
settings.isOpen = true;
settings.addEventListener('openchange', (event) => {
  settings.isOpen = event.detail;
});

import { button } from '@uniaria/core/button';
import { dialog } from '@uniaria/core/dialog';
import { useBehavior } from '@uniaria/react';

export function FruitPicker(props: { fruit: string; onClear(): void }) {
  const picker = useBehavior(dialog, {});
  const clear = useBehavior(button, { onPress: props.onClear });
  return (
    <>
      <div {...picker.parts.triggerFrame}>
        <button {...picker.parts.trigger}>
          <span {...picker.parts.triggerLabel}>Fruit</span>
          <span {...picker.parts.triggerDescription}>{props.fruit}</span>
        </button>
        <span {...picker.parts.triggerExtras}>
          <button
            {...clear.parts.root}
            data-variant="quiet"
            aria-label="Clear Fruit"
          >
            <ClearIcon aria-hidden />
          </button>
        </span>
      </div>
      <dialog {...picker.parts.root}>
        <h2 {...picker.parts.title}>Choose fruit</h2>…
      </dialog>
    </>
  );
}

<script setup lang="ts">
import { button } from '@uniaria/core/button';
import { dialog } from '@uniaria/core/dialog';
import { useBehavior } from '@uniaria/vue';

defineProps<{ fruit: string }>();
const emit = defineEmits<{ clear: [] }>();

const picker = useBehavior(dialog);
const clear = useBehavior(button, { onPress: () => emit('clear') });
</script>

<template>
  <div v-bind="picker.parts.triggerFrame">
    <button v-bind="picker.parts.trigger">
      <span v-bind="picker.parts.triggerLabel">Fruit</span>
      <span v-bind="picker.parts.triggerDescription">{{ fruit }}</span>
    </button>
    <span v-bind="picker.parts.triggerExtras">
      <button
        v-bind="clear.parts.root"
        data-variant="quiet"
        aria-label="Clear Fruit"
      >
        <ClearIcon aria-hidden="true" />
      </button>
    </span>
  </div>
  <dialog v-bind="picker.parts.root">
    <h2 v-bind="picker.parts.title">Choose fruit</h2>
    …
  </dialog>
</template>

<uni-dialog>
  <div data-uni-part="dialog-trigger-frame">
    <button data-uni-part="dialog-trigger">
      <span data-uni-part="dialog-trigger-label">Fruit</span>
      <span data-uni-part="dialog-trigger-description">Apple</span>
    </button>
    <span data-uni-part="dialog-trigger-extras">
      <uni-button>
        <button data-uni="button" data-variant="quiet" aria-label="Clear Fruit">
          <svg aria-hidden="true">…</svg>
        </button>
      </uni-button>
    </span>
  </div>
  <dialog data-uni="dialog">
    <h2 data-element="Title">Choose fruit</h2>
    …
  </dialog>
</uni-dialog>

<script type="module">
  import '@uniaria/elements/button';
  import '@uniaria/elements/dialog';
</script>