@soft-toast/vue 1.0.1 → 1.1.0

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,9 +54,20 @@
     inset 0 1px 0 rgba(255, 255, 255, 1);
 }
 
+.soft-toast-item[data-interactive="false"] {
+  pointer-events: none;
+  touch-action: none;
+}
+
+.soft-toast-item[data-leaving="true"] {
+  pointer-events: none;
+  touch-action: none;
+}
+
 /* Show grab cursor on swipeable toasts to hint at the gesture */
 .soft-toast-item--swipeable {
   cursor: grab;
+  touch-action: none;
 }
 .soft-toast-item--swipeable:active {
   cursor: grabbing;
@@ -101,6 +110,8 @@
 
 /* ---- Content layout ---- */
 .soft-toast-content {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: flex-start;
   gap: 11px;
@@ -111,7 +122,7 @@
   flex-shrink: 0;
   width: 24px;
   height: 24px;
-  margin-top: 1px;
+  margin-top: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -155,6 +166,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
+  min-height: 24px;
 }
 
 .soft-toast-title {
@@ -162,8 +174,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;
 }
@@ -182,17 +194,20 @@
   max-height: 120px;
   overflow-y: auto;
   padding-right: 4px;
+  scrollbar-width: none;
 }
 
-/* Custom Scrollbar for long descriptions */
-.soft-toast-description::-webkit-scrollbar { width: 4px; }
-.soft-toast-description::-webkit-scrollbar-track { background: transparent; }
-.soft-toast-description::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
+/* Custom Scrollbar for long descriptions — hidden by default, shown on hover */
+.soft-toast-description::-webkit-scrollbar { width: 0; }
+.soft-toast-item:hover .soft-toast-description { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }
+.soft-toast-item:hover .soft-toast-description::-webkit-scrollbar { width: 4px; }
+.soft-toast-item:hover .soft-toast-description::-webkit-scrollbar-track { background: transparent; }
+.soft-toast-item:hover .soft-toast-description::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
   border-radius: 4px;
 }
-.soft-toast-description::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.2);
+.soft-toast-item:hover .soft-toast-description::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.25);
 }
 
 /* Timestamp — lives BELOW all content, never overlaps close button */
@@ -217,6 +232,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 +245,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 +264,7 @@
 /* Close Button */
 .soft-toast-close {
   position: absolute;
+  z-index: 3;
   top: 10px;
   right: 10px;
   width: 22px;
@@ -269,6 +287,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 +366,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 — JS handles both axes */
+  .soft-toast-container[data-expanded="true"] .soft-toast-item[data-interactive="true"] {
+    touch-action: none;
+  }
+}
+
 /* ---- 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'
 
@@ -13,13 +13,13 @@ export interface ToastAction {
   class?: string
 }
 
-export interface ToastPromiseMessages {
+export interface ToastPromiseMessages<T = unknown> {
   loading: string
-  success: string
-  error: string
+  success: string | ((data: T) => string)
+  error: string | ((err: unknown) => string)
   description?: {
-    success?: string
-    error?: string
+    success?: string | ((data: T) => string)
+    error?: string | ((err: unknown) => string)
   }
   action?: {
     error?: ToastAction
@@ -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
 }

package/dist/composables/useToast.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/composables/useToast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAMlE,eAAO,MAAM,QAAQ;qBACF,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAGtD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;mBAGxD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAGpD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;kBAGzD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAGnD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;cAG7D,CAAC,aACE,OAAO,CAAC,CAAC,CAAC,YACX,oBAAoB,YACpB,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAAC,KACnE,OAAO,CAAC,CAAC,CAAC;sBAEK,YAAY;iBAEjB,MAAM,WAAW,OAAO,CAAC,YAAY,CAAC;mBAEpC,MAAM;;gBAGT,MAAM;iBACL,MAAM;IAEnB;;;;;;;;;OASG;mBACY,MAAM,YAAW,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IAGjE;;;OAGG;;IAGH,wEAAwE;;CAExE,CAAA;AAIF,eAAO,MAAM,KAAK;qBACC,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAEtD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;mBAExD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAEpD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;kBAEzD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAEnD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;cAE7D,CAAC,aACE,OAAO,CAAC,CAAC,CAAC,YACX,oBAAoB,YACpB,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAAC,KACnE,OAAO,CAAC,CAAC,CAAC;sBACK,YAAY;iBACjB,MAAM,WAAW,OAAO,CAAC,YAAY,CAAC;mBACpC,MAAM;;gBAET,MAAM;iBACL,MAAM;mBACJ,MAAM,YAAW,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;;;CAIlE,CAAA"}

package/dist/composables/useToast.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=useToast.test.d.ts.map

package/dist/composables/useToast.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToast.test.d.ts","sourceRoot":"","sources":["../../src/composables/useToast.test.ts"],"names":[],"mappings":""}