➤ Install

yarn add dialog-lite

➤ Import

import DialogLite from 'dialog-lite';

CSS

@import "dialog-lite/dist/";

if your bundler supports SCSS

@import "dialog-lite/src/";

➤ Usage

const dialogLite = new DialogLite({
  closingButton: true,
  closingBackdrop: true,
});

dialogLite.init();

button.addEventListener('click', () => {
  dialogLite.open({
    stylingClass: 'dialog-lite--first-window',
  });
});

➤ Options

| Option | Type | Default | Description | |:-----------------:|:---------:|:-------:|:-------------------------------------------------------------------------------------------------------------------------------| | closingButton | boolean | false | When set to true, enables the close button functionality in the dialog. The dialog can be closed by clicking the close button. | | closingBackdrop | boolean | false | When set to true, enables closing the dialog by clicking on the backdrop. |

➤ API

| Method | Parameters | Description | |:-------:|:--------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------| | init | None | Initializes the dialog, setting up event listeners for close button, backdrop click, and escape key based on the provided options. | | open | { stylingClass?: string }Default: { stylingClass: '' } | Opens the dialog, applying the specified styling class. Focuses on the first element inside the dialog with tabindex="0", and stores the previously focused element. | | close | None | Closes the dialog, restoring focus to the previously focused element. Adds the class for closing animation and optionally delays removal of the class. |

➤ Events

| Method | Description | |:-----------------------:|:---------------------------------------------------------------------------------------------------| | click (Close Button) | Triggered when the close button is clicked, closing the dialog if closingButton option is enabled. | | click (Backdrop) | Triggered when the backdrop is clicked, closing the dialog if closingBackdrop option is enabled. | | keydown (Escape key) | Triggered when the Escape key is pressed, closing the dialog. |

➤ License

dialog-lite is released under MIT license