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

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

@@ -12,87 +12,65 @@
     }"
   >
     <!-- Init application top bar -->
-    <VcAppBar
-      class="vc-app__app-bar"
-      :logo="logo"
-      :title="title"
-      :disable-menu="disableMenu"
-      @menubutton:click="($refs.menu as Record<'isMobileVisible', boolean>).isMobileVisible = true"
-      @backlink:click="closeBlade(blades.length - 1)"
-      @logo:click="openRoot"
-    >
-      <template #app-switcher>
-        <slot name="app-switcher">
-          <VcAppSwitcher
-            :apps-list="appsList"
-            @on-click="switchApp($event)"
-          />
-        </slot>
-      </template>
-
-      <!-- Toolbar slot -->
-      <template #toolbar>
-        <slot
-          name="toolbar"
-          v-bind="{
-            LanguageSelector,
-            UserDropdownButton,
-            NotificationDropdown,
-            ThemeSelector,
-          }"
-        >
-          <slot
-            v-if="$slots['toolbar:prepend']"
-            name="toolbar:prepend"
-          ></slot>
-          <slot name="toolbar:theme-selector">
-            <ThemeSelector />
-          </slot>
-          <slot name="toolbar:language-selector">
-            <LanguageSelector
-              v-if="$isDesktop.value ? $isDesktop.value : $isMobile.value ? route.path === '/' : false"
-            />
-          </slot>
-          <slot name="toolbar:notifications-dropdown">
-            <NotificationDropdown />
-          </slot>
-          <slot
-            name="toolbar:user-dropdown"
-            :user-dropdown="UserDropdownButton"
-          >
-            <UserDropdownButton
-              :avatar-url="avatar"
-              :role="role"
-              :name="name"
-            />
-          </slot>
-        </slot>
-      </template>
-
-      <template #logo:append>
-        <slot name="logo:append"></slot>
-      </template>
-    </VcAppBar>
 
     <div class="vc-app__main-content">
       <!-- Init main menu -->
-      <VcAppMenu
-        v-if="!disableMenu"
-        ref="menu"
-        class="vc-app__app-menu"
-        :version="version"
-        @item:click="onMenuItemClick"
+      <VcAppBar
+        class="vc-app__app-bar"
+        :logo="logo"
+        :title="title"
+        :disable-menu="disableMenu"
+        @backlink:click="closeBlade(blades.length - 1)"
+        @logo:click="openRoot"
       >
-      </VcAppMenu>
+        <template #app-switcher>
+          <slot name="app-switcher">
+            <VcAppSwitcher
+              :apps-list="appsList"
+              @on-click="switchApp($event)"
+            />
+          </slot>
+        </template>
+
+        <template #logo:append>
+          <slot name="logo:append"></slot>
+        </template>
+
+        <!-- Toolbar slot -->
+        <template #toolbar>
+          <slot name="toolbar" />
+        </template>
+
+        <template #notifications-dropdown>
+          <NotificationDropdown />
+        </template>
+
+        <template #navmenu>
+          <VcAppMenu
+            v-if="!disableMenu"
+            ref="menu"
+            class="vc-app__app-menu"
+            :version="version"
+            @item:click="onMenuItemClick"
+          >
+          </VcAppMenu>
+        </template>
+
+        <template #user-dropdown>
+          <UserDropdownButton
+            :avatar="avatar"
+            :name="name"
+            :role="role"
+          />
+        </template>
+      </VcAppBar>
 
       <!-- Blade navigation -->
       <div
         v-if="isAuthenticated"
         class="vc-app__workspace"
       >
-        <slot name="blade-navigation">
-          <VcBladeNavigation />
-        </slot>
+        <VcBladeNavigation />
       </div>
 
       <!-- Popup container -->
@@ -102,23 +80,29 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, provide } from "vue";
+import { h, inject, provide, computed } from "vue";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
 import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
 import {
   VcPopupContainer,
-  LanguageSelector,
   UserDropdownButton,
   useAppSwitcher,
   useBladeNavigation,
   NotificationDropdown,
   BladeRoutesRecord,
-  ThemeSelector,
 } from "./../../../../shared/components";
 import { useNotifications, useUser } from "../../../../core/composables";
 import { useRoute, useRouter } from "vue-router";
-import { watchOnce } from "@vueuse/core";
+import { watchOnce, useLocalStorage } from "@vueuse/core";
 import { MenuItem } from "../../../../core/types";
