@vc-shell/framework 1.0.69 → 1.0.71

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

@@ -1,33 +1,28 @@
 <template>
   <ErrorInterceptor
-    capture
     v-slot="{ error, reset }"
+    capture
   >
     <router-view
-      @vnode-before-unmount="reset"
-      v-slot="{ Component, route }"
+      v-slot="{ Component }"
       :key="route.path"
+      @vue:before-unmount="reset"
     >
       <component
         :is="Component"
-        :closable="false"
         v-show="$isMobile.value ? !blades.length : blades.length <= 1"
-        @open:blade="onBladeOpen($event, 0)"
+        :key="route.path"
+        :ref="(el: CoreBladeExposed) => setParentRef(el, Component)"
+        :closable="false"
         :options="parentBladeOptions"
         :expanded="blades.length === 0"
         :maximized="findStateById(0)"
         :blades="blades"
         :param="resolveParam"
-        :key="route.path"
-        :ref="(el: IBladeElement) => setParentRef(el, Component)"
+        :error="error"
         @expand:blade="handleMaximizeBlade(0, true)"
         @collapse:blade="handleMaximizeBlade(0, false)"
       >
-        <template
-          v-slot:error
-          v-if="error"
-          >{{ error }}</template
-        >
       </component>
     </router-view>
   </ErrorInterceptor>
@@ -41,26 +36,22 @@
       capture
     >
       <component
+        :is="blade.blade"
         v-show="i >= blades.length - ($isMobile.value ? 1 : 2)"
-        :is="blade.component"
+        :ref="(el: CoreBladeExposed) => setBladesRef(el, blade)"
         :param="blade.param"
         :closable="i >= 0"
         :expanded="i === blades.length - 1"
         :maximized="findStateById(blade.idx)"
-        :options="blade.bladeOptions"
-        @open:blade="onBladeOpen($event, blade.idx)"
+        :options="blade.options"
+        :error="error"
+        :blades="blades"
         @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>
@@ -69,8 +60,15 @@
 <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";
