@vc-shell/framework 1.1.0-alpha.1 → 1.1.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.1.0-alpha.1",
+  "version": "1.1.0-alpha.2",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -28,7 +28,8 @@
     "build:lib": "vite build",
     "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist",
     "type-check": "vue-tsc --noEmit",
-    "generate-icons": "tsx scripts/generate-icons.mts"
+    "generate-icons": "tsx scripts/generate-icons.mts",
+    "check-locales": "tsx scripts/check-locales.mts"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.6",
@@ -61,13 +62,14 @@
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "^1.1.0-alpha.1",
-    "@vc-shell/config-generator": "^1.1.0-alpha.1",
-    "@vc-shell/ts-config": "^1.1.0-alpha.1",
+    "@vc-shell/api-client-generator": "^1.1.0-alpha.2",
+    "@vc-shell/config-generator": "^1.1.0-alpha.2",
+    "@vc-shell/ts-config": "^1.1.0-alpha.2",
     "@vitejs/plugin-vue": "5.0.3",
     "cypress-signalr-mock": "^1.5.0",
     "sass": "^1.69.6",
     "shx": "^0.3.4",
+    "tsc-alias": "^1.8.8",
     "tsx": "^4.7.1",
     "typescript": "~5.3.3",
     "vite": "5.3.6",
@@ -78,5 +80,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "stableVersion": "1.0.327"
+  "stableVersion": "1.0.340"
 }

package/shared/components/app-switcher/components/vc-app-switcher/index.ts

@@ -1 +1 @@
-export { default as VcAppSwitcher } from "./vc-app-switcher.vue";
+export { default as VcAppSwitcher } from "./vc-app-switcher.vue";

package/shared/components/app-switcher/components/vc-app-switcher/vc-app-switcher.vue

@@ -5,11 +5,11 @@
     class="vc-app-switcher"
     @contextmenu.prevent
   >
+
     <GenericDropdown
-      :opened="true"
       :items="appsList"
       :is-item-active="(item) => locationHandler(item.relativeUrl ?? '')"
-      :on-item-click="switchApp"
+      @item:click="switchApp"
     >
       <template #item="{ item }">
         <div class="vc-app-switcher__item">

package/shared/components/blade-navigation/components/vc-blade-navigation/_internal/vc-mobile-back-button.vue

@@ -0,0 +1,77 @@
+<template>
+  <VcBreadcrumbs
+    v-on-click-outside="hideBreadcrumbs"
+    :items="breadcrumbs"
+  >
+    <template #trigger="{ click }">
+      <OnLongPress
+        as="button"
+        @trigger="click"
+      >
+        <VcButton
+          ref="buttonRef"
+          :icon="ArrowLeftIcon"
+          icon-class="tw-text-[color:var(--neutrals-500)]"
+          icon-size="s"
+          text
+          @click="onClick"
+          @contextmenu.prevent
+        />
+      </OnLongPress>
+    </template>
+  </VcBreadcrumbs>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { onLongPress } from "@vueuse/core";
+import { VcButton, ArrowLeftIcon } from "../../../../../../ui/components";
+import VcBreadcrumbs from "../../../../../../ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.vue";
+import type { Breadcrumbs } from "../../../../../../ui/types";
+import { OnLongPress, vOnClickOutside } from "@vueuse/components";
+
+const props = defineProps<{
+  breadcrumbs: Breadcrumbs[];
+  onBack: () => void;
+}>();
+
+const buttonRef = ref<HTMLElement>();
+const showBreadcrumbs = ref(false);
+
+const onClick = () => {
+  props.onBack();
+};
+
+onLongPress(
+  buttonRef,
+  () => {
+    showBreadcrumbs.value = true;
+  },
+  { delay: 500 },
+);
+
+const hideBreadcrumbs = () => {
+  showBreadcrumbs.value = false;
+};
+</script>
+
+<style lang="scss">
+.vc-mobile-back-button {
+  position: relative;
+
+  &__breadcrumbs {
+    position: fixed;
+    z-index: 1000;
+    background: var(--additional-50);
+    border-radius: var(--blade-navigation-border-radius);
+    box-shadow: var(--blade-navigation-shadow);
+    padding: 0.5rem;
+
+    &-button {
+      &--active {
+        background-color: var(--neutrals-100);
+      }
+    }
+  }
+}
+</style>

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

@@ -1,17 +1,15 @@
 <template>
   <div class="tw-w-full tw-flex tw-flex-col tw-grow tw-basis-0">
