@devlop-ab/devlop v1.0.0

dialog

Modern drop-in replacement for native dialog methods alert, confirm and prompt.

Installing

using npm

npm install @devlop-ab/dialog

Usage

All methods are compatible with the standard dialog methods and accept the same arguments, plus an additional options argument to change basic dialog appearance and behaviour.

import { dialog } from '@devlop-ab/dialog';

// alert (no return value)
await dialog.alert('Hello world!');

// confirm (returns true or false)
const result = await dialog.confirm('Do you really want to leave?');

// prompt (returns string or null)
const result = await dialog.prompt('Are you feeling lucky?', 'sure');

Dialog options

All dialog methods accept an (optional) options argument where you can do basic configuration changes.

// all options are optional
{
    'title': 'Title of the dialog',
    'okText': 'Yes',
    'cancelText': 'No',
    'focus': 'cancel',
}

// examples
await dialog.alert('I\'m afraid i can\'t do that Dave.', {
    'title': 'HAL',
});

const result = await dialog.confirm('Do you really want to leave?', {
    'okText': 'Yes', 
    'cancelText': 'No',
});

Styles

The javascript does not output any styles, you must include them in your css/sass build.

Using SASS

// importing using sass
@import '@devlop-ab/dialog/dist/css/sky.css';

Using vanilla CSS

Copy the css file you want to use from the node_modules/@devlop-ab/dialog/dist/css directory and put it with your other assets.

Customizing the CSS

Each theme exposes a plethora of css variables allowing you to change colors, fonts and padding without overriding any css.

// importing using sass
@import '@devlop-ab/dialog/dist/css/sky.css';

[data-dialog] {
    --cancel-button-color: red;
}