@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

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

@@ -1,292 +0,0 @@
-import { createApp, nextTick, reactive, ref, Ref } from "vue";
-import { NotificationOptions, NotificationPosition } from "@shared/components/notifications/types";
-import { NotificationContainer } from "@shared/components/notifications/components";
-import { useInstance } from "@shared/components/notifications/composables/useInstance";
-import * as _ from "lodash-es";
-import { generateId, createLogger } from "@core/utilities";
-
-const logger = createLogger("notification-container");
-
-interface IUseContainer {
-  defaultOptions: NotificationOptions;
-  notificationContainers: Record<NotificationPosition, Ref<NotificationOptions[]>>;
-  actions: {
-    add(options: NotificationOptions): void;
-    remove(id: string | number): void;
-    clear(): void;
-    dismiss(notificationId: string | number): void;
-    update(option: NotificationOptions): void;
-    setPosition(position: NotificationPosition): void;
-  };
-  getAllNotifications(): NotificationOptions[];
-  getNotificationsByPosition(position: NotificationPosition): NotificationOptions[];
-  appendInstance(options: NotificationOptions): void;
-  generateNotificationId(): string;
-  getNotification(notificationId: string | number): NotificationOptions | undefined;
-  hasNotification(notificationId: string | number): boolean;
-}
-
-// Create containers for each position
-const notificationContainers: Record<NotificationPosition, Ref<NotificationOptions[]>> = {
-  "top-center": ref([]),
-  "top-right": ref([]),
-  "top-left": ref([]),
-  "bottom-center": ref([]),
-  "bottom-right": ref([]),
-  "bottom-left": ref([]),
-};
-
-const { clearContainer, unmountComponent, saveInstance, getInstanceByPosition } = useInstance();
-
-export function useContainer(): IUseContainer {
-  const defaultOptions = reactive<NotificationOptions>({
-    timeout: 3000,
-    pauseOnHover: true,
-    position: "top-center",
-  });
-
-  function getAllNotifications() {
-    // Combine notifications from all positions
-    return Object.values(notificationContainers).flatMap((container) => container.value);
-  }
-
-  function getNotificationsByPosition(position: NotificationPosition) {
-    return notificationContainers[position].value;
-  }
-
-  function getNotification(notificationId: string | number) {
-    return getAllNotifications().find((item) => item.notificationId === notificationId);
-  }
-
-  function generateRoot(position: NotificationPosition) {
-    const rootInstance = document.querySelector(".notification");
-    const container = rootInstance || document.createElement("div");
-
-    // Check if a container already exists for the specified position
-    const positionSelector = `.notification__container[data-position="${position}"]`;
-    let renderRoot = document.querySelector(positionSelector) as HTMLElement | null;
-
-    // If there is no container for this position, create a new one
-    if (!renderRoot) {
-      renderRoot = document.createElement("div");
-      renderRoot.className = "notification__container";
-      renderRoot.id = `notification-${position}`;
-      renderRoot.setAttribute("data-position", position);
-
-      if (!rootInstance) {
-        container.className = "notification";
-        document.body.appendChild(container);
-      }
-
-      container.appendChild(renderRoot);
-    }
-
-    return renderRoot;
-  }
-
-  function appendInstance(options: NotificationOptions) {
-    // Determine the notification position
-    const position = options.position || (defaultOptions.position as NotificationPosition);
-
-    // Check if an instance already exists for this position
-    const existingInstance = getInstanceByPosition(position);
-
-    if (!existingInstance) {
-      // Create a new root element for the position
-      const dom = generateRoot(position);
-      const instance = createApp(NotificationContainer, {
-        ...(options as Record<string, unknown>),
-        position, // Pass the position to the component
-      });
-      instance.mount(dom);
-      saveInstance(instance, dom.id, position);
-    }
-
-    nextTick(() => {
-      if (options.updateId) {
-        actions.update(options);
-      } else {
-        actions.add(options);
-      }
-    });
-  }
-
-  function hasNotification(notificationId: string | number): boolean {
-    return getAllNotifications().some((item) => item.notificationId === notificationId);
-  }
-
-  const actions = {
-    add(options: NotificationOptions) {
-      const position = options.position || (defaultOptions.position as NotificationPosition);
-      const containers = notificationContainers[position];
-
-      if (!containers.value.find((item) => item.notificationId === options.notificationId)) {
-        nextTick(() => {
-          containers.value.push(options);
-          if (options.onOpen && typeof options?.onOpen === "function") {
-            options.onOpen(options.payload);
-          }
-        });
-      }
-    },
-
-    remove(id: string | number) {
-      if (id) {
-        // Find the notification among all containers
-        let notification: NotificationOptions | undefined;
-        let positionToRemoveFrom: NotificationPosition | undefined;
-
-        // Search in which container the notification is located
-        Object.entries(notificationContainers).forEach(([pos, container]) => {
-          const found = container.value.find((item) => item.notificationId === id);
-          if (found) {
-            notification = found;
-            positionToRemoveFrom = pos as NotificationPosition;
-          }
-        });
-
-        if (positionToRemoveFrom) {
-          // Remove the notification from the corresponding container
-          notificationContainers[positionToRemoveFrom].value = notificationContainers[
-            positionToRemoveFrom
-          ].value.filter((item) => item.notificationId !== id);
-
-          // If container is empty, unmount it
-          if (notificationContainers[positionToRemoveFrom].value.length === 0) {
-            unmountComponent(positionToRemoveFrom);
-          }
-
-          // Call the onClose callback
-          nextTick(() => {
-            if (notification?.onClose && typeof notification?.onClose === "function") {
-              notification.onClose(notification.payload);
-            }
-          });
-        }
-      }
-    },
-
-    clear() {
-      clearContainer();
-      // Clear all containers
-      Object.values(notificationContainers).forEach((container) => {
-        container.value = [];
-      });
-    },
-
-    dismiss(notificationId: string | number) {
-      if (!notificationId) return;
-
-      // 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`);
-      }
-    },
-
-    update(option: NotificationOptions) {
-      if (option.updateId) {
-        // Find the notification across all containers
-        let notification: NotificationOptions | undefined;
-        let containerToUpdate: Ref<NotificationOptions[]> | undefined;
-        let containerPosition: NotificationPosition | undefined;
-
-        // First check all containers
-        Object.entries(notificationContainers).forEach(([pos, container]) => {
-          const found = container.value.find((item) => item.notificationId === option.notificationId);
-          if (found) {
-            notification = found;
-            containerToUpdate = container;
-            containerPosition = pos as NotificationPosition;
-          }
-        });
-
-        // If we found the notification and container to update
-        if (notification && containerToUpdate) {
-          logger.debug(`Updating notification ${option.notificationId} in position ${containerPosition}`);
-
-          // If the position changes, move the notification between containers
-          if (option.position && option.position !== containerPosition) {
-            // Remove from current container
-            containerToUpdate.value = containerToUpdate.value.filter(
-              (item) => item.notificationId !== option.notificationId,
-            );
-
-            // Create updated notification with new properties
-            const updatedNotification = {
-              ...notification,
-              ...option,
-            };
-
-            // Define target position
-            const targetPosition = option.position;
-
-            // Check if a container already exists for the target position
-            if (!getInstanceByPosition(targetPosition)) {
-              // If no container exists for the target position, create a new one
-              logger.debug(`Creating new container for position ${targetPosition}`);
-              appendInstance(updatedNotification);
-            } else {
-              // If a container exists for the target position, add the updated notification
-              logger.debug(`Adding to existing container for position ${targetPosition}`);
-              notificationContainers[targetPosition].value.push(updatedNotification);
-            }
-          } else {
-            // Standard update of notification properties
-            logger.debug(`Standard update of notification properties`);
-
-            // Apply all new properties from option to notification
-            Object.keys(option).forEach((key) => {
-              if (key !== "updateId" && key !== "notificationId") {
-                const propKey = key as keyof NotificationOptions;
-                const propValue = option[propKey];
-
-                // Safely assign property
-                if (notification && propValue !== undefined) {
-                  // Use explicit type casting instead of any
-                  (notification as Record<keyof NotificationOptions, unknown>)[propKey] = propValue;
-                }
-              }
-            });
-          }
-
-          return true;
-        } else {
-          logger.warn(`Notification with ID ${option.notificationId} not found for update`);
-          return false;
-        }
-      }
-
-      return false;
-    },
-
-    setPosition(position: NotificationPosition) {
-      if (position) {
-        defaultOptions.position = position;
-      }
-    },
-  };
-
-  return {
-    defaultOptions,
-    notificationContainers,
-    actions,
-    getAllNotifications,
-    getNotificationsByPosition,
-    appendInstance,
-    getNotification,
-    generateNotificationId: generateId,
-    hasNotification,
-  };
-}

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

