@soft-toast/vue 1.0.0

package/src/stores/toastStore.ts

@@ -0,0 +1,288 @@
+import { ref, computed } from 'vue'
+import type { Toast, ToastOptions, ToastType, ToastPosition, ToastPromiseMessages } from '../types'
+import { playToastSound } from '../utils/sound'
+
+// ─── ID generation ───────────────────────────────────────────────────────────
+
+const generateId = () => `toast-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+
+// ─── Default options ─────────────────────────────────────────────────────────
+
+const defaultOptions: Required<Pick<
+  ToastOptions,
+  'type' | 'duration' | 'position' | 'preset' | 'bounce' | 'spring' | 'showTimestamp' | 'showProgress'
+>> = {
+  type: 'default',
+  duration: 4000,
+  position: 'top-right',
+  preset: 'smooth',
+  bounce: 0.4,
+  spring: true,
+  showTimestamp: false,
+  showProgress: false,
+}
+
+// ─── Reactive state ───────────────────────────────────────────────────────────
+
+const toasts = ref<Toast[]>([])
+
+// ─── Computed ─────────────────────────────────────────────────────────────────
+
+const getToastsByPosition = (position: ToastPosition) =>
+  computed(() => toasts.value.filter((t) => t.position === position))
+
+const allToasts = computed(() => toasts.value)
+
+// ─── Actions ──────────────────────────────────────────────────────────────────
+
+/**
+ * Add a toast — or UPDATE an existing one if the same `id` is already visible.
+ * This automatic deduplication means calling toast.error('Oops', { id: 'network-error' })
+ * five times in a row results in ONE toast that refreshes its content each time.
+ */
+const add = (options: ToastOptions): string => {
+  const id = options.id || generateId()
+
+  // ── Smart Dedup: same id already exists → update instead of creating ──
+  const existingIndex = toasts.value.findIndex((t) => t.id === id)
+  if (existingIndex !== -1 && !toasts.value[existingIndex].isLeaving) {
+    const existing = toasts.value[existingIndex]
+    // Patch the existing toast with new content
+    toasts.value[existingIndex] = {
+      ...existing,
+      ...options,
+      id,
+      // Reset timer so user has time to read the updated content
+      remainingTime: options.duration ?? existing.duration,
+      isPaused: existing.isPaused,
+      isLeaving: false,
+    }
+    // Play sound again if configured (content changed)
+    const sound = options.sound
+    const vol = options.soundVolume ?? 0.5
+    if (sound) playToastSound(options.type ?? existing.type, sound, vol)
+    return id
+  }
+
+  // ── New toast ──
+  const toast: Toast = {
+    ...defaultOptions,
+    ...options,
+    id,
+    createdAt: Date.now(),
+    remainingTime: options.duration ?? defaultOptions.duration,
+    isPaused: false,
+    isExpanded: true,
+    isLeaving: false,
+    preset: options.preset ?? defaultOptions.preset,
+    bounce: options.bounce ?? defaultOptions.bounce,
+    spring: options.spring ?? defaultOptions.spring,
+    showTimestamp: options.showTimestamp ?? defaultOptions.showTimestamp,
+    showProgress: options.showProgress ?? defaultOptions.showProgress,
+  }
+
+  toasts.value.unshift(toast)
+  startTickLoop()
+
+  // Play sound if configured
+  const sound = options.sound
+  const vol = options.soundVolume ?? 0.5
+  if (sound) playToastSound(toast.type, sound, vol)
+
+  return id
+}
+
+const update = (id: string, options: Partial<ToastOptions>) => {
+  const index = toasts.value.findIndex((t) => t.id === id)
+  if (index !== -1) {
+    toasts.value[index] = { ...toasts.value[index], ...options }
+  }
+}
+
+const dismiss = (id?: string | { type?: ToastType | ToastType[] }) => {
+  if (!id) {
+    toasts.value.forEach((t) => { t.isLeaving = true })
+    setTimeout(() => { toasts.value = [] }, 400)
+    return
+  }
+
+  if (typeof id === 'string') {
+    const toast = toasts.value.find((t) => t.id === id)
+    if (toast) {
+      toast.isLeaving = true
+      toast.onDismiss?.(id)
+      setTimeout(() => {
+        toasts.value = toasts.value.filter((t) => t.id !== id)
+      }, 400)
+    }
+  } else {
+    const types = Array.isArray(id.type) ? id.type : [id.type]
+    toasts.value.forEach((t) => {
+      if (types.includes(t.type)) {
+        t.isLeaving = true
+        t.onDismiss?.(t.id)
+      }
+    })
+    setTimeout(() => {
+      toasts.value = toasts.value.filter((t) => !types.includes(t.type))
+    }, 400)
+  }
+}
+
+const pause = (id: string) => {
+  const toast = toasts.value.find((t) => t.id === id)
+  if (toast) toast.isPaused = true
+}
+
+const resume = (id: string) => {
+  const toast = toasts.value.find((t) => t.id === id)
+  if (toast) toast.isPaused = false
+}
+
+const expand = (id: string) => {
+  const toast = toasts.value.find((t) => t.id === id)
+  if (toast) toast.isExpanded = true
+}
+
+const collapse = (id: string) => {
+  const toast = toasts.value.find((t) => t.id === id)
+  if (toast) toast.isExpanded = false
+}
+
+// ─── Global RAF tick loop ─────────────────────────────────────────────────────
+
+let lastTime = 0
+let rafId: number | null = null
+
+const startTickLoop = () => {
+  if (rafId !== null) return
+  if (typeof window === 'undefined') return
+
+  const loop = (currentTime: number) => {
+    if (lastTime === 0) lastTime = currentTime
+    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)
+        }
+      }
+    })
+
+    if (toasts.value.length > 0) {
+      rafId = requestAnimationFrame(loop)
+    } else {
+      rafId = null
+      lastTime = 0
+    }
+  }
+
+  rafId = requestAnimationFrame(loop)
+}
+
+// ─── Type helpers ─────────────────────────────────────────────────────────────
+
+const success = (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+  add({ ...options, type: 'success', title })
+
+const error = (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+  add({ ...options, type: 'error', title })
+
+const warning = (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+  add({ ...options, type: 'warning', title })
+
+const info = (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+  add({ ...options, type: 'info', title })
+
+const loading = (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+  add({ ...options, type: 'promise', title, duration: Infinity })
+
+const promise = async <T>(
+  promiseFn: Promise<T>,
+  messages: ToastPromiseMessages,
+  options?: Omit<ToastOptions, 'type' | 'promise' | 'promiseMessages'>
+): Promise<T> => {
+  const id = add({
+    ...options,
+    type: 'promise',
+    title: messages.loading,
+    duration: Infinity,
+  })
+
+  try {
+    const result = await promiseFn
+    update(id, {
+      type: 'success',
+      title: messages.success,
+      description: messages.description?.success,
+      duration: 4000,
+    })
+    return result
+  } catch (err) {
+    update(id, {
+      type: 'error',
+      title: messages.error,
+      description: messages.description?.error,
+      action: messages.action?.error,
+      duration: 6000,
+    })
+    throw err
+  }
+}
+
+const clearAll = () => { toasts.value = [] }
+
+const remove = (id: string) => {
+  toasts.value = toasts.value.filter((t) => t.id !== id)
+}
+
+// ─── Store interface + export ─────────────────────────────────────────────────
+
+import type { ComputedRef } from 'vue'
+
+export interface ToastStore {
+  toasts: ComputedRef<Toast[]>
+  getToastsByPosition: (position: ToastPosition) => ComputedRef<Toast[]>
+  add: (options: ToastOptions) => string
+  update: (id: string, options: Partial<ToastOptions>) => void
+  dismiss: (id?: string | { type?: ToastType | ToastType[] }) => void
+  pause: (id: string) => void
+  resume: (id: string) => void
+  expand: (id: string) => void
+  collapse: (id: string) => void
+  success: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) => string
+  error: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) => string
+  warning: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) => string
+  info: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) => string
+  loading: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) => string
+  promise: <T>(promiseFn: Promise<T>, messages: ToastPromiseMessages, options?: Omit<ToastOptions, 'type' | 'promise' | 'promiseMessages'>) => Promise<T>
+  clearAll: () => void
+  remove: (id: string) => void
+}
+
+export const toastStore: ToastStore = {
+  toasts: allToasts,
+  getToastsByPosition,
+  add,
+  update,
+  dismiss,
+  pause,
+  resume,
+  expand,
+  collapse,
+  success,
+  error,
+  warning,
+  info,
+  loading,
+  promise,
+  clearAll,
+  remove,
+}

package/src/styles/toast.css

@@ -0,0 +1,353 @@
+@import './variables.css';
+
+/* =============================================
+   Soft Toast — Modern Design System
+   ============================================= */
+
+/* Container */
+.soft-toast-container {
+  position: fixed;
+  z-index: var(--st-z-index);
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: min(var(--st-width, 356px), calc(100vw - 64px));
+  max-width: calc(100vw - 64px);
+}
+
+.soft-toast-container[data-position="top-left"]     { top: 32px; left: 32px; }
+.soft-toast-container[data-position="top-center"]   { top: 32px; left: 50%; transform: translateX(-50%); }
+.soft-toast-container[data-position="top-right"]    { top: 32px; right: 32px; }
+.soft-toast-container[data-position="bottom-left"]  { bottom: 32px; left: 32px; }
+.soft-toast-container[data-position="bottom-center"]{ bottom: 32px; left: 50%; transform: translateX(-50%); }
+.soft-toast-container[data-position="bottom-right"] { bottom: 32px; right: 32px; }
+
+/* New basic positions */
+.soft-toast-container[data-position="top"]          { top: 32px; left: 50%; transform: translateX(-50%); }
+.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 {
+  pointer-events: auto;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 260px;
+  max-width: 360px;
+  padding: 12px 16px;
+  border-radius: 18px;
+  font-family: var(--st-font-family);
+  font-size: 13.5px;
+  line-height: 1.45;
+  cursor: default;
+  user-select: none;
+  will-change: transform, opacity;
+  touch-action: pan-y; /* allow vertical scroll, intercept horizontal for swipe */
+
+  /* Clean modern white card */
+  background: rgba(255, 255, 255, 0.98);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 10px 30px -5px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+}
+
+/* Show grab cursor on swipeable toasts to hint at the gesture */
+.soft-toast-item--swipeable {
+  cursor: grab;
+}
+.soft-toast-item--swipeable:active {
+  cursor: grabbing;
+}
+
+/* Asymmetrical Chat Bubble Corners */
+.soft-toast-container[data-position="top-left"] .soft-toast-item { border-top-left-radius: 4px; }
+.soft-toast-container[data-position="left"] .soft-toast-item { border-top-left-radius: 4px; }
+.soft-toast-container[data-position="bottom-left"] .soft-toast-item { border-bottom-left-radius: 4px; }
+
+.soft-toast-container[data-position="top-right"] .soft-toast-item { border-top-right-radius: 4px; }
+.soft-toast-container[data-position="right"] .soft-toast-item { border-top-right-radius: 4px; }
+.soft-toast-container[data-position="bottom-right"] .soft-toast-item { border-bottom-right-radius: 4px; }
+
+/* ---- Modern Clean Palette ---- */
+.soft-toast-item[data-type="default"] {
+  --st-accent: #9ca3af;
+  --st-icon-color: #64748b;
+}
+.soft-toast-item[data-type="success"] {
+  --st-accent: #34d399;
+  --st-icon-color: #059669;
+}
+.soft-toast-item[data-type="error"] {
+  --st-accent: #fb7185;
+  --st-icon-color: #e11d48;
+}
+.soft-toast-item[data-type="warning"] {
+  --st-accent: #fbbf24;
+  --st-icon-color: #d97706;
+}
+.soft-toast-item[data-type="info"] {
+  --st-accent: #60a5fa;
+  --st-icon-color: #3b82f6;
+}
+.soft-toast-item[data-type="promise"] {
+  --st-accent: #a78bfa;
+  --st-icon-color: #7c3aed;
+}
+
+/* ---- Content layout ---- */
+.soft-toast-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+}
+
+/* Icon */
+.soft-toast-icon {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  margin-top: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--st-icon-color, #64748b);
+}
+.soft-toast-icon svg,
+.soft-toast-icon .iconify,
+.soft-toast-icon-svg {
+  display: block;
+  flex: none;
+  width: 18px !important;
+  height: 18px !important;
+  max-width: 18px;
+  max-height: 18px;
+  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
+}
+.soft-toast-item[data-type="promise"] .soft-toast-icon-svg {
+  animation: st-spin 0.8s linear infinite;
+}
+
+/* Loading spinner for promise */
+.soft-toast-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(139, 92, 246, 0.2);
+  border-top-color: #8b5cf6;
+  border-radius: 50%;
+  animation: st-spin 0.7s linear infinite;
+}
+@keyframes st-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Body */
+.soft-toast-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.soft-toast-header-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.soft-toast-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: #111827;
+  margin: 0;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+  /* Slight right padding by default so text doesn't bump against close button on hover */
+  padding-right: 4px;
+}
+
+/* When the close button is displayed at top-right, push the title text further left */
+.soft-toast-title--has-close {
+  padding-right: 24px;
+}
+
+.soft-toast-description {
+  font-size: 13.5px;
+  font-weight: 400;
+  color: #4b5563;
+  margin: 4px 0 0;
+  line-height: 1.5;
+  max-height: 120px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+/* 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);
+  border-radius: 4px;
+}
+.soft-toast-description::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+/* Timestamp — lives BELOW all content, never overlaps close button */
+.soft-toast-timestamp {
+  display: inline-block;
+  font-size: 11px;
+  color: #9ca3af;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  margin-top: 6px;
+}
+
+/* Action */
+.soft-toast-action {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.soft-toast-action-button {
+  flex: 1;
+  width: 100%;
+  padding: 8px 16px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--st-accent) 15%, transparent);
+  color: var(--st-icon-color);
+  border: none;
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.18s ease;
+  letter-spacing: 0.01em;
+  text-align: center;
+}
+.soft-toast-action-button:hover {
+  background: color-mix(in srgb, var(--st-accent) 25%, transparent);
+  transform: scale(1.02);
+}
+.soft-toast-action-button:active {
+  transform: scale(0.98);
+}
+
+.soft-toast-action-primary {
+  background: var(--st-icon-color);
+  color: #fff;
+}
+.soft-toast-action-primary:hover {
+  background: color-mix(in srgb, var(--st-icon-color) 85%, #000);
+}
+
+/* Close Button */
+.soft-toast-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0,0,0,0.04);
+  color: #9ca3af;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
+  padding: 0;
+}
+.soft-toast-close:hover {
+  background: rgba(0,0,0,0.1);
+  color: #374151;
+  transform: scale(1.1);
+}
+.soft-toast-item:hover .soft-toast-close { opacity: 1; }
+.soft-toast-close[data-position="top-left"] { right: auto; left: 10px; }
+
+/* Morph X to Minus on Hover */
+.st-close-line-1, .st-close-line-2 {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+  transform-origin: center;
+}
+.soft-toast-close:hover .st-close-line-1 {
+  transform: rotate(-45deg);
+}
+.soft-toast-close:hover .st-close-line-2 {
+  transform: rotate(45deg) scaleX(0);
+  opacity: 0;
+}
+
+/* Progress Bar - Soft Background Fill */
+.soft-toast-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  background: transparent;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  overflow: hidden;
+}
+.soft-toast-progress-bar {
+  height: 100%;
+  background: var(--st-accent);
+  opacity: 0.12;
+  transform-origin: left;
+}
+
+/* ---- Dark Theme ---- */
+[data-soft-toast-theme="dark"] .soft-toast-item {
+  background: #1c1c1e;
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow:
+    0 4px 24px -4px rgba(0,0,0,0.5),
+    0 1px 4px rgba(0,0,0,0.3);
+}
+[data-soft-toast-theme="dark"] .soft-toast-title { color: #f9fafb; }
+[data-soft-toast-theme="dark"] .soft-toast-description { color: #9ca3af; }
+[data-soft-toast-theme="dark"] .soft-toast-timestamp { color: #6b7280; }
+
+[data-soft-toast-theme="dark"] .soft-toast-item[data-type] {
+  background: #1c1c1e;
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+/* ---- RTL ---- */
+[data-soft-toast-dir="rtl"] .soft-toast-item::before { left: auto; right: 0; border-radius: 4px 0 0 4px; }
+[data-soft-toast-dir="rtl"] .soft-toast-content { flex-direction: row-reverse; padding-left: 0; padding-right: 10px; }
+[data-soft-toast-dir="rtl"] .soft-toast-body { align-items: flex-end; text-align: right; }
+[data-soft-toast-dir="rtl"] .soft-toast-close { right: auto; left: 10px; }
+
+/* ---- Mobile ---- */
+@media (max-width: 640px) {
+  .soft-toast-container {
+    left: 12px !important;
+    right: 12px !important;
+    width: auto;
+    max-width: none;
+    transform: none !important;
+    align-items: stretch !important;
+  }
+  .soft-toast-container[data-position^="top"] { top: 12px; }
+  .soft-toast-container[data-position^="bottom"] { bottom: 12px; }
+  .soft-toast-item { min-width: auto; max-width: none; }
+  .soft-toast-close { opacity: 1; }
+}
+
+/* ---- Reduced Motion ---- */
+@media (prefers-reduced-motion: reduce) {
+  .soft-toast-item,
+  .soft-toast-action-button,
+  .soft-toast-close,
+  .soft-toast-spinner { transition: none !important; animation: none !important; }
+}