@vc-shell/framework 1.0.67 → 1.0.68

package/shared/components/blade-navigation/components/vc-blade-navigation/vc-blade-navigation.vue

@@ -1,46 +1,76 @@
 <template>
-  <router-view v-slot="{ Component, route }">
-    <component
-      :is="Component"
-      :closable="false"
-      v-show="$isMobile.value ? !blades.length : blades.length <= 1"
-      @open:blade="onBladeOpen($event, 0)"
-      :options="parentBladeOptions"
-      :expanded="blades.length === 0"
-      :maximized="findStateById(0)"
-      :blades="blades"
-      :param="resolveParam"
-      :key="route"
-      :ref="(el: IBladeElement) => setParentRef(el, Component)"
-      @expand:blade="handleMaximizeBlade(0, true)"
-      @collapse:blade="handleMaximizeBlade(0, false)"
+  <ErrorInterceptor
+    capture
+    v-slot="{ error, reset }"
+  >
+    <router-view
+      @vnode-before-unmount="reset"
+      v-slot="{ Component, route }"
+      :key="route.path"
     >
-    </component>
-  </router-view>
-  <component
+      <component
+        :is="Component"
+        :closable="false"
+        v-show="$isMobile.value ? !blades.length : blades.length <= 1"
+        @open:blade="onBladeOpen($event, 0)"
+        :options="parentBladeOptions"
+        :expanded="blades.length === 0"
+        :maximized="findStateById(0)"
+        :blades="blades"
+        :param="resolveParam"
+        :key="route.path"
+        :ref="(el: IBladeElement) => setParentRef(el, Component)"
+        @expand:blade="handleMaximizeBlade(0, true)"
+        @collapse:blade="handleMaximizeBlade(0, false)"
+      >
+        <template
+          v-slot:error
+          v-if="error"
+          >{{ error }}</template
+        >
+      </component>
+    </router-view>
+  </ErrorInterceptor>
+
+  <template
     v-for="(blade, i) in blades"
-    v-show="i >= blades.length - ($isMobile.value ? 1 : 2)"
     :key="`blade_${i + 1}`"
-    :is="blade.component"
-    :param="blade.param"
-    :closable="i >= 0"
-    :expanded="i === blades.length - 1"
-    :maximized="findStateById(blade.idx)"
-    :options="blade.bladeOptions"
-    @open:blade="onBladeOpen($event, blade.idx)"
-    @close:blade="onBladeClose(i)"
-    @close:children="$emit('onClose', i + 1)"
-    @parent:call="$emit('onParentCall', { id: i, args: $event })"
-    @expand:blade="handleMaximizeBlade(blade.idx, true)"
-    @collapse:blade="handleMaximizeBlade(blade.idx, false)"
-    :ref="(el: IBladeElement) => setBladesRef(el, blade)"
-  ></component>
+  >
+    <ErrorInterceptor
+      v-slot="{ error }"
+      capture
+    >
+      <component
+        v-show="i >= blades.length - ($isMobile.value ? 1 : 2)"
+        :is="blade.component"
+        :param="blade.param"
+        :closable="i >= 0"
+        :expanded="i === blades.length - 1"
+        :maximized="findStateById(blade.idx)"
+        :options="blade.bladeOptions"
+        @open:blade="onBladeOpen($event, blade.idx)"
+        @close:blade="onBladeClose(i)"
+        @close:children="$emit('onClose', i + 1)"
+        @parent:call="$emit('onParentCall', { id: i, args: $event })"
+        @expand:blade="handleMaximizeBlade(blade.idx, true)"
+        @collapse:blade="handleMaximizeBlade(blade.idx, false)"
+        :ref="(el: IBladeElement) => setBladesRef(el, blade)"
+      >
+        <template
+          v-slot:error
+          v-if="error"
+          >{{ error }}</template
+        >
+      </component>
+    </ErrorInterceptor>
+  </template>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, VNode } from "vue";
 import { useRoute } from "vue-router";
 import { IBladeContainer, IBladeElement, IBladeEvent, IParentCallArgs, IBladeRef } from "./../../../../../shared";
+import { ErrorInterceptor } from "./../../../../../core/plugins/error-interceptor";
 
 export interface Props {
   blades: IBladeContainer[];

package/shared/components/blade-navigation/composables/useBladeNavigation/index.ts

@@ -110,8 +110,6 @@ export function useBladeNavigation(): IUseBladeNavigation {
           blades.value[index]?.onClose?.();
         }
         blades.value.splice(index);
-      } else {
-        throw "Closing prevented";
       }
     }
   }

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

