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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.340",
+  "version": "1.1.0-alpha.2",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -27,10 +27,13 @@
     "build": "shx rm -rf ./dist && tsx scripts/build.mts",
     "build:lib": "vite build",
     "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "generate-icons": "tsx scripts/generate-icons.mts",
+    "check-locales": "tsx scripts/check-locales.mts"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.6",
+    "@fontsource/plus-jakarta-sans": "^5.1.0",
     "@headlessui/vue": "^1.7.19",
     "@microsoft/signalr": "^8.0.0",
     "@vavt/cm-extension": "^1.5.0",
@@ -59,13 +62,14 @@
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "^1.0.340",
-    "@vc-shell/config-generator": "^1.0.340",
-    "@vc-shell/ts-config": "^1.0.340",
+    "@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",
@@ -75,5 +79,6 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
-  }
+  },
+  "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

@@ -1,70 +1,36 @@
 <template>
-  <button
-    class="vc-app-switcher__button"
-    @click.stop="toggleAppSwitch"
+  <div
+    v-if="appsList && appsList.length"
+    ref="container"
+    class="vc-app-switcher"
+    @contextmenu.prevent
   >
-    <div class="vc-app-switcher__icon"></div>
-  </button>
-  <Sidebar
-    :is-expanded="isVisible"
-    render="always"
-    position="left"
-    @close="onClose"
-  >
-    <template #header>
-      <div
-        class="vc-app-switcher__button-wrap"
-        :class="{
-          'vc-app-switcher__button-wrap--mobile': $isMobile.value,
-        }"
-      >
-        <button
-          class="vc-app-switcher__button vc-app-switcher__button--header"
-          @click.stop="isVisible = false"
-        >
-          <div class="vc-app-switcher__icon"></div>
-        </button>
-        <p class="vc-app-switcher__title">{{ $t("COMPONENTS.APP_SWITCHER.TITLE") }}</p>
-      </div>
-    </template>
-    <template #content>
-      <div
-        v-if="isVisible && appsList && appsList.length"
-        ref="container"
-        class="vc-app-switcher"
-        @contextmenu.prevent
-      >
-        <div class="vc-app-switcher__dropdown">
-          <ul class="vc-app-switcher__list">
-            <li
-              v-for="item in appsList"
-              :key="item.id"
-              class="vc-app-switcher__list-item"
-              :class="{
-                'vc-app-switcher__list-item--active': locationHandler(item.relativeUrl ?? ''),
-              }"
-              @click="switchApp(item)"
-            >
-              <img
-                :src="imageUrl(item.iconUrl ?? '')"
-                :alt="`icon_${item.id}`"
-                class="vc-app-switcher__item-icon"
-              />
-              <p class="vc-app-switcher__item-title">
-                {{ item.title }}
-              </p>
-            </li>
-          </ul>
+
+    <GenericDropdown
+      :items="appsList"
+      :is-item-active="(item) => locationHandler(item.relativeUrl ?? '')"
+      @item:click="switchApp"
+    >
+      <template #item="{ item }">
+        <div class="vc-app-switcher__item">
+          <img
+            :src="imageUrl(item.iconUrl ?? '')"
+            :alt="`icon_${item.id}`"
+            class="vc-app-switcher__item-icon"
+          />
+          <p class="vc-app-switcher__item-title">
+            {{ item.title }}
+          </p>
         </div>
-      </div>
-    </template>
-  </Sidebar>
+      </template>
+    </GenericDropdown>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
 import { AppDescriptor } from "../../../../../core/api/platform";
