Fix: Added better types for Toast and fixed issue with actions

src/lib/utilities/Toast/Toast.svelte

@@ -61,9 +61,9 @@
 		case ('br'): cPosition = 'justify-end items-end'; cAlign = 'items-end'; animAxis = { x: 100, y: 0 }; break;
 	}
 
-	function onAction(): void {
-		$toastStore[0].action.response();
-		toastStore.close();
+	function onAction(index: number): void {
+		$toastStore[index]?.action?.response();
+		toastStore.close($toastStore[index].id);
 	}
 
 	// Reactive
@@ -84,7 +84,7 @@
 						<div class="text-base">{@html t.message}</div>
 						<!-- prettier-ignore -->
 						<div class="flex items-center space-x-2">
-							{#if t.action}<button class="btn {buttonAction}" on:click={onAction}>{@html t.action.label}</button>{/if}
+							{#if t.action}<button class="btn {buttonAction}" on:click={() => onAction(i)}>{@html t.action.label}</button>{/if}
 							<button class="btn-icon {buttonDismiss}" on:click={() => { toastStore.close(t.id) }}>✕</button>
 						</div>
 					</div>

src/lib/utilities/Toast/stores.ts

@@ -1,7 +1,7 @@
 // Toast Store Queue
 
 import { writable } from 'svelte/store';
-import type { ToastSettings } from './types';
+import type { ToastSettings, Toast } from './types';
 
 const toastDefaults: ToastSettings = { message: 'Missing Toast Message', autohide: true, timeout: 5000 };
 
@@ -12,25 +12,24 @@ function randomUUID(): string {
 }
 
 // If toast should auto-hide, wait X time, then close by ID
-function handleAutoHide(toast: ToastSettings): void {
-	console.log(toast);
+function handleAutoHide(toast: Toast): void {
 	if (toast.autohide === true) {
 		setTimeout(() => {
 			toastStore.close(toast.id);
 		}, toast.timeout);
 	}
 }
 
-function toastService(): any {
-	const { subscribe, set, update } = writable([]);
+function toastService() {
+	const { subscribe, set, update } = writable<Toast[]>([]);
 	return {
 		subscribe,
 		/** Add a new toast to the queue. */
 		trigger: (toast: ToastSettings) =>
-			update((tStore: any) => {
+			update((tStore) => {
 				const id: string = randomUUID();
 				// Merge into store
-				let tMerged: ToastSettings = { ...toastDefaults, ...toast, id };
+				const tMerged = { ...toastDefaults, ...toast, id };
 				tStore.push(tMerged);
 				// Handle auto-hide, if needed
 				handleAutoHide(tMerged);
@@ -41,7 +40,7 @@ function toastService(): any {
 		close: (id: string) =>
 			update((tStore) => {
 				if (tStore.length > 0) {
-					var index = tStore.findIndex((t: ToastSettings) => t.id === id);
+					const index = tStore.findIndex((t) => t.id === id);
 					tStore.splice(index, 1);
 				}
 				return tStore;

src/lib/utilities/Toast/types.ts

@@ -16,6 +16,9 @@ export interface ToastSettings {
 	};
 	/** Provide arbitrary CSS classes to style the toast. */
 	classes?: string;
+}
+
+export interface Toast extends ToastSettings {
 	/** A UUID will be auto-assigned on `.trigger()`. */
-	id?: string;
+	id: string;
 }