+import {
+  IBladeContainer,
+  CoreBladeExposed,
+  IBladeEvent,
+  IParentCallArgs,
+  IBladeRef,
+  BladeConstructor,
+} from "./../../../../../shared";
+import { ErrorInterceptor } from "./../../../error-interceptor";
 
 export interface Props {
   blades: IBladeContainer[];
@@ -89,17 +87,16 @@ const emit = defineEmits<Emits>();
 const props = withDefaults(defineProps<Props>(), {
   blades: () => [],
   parentBladeOptions: () => ({}),
-  parentBladeParam: undefined,
 });
 
 const route = useRoute();
 const bladesRefs = ref<IBladeRef[]>([]);
-const state = ref<(IBladeRef & { expanded: boolean })[]>([]);
+const state = ref<IBladeRef[]>([]);
 
 const visibleBlades = computed(() => bladesRefs.value.slice(-2));
 
 function handleMaximizeBlade(id: number, expand: boolean) {
-  state.value = visibleBlades.value?.map((x: IBladeRef & { expanded: boolean }) => {
+  state.value = visibleBlades.value?.map((x: IBladeRef) => {
     if (x.blade.idx === id) {
       x.expanded = expand;
     }
@@ -111,13 +108,13 @@ function findStateById(id: number) {
   return state.value?.find((item) => item.blade.idx === id)?.expanded;
 }
 
-function setParentRef(el: IBladeElement, bladeNode: VNode) {
+function setParentRef(el: CoreBladeExposed, bladeNode: VNode) {
   if (el && bladeNode) {
     bladesRefs.value = [
       {
         exposed: el,
         blade: {
-          component: bladeNode.type as VNode,
+          blade: bladeNode.type as BladeConstructor,
           param: bladeNode.props?.param as string,
           idx: 0,
         },
@@ -126,7 +123,7 @@ function setParentRef(el: IBladeElement, bladeNode: VNode) {
   }
 }
 
-function setBladesRef(el: IBladeElement, blade: IBladeContainer) {
+function setBladesRef(el: CoreBladeExposed, blade: IBladeContainer) {
   if (el && el !== null && blade) {
     const isExists = bladesRefs.value.some((item) => item.blade.idx === blade.idx);
     if (!isExists) {
@@ -139,11 +136,6 @@ function onBladeClose(index: number) {
   emit("onClose", index);
 }
 
-function onBladeOpen(event: IBladeEvent, idx: number) {
-  state.value = [];
-  emit("onOpen", { blade: event, id: idx });
-}
-
 const resolveParam = computed(() => {
   return props.parentBladeParam ? props.parentBladeParam : route.params.param;
 });

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

@@ -1,26 +1,48 @@
-import { computed, ref, unref, watch, Ref, shallowRef } from "vue";
+import {
+  computed,
+  ref,
+  unref,
+  watch,
+  Ref,
+  ComponentPublicInstance,
+  getCurrentInstance,
+  markRaw,
+  inject,
+  nextTick,
+} from "vue";
 import * as _ from "lodash-es";
-import { useRouter, useRoute, NavigationFailure } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { usePermissions } from "../../../../../core/composables";
-import { ExtendedComponent, IBladeContainer, IBladeRef, IBladeEvent, IParentCallArgs } from "../../../..";
+import {
+  IBladeContainer,
+  IBladeRef,
+  IBladeEvent,
+  IParentCallArgs,
+  BladeConstructor,
+  BladeComponentInternalInstance,
+  BladeNavigationPlugin,
+  notification,
+} from "../../../..";
+import { bladeNavigationInstance } from "./../../plugin";
 
 interface IUseBladeNavigation {
   readonly blades: Ref<IBladeContainer[]>;
   readonly parentBladeOptions: Ref<Record<string, unknown>>;
   readonly parentBladeParam: Ref<string>;
   bladesRefs: Ref<IBladeRef[]>;
-  openBlade: (
-    { parentBlade, component, param, bladeOptions, onOpen, onClose }: IBladeEvent,
-    index?: number,
-    navigationCb?: () => Promise<void | NavigationFailure>
-  ) => void;
-  closeBlade: (index: number) => void;
+  openBlade: <Blade extends ComponentPublicInstance = ComponentPublicInstance>({
+    blade,
+    param,
+    options,
+    onOpen,
+    onClose,
+  }: IBladeEvent<Blade>) => void;
+  closeBlade: (index: number) => Promise<boolean>;
   onParentCall: (index: number, args: IParentCallArgs) => void;
 }
 
-const blades: Ref<IBladeContainer[]> = ref([]);
-const bladesRefs: Ref<IBladeRef[]> = ref([]);
-const parentBladeOptions: Ref<Record<string, unknown>> = ref();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const parentBladeOptions: Ref<Record<string, any>> = ref();
 const parentBladeParam: Ref<string> = ref();
 
 export function useBladeNavigation(): IUseBladeNavigation {
@@ -29,71 +51,78 @@ export function useBladeNavigation(): IUseBladeNavigation {
   const { checkPermission } = usePermissions();
   const isPrevented = ref(false);
 
+  const instance: BladeComponentInternalInstance = getCurrentInstance();
+  const navigationInstance =
+    (instance && inject<BladeNavigationPlugin>("bladeNavigationPlugin")) || bladeNavigationInstance;
+
   watch(
-    () => blades.value,
+    navigationInstance.blades,
     (newVal) => {
       const lastBlade = newVal[newVal.length - 1];
 
-      if (lastBlade && lastBlade.component.url) {
+      if (lastBlade && lastBlade.blade.url) {
         if (lastBlade.param) {
-          addEntryToLocation(lastBlade.component.url + "/" + lastBlade.param);
+          addEntryToLocation(lastBlade.blade.url + "/" + lastBlade.param);
         } else {
-          addEntryToLocation(lastBlade.component.url);
+          addEntryToLocation(lastBlade.blade.url);
         }
       } else if (!lastBlade) {
+        clearParentData();
         addEntryToLocation(route.path);
       }
     },
     { deep: true }
   );
 
-  async function openBlade(
-    { parentBlade, component: blade, param, bladeOptions, onOpen, onClose }: IBladeEvent,
-    index?: number,
-    navigationCb?: () => Promise<void | NavigationFailure>
-  ) {
-    console.debug(`openBlade called.`);
-
-    const parent = unref(parentBlade);
-    const child = unref(blade);
-    const existingChild = findBlade(child);
-
-    if (parent && parent.url) {
+  async function openBlade<Blade extends ComponentPublicInstance>({
+    blade,
+    param,
+    options,
+    onOpen,
+    onClose,
+  }: IBladeEvent<Blade>) {
+    const caller = instance && instance.vnode.type;
+
+    const bladeComponent = unref(blade);
+    const callerIndex = navigationInstance.bladesRefs.value.findIndex((item) => {
+      return _.isEqual(item.blade.blade, caller);
+    });
+    const existingChild =
+      callerIndex >= 0 ? navigationInstance.bladesRefs.value[callerIndex + 1]?.blade.blade : undefined;
+    const index = caller?.idx ? caller.idx : 0;
+
+    const initiator = caller?.url && navigationInstance.bladesRefs.value.find((x) => x.blade?.blade.url === caller.url);
+
+    if (!initiator && bladeComponent.url) {
       await closeBlade(0);
 
       if (!isPrevented.value) {
-        parentBladeOptions.value = unref(bladeOptions);
+        parentBladeOptions.value = unref(options);
         parentBladeParam.value = unref(param);
-        if (navigationCb && typeof navigationCb === "function") {
-          try {
-            await navigationCb();
-          } catch (e) {
-            console.log(e);
-          } finally {
-            console.debug(`Navigated to: ${parent.url}`);
-          }
-        } else if (!navigationCb) {
-          await router.push(parent.url);
-        }
-      }
-    }
 
-    if (child) {
+        await router.push(bladeComponent.url);
+      }
+    } else {
       if (existingChild === undefined) {
-        child.idx = index + 1;
+        bladeComponent.idx = index ? index + 1 : 1;
       } else if (existingChild) {
-        await closeBlade(blades.value.findIndex((x) => x.idx === existingChild.idx));
-        child.idx = existingChild.idx;
+        await closeBlade(
+          navigationInstance.blades.value.findIndex((x: IBladeContainer) => x.idx === existingChild.idx)
+        );
+        bladeComponent.idx = existingChild.idx;
+      }
+      if (!isPrevented.value) {
+        await addBlade(bladeComponent, param, options, onOpen, onClose, index);
       }
-
-      await addBlade(child, param, bladeOptions, onOpen, onClose, index);
     }
   }
 
   async function closeBlade(index: number) {
+    console.debug(`[@vc-shell/framework#useBladeNavigation] - closeBlade called.`);
     const refsIndex = index + 1;
-    if (refsIndex < bladesRefs.value.length) {
-      const children = bladesRefs.value.slice(refsIndex).reverse();
+
+    if (refsIndex < navigationInstance.bladesRefs.value.length) {
+      const children = navigationInstance.bladesRefs.value.slice(refsIndex).reverse();
 
       isPrevented.value = false;
       for (let i = 0; i < children.length; i++) {
@@ -101,35 +130,38 @@ export function useBladeNavigation(): IUseBladeNavigation {
           const result = await children[i].exposed.onBeforeClose();
           if (result === false) {
             isPrevented.value = true;
-            break;
+            console.debug(`[@vc-shell/framework#useBladeNavigation] - Navigation is prevented`);
+            return isPrevented.value;
           }
         }
       }
       if (!isPrevented.value) {
-        if (typeof blades.value[index]?.onClose === "function") {
-          blades.value[index]?.onClose?.();
+        if (typeof navigationInstance.blades.value[index]?.onClose === "function") {
+          navigationInstance.blades.value[index]?.onClose?.();
         }
-        blades.value.splice(index);
+
+        navigationInstance.blades.value.splice(index);
       }
     }
   }
 
   async function addBlade(
-    blade: ExtendedComponent,
+    blade: BladeConstructor,
     param: string,
-    bladeOptions: Record<string, unknown>,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    options: Record<string, any>,
     onOpen: () => void,
     onClose: () => void,
-    index: number
+    index?: number
   ) {
-    if (blades.value.length > index) {
+    if (index && navigationInstance.blades.value.length > index) {
       await closeBlade(index);
     }
 
     if (blade && checkPermission(blade.permissions)) {
-      blades.value.push({
-        component: shallowRef(blade),
-        bladeOptions,
+      navigationInstance.blades.value.push({
+        blade: markRaw(blade),
+        options,
         param,
         onOpen,
         onClose,
@@ -140,8 +172,9 @@ export function useBladeNavigation(): IUseBladeNavigation {
         onOpen();
       }
     } else {
-      // TODO temporary access alert
-      alert("Access restricted");
+      notification.error("Access restricted", {
+        timeout: 3000,
+      });
     }
   }
 
@@ -149,7 +182,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     console.debug(`vc-app#onParentCall(${index}, { method: ${args.method} }) called.`);
 
     if (index >= 0) {
-      const currentParent = unref(bladesRefs.value[index]);
+      const currentParent = unref(navigationInstance.bladesRefs.value[index]);
 
       if (currentParent) {
         if (args.method && typeof currentParent.exposed[args.method] === "function") {
@@ -159,7 +192,6 @@ export function useBladeNavigation(): IUseBladeNavigation {
             args.callback(result);
           }
         } else {
-          // TODO temporary alert
           console.error(`No such method: ${args.method}.`);
         }
       }
@@ -170,15 +202,18 @@ export function useBladeNavigation(): IUseBladeNavigation {
     history.pushState({}, null, "#" + params);
   }
 
-  function findBlade(blade: ExtendedComponent) {
-    return blades.value.find((x) => _.isEqual(x.component, blade));
+  async function clearParentData() {
+    nextTick(() => {
+      parentBladeOptions.value = undefined;
+      parentBladeParam.value = undefined;
+    });
   }
 
   return {
-    blades: computed(() => blades.value),
+    blades: computed(() => navigationInstance.blades.value),
     parentBladeOptions: computed(() => parentBladeOptions.value),
     parentBladeParam: computed(() => parentBladeParam.value),
-    bladesRefs,
+    bladesRefs: navigationInstance.bladesRefs,
     openBlade,
     closeBlade,
     onParentCall,

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

@@ -1,15 +1,4 @@
-import { createModule } from "../../../core/plugins/modularity";
-import * as components from "./components";
-
-// Declare globally
-declare module "@vue/runtime-core" {
-  export interface GlobalComponents {
-    VcBladeNavigation: (typeof components)["VcBladeNavigation"];
-  }
-}
-
-export const VcBladeNavigationComponent = createModule(components);
-
+export * from "./plugin";
 export * from "./components";
 export * from "./composables";
 export * from "./types";

package/shared/components/blade-navigation/plugin.ts

@@ -0,0 +1,33 @@
+import { App, ref } from "vue";
+import { createModule } from "./../../../core/plugins";
+import * as components from "./components";
+import { BladeNavigationPlugin, IBladeContainer, IBladeRef } from "./types";
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    VcBladeNavigation: (typeof components)["VcBladeNavigation"];
+  }
+}
+
+export let bladeNavigationInstance: BladeNavigationPlugin;
+
+export const VcBladeNavigationComponent = {
+  install(app: App) {
+    // Register components
+    createModule(components).install(app);
+
+    // Plugin
+    const blades = ref<IBladeContainer[]>([]);
+    const bladesRefs = ref<IBladeRef[]>([]);
+
+    const bladeNavigationPlugin: BladeNavigationPlugin = {
+      blades,
+      bladesRefs,
+    };
+
+    app.config.globalProperties.$bladeNavigationPlugin = bladeNavigationPlugin;
+    app.provide("bladeNavigationPlugin", bladeNavigationPlugin);
+    bladeNavigationInstance = bladeNavigationPlugin;
+  },
+};

package/shared/components/blade-navigation/types/index.ts

@@ -1,57 +1,80 @@
-import { Component, ComponentPublicInstance, VNode } from "vue";
-import { IMenuItems } from "../../../../core/types";
-import { NavigationFailure } from "vue-router";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComponentPublicInstance, VNode, ComponentInternalInstance, VNodeTypes, Ref } from "vue";
+import { PushNotification } from "./../../../../core/api";
 
-/* onParentCall event interface */
-export interface IParentCallArgs {
-  method: string;
-  args?: unknown;
-  callback?: (args: unknown) => void;
-}
+export type BladeInstanceConstructor<T extends ComponentPublicInstance = any> = {
+  new (...args: any[]): T & { $: ComponentInternalInstance & { exposed: CoreBladeExposed & T["$"]["exposed"] } } & {
+    $props: T["$props"] & CoreBladeComponentProps;
+  };
+} & CoreBladeAdditionalSettings &
+  CoreBladeNavigationData;
+
+export type ComponentInstanceConstructor<T = any> = {
+  new (...args: any[]): T;
+};
+
+export type CoreBladeComponentProps = {
+  expanded?: boolean;
+  closable?: boolean;
+  param?: string;
+  options?: Record<string, any>;
+};
+
+export type BladePageComponent = BladeConstructor;
 
-/* extended component */
-export type ExtendedComponent = (VNode | Component) & {
+export type CoreBladeAdditionalSettings = {
   url?: string;
   permissions?: string | string[];
-  idx?: number;
+  scope?: {
+    notificationClick?: (notification: PushNotification | Record<string, any>) => IBladeEvent;
+  };
 };
 
-/* blade interface for navigation */
-export interface IBladeContainer extends IBladeEvent {
+export type CoreBladeNavigationData = {
   idx?: number;
-}
+};
 
-/* blade exposed methods */
-export interface IBladeElement extends ComponentPublicInstance {
-  onBeforeClose?: () => Promise<boolean>;
+export interface CoreBladeExposed {
   title?: string;
+  notificationClick?: (notification: PushNotification) => IBladeEvent;
+  onBeforeClose?: () => Promise<boolean>;
   reloadParent?: () => void;
-  openDashboard?: () => void;
+  reload?: () => void;
 }
 
-/* emitted blade event */
-export interface IBladeEvent {
-  parentBlade?: ExtendedComponent;
-  component?: ExtendedComponent;
-  bladeOptions?: Record<string, unknown>;
-  param?: string;
-  onOpen?: () => void;
-  onClose?: () => void;
+export interface IParentCallArgs {
+  method: string;
+  args?: unknown;
+  callback?: (args: unknown) => void;
 }
 
-/* menu item event */
-export interface IMenuClickEvent {
-  item: IMenuItems;
-  navigationCb: () => Promise<void | NavigationFailure>;
+export interface IBladeContainer extends IBladeEvent {
+  idx?: number;
 }
 
-/* openBlade args interface */
-export interface IOpenBlade extends IBladeEvent {
-  id?: number;
-  navigationCb?: () => Promise<void | NavigationFailure>;
+export interface BladeComponentInternalInstance extends ComponentInternalInstance {
+  vnode: VNode & { type: VNodeTypes & CoreBladeAdditionalSettings & CoreBladeNavigationData };
+}
+
+export type ExtractedBladeOptions<T, U extends keyof T> = T[U];
+
+export type BladeConstructor<T extends ComponentPublicInstance = ComponentPublicInstance> = BladeInstanceConstructor<T>;
+
+export interface IBladeEvent<T extends ComponentPublicInstance = ComponentPublicInstance> {
+  blade?: BladeConstructor<T>;
+  options?: ExtractedBladeOptions<InstanceType<BladeConstructor<T>>["$props"], "options">;
+  param?: string;
+  onOpen?: () => void;
+  onClose?: () => void;
 }
 
 export interface IBladeRef {
-  exposed: IBladeElement;
+  exposed: CoreBladeExposed;
   blade: IBladeContainer;
+  expanded?: boolean;
+}
+
+export interface BladeNavigationPlugin {
+  blades: Ref<IBladeContainer[]>;
+  bladesRefs: Ref<IBladeRef[]>;
 }