Dialogs

Utility

High priority overlay notification utilizing a dynamic queue system.

@brainandbones/skeleton
View Source
Doc Source
Accessibility Reference

Examples

Examples

Usage

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

html 
<Dialog backdrop="bg-primary-500/50" blur="backdrop-blur-sm" card="bg-primary-500" duration={250} />

Create a Dialog Message

Create a new dialog using any available type.

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

Using the Dialog Queue

Use the following methods to add a dialog to the queue, remove the foremost dialog from the queue, or clear the queue completely.

javascript 
import { dialogStore } from '@brainandbones/skeleton';
javascript 
// Trigger - pass a Dialog
dialogStore.trigger(dialogMessage);

// Close
dialogStore.close();

// Clear
dialogStore.clear();

Embeds

You may optionally extend any type of dialog with the following features.

typescript 
const dialogMessage: DialogAlert = {
	// ...(title, body, etc)...
	// Image: Inserts an image within the dialog
	image: 'https://source.unsplash.com/random/480x320?skeleton',
	// HTML: Appends HTML markup within the dialog
	html: `<div class="bg-green-500 p-4">Hello, Skeleton</div>`
	// Component: Appends any valid Svelte component
	component: {
		element: GradientHeading,
		props: { tag: 'h1', direction: 'bg-gradient-to-r', from: 'from-primary-500', to: 'to-accent-500' },
		slot: 'Hello Skeleton.'
	}
};

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>