@vc-shell/framework 1.0.290 → 1.0.292

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

@@ -1,105 +1,118 @@
 <template>
-  <div
-    v-if="isMenuVisible"
-    class="vc-app-menu tw-relative tw-w-[var(--app-menu-width)] [transition:width_300ms_cubic-bezier(0.2,0,0,1)_0s] tw-pt-[22px] -tw-mr-[8px]"
-    :class="{
-      'vc-app-menu_mobile tw-hidden !tw-fixed !tw-left-0 !tw-top-0 !tw-w-full !tw-bottom-0 !tw-z-[9999]':
-        $isMobile.value,
-      '!tw-block': isMobileVisible,
-      '!tw-w-[var(--app-menu-width-collapse)]': $isDesktop.value && !isExpanded,
-    }"
-    @mouseenter="!isExpanded && expandOverHandler(true)"
-    @mouseover="!isExpanded && expandOverHandler(true)"
-    @mouseleave="expandOverHandler(false)"
+  <Sidebar
+    :is-expanded="$isMobile.value ? isMobileVisible : false"
+    render="mobile"
+    @close="() => (isMobileVisible = false)"
   >
-    <!-- Show backdrop overlay on mobile devices -->
-    <div
-      v-if="$isMobile.value"
-      class="tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[9998] tw-bg-[#808c99] tw-opacity-60"
-      @click="isMobileVisible = false"
-    ></div>
-    <div
-      class="!tw-absolute vc-app-menu__inner tw-flex tw-flex-col tw-h-full [transition:width_150ms_cubic-bezier(0.2,0,0,1)_0s] tw-z-[1001] tw-top-0 tw-bottom-0 tw-bg-[color:var(--app-background)]"
-      :class="{
-        'tw-left-0 tw-pt-[22px]': $isDesktop.value,
-        '!tw-w-[var(--app-menu-width-collapse)]': $isDesktop.value && !isExpanded && !isExpandedOver,
-        'tw-w-[var(--app-menu-width)]': $isDesktop.value && (isExpanded || isExpandedOver),
-      }"
-    >
-      <!-- Show menu close handler on mobile devices -->
+    <template #content>
       <div
-        v-if="$isMobile.value"
-        class="tw-text-[#319ed4] tw-flex tw-justify-end tw-items-center tw-p-4 tw-cursor-pointer"
+        v-if="isMenuVisible"
+        class="vc-app-menu"
+        :class="{
+          'vc-app-menu--mobile': $isMobile.value,
+          'vc-app-menu--block': isMobileVisible,
+          'vc-app-menu--collapsed': $isDesktop.value && !isExpanded,
+        }"
+        @mouseenter="!isExpanded && expandOverHandler(true)"
+        @mouseover="!isExpanded && expandOverHandler(true)"
+        @mouseleave="expandOverHandler(false)"
       >
-        <button @click="isMobileVisible = false">
-          <VcIcon
-            icon="fas fa-times"
-            size="xl"
-          ></VcIcon>
-        </button>
-      </div>
+        <!-- Show backdrop overlay on mobile devices -->
+        <!-- <div
+          v-if="$isMobile.value"
+          class="vc-app-menu__backdrop"
+          @click="isMobileVisible = false"
+        ></div> -->
 
-      <div
-        v-if="$isDesktop.value"
-        class="tw-pl-[19px] tw-pb-2"
-      >
-        <button
-          class="tw-flex tw-items-center tw-p-[10px] tw-rounded tw-text-[color:var(--app-menu-burger-color)] hover:tw-bg-[color:var(--app-menu-burger-background-color)]"
-          @click="toggleMenu"
+        <div
+          class="vc-app-menu__inner"
+          :class="{
+            'vc-app-menu__inner--desktop': $isDesktop.value,
+            'vc-app-menu__inner--collapsed': $isDesktop.value && !isExpanded && !isExpandedOver,
+            'vc-app-menu__inner--expanded': $isDesktop.value && (isExpanded || isExpandedOver),
+          }"
         >
-          <VcIcon
-            icon="fas fa-bars"
-            size="xl"
-          ></VcIcon>
-        </button>
-      </div>
+          <!-- Show menu close handler on mobile devices -->
+          <!-- <div
+            v-if="$isMobile.value"
+            class="vc-app-menu__close-handler"
+          >
+            <button
+              class="vc-app-menu__close-button"
+              @click="isMobileVisible = false"
+            >
+              <VcIcon
+                icon="fas fa-times"
+                size="xl"
+              ></VcIcon>
+            </button>
+          </div> -->
 
