feat: add useVueSonner

get history of toasts

Author: sadeghbarati

packages/hooks.ts

@@ -1,6 +1,8 @@
 import { ref, watchEffect } from 'vue'
+import type { ToastT } from './types'
+import { ToastState } from './state'
 
-export const useIsDocumentHidden = () => {
+export function useIsDocumentHidden() {
   const isDocumentHidden = ref(false)
 
   watchEffect(() => {
@@ -12,6 +14,36 @@ export const useIsDocumentHidden = () => {
   })
 
   return {
-    isDocumentHidden
+    isDocumentHidden,
   }
 }
+
+export function useVueSonner() {
+  const activeToasts = ref<ToastT[]>([])
+
+  watchEffect((onInvalidate) => {
+    const unsubscribe = ToastState.subscribe((toast) => {
+      if ('dismiss' in toast && toast.dismiss) {
+        return activeToasts.value.filter((t) => t.id !== toast.id);
+      }
+
+      const existingToastIndex = activeToasts.value.findIndex((t) => t.id === toast.id);
+      if (existingToastIndex !== -1) {
+        const updatedToasts = [...activeToasts.value];
+        updatedToasts[existingToastIndex] = { ...updatedToasts[existingToastIndex], ...toast };
+
+        activeToasts.value = updatedToasts
+      } else {
+        activeToasts.value = [toast, ...activeToasts.value]
+      }
+    })
+
+    onInvalidate(() => {
+      unsubscribe()
+    })
+  })
+
+  return {
+    activeToasts
+  }
+}