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="ui-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="ui-button ui-outlined"
>
  Open dialog
</button>
<dialog
  class="ui-dialog ui-card ui-elevated"
  id="example-dialog"
  role="alertdialog"
  aria-labelledby="dialog-heading"
  aria-modal="true"
>
  <hgroup><h2 id="dialog-heading" class="ui-h4">Are you sure?</h2></hgroup>
  <div class="ui-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="ui-actions">
    <button
      commandfor="example-dialog"
      command="close"
      type="button"
      class="ui-button"
    >
      Cancel</button
    ><button
      commandfor="example-dialog"
      command="close"
      type="button"
      class="ui-button ui-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="ui-h4" slot="header">How to close</h2>
  <Fieldset slot="content">
    <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>
  <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>

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