-      <!-- Show scrollable area with menu items -->
-      <VcContainer
-        :no-padding="true"
-        class="tw-grow tw-basis-0"
-      >
-        <div class="tw-gap-[5px] tw-flex tw-flex-col tw-h-full">
           <div
-            v-if="$slots['mobile']"
-            class="tw-px-[19px]"
+            v-if="$isDesktop.value"
+            class="vc-app-menu__burger-container"
           >
-            <slot
-              v-if="!$isDesktop.value"
-              name="mobile"
-            ></slot>
+            <button
+              class="vc-app-menu__burger-button"
+              @click="toggleMenu"
+            >
+              <VcIcon
+                icon="fas fa-bars"
+                size="xl"
+              ></VcIcon>
+            </button>
           </div>
 
-          <VcAppMenuItem
-            v-for="item in menuItems"
-            :id="item.id"
-            :key="item?.id"
-            :data-test-id="item?.routeId"
-            :is-visible="
-              $hasAccess(item.permissions!) && (item.children?.some((child) => $hasAccess(child.permissions!)) ?? true)
-            "
-            :url="item.url"
-            :icon="item.groupIcon || item.icon"
-            :title="item.title as string"
-            :children="item.children"
-            :expand="$isDesktop.value ? isExpanded || isExpandedOver : true"
-            @click="
-              (event) => {
-                $emit('item:click', event ? event : item);
-                isMobileVisible = false;
-              }
-            "
-          />
+          <!-- Show scrollable area with menu items -->
+          <VcContainer
+            :no-padding="true"
+            class="vc-app-menu__container"
+          >
+            <div class="vc-app-menu__menu-items">
+              <div
+                v-if="$slots['mobile']"
+                class="vc-app-menu__mobile-slot"
+              >
+                <slot
+                  v-if="!$isDesktop.value"
+                  name="mobile"
+                ></slot>
+              </div>
+
+              <VcAppMenuItem
+                v-for="item in menuItems"
+                :id="item.id"
+                :key="item?.id"
+                :data-test-id="item?.routeId"
+                :is-visible="
+                  $hasAccess(item.permissions!) &&
+                  (item.children?.some((child) => $hasAccess(child.permissions!)) ?? true)
+                "
+                :url="item.url"
+                :icon="item.groupIcon || item.icon"
+                :title="item.title as string"
+                :children="item.children"
+                :expand="$isDesktop.value ? isExpanded || isExpandedOver : true"
+                @click="
+                  (event) => {
+                    $emit('item:click', event ? event : item);
+                    isMobileVisible = false;
+                  }
+                "
+              />
+            </div>
+          </VcContainer>
+
+          <div
+            class="vc-app-menu__version"
+            @click="$emit('version:click')"
+          >
+            {{ version }}
+          </div>
         </div>
-      </VcContainer>
-      <div
-        class="tw-text-[color:var(--app-menu-version-color)] tw-text-xs tw-mt-auto tw-self-start tw-py-1 tw-pl-[22px]"
-        @click="$emit('version:click')"
-      >
-        {{ version }}
       </div>
-    </div>
-  </div>
+    </template>
+  </Sidebar>
 </template>
 
 <script lang="ts" setup>
@@ -109,6 +122,7 @@ import { VcContainer, VcIcon } from "./../../../../";
 import { useMenuService } from "../../../../../../core/composables";
 import { MenuItem } from "../../../../../../core/types";
 import { useLocalStorage } from "@vueuse/core";
