<div class="docs-content" data-render>
# 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),
and for `prompt`: `label`, `value`, `placeholder`.

## Usage

```html
&lt;dp-dialog&gt;&lt;/dp-dialog&gt;
```

```javascript
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" });
}
```
</div>

<div class="component-demo">
    <div class="component-demo-title">Live example</div>
    <div class="component-demo-stage">
        <button type="button" class="btn btn-primary" id="dlg-confirm">Confirm</button>
        <button type="button" class="btn btn-secondary" id="dlg-prompt">Prompt</button>
        <button type="button" class="btn btn-secondary" id="dlg-alert">Alert</button>
        <span id="dlg-result" class="text-muted"></span>
    </div>
    <dp-dialog id="dialog-demo"></dp-dialog>
</div>
<script type="module">
    import "{{ static_url('/static/js/components/AppDialog.js') }}";
    const dialog = document.getElementById("dialog-demo");
    const result = document.getElementById("dlg-result");
    document.getElementById("dlg-confirm").addEventListener("click", async () => {
        const ok = await dialog.confirm({ title: "Confirm", message: "Proceed with this action?" });
        result.textContent = `confirm returned: ${ok}`;
    });
    document.getElementById("dlg-prompt").addEventListener("click", async () => {
        const value = await dialog.prompt({ title: "Rename", label: "New name", value: "untitled" });
        result.textContent = `prompt returned: ${JSON.stringify(value)}`;
    });
    document.getElementById("dlg-alert").addEventListener("click", async () => {
        await dialog.alert({ title: "Notice", message: "This is an alert." });
        result.textContent = "alert acknowledged";
    });
</script>
