@soft-toast/vue 1.0.0 → 1.0.2

package/src/stores/toastStore.ts

@@ -26,6 +26,9 @@ const defaultOptions: Required<Pick<
 
 const toasts = ref<Toast[]>([])
 
+// Non-reactive timer state — lives outside Vue reactivity to avoid per-frame re-renders
+const timerMap = new Map<string, { remainingTime: number; isPaused: boolean }>()
+
 // ─── Computed ─────────────────────────────────────────────────────────────────
 
 const getToastsByPosition = (position: ToastPosition) =>
@@ -65,12 +68,13 @@ const add = (options: ToastOptions): string => {
   }
 
   // ── New toast ──
+  const duration = options.duration ?? defaultOptions.duration
   const toast: Toast = {
     ...defaultOptions,
     ...options,
     id,
     createdAt: Date.now(),
-    remainingTime: options.duration ?? defaultOptions.duration,
+    remainingTime: duration,
     isPaused: false,
     isExpanded: true,
     isLeaving: false,
@@ -81,6 +85,9 @@ const add = (options: ToastOptions): string => {
     showProgress: options.showProgress ?? defaultOptions.showProgress,
   }
 
+  // Register in non-reactive timer map
+  timerMap.set(id, { remainingTime: duration, isPaused: false })
+
   toasts.value.unshift(toast)
   startTickLoop()
 
@@ -102,6 +109,7 @@ const update = (id: string, options: Partial<ToastOptions>) => {
 const dismiss = (id?: string | { type?: ToastType | ToastType[] }) => {
   if (!id) {
     toasts.value.forEach((t) => { t.isLeaving = true })
+    timerMap.clear()
     setTimeout(() => { toasts.value = [] }, 400)
     return
   }
@@ -111,6 +119,7 @@ const dismiss = (id?: string | { type?: ToastType | ToastType[] }) => {
     if (toast) {
       toast.isLeaving = true
       toast.onDismiss?.(id)
+      timerMap.delete(id)
       setTimeout(() => {
         toasts.value = toasts.value.filter((t) => t.id !== id)
       }, 400)
@@ -121,6 +130,7 @@ const dismiss = (id?: string | { type?: ToastType | ToastType[] }) => {
       if (types.includes(t.type)) {
         t.isLeaving = true
         t.onDismiss?.(t.id)
+        timerMap.delete(t.id)
       }
     })
     setTimeout(() => {
@@ -130,11 +140,15 @@ const dismiss = (id?: string | { type?: ToastType | ToastType[] }) => {
 }
 
 const pause = (id: string) => {
+  const timer = timerMap.get(id)
+  if (timer) timer.isPaused = true
   const toast = toasts.value.find((t) => t.id === id)
   if (toast) toast.isPaused = true
 }
 
 const resume = (id: string) => {
+  const timer = timerMap.get(id)
+  if (timer) timer.isPaused = false
   const toast = toasts.value.find((t) => t.id === id)
   if (toast) toast.isPaused = false
 }
@@ -163,19 +177,31 @@ const startTickLoop = () => {
     const delta = currentTime - lastTime
     lastTime = currentTime
 
-    toasts.value.forEach((toast) => {
-      if (!toast.isPaused && !toast.isLeaving && toast.remainingTime > 0 && toast.duration !== Infinity) {
-        toast.remainingTime -= delta
-        if (toast.remainingTime <= 0) {
-          toast.isLeaving = true
-          toast.onAutoClose?.(toast.id)
-          setTimeout(() => {
-            toasts.value = toasts.value.filter((t) => t.id !== toast.id)
-          }, 400)
-        }
-      }
+    // Tick non-reactive timer map — zero Vue reactivity cost per frame
+    const expiredIds: string[] = []
+    timerMap.forEach((timer, id) => {
+      if (timer.isPaused) return
+      const toast = toasts.value.find((t) => t.id === id)
+      if (!toast || toast.isLeaving || toast.duration === Infinity) return
+      timer.remainingTime -= delta
+      // Sync remainingTime back to toast only for progress bar consumers
+      if (toast.showProgress) toast.remainingTime = timer.remainingTime
+      if (timer.remainingTime <= 0) expiredIds.push(id)
     })
 
+    // Mutate Vue state only when a toast actually expires
+    for (const id of expiredIds) {
+      timerMap.delete(id)
+      const toast = toasts.value.find((t) => t.id === id)
+      if (toast && !toast.isLeaving) {
+        toast.isLeaving = true
+        toast.onAutoClose?.(id)
+        setTimeout(() => {
+          toasts.value = toasts.value.filter((t) => t.id !== id)
+        }, 400)
+      }
+    }
+
     if (toasts.value.length > 0) {
       rafId = requestAnimationFrame(loop)
     } else {
@@ -237,9 +263,13 @@ const promise = async <T>(
   }
 }
 
-const clearAll = () => { toasts.value = [] }
+const clearAll = () => {
+  timerMap.clear()
+  toasts.value = []
+}
 
 const remove = (id: string) => {
+  timerMap.delete(id)
   toasts.value = toasts.value.filter((t) => t.id !== id)
 }
 

package/src/styles/toast.css

@@ -28,7 +28,6 @@
 .soft-toast-container[data-position="bottom"]       { bottom: 32px; left: 50%; transform: translateX(-50%); }
 .soft-toast-container[data-position="left"]         { top: 50%; left: 32px; transform: translateY(-50%); }
 .soft-toast-container[data-position="right"]        { top: 50%; right: 32px; transform: translateY(-50%); }
-.soft-toast-container[data-position="center"]       { top: 50%; left: 50%; transform: translate(-50%, -50%); }
 
 /* ---- Toast Item ---- */
 .soft-toast-item {
@@ -45,8 +44,7 @@
   line-height: 1.45;
   cursor: default;
   user-select: none;
-  will-change: transform, opacity;
-  touch-action: pan-y; /* allow vertical scroll, intercept horizontal for swipe */
+  touch-action: pan-y;
 
   /* Clean modern white card */
   background: rgba(255, 255, 255, 0.98);
@@ -56,6 +54,11 @@
     inset 0 1px 0 rgba(255, 255, 255, 1);
 }
 
+.soft-toast-item[data-interactive="false"] {
+  pointer-events: none;
+  touch-action: none;
+}
+
 /* Show grab cursor on swipeable toasts to hint at the gesture */
 .soft-toast-item--swipeable {
   cursor: grab;
@@ -101,6 +104,8 @@
 
 /* ---- Content layout ---- */
 .soft-toast-content {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: flex-start;
   gap: 11px;
@@ -111,7 +116,7 @@
   flex-shrink: 0;
   width: 24px;
   height: 24px;
-  margin-top: 1px;
+  margin-top: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -155,6 +160,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
+  min-height: 24px;
 }
 
 .soft-toast-title {
@@ -162,8 +168,8 @@
   font-size: 14px;
   color: #111827;
   margin: 0;
-  line-height: 1.4;
-  letter-spacing: -0.01em;
+  line-height: 1.3;
+  letter-spacing: 0;
   /* Slight right padding by default so text doesn't bump against close button on hover */
   padding-right: 4px;
 }
@@ -217,6 +223,7 @@
   width: 100%;
   padding: 8px 16px;
   border-radius: 12px;
+  background: rgba(100, 116, 139, 0.12); /* fallback for Safari < 16.2 */
   background: color-mix(in srgb, var(--st-accent) 15%, transparent);
   color: var(--st-icon-color);
   border: none;
@@ -229,6 +236,7 @@
   text-align: center;
 }
 .soft-toast-action-button:hover {
+  background: rgba(100, 116, 139, 0.22); /* fallback for Safari < 16.2 */
   background: color-mix(in srgb, var(--st-accent) 25%, transparent);
   transform: scale(1.02);
 }
@@ -247,6 +255,7 @@
 /* Close Button */
 .soft-toast-close {
   position: absolute;
+  z-index: 3;
   top: 10px;
   right: 10px;
   width: 22px;
@@ -269,6 +278,10 @@
   transform: scale(1.1);
 }
 .soft-toast-item:hover .soft-toast-close { opacity: 1; }
+/* iOS/touch: no hover state — always show close button */
+@media (hover: none) {
+  .soft-toast-close { opacity: 0.7; }
+}
 .soft-toast-close[data-position="top-left"] { right: auto; left: 10px; }
 
 /* Morph X to Minus on Hover */
@@ -344,6 +357,23 @@
   .soft-toast-close { opacity: 1; }
 }
 
+/* ---- Collapsed stack: only front toast is touchable on mobile ---- */
+/* Prevents hidden stacked toasts from intercepting touch/scroll on the page */
+@media (hover: none) {
+  .soft-toast-container:not([data-expanded="true"]) .soft-toast-item[data-interactive="false"] {
+    pointer-events: none;
+    touch-action: none;
+  }
+  /* Front toast in collapsed stack: no swipe gesture — tap to expand only */
+  .soft-toast-container:not([data-expanded="true"]) .soft-toast-item[data-st-index="0"] {
+    touch-action: manipulation;
+  }
+  /* Expanded: all toasts can swipe */
+  .soft-toast-container[data-expanded="true"] .soft-toast-item[data-interactive="true"] {
+    touch-action: pan-y;
+  }
+}
+
 /* ---- Reduced Motion ---- */
 @media (prefers-reduced-motion: reduce) {
   .soft-toast-item,

package/src/types/index.ts

@@ -1,7 +1,7 @@
 import type { VNode, Component } from 'vue'
 
 export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'promise'
-export type ToastPosition = 'top' | 'bottom' | 'left' | 'right' | 'center' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+export type ToastPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
 export type AnimationPreset = 'smooth' | 'bouncy' | 'subtle' | 'snappy'
 export type QueueOverflow = 'drop-oldest' | 'drop-newest'
 
@@ -108,8 +108,10 @@ export interface ToastContainerProps {
   queueOverflow?: QueueOverflow
   dir?: 'ltr' | 'rtl'
   swipeToDismiss?: boolean
+  slotFilter?: (toast: Toast) => boolean
 }
 
 export interface ToastPluginOptions extends ToastContainerProps {
   teleportTarget?: string
+  autoMount?: boolean
 }