+import { Sidebar } from "../../../../../../shared/components";
 
 export interface Props {
   version: string;
@@ -167,19 +181,122 @@ defineExpose({
 :root {
   --app-menu-width: 230px;
   --app-menu-width-collapse: 70px;
-  --app-menu-background-color: #ffffff;
-  --app-menu-version-color: #838d9a;
+  --app-menu-background: var(--app-background, var(--primary-50));
+  --app-menu-background-color: var(--additional-50);
+  --app-menu-version-color: var(--neutrals-400);
+
+  --app-menu-close-color: var(--app-menu-burger-color, var(--primary-500));
+  --app-menu-burger-color: var(--primary-500);
+
+  --app-backdrop-overlay-bg: var(--additional-50);
+  --app-backdrop-overlay: rgb(from var(--app-backdrop-overlay-bg) r g b / 75%);
 
-  --app-menu-burger-background-color: rgba(255, 255, 255, 0.5);
-  --app-menu-burger-color: #319ed4;
+  --app-backdrop-shadow-color: var(--additional-950);
+  --app-backdrop-shadow: 0 -6px 6px var(--additional-50),
+    1px 1px 22px rgb(from var(--notification-dropdown-shadow-color) r g b / 7%);
 }
 
 .vc-app-menu {
-  ::-webkit-scrollbar {
+  @apply tw-relative tw-w-[var(--app-menu-width)] tw-pt-6 -tw-mr-2 [transition:width_300ms_cubic-bezier(0.2,0,0,1)_0s];
+
+  &.vc-app-menu--mobile {
+    @apply tw-hidden tw-h-full tw-w-full #{!important};
+  }
+
+  &.vc-app-menu--block {
+    @apply tw-block #{!important};
+  }
+
+  &.vc-app-menu--collapsed {
+    width: var(--app-menu-width-collapse) !important;
+  }
+
+  &.vc-app-menu--expanded {
+    @apply tw-w-[var(--app-menu-width)];
+  }
+
+  &__backdrop {
+    @apply tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[9998] tw-bg-[color:var(--app-backdrop-overlay)] tw-backdrop-blur-[3px];
+  }
+
+  &__inner {
+    @apply tw-flex tw-flex-col tw-h-full tw-z-[1001] tw-top-0 tw-bottom-0 tw-bg-[color:var(--app-menu-background)] [transition:width_150ms_cubic-bezier(0.2,0,0,1)_0s];
+    @apply tw-absolute #{!important};
+
+    &--desktop {
+      @apply tw-left-0 tw-pt-6;
+    }
+
+    &--collapsed {
+      @apply tw-w-[var(--app-menu-width-collapse)] #{!important};
+    }
+
+    &--expanded {
+      @apply tw-w-[var(--app-menu-width)];
+    }
+  }
+
+  &__close-handler {
+    @apply tw-text-[color:var(--app-menu-close-color)] tw-flex tw-justify-end tw-items-center tw-p-4 tw-cursor-pointer;
+  }
+
+  &__close-button {
+  }
+
+  &__burger-container {
+    @apply tw-pl-5 tw-pb-2;
+  }
+
+  &__burger-button {
+    @apply tw-flex tw-items-center tw-p-2.5 tw-rounded tw-text-[color:var(--app-menu-burger-color)];
+  }
+
+  &__container {
+    @apply tw-grow tw-basis-0;
+  }
+
+  &__menu-items {
+    @apply tw-gap-1 tw-flex tw-flex-col tw-h-full;
+  }
+
+  &__mobile-slot {
+    @apply tw-px-5;
+  }
+
+  &__version {
+    @apply tw-text-[color:var(--app-menu-version-color)] tw-text-xs tw-mt-auto tw-self-start tw-py-1 tw-pl-5;
+  }
+
+  &--mobile .vc-app-menu__inner {
+    @apply tw-bg-[color:var(--app-menu-background-color)] tw-w-full;
+  }
+
+  &::-webkit-scrollbar {
     display: none;
   }
-  &_mobile &__inner {
-    @apply tw-absolute tw-z-[9999] tw-right-0 tw-top-0 tw-bottom-0 tw-w-[300px] tw-max-w-[60%] tw-bg-[color:var(--app-menu-background-color)];
+
+  & .vc-app-menu__blade-title {
+    @apply tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-font-semibold tw-ml-2 tw-leading-snug;
+  }
+
+  &__backlink {
+    @apply tw-ml-3;
+  }
+
+  &__backlink-text {
+    @apply tw-ml-2 tw-text-lg;
+  }
+
+  &__spacer {
+    @apply tw-grow tw-basis-0;
+  }
+
+  &__toolbar {
+    @apply tw-flex tw-h-full tw-box-border;
+  }
+
+  &__menu-toggler {
+    @apply tw-text-[color:var(--app-bar-burger-color)] tw-w-12 tw-flex tw-items-center tw-justify-center tw-h-full tw-box-border tw-cursor-pointer;
   }
 }
 </style>

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

@@ -6,17 +6,14 @@
   />
   <div
     v-else
-    class="vc-app tw-flex tw-flex-col tw-w-full tw-h-full tw-box-border tw-m-0 tw-overflow-hidden tw-text-base"
-    :class="[
-      {
-        'vc-app_touch': $isTouch,
-        'vc-app_mobile': $isMobile.value,
-      },
-    ]"
+    class="vc-app"
+    :class="{
+      'vc-app_mobile': $isMobile.value,
+    }"
   >
     <!-- Init application top bar -->
     <VcAppBar
-      class="tw-shrink-0"
+      class="vc-app__app-bar"
       :logo="logo"
       :title="title"
       :disable-menu="disableMenu"
@@ -41,12 +38,16 @@
             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"
@@ -70,24 +71,28 @@
       </template>
     </VcAppBar>
 
-    <div class="tw-overflow-hidden tw-flex tw-grow tw-basis-0">
+    <div class="vc-app__main-content">
       <!-- Init main menu -->
       <VcAppMenu
         v-if="!disableMenu"
         ref="menu"
-        class="tw-shrink-0"
+        class="vc-app__app-menu"
         :version="version"
         @item:click="onMenuItemClick"
       >
         <template #mobile>
-          <UserDropdownButton class="tw-p-0 tw-mb-2 tw-w-full tw-h-auto" />
+          <UserDropdownButton
+            class="vc-app__user-dropdown-button"
+            :avatar-url="avatar"
+            :role="role"
+          />
         </template>
       </VcAppMenu>
 
       <!-- Blade navigation -->
       <div
         v-if="isAuthenticated"
-        class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0 tw-relative"
+        class="vc-app__workspace"
       >
         <slot name="blade-navigation">
           <VcBladeNavigation />
@@ -112,6 +117,7 @@ import {
   useBladeNavigation,
   NotificationDropdown,
   BladeRoutesRecord,
+  ThemeSelector,
 } from "./../../../../shared/components";
 import { useNotifications, useUser } from "../../../../core/composables";
 import { useRoute, useRouter } from "vue-router";
@@ -144,6 +150,7 @@ defineSlots<{
   "toolbar:notifications-dropdown": void;
   "toolbar:user-dropdown": (props: { userDropdown: typeof UserDropdownButton }) => void;
   "blade-navigation": void;
+  "toolbar:theme-selector": void;
 }>();
 
 const props = defineProps<Props>();
@@ -210,20 +217,39 @@ provide("$dynamicModules", dynamicModules);
 
 <style lang="scss">
 :root {
-  --app-background: #eff2fa;
+  --app-background: var(--secondary-200);
 }
 
 .vc-app {
+  @apply tw-flex tw-flex-col tw-w-full tw-h-full tw-box-border tw-m-0 tw-overflow-hidden tw-text-base;
   background: var(--app-background);
 
+  &__loader {
+    background: var(--app-background);
+  }
+
+  &__app-bar {
+    @apply tw-shrink-0;
+  }
+
+  &__app-menu {
+    @apply tw-shrink-0;
+  }
+
+  &__main-content {
+    @apply tw-overflow-hidden tw-flex tw-grow tw-basis-0;
+  }
+
   &__workspace {
+    @apply tw-px-2 tw-w-full tw-overflow-hidden tw-flex tw-grow tw-basis-0 tw-relative;
+
     .vc-app_mobile & {
       @apply tw-p-0;
     }
   }
 
-  &__loader {
-    background: var(--app-background);
+  &__user-dropdown-button {
+    @apply tw-p-0 tw-mb-2 tw-w-full tw-h-auto;
   }
 }
 </style>

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

@@ -1,15 +1,13 @@
 <template>
-  <div
-    class="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:#eaedf3]"
-  >
+  <div class="vc-blade-header">
     <div
       v-if="typeof modified !== 'undefined'"
       ref="tooltipIconRef"
       :class="{
-        '!tw-bg-[color:var(--blade-not-edited)]': !modified,
-        '!tw-bg-[color:var(--blade-edited)]': modified,
+        'vc-blade-header__status-not-edited': !modified,
+        'vc-blade-header__status-edited': modified,
       }"
-      class="tw-block tw-w-[7px] tw-h-[7px] tw-rounded-full tw-z-[1] tw-mr-2"
+      class="vc-blade-header__status"
       @mouseenter="tooltipVisible = true"
       @mouseleave="tooltipVisible = false"
     >
@@ -18,7 +16,7 @@
           v-if="tooltipVisible"
           ref="tooltipRef"
           :style="floatingStyles"
-          class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
+          class="vc-blade-header__tooltip"
         >
           {{
             modified
@@ -31,26 +29,24 @@
 
     <div
       v-if="icon"
-      class="tw-text-[color:var(--blade-header-icon-color)] tw-mr-3"
+      class="vc-blade-header__icon"
     >
       <VcIcon
         :icon="icon"
         size="xxl"
-      ></VcIcon>
+      />
     </div>
 
-    <div class="tw-overflow-hidden tw-grow tw-basis-0">
+    <div class="vc-blade-header__content">
       <div
-        class="tw-text-[color:var(--blade-header-title-color)] tw-text-lg/[23px] tw-truncate"
-        :class="{
-          '!tw-text-[length:var(--blade-header-title-font-size)] tw-font-medium': !subtitle,
-        }"
+        class="vc-blade-header__title"
+        :class="{ 'vc-blade-header__title-no-subtitle': !subtitle }"
       >
         {{ title }}
       </div>
       <div
         v-if="subtitle"
-        class="tw-text-[color:var(--blade-header-subtitle-color)] tw-text-xs tw-mt-1"
+        class="vc-blade-header__subtitle"
       >
         {{ subtitle }}
       </div>
@@ -62,36 +58,36 @@
 
     <div
       v-if="!$isMobile.value"
-      class="tw-flex tw-items-center"
+      class="vc-blade-header__controls"
     >
       <template v-if="expandable">
         <div
           v-if="maximized"
-          class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
+          class="vc-blade-header__button"
           @click="onCollapse"
         >
           <VcIcon
             icon="fas fa-window-minimize"
             size="s"
-          ></VcIcon>
+          />
         </div>
         <div
           v-else
-          class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
+          class="vc-blade-header__button"
           @click="onExpand"
         >
           <VcIcon
             icon="fas fa-window-maximize"
             size="s"
-          ></VcIcon>
+          />
         </div>
       </template>
       <div
         v-if="closable"
-        class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
+        class="vc-blade-header__button"
         @click="onClose"
       >
-        <VcIcon icon="fas fa-times"></VcIcon>
+        <VcIcon icon="fas fa-times" />
       </div>
     </div>
   </div>
@@ -145,20 +141,72 @@ function onClose(): void {
 <style lang="scss">
 :root {
   --blade-header-height: 50px;
-  --blade-header-background-color: #ffffff;
+  --blade-header-background-color: var(--additional-50);
 
-  --blade-header-button-color: #a1c0d4;
-  --blade-header-button-color-hover: #7ea8c4;
+  --blade-header-button-color: var(--secondary-500);
+  --blade-header-button-color-hover: var(--secondary-600);
 
-  --blade-header-icon-color: #a1c0d4;
+  --blade-header-icon-color: var(--secondary-500);
 
   --blade-header-title-font-size: 19px;
-  --blade-header-title-color: #2e3d4e;
+  --blade-header-title-color: var(--base-text-color, var(--neutrals-950));
 
-  --blade-header-subtitle-color: #a1c0d4;
+  --blade-header-subtitle-color: var(--secondary-500);
 
-  --blade-not-edited: #87b563;
+  --blade-not-edited: var(--success-400);
+  --blade-edited: var(--warning-500);
+  --blade-header-border-color: var(--base-border-color, var(--neutrals-200));
 
-  --blade-edited: #f89406;
+  --blade-tooltip-background: var(--additional-50);
+  --blade-tooltip-border: var(--base-border-color, var(--neutrals-200));
+  --blade-tooltip-text: var(--neutrals-600);
+}
+
+.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)];
+
+  &__status {
+    @apply tw-block tw-w-2 tw-h-2 tw-rounded-full tw-z-[1] tw-mr-2;
+  }
+
+  &__status-not-edited {
+    @apply tw-bg-[color:var(--blade-not-edited)] #{!important};
+  }
+
+  &__status-edited {
+    @apply tw-bg-[color:var(--blade-edited)] #{!important};
+  }
+
+  &__tooltip {
+    @apply tw-absolute tw-z-10 tw-bg-[color:var(--blade-tooltip-background)] tw-border tw-border-solid tw-border-[color:var(--blade-tooltip-border)] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:var(--blade-tooltip-text)] tw-font-normal tw-py-1 tw-px-2 tw-ml-4;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--blade-header-icon-color)] tw-mr-3;
+  }
+
+  &__content {
+    @apply tw-overflow-hidden tw-grow tw-basis-0;
+  }
+
+  &__title {
+    @apply tw-text-[color:var(--blade-header-title-color)] tw-text-lg/[23px] tw-truncate;
+  }
+
+  &__title-no-subtitle {
+    @apply tw-text-[length:var(--blade-header-title-font-size)] tw-font-medium #{!important};
+  }
+
+  &__subtitle {
+    @apply tw-text-[color:var(--blade-header-subtitle-color)] tw-text-xs tw-mt-1;
+  }
+
+  &__controls {
+    @apply tw-flex tw-items-center;
+  }
+
+  &__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)];
+  }
 }
 </style>