Notifications

Setup

Jhana UI uses a singleton Svelte component. You have to include this once in your root layout. Then you can use the notify system across your whole app.

/routes/+layout.svelte

<script lang="ts">
    import { NotifyRoot } from '@leon8ix/jhana-ui/notify';
</script>

<NotifyRoot />

In case you're not happy with the default notify config, you can just set the values of the config object.

/lib/notis.ts

import { notiDefaults } from '@leon8ix/jhana-ui/notify';

// These values are the defaults:
notiDefaults.id = function genId() { return "X" + String(Math.random()).slice(-10); };
notiDefaults.duration = 5000;
notiDefaults.onok = true;
notiDefaults.onclose = false;

Notifications across dialogs

Keep one NotifyRoot in your app layout alongside PopupRoot. Notifications stay visible and interactive when dialogs or popovers open. The stack follows the active modal and returns to the previous dialog or page when it closes. Existing notifications keep their state and timers.

Show a notification before opening the settings dialog, or use Save inside it. More settings opens a second dialog. Notification buttons work at every level, and dismissing a notification leaves the dialog open.

NotifyPopupDemo.svelte

<script lang="ts">
	import { notify } from '@leon8ix/jhana-ui/notify';
	import { pop } from '@leon8ix/jhana-ui/popup';

	function saved() {
		notify({
			id: 'notification-layer-demo',
			title: 'Saved',
			msg: 'The settings were saved. You can dismiss this notification while the dialog stays open.',
			duration: Infinity,
			onclose: true,
		});
	}
	function open(nested = false) {
		pop({
			heading: nested ? 'Additional settings' : 'Settings',
			size: 'auto',
			content: 'Save to show a notification, then try closing the dialog or opening another one.',
			buttons: [
				...(!nested ? [{ text: 'More settings', onclick: () => open(true) }] : []),
				{ text: 'Save', primary: true, onclick: saved },
			],
		});
	}
</script>

<div class="btn-group">
	<button type="button" class="btn" onclick={saved}>Show notification</button>
	<button type="button" class="btn" onclick={() => open()}>Open settings dialog</button>
</div>

Usage

Once set up, you can just use the notify function anywhere. Either directly in the components or you might set up one file that contains all the notifications your app uses.

/lib/notis.ts

import { notify } from '@leon8ix/jhana-ui/notify';

export function notifyStoreSuccess() {
    notify({
        title: 'Saved',
        msg: 'The configuration was stored successfully.',
    });
}
export function notifyDeleteSuccess() {
    notify({
        title: 'Deleted',
        msg: 'The configuration was deleted successfully.',
    });
}

@leon8ix/jhana-ui/notify

export type NotiInit = {
	/** Setting id will prevent duplicate notifications */
	id?: string;
	title: string;
	msg?: string;
	/** Use `Infinity` to disable timeout // `undefined` will use default // unit: ms */
	duration?: number;
	/** Triggers when no button is pressed and timeout duration is reached // Notification will clear no matter if this is set */
	ontimeout?: () => any;
	/** Enables primary OK button // Setting `true` will just clear notification on ok */
	onok?: (() => any) | boolean;
	/** Enables close (`x`) button // Setting `true` will just clear notification */
	onclose?: (() => any) | boolean;
	/** Order from left to right // If `onok` is set, OK button will always be the rightmost */
	buttons?: NotiButton[];
}
export type NotiButton = {
	text: string;
	primary?: boolean;
	onclick?: () => any;
}