dialog()

The dialog() function returns a wrapper around an existing <dialog> element that makes it easy to use dialogs in an async/await style. Call showAsync() to open the dialog as a modal and get back a promise that resolves when the dialog closes, yielding a result with a confirmed flag, the dialog's returnValue, and any form data collected from within the dialog.

You can also close the dialog programmatically by calling confirm(data?) or cancel() on the wrapper, which resolve the promise immediately with the appropriate result.

Usage

const dialog = window.duneui.dialog(document.getElementById("myDialog"));
const result = await dialog.showAsync();

Examples

Basic Usage

Open a dialog with showAsync() and await the result. The result object includes a confirmed property and the dialog's returnValue - in this example set by the submit buttons' value attributes.

The confirmed property will be false under the following conditions:

The dialog was light-dismissed
The dialog was dismissed using the Esc key
The form's returnValue is set to cancel.

<dui-stack align="StackAlign.Start" class="min-w-md">
    <dui-button variant="ButtonVariant.Outline" id="--js-dialog-intro-button">
        Open Dialog
    </dui-button>
    <label class="text-sm font-bold">Result:</label>
    <div class="font-mono w-full h-40 overflow-y-auto bg-gray-50" id="--js-dialog-intro-result">-</div>
</dui-stack>
<dui-dialog id="--js-dialog-intro-dialog">
    <dui-dialog-header>
        <dui-dialog-title>Are you absolutely sure?</dui-dialog-title>
        <dui-dialog-description>
            This action cannot be undone. This will permanently delete your account from our servers.
        </dui-dialog-description>
    </dui-dialog-header>
    <form method="dialog" >
        <dui-dialog-footer>
            <dui-button variant="ButtonVariant.Outline" type="submit" value="cancel">
                Cancel
            </dui-button>
            <dui-button type="submit" value="confirm" autofocus>
                Continue
            </dui-button>
        </dui-dialog-footer>
    </form>
</dui-dialog>
<script type="module">
    (function () {
        const dialog = window.duneui.dialog(document.getElementById("--js-dialog-intro-dialog"));
        const triggerButton = document.getElementById("--js-dialog-intro-button");
        const resultDisplay = document.getElementById("--js-dialog-intro-result");

        triggerButton.addEventListener("click", async (event) => {
            const result = await dialog.showAsync();
            resultDisplay.innerHTML = JSON.stringify(result, null, 4);
        });
    })();
</script>

Returning Form values

When the dialog is confirmed, any form data within the dialog is serialized and returned in the data property of the result.

<dui-stack align="StackAlign.Start" class="min-w-md">
    <dui-button variant="ButtonVariant.Outline" id="--js-dialog-form-values-button">
        Open Dialog
    </dui-button>
    <label class="text-sm font-bold">Result:</label>
    <div class="font-mono w-full h-40 overflow-y-auto bg-gray-50" id="--js-dialog-form-values-result">-</div>
</dui-stack>
<dui-dialog id="--dialog-return-form-value-helper">
    <form method="dialog" asp-antiforgery="false" class="grid gap-4">
        <dui-dialog-header>
            <dui-dialog-title>Edit profile</dui-dialog-title>
            <dui-dialog-description>Make changes to your profile here. Click save when you're done.
            </dui-dialog-description>
        </dui-dialog-header>
        <dui-field-group>
            <dui-field>
                <dui-label for="--js-dialog-form-values-name">Name</dui-label>
                <dui-input id="--js-dialog-form-values-name" name="name" defaultValue="Ibn Battuta" required/>
            </dui-field>
            <dui-field>
                <dui-label for="--js-dialog-form-values-username">Username</dui-label>
                <dui-input id="--js-dialog-form-values-username" name="username" defaultValue="@@ibnbattuta"
                           required/>
            </dui-field>
        </dui-field-group>
        <dui-dialog-footer>
            <dui-button variant="ButtonVariant.Outline" type="submit" value="cancel" formnovalidate>
                Cancel
            </dui-button>
            <dui-button type="submit" value="confirm" value="confirm">
                Save Changes
            </dui-button>
        </dui-dialog-footer>
    </form>
</dui-dialog>
<script type="module">
    (function () {
        const dialog = window.duneui.dialog(document.getElementById("--dialog-return-form-value-helper"));
        const button = document.getElementById("--js-dialog-form-values-button");
        const resultDisplay = document.getElementById("--js-dialog-form-values-result");

        button.addEventListener("click", async (event) => {
            const result = await dialog.showAsync();
            resultDisplay.innerHTML = JSON.stringify(result, null, 4);
        });
    })();
</script>

Manual Result

You can close the dialog programmatically using the confirm(data?) and cancel() methods. This will resolve the promise. When calling cancel(), the confirmed property of the result will be set to false.

When calling confirm(data?), the confirmed property will be set to true. You can also optionally pass a data parameter to the method, which will be returned in the data property of the result.

<dui-stack align="StackAlign.Start" class="min-w-md">
    <dui-button variant="ButtonVariant.Outline" id="--js-dialog-manual-button">
        Open Dialog
    </dui-button>
    <label class="text-sm font-bold">Result:</label>
    <div class="font-mono w-full h-40 overflow-y-auto bg-gray-50" id="--js-dialog-manual-result">-</div>
</dui-stack>
<dui-dialog id="--js-dialog-manual-dialog">
    <dui-dialog-header>
        <dui-dialog-title>Manual Result</dui-dialog-title>
        <dui-dialog-description>
            Demonstrates how you can manually return a result.
        </dui-dialog-description>
    </dui-dialog-header>
    <dui-dialog-footer>
        <dui-button id="-js-dialog-manual-button-cancel" variant="ButtonVariant.Outline">
            Cancel
        </dui-button>
        <dui-button id="-js-dialog-manual-button-confirm" variant="ButtonVariant.Outline">
            Confirm
        </dui-button>
        <dui-button id="-js-dialog-manual-button-confirm-with-data" variant="ButtonVariant.Outline">
            Confirm with Data
        </dui-button>
    </dui-dialog-footer>
</dui-dialog>
<script type="module">
    (function () {
        const dialog = window.duneui.dialog(document.getElementById("--js-dialog-manual-dialog"));
        const resultDisplay = document.getElementById("--js-dialog-manual-result");
        const triggerButton = document.getElementById("--js-dialog-manual-button");
        const cancelButton = document.getElementById("-js-dialog-manual-button-cancel");
        const confirmButton = document.getElementById("-js-dialog-manual-button-confirm");
        const confirmWithDataButton = document.getElementById("-js-dialog-manual-button-confirm-with-data");

        triggerButton.addEventListener("click", async (event) => {
            const result = await dialog.showAsync();
            resultDisplay.innerHTML = JSON.stringify(result, null, 4);
        });
        cancelButton.addEventListener("click", async (event) => {
            dialog.cancel();
        });
        confirmButton.addEventListener("click", async (event) => {
            dialog.confirm();
        });
        confirmWithDataButton.addEventListener("click", async (event) => {
            dialog.confirm({name: "Ibn", surname: "Battutta"});
        });
    })();
</script>