feat: improved notifications

Improved automated handling of the cancel option. Now errors with odd options like saying a notification is false but having "Cancel" in the options.

Author: AlansCodeLog

src/components/LibNotifications/LibNotification.vue

@@ -105,47 +105,50 @@ defineExpose({
 
 	& :deep(.group) {
 		--groupPadding: var(--paddingM);
-		@include flex-row(true, center, center);
+		padding: 0;
+		@include flex-row(wrap, center, center);
 	}
 
 	@include border();
-	margin: var(--paddingM);
 	@include focusable();
 	// @include flex-col(nowrap, null, center);
 	@include flex-row(nowrap);
 	position:relative;
+	gap: var(--paddingM);
+	margin: var(--paddingM);
 }
 
 .upper {
-	// @include flex(1,0,100%);
+	margin: var(--paddingM);
+	gap: var(--paddingM);
 	@include flex-col(wrap);
 }
 
 .message-container {
 	@include flex(1, 1);
 	@include flex-col(wrap);
 	align-items: center;
-	margin-right: calc((var(--paddingXS) + 2px) * 2 + 1em);
+	margin-right: calc((var(--paddingXS) + 2px) + 1em);
 	// margin-left: var(--paddingXS);
 	margin-top: var(--paddingM);
+	gap: var(--paddingM);
 	// order:1;
 }
 
-.message {
+.title {
+	font-weight: bold;
+}
+
+.message,
+.title {
 	@include flex(1, 1);
-	padding: var(--paddingM) 0 0 var(--paddingM);
 }
 
 .code {
 	@include flex(1, 0);
-	padding: var(--paddingM) 0 0 var(--paddingM);
 	font-size: var(--fontSizeSmall);
 }
 
-.title {
-	font-weight: bold;
-}
-
 .actions {
 	// @include flex(0,0);
 	position: absolute;

src/components/LibNotifications/LibNotifications.stories.js

@@ -32,30 +32,61 @@ const Template = args => ({
 		const withTitle = ref(true)
 		const disableTimeout = ref(false)
 
-		const notify = () => {
+		const notifyRequiresAction = () => {
 			count++
 			handler.notify({
 				title: withTitle.value ? `Notification(${count})` : undefined,
-				message: `This is a notification. Pick an option:`,
+				message: `This is a notification that requires action. Pick an option:`,
 				requiresAction: true,
+				options: ["Ok", "Default Answer", "Cancel"],
+				default: "Default Answer",
+			})
+		}
+		const notifyWithDangerousOption = () => {
+			count++
+			handler.notify({
+				title: withTitle.value ? `Notification(${count})` : undefined,
+				message: `This is a notification that has a dangerous option. Pick an option:`,
 				options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
 				default: "Default Answer",
 				dangerous: ["Dangerous Option"],
-				cancellable: true,
+			})
+		}
+		const notifyNonCancellable = () => {
+			count++
+			handler.notify({
+				title: withTitle.value ? `Notification(${count})` : undefined,
+				message: `This is a non-cancellable notification. Pick an option:`,
+				options: ["Ok", "Default Answer"],
+				default: "Default Answer",
+				cancellable: false,
+			})
+		}
+		const notifyNonCancellableRequiresAction = () => {
+			count++
+			handler.notify({
+				title: withTitle.value ? `Notification(${count})` : undefined,
+				message: `This is a non-cancellable notification. Pick an option:`,
+				requiresAction: true,
+				options: ["Ok", "Default Answer"],
+				default: "Default Answer",
+				cancellable: false,
 			})
 		}
 		const notifyTimeoutable = () => {
 			count++
 			handler.notify({
 				title: withTitle.value ? `Notification(${count})` : undefined,
 				message: `This is a notification. No action required.`,
-				cancellable: true,
 				timeout: disableTimeout.value ? false : 2000,
 			})
 		}
 		return {
-			notify,
+			notifyRequiresAction,
 			notifyTimeoutable,
+			notifyNonCancellable,
+			notifyWithDangerousOption,
+			notifyNonCancellableRequiresAction,
 			handler,
 			withTitle,
 			disableTimeout,
@@ -69,8 +100,11 @@ const Template = args => ({
 	// <lib-debug>{{args.handler}}</lib-debug>
 	template: `
 	<test-wrapper :outline="args.outline">
-		<lib-button :label="'Notify'" @click="notify()"></lib-button>
 		<lib-button :label="'Notify Timeoutable'" @click="notifyTimeoutable()"></lib-button>
+		<lib-button :label="'Notify RequiresAction'" @click="notifyRequiresAction()"></lib-button>
+		<lib-button :label="'Notify Non-Cancellable that RequiresAction'" @click="notifyNonCancellableRequiresAction()"></lib-button>
+		<lib-button :label="'Notify With Dangerous Option'" @click="notifyWithDangerousOption()"></lib-button>
+		<lib-button :label="'Notify Non-Cancellable'" @click="notifyNonCancellable()"></lib-button>
 		<input type="checkbox" v-model="withTitle"/> With Title
 		<input type="checkbox" v-model="disableTimeout"/> Disable Timeout
 			<lib-notifications :handler="handler" />

src/components/LibNotifications/LibNotifications.vue

@@ -23,7 +23,7 @@
 				:notification="notification"
 				v-for="(notification, i) of notifications"
 				:key="notification.id"
-				:ref="(el: any) => i==0 ? lastNotificationComp = el as any :''"
+				:ref="(el: any) => i == 0 ? lastNotificationComp = el as any : ''"
 			/>
 		</TransitionGroup>
 	</div>
@@ -87,7 +87,7 @@ const notificationListener = (entry: NotificationEntry, type: "added" | "resolve
 		if (entry.requiresAction) {
 			topNotifications.value.push(entry)
 			// eslint-disable-next-line @typescript-eslint/no-floating-promises
-			entry.promise.then(() => { removeIfIn(topNotifications.value, entry)})
+			entry.promise.then(() => { removeIfIn(topNotifications.value, entry) })
 		} else {
 			notifications.value.splice(0, 0, entry)
 			// eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -105,24 +105,24 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 .top-notification-veil {
-	position:absolute;
-	@include pos(0,0,0,0);
+	position: absolute;
+	@include pos(0, 0, 0, 0);
 	background: var(--opacity5);
 	display: flex;
 	@include flex-row(nowrap, center, center)
 }
 
 .notifications {
-	position:absolute;
+	position: absolute;
 	z-index: 1000;
-	@include pos(0,0,0,null);
+	@include pos(0, 0, 0, null);
 	width: 300px;
 	pointer-events: none;
 	/* for animations */
-	overflow:hidden;
-	& > * {
-		pointer-events:all;
+	overflow: hidden;
+
+	&>* {
+		pointer-events: all;
 	}
 }
-
 </style>

src/helpers/NotificationHandler.ts

@@ -41,12 +41,19 @@ export class NotificationHandler<
 				`)
 		}
 		if (entry.cancellable) {
-			if (!entry.options.includes(entry.cancellable)) {
+			if (typeof entry.cancellable === "string" && !entry.options.includes(entry.cancellable)) {
 				throw new Error(
 					crop`Entry options does not include cancellable option "${entry.cancellable}":
 						${indent(pretty(entry), 6)}
 					`)
 			}
+		} else {
+			if (entry.options.includes("Cancel")) {
+				throw new Error(
+					crop`You specified that the entry should not be cancellable, but the options include the "Cancel" option:
+						${indent(pretty(entry), 6)}
+					`)
+			}
 		}
 		if (entry.timeout !== undefined && !entry.cancellable) {
 			throw new Error(
@@ -73,8 +80,8 @@ export class NotificationHandler<
 			requiresAction: false,
 			options: ["Ok", "Cancel"],
 			default: "Ok",
+			cancellable: rawEntry.cancellable,
 			...rawEntry,
-			cancellable: rawEntry.cancellable ? "Cancel" : rawEntry.cancellable,
 			dangerous: rawEntry.dangerous ?? [],
 			timeout: rawEntry.timeout === true
 				? this.timeout
@@ -83,8 +90,12 @@ export class NotificationHandler<
 				: undefined,
 		} as TEntry
 
+		if (rawEntry.cancellable === true || (rawEntry.cancellable === undefined && entry.options?.includes("Cancel"))) {
+			entry.cancellable = "Cancel" as any
+		}
 
 		this._checkEntry(entry)
+
 		castType<TEntry>(entry)
 		this.id++
 		entry.id = this.id
@@ -95,7 +106,7 @@ export class NotificationHandler<
 
 		if (entry.timeout !== undefined) {
 			setTimeout(() => {
-				entry.resolve(entry?.cancellable === true ? "Cancel" : entry.cancellable)
+				entry.resolve(entry.cancellable)
 			}, entry.timeout)
 		}
 		this.queue.push(entry)
@@ -118,8 +129,7 @@ export class NotificationHandler<
 			this.queue.splice(this.queue.indexOf(entry), 1)
 			return res
 		}) as NotificationPromise
-	}
-	static resolveToDefault(notification: NotificationEntry): void {
+	}	static resolveToDefault(notification: NotificationEntry): void {
 		notification.resolve(notification.default)
 	}
 	static dismiss(notification: NotificationEntry): void {
@@ -171,7 +181,7 @@ export type RawNotificationEntry<
 
 export type NotificationEntry<
 	TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>,
-> = MakeRequired<TRawEntry, "options" | "requiresAction" | "default" | "dangerous"> & {
+> = Omit<MakeRequired<TRawEntry, "options" | "requiresAction" | "default" | "dangerous">, "cancellable"> & {
 	promise: NotificationPromise
 	resolve: AnyFunction
 	cancellable?: string