@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.5

package/ui/components/molecules/vc-toast/vc-toast.vue

@@ -1,12 +1,25 @@
 <template>
   <div
     :id="String(notificationId)"
-    ref="nodeRef"
+    ref="toastRef"
     class="vc-notification"
-    :class="[`vc-notification--${position || 'top-center'}`, `vc-notification--${type || 'default'}`]"
+    :class="[`vc-notification--${type || 'default'}`]"
+    :style="{ ...stackingStyle, ...swipeStyle }"
+    :data-mounted="mounted"
+    :data-removed="removed"
+    :data-position="position || 'top-center'"
+    :data-front="isFront"
+    :data-expanded="expanded ?? true"
+    :data-stacked="isStacked"
+    :data-hidden="isHidden"
+    :data-swiping="isSwiping"
+    :data-swiped-out="swipedOut"
     :role="type === 'error' ? 'alert' : 'status'"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
   >
     <div class="vc-notification__content-wrapper">
       <VcIcon
@@ -44,8 +57,8 @@
 
 <script lang="ts" setup>
 import { Content, NotificationType, NotificationPosition } from "@shared/components/notifications";
-import { VcIcon } from "@ui/components";
-import { Ref, onMounted, onBeforeUnmount, ref, toRefs, watch } from "vue";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { Ref, computed, onMounted, onBeforeUnmount, ref, toRefs, watch } from "vue";
 
 export interface Props {
   content?: Content;
@@ -56,9 +69,15 @@ export interface Props {
   pauseOnHover?: boolean;
   limit?: number;
   position?: NotificationPosition;
+  dismissing?: boolean;
+  /** Index of this toast in the position stack (0 = oldest) */
+  toastIndex?: number;
+  /** Total number of toasts in the position stack */
+  toastsCount?: number;
+  /** Whether the toast group is expanded (hovered or single toast) */
+  expanded?: boolean;
 }
 
-// Define events that the component can emit
 const emit = defineEmits<{
   (e: "close", id: number | string | undefined): void;
 }>();
@@ -71,8 +90,46 @@ const types: Record<NotificationType, { icon: string; color: string }> = {
   error: { icon: "lucide-alert-circle", color: "var(--notification-error)" },
   warning: { icon: "lucide-alert-triangle", color: "var(--notification-warning)" },
 };
+
 const { timeout } = toRefs(props);
 
+const toastRef = ref<HTMLElement | null>(null);
+const mounted = ref(false);
+const removed = ref(false);
+
+// Stacking: is this the front (newest) toast?
+const isFront = computed(
+  () => props.toastIndex === undefined || props.toastsCount === undefined || props.toastIndex === props.toastsCount - 1,
+);
+
+// How many toasts are in front of this one (used for scale/opacity calculation)
+const behindCount = computed(() => {
+  if (props.toastIndex === undefined || props.toastsCount === undefined) return 0;
+  return props.toastsCount - 1 - props.toastIndex;
+});
+
+// Whether this toast should show in stacked (collapsed) mode
+const isStacked = computed(() => !isFront.value && !props.expanded);
+
+// Toasts deeper than 2 behind are invisible (limits visual clutter)
+const isHidden = computed(() => behindCount.value > 2 && !props.expanded);
+
+// CSS variables for stacking depth + z-index ordering
+const stackingStyle = computed(() => {
+  const styles: Record<string, string | number> = {};
+
+  // z-index: front toast gets highest value
+  if (props.toastsCount !== undefined && props.toastIndex !== undefined && props.toastsCount > 1) {
+    styles["z-index"] = props.toastsCount - behindCount.value;
+  }
+
+  if (isStacked.value) {
+    styles["--toast-behind-count"] = behindCount.value;
+  }
+
+  return styles;
+});
+
 // Timer type for improved type safety
 interface NotificationTimer {
   pause: () => void;
@@ -83,11 +140,89 @@ interface NotificationTimer {
 
 const timer = ref<NotificationTimer | null>(null);
 
-// Function to close the notification
+// Transition duration must match CSS --notification-transition-duration
+const TRANSITION_DURATION = 400;
+
+/**
+ * Two-phase Sonner-style exit:
+ *  Phase 1 — CSS-driven opacity + transform slide (400ms)
+ *  Phase 2 — JS-driven height collapse so remaining toasts reposition smoothly
+ *
+ * Phases are sequential because translateY(-100%) conflicts with height: 0
+ * (percentage is relative to element height — collapsing height makes the
+ * slide distance shrink to 0).
+ */
+function exitAndEmit(el: HTMLElement) {
+  // Phase 1: wait for the CSS opacity transition to finish
+  let phase1Done = false;
+
+  const startPhase2 = () => {
+    if (phase1Done) return;
+    phase1Done = true;
+    el.removeEventListener("transitionend", onPhase1End);
+
+    // Phase 2: collapse height for smooth remaining-toast repositioning
+    const currentHeight = el.offsetHeight;
+    // Switch to a short collapse-only transition
+    el.style.transition = "height 200ms ease, padding 200ms ease, margin 200ms ease";
+    el.style.height = `${currentHeight}px`;
+    void el.offsetHeight; // eslint-disable-line no-unused-expressions -- force reflow
+
+    el.style.height = "0";
+    el.style.minHeight = "0";
+    el.style.paddingTop = "0";
+    el.style.paddingBottom = "0";
+    el.style.marginTop = "0";
+    el.style.marginBottom = "0";
+
+    let phase2Done = false;
+    const finish = () => {
+      if (phase2Done) return;
+      phase2Done = true;
+      el.removeEventListener("transitionend", onPhase2End);
+      emit("close", props.notificationId);
+    };
+    const onPhase2End = (e: TransitionEvent) => {
+      if (e.target === el && e.propertyName === "height") finish();
+    };
+    el.addEventListener("transitionend", onPhase2End);
+    setTimeout(finish, 250); // fallback
+  };
+
+  const onPhase1End = (e: TransitionEvent) => {
+    // Wait specifically for opacity to finish (400ms) — ignore box-shadow (200ms)
+    if (e.target === el && e.propertyName === "opacity") {
+      startPhase2();
+    }
+  };
+  el.addEventListener("transitionend", onPhase1End);
+  // Fallback if transitionend doesn't fire (e.g. reduced motion, detached element)
+  setTimeout(startPhase2, TRANSITION_DURATION + 50);
+}
+
 function handleClose() {
-  emit("close", props.notificationId);
+  if (removed.value) return; // prevent double-close
+  removed.value = true;
+  timer.value?.clear();
+
+  const el = toastRef.value;
+  if (el) {
+    exitAndEmit(el);
+  } else {
+    emit("close", props.notificationId);
+  }
 }
 
+// Watch for programmatic dismissal via the `dismissing` flag
+watch(
+  () => props.dismissing,
+  (val) => {
+    if (val) {
+      handleClose();
+    }
+  },
+);
+
 watch(
   timeout as Ref<number | boolean>,
   (newVal) => {
@@ -102,9 +237,37 @@ watch(
   { immediate: true },
 );
 
+// Report front toast height to parent (toast group) for stacking constraint
+const resizeObserver = ref<ResizeObserver | null>(null);
+
+function updateFrontHeight() {
+  if (isFront.value && toastRef.value && !removed.value) {
+    const parent = toastRef.value.parentElement;
+    if (parent) {
+      parent.style.setProperty("--front-toast-height", `${toastRef.value.offsetHeight}px`);
+    }
+  }
+}
+
+watch(isFront, (val) => {
+  if (val) updateFrontHeight();
+});
+
 onMounted(() => {
-  if (props.timeout) {
-    timer.value?.start();
+  // Double-rAF ensures the browser has painted the initial (unmounted) state
+  // before we flip to mounted, triggering the CSS transition
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      mounted.value = true;
+      // Measure after mount for accurate height
+      updateFrontHeight();
+    });
+  });
+
+  // Track height changes (e.g. content resize) for front toast
+  if (toastRef.value) {
+    resizeObserver.value = new ResizeObserver(() => updateFrontHeight());
+    resizeObserver.value.observe(toastRef.value);
   }
 });
 
@@ -143,19 +306,123 @@ function Timer(callback: (...args: unknown[]) => unknown, delay: number): Notifi
 
 onBeforeUnmount(() => {
   timer.value?.clear();
+  resizeObserver.value?.disconnect();
 });
 
 function onMouseEnter() {
-  if (props.timeout) {
+  if (props.timeout && props.pauseOnHover !== false) {
     timer.value?.pause();
   }
 }
 
 function onMouseLeave() {
-  if (props.timeout) {
+  if (props.timeout && props.pauseOnHover !== false) {
     timer.value?.resume();
   }
 }
+
+// --- Swipe-to-dismiss ---
+const SWIPE_THRESHOLD = 150; // px to trigger dismiss
+const SWIPE_START_THRESHOLD = 10; // px to determine swipe vs click
+
+const swipeStartX = ref(0);
+const swipeStartY = ref(0);
+const swipeAmountX = ref(0);
+const isSwiping = ref(false);
+const swipedOut = ref(false);
+
+const swipeStyle = computed(() => {
+  if (swipeAmountX.value === 0 && !swipedOut.value) return {};
+  const opacity = swipedOut.value ? 0 : Math.max(0, 1 - (Math.abs(swipeAmountX.value) / SWIPE_THRESHOLD) * 0.5);
+  return {
+    transform: `translateX(${swipeAmountX.value}px)`,
+    opacity: String(opacity),
+  };
+});
+
+function onPointerDown(e: PointerEvent) {
+  if (removed.value || swipedOut.value) return;
+  // Don't start swipe on dismiss button
+  if ((e.target as HTMLElement)?.closest(".vc-notification__dismiss-button")) return;
+
+  swipeStartX.value = e.clientX;
+  swipeStartY.value = e.clientY;
+  isSwiping.value = false;
+
+  const el = toastRef.value;
+  if (el) {
+    el.setPointerCapture(e.pointerId);
+  }
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (removed.value || swipedOut.value) return;
+  if (swipeStartX.value === 0 && swipeStartY.value === 0) return;
+
+  const deltaX = e.clientX - swipeStartX.value;
+  const deltaY = e.clientY - swipeStartY.value;
+
+  // Determine if horizontal swipe (not vertical scroll)
+  if (!isSwiping.value) {
+    if (Math.abs(deltaX) > SWIPE_START_THRESHOLD && Math.abs(deltaX) > Math.abs(deltaY)) {
+      isSwiping.value = true;
+      // Disable CSS transition for responsive tracking
+      if (toastRef.value) {
+        toastRef.value.style.transition = "none";
+      }
+      // Pause timer during swipe
+      timer.value?.pause();
+    } else if (Math.abs(deltaY) > SWIPE_START_THRESHOLD) {
+      // Vertical scroll — abort swipe tracking
+      swipeStartX.value = 0;
+      swipeStartY.value = 0;
+      return;
+    } else {
+      return;
+    }
+  }
+
+  swipeAmountX.value = deltaX;
+}
+
+function onPointerUp(e: PointerEvent) {
+  const el = toastRef.value;
+  if (el) {
+    if (el.hasPointerCapture(e.pointerId)) {
+      el.releasePointerCapture(e.pointerId);
+    }
+    // Restore CSS transitions
+    el.style.transition = "";
+  }
+
+  if (!isSwiping.value) {
+    swipeAmountX.value = 0;
+    swipeStartX.value = 0;
+    swipeStartY.value = 0;
+    return;
+  }
+
+  if (Math.abs(swipeAmountX.value) >= SWIPE_THRESHOLD) {
+    // Fling off-screen
+    removed.value = true; // prevent other close paths (timer, dismissing watcher)
+    timer.value?.clear();
+    swipedOut.value = true;
+    const direction = swipeAmountX.value > 0 ? 1 : -1;
+    swipeAmountX.value = direction * window.innerWidth;
+
+    // Remove after swipe fling completes (200ms transition + buffer)
+    setTimeout(() => emit("close", props.notificationId), 250);
+  } else {
+    // Spring back
+    swipeAmountX.value = 0;
+    // Resume timer if not dismissed
+    timer.value?.resume();
+  }
+
+  isSwiping.value = false;
+  swipeStartX.value = 0;
+  swipeStartY.value = 0;
+}
 </script>
 
 <style lang="scss">
@@ -178,10 +445,9 @@ function onMouseLeave() {
   --notification-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   --notification-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 
-  /* Variables for animation */
-  --notification-animation-duration: 300ms;
-  --notification-animation-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  --notification-slide-distance: 30px;
+  /* Transition timing (Sonner-style) */
+  --notification-transition-duration: 400ms;
+  --notification-transition-timing: cubic-bezier(0.21, 1.02, 0.73, 1);
 
   /* Focus */
   --notification-focus-ring-color: var(--primary-100);
@@ -201,14 +467,67 @@ function onMouseLeave() {
   border-left: var(--notification-accent-width) solid var(--notification-info);
   pointer-events: all;
 
-  /* Base animation properties */
-  animation-duration: var(--notification-animation-duration);
-  animation-timing-function: var(--notification-animation-timing);
-  animation-fill-mode: both;
+  /* Sonner-style: start invisible, transitions driven by data attributes */
+  opacity: 0;
+  will-change: transform, opacity;
   transition:
-    opacity var(--notification-animation-duration) var(--notification-animation-timing),
-    transform var(--notification-animation-duration) var(--notification-animation-timing),
-    box-shadow 0.2s ease;
+    opacity var(--notification-transition-duration) var(--notification-transition-timing),
+    transform var(--notification-transition-duration) var(--notification-transition-timing),
+    height var(--notification-transition-duration) var(--notification-transition-timing),
+    padding var(--notification-transition-duration) var(--notification-transition-timing),
+    margin var(--notification-transition-duration) var(--notification-transition-timing),
+    border-width var(--notification-transition-duration) var(--notification-transition-timing),
+    box-shadow 200ms ease;
+
+  /* Initial off-screen positions (unmounted state) */
+  &[data-position="top-center"] {
+    transform: translateY(-100%);
+  }
+  &[data-position="top-right"] {
+    transform: translateX(calc(100% + 1em));
+  }
+  &[data-position="top-left"] {
+    transform: translateX(calc(-100% - 1em));
+  }
+  &[data-position="bottom-center"] {
+    transform: translateY(100%);
+  }
+  &[data-position="bottom-right"] {
+    transform: translateX(calc(100% + 1em));
+  }
+  &[data-position="bottom-left"] {
+    transform: translateX(calc(-100% - 1em));
+  }
+
+  /* Mounted: slide into view */
+  &[data-mounted="true"] {
+    opacity: 1;
+    transform: translateY(0) translateX(0);
+  }
+
+  /* Removed: slide back out (overrides mounted) */
+  &[data-removed="true"] {
+    opacity: 0;
+
+    &[data-position="top-center"] {
+      transform: translateY(-100%);
+    }
+    &[data-position="top-right"] {
+      transform: translateX(calc(100% + 1em));
+    }
+    &[data-position="top-left"] {
+      transform: translateX(calc(-100% - 1em));
+    }
+    &[data-position="bottom-center"] {
+      transform: translateY(100%);
+    }
+    &[data-position="bottom-right"] {
+      transform: translateX(calc(100% + 1em));
+    }
+    &[data-position="bottom-left"] {
+      transform: translateX(calc(-100% - 1em));
+    }
+  }
 
   /* Hover effect */
   &:hover {
@@ -232,31 +551,6 @@ function onMouseLeave() {
     border-left-color: var(--notification-info);
   }
 
-  /* Animations for different positions */
-  &--top-center {
-    animation-name: notificationSlideInTopCenter;
-  }
-
-  &--top-right {
-    animation-name: notificationSlideInTopRight;
-  }
-
-  &--top-left {
-    animation-name: notificationSlideInTopLeft;
-  }
-
-  &--bottom-center {
-    animation-name: notificationSlideInBottomCenter;
-  }
-
-  &--bottom-right {
-    animation-name: notificationSlideInBottomRight;
-  }
-
-  &--bottom-left {
-    animation-name: notificationSlideInBottomLeft;
-  }
-
   &__content-wrapper {
     @apply tw-flex tw-items-center tw-flex-row tw-gap-2;
   }
@@ -287,82 +581,69 @@ function onMouseLeave() {
     }
   }
 
-  .vc-app_mobile {
+  .vc-app--mobile {
     @apply tw-max-w-[90%];
   }
-}
 
-/* Keyframes for different directions */
+  /* Stacking: Sonner deck-of-cards — back toasts are absolute, constrained height, peek offset */
+  &[data-stacked="true"][data-mounted="true"] {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: var(--front-toast-height, auto);
+    overflow: hidden;
+    opacity: calc(1 - var(--toast-behind-count, 0) * 0.12);
+    pointer-events: none;
+
+    /* Top positions: peek below front toast */
+    &[data-position^="top"] {
+      top: 0;
+      transform: translateY(calc(var(--toast-behind-count, 0) * 14px))
+                 scale(calc(1 - var(--toast-behind-count, 0) * 0.05));
+      transform-origin: top center;
+    }
 
-/* Top Center: top to bottom */
-@keyframes notificationSlideInTopCenter {
-  from {
-    opacity: 0;
-    transform: translateY(calc(-1 * var(--notification-slide-distance)));
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+    /* Bottom positions: peek above front toast */
+    &[data-position^="bottom"] {
+      bottom: 0;
+      transform: translateY(calc(var(--toast-behind-count, 0) * -14px))
+                 scale(calc(1 - var(--toast-behind-count, 0) * 0.05));
+      transform-origin: bottom center;
+    }
   }
-}
 
-/* Top Right: right to left and top to bottom */
-@keyframes notificationSlideInTopRight {
-  from {
-    opacity: 0;
-    transform: translate(var(--notification-slide-distance), calc(-1 * var(--notification-slide-distance)));
-  }
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
+  /* Toasts deeper than 2 behind are invisible */
+  &[data-hidden="true"] {
+    opacity: 0 !important;
+    pointer-events: none;
   }
-}
 
-/* Top Left: left to right and top to bottom */
-@keyframes notificationSlideInTopLeft {
-  from {
-    opacity: 0;
-    transform: translate(calc(-1 * var(--notification-slide-distance)), calc(-1 * var(--notification-slide-distance)));
+  /* Front/expanded: normal flow, full interactivity */
+  &[data-front="true"][data-mounted="true"],
+  &[data-stacked="false"][data-mounted="true"] {
+    pointer-events: all;
   }
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-}
 
-/* Bottom Center: bottom to top */
-@keyframes notificationSlideInBottomCenter {
-  from {
-    opacity: 0;
-    transform: translateY(var(--notification-slide-distance));
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+  /* Swipe-to-dismiss */
+  touch-action: pan-y; /* Allow vertical scroll, capture horizontal */
+  cursor: grab;
 
-/* Bottom Right: right to left and bottom to top */
-@keyframes notificationSlideInBottomRight {
-  from {
-    opacity: 0;
-    transform: translate(var(--notification-slide-distance), var(--notification-slide-distance));
-  }
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
+  &[data-swiping="true"] {
+    cursor: grabbing;
+    user-select: none;
   }
-}
 
-/* Bottom Left: left to right and bottom to top */
-@keyframes notificationSlideInBottomLeft {
-  from {
-    opacity: 0;
-    transform: translate(calc(-1 * var(--notification-slide-distance)), var(--notification-slide-distance));
+  &[data-swiped-out="true"] {
+    transition: transform 200ms ease-out, opacity 200ms ease-out,
+      height var(--notification-transition-duration) var(--notification-transition-timing),
+      padding var(--notification-transition-duration) var(--notification-transition-timing),
+      margin var(--notification-transition-duration) var(--notification-transition-timing) !important;
+    pointer-events: none;
   }
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
+
+  /* Reduced motion: instant transitions */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms !important;
   }
 }
 </style>

package/ui/components/organisms/index.ts

@@ -1,8 +1,9 @@
-export * from "@ui/components/organisms/vc-app";
-export * from "@ui/components/organisms/vc-auth-layout";
-export * from "@ui/components/organisms/vc-blade";
-export * from "@ui/components/organisms/vc-dynamic-property";
+export * from "@ui/components/organisms/vc-app";
+export * from "@ui/components/organisms/vc-auth-layout";
+export * from "@ui/components/organisms/vc-blade";
+export * from "@ui/components/organisms/vc-dynamic-property";
 export * from "@ui/components/organisms/vc-gallery";
+export * from "@ui/components/organisms/vc-image-upload";
 export * from "@ui/components/organisms/vc-popup";
 export * from "@ui/components/organisms/vc-sidebar";
 export * from "@ui/components/organisms/vc-table";