+import { useToolbarSlots } from "./composables/useToolbarSlots";
+import { useSettingsMenu, SettingsMenuKey } from "../../../../shared/composables/useSettingsMenu";
+import { LanguageSelector } from "../../../../shared/components/language-selector";
+import { ThemeSelector } from "../../../../shared/components/theme-selector";
+import { ChangePasswordButton } from "../../../../shared/components/change-password-button";
+import { LogoutButton } from "../../../../shared/components/logout-button";
+import { useI18n } from "vue-i18n";
+import { createGlobalSearch } from "../../../../core/composables/useGlobalSearch";
 
 export interface Props {
   isReady: boolean;
@@ -137,16 +121,9 @@ defineOptions({
 
 defineSlots<{
   "app-switcher": void;
-  toolbar: (props: {
-    UserDropdownButton: typeof UserDropdownButton;
-    LanguageSelector: typeof LanguageSelector;
-    NotificationDropdown: typeof NotificationDropdown;
-  }) => void;
-  "toolbar:prepend": void;
-  "toolbar:language-selector": void;
-  "toolbar:notifications-dropdown": void;
+  toolbar: void;
   "toolbar:user-dropdown": (props: { userDropdown: typeof UserDropdownButton }) => void;
-  "blade-navigation": void;
+  "toolbar:language-selector": void;
   "toolbar:theme-selector": void;
   "logo:append": void;
 }>();
@@ -158,8 +135,9 @@ console.debug("vc-app: Init vc-app");
 const internalRoutes = inject("bladeRoutes") as BladeRoutesRecord[];
 const dynamicModules = inject("$dynamicModules", undefined) as Record<string, unknown> | undefined;
 const router = useRouter();
+createGlobalSearch();
 
-const { openBlade, closeBlade, resolveBladeByName, blades } = useBladeNavigation();
+const { openBlade, closeBlade, resolveBladeByName, blades, goToRoot } = useBladeNavigation();
 const { appsList, switchApp, getApps } = useAppSwitcher();
 
 const { loadFromHistory } = useNotifications();
@@ -167,8 +145,42 @@ const route = useRoute();
 const { isAuthenticated } = useUser();
 const routes = router.getRoutes();
 
+const { getToolbarMenuItems } = useToolbarSlots();
+
+const settingsMenu = useSettingsMenu();
+provide(SettingsMenuKey, settingsMenu);
+
+const { t } = useI18n({ useScope: "global" });
+
+const { registerMenuItem } = settingsMenu;
+
+registerMenuItem({
+  id: "language-selector",
+  component: LanguageSelector,
+  order: 20,
+});
+
+registerMenuItem({
+  id: "theme-selector",
+  component: ThemeSelector,
+  order: 10,
+});
+
+registerMenuItem({
+  id: "change-password",
+  component: ChangePasswordButton,
+  order: 30,
+});
+
+registerMenuItem({
+  id: "logout",
+  component: LogoutButton,
+  order: 100,
+});
+
 const onMenuItemClick = function (item: MenuItem) {
   console.debug(`vc-app#onMenuItemClick() called.`);
+
   if (item.routeId) {
     openBlade(
       {
@@ -192,10 +204,7 @@ const openRoot = async () => {
   const isPrevented = await closeBlade(1);
 
   if (!isPrevented) {
-    const mainRoute = routes.find((route) => route.meta?.root);
-    const mainRouteAlias = routes.find((route) => route.aliasOf?.path === mainRoute?.path) ?? mainRoute;
-
-    router.push({ name: mainRouteAlias?.name, params: route.params });
+    router.push(goToRoot());
   }
 };
 
@@ -239,7 +248,7 @@ provide("$dynamicModules", dynamicModules);
   }
 
   &__workspace {
-    @apply tw-px-2 tw-w-full tw-overflow-hidden tw-flex tw-grow tw-basis-0 tw-relative;
+    @apply tw-w-full tw-overflow-hidden tw-flex tw-grow tw-basis-0 tw-relative;
 
     .vc-app_mobile & {
       @apply tw-p-0;
@@ -249,5 +258,11 @@ provide("$dynamicModules", dynamicModules);
   &__user-dropdown-button {
     @apply tw-p-0 tw-mb-2 tw-w-full tw-h-auto;
   }
+
+  &_mobile {
+    .vc-app__main-content {
+      @apply tw-flex-col;
+    }
+  }
 }
 </style>

package/ui/components/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue

@@ -1,96 +1,109 @@
 <template>
-  <div class="vc-blade-header">
-    <div
-      v-if="typeof modified !== 'undefined'"
-      ref="tooltipIconRef"
-      :class="{
-        'vc-blade-header__status-not-edited': !modified,
-        'vc-blade-header__status-edited': modified,
-      }"
-      class="vc-blade-header__status"
-      @mouseenter="tooltipVisible = true"
-      @mouseleave="tooltipVisible = false"
-    >
-      <teleport to="body">
-        <span
-          v-if="tooltipVisible"
-          ref="tooltipRef"
-          :style="floatingStyles"
-          class="vc-blade-header__tooltip"
-        >
-          {{
-            modified
-              ? $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.UNSAVED_CHANGES")
-              : $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.NO_CHANGES")
-          }}
-        </span>
-      </teleport>
-    </div>
-
-    <div
-      v-if="icon"
-      class="vc-blade-header__icon"
-    >
-      <VcIcon
-        :icon="icon"
-        size="xxl"
-      />
-    </div>
+  <div
+    class="vc-blade-header"
+    :class="{
+      'vc-blade-header--mobile': $isMobile.value,
+    }"
+  >
+    <slot name="prepend"></slot>
 
-    <div class="vc-blade-header__content">
+    <div class="vc-blade-header__status-container">
       <div
-        class="vc-blade-header__title"
-        :class="{ 'vc-blade-header__title-no-subtitle': !subtitle }"
+        v-if="typeof modified !== 'undefined'"
+        ref="tooltipIconRef"
+        :class="{
+          'vc-blade-header__status-not-edited': !modified,
+          'vc-blade-header__status-edited': modified,
+        }"
+        class="vc-blade-header__status"
+        @mouseenter="tooltipVisible = true"
+        @mouseleave="tooltipVisible = false"
       >
-        {{ title }}
+        <teleport to="body">
+          <span
+            v-if="tooltipVisible"
+            ref="tooltipRef"
+            :style="floatingStyles"
+            class="vc-blade-header__tooltip"
+          >
+            {{
+              modified
+                ? $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.UNSAVED_CHANGES")
+                : $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.NO_CHANGES")
+            }}
+          </span>
+        </teleport>
       </div>
+
       <div
-        v-if="subtitle"
-        class="vc-blade-header__subtitle"
+        v-if="icon"
+        class="vc-blade-header__icon"
       >
-        {{ subtitle }}
+        <VcIcon
+          :icon="icon"
+          size="xxl"
+        />
       </div>
-    </div>
 
-    <div
-      v-if="$slots['actions']"
-      class="vc-blade-header__actions"
-    >
-      <slot name="actions"></slot>
-    </div>
+      <div class="vc-blade-header__wrapper">
+        <div class="vc-blade-header__content">
+          <div
+            class="vc-blade-header__title"
+            :class="{
+              'vc-blade-header__title-no-subtitle': !subtitle,
+            }"
+          >
+            {{ title }}
+          </div>
+          <div
+            v-if="subtitle"
+            class="vc-blade-header__subtitle"
+          >
+            {{ subtitle }}
+          </div>
+        </div>
 
-    <div
-      v-if="!$isMobile.value"
-      class="vc-blade-header__controls"
-    >
-      <template v-if="expandable">
         <div
-          v-if="maximized"
-          class="vc-blade-header__button"
-          @click="onCollapse"
+          v-if="$slots['actions']"
+          class="vc-blade-header__actions"
         >
-          <VcIcon
-            icon="fas fa-window-minimize"
-            size="s"
-          />
+          <slot name="actions"></slot>
         </div>
+      </div>
+
+      <div
+        v-if="!$isMobile.value"
+        class="vc-blade-header__controls"
+      >
+        <template v-if="blade.expandable">
+          <div
+            v-if="blade.maximized"
+            class="vc-blade-header__button"
+            @click="onCollapse"
+          >
+            <VcIcon
+              icon="fas fa-window-minimize"
+              size="s"
+            />
+          </div>
+          <div
+            v-else
+            class="vc-blade-header__button"
+            @click="onExpand"
+          >
+            <VcIcon :icon="AppWindowIcon" />
+          </div>
+        </template>
         <div
-          v-else
+          v-if="closable"
           class="vc-blade-header__button"
-          @click="onExpand"
+          @click="onClose"
         >
           <VcIcon
-            icon="fas fa-window-maximize"
-            size="s"
+            :icon="CrossSignIcon"
+            size="xs"
           />
         </div>
-      </template>
-      <div
-        v-if="closable"
-        class="vc-blade-header__button"
-        @click="onClose"
-      >
-        <VcIcon icon="fas fa-times" />
       </div>
     </div>
   </div>
@@ -98,12 +111,14 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../../../";
-import { ref } from "vue";
+import { ComputedRef, computed, inject, ref } from "vue";
 import { useFloating, shift } from "@floating-ui/vue";
+import { CrossSignIcon, AppWindowIcon } from "../../../../atoms/vc-icon/icons";
+import { BladeInstance } from "../../../../../../injection-keys";
+import { Breadcrumbs } from "./../../../../../../ui/types";
+import VertDotsIcon from "../../../../atoms/vc-icon/icons/VertDotsIcon.vue";
 
 export interface Props {
-  expandable?: boolean;
-  maximized?: boolean;
   closable?: boolean;
   title?: string;
   subtitle?: string;
@@ -114,6 +129,17 @@ const props = defineProps<Props>();
 
 const emit = defineEmits(["close", "expand", "collapse"]);
 
+const blade = inject(
+  BladeInstance,
+  computed(() => ({
+    id: "fallback-blade-id",
+    error: undefined,
+    expandable: false,
+    maximized: false,
+    navigation: undefined,
+    breadcrumbs: undefined,
+  })),
+);
 const tooltipVisible = ref(false);
 const tooltipIconRef = ref<HTMLElement | null>(null);
 const tooltipRef = ref<HTMLElement | null>(null);
@@ -123,13 +149,13 @@ const { floatingStyles } = useFloating(tooltipIconRef, tooltipRef, {
 });
 
 function onExpand(): void {
-  if (props.expandable) {
+  if (blade.value.expandable) {
     emit("expand");
   }
 }
 
 function onCollapse(): void {
-  if (props.expandable) {
+  if (blade.value.expandable) {
     emit("collapse");
   }
 }
@@ -143,12 +169,16 @@ function onClose(): void {
 
 <style lang="scss">
 :root {
-  --blade-header-height: 50px;
+  --blade-header-height: 70px;
+  --blade-header-mobile-height: 60px;
   --blade-header-background-color: var(--additional-50);
 
   --blade-header-button-color: var(--secondary-500);
   --blade-header-button-color-hover: var(--secondary-600);
 
+  --blade-header-breadcrumbs-button-color: var(--neutrals-500);
+  --blade-header-breadcrumbs-button-color-hover: var(--neutrals-700);
+
   --blade-header-icon-color: var(--secondary-500);
 
   --blade-header-title-font-size: 19px;
@@ -166,14 +196,34 @@ function onClose(): void {
 }
 
 .vc-blade-header {
-  @apply tw-shrink-0 tw-h-[var(--blade-header-height)] tw-bg-[color:var(--blade-header-background-color)] tw-flex tw-items-center tw-py-0 tw-px-4 tw-border-solid tw-border-b tw-border-b-[color:var(--blade-header-border-color)];
+  @apply tw-shrink-0 tw-h-[var(--blade-header-height)] tw-bg-[color:var(--blade-header-background-color)] tw-flex tw-items-center tw-py-0 tw-px-6 tw-border-solid tw-border-b tw-border-b-[color:var(--blade-header-border-color)];
+
+  &--mobile {
+    @apply tw-h-[var(--blade-header-mobile-height)];
+
+    .vc-blade-header__title {
+      @apply tw-text-lg/[22px];
+    }
+  }
+
+  &--hidden {
+    @apply tw-hidden;
+  }
+
+  &__wrapper {
+    @apply tw-flex tw-items-center tw-justify-between tw-grow tw-basis-0 tw-overflow-hidden;
+  }
 
   &__actions {
-    @apply tw-grow tw-basis-0 tw-overflow-hidden tw-flex tw-justify-end;
+    @apply tw-overflow-hidden;
   }
 
   &__status {
-    @apply tw-block tw-w-2 tw-h-2 tw-rounded-full tw-z-[1] tw-mr-2;
+    @apply tw-block tw-w-2 tw-h-2 tw-rounded-full tw-z-[1] tw-mr-[14px];
+  }
+
+  &__status-container {
+    @apply tw-flex tw-flex-1 tw-flex-row tw-items-center;
   }
 
   &__status-not-edited {
@@ -193,15 +243,15 @@ function onClose(): void {
   }
 
   &__content {
-    @apply tw-overflow-hidden tw-grow tw-basis-0 tw-shrink-0;
+    @apply tw-overflow-hidden;
   }
 
   &__title {
-    @apply tw-text-[color:var(--blade-header-title-color)] tw-text-lg/[23px] tw-truncate;
+    @apply tw-text-[color:var(--blade-header-title-color)] tw-text-xl/[23px] tw-truncate;
   }
 
   &__title-no-subtitle {
-    @apply tw-text-[length:var(--blade-header-title-font-size)] tw-font-medium #{!important};
+    @apply tw-text-[length:var(--blade-header-title-font-size)] tw-font-semibold #{!important};
   }
 
   &__subtitle {
@@ -213,7 +263,7 @@ function onClose(): void {
   }
 
   &__button {
-    @apply tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)];
+    @apply tw-text-[color:var(--blade-header-button-color)] tw-ml-2.5 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)];
   }
 }
 </style>