Dialogs

High priority overlay notification utilizing a dynamic queue system.

Examples

Dialog Component

Add the following to your app's root layout so that the component stays in scope for whenever you might trigger it

javascript 
import { Dialog } from '@brainandbones/skeleton';
html 
<Dialog backdrop="bg-primary-500/50" blur="backdrop-blur-sm" card="bg-primary-500" duration={250} />

Properties

Prop Type Default Description
backdropstringbg-surface-400/70 dark:bg-surface-900/70Provide classes to set the backdrop background color.
blurstringbackdrop-blur-noneProvide classes to add a backdrop blur.
cardstringbg-surface-50 dark:bg-surface-700Provide classes to set the modal card element.
widthstringmax-w-[640px]Provide classes to set max modal width.
durationnumber100The animation in/out durations. Set to zero (0) for none.

Methods

To begin using dialogs, import the dialog store. This allows you to manipulate the dialog queue using the following methods.

javascript 
import { dialogStore } from '@brainandbones/skeleton';

Trigger

The following method allows you to insert a new dialog into the dialog queue.

javascript 
dialogStore.trigger(d); // see Dialog Variants below

Close

Allows you to close the current dialog by pruning the visible dialog from the top of the queue.

javascript 
dialogStore.close();

Clear

Allows you to flush the entire dialog queue, returning it to an empty state.

javascript 
dialogStore.clear();

Dialog Variants

typescript 
import type { DialogAlert, DialogConfirm, DialogPrompt } from '@brainandbones/skeleton';

Alert

The simplest dialog option. Note the title and body can accept HTML.

typescript 
const d: DialogAlert = {
    title: 'Welcome to <strong>Skeleton</strong>.',
    body: 'This is a standard alert dialog.',
};

Confirm

Displays an additional "confirm" button and returns a boolean response of false for cancel and true for confirm.

typescript 
const d: DialogConfirm = {
    type: 'confirm',
    title: 'Please Confirm',
    body: 'Are you sure you wish to proceed?',
    result: (r: boolean) => { console.log(r); }
};

Prompt

Provides and additional input to prompt a value from the user. Returns a string value when the user taps submit.

typescript 
const d: DialogPrompt = {
    type: 'prompt',
    title: 'Enter Name',
    body: 'Provide your first name in the field below.',
    value: valuePrompt,
    result: (r: string) => { if (r) { console.log(r); }; }
};

Embeds

You may optionally extend any dialog with the following features.

Image

Allows you to insert an image within content of the dialog.

typescript 
const d: DialogAlert = {
    title: 'Image Example',
    body: 'See the embedded image below.',
    image: 'https://source.unsplash.com/random/480x320?skeleton'
};

HTML

Allows you to insert HTML markup within the content of the dialog.

typescript 
const d: DialogAlert = {
    title: 'HTML Example',
    body: 'See the embedded HTML content below.',
    html: `<div class="bg-green-500 p-4">Hello, Skeleton</div>`
};

Component

Allows you to insert a dynamically-generated Svelte component within the content of the dialog. Note that only default slot content is supported at this time.

javascript 
import { Card } from '@brainandbones/skeleton';
typescript 
const d: DialogAlert = {
    title: 'Component Example',
    body: 'See the embedded Svelte component below.',
    component: {
        element: Card,
        props: {background: 'bg-orange-500'},
        slot: '<p class="text-center">Hello, Skeleton!</p>'
    }
};

Debugging

Log the Queue

Use the following to monitor the queue in your console as it updates. Note that Svelte store contents are only visible for the current logged line.

javascript 
dialogStore.subscribe(() => { console.log($dialogStore); });

Visualize the Queue

Use the following to display the queue in your UI. Note some properties may not display, such as response.

html 
<pre>queue: {JSON.stringify($dialogStore, null, 2)}</pre>

Accessibility

Meets all dialog requirements for the ARIA Guidelines.