dialog docs

Using npm

Javascript

import dialog to get access to the methods alert, confirm and prompt.

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

// alert
await dialog.alert('Your message', {
    title: 'Optional title',
});

// confirm
const result = await dialog.confirm('Delete everything?', {
    title: 'Optional title',
});

// prompt
const answer = await dialog.prompt('What is your name?', 'Hootsman', {
    title: 'Optional title',
});

CSS

Import the theme you want to use in your sass

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

If you are not using sass, copy the .css file to your public path.

Using CSS variables

The easiest way to change the design of the dialog is to use any of the css variables available, the color schema is HSL based and can easily be changed by modifying the base variables, all other colors will be calculated from these base variables.

[data-dialog] {
    /* the whole theme can be changed by only changing the hue. */
    --theme-color-hue: 120;

    /* it's also possible to change the saturation and lightness. */
    --theme-color-saturation: 80%;
    --theme-color-lightness: 58%;

    /* adjust the title look and feel. */
    --title-color: #222;
    --title-font-family: 'Arial';
    --title-font-size: 24px;

    /* adjust the space between the "cancel" / "ok" buttons. */
    --button-spacing: 14px;

    /* adjust the input field (prompt dialog only) */
    --input-padding: 10px;
    --input-font-size: 16px;
    --input-border: 2px solid #E5E7EB;
    --input-focus-border: 2px solid #0EA5E9;
}

It's also possible to change the style for only a single dialog method.

[data-dialog="confirm"] {
    /* applies only to confirm dialogs */
    --theme-color-hue: 313;
}

Available CSS variables

[data-dialog] {
    --theme-color-hue
    --theme-color-saturation
    --theme-color-lightness

    --theme-color-h: /* shorthand alias of --theme-color-hue */
    --theme-color-s: /* shorthand alias of --theme-color-saturation */
    --theme-color-l: /* shorthand alias of --theme-color-lightness */

    --theme-color: /* use the theme-color-* variables instead, this only affects some parts of the UI */

    --dialog-border-top-width:
    --dialog-border-top-style
    --dialog-border-top-color
    --dialog-border-top

    --dialog-padding
    --dialog-font-family
    --dialog-font-size

    --title-color:
    --title-font-family
    --title-font-size

    --button-spacing

    --input-padding
    --input-font-size
    --input-border
    --input-focus-border

    --focus-visible-outline
    --focus-visible-outline-offset

    --focus-box-shadow

    --ok-button-color
    --ok-button-border-width
    --ok-button-border-style
    --ok-button-background-color: /* updated by theme-color-* */
    --ok-button-hover-background-color: /* updated by theme-color-* */
    --ok-button-active-background-color: /* updated by theme-color-* */
    --ok-button-border: /* updated by theme-color-* and ok-button-border-* */
    --ok-button-hover-border: /* updated by theme-color-* and ok-button-border-* */
    --ok-button-active-border: /* updated by theme-color-* and ok-button-border-* */

    --cancel-button-color
    --cancel-button-border
    --cancel-button-background-color
    --cancel-button-hover-background-color: /* updated by theme-color-* */
    --cancel-button-active-background-color: /* updated by theme-color-* */
}

[data-dialog-backdrop] {
    --backdrop-background-color
    --backdrop-z-index
}

sky

sky is the only theme available at launch.

alert with title

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

await dialog.alert('Your changes have been saved.', {
    title: 'Saved',
});

alert with custom button text

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

await dialog.alert('Your changes have been saved.', {
    title: 'Saved',
    okText: 'Alright!',
});

confirm with custom buttons

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

const result = await dialog.confirm(`Delete the file "passwords.txt"?`, {
    title: 'Delete',
    okText: 'Yes',
    cancelText: 'No',
});

confirm with prefocused cancel button

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

const result = await dialog.confirm(`Delete the file "passwords.txt"?`, {
    title: 'Delete',
    okText: 'Yes',
    cancelText: 'No',
    focus: 'cancel',
});

prompt with default value

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

const result = await dialog.prompt('Glory?', 'Hammer!');

prompt with input placeholder

It's possible to customize the input field by using the input
option to pass along attributes to the <input> element.

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

const result = await dialog.prompt('Enter your name', 'Angus McFife', {
    title: 'Your name',
    input: {
        placeholder: 'Your full name please',
    },
});

prompt with required input

Using the input options it's possible to require a value in the input,
it does not however stop the user from cancelling the whole dialog,
but it does stop the user from submitting the dialog without a value.

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

const result = await dialog.prompt('Enter your name', 'Hootsman', {
    title: 'Your name',
    input: {
        required: true,
    },
});

prompt with custom buttons

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

const result = await dialog.prompt('Please give us your name', '', {
    title: 'Your name',
    okText: 'Sure',
    cancelText: 'No, it\'s a secret',
});

prompt with email input

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

const result = await dialog.prompt('Enter your email', '', {
    title: 'Your Email',
    input: {
        type: 'email',
        required: true,
    },
});

prompt with date input

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

const result = await dialog.prompt('Enter your birthday', '', {
    title: 'Your Birthday',
    input: {
        type: 'date',
    },
});

prompt with number input (using min and max values)

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

const result = await dialog.prompt('Enter a natural number between 50 and 99', '', {
    title: 'Natural numbers',
    input: {
        type: 'number',
        required: true,
        min: 50,
        max: 99,
        step: 1,
    },
});

prompt with minimum and maximum length requirements.

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

const result = await dialog.prompt('Enter a single word with a length between 4 and 9 letters.', '', {
    title: 'A single word',
    input: {
        type: 'text',
        placeholder: 'Letters only (a-z), no other characters.',
        required: true,
        minLength: 4,
        maxLength: 9,
        pattern: '[a-z]+',
    },
});