@vc-shell/framework 1.0.71 → 1.0.73

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

@@ -11,7 +11,7 @@ import {
   nextTick,
 } from "vue";
 import * as _ from "lodash-es";
-import { useRouter, useRoute } from "vue-router";
+import { useRouter, RouteLocationNormalized } from "vue-router";
 import { usePermissions } from "../../../../../core/composables";
 import {
   IBladeContainer,
@@ -22,98 +22,136 @@ import {
   BladeComponentInternalInstance,
   BladeNavigationPlugin,
   notification,
+  BladePageComponent,
 } from "../../../..";
 import { bladeNavigationInstance } from "./../../plugin";
+import pattern from "url-pattern";
+import { useLocalStorage } from "@vueuse/core";
 
+interface BladeData {
+  blade?: string;
+  param?: string;
+  options?: string;
+}
 interface IUseBladeNavigation {
   readonly blades: Ref<IBladeContainer[]>;
-  readonly parentBladeOptions: Ref<Record<string, unknown>>;
-  readonly parentBladeParam: Ref<string>;
+  readonly workspaceOptions: Ref<Record<string, unknown>>;
+  readonly workspaceParam: Ref<string>;
+  readonly lastBladeData: Ref<BladeData>;
   bladesRefs: Ref<IBladeRef[]>;
-  openBlade: <Blade extends ComponentPublicInstance = ComponentPublicInstance>({
-    blade,
-    param,
-    options,
-    onOpen,
-    onClose,
-  }: IBladeEvent<Blade>) => void;
+  openBlade: <Blade extends ComponentPublicInstance = ComponentPublicInstance>(
+    { blade, param, options, onOpen, onClose }: IBladeEvent<Blade>,
+    isWorkspace?: boolean
+  ) => void;
   closeBlade: (index: number) => Promise<boolean>;
   onParentCall: (index: number, args: IParentCallArgs) => void;
+  /**
+   * Resolves blades from vue-router's navigation guard 'to' param. Used to display blades after page reload or accessing via direct link.
+   * Returns a string containing the URL of the latest opened workspace.
+   * @param to
+   * @returns string
+   */
+  resolveBlades: (to: RouteLocationNormalized) => string;
+  resolveLastBlade: (pages: BladePageComponent[]) => void;
+  resolveUnknownRoutes: (to: RouteLocationNormalized) => string;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const parentBladeOptions: Ref<Record<string, any>> = ref();
-const parentBladeParam: Ref<string> = ref();
+const workspaceOptions: Ref<Record<string, any>> = ref();
+const workspaceParam: Ref<string> = ref();
+
+const lastBladeData = useLocalStorage<BladeData>("VC_BLADE_DATA", {});
 
 export function useBladeNavigation(): IUseBladeNavigation {
   const router = useRouter();
-  const route = useRoute();
+  const urlPattern = new pattern("(/:workspace(/:blade(/:param)))");
   const { checkPermission } = usePermissions();
   const isPrevented = ref(false);
+  const routes = router.getRoutes();
 
   const instance: BladeComponentInternalInstance = getCurrentInstance();
   const navigationInstance =
     (instance && inject<BladeNavigationPlugin>("bladeNavigationPlugin")) || bladeNavigationInstance;
 
   watch(
-    navigationInstance.blades,
+    navigationInstance?.blades,
     (newVal) => {
-      const lastBlade = newVal[newVal.length - 1];
+      if (newVal) {
+        const workspace = navigationInstance.bladesRefs.value[0]?.blade;
+        const lastBlade = newVal[newVal.length - 1];
 
-      if (lastBlade && lastBlade.blade.url) {
-        if (lastBlade.param) {
-          addEntryToLocation(lastBlade.blade.url + "/" + lastBlade.param);
-        } else {
-          addEntryToLocation(lastBlade.blade.url);
+        if (workspace && workspace.blade.url) {
+          if (lastBlade && lastBlade.blade.url) {
+            const url = urlPattern.stringify({
+              workspace: workspace?.blade.url.substring(1),
+              blade: lastBlade?.blade.url.substring(1),
+              param: lastBlade?.param,
+            });
+
+            addEntryToLocation(url);
+          } else {
+            const url = workspace?.blade.url;
+            if (url) {
+              clearParentData();
+              addEntryToLocation(url);
+            }
+          }
         }
-      } else if (!lastBlade) {
-        clearParentData();
-        addEntryToLocation(route.path);
       }
     },
     { deep: true }
   );
 
-  async function openBlade<Blade extends ComponentPublicInstance>({
-    blade,
-    param,
-    options,
-    onOpen,
-    onClose,
-  }: IBladeEvent<Blade>) {
-    const caller = instance && instance.vnode.type;
+  async function openWorkspace({ blade, param, options }: IBladeEvent) {
+    await closeBlade(0);
 
     const bladeComponent = unref(blade);
+
+    if (!isPrevented.value) {
+      workspaceOptions.value = unref(options);
+      workspaceParam.value = unref(param);
+
+      await router.replace(bladeComponent.url);
+    }
+  }
+
+  async function openBlade<Blade extends ComponentPublicInstance>(
+    { blade, param, options, onOpen, onClose }: IBladeEvent<Blade>,
+    isWorkspace = false
+  ) {
+    if (isWorkspace) {
+      openWorkspace({ blade, param, options });
+      return;
+    }
+
+    // caller blade component from instance
+    const instanceComponent = instance && instance.vnode.type;
+
+    // Caller blade index in blades array
     const callerIndex = navigationInstance.bladesRefs.value.findIndex((item) => {
-      return _.isEqual(item.blade.blade, caller);
+      return _.isEqual(item.blade.blade, instanceComponent);
     });
-    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);
+    // Trying to determine if the calling blade already has a child in order to replace it
+    const isBladeAlreadyExist =
+      callerIndex >= 0 ? navigationInstance.bladesRefs.value[callerIndex + 1]?.blade.blade : undefined;
 
-    if (!initiator && bladeComponent.url) {
-      await closeBlade(0);
+    // Blade we want to open
+    const bladeComponent = unref(blade);
 
-      if (!isPrevented.value) {
-        parentBladeOptions.value = unref(options);
-        parentBladeParam.value = unref(param);
+    // Check if caller blade has idx
+    const index = instanceComponent?.idx ? instanceComponent.idx : 0;
 
-        await router.push(bladeComponent.url);
-      }
-    } else {
-      if (existingChild === undefined) {
-        bladeComponent.idx = index ? index + 1 : 1;
-      } else if (existingChild) {
-        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);
-      }
+    if (isBladeAlreadyExist === undefined) {
+      bladeComponent.idx = index ? index + 1 : 1;
+    } else if (isBladeAlreadyExist) {
+      await closeBlade(
+        navigationInstance.blades.value.findIndex((x: IBladeContainer) => x.idx === isBladeAlreadyExist.idx)
+      );
+      bladeComponent.idx = isBladeAlreadyExist.idx;
+    }
+    if (!isPrevented.value) {
+      await addBlade(bladeComponent, param, options, onOpen, onClose, index);
     }
   }
 
@@ -136,8 +174,9 @@ export function useBladeNavigation(): IUseBladeNavigation {
         }
       }
       if (!isPrevented.value) {
-        if (typeof navigationInstance.blades.value[index]?.onClose === "function") {
-          navigationInstance.blades.value[index]?.onClose?.();
+        const blade = navigationInstance.blades.value[index];
+        if (typeof blade?.onClose === "function") {
+          blade?.onClose?.();
         }
 
         navigationInstance.blades.value.splice(index);
@@ -199,23 +238,70 @@ export function useBladeNavigation(): IUseBladeNavigation {
   }
 
   function addEntryToLocation(params: string) {
-    history.pushState({}, null, "#" + params);
+    history.replaceState({}, null, "#" + params);
   }
 
   async function clearParentData() {
     nextTick(() => {
-      parentBladeOptions.value = undefined;
-      parentBladeParam.value = undefined;
+      workspaceOptions.value = undefined;
+      workspaceParam.value = undefined;
     });
   }
 
+  function resolveBlades(to: RouteLocationNormalized) {
+    const data = urlPattern.match(to.path);
+
+    const resolvedRoute = (bladeUrl: string) => routes.find((r) => r.path === "/" + bladeUrl);
+
+    if (resolvedRoute(data?.workspace) && to.path !== "/" + data.workspace) {
+      if (resolvedRoute(data?.blade)) {
+        lastBladeData.value = {
+          blade: "/" + data?.blade,
+          param: data?.param,
+        };
+      }
+
+      return "/" + data.workspace;
+    }
+  }
+
+  function resolveUnknownRoutes(to: RouteLocationNormalized) {
+    if (routes.find((r) => r.path !== to.path)) {
+      closeBlade(0);
+      return "/";
+    }
+  }
+
+  function clearSavedBladeData() {
+    lastBladeData.value = {};
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async function setParentData({ param, options }: { param?: string; options?: Record<string, any> }) {
+    workspaceOptions.value = options;
+    workspaceParam.value = param;
+  }
+
+  function resolveLastBlade(pages: BladePageComponent[]) {
+    if (lastBladeData.value?.blade) {
+      const blade = pages?.find((b) => b.url === lastBladeData.value?.blade);
+      setParentData({ param: lastBladeData.value?.param });
+      openBlade({ blade, param: lastBladeData.value?.param });
+      clearSavedBladeData();
+    }
+  }
+
   return {
     blades: computed(() => navigationInstance.blades.value),
-    parentBladeOptions: computed(() => parentBladeOptions.value),
-    parentBladeParam: computed(() => parentBladeParam.value),
+    workspaceOptions: computed(() => workspaceOptions.value),
+    workspaceParam: computed(() => workspaceParam.value),
+    lastBladeData: computed(() => lastBladeData.value),
     bladesRefs: navigationInstance.bladesRefs,
     openBlade,
     closeBlade,
     onParentCall,
+    resolveBlades,
+    resolveUnknownRoutes,
+    resolveLastBlade,
   };
 }

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

@@ -23,7 +23,7 @@ export type CoreBladeComponentProps = {
 export type BladePageComponent = BladeConstructor;
 
 export type CoreBladeAdditionalSettings = {
-  url?: string;
+  url?: `/${string}`;
   permissions?: string | string[];
   scope?: {
     notificationClick?: (notification: PushNotification | Record<string, any>) => IBladeEvent;

package/shared/pages/LoginPage/components/login/Login.vue

@@ -176,7 +176,7 @@ import { useRouter } from "vue-router";
 import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
 import { useSettings, useUser } from "./../../../../../core/composables";
 import { RequestPasswordResult, SignInResults } from "./../../../../../core/types";
-import { CommonPageComposables } from "typings";
+import { CommonPageComposables } from "./../../../../../typings";
 import { asyncComputed } from "@vueuse/core";
 import AzureAdIcon from "./../../../../../assets/img/AzureAd.svg";
 

package/ui/components/atoms/vc-link/vc-link.stories.ts

@@ -18,7 +18,6 @@ export const Primary: Story = {
     template: '<vc-link v-bind="args">This is a link</vc-link>',
   }),
   args: {
-    to: undefined,
     active: false,
     disabled: false,
   },

package/ui/components/atoms/vc-link/vc-link.vue

@@ -6,7 +6,7 @@
       'tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] hover:tw-text-[color:var(--link-text-color-disabled)] tw-no-underline':
         disabled,
     }"
-    @click="onClick"
+    @click="onClickFn"
   >
     <slot></slot>
   </div>
@@ -26,7 +26,7 @@ export interface Emits {
 const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
-function onClick(): void {
+function onClickFn(): void {
   if (!props.disabled) {
     emit("click");
   }

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

@@ -202,7 +202,7 @@
         <div
           v-if="isOpened"
           ref="dropdownRef"
-          v-on-click-outside="closeDropdown"
+          v-on-click-outside="[toggleDropdown, { ignore: [dropdownToggleRef] }]"
           class="tw-flex tw-flex-col tw-box-border tw-max-h-[300px] tw-h-auto tw-z-10 tw-overflow-hidden tw-absolute tw-bg-[color:var(--select-background-color)] tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-border-t-[color:var(--select-background-color)] tw-rounded-b-[var(--select-border-radius)] tw-p-2"
           :style="dropdownStyle"
         >
@@ -251,7 +251,7 @@
 </template>
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup generic="T extends Record<string, any>, P extends {results?: T[]; totalCount?: number }">
+<script lang="ts" setup generic="T, P extends {results?: T[]; totalCount?: number }">
 import { ref, computed, watch, toRefs, nextTick, Ref } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import * as _ from "lodash-es";
@@ -272,7 +272,7 @@ type FloatingInstanceType = UseFloatingReturn & {
   };
 };
 
-type Option = T | P["results"][number];
+type Option = T & P["results"][number];
 
 defineSlots<{
   /**
@@ -882,10 +882,10 @@ function onInput(e: Event) {
   }
 
   const newValue = (e.target as HTMLInputElement).value;
-  emitValue(newValue);
+  emitValueFunc(newValue);
 }
 
-function emitValue(val: string) {
+function emitValueFunc(val: string) {
   emitValueFn = () => {
     emit("search", val);
     onSearch(val);

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="tw-relative tw-flex tw-items-center tw-content-between tw-h-[var(--app-bar-height)] tw-bg-[color:var(--app-bar-background-color)] tw-px-4"
+    :class="{ '!tw-pr-0 !tw-pl-[10px]': $isMobile.value }"
   >
     <slot name="appSwitcher"></slot>
 

package/ui/components/organisms/vc-app/vc-app.vue

@@ -109,9 +109,12 @@ const onMenuItemClick = function ({ item }: { item: BladeMenu }) {
   if (item.clickHandler && typeof item.clickHandler === "function") {
     item.clickHandler(instance?.exposed);
   } else {
-    openBlade({
-      blade: markRaw(item.component),
-    });
+    openBlade(
+      {
+        blade: markRaw(item.component),
+      },
+      true
+    );
   }
 };
 

package/dist/injectionSymbols.d.ts

@@ -1,6 +0,0 @@
-import { NotificationTemplateConstructor } from "./core/types";
-import { BladePageComponent } from "./shared/components/blade-navigation/types";
-import { InjectionKey } from "vue";
-export declare const pagesSymbol: InjectionKey<BladePageComponent[]>;
-export declare const notificationTemplatesSymbol: InjectionKey<NotificationTemplateConstructor[]>;
-//# sourceMappingURL=injectionSymbols.d.ts.map

package/dist/injectionSymbols.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"injectionSymbols.d.ts","sourceRoot":"","sources":["../injectionSymbols.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,+BAA+B,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC;AAEnC,eAAO,MAAM,WAAW,oCAAwD,CAAC;AACjF,eAAO,MAAM,2BAA2B,iDAEvC,CAAC"}