Support as-yet-released error API

upp

src/lib/notify.ts

@@ -2,13 +2,16 @@ import { toast } from "@zerodevx/svelte-toast";
 import type { SvelteToastOptions } from "@zerodevx/svelte-toast/stores";
 import { type Notification } from "framework7/components/notification"
 import { f7 } from "framework7-svelte"
+import OnClickToastItem from "$lib/components/OnClickToastItem.svelte"
 
 export type NotifyOptions = {
     title?: string,
     type?: "neutral" | "info" | "warning" | "error" | "success",
     imageUrl?: string,
     timeout?: number | null,
-    showOn?: "web" | "native" | "all" | "none"
+    showOn?: "web" | "native" | "all" | "none",
+    showBar?: boolean,
+    onClick?: () => void,
 }
 
 function notifyf7(text: string, options: NotifyOptions) {
@@ -19,13 +22,19 @@ function notifyf7(text: string, options: NotifyOptions) {
     if (closeTimeout === undefined)
         closeTimeout = 3000;
 
+    const on: Notification.Parameters["on"] = {}
+    if (options.onClick) {
+        on.click = () => options.onClick();
+    }
+
     const notification = f7.notification.create({
         title: options.title,
         titleRightText: 'now',
         // subtitle: 'Notification with close on click',
         text: text,
         closeOnClick: true,
-        closeTimeout
+        closeTimeout,
+        on
     });
     notification.open();
 }
@@ -33,30 +42,47 @@ function notifyf7(text: string, options: NotifyOptions) {
 function notifyToast(text: string, options: NotifyOptions) {
     const toastOptions: SvelteToastOptions = {
         dismissable: options.timeout !== null,
+        duration: options.timeout,
+        theme: {},
+    }
+
+    if (options.showBar) {
+        toastOptions.theme['--toastBarHeight'] = "6px"
     }
 
     if (options.type === "success") {
-        toastOptions.theme = {
-            '--toastBackground': 'var(--color-green-600)',
-        }
+        toastOptions.theme['--toastBackground'] = 'var(--color-green-600)';
+        toastOptions.theme['--toastBarBackground'] = 'var(--color-green-900)';
     }
     else if (options.type === "info") {
-        toastOptions.theme = {
-            '--toastBackground': 'var(--color-blue-500)',
-        }
+        toastOptions.theme['--toastBackground'] = 'var(--color-blue-500)';
+        toastOptions.theme['--toastBarBackground'] = 'var(--color-blue-800)';
     }
     else if (options.type === "warning") {
-        toastOptions.theme = {
-            '--toastBackground': 'var(--color-yellow-600)',
-        }
+        toastOptions.theme['--toastBackground'] = 'var(--color-yellow-600)';
+        toastOptions.theme['--toastBarBackground'] = 'var(--color-yellow-900)';
     }
     else if (options.type === "error") {
-        toastOptions.theme = {
-            '--toastBackground': 'var(--color-red-500)',
-        }
+        toastOptions.theme['--toastBackground'] = 'var(--color-red-500)';
+        toastOptions.theme['--toastBarBackground'] = 'var(--color-red-800)';
     }
 
-    toast.push(text, toastOptions);
+    if (options.onClick) {
+        toast.push({
+            component: {
+                src: OnClickToastItem,
+                props: {
+                    message: text,
+                    notifyOptions: options
+                },
+                sendIdTo: "toastID"
+            },
+            ...toastOptions
+        })
+    }
+    else {
+        toast.push(text, toastOptions);
+    }
 }
 
 function notifyNative(text: string, options: NotifyOptions) {
@@ -78,7 +104,11 @@ function notifyNative(text: string, options: NotifyOptions) {
 
     const notification = new Notification(title, nativeOptions);
 
-    notification.onclick = () => window.focus();
+    notification.onclick = () => {
+        window.focus();
+        if (options.onClick)
+            options.onClick();
+    }
 }
 
 export default function notify(text: string, options: NotifyOptions = {}) {