@saasmakers/ui 1.4.15 → 1.4.17

package/app/components/bases/BaseToast.vue

@@ -31,7 +31,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 <template>
   <div
     class="group flex select-none items-center border border-gray-200 rounded-full bg-white px-3 py-2 text-base text-gray-800 font-normal shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-    :class="{ 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50': hasClose }"
+    :class="{ 'cursor-pointer': hasClose }"
     role="button"
     tabindex="0"
     @click="onClose"
@@ -39,7 +39,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
     @keydown.space.prevent="onClose"
   >
     <BaseIcon
-      class="pointer-events-none flex-initial"
+      class="pointer-events-none text-lg flex-initial"
       :status="status"
       :text="text"
     />
@@ -70,7 +70,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
       <div class="ml-2 mr-1.5 h-5 border-l border-gray-200 flex-initial dark:border-gray-700" />
 
       <BaseIcon
-        class="text-gray-400 transition-colors flex-initial dark:text-gray-500"
+        class="text-lg text-gray-400 transition-colors flex-initial dark:text-gray-500"
         :class="{
           'group-hover:text-red-600 dark:group-hover:text-red-400': status === 'error',
           'group-hover:text-indigo-600 dark:group-hover:text-indigo-400': status === 'info',

package/app/composables/useToasts.ts

@@ -1,36 +1,55 @@
 const toasts = ref<BaseToast[]>([])
+const dismissTimers = new Map<string, ReturnType<typeof setTimeout>>()
 
 export default function useToast() {
   const nuxtApp = useNuxtApp()
 
   const clearToasts = () => {
-    if (import.meta.client) {
-      toasts.value = []
+    if (!import.meta.client)
+      return
+
+    for (const timer of dismissTimers.values()) {
+      clearTimeout(timer)
     }
+
+    dismissTimers.clear()
+    toasts.value = []
   }
 
-  const closeToast = (toastId: string) => {
-    if (import.meta.client) {
-      toasts.value = toasts.value.filter((item) => {
-        return item.id !== toastId
-      })
+  const createToast = (
+    message: string,
+    status: BaseStatus = 'success',
+    i18nParams?: Record<string, number | string>,
+    action?: BaseToastAction,
+  ) => {
+    if (!import.meta.client) {
+      return
     }
-  }
 
-  const createToast = (message: string, status: BaseStatus = 'success', i18nParams?: Record<string, number | string>, action?: BaseToastAction) => {
-    if (import.meta.client) {
-      const toast: BaseToast = {
-        action,
-        id: crypto.randomUUID(),
-        status: status || 'success',
-        text: message.includes(' ') ? message : nuxtApp.$i18n.t(`toasts.${message}`, i18nParams || {}),
-      }
+    const text = message.includes(' ')
+      ? message
+      : nuxtApp.$i18n.t(`toasts.${message}`, i18nParams ?? {})
 
-      toasts.value.push(toast)
+    const fingerprint = getFingerprint(status, text, action?.label)
+    const existingToast = toasts.value.find(item => getFingerprint(item.status, item.text, item.action?.label) === fingerprint)
 
-      // Give more time to interact when the toast offers an action
-      setTimeout(() => closeToast(toast.id), (action ? 8 : 5) * 1000)
+    if (existingToast) {
+      if (action) {
+        existingToast.action = action
+      }
+      scheduleDismiss(existingToast.id, !!existingToast.action)
+      return
     }
+
+    const toast: BaseToast = {
+      action,
+      id: crypto.randomUUID(),
+      status,
+      text,
+    }
+
+    toasts.value.push(toast)
+    scheduleDismiss(toast.id, !!action)
   }
 
   return {
@@ -40,3 +59,34 @@ export default function useToast() {
     toasts,
   }
 }
+
+function clearDismissTimer(toastId: string) {
+  const timer = dismissTimers.get(toastId)
+  if (timer !== undefined) {
+    clearTimeout(timer)
+    dismissTimers.delete(toastId)
+  }
+}
+
+function closeToast(toastId: string) {
+  if (!import.meta.client)
+    return
+
+  clearDismissTimer(toastId)
+  toasts.value = toasts.value.filter(item => item.id !== toastId)
+}
+
+function getFingerprint(status: BaseStatus | undefined, text: BaseTextText, actionLabel?: BaseTextText): string {
+  const normalize = (t: BaseTextText) => typeof t === 'string' ? t : JSON.stringify(t)
+
+  return `${status ?? 'success'}:${normalize(text)}:${actionLabel ? normalize(actionLabel) : ''}`
+}
+
+function scheduleDismiss(toastId: string, hasAction: boolean) {
+  clearDismissTimer(toastId)
+
+  const duration = (hasAction ? 8 : 5) * 1000
+  const timer = setTimeout(() => closeToast(toastId), duration)
+
+  dismissTimers.set(toastId, timer)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.4.15",
+  "version": "1.4.17",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",