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

package/shared/components/notifications/components/notification-container/index.ts

@@ -1,5 +1,6 @@
-import { VcToast } from "@ui/components";
-import { PropType, computed, defineComponent, h, toRaw } from "vue";
+import { VcToast } from "@ui/components/molecules/vc-toast";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { PropType, computed, defineComponent, h, ref, toRaw } from "vue";
 import { Content, NotificationType, NotificationPosition } from "@shared/components/notifications/types";
 import { useContainer } from "@shared/components/notifications/composables/useContainer";
 
@@ -7,11 +8,6 @@ const NotificationContainer = defineComponent({
   name: "NotificationContainer",
   inheritAttrs: false,
   props: {
-    limit: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
     pauseOnHover: {
       type: Boolean,
       required: false,
@@ -67,10 +63,12 @@ const NotificationContainer = defineComponent({
   setup(props) {
     const { notificationContainers, actions } = useContainer();
     const notificationsList = computed(() => {
-      // Get notifications for the specific position
       return notificationContainers[props.position as NotificationPosition].value || [];
     });
 
+    // Stacking: expand toasts on hover
+    const expanded = ref(false);
+
     function isComponent(content: Content) {
       return (
         typeof content === "object" &&
@@ -79,28 +77,76 @@ const NotificationContainer = defineComponent({
       );
     }
 
+    // Called after VcToast finishes its exit transition — remove from the list directly
     function handleClose(id: string | number | undefined) {
       if (id) {
-        actions.dismiss(id);
+        actions.remove(id);
       }
     }
 
-    return () =>
-      notificationsList.value.map((item) => {
-        const props = {
+    function handleClearAll() {
+      actions.clear();
+    }
+
+    return () => {
+      const items = notificationsList.value;
+      const count = items.length;
+      const isExpanded = expanded.value || count <= 1;
+      const showClearAll = expanded.value && count > 1;
+
+      const children = items.map((item, index) => {
+        const toastProps = {
           ...item,
           key: item.notificationId,
           onClose: handleClose,
+          toastIndex: index,
+          toastsCount: count,
+          expanded: isExpanded,
         };
 
         if (item.content && isComponent(item.content)) {
           return h(VcToast, {
-            ...props,
+            ...toastProps,
             content: h(toRaw(item.content)),
           });
         }
-        return h(VcToast, props);
+        return h(VcToast, toastProps);
       });
+
+      // "Clear all" button below the stack
+      const clearAllButton = showClearAll
+        ? h("div", { class: "notification__clear-all" }, [
+            h(
+              "button",
+              {
+                type: "button",
+                onClick: handleClearAll,
+              },
+              [
+                h(VcIcon, { icon: "lucide-x", size: "xs", "aria-hidden": "true" }),
+                "Clear all",
+              ],
+            ),
+          ])
+        : null;
+
+      // Wrap in a group div for hover-expand behavior
+      return h(
+        "div",
+        {
+          class: "notification__toast-group",
+          "data-expanded": String(isExpanded),
+          "data-position": props.position || "top-center",
+          onMouseenter: () => {
+            expanded.value = true;
+          },
+          onMouseleave: () => {
+            expanded.value = false;
+          },
+        },
+        [...children, clearAllButton],
+      );
+    };
   },
 });
 

package/shared/components/notifications/composables/useContainer/index.ts

@@ -7,19 +7,8 @@ import { generateId, createLogger } from "@core/utilities";
 
 const logger = createLogger("notification-container");
 
-export interface PendingNotification {
-  notificationId: string | number;
-  notificationProps: NotificationOptions;
-  position: NotificationPosition;
-}
-
-interface PendingContainer {
-  items: PendingNotification[];
-}
-
 interface IUseContainer {
   defaultOptions: NotificationOptions;
-  pending: PendingContainer;
   notificationContainers: Record<NotificationPosition, Ref<NotificationOptions[]>>;
   actions: {
     add(options: NotificationOptions): void;
@@ -37,8 +26,6 @@ interface IUseContainer {
   hasNotification(notificationId: string | number): boolean;
 }
 
-const pending = reactive<PendingContainer>({ items: [] });
-
 // Create containers for each position
 const notificationContainers: Record<NotificationPosition, Ref<NotificationOptions[]>> = {
   "top-center": ref([]),
@@ -55,7 +42,6 @@ export function useContainer(): IUseContainer {
   const defaultOptions = reactive<NotificationOptions>({
     timeout: 3000,
     pauseOnHover: true,
-    limit: 3,
     position: "top-center",
   });
 
@@ -68,17 +54,6 @@ export function useContainer(): IUseContainer {
     return notificationContainers[position].value;
   }
 
-  function existPendingItem() {
-    return pending.items.length > 0;
-  }
-
-  function appendFromPending() {
-    if (pending.items.length > 0) {
-      const append = pending.items.shift();
-      if (append?.notificationProps) appendInstance(append?.notificationProps);
-    }
-  }
-
   function getNotification(notificationId: string | number) {
     return getAllNotifications().find((item) => item.notificationId === notificationId);
   }
@@ -145,17 +120,6 @@ export function useContainer(): IUseContainer {
       const position = options.position || (defaultOptions.position as NotificationPosition);
       const containers = notificationContainers[position];
 
-      // Check the limit for this position
-      if (options.limit && containers.value.length >= options.limit) {
-        // Add to the waiting queue
-        pending.items.push({
-          notificationId: options.notificationId || generateId(),
-          notificationProps: options,
-          position,
-        });
-        return;
-      }
-
       if (!containers.value.find((item) => item.notificationId === options.notificationId)) {
         nextTick(() => {
           containers.value.push(options);
@@ -187,23 +151,11 @@ export function useContainer(): IUseContainer {
             positionToRemoveFrom
           ].value.filter((item) => item.notificationId !== id);
 
-          // If container is empty and there are no pending notifications for this position - remove it
-          const hasPendingForPosition = pending.items.some((item) => item.position === positionToRemoveFrom);
-
-          if (notificationContainers[positionToRemoveFrom].value.length === 0 && !hasPendingForPosition) {
+          // If container is empty, unmount it
+          if (notificationContainers[positionToRemoveFrom].value.length === 0) {
             unmountComponent(positionToRemoveFrom);
           }
 
-          // Check pending notifications for this position
-          const pendingForPosition = pending.items.find((item) => item.position === positionToRemoveFrom);
-          if (pendingForPosition) {
-            const index = pending.items.indexOf(pendingForPosition);
-            const item = pending.items.splice(index, 1)[0];
-            if (item?.notificationProps) {
-              appendInstance(item.notificationProps);
-            }
-          }
-
           // Call the onClose callback
           nextTick(() => {
             if (notification?.onClose && typeof notification?.onClose === "function") {
@@ -220,70 +172,26 @@ export function useContainer(): IUseContainer {
       Object.values(notificationContainers).forEach((container) => {
         container.value = [];
       });
-      pending.items = [];
     },
 
     dismiss(notificationId: string | number) {
-      if (notificationId) {
-        // Find the notification among all containers
-        let found = false;
-        let foundPosition: NotificationPosition | undefined;
-
-        Object.values(notificationContainers).forEach((container) => {
-          container.value.forEach((item) => {
-            if (item.notificationId === notificationId) {
-              found = true;
-              foundPosition =
-                (item.position as NotificationPosition) || (defaultOptions.position as NotificationPosition);
-
-              // Find the toast element - it has class vc-notification within the notification container
-              const nodeId = String(notificationId);
-              const node = document.getElementById(nodeId);
-
-              if (node) {
-                // Add exit animation class based on position
-                const exitClass = `notification-exit-${foundPosition}`;
-                node.classList.add(exitClass);
-
-                // Set explicit styles for animation
-                node.style.transition = "opacity 300ms ease-out, transform 300ms ease-out";
-                node.style.opacity = "0";
-
-                // Apply transform based on position for exit animation
-                switch (foundPosition) {
-                  case "top-center":
-                    node.style.transform = "translateY(-30px)";
-                    break;
-                  case "top-right":
-                    node.style.transform = "translate(30px, -30px)";
-                    break;
-                  case "top-left":
-                    node.style.transform = "translate(-30px, -30px)";
-                    break;
-                  case "bottom-center":
-                    node.style.transform = "translateY(30px)";
-                    break;
-                  case "bottom-right":
-                    node.style.transform = "translate(30px, 30px)";
-                    break;
-                  case "bottom-left":
-                    node.style.transform = "translate(-30px, 30px)";
-                    break;
-                  default:
-                    node.style.transform = "translateY(-30px)";
-                }
+      if (!notificationId) return;
 
-                // Remove the notification after animation completes
-                setTimeout(() => {
-                  actions.remove(notificationId);
-                }, 300);
-              } else {
-                // If node not found, remove immediately
-                actions.remove(notificationId);
-              }
-            }
-          });
+      // Mark the notification as dismissing — VcToast watches this flag
+      // and handles its own exit animation, then emits 'close' when done.
+      let found = false;
+      Object.values(notificationContainers).forEach((container) => {
+        container.value.forEach((item) => {
+          if (item.notificationId === notificationId) {
+            item.dismissing = true;
+            found = true;
+          }
         });
+      });
+
+      // If notification wasn't found (already removed or never existed), no-op
+      if (!found) {
+        logger.debug(`dismiss: notification ${notificationId} not found`);
       }
     },
 
@@ -372,7 +280,6 @@ export function useContainer(): IUseContainer {
 
   return {
     defaultOptions,
-    pending,
     notificationContainers,
     actions,
     getAllNotifications,
@@ -383,25 +290,3 @@ export function useContainer(): IUseContainer {
     hasNotification,
   };
 }
-
-// Function, defining exit animation for each position
-function getExitTransform(position: NotificationPosition): string {
-  const distance = "var(--notification-slide-distance)";
-
-  switch (position) {
-    case "top-center":
-      return `translateY(calc(-1 * ${distance})) scale(0.95)`;
-    case "top-right":
-      return `translate(${distance}, calc(-1 * ${distance})) scale(0.95)`;
-    case "top-left":
-      return `translate(calc(-1 * ${distance}), calc(-1 * ${distance})) scale(0.95)`;
-    case "bottom-center":
-      return `translateY(${distance}) scale(0.95)`;
-    case "bottom-right":
-      return `translate(${distance}, ${distance}) scale(0.95)`;
-    case "bottom-left":
-      return `translate(calc(-1 * ${distance}), ${distance}) scale(0.95)`;
-    default:
-      return "translateY(-20px) scale(0.95)";
-  }
-}

package/shared/components/notifications/core/notification.ts

@@ -1,5 +1,5 @@
 import { mergeProps } from "vue";
-import { Content, InternalNotificationOptions, NotificationOptions, NotificationPosition } from "@shared/components/notifications/types";
+import { Content, NotificationOptions, NotificationPosition } from "@shared/components/notifications/types";
 import { useContainer } from "@shared/components/notifications/composables/useContainer";
 import { createLogger } from "@core/utilities";
 
@@ -7,7 +7,6 @@ const logger = createLogger("notification");
 
 const {
   defaultOptions,
-  pending,
   actions,
   getNotification,
   getAllNotifications,
@@ -16,40 +15,11 @@ const {
   hasNotification,
 } = useContainer();
 
-function checkPending(limit?: number, position?: NotificationPosition) {
-  // If position is not specified, use the default position
-  const posToCheck = position || (defaultOptions.position as NotificationPosition);
-  const limitCount = limit ?? 0;
-
-  // Check the limit for a specific position
-  const visibleCount = getAllNotifications().filter(
-    (notification) => (notification.position || defaultOptions.position) === posToCheck,
-  ).length;
-
-  return (
-    limitCount > 0 && visibleCount + pending.items.filter((item) => item.position === posToCheck).length >= limitCount
-  );
-}
-
-function resolvePending(options: InternalNotificationOptions) {
-  const position = options.position || (defaultOptions.position as NotificationPosition);
-
-  if (checkPending(options.limit, position) && options.notificationId) {
-    pending.items.push({
-      notificationId: options.notificationId,
-      notificationProps: options,
-      position,
-    });
-    return true;
-  }
-  return false;
-}
-
-function showNotification(content: Content, options: InternalNotificationOptions) {
+function showNotification(content: Content, options: NotificationOptions) {
   options = mergeProps(
     defaultOptions as Record<string, unknown>,
     options as Record<string, unknown>,
-  ) as InternalNotificationOptions;
+  ) as NotificationOptions;
 
   if (
     !options.notificationId ||
@@ -63,18 +33,6 @@ function showNotification(content: Content, options: InternalNotificationOptions
     content,
   };
 
-  // If this is an update (has updateId), don't check the limit and don't add to the waiting queue
-  if (options.updateId) {
-    appendInstance(options);
-    return options.notificationId;
-  }
-
-  // If the notification has been added to the queue, just return the ID
-  if (resolvePending(options)) {
-    return options.notificationId;
-  }
-
-  // Otherwise, display it
   appendInstance(options);
   return options.notificationId;
 }
@@ -189,9 +147,6 @@ notification.clearPosition = (position: NotificationPosition) => {
       actions.dismiss(item.notificationId);
     }
   });
-
-  // Remove pending notifications for this position
-  pending.items = pending.items.filter((item) => item.position !== position);
 };
 
 // Useful debugging method
@@ -238,15 +193,8 @@ notification.debug = () => {
     items.forEach((item) => logger.debug(`  - ${item.id} (${item.type}): ${item.content}`));
   });
 
-  // Collect statistics on pending notifications
-  logger.debug(`Pending notifications: ${pending.items.length}`);
-  pending.items.forEach((item) => {
-    logger.debug(`  - ${item.notificationId} (position: ${item.position})`);
-  });
-
   return {
     active: getAllNotifications(),
-    pending: pending.items,
     defaultOptions,
   };
 };

package/shared/components/notifications/styles/index.scss

@@ -3,7 +3,6 @@
   z-index: 9999;
   display: flex;
   flex-direction: column;
-  gap: 8px;
 
   /* Default position - top center */
   &:not([data-position]) {
@@ -67,105 +66,68 @@
   }
 }
 
-/* Animation styles for toast notifications */
-:root {
-  --notification-slide-distance: 30px;
-}
-
-/* Exit animation classes */
-.notification-exit-top-center {
-  animation: notificationExitTopCenter 0.3s ease-out forwards;
-}
-
-.notification-exit-top-right {
-  animation: notificationExitTopRight 0.3s ease-out forwards;
-}
-
-.notification-exit-top-left {
-  animation: notificationExitTopLeft 0.3s ease-out forwards;
-}
-
-.notification-exit-bottom-center {
-  animation: notificationExitBottomCenter 0.3s ease-out forwards;
-}
-
-.notification-exit-bottom-right {
-  animation: notificationExitBottomRight 0.3s ease-out forwards;
-}
-
-.notification-exit-bottom-left {
-  animation: notificationExitBottomLeft 0.3s ease-out forwards;
-}
+/* Toast group wrapper — stacking container for Sonner-style deck-of-cards */
+.notification__toast-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative; /* Positioning context for absolute back toasts */
+  transition: gap 400ms cubic-bezier(0.21, 1.02, 0.73, 1);
 
-/* Keyframes for exit animations */
-@keyframes notificationExitTopCenter {
-  from {
-    opacity: 1;
-    transform: translateY(0);
+  /* Prevent toasts from shrinking when container has max-height */
+  > * {
+    flex-shrink: 0;
   }
-  to {
-    opacity: 0;
-    transform: translateY(-30px);
-  }
-}
 
-@keyframes notificationExitTopRight {
-  from {
-    opacity: 1;
-    transform: translate(0, 0);
+  /* Top positions: reverse order so newest toast appears at top */
+  &[data-position^="top"] {
+    flex-direction: column-reverse;
   }
-  to {
-    opacity: 0;
-    transform: translate(30px, -30px);
-  }
-}
 
-@keyframes notificationExitTopLeft {
-  from {
-    opacity: 1;
-    transform: translate(0, 0);
+  /* Bottom positions: push items to the bottom of the container */
+  &[data-position^="bottom"] {
+    justify-content: flex-end;
   }
-  to {
-    opacity: 0;
-    transform: translate(-30px, -30px);
-  }
-}
 
-@keyframes notificationExitBottomCenter {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-}
+  &[data-expanded="true"] {
+    max-height: calc(100vh - 4em);
+    overflow-y: auto;
+    scrollbar-width: none; /* Firefox */
 
-@keyframes notificationExitBottomRight {
-  from {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-  to {
-    opacity: 0;
-    transform: translate(30px, 30px);
+    &::-webkit-scrollbar {
+      display: none; /* Chrome / Safari */
+    }
   }
-}
 
-@keyframes notificationExitBottomLeft {
-  from {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-30px, 30px);
+  &[data-expanded="false"] {
+    gap: 0;
   }
 }
 
-.notification__container > * {
-  transition: opacity 300ms cubic-bezier(0.55, 0, 0.1, 1), transform 300ms cubic-bezier(0.55, 0, 0.1, 1);
-  opacity: 1;
-  transform: translateY(0) scale(1);
+/* "Clear all" button — appears below the expanded toast stack */
+.notification__clear-all {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 4px 0;
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 10px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--neutrals-500);
+    font-size: 12px;
+    line-height: 1;
+    cursor: pointer;
+    transition: color 150ms ease, background 150ms ease;
+
+    &:hover {
+      color: var(--neutrals-700);
+      background: var(--neutrals-100);
+    }
+  }
 }

package/shared/components/notifications/types/index.ts

@@ -6,7 +6,6 @@ import { VNode, DefineComponent } from "vue";
 export type NotificationType = "success" | "error" | "warning" | "default";
 
 export interface NotificationOptions {
-  limit?: number;
   pauseOnHover?: boolean;
   timeout?: number | boolean;
   content?: Content;
@@ -18,11 +17,10 @@ export interface NotificationOptions {
   payload?: string | Record<string, any>;
   updateId?: string | number;
   position?: NotificationPosition;
+  /** Set by `actions.dismiss()` to trigger exit animation in VcToast */
+  dismissing?: boolean;
 }
 
-// Now InternalNotificationOptions doesn't need closeNotification
-export type InternalNotificationOptions = NotificationOptions;
-
 // Adding a new type for notification positioning
 export type NotificationPosition =
   | "top-center"

package/shared/components/popup-handler/components/vc-popup-container/vc-popup-container.vue

@@ -1,8 +1,8 @@
 <template>
   <component
     :is="popup.component"
-    v-for="popup in popupPlugin?.popups"
-    :key="popup.id"
+    v-for="(popup, index) in popupPlugin?.popups"
+    :key="popup.id ?? index"
     v-bind="{ ...popup.props, ...popup.emits }"
     @close="() => popup.close?.()"
   >