Dialog

---
import { Dialog } from "@opui/astro"
import { Button } from "@opui/astro"
---

<Button commandfor="example-dialog" command="show-modal" variant="outlined">
  Open dialog
</Button>

<Dialog
  id="example-dialog"
  role="alertdialog"
  aria-labelledby="dialog-heading"
  aria-modal="true"
>
  <h2 id="dialog-heading" class="h4" slot="header">Are you sure?</h2>
  <p slot="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales,
    nulla sit amet porttitor rhoncus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus.
  </p>
  <Fragment slot="actions">
    <Button commandfor="example-dialog" command="close" type="button">
      Cancel
    </Button>
    <Button
      commandfor="example-dialog"
      command="close"
      type="button"
      variant="filled"
    >
      Save
    </Button>
  </Fragment>
</Dialog>

<button
  commandfor="example-dialog"
  command="show-modal"
  class="button outlined"
>
  Open dialog
</button>
<dialog
  class="dialog card elevated"
  id="example-dialog"
  role="alertdialog"
  aria-labelledby="dialog-heading"
  aria-modal="true"
>
  <hgroup><h2 id="dialog-heading" class="h4">Are you sure?</h2></hgroup>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales,
      nulla sit amet porttitor rhoncus. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus.
    </p>
  </div>
  <div class="actions">
    <button
      commandfor="example-dialog"
      command="close"
      type="button"
      class="button"
    >
      Cancel</button
    ><button
      commandfor="example-dialog"
      command="close"
      type="button"
      class="button filled"
    >
      Save
    </button>
  </div>
</dialog>

---
import { Dialog } from "@opui/astro"
import { Radio } from "@opui/astro"
import { Button } from "@opui/astro"
import { FieldSet as Fieldset } from "@opui/astro"
import { FieldGroup } from "@opui/astro"
import { FieldLegend } from "@opui/astro"
---

<Button
  commandfor="closing-behaviors-dialog"
  command="show-modal"
  variant="outlined"
>
  Open dialog
</Button>

<Dialog id="closing-behaviors-dialog" closedby="any">
  <h2 class="h4" slot="header">How to close</h2>
  <div slot="content">
    <Fieldset>
      <FieldLegend>Choose a closing behavior:</FieldLegend>
      <FieldGroup name="closedby-demo">
        <Radio value="any" checked>any</Radio>
        <Radio value="closerequest">closerequest</Radio>
        <Radio value="none">none</Radio>
      </FieldGroup>
    </Fieldset>
  </div>
  <Fragment slot="actions">
    <Button commandfor="closing-behaviors-dialog" command="close">
      Close manually
    </Button>
  </Fragment>
</Dialog>

<script>
  const dialog = document.getElementById(
    "closing-behaviors-dialog",
  ) as HTMLDialogElement
  const radios = document.querySelectorAll('input[name="closedby-demo"]')

  radios.forEach((radio) => {
    radio.addEventListener("change", (e) => {
      const target = e.target as HTMLInputElement
      if (dialog) {
        dialog.setAttribute("closedby", target.value)
      }
    })
  })
</script>

<script type="module">
  const e = document.getElementById("closing-behaviors-dialog"),
    a = document.querySelectorAll('input[name="closedby-demo"]');
  a.forEach((t) => {
    t.addEventListener("change", (o) => {
      const n = o.target;
      e && e.setAttribute("closedby", n.value);
    });
  });
</script>
<button
  commandfor="closing-behaviors-dialog"
  command="show-modal"
  class="button outlined"
>
  Open dialog
</button>
<dialog
  class="dialog card elevated"
  closedby="any"
  id="closing-behaviors-dialog"
>
  <hgroup><h2 class="h4">How to close</h2></hgroup>
  <div class="content">
    <div>
      <fieldset class="fieldset">
        <legend>Choose a closing behavior:</legend>
        <div class="field-group" role="group">
          <label class="radio">
            <input type="radio" checked name="closedby-demo" value="any" /><span
              class="label"
              >any</span
            >
          </label>
          <label class="radio">
            <input
              type="radio"
              name="closedby-demo"
              value="closerequest"
            /><span class="label">closerequest</span>
          </label>
          <label class="radio">
            <input type="radio" name="closedby-demo" value="none" /><span
              class="label"
              >none</span
            >
          </label>
        </div>
      </fieldset>
    </div>
  </div>
  <div class="actions">
    <button
      commandfor="closing-behaviors-dialog"
      command="close"
      class="button"
    >
      Close manually
    </button>
  </div>
</dialog>