@soft-toast/vue 1.0.0 → 1.0.2

package/src/components/ToastRegion.vue

@@ -29,6 +29,17 @@ const props = withDefaults(defineProps<ToastContainerProps>(), {
 const containerRef = ref<HTMLElement | null>(null);
 const stackRef = ref<HTMLElement | null>(null);
 const listRef = ref<HTMLElement | null>(null);
+const toastItemRefs = ref<Map<string, InstanceType<typeof ToastItem>>>(
+  new Map(),
+);
+
+const setToastItemRef = (
+  id: string,
+  el: InstanceType<typeof ToastItem> | null,
+) => {
+  if (el) toastItemRefs.value.set(id, el);
+  else toastItemRefs.value.delete(id);
+};
 
 // Get toasts for this container's position
 const positionToasts = computed(() => {
@@ -62,11 +73,21 @@ onMounted(() => {
 
   // Pause all timers when user switches tab / window loses focus
   document.addEventListener("visibilitychange", handleVisibilityChange);
+  // iOS: collapse expanded stack when tapping outside
+  document.addEventListener("touchstart", handleOutsideTap, { passive: true });
 
-  if (listRef.value && typeof ResizeObserver !== "undefined") {
-    resizeObserver = new ResizeObserver(() => measureOffsets());
-    resizeObserver.observe(listRef.value);
+  // Must be non-passive to call preventDefault and block page scroll when expanded
+  stackRef.value?.addEventListener("touchmove", handleStackTouchMove, {
+    passive: false,
+  });
+
+  if (typeof ResizeObserver !== "undefined") {
+    listResizeObserver = new ResizeObserver(() => measureOffsets());
+    itemResizeObserver = new ResizeObserver(() => measureOffsets());
+    if (listRef.value) listResizeObserver.observe(listRef.value);
   }
+  // Set initial height
+  nextTick(() => measureOffsets());
 });
 
 onUnmounted(() => {
@@ -74,7 +95,12 @@ onUnmounted(() => {
     document.removeEventListener("keydown", handleKeydown);
   }
   document.removeEventListener("visibilitychange", handleVisibilityChange);
-  if (resizeObserver) resizeObserver.disconnect();
+  document.removeEventListener("touchstart", handleOutsideTap);
+  stackRef.value?.removeEventListener("touchmove", handleStackTouchMove);
+  if (listResizeObserver) listResizeObserver.disconnect();
+  if (itemResizeObserver) itemResizeObserver.disconnect();
+  clearCollapseTimer();
+  observedItems = new WeakSet<HTMLElement>();
 });
 
 // Re-measure when toast list changes or when a toast starts leaving
@@ -109,6 +135,7 @@ watch(
 
 // Position classes
 const positionClass = computed(() => `soft-toast-container--${props.position}`);
+const isCenterAligned = computed(() => props.position.endsWith("-center"));
 
 // Visual Indexing (ignore leaving toasts so the stack closes gaps instantly)
 const activeToasts = computed(() =>
@@ -121,31 +148,77 @@ const getVisualIndex = (toast: any, realIdx: number) => {
 
 // Stack expansion (hover or focus reveals the stack)
 const isExpanded = ref(false);
+let collapseTimerId: number | null = null;
+
+const clearCollapseTimer = () => {
+  if (collapseTimerId === null) return;
+  window.clearTimeout(collapseTimerId);
+  collapseTimerId = null;
+};
+
+// DOM cap: keep a bounded, stable window mounted so expanding does not
+// introduce new nodes mid-animation. Collapsed positioning still hides items
+// after the front 3 via opacity/pointer-events.
+const EXPANDED_DOM_CAP = 15;
+const renderedToasts = computed(() => {
+  const all = positionToasts.value;
+  const windowed = all.slice(0, EXPANDED_DOM_CAP);
+  // Keep leaving toasts so their exit animation plays even if they fall
+  // outside the normal render window.
+  const leaving = all.filter((t) => t.isLeaving);
+  const seen = new Set(windowed.map((t) => t.id));
+  return [...windowed, ...leaving.filter((t) => !seen.has(t.id))];
+});
 
 // Measured cumulative offsets for each item when stack is expanded.
-const expandedOffsets = ref<number[]>([]);
+// Keyed by toast id so order of renderedToasts doesn't matter.
+const expandedOffsets = ref<Record<string, number>>({});
 const frontHeight = ref(0);
 const totalHeight = ref(0);
 
+let measureRafId: number | null = null;
 const measureOffsets = () => {
+  if (measureRafId !== null) return; // already scheduled
+  measureRafId = requestAnimationFrame(() => {
+    measureRafId = null;
+    _doMeasureOffsets(false);
+  });
+};
+
+const hasOffsetChanges = (
+  nextOffsets: Record<string, number>,
+  nextFrontHeight: number,
+  nextTotalHeight: number,
+) => {
+  if (frontHeight.value !== nextFrontHeight) return true;
+  if (totalHeight.value !== nextTotalHeight) return true;
+  const current = expandedOffsets.value;
+  const currentKeys = Object.keys(current);
+  const nextKeys = Object.keys(nextOffsets);
+  if (currentKeys.length !== nextKeys.length) return true;
+  return nextKeys.some((key) => current[key] !== nextOffsets[key]);
+};
+
+const _doMeasureOffsets = (forceSync = false) => {
   if (!listRef.value) return;
   const items = Array.from(
     listRef.value.querySelectorAll<HTMLElement>(".soft-toast-item"),
   );
+  observeToastItems(items);
   const gapPx = props.gap ?? 10;
   const offsets: number[] = [];
   let cumulative = 0;
   let firstActiveHeight = 0;
-  
+
   for (let i = 0; i < items.length; i++) {
     offsets.push(cumulative);
-    
+
     // Only accumulate height if the toast is not leaving
     if (items[i].getAttribute("data-leaving") !== "true") {
       cumulative += items[i].offsetHeight + gapPx;
       // The front toast is the one that has visual index 0
       const toastId = items[i].dataset.toastId;
-      const t = positionToasts.value.find(x => x.id === toastId);
+      const t = positionToasts.value.find((x) => x.id === toastId);
       if (t) {
         const vIdx = getVisualIndex(t, positionToasts.value.indexOf(t));
         if (vIdx === 0) {
@@ -154,70 +227,113 @@ const measureOffsets = () => {
       }
     }
   }
-  
-  expandedOffsets.value = offsets;
-  frontHeight.value = firstActiveHeight;
-  totalHeight.value = Math.max(0, cumulative - gapPx);
-  
+
+  // Build id → offset map instead of positional array
+  const offsetMap: Record<string, number> = {};
+  for (let i = 0; i < items.length; i++) {
+    const toastId = items[i].dataset.toastId;
+    if (toastId) offsetMap[toastId] = offsets[i];
+  }
+  const nextTotalHeight = Math.max(0, cumulative - gapPx);
+  const changed = hasOffsetChanges(offsetMap, firstActiveHeight, nextTotalHeight);
+  if (changed) {
+    expandedOffsets.value = offsetMap;
+    frontHeight.value = firstActiveHeight;
+    totalHeight.value = nextTotalHeight;
+  }
+
   // Re-clamp scroll if height changes while expanded
-  if (isExpanded.value && listRef.value) {
+  if (isExpanded.value && listRef.value && changed) {
     clampAndApplyScroll(0); // Applies bounds check without adding new delta
   }
+
+  // Sync list height via GSAP — instant set (no tween) when called from measure
+  if (listRef.value && changed) {
+    const target = isExpanded.value ? totalHeight.value : frontHeight.value;
+    gsap.set(listRef.value, { height: target });
+  }
+
+  if (isExpanded.value && (changed || forceSync)) {
+    syncExpandedPositions();
+  }
+};
+
+const syncExpandedPositions = () => {
+  renderedToasts.value.forEach((toast) => {
+    const item = toastItemRefs.value.get(toast.id);
+    if (!item) return;
+    item.applyStackPosition(false, expandedOffsets.value[toast.id] ?? 0);
+  });
 };
 
 // Custom GSAP Scrolling
 const currentScrollY = ref(0);
 
-const clampAndApplyScroll = (deltaY: number) => {
+const getScrollBounds = () => {
+  const buffer = 120;
+  const maxScrollNeeded = Math.max(
+    0,
+    totalHeight.value - window.innerHeight + buffer,
+  );
+
+  return stackDirection.value === "up"
+    ? { min: 0, max: maxScrollNeeded }
+    : { min: -maxScrollNeeded, max: 0 };
+};
+
+const applyStackScrollY = (
+  nextY: number,
+  animate = true,
+  duration = 0.18,
+  ease = "power2.out",
+) => {
   if (!listRef.value) return;
-  
-  // Viewport padding buffer
-  const buffer = 120; 
-  const windowHeight = window.innerHeight;
-  
-  // We only need to scroll if the total stack height exceeds the viewport
-  const maxScrollNeeded = Math.max(0, totalHeight.value - windowHeight + buffer);
-  
-  if (stackDirection.value === "up") {
-    // Stack builds upwards (y goes negative). 
-    // To see higher items, we scroll UP (deltaY < 0), so we translate DOWN (y goes positive).
-    currentScrollY.value -= deltaY;
-    currentScrollY.value = Math.max(0, Math.min(currentScrollY.value, maxScrollNeeded));
-  } else {
-    // Stack builds downwards (y goes positive).
-    // To see lower items, we scroll DOWN (deltaY > 0), so we translate UP (y goes negative).
-    currentScrollY.value -= deltaY;
-    currentScrollY.value = Math.max(-maxScrollNeeded, Math.min(currentScrollY.value, 0));
+  const { min, max } = getScrollBounds();
+  currentScrollY.value = Math.max(min, Math.min(nextY, max));
+
+  if (!animate) {
+    gsap.set(listRef.value, {
+      y: currentScrollY.value,
+      force3D: true,
+      overwrite: true,
+    });
+    return;
   }
-  
+
   gsap.to(listRef.value, {
     y: currentScrollY.value,
-    duration: 0.4,
-    ease: "power3.out",
-    overwrite: "auto"
+    duration,
+    ease,
+    overwrite: "auto",
   });
 };
 
+const clampAndApplyScroll = (deltaY: number, animate = true) => {
+  applyStackScrollY(currentScrollY.value - deltaY, animate);
+};
+
 const handleWheel = (e: WheelEvent) => {
   if (!isExpanded.value) return;
-  
+
   // Check if the scroll originated from inside a scrollable element (like a long description)
   let target = e.target as HTMLElement | null;
   let isInternalScroll = false;
-  
+
   while (target && target !== stackRef.value) {
     const style = window.getComputedStyle(target);
     const overflowY = style.overflowY;
-    
+
     // Check if the element is capable of vertical scrolling
     if (overflowY === "auto" || overflowY === "scroll") {
       // It is a scrollable container. Check if it actually has overflow
       if (target.scrollHeight > target.clientHeight) {
         // Check if we can scroll in the direction of the wheel
         // (deltaY > 0 is scrolling down, deltaY < 0 is scrolling up)
-        const canScrollDown = Math.ceil(target.scrollTop + target.clientHeight) < target.scrollHeight;
+        const canScrollDown =
+          Math.ceil(target.scrollTop + target.clientHeight) <
+          target.scrollHeight;
         const canScrollUp = target.scrollTop > 0;
-        
+
         if ((e.deltaY > 0 && canScrollDown) || (e.deltaY < 0 && canScrollUp)) {
           isInternalScroll = true;
           break; // It's a valid internal scroll, stop checking parents
@@ -226,44 +342,169 @@ const handleWheel = (e: WheelEvent) => {
     }
     target = target.parentElement;
   }
-  
+
   if (isInternalScroll) {
     // Don't intercept the wheel event; let the internal scrollbar handle it
     return;
   }
 
   // If we don't need to scroll the main stack, don't prevent default so page can scroll normally
-  const maxScrollNeeded = Math.max(0, totalHeight.value - window.innerHeight + 120);
+  const maxScrollNeeded = Math.max(
+    0,
+    totalHeight.value - window.innerHeight + 120,
+  );
   if (maxScrollNeeded <= 0) return;
-  
+
   e.preventDefault();
   clampAndApplyScroll(e.deltaY);
 };
 
-// Dynamic list height: just the front toast when collapsed, full stack when expanded.
-const listHeightPx = computed(() => {
-  if (positionToasts.value.length === 0) return 0;
-  return isExpanded.value ? totalHeight.value : frontHeight.value;
-});
+// Apply list height via GSAP (off main thread, no Vue reactive layout thrashing)
+const applyListHeight = (expanded: boolean) => {
+  if (!listRef.value) return;
+  const target = expanded ? totalHeight.value : frontHeight.value;
+  gsap.to(listRef.value, {
+    height: target,
+    duration: expanded ? 0.14 : 0.16,
+    ease: expanded ? "power3.out" : "power2.out",
+    overwrite: "auto",
+  });
+};
+
+let listResizeObserver: ResizeObserver | null = null;
+let itemResizeObserver: ResizeObserver | null = null;
+let observedItems = new WeakSet<HTMLElement>();
+
+const observeToastItems = (items: HTMLElement[]) => {
+  if (!itemResizeObserver) return;
+  for (const item of items) {
+    if (observedItems.has(item)) continue;
+    observedItems.add(item);
+    itemResizeObserver.observe(item);
+  }
+};
 
-let resizeObserver: ResizeObserver | null = null;
 const handleStackEnter = () => {
-  measureOffsets();
+  clearCollapseTimer();
+  if (isExpanded.value) return;
   isExpanded.value = true;
+  nextTick(() => {
+    _doMeasureOffsets(true);
+    applyListHeight(true);
+  });
 };
 const handleStackLeave = () => {
-  isExpanded.value = false;
-  // Reset GSAP scroll when mouse leaves
-  currentScrollY.value = 0;
-  if (listRef.value) {
-    gsap.to(listRef.value, { y: 0, duration: 0.5, ease: "power3.out", overwrite: "auto" });
+  clearCollapseTimer();
+  collapseTimerId = window.setTimeout(() => {
+    collapseTimerId = null;
+    isExpanded.value = false;
+    applyListHeight(false);
+    // Reset GSAP scroll when mouse leaves
+    currentScrollY.value = 0;
+    if (listRef.value) {
+      gsap.to(listRef.value, {
+        y: 0,
+        duration: 0.2,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+    }
+  }, 80);
+};
+
+// iOS/touch: distinguish tap vs scroll before acting
+let tapStartX = 0;
+let tapStartY = 0;
+let touchScrollLastY = 0;
+let touchScrollLastTime = 0;
+let touchScrollVelocity = 0;
+let touchDidScroll = false;
+
+const handleStackTouchStart = (e: TouchEvent) => {
+  tapStartX = e.touches[0].clientX;
+  tapStartY = e.touches[0].clientY;
+  touchScrollLastY = e.touches[0].clientY;
+  touchScrollLastTime = performance.now();
+  touchScrollVelocity = 0;
+  touchDidScroll = false;
+  if (listRef.value) gsap.killTweensOf(listRef.value);
+};
+
+const handleStackTouchEnd = (e: TouchEvent) => {
+  if (positionToasts.value.length <= 1) return;
+  const dx = Math.abs((e.changedTouches[0]?.clientX ?? tapStartX) - tapStartX);
+  const dy = Math.abs((e.changedTouches[0]?.clientY ?? tapStartY) - tapStartY);
+  // If finger moved more than 8px it was a scroll/swipe, not a tap
+  if (dx > 8 || dy > 8) {
+    if (isExpanded.value && touchDidScroll && Math.abs(touchScrollVelocity) > 0.08) {
+      const momentumDistance = Math.max(
+        -460,
+        Math.min(touchScrollVelocity * 560, 460),
+      );
+      const duration = Math.max(
+        0.32,
+        Math.min(Math.abs(momentumDistance) / 780, 0.62),
+      );
+      applyStackScrollY(
+        currentScrollY.value + momentumDistance,
+        true,
+        duration,
+        "power3.out",
+      );
+    }
+    return;
+  }
+  if (isExpanded.value) {
+    handleStackLeave();
+  } else {
+    e.preventDefault();
+    handleStackEnter();
+  }
+};
+
+const handleOutsideTap = (e: TouchEvent) => {
+  if (!isExpanded.value) return;
+  if (containerRef.value && !containerRef.value.contains(e.target as Node)) {
+    handleStackLeave();
   }
 };
 
+// Prevent page scroll bleeding through AND scroll the list when stack is expanded
+const handleStackTouchMove = (e: TouchEvent) => {
+  if (!isExpanded.value) return;
+  e.preventDefault();
+
+  const currentY = e.touches[0].clientY;
+  const deltaY = touchScrollLastY - currentY; // positive = scrolling down
+  const now = performance.now();
+  const dt = Math.max(1, now - touchScrollLastTime);
+  touchScrollLastY = currentY;
+  touchScrollLastTime = now;
+
+  const maxScrollNeeded = Math.max(
+    0,
+    totalHeight.value - window.innerHeight + 120,
+  );
+  if (maxScrollNeeded <= 0) return;
+
+  const previousScrollY = currentScrollY.value;
+  clampAndApplyScroll(deltaY, false);
+  const instantVelocity = (currentScrollY.value - previousScrollY) / dt;
+  touchScrollVelocity = touchScrollVelocity * 0.35 + instantVelocity * 0.65;
+  touchDidScroll = true;
+};
+
 // Direction the stack peeks toward (bottom positions peek up, top positions peek down)
 const stackDirection = computed<"up" | "down">(() =>
   props.position.includes("bottom") ? "up" : "down",
 );
+
+const listStyle = computed(() => ({
+  width: isCenterAligned.value ? "100%" : undefined,
+}));
+
+const shouldUseSlots = (toast: any) => props.slotFilter?.(toast) ?? true;
+const isSwipeToDismissEnabled = computed(() => props.swipeToDismiss !== false);
 </script>
 
 <template>
@@ -284,30 +525,55 @@ const stackDirection = computed<"up" | "down">(() =>
         :data-direction="stackDirection"
         @mouseenter="handleStackEnter"
         @mouseleave="handleStackLeave"
+        @touchstart.stop="handleStackTouchStart"
+        @touchend.stop="handleStackTouchEnd"
         @wheel="handleWheel"
         data-lenis-prevent="true"
       >
-        <div
-          ref="listRef"
-          class="soft-toast-list"
-          :style="{ height: listHeightPx + 'px' }"
-        >
-          <ToastItem
-            v-for="(toast, idx) in positionToasts"
-            :key="toast.id"
-            :toast="toast"
-            :index="getVisualIndex(toast, idx)"
-            :total="activeToasts.length"
-            :expanded="isExpanded"
-            :expanded-offset="expandedOffsets[idx] ?? 0"
-            :stack-direction="stackDirection"
-            :close-button="toast.closeButton ?? closeButton"
-            :swipe-to-dismiss="swipeToDismiss"
-          >
-            <template v-for="(_, name) in $slots" #[name]="slotProps">
-              <slot :name="name" v-bind="slotProps || {}" />
-            </template>
-          </ToastItem>
+        <div ref="listRef" class="soft-toast-list" :style="listStyle">
+          <template v-for="(toast, idx) in renderedToasts" :key="toast.id">
+            <ToastItem
+              v-if="shouldUseSlots(toast)"
+              :ref="(el) => setToastItemRef(toast.id, el as any)"
+              :toast="toast"
+              :index="getVisualIndex(toast, idx)"
+              :total="activeToasts.length"
+              :expanded="isExpanded"
+              :expanded-offset="expandedOffsets[toast.id] ?? 0"
+              :stack-direction="stackDirection"
+              :interactive="isExpanded || getVisualIndex(toast, idx) === 0"
+              :close-button="toast.closeButton ?? closeButton"
+              :swipe-to-dismiss="isSwipeToDismissEnabled"
+              :style="
+                isCenterAligned
+                  ? { left: '50%', marginLeft: '-50%' }
+                  : undefined
+              "
+            >
+              <template v-for="(_, name) in $slots" #[name]="slotProps">
+                <slot :name="name" v-bind="slotProps || {}" />
+              </template>
+            </ToastItem>
+
+            <ToastItem
+              v-else
+              :ref="(el) => setToastItemRef(toast.id, el as any)"
+              :toast="toast"
+              :index="getVisualIndex(toast, idx)"
+              :total="activeToasts.length"
+              :expanded="isExpanded"
+              :expanded-offset="expandedOffsets[toast.id] ?? 0"
+              :stack-direction="stackDirection"
+              :interactive="isExpanded || getVisualIndex(toast, idx) === 0"
+              :close-button="toast.closeButton ?? closeButton"
+              :swipe-to-dismiss="isSwipeToDismissEnabled"
+              :style="
+                isCenterAligned
+                  ? { left: '50%', marginLeft: '-50%' }
+                  : undefined
+              "
+            />
+          </template>
         </div>
       </div>
     </div>
@@ -327,10 +593,16 @@ const stackDirection = computed<"up" | "down">(() =>
   max-width: 100%;
   display: flex;
   flex-direction: column;
+  /* No 300ms tap delay on iOS */
+  touch-action: manipulation;
   /* NO overflow constraints here to prevent shadow clipping. 
      GSAP translation handles scrolling visually without clipping! */
 }
 
+.soft-toast-container[data-expanded="true"] .soft-toast-stack {
+  touch-action: none;
+}
+
 .soft-toast-list {
   position: relative;
   width: 100%;
@@ -355,26 +627,27 @@ const stackDirection = computed<"up" | "down">(() =>
 }
 
 /* Horizontal alignment based on container position */
-.soft-toast-container[data-position$="left"] .soft-toast-list > :deep(.soft-toast-item) {
+.soft-toast-container[data-position$="left"]
+  .soft-toast-list
+  > :deep(.soft-toast-item) {
   left: 0;
   right: auto;
 }
-.soft-toast-container[data-position$="right"] .soft-toast-list > :deep(.soft-toast-item) {
+.soft-toast-container[data-position$="right"]
+  .soft-toast-list
+  > :deep(.soft-toast-item) {
   right: 0;
   left: auto;
 }
-.soft-toast-container[data-position$="center"] .soft-toast-list > :deep(.soft-toast-item) {
-  left: 50%;
-  transform: translateX(-50%); /* Base horizontal centering before GSAP adds translateY */
-}
-
 /* Bottom-anchored stacks (top positions peek down): items anchored to top edge */
-.soft-toast-stack[data-direction="down"] :deep(.soft-toast-list > .soft-toast-item) {
+.soft-toast-stack[data-direction="down"]
+  :deep(.soft-toast-list > .soft-toast-item) {
   top: 0;
   bottom: auto;
 }
 /* Top-anchored stacks (bottom positions peek up): items anchored to bottom edge */
-.soft-toast-stack[data-direction="up"] :deep(.soft-toast-list > .soft-toast-item) {
+.soft-toast-stack[data-direction="up"]
+  :deep(.soft-toast-list > .soft-toast-item) {
   top: auto;
   bottom: 0;
 }

package/src/plugin.ts

@@ -19,7 +19,8 @@ let pluginOptions: ToastPluginOptions = {
   queueOverflow: 'drop-oldest',
   dir: 'ltr',
   swipeToDismiss: true,
-  teleportTarget: 'body'
+  teleportTarget: 'body',
+  autoMount: true
 }
 
 // Flag to check if container is mounted
@@ -30,8 +31,10 @@ export const SoftToastPlugin = {
     // Merge options
     pluginOptions = { ...pluginOptions, ...options }
     
+    app.component('SoftToastContainer', ToastContainer)
+
     // Only mount container once
-    if (!isContainerMounted && typeof window !== 'undefined') {
+    if (pluginOptions.autoMount !== false && !isContainerMounted && typeof window !== 'undefined') {
       // Create a container div
       const containerId = 'soft-toast-global-container'
       let container = document.getElementById(containerId)
@@ -42,9 +45,6 @@ export const SoftToastPlugin = {
         document.body.appendChild(container)
       }
       
-      // Mount ToastContainer
-      app.component('SoftToastContainer', ToastContainer)
-      
       // Create a mini-app instance just for the toast container
       const toastContainerApp = createApp({
         render: () => h(ToastContainer, {
@@ -62,7 +62,9 @@ export const SoftToastPlugin = {
           maxQueue: pluginOptions.maxQueue,
           queueOverflow: pluginOptions.queueOverflow,
           dir: pluginOptions.dir,
-          swipeToDismiss: pluginOptions.swipeToDismiss
+          swipeToDismiss: pluginOptions.swipeToDismiss,
+          showTimestamp: pluginOptions.showTimestamp,
+          slotFilter: pluginOptions.slotFilter
         })
       })