-    <VcBreadcrumbs
-      v-if="blades && blades.length > 2"
+    <!-- <VcBreadcrumbs
       :items="breadcrumbs"
-      class="tw-bg-[--blade-navigation-bg-color] tw-p-2"
+      class="tw-bg-[--blade-navigation-bg-color] tw-px-3 tw-py-2"
       :class="[
         {
           'tw-p-4': $isMobile.value,
         },
       ]"
-      variant="light"
       with-arrow
-    />
+    /> -->
     <render></render>
   </div>
 </template>
@@ -25,6 +23,8 @@ import VcBreadcrumbs from "./../../../../../ui/components/molecules/vc-breadcrum
 import { useBreadcrumbs } from "./../../../../../core/composables/useBreadcrumbs";
 import { VcBladeView } from "./../vc-blade-view/vc-blade-view";
 import { watchDebounced } from "@vueuse/core";
+import { VcButton, ArrowLeftIcon } from "./../../../../../ui/components";
+import VcMobileBackButton from "./_internal/vc-mobile-back-button.vue";
 
 const { blades, closeBlade, onParentCall } = useBladeNavigation();
 const { breadcrumbs, push, remove } = useBreadcrumbs();
@@ -78,6 +78,8 @@ const render = () => {
           const hiddenQuantity = blades.value.filter(
             (x) => x.props.navigation.isVisible === false && x.props.navigation.idx < index,
           ).length;
+
+          const filteredBreadcrumbs = breadcrumbs.value.slice(0, index);
           arr.push(
             h(
               ErrorInterceptor,
@@ -98,6 +100,16 @@ const render = () => {
                         blade: bladeVNode,
                         expandable: quantity.value > 1,
                         error,
+                        breadcrumbs: filteredBreadcrumbs,
+                        backButton:
+                          quantity.value > 1
+                            ? h(VcMobileBackButton, {
+                                breadcrumbs: filteredBreadcrumbs,
+                                onBack: () => {
+                                  closeBlade(index);
+                                },
+                              })
+                            : undefined,
                       },
                       {
                         default: ({ Component }: { Component: BladeVNode }) => {

package/shared/components/blade-navigation/components/vc-blade-view/vc-blade-view.ts

@@ -1,7 +1,8 @@
-import { Slot, defineComponent, h, provide, ref, VNode, PropType, Component, reactive, computed } from "vue";
-import { navigationViewLocation } from "./../../injectionKeys";
+import { Slot, defineComponent, h, provide, ref, VNode, PropType, Component, reactive, computed, toRefs } from "vue";
+import { BladeInstance, navigationViewLocation, BLADE_BACK_BUTTON } from "./../../../../../injection-keys";
 import { BladeVNode, CoreBladeExposed } from "../../types";
 import { toRef, watchTriggerable } from "@vueuse/core";
+import { Breadcrumbs } from "../../../../..";
 
 export const VcBladeView = defineComponent({
   name: "BladeView",
@@ -16,12 +17,20 @@ export const VcBladeView = defineComponent({
     error: {
       type: String,
     },
+    breadcrumbs: {
+      type: Array as PropType<Breadcrumbs[]>,
+    },
+    backButton: {
+      type: Object as PropType<Component>,
+      default: undefined,
+    },
   },
   setup(props, { attrs, slots }) {
     const maximized = ref(false);
     const viewRef = ref<CoreBladeExposed>();
 
     const bl = toRef(props.blade);
+    const { backButton } = toRefs(props);
 
     const { trigger } = watchTriggerable(
       () => [viewRef.value, bl.value] as const,
@@ -39,14 +48,17 @@ export const VcBladeView = defineComponent({
       },
       { flush: "sync" },
     );
-
     provide(navigationViewLocation, bl.value!);
+    provide(BLADE_BACK_BUTTON, backButton);
     provide(
-      "$blade",
+      BladeInstance,
       computed(() => ({
+        id: bl.value?.type.name ?? "fallback-blade-id",
         expandable: props.expandable,
         maximized: maximized.value,
         error: props.error,
+        navigation: bl.value?.props?.navigation,
+        breadcrumbs: props.breadcrumbs,
       })),
     );
     return () => {

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

@@ -10,6 +10,8 @@ import {
   RouteParams,
   Router,
   LocationQuery,
+  RouteParamsGeneric,
+  RouteRecordNameGeneric,
 } from "vue-router";
 import { bladeNavigationInstance } from "../../plugin";
 import {
@@ -22,7 +24,7 @@ import {
   BladeRoutesRecord,
   ExtractedBladeOptions,
 } from "../../types";
-import { navigationViewLocation } from "../../injectionKeys";
+import { navigationViewLocation } from "../../../../../injection-keys";
 import { useAppInsights, usePermissions } from "../../../../../core/composables";
 import { notification } from "./../../../notifications";
 import "core-js/actual/array/find-last";
@@ -37,6 +39,10 @@ interface IUseBladeNavigation {
     isWorkspace?: boolean,
   ) => Promise<void | NavigationFailure>;
   closeBlade: (index: number) => Promise<boolean>;
+  goToRoot: () => {
+    name: RouteRecordNameGeneric;
+    params: RouteParamsGeneric;
+  };
   onParentCall: (parentExposedMethods: Record<string, any>, args: IParentCallArgs) => void;
   onBeforeClose: (cb: () => Promise<boolean | undefined>) => void;
   resolveBladeByName: (name: string) => BladeInstanceConstructor;
@@ -91,9 +97,8 @@ const utils = (router: Router) => {
 
   function parseWorkspaceUrl(path: string): string {
     // Object.values(route.params)[0] will always be base path of the app
-    if (!mainRouteBaseParamURL.value) {
-      mainRouteBaseParamURL.value = "/" + (Object.values(route.params)?.[0] ?? "");
-    }
+    mainRouteBaseParamURL.value = "/" + (Object.values(route.params)?.[0] ?? "");
+
     const pathWithoutBase = path.startsWith(mainRouteBaseParamURL.value)
       ? path.slice(mainRouteBaseParamURL.value.length)
       : path;
@@ -263,8 +268,10 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
           prevBlade.props.navigation.isVisible = true;
         }
 
+        // Clear param of table blade when closing child blade to prevent table row selection from being preserved
         if (
           prevBlade &&
+          prevBlade.props.navigation.idx === 0 &&
           toValue(prevBlade.props?.param) === toValue(navigationInstance.blades.value[index]?.props?.param)
         ) {
           prevBlade.props.param = undefined;
@@ -296,6 +303,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
   const instance = getCurrentInstance() as BladeComponentInternalInstance;
 
   const { router, route, navigationInstance, closeBlade, setupPageTracking } = useBladeNavigationSingleton();
+
   const { parseUrl, getURLQuery, routes: routerRoutes } = utils(router);
   const mainRoute = routerRoutes.find((r) => r.meta?.root);
   if (!mainRoute) {
@@ -346,6 +354,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
           if (wsroute && wsroute.components) {
             wsroute.components.default = createdComponent;
           }
+
           return await router.push({
             name: wsroute?.name,
             params: { ...params, ...route.params },
@@ -645,6 +654,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     blades: computed(() => navigationInstance.blades.value),
     openBlade,
     closeBlade,
+    goToRoot,
     onParentCall,
     resolveBladeByName,
     routeResolver,

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

@@ -1,107 +1,117 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Router } from "vue-router";
-import {
-  AppContext,
-  Component,
-  ComponentOptionsBase,
-  ComponentOptionsMixin,
-  VNode,
-  ComponentInternalInstance,
-  VNodeTypes,
-  Ref,
-} from "vue";
-import { ComponentPublicInstanceConstructor } from "../../../utilities/vueUtils";
-import { MenuItemConfig } from "../../../../core/types";
-
-export type CoreBladeComponentProps = {
-  expanded?: boolean;
-  closable?: boolean;
-  param?: string;
-  options?: Record<string, any>;
-};
-
-export type CoreDynamicBladeComponentProps = {
-  model?: any;
-  composables?: any;
-};
-
-export type CoreBladeAdditionalSettings = {
-  url?: `/${string}`;
-  routable?: boolean;
-  permissions?: string | string[];
-  isWorkspace?: boolean;
-  isBlade?: boolean;
-  name?: string;
-  menuItem?: MenuItemConfig;
-};
-export interface CoreBladeExposed {
-  [x: string]: any;
-  title?: string;
-  reloadParent?: () => void;
-  reload?: () => void;
-}
-
-export interface IParentCallArgs {
-  method: keyof CoreBladeExposed;
-  args?: unknown;
-  callback?: (args: unknown) => void;
-}
-
-export interface BladeComponentInternalInstance extends ComponentInternalInstance {
-  vnode: VNode & BladeVNode;
-  appContext: AppContext & { components: Record<string, BladeInstanceConstructor> };
-}
-
-export type ExtractedBladeOptions<T, U extends keyof T> = T[U];
-
-type Extractor<T> = Extract<T, ComponentPublicInstanceConstructor>;
-
-export type BladeInstanceConstructor<T extends Component = Component> = Extractor<T> & {
-  new (...args: any[]): InstanceType<Extractor<T>> & {
-    $: ComponentInternalInstance & {
-      exposed: CoreBladeExposed | InstanceType<Extractor<T>>["$"]["exposed"];
-    };
-    $props: InstanceType<Extractor<T>>["$props"] & CoreBladeComponentProps;
-  };
-} & ComponentOptionsBase<any, any, any, any, ComponentOptionsMixin, ComponentOptionsMixin, any, any, any> &
-  CoreBladeAdditionalSettings;
-
-export interface IBladeEvent<T extends Component = Component> {
-  blade: BladeInstanceConstructor<T>;
-  options?: ExtractedBladeOptions<InstanceType<BladeInstanceConstructor<T>>["$props"], "options">;
-  param?: string;
-  onOpen?: () => void;
-  onClose?: () => void;
-  replaceCurrentBlade?: boolean;
-}
-
-export interface BladeNavigationPlugin {
-  router: Router;
-  internalRoutes: BladeRoutesRecord[];
-  blades: Ref<BladeVNode[]>;
-}
-
-export interface BladeRoutesRecord {
-  component: BladeVNode;
-  name: string;
-  isWorkspace: boolean;
-  route: string;
-}
-
-type VNodeMountHook = (vnode: BladeVNode | VNode) => void;
-export interface BladeVNode extends VNode {
-  props: {
-    navigation: {
-      onOpen?: () => void;
-      onClose?: () => void;
-      onBeforeClose?: () => Promise<boolean | undefined>;
-      instance: CoreBladeExposed | undefined | null;
-      idx: number;
-      isVisible?: boolean;
-    };
-    onVnodeUnmounted?: VNodeMountHook | VNodeMountHook[];
-    onVnodeMounted?: VNodeMountHook | VNodeMountHook[];
-  } & Omit<VNode["props"], "onVnodeUnmounted" | "onVnodeMounted"> &
-    CoreBladeComponentProps;
-  type: VNodeTypes & BladeInstanceConstructor;
-}
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Router } from "vue-router";
+import {
+  AppContext,
+  Component,
+  ComponentOptionsBase,
+  ComponentOptionsMixin,
+  VNode,
+  ComponentInternalInstance,
+  VNodeTypes,
+  Ref,
+} from "vue";
+import { ComponentPublicInstanceConstructor } from "../../../utilities/vueUtils";
+import { MenuItemConfig } from "../../../../core/types";
+import { Breadcrumbs } from "../../../../ui/types";
+
+export type CoreBladeComponentProps = {
+  expanded?: boolean;
+  closable?: boolean;
+  param?: string;
+  options?: Record<string, any>;
+};
+
+export type CoreDynamicBladeComponentProps = {
+  model?: any;
+  composables?: any;
+};
+
+export type CoreBladeAdditionalSettings = {
+  url?: `/${string}`;
+  routable?: boolean;
+  permissions?: string | string[];
+  isWorkspace?: boolean;
+  isBlade?: boolean;
+  name?: string;
+  menuItem?: MenuItemConfig;
+};
+export interface CoreBladeExposed {
+  [x: string]: any;
+  title?: string;
+  reloadParent?: () => void;
+  reload?: () => void;
+}
+
+export interface IBladeInstance {
+  id: string;
+  expandable: boolean;
+  maximized: boolean;
+  error: string | undefined;
+  navigation: BladeVNode["props"]["navigation"] | undefined;
+  breadcrumbs: Breadcrumbs[] | undefined;
+}
+
+export interface IParentCallArgs {
+  method: keyof CoreBladeExposed;
+  args?: unknown;
+  callback?: (args: unknown) => void;
+}
+
+export interface BladeComponentInternalInstance extends ComponentInternalInstance {
+  vnode: VNode & BladeVNode;
+  appContext: AppContext & { components: Record<string, BladeInstanceConstructor> };
+}
+
+export type ExtractedBladeOptions<T, U extends keyof T> = T[U];
+
+type Extractor<T> = Extract<T, ComponentPublicInstanceConstructor>;
+
+export type BladeInstanceConstructor<T extends Component = Component> = Extractor<T> & {
+  new (...args: any[]): InstanceType<Extractor<T>> & {
+    $: ComponentInternalInstance & {
+      exposed: CoreBladeExposed | InstanceType<Extractor<T>>["$"]["exposed"];
+    };
+    $props: InstanceType<Extractor<T>>["$props"] & CoreBladeComponentProps;
+  };
+} & ComponentOptionsBase<any, any, any, any, ComponentOptionsMixin, ComponentOptionsMixin, any, any, any> &
+  CoreBladeAdditionalSettings;
+
+export interface IBladeEvent<T extends Component = Component> {
+  blade: BladeInstanceConstructor<T>;
+  options?: ExtractedBladeOptions<InstanceType<BladeInstanceConstructor<T>>["$props"], "options">;
+  param?: string;
+  onOpen?: () => void;
+  onClose?: () => void;
+  replaceCurrentBlade?: boolean;
+}
+
+export interface BladeNavigationPlugin {
+  router: Router;
+  internalRoutes: BladeRoutesRecord[];
+  blades: Ref<BladeVNode[]>;
+}
+
+export interface BladeRoutesRecord {
+  component: BladeVNode;
+  name: string;
+  isWorkspace: boolean;
+  route: string;
+}
+
+type VNodeMountHook = (vnode: BladeVNode | VNode) => void;
+export interface BladeVNode extends VNode {
+  props: {
+    navigation: {
+      onOpen?: () => void;
+      onClose?: () => void;
+      onBeforeClose?: () => Promise<boolean | undefined>;
+      instance: CoreBladeExposed | undefined | null;
+      idx: number;
+      isVisible?: boolean;
+    };
+    onVnodeUnmounted?: VNodeMountHook | VNodeMountHook[];
+    onVnodeMounted?: VNodeMountHook | VNodeMountHook[];
+  } & Omit<VNode["props"], "onVnodeUnmounted" | "onVnodeMounted"> &
+    CoreBladeComponentProps;
+  type: VNodeTypes & BladeInstanceConstructor;
+}

package/shared/components/change-password-button/change-password-button.vue

@@ -0,0 +1,20 @@
+<template>
+  <SettingsMenuItem
+    :icon="SettingsBoltIcon"
+    :title="$t('SHELL.ACCOUNT.CHANGE_PASSWORD')"
+    @trigger:click="handleClick"
+  />
+</template>
+
+<script lang="ts" setup>
+import { SettingsMenuItem } from "../settings-menu-item";
+import { SettingsBoltIcon } from "../../../ui/components/atoms/vc-icon/icons";
+import { usePopup } from "../popup-handler/composables/usePopup";
+import { ChangePassword } from "../change-password";
+
+const { open } = usePopup({ component: ChangePassword });
+
+const handleClick = () => {
+  open();
+};
+</script>

package/shared/components/change-password-button/index.ts

@@ -0,0 +1 @@
+export { default as ChangePasswordButton } from './change-password-button.vue';

package/shared/components/common/popup/vc-popup-error.vue

@@ -5,6 +5,12 @@
     :title="title"
     @close="$emit('close')"
   >
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
     <template #content>
       <slot />
     </template>
@@ -35,6 +41,11 @@ export interface Emits {
 defineProps<Props>();
 
 defineEmits<Emits>();
+
+defineSlots<{
+  header: void;
+  default: void;
+}>();
 </script>
 
 <style lang="scss">

package/shared/components/common/popup/vc-popup-info.vue

@@ -5,6 +5,12 @@
     :title="title"
     @close="$emit('close')"
   >
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
     <template #content>
       <slot />
     </template>
@@ -35,6 +41,11 @@ export interface Emits {
 defineProps<Props>();
 
 defineEmits<Emits>();
+
+defineSlots<{
+  header: void;
+  default: void;
+}>();
 </script>
 
 <style lang="scss">

package/shared/components/common/popup/vc-popup-warning.vue

@@ -5,6 +5,12 @@
     :title="title"
     @close="$emit('close')"
   >
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
     <template #content>
       <slot />
     </template>
@@ -38,6 +44,11 @@ export interface Emits {
 defineProps<Props>();
 
 defineEmits<Emits>();
+
+defineSlots<{
+  header: void;
+  default: void;
+}>();
 </script>
 
 <style lang="scss">