@fureinzz/fureinzz-dialog NPM

<fureinzz-dialog>

license

Creates a easily customizable and accessible component that adds a UI dialog element.

Accessible - When opening a dialog, the focus falls inside the dialog. When the dialog is closed, the focus is restored to the block that opened the component. You can also close the dialog by pressing Esc.
Works with any framework - the component is based on the native customElements technology, which makes it possible to use it together with any library or framework
Works with Shadow DOM - Dialog works by using the modern technology of Shadow DOM. This approach improves the experience of using web components
Built using WAI-ARIA Authoring Practices - Building using Aria attributes and focus trap
light weight - the volume of the dialog box is 35.5 KB

Usage

Before using the dialog you must import the component module: ( import "@fureinzz/fureinzz-dialog" ). After adding the module, you can use fureinzz-dialog in your app

To open the dialog, you can specify the opened attribute for the html element

<fureinzz-dialog opened>
    <div> Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</fureinzz-dialog>

Alternatively you can open the dialog using the opened property or using the open() method

const dialog = document.querySelector("fureinzz-dialog")
dialog.open()

Styling

You can use CSS variables to styling the dialog more pointwise. All available variables are listed here

You can also easily change the position of the dialog. Since the component is positioned relative to the parent, you can specify any location for the element using flexbox or grid

Example of what your dialog might look like:

Properties

When initializing a component each of the properties presented is false by default

opened - If true the dialog will be opened otherwise closed
noCloseOnOutsideClick - If it is false the dialog will be closed when you click outside of its zone
noCloseOnEsc - If false the dialog will be closed when you press Esc
noBackdrop - If it is true then the backdrop will be hidden

Example of how you can set a property in an html file:

<fureinzz-dialog opened no-close-on-esc no-bakcdrop>
    <div> Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</fureinzz-dialog>

Events

The dialog can dispatch 3 types of events to the external environment

open - Event that is dispatched when opening the dialog
close - An event that is dispatched when the user clicks outside the dialog area or press on Ecs. This event can be canceled using event.preventDefault()
cancel - Event that is dispatched when clicking on buttons contained inside the dialog with the cancel-button or confirm-button attribute. The event can also be called using the .cancel() and .confirm() methods. In the body event.detail contains the result of {canceled: ...}

    const dialog = document.querySelector("fureinzz-dialog")

    dialog.addEventListener("cancel", event => {
        const detail = event.detail
       
       // If a button with the `cancel-button` attribute was clicked
        console.log(detail) // {canceled: true}
    })