@@ -1,79 +0,0 @@
-import { App, Ref, ref } from "vue";
-import { NotificationPosition } from "@shared/components/notifications/types";
-import { createLogger } from "@core/utilities";
-
-const logger = createLogger("notification-instance");
-
-interface IUseInstance {
-  saveInstance(app: App<Element>, id: string, position: NotificationPosition): void;
-  unmountComponent(position?: NotificationPosition): void;
-  clearContainer(): void;
-  getInstanceByPosition(position: NotificationPosition): App<Element> | undefined;
-}
-
-// Instance storage for different positions
-const containerInstances: Record<NotificationPosition, App<Element> | undefined> = {
-  "top-center": undefined,
-  "top-right": undefined,
-  "top-left": undefined,
-  "bottom-center": undefined,
-  "bottom-right": undefined,
-  "bottom-left": undefined,
-};
-
-export function useInstance(): IUseInstance {
-  function saveInstance(app: App<Element>, id: string, position: NotificationPosition) {
-    const container = document.getElementById(id);
-    if (container) {
-      containerInstances[position] = app;
-    }
-  }
-
-  function unmountComponent(position?: NotificationPosition) {
-    try {
-      if (position) {
-        // Remove specific container by position
-        if (containerInstances[position]) {
-          containerInstances[position]?.unmount();
-          document.getElementById(`notification-${position}`)?.remove();
-          containerInstances[position] = undefined;
-        }
-      } else {
-        // Remove all containers
-        Object.keys(containerInstances).forEach((pos) => {
-          const position = pos as NotificationPosition;
-          containerInstances[position]?.unmount();
-          document.getElementById(`notification-${position}`)?.remove();
-          containerInstances[position] = undefined;
-        });
-
-        // Remove the root container if there are no active containers
-        const hasActiveContainers = Object.values(containerInstances).some((instance) => instance !== undefined);
-        if (!hasActiveContainers) {
-          document.querySelector(".notification")?.remove();
-        }
-      }
-    } catch (error) {
-      logger.error("Failed to unmount notification component:", error);
-    }
-  }
-
-  function clearContainer() {
-    Object.keys(containerInstances).forEach((pos) => {
-      if (containerInstances[pos as NotificationPosition]) {
-        unmountComponent(pos as NotificationPosition);
-      }
-    });
-  }
-
-  function getInstanceByPosition(position: NotificationPosition): App<Element> | undefined {
-    return containerInstances[position];
-  }
-
-  return {
-    saveInstance,
-    unmountComponent,
-    clearContainer,
-    getInstanceByPosition,
-  };
-}

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