@@ -0,0 +1 @@
+export { default as NotificationContainer } from "./notification-container";

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

@@ -0,0 +1,80 @@
+import { VcNotification } from "./../../../../../ui/components";
+import { PropType, computed, defineComponent, h } from "vue";
+import { NotificationType } from "../../types";
+import { useContainer } from "../../composables";
+
+const NotificationContainer = defineComponent({
+  name: "NotificationContainer",
+  inheritAttrs: false,
+  props: {
+    limit: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    pauseOnHover: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    timeout: {
+      type: [Number, Boolean],
+      required: false,
+      default: 3000,
+    },
+    content: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    notificationId: {
+      type: [String, Number],
+      required: false,
+      default: "",
+    },
+    updateId: {
+      type: [String, Number],
+      required: false,
+      default: "",
+    },
+    type: {
+      type: String as PropType<NotificationType>,
+      required: false,
+      default: "default",
+    },
+    closeNotification: {
+      type: Function as PropType<() => void>,
+      required: false,
+      default: undefined,
+    },
+    onOpen: {
+      type: Function as PropType<<T>(payload: T) => void>,
+      required: false,
+      default: undefined,
+    },
+    onClose: {
+      type: Function as PropType<<T>(payload: T) => void>,
+      required: false,
+      default: undefined,
+    },
+    payload: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      type: [String, Object] as PropType<Record<string, any>>,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  setup() {
+    const { notificationContainer } = useContainer();
+    const notificationsList = computed(() => {
+      return notificationContainer.value || [];
+    });
+
+    return () =>
+      notificationsList.value.map((item) => {
+        return h(VcNotification, { ...item, key: item.notificationId });
+      });
+  },
+});
+
+export default NotificationContainer;

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

@@ -0,0 +1,2 @@
+export { useContainer } from "./useContainer";
+export { useInstance } from "./useInstance";

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

@@ -0,0 +1,190 @@
+import { createApp, nextTick, reactive, ref, Ref } from "vue";
+import { NotificationOptions } from "../../types";
+import { NotificationContainer } from "../../components";
+import { useInstance } from "../useInstance";
+import * as _ from "lodash-es";
+
+interface PendingNotification {
+  notificationId: string | number;
+  notificationProps: NotificationOptions;
+}
+
+interface PendingContainer {
+  items: PendingNotification[];
+}
+
+interface IUseContainer {
+  defaultOptions: NotificationOptions;
+  pending: PendingContainer;
+  notificationContainer: Ref<NotificationOptions[]>;
+  actions: {
+    add(options: NotificationOptions): void;
+    remove(id: string | number): void;
+    clear(): void;
+    dismiss(notificationId: string | number): void;
+  };
+  getAllNotifications(): NotificationOptions[];
+  appendInstance(options: NotificationOptions): void;
+  generateNotificationId(): string;
+  getNotification(notificationId: string): NotificationOptions;
+}
+
+const pending = reactive<PendingContainer>({ items: [] });
+const notificationContainer: Ref<NotificationOptions[]> = ref([]);
+
+const { clearContainer, unmountComponent, saveInstance } = useInstance();
+
+export function useContainer(): IUseContainer {
+  const defaultOptions = reactive<NotificationOptions>({
+    timeout: 3000,
+    pauseOnHover: true,
+    limit: 3,
+  });
+
+  function getAllNotifications() {
+    return notificationContainer.value;
+  }
+
+  function existPendingItem() {
+    return pending.items.length > 0;
+  }
+
+  function appendFromPending() {
+    if (pending.items.length > 0) {
+      const append = pending.items.shift();
+      appendInstance(append?.notificationProps);
+    }
+  }
+
+  function getNotification(notificationId: string | number) {
+    const notification = getAllNotifications();
+
+    return notification.find((item) => item.notificationId === notificationId);
+  }
+
+  function generateRoot() {
+    const rootInstance = document.querySelector(".notification");
+    const notificationContainer = document.querySelector(".notification__container");
+    const existRenderRoot = !!notificationContainer;
+
+    const container = rootInstance || document.createElement("div");
+    const renderRoot = document.createElement("div");
+
+    renderRoot.className = "notification__container";
+    renderRoot.id = "notification";
+
+    if (!rootInstance) {
+      container.className = "notification";
+      document.body.appendChild(container);
+    }
+
+    if (!existRenderRoot) {
+      container.appendChild(renderRoot);
+    }
+
+    return renderRoot;
+  }
+
+  function appendInstance(options: NotificationOptions) {
+    const isExist = (notificationContainer.value || []).length > 0;
+
+    if (!isExist && !document.querySelector(`.notification__container`)) {
+      const dom = generateRoot();
+      const instance = createApp(NotificationContainer, options as Record<string, unknown>);
+      instance.mount(dom);
+      saveInstance(instance, dom.id);
+    }
+
+    nextTick(() => {
+      if (options.updateId) {
+        actions.update(options);
+      } else {
+        actions.add(options);
+      }
+    });
+  }
+
+  function generateNotificationId() {
+    return Math.random().toString(36).substring(2, 9);
+  }
+
+  const actions = {
+    add(options: NotificationOptions) {
+      if (!notificationContainer.value.find((item) => item.notificationId === options.notificationId)) {
+        nextTick(() => {
+          notificationContainer.value?.push(options);
+          if (options.onOpen && typeof options?.onOpen === "function") {
+            options.onOpen(options.payload ?? {});
+          }
+        });
+      }
+    },
+    remove(id: string | number) {
+      if (id) {
+        const container = document.querySelector(".notification");
+        if (container) {
+          let notification = notificationContainer.value.find((item) => item.notificationId === id);
+          _.remove(notificationContainer.value, (item) => {
+            return item.notificationId === id;
+          });
+
+          if (!notificationContainer.value.length && !existPendingItem()) {
+            unmountComponent();
+          }
+
+          appendFromPending();
+
+          nextTick(() => {
+            if (notification?.onClose && typeof notification?.onClose === "function") {
+              notification.onClose(notification.payload ?? {});
+              notification = undefined;
+            }
+          });
+        }
+      }
+    },
+    clear() {
+      clearContainer();
+    },
+    dismiss(notificationId: string | number) {
+      if (notificationId) {
+        const allNotifications = getAllNotifications();
+        allNotifications.forEach((item) => {
+          if (item.notificationId === notificationId) {
+            const node = document.getElementById(String(notificationId));
+
+            if (node) {
+              setTimeout(() => {
+                actions.remove(notificationId);
+              });
+            }
+          }
+        });
+      }
+    },
+    update(option: NotificationOptions) {
+      if (option.updateId) {
+        const item = notificationContainer.value?.find((item) => item.notificationId === option.notificationId);
+        if (item) {
+          for (const name in option) {
+            if (name in option) {
+              const value = option[name];
+              item[name] = value;
+            }
+          }
+        }
+      }
+    },
+  };
+
+  return {
+    defaultOptions,
+    pending,
+    notificationContainer,
+    actions,
+    getAllNotifications,
+    appendInstance,
+    getNotification,
+    generateNotificationId,
+  };
+}

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

@@ -0,0 +1,46 @@
+import { App, Ref, ref } from "vue";
+import { useContainer } from "./../useContainer";
+
+interface IUseInstance {
+  saveInstance(app: App<Element>, id: string): void;
+  unmountComponent(): void;
+  clearContainer(): void;
+}
+
+const containerInstance: Ref<App<Element>> = ref();
+
+export function useInstance(): IUseInstance {
+  const { pending, notificationContainer } = useContainer();
+
+  function saveInstance(app: App<Element>, id: string) {
+    const container = document.getElementById(id);
+    if (container) {
+      containerInstance.value = app;
+    }
+  }
+
+  function unmountComponent() {
+    try {
+      containerInstance.value.unmount();
+      document.getElementById("notification")?.remove();
+      containerInstance.value = undefined;
+      notificationContainer.value = [];
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  function clearContainer() {
+    if (containerInstance.value) {
+      unmountComponent();
+    }
+
+    pending.items = [];
+  }
+
+  return {
+    saveInstance,
+    unmountComponent,
+    clearContainer,
+  };
+}

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

@@ -0,0 +1 @@
+export { notification } from "./notification";

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

@@ -0,0 +1,96 @@
+import { mergeProps } from "vue";
+import { NotificationOptions } from "../types";
+import { useContainer } from "../composables";
+
+const {
+  defaultOptions,
+  pending,
+  actions,
+  getNotification,
+  getAllNotifications,
+  appendInstance,
+  generateNotificationId,
+} = useContainer();
+
+function checkPending(limit?: number) {
+  const visibleCount = getAllNotifications().length;
+  const limitCount = limit ?? 0;
+  return limitCount > 0 && visibleCount + pending.items.length >= limitCount;
+}
+
+function resolvePending(options) {
+  if (checkPending(options.limit)) {
+    pending.items.push({
+      notificationId: options.notificationId,
+      notificationProps: options,
+    });
+  }
+}
+
+function showNotification(content: string, options: NotificationOptions) {
+  options = mergeProps(defaultOptions as Record<string, unknown>, options as Record<string, unknown>);
+
+  if (
+    !options.notificationId ||
+    (typeof options.notificationId !== "string" && typeof options.notificationId !== "number")
+  ) {
+    options.notificationId = generateNotificationId();
+  }
+
+  options = {
+    ...options,
+    content,
+    closeNotification: () => notification.remove(options.notificationId),
+  };
+
+  resolvePending(options);
+
+  if (!pending.items.length) {
+    appendInstance(options);
+  }
+
+  return options.notificationId;
+}
+
+const notification = (content: string, options?: NotificationOptions) =>
+  showNotification(content, { ...options, type: "default" });
+
+notification.error = (content: string, options?: NotificationOptions) =>
+  showNotification(content, { ...options, type: "error" });
+
+notification.warning = (content: string, options?: NotificationOptions) =>
+  showNotification(content, { ...options, type: "warning" });
+
+notification.success = (content: string, 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) => {
+  const item = getNotification(String(notificationId));
+  if (item) {
+    const updatedOptions = {
+      ...item,
+      ...options,
+      updateId: generateNotificationId(),
+      notificationId: options.notificationId || notificationId,
+    };
+
+    const content = updatedOptions.content || item.content;
+    delete updatedOptions.content;
+
+    showNotification(content, updatedOptions);
+  }
+};
+
+export { notification };

package/shared/components/notifications/index.ts

@@ -0,0 +1,17 @@
+import * as components from "./components";
+import { createModule } from "../../../core/plugins";
+import "./styles/index.scss";
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    VcNotificationContainer: (typeof components)["NotificationContainer"];
+  }
+}
+
+export const VcNotificationComponent = createModule(components);
+
+export * from "./components";
+export * from "./composables";
+export * from "./types";
+export * from "./core";

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

@@ -0,0 +1,9 @@
+.notification__container {
+  position: fixed;
+  top: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,16 @@
+export type NotificationType = "success" | "error" | "warning" | "default";
+
+export interface NotificationOptions {
+  limit?: number;
+  pauseOnHover?: boolean;
+  timeout?: number | boolean;
+  content?: string;
+  notificationId?: number | string;
+  type?: NotificationType;
+  closeNotification?(): void;
+  onOpen?: <T>(payload: T) => void;
+  onClose?: <T>(payload: T) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  payload?: string | Record<string, any>;
+  updateId?: string | number;
+}

package/shared/index.ts

@@ -3,10 +3,16 @@ import { AssetsDetailsModule } from "./modules/assets";
 import { VcAppSwitcherComponent } from "./components/app-switcher";
 import { VcBladeNavigationComponent } from "./components/blade-navigation";
 import { AssetsManagerModule } from "./modules/assets-manager";
+import { VcNotificationComponent } from "./components/notifications";
 
 export const SharedModule = {
   install(app: App): void {
-    app.use(AssetsDetailsModule).use(AssetsManagerModule).use(VcBladeNavigationComponent).use(VcAppSwitcherComponent);
+    app
+      .use(AssetsDetailsModule)
+      .use(AssetsManagerModule)
+      .use(VcBladeNavigationComponent)
+      .use(VcAppSwitcherComponent)
+      .use(VcNotificationComponent);
   },
 };
 
@@ -15,3 +21,4 @@ export * from "./modules/assets-manager";
 
 export * from "./components/app-switcher";
 export * from "./components/blade-navigation";
+export * from "./components/notifications";

package/shared/modules/assets/components/assets-details/assets-details.vue

@@ -9,6 +9,12 @@
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
   >
+    <template
+      v-slot:error
+      v-if="$slots['error']"
+    >
+      <slot name="error"></slot>
+    </template>
     <!-- Blade contents -->
     <div class="tw-flex tw-grow-1 tw-border-t tw-border-solid tw-border-t-[#eaedf3]">
       <div class="assets-details__content tw-grow tw-basis-0 tw-w-full">

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -9,6 +9,12 @@
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
   >
+    <template
+      v-slot:error
+      v-if="$slots['error']"
+    >
+      <slot name="error"></slot>
+    </template>
     <div
       class="tw-relative tw-h-full"
       @dragover.prevent.stop="dragOver"

package/ui/components/molecules/vc-notification/index.ts

@@ -1,10 +1,3 @@
-import { VNode } from "vue";
 import _Notification from "./vc-notification.vue";
 
-export const VcNotification = _Notification as typeof _Notification & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+export const VcNotification = _Notification as typeof _Notification;