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;

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;
}