@devlop-ab/dialog
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    Latest Stable Version License

    Example of a confirm dialog

    See examples

    dialog

    Lightweight and accessible drop-in replacement for the built-in browser 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.

    All methods returns a promise, so by using await we can mimic the built in behaviour of halting execution of the current function while waiting for the dialog response.

    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 if cancelled)
    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.

    See https://devlop.github.io/dialog for more examples.

    // 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 the theme "sky".
    @import '@devlop-ab/dialog/dist/css/sky.css';

    See https://devlop.github.io/dialog for all available themes.

    Using vanilla CSS

    Copy the css file for the theme you want to use from 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 selectors.

    // importing using sass
    @import '@devlop-ab/dialog/dist/css/sky.css';
    
    [data-dialog] {
        --theme-color-hue: 310;
    }

    See https://devlop.github.io/dialog for all variables.

    Install

    npm i @devlop-ab/dialog

    DownloadsWeekly Downloads

    3

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    29.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • johanrosenson