-import { Sidebar } from "./../../../sidebar";
+import { GenericDropdown } from "../../../generic-dropdown";
 
 export interface Props {
   appsList: AppDescriptor[];
@@ -80,102 +46,33 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-const isVisible = ref(false);
-
 const imageUrl = (url: string) => url;
 
 const locationHandler = (url: string) => {
   const cleanUrl = window.location.pathname.replace(/\/+$/, "");
   const match = url.match(cleanUrl);
   if (match) {
-    return match[0];
+    return !!match[0];
   }
-  return null;
+  return false;
 };
 
 const switchApp = (app: AppDescriptor) => {
   emit("onClick", app);
-  onClose();
-};
-
-const toggleAppSwitch = () => {
-  if (props.appsList && props.appsList.length) {
-    isVisible.value = !isVisible.value;
-  }
-};
-
-const onClose = () => {
-  isVisible.value = false;
 };
 </script>
 
 <style lang="scss">
 :root {
-  --app-switcher-button-color: var(--neutrals-400);
-  --app-switcher-button-color-hover: var(--neutrals-500);
   --app-switcher-item-text-color: var(--additional-950);
-  --app-switcher-dropdown-bg-color: var(--additional-50);
-  --app-switcher-dropdown-shadow: 4px 4px 20px rgba(47, 86, 108, 0.25);
   --app-switcher-height: var(--app-bar-height);
-  --app-switcher-item-bg-hover: var(--primary-50);
 }
 
 .vc-app-switcher {
-  @apply tw-relative tw-flex tw-mx-3 tw-shrink-0 tw-mt-4;
-
-  &__button {
-    @apply hover:tw-relative tw-p-0 tw-border-0 tw-bg-transparent tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-shrink-0 tw-mx-3;
-
-    &:hover .vc-app-switcher__icon {
-      @apply tw-bg-[color:var(--app-switcher-button-color-hover)];
-    }
-
-    &--header {
-      @apply tw-h-auto tw-block tw-mx-0 #{!important};
-    }
-  }
-
-  &__button-wrap {
-    @apply tw-min-h-[--app-switcher-height] tw-px-4 tw-flex tw-items-center tw-justify-between tw-h-[var(--app-switcher-height)] tw-mx-3;
-
-    &--mobile {
-      @apply tw-mx-2 #{!important};
-    }
-  }
-
-  &__title {
-    @apply tw-text-lg tw-font-bold tw-text-[color:var(--app-switcher-item-text-color)];
-  }
-
-  &__icon {
-    @apply tw-h-[22px] tw-w-[22px] tw-bg-[color:var(--app-switcher-button-color)] tw-duration-200;
-    mask: url(/assets/app-select.svg) no-repeat center;
-    mask-size: contain;
-  }
-
-  &__dropdown {
-    @apply tw-bg-[color:var(--app-switcher-dropdown-bg-color)] tw-w-full;
-  }
-
-  &__list {
-    @apply tw-flex tw-flex-col tw-gap-3 tw-overflow-hidden;
-  }
-
-  &__list-item {
-    @apply tw-p-3 tw-text-sm tw-text-[color:var(--app-switcher-item-text-color)] tw-flex tw-flex-row tw-items-center tw-cursor-pointer tw-w-full;
-    transition: background-color 0.2s;
-
-    &--active {
-      @apply tw-font-extrabold;
-    }
-
-    &:hover .vc-app-switcher__item-title {
-      @apply tw-opacity-80;
-    }
+  @apply tw-relative tw-flex tw-shrink-0;
 
-    &:hover {
-      @apply tw-bg-[color:var(--app-switcher-item-bg-hover)];
-    }
+  &__item {
+    @apply tw-flex tw-items-center tw-w-full;
   }
 
   &__item-icon {
@@ -183,7 +80,7 @@ const onClose = () => {
   }
 
   &__item-title {
-    @apply tw-font-normal tw-text-sm tw-truncate;
+    @apply tw-font-normal tw-text-sm tw-leading-5 tw-truncate;
     color: var(--app-switcher-item-text-color);
     transition: opacity 0.3s ease;
   }

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,24 +1,21 @@
 <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 [box-shadow:var(--blade-navigation-shadow)] tw-rounded-[var(--blade-navigation-border-radius)]"
+      class="tw-bg-[--blade-navigation-bg-color] tw-px-3 tw-py-2"
       :class="[
         {
-          'tw-mt-4 tw-mx-2': !$isMobile.value,
           'tw-p-4': $isMobile.value,
         },
       ]"
-      variant="light"
       with-arrow
-    />
+    /> -->
     <render></render>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { Ref, computed, inject, withDirectives, h, vShow, toRef, VNode, nextTick } from "vue";
+import { Ref, computed, inject, withDirectives, h, vShow, toRef, VNode, nextTick, provide } from "vue";
 import { RouterView, useRoute } from "vue-router";
 import { BladeVNode, IParentCallArgs, useBladeNavigation } from "./../../../../../shared";
 import { ErrorInterceptor } from "./../../../error-interceptor";
@@ -26,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();
@@ -80,6 +79,7 @@ const render = () => {
             (x) => x.props.navigation.isVisible === false && x.props.navigation.idx < index,
           ).length;
 
+          const filteredBreadcrumbs = breadcrumbs.value.slice(0, index);
           arr.push(
             h(
               ErrorInterceptor,
@@ -95,13 +95,26 @@ const render = () => {
                   return withDirectives(
                     h(
                       VcBladeView,
-                      { key: `${bladeVNode.type?.name}_${index}` || `blade_${index}`, blade: bladeVNode },
+                      {
+                        key: `${bladeVNode.type?.name}_${index}` || `blade_${index}`,
+                        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 }) => {
                           return h(Component, {
-                            error,
                             closable: index >= 1,
-                            expandable: quantity.value > 1,
                             expanded: index - hiddenQuantity === quantity.value - 1,
                             "onClose:blade": () => {
                               if (index === 0) return;

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 } 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",
@@ -10,11 +11,26 @@ export const VcBladeView = defineComponent({
     blade: {
       type: Object as PropType<BladeVNode>,
     },
+    expandable: {
+      type: Boolean,
+    },
+    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,
@@ -32,8 +48,19 @@ export const VcBladeView = defineComponent({
       },
       { flush: "sync" },
     );
-
     provide(navigationViewLocation, bl.value!);
+    provide(BLADE_BACK_BUTTON, backButton);
+    provide(
+      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 () => {
       /**
        * Callback function onClose, which is passed while opening blade, called when a BladeVNode is unmounted.
@@ -60,8 +87,6 @@ export const VcBladeView = defineComponent({
         }
       };
 
-      const maximized = ref(false);
-
       function onExpand() {
         maximized.value = true;
       }
@@ -79,7 +104,6 @@ export const VcBladeView = defineComponent({
             onVnodeMounted,
             "onExpand:blade": onExpand,
             "onCollapse:blade": onCollapse,
-            maximized,
           }),
         );
 

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;
@@ -297,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) {
@@ -647,6 +654,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     blades: computed(() => navigationInstance.blades.value),
     openBlade,
     closeBlade,
+    goToRoot,
     onParentCall,
     resolveBladeByName,
     routeResolver,