dialog

Oat documentation: https://oat.ink/components/dialog/

The dialog helpers build native HTML dialog flows for confirmations, forms, and focused tasks.

Anatomy

A dialog flow usually includes a dialog container, a trigger that opens it, and actions that close it. Most dialogs also include a header/title and footer actions.

Recipes

Open and close a dialog with command attributes

import glaze/oat/dialog
import lustre/attribute
import lustre/element/html

fn confirm_delete() {
  let id = "delete-dialog"

  html.div([], [
    html.button(dialog.open_for(id), [html.text("Delete")]),
    dialog.dialog([dialog.id(id)], [
      dialog.header([], [dialog.title([], [html.text("Delete item?")])]),
      html.p([], [html.text("This action cannot be undone.")]),
      dialog.footer([], [
        html.button(dialog.close_for(id), [html.text("Cancel")]),
        html.button([attribute.class("danger")], [html.text("Delete")]),
      ]),
    ]),
  ])
}

Close from inside with a dialog form

import glaze/oat/dialog
import lustre/element/html

fn simple_dialog() {
  dialog.dialog([dialog.id("settings")], [
    dialog.form([], [
      html.p([], [html.text("Done")]),
      html.button([], [html.text("Close")]),
    ]),
  ])
}

References

MDN <dialog>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
MDN HTMLDialogElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
MDN <form> method attribute (method="dialog"): https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form#method
MDN Invoker Commands (command/commandfor on dialog controls): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Values

close_for

</>

pub fn close_for(name: String) -> List(attribute.Attribute(msg))

Attributes for a control that closes the target dialog.

Attach these to a button or other interactive element.

closed_by_any

</>

pub fn closed_by_any() -> attribute.Attribute(msg)

Allow the dialog to close from any supported close interaction.

closed_by_close_request

</>

pub fn closed_by_close_request() -> attribute.Attribute(msg)

Allow close requests such as Esc and explicit close commands.

closed_by_none

</>

pub fn closed_by_none() -> attribute.Attribute(msg)

Prevent automatic close interactions.

dialog

</>

pub fn dialog(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

Render a dialog container.

Use this as the root element for modal and non-modal dialog content.

</>

pub fn footer(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

form

</>

pub fn form(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

Render a form that closes its parent dialog on submit.

Useful for cancel/confirm controls inside dialog content.

</>

pub fn header(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

id

</>

pub fn id(name: String) -> attribute.Attribute(msg)

Set an id on a dialog.

Pair this with open_for and close_for.

open_for

</>

pub fn open_for(name: String) -> List(attribute.Attribute(msg))

Attributes for a control that opens the target dialog.

Attach these to a button or other interactive element.

title

</>

pub fn title(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)