@@ -1 +0,0 @@
-export { notification } from "@shared/components/notifications/core/notification";

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

@@ -1,202 +0,0 @@
-import { mergeProps } from "vue";
-import { Content, NotificationOptions, NotificationPosition } from "@shared/components/notifications/types";
-import { useContainer } from "@shared/components/notifications/composables/useContainer";
-import { createLogger } from "@core/utilities";
-
-const logger = createLogger("notification");
-
-const {
-  defaultOptions,
-  actions,
-  getNotification,
-  getAllNotifications,
-  appendInstance,
-  generateNotificationId,
-  hasNotification,
-} = useContainer();
-
-function showNotification(content: Content, options: NotificationOptions) {
-  options = mergeProps(
-    defaultOptions as Record<string, unknown>,
-    options as Record<string, unknown>,
-  ) as NotificationOptions;
-
-  if (
-    !options.notificationId ||
-    (typeof options.notificationId !== "string" && typeof options.notificationId !== "number")
-  ) {
-    options.notificationId = generateNotificationId();
-  }
-
-  options = {
-    ...options,
-    content,
-  };
-
-  appendInstance(options);
-  return options.notificationId;
-}
-
-const notification = (content: Content, options?: NotificationOptions) =>
-  showNotification(content, { ...options, type: "default" });
-
-notification.error = (content: Content, options?: NotificationOptions) =>
-  showNotification(content, { ...options, type: "error" });
-
-notification.warning = (content: Content, options?: NotificationOptions) =>
-  showNotification(content, { ...options, type: "warning" });
-
-notification.success = (content: Content, options?: NotificationOptions) =>
-  showNotification(content, { ...options, type: "success" });
-
-notification.clearAll = () => {
-  actions.clear();
-};
-
-notification.remove = (notificationId?: number | string) => {
-  if (notificationId) {
-    actions.dismiss(notificationId);
-  } else {
-    actions.clear();
-  }
-};
-
-notification.update = (notificationId: string | number, options: NotificationOptions) => {
-  // Check if notification exists
-  if (!hasNotification(notificationId)) {
-    logger.warn(`Cannot update: notification with ID ${notificationId} not found`);
-    return notificationId;
-  }
-
-  // Get the current notification
-  const item = getNotification(String(notificationId));
-
-  if (item) {
-    // First update option: if the position changes, recreate the notification
-    if (options.position && options.position !== item.position) {
-      // Create new options with required fields
-      const updatedOptions: NotificationOptions = {
-        ...item, // Copy all current properties
-        ...options, // Apply new properties
-        updateId: generateNotificationId(), // Mark as update
-        notificationId: notificationId, // Keep the original ID
-      };
-
-      // Determine content for update
-      let contentToUse: Content | undefined;
-
-      // If new content is explicitly provided, use it
-      if (options.content !== undefined) {
-        contentToUse = options.content;
-        delete updatedOptions.content; // Remove content from options
-      }
-      // Otherwise use existing content
-      else if (item.content) {
-        contentToUse = item.content;
-        delete updatedOptions.content; // Remove content from options
-      }
-
-      // Proceed with the update only if there is content
-      if (contentToUse) {
-        // Remove the old notification
-        actions.remove(notificationId);
-        // Create a new one with the new position
-        return showNotification(contentToUse, updatedOptions);
-      }
-    }
-    // Second option: update content without changing position
-    else {
-      // Use direct update through actions.update
-      const updateOptions = {
-        ...options,
-        updateId: generateNotificationId(),
-        notificationId: notificationId,
-      };
-
-      // If we're only updating content, use a special method
-      if (options.content !== undefined) {
-        // Apply the update directly through actions
-        const result = actions.update(updateOptions);
-        return notificationId;
-      } else {
-        // Update other properties
-        const result = actions.update(updateOptions);
-        return notificationId;
-      }
-    }
-  }
-
-  return notificationId;
-};
-
-// New method for setting notification position
-notification.setPosition = (position: NotificationPosition) => {
-  defaultOptions.position = position;
-};
-
-// New method for clearing notifications only in a specific position
-notification.clearPosition = (position: NotificationPosition) => {
-  // Find all notifications in the specified position
-  const notificationsInPosition = getAllNotifications().filter(
-    (item) => (item.position || defaultOptions.position) === position,
-  );
-
-  // Remove each notification
-  notificationsInPosition.forEach((item) => {
-    if (item.notificationId) {
-      actions.dismiss(item.notificationId);
-    }
-  });
-};
-
-// Useful debugging method
-notification.debug = () => {
-  // Default settings information
-  Object.entries(defaultOptions).forEach(([key, value]) => {
-    logger.debug(`Default option ${key}: `, value);
-  });
-
-  // Available actions
-  Object.entries(actions).forEach(([key]) => {
-    logger.debug(`Available action: ${key}`);
-  });
-
-  // Collect statistics on notifications in different positions
-  const groupedNotifications = getAllNotifications().reduce<
-    Record<
-      string,
-      Array<{
-        id: string | number;
-        type?: string;
-        content: string;
-      }>
-    >
-  >((acc, item) => {
-    const position = (item.position as string) || (defaultOptions.position as string);
-
-    if (!acc[position]) {
-      acc[position] = [];
-    }
-
-    acc[position].push({
-      id: item.notificationId || "unknown",
-      type: item.type,
-      content: typeof item.content === "string" ? item.content : "[Component]",
-    });
-
-    return acc;
-  }, {});
-
-  // Display group information
-  Object.entries(groupedNotifications).forEach(([position, items]) => {
-    logger.debug(`Position ${position}: ${items.length} notifications`);
-    items.forEach((item) => logger.debug(`  - ${item.id} (${item.type}): ${item.content}`));
-  });
-
-  return {
-    active: getAllNotifications(),
-    defaultOptions,
-  };
-};
-
-export { notification };

package/shared/components/notifications/index.ts

@@ -1,6 +0,0 @@
-import "./styles/index.scss";
-
-export * from "@shared/components/notifications/components";
-export * from "@shared/components/notifications/composables";
-export * from "@shared/components/notifications/types";
-export * from "@shared/components/notifications/core";