@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

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,34 @@
 <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 +44,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 +78,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, FALLBACK_BLADE_ID } 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,

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

@@ -12,6 +12,7 @@ import {
 } from "vue";
 import { ComponentPublicInstanceConstructor } from "../../../utilities/vueUtils";
 import { MenuItemConfig } from "../../../../core/types";
+import { Breadcrumbs } from "../../../../ui/types";
 
 export type CoreBladeComponentProps = {
   expanded?: boolean;
@@ -41,6 +42,15 @@ export interface CoreBladeExposed {
   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;

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

@@ -16,7 +16,7 @@
             :outline="false"
             variant="info-dark"
           >
-            <div class="tw-flex tw-flex-row tw-items-center">
+            <div class="tw-flex tw-flex-row tw-items-center tw-text-[color:var(--change-password-text-color)]">
               <VcIcon
                 icon="far fa-lightbulb"
                 size="l"
@@ -222,6 +222,7 @@ function validate() {
 
 <style lang="scss">
 :root {
-  --change-password-error-color: var(--base-error-color, var(--danger-500));
+  --change-password-error-color: var(--danger-500);
+  --change-password-text-color: var(--additional-950);
 }
 </style>

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/dashboard-widget-card/dashboard-widget-card.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="dashboard-widget-card">
+    <div class="dashboard-widget-card__header-wrapper">
+      <div class="dashboard-widget-card__header">
+        <slot name="header">
+          <div class="dashboard-widget-card__header-content">
+            <VcIcon
+              v-if="icon"
+              class="dashboard-widget-card__icon"
+              :icon="icon"
+              size="xl"
+            ></VcIcon>
+            <div class="dashboard-widget-card__header">{{ props.header }}</div>
+          </div>
+        </slot>
+      </div>
+      <div class="dashboard-widget-card__actions">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+    <div class="dashboard-widget-card__body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  header?: string;
+  icon?: string;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<style lang="scss">
+:root {
+  --dashboard-widget-card-header-color: var(--additional-50);
+  --dashboard-widget-card-header-text-color: var(--neutrals-950);
+  --dashboard-widget-card-icon-color: var(--neutrals-950);
+  --dashboard-widget-card-header-border-color: var(--neutrals-200);
+}
+
+.dashboard-widget-card {
+  @apply tw-rounded-md tw-overflow-hidden tw-h-full tw-bg-[var(--dashboard-widget-card-header-color)];
+
+  &__header-wrapper {
+    @apply tw-p-6 tw-bg-[var(--dashboard-widget-card-header-color)] tw-rounded-t-md tw-border tw-border-[color:var(--dashboard-widget-card-header-border-color)] tw-border-solid tw-flex tw-justify-between tw-items-center tw-text-xl tw-font-bold tw-text-[var(--dashboard-widget-card-header-text-color)];
+  }
+
+  &__actions {
+    @apply tw-flex tw-items-center tw-gap-[14px];
+  }
+
+  &__header {
+    @apply tw-flex;
+  }
+
+  &__icon {
+    @apply tw-text-[var(--dashboard-widget-card-icon-color)];
+  }
+
+  &__header-content {
+    @apply tw-flex tw-items-center tw-gap-[14px];
+  }
+}
+</style>

package/shared/components/dashboard-widget-card/index.ts

@@ -0,0 +1 @@
+export { default as DashboardWidgetCard } from "./dashboard-widget-card.vue";