dp-dialog

A promise-based modal for confirmations, prompts, and alerts, replacing the browser's blocking
confirm/prompt/alert. Application.js creates a single instance reachable as app.dialog.

Source: static/js/components/AppDialog.js.

Methods#

Each returns a Promise resolving when the user responds.

Method	Resolves with
`confirm(options)`	`true` if confirmed, `false` if cancelled or dismissed.
`prompt(options)`	the entered string, or `null` if cancelled.
`alert(options)`	`undefined` once acknowledged.

options: title, message, confirmLabel, cancelLabel, danger (red confirm button),
links, and for prompt: label, value, placeholder.

links is an optional array of {href, label} rendered as a row of links between the message and
the buttons, each opening in a new tab so the dialog and the pending action survive the click. Use it
when the user is being asked to agree to something they must be able to read first.

Usage#

<dp-dialog></dp-dialog>

const ok = await app.dialog.confirm({
    title: "Delete post",
    message: "This cannot be undone.",
    danger: true,
});
if (ok) {
    const name = await app.dialog.prompt({ label: "New name", value: "untitled" });
}

Live example