Dialogs

Import and add a single instance of the Dialog component in your app's root layout. We recommend only adding this 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 triggerAlert(): 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 dialog queue.

dialogStore.close();

Clear

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

dialogStore.clear();

Debugging the Queue

Use the following technique to visualize the contents of the store for debugging.

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

Customizing Dialogs

To customize an individual dialog, append classes and provide the classes you wish to be applied to the dialog modal window.

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

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

You can create a custom modal by passing a DialogComponent object, which includes any Svelte component.

// import MyCustomComponent from '...';

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

When constructing your these custom modals, you are responsible for implementing close/submit buttons, as well as triggering the response method as needed. To make this process easier to understand, we have provided a few examples to demonstrate the process.

Below are a few tips and recommendations for custom modals:

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