Confirm Extended Dialog

Description

Confirm extended dialog is a web component that displays a dialog box that can be customized in the description to display buttons of Confirm and Cancel. Finally, the dialog can execute actions after clicking the Confirm or Cancel button.

Installation

Download from npm:

npm i confirm-extended-dialog

Usage

Add in the project

Once it is installed, import it in the HTML file using the script tag.

<script type="module">
    import "confirm-extended-dialog";
</script>

Title and description

To set the title and description, use the slot attribute in the HTML. For the title, use slot="title" and for description, use slot="description". You can use one or the other or both.

<confirm-extended-dialog>
    <h1 slot="title">Do you want to continue?</h1>
    <p slot="description">The changes cannot be undone.</p>
</confirm-extended-dialog>

Attributes

The confirm-extended-dialog web component has the following attributes:

1. confirm-label. Customizes the text of the confirmation button. By default, it is Confirm.
2. cancel-label. Customizes the text of the cancel button. By default, it is Cancel.
3. icon. Customizes the icon to show what kind of confirmation dialog it is. The allowable values are success, warning, and error. By default, there is no icon.
4. open. It allows opening the dialog using the attribute by setting open="true". By default, the dialog is closed.

Customize the text of the labels and the icon

<confirm-extended-dialog confirm-label="Yes" cancel-label="No" icon="warning">
    <h1 slot="title">Do you want to continue?</h1>
    <p slot="description">The changes cannot be undone.</p>
</confirm-extended-dialog>

Open immediately

<confirm-extended-dialog open="true">
    <h1 slot="title">Do you want to continue?</h1>
    <p slot="description">The changes cannot be undone.</p>
</confirm-extended-dialog>

Listeners

The confirm extended dialog web component can execute an action when the confirm or cancel button is clicked. Let's see each case:

// When the confirm button is clicked, an alert message is shown
const dialog = document.querySelector("confirm-extended-dialog");
dialog.addEventListener("confirm", () => alert("Hello world!!"));

// When the cancel button is clicked, the dialog is immediately closed and an alert message is shown.
const dialog = document.querySelector("confirm-extended-dialog");
dialog.addEventListener("cancel", () => alert("Goodbye world!!"));

Technologies

Contributing

Any contribution is welcome.

License

MIT licensed.