Dialogs

Import and add a single instance of the Dialog component in your app's root layout. This is only required ONCE per app since it exists in global scope.

<Dialog />

Dialog Store

When you wish to trigger a dialog, import the dialogStore, which acts as the dialog queue.

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

Trigger

Note that title, body, and image are optional for all dialog types.

function dialogAlert(): void {
	const d: DialogSettings = {
		type: 'alert',
		title: 'Example Alert',
		body: 'This is an example dialog.',
		image: 'https://i.imgur.com/WOgTG96.gif'
	};
	dialogStore.trigger(d);
}

Close

Trigger the close() method to remove the first dialog in the queue.

dialogStore.close();

Clear

Trigger the clear() method completely empty the store queue.

dialogStore.clear();

Debugging the Queue

You can visualize the contents of the store at any time, which can be helpful for debugging.

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

Customizing Dialogs

To customize an individual dialog, append classes to your settings and add the classes you wish to be applied to the dialog modal.

const d: DialogSettings = {
	type: 'alert',
	// ...
	classes: '!p-0 !bg-green-500 !max-w-[75%]'
};

Note that ! (important) may be required to override some styles.

To create a custom dialog, import and pass a reference to any Svelte component. This will construct and display the contents of the component within the dialog modal window.

function dialogComponent(): void {
	const comp: DialogComponent = {
		// Pass a reference to your custom component
		ref: MyCustomComponent,
		// Add props as key/value pairs
		props: { background: 'bg-red-500' },
		// Provide your 'default' slot content as a template literal
		slot: '<p>Skeleton</p>'
	};
	const d: DialogSettings = {
		type: 'component',
		component: comp
		// NOTE: title, body, response, etc are supported!
	};
	dialogStore.trigger(d);
}

Constructing a Dialog Component

When constructing your these components you are responsible for adding all close/submit buttons, as well as triggering the dialog response values as needed. To make this process easier to understand, we've provided a few examples to demonstrate the process.

A few things to note:

• Import and use the dialogStore to interface directly with the active dialog queue. [0] is the visible dialog index.
• Most Dialog component props are available via the parent prop - ex: parent.background will provide the background color.
• You can reference the full list of available parent prop values.
• Use the parent.onClose() or dialogStore.close() methods to close the dialog.
• Use the $dialogStore[0].response('myResponseDataHere'); method to return a response value.