@vc-shell/framework 1.0.290 → 1.0.292

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

@@ -1,14 +1,14 @@
 <template>
   <div
-    class="tw-relative tw-flex tw-items-center tw-content-between tw-h-[var(--app-bar-height)] tw-bg-[color:var(--app-bar-background-color)] tw-px-4 tw-shadow-[0px_2px_5px_0px_#3654751A] tw-z-[1002]"
-    :class="{ '!tw-pr-0 !tw-pl-[10px]': $isMobile.value }"
+    class="vc-app-bar"
+    :class="{ 'vc-app-bar--mobile': $isMobile.value }"
   >
     <slot name="app-switcher"></slot>
 
     <template v-if="!$isMobile.value || quantity === 0">
       <!-- Logo -->
       <img
-        class="tw-h-1/2 tw-cursor-pointer tw-mx-4"
+        class="vc-app-bar__logo"
         alt="logo"
         :src="logo"
         @click="$emit('logo:click')"
@@ -17,7 +17,7 @@
       <!-- Title -->
       <div
         v-if="title"
-        class="tw-text-[color:var(--app-bar-product-name-color)] tw-text-[length:var(--app-bar-product-name-size)] tw-font-medium"
+        class="vc-app-bar__title"
       >
         {{ title }}
       </div>
@@ -27,7 +27,7 @@
       <!-- Show blades name when at least one blade is opened -->
       <div
         v-if="quantity === 1"
-        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header tw-ml-2"
+        class="vc-app-bar__blade-title"
       >
         {{ viewTitle }}
       </div>
@@ -35,29 +35,29 @@
       <!-- Show back link when more than one blade is opened -->
       <VcLink
         v-else-if="quantity > 1"
-        class="tw-ml-3"
+        class="vc-app-bar__backlink"
         @click="$emit('backlink:click')"
       >
         <VcIcon
           icon="fas fa-chevron-left"
           size="s"
         ></VcIcon>
-        <span class="tw-ml-2 tw-text-lg">{{ t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.VC_APP_BAR.BACK") }}</span>
+        <span class="vc-app-bar__backlink-text">{{ t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.VC_APP_BAR.BACK") }}</span>
       </VcLink>
     </template>
 
     <!-- Additional spacer -->
-    <div class="tw-grow tw-basis-0"></div>
+    <div class="vc-app__spacer"></div>
 
     <!-- Toolbar container -->
-    <div class="tw-flex tw-h-full tw-box-border">
+    <div class="vc-app__toolbar">
       <slot name="toolbar"></slot>
     </div>
 
     <!-- Show menu toggler on mobile devices -->
     <div
       v-if="!disableMenu && $isMobile.value"
-      class="tw-text-[#319ed4] tw-w-[var(--app-bar-button-width)] tw-flex tw-items-center tw-justify-center tw-h-full tw-box-border tw-cursor-pointer"
+      class="vc-app__menu-toggler"
       @click="$emit('menubutton:click')"
     >
       <VcIcon icon="fas fa-bars"></VcIcon>
@@ -111,14 +111,68 @@ watchDebounced(
 <style lang="scss">
 :root {
   --app-bar-height: 60px;
-  --app-bar-background-color: #ffffff;
+  --app-bar-background-color: var(--additional-50);
   --app-bar-button-width: 50px;
   --app-bar-button-border-color: var(--app-bar-background-color);
-  --app-bar-button-color: #7e8e9d;
+  --app-bar-button-color: var(--secondary-600);
   --app-bar-button-background-color: var(--app-bar-background-color);
-  --app-bar-button-color-hover: #34414f;
+  --app-bar-button-color-hover: var(--secondary-700);
   --app-bar-button-background-color-hover: var(--app-bar-background-color);
-  --app-bar-product-name-color: #34414f;
+  --app-bar-product-name-color: var(--neutrals-600);
   --app-bar-product-name-size: 20px;
+  --app-bar-toolbar-icon-background-hover: var(--neutrals-600);
+  --app-bar-divider-color: var(--additional-50);
+  --app-bar-account-info-role-color: var(--neutrals-400);
+
+  --app-bar-burger-color: var(--primary-500);
+
+  --app-bar-shadow-color: var(--additional-950);
+  --app-bar-shadow: 0px 2px 4px 0px rgba(var(--app-bar-shadow-color), 0.07);
+}
+
+.vc-app-bar {
+  @apply tw-relative tw-flex tw-items-center tw-justify-between tw-px-4 tw-z-[1002];
+  height: var(--app-bar-height);
+  background-color: var(--app-bar-background-color);
+  box-shadow: var(--app-bar-shadow);
+  @apply tw-box-border;
+}
+
+.vc-app-bar--mobile {
+  @apply tw-pr-0 tw-pl-3 #{!important};
+}
+
+.vc-app-bar__logo {
+  @apply tw-h-1/2 tw-cursor-pointer tw-mx-4;
+}
+
+.vc-app-bar__title {
+  @apply tw-text-[color:var(--app-bar-product-name-color)] tw-font-medium;
+  font-size: var(--app-bar-product-name-size);
+}
+
+.vc-app-bar__blade-title {
+  @apply tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-ml-2;
+  @apply tw-leading-snug;
+}
+
+.vc-app-bar__backlink {
+  @apply tw-ml-3;
+}
+
+.vc-app-bar__backlink-text {
+  @apply tw-ml-2 tw-text-lg;
+}
+
+.vc-app__spacer {
+  @apply tw-grow tw-basis-0;
+}
+
+.vc-app__toolbar {
+  @apply tw-flex tw-h-full tw-box-border;
+}
+
+.vc-app__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/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -1,51 +1,51 @@
 <template>
   <div
-    class="vc-app-menu-link tw-cursor-pointer tw-group tw-px-[19px]"
+    class="vc-app-menu-link"
     @click="onMenuItemClick"
   >
     <div
-      class="vc-app-menu-item tw-flex"
+      class="vc-app-menu-link__item"
       :class="[
         {
-          'vc-app-menu-item_active': isMenuItemActive,
-          'vc-app-menu-item_no-hover': !children?.length,
-          'vc-app-menu-item_child-opened': expand && isOpened,
-          'vc-app-menu-item_collapsed': !expand,
+          'vc-app-menu-link__item_active': isMenuItemActive,
+          'vc-app-menu-link__item_no-hover': !children?.length,
+          'vc-app-menu-link__item_child-opened': expand && isOpened,
+          'vc-app-menu-link__item_collapsed': !expand,
         },
       ]"
     >
       <div
         v-if="icon"
-        class="vc-app-menu-item__icon tw-w-[var(--app-menu-item-icon-width)]"
+        class="vc-app-menu-link__icon"
       >
         <VcIcon
-          class="tw-text-center"
+          class="vc-app-menu-link__icon-content"
           :icon="icon"
           size="m"
         />
       </div>
       <div
         v-if="expand"
-        class="vc-app-menu-item__title tw-capitalize"
+        class="vc-app-menu-link__title"
       >
-        <div class="tw-truncate">
+        <div class="vc-app-menu-link__title-truncate">
           {{ title }}
         </div>
         <VcIcon
           v-if="!!children?.length || false"
-          class="vc-app-menu-item__title-icon"
+          class="vc-app-menu-link__title-icon"
           :icon="`fas fa-chevron-${isOpened ? 'up' : 'down'}`"
           size="xs"
-        ></VcIcon>
+        />
       </div>
     </div>
   </div>
-  <!-- Nested menu items -->
+
   <div
     v-show="isOpened"
-    class="vc-app-menu-item__child"
+    class="vc-app-menu-link__child"
     :class="{
-      '!tw-ml-0': !expand,
+      'vc-app-menu-link__child-collapsed': !expand,
     }"
   >
     <template
@@ -58,7 +58,7 @@
         custom
       >
         <div
-          class="vc-app-menu-item__child-item-link tw-cursor-pointer tw-z-[2] tw-px-[19px]"
+          class="vc-app-menu-link__child-item-link"
           :data-test-id="nested.routeId"
           @click="$emit('onClick', nested)"
         >
@@ -66,29 +66,29 @@
             :key="i"
             :class="[
               {
-                'vc-app-menu-item__child-item_active': isActive(nested.url ?? ''),
-                'vc-app-menu-item__child-item_collapsed': !expand,
-                'tw-pl-[21px] tw-w-full  ': expand,
+                'vc-app-menu-link__child-item_active': isActive(nested.url ?? ''),
+                'vc-app-menu-link__child-item_collapsed': !expand,
+                'vc-app-menu-link__child-item_expanded': expand,
               },
-              'vc-app-menu-item__child-item tw-min-w-0 tw-flex  tw-h-[var(--app-menu-item-height)] tw-items-center [transition:padding_150ms_cubic-bezier(0.2,0,0,1)_0s] ',
+              'vc-app-menu-link__child-item',
             ]"
           >
             <div
               v-if="nested.icon"
-              class="vc-app-menu-item__icon tw-w-[var(--app-menu-item-icon-width)]"
+              class="vc-app-menu-link__icon"
               :class="{
-                'tw-p-0': !expand,
+                'vc-app-menu-link__icon-collapsed': !expand,
               }"
             >
               <VcIcon
-                class="tw-text-center"
+                class="vc-app-menu-link__icon-content"
                 :icon="nested.icon"
                 size="m"
               />
             </div>
             <p
               v-if="expand"
-              class="tw-truncate tw-pl-[7px]"
+              class="vc-app-menu-link__child-item-title"
             >
               {{ nested.title }}
             </p>
@@ -98,12 +98,12 @@
     </template>
   </div>
 </template>
+
 <script lang="ts" setup>
 import { ref, watch, computed, onMounted } from "vue";
 import { MenuItem } from "../../../../../../../../../core/types";
 import { VcIcon } from "./../../../../../../../";
 import { useRoute } from "vue-router";
-import * as _ from "lodash-es";
 
 export interface Props {
   children?: MenuItem[];
@@ -184,164 +184,154 @@ watch(isOpened, (newValue) => {
 :root {
   --app-menu-item-height: 36px;
   --app-menu-item-icon-width: 22px;
-  --app-menu-item-icon-color: #82a6bd;
-  --app-menu-item-icon-color-active: #ffffff;
-  --app-menu-item-handler-width: 10px;
-  --app-menu-item-background-color-hover: rgba(130, 166, 189, 0.5);
-  --app-menu-item-background-color-active: #82a6bd;
+  --app-menu-item-icon-color: var(--secondary-600);
+  --app-menu-item-icon-color-active: var(--additional-50);
+  --app-menu-item-background-color-hover: var(--secondary-500);
+  --app-menu-item-background-color-active: var(--secondary-600);
   --app-menu-item-hover-radius: 4px;
-  --app-menu-item-title-color: #465769;
-  --app-menu-item-title-color-active: #ffffff;
-  --app-menu-item-handler-color: #bdd1df;
+  --app-menu-item-title-color: var(--base-text-color, var(--neutrals-950));
+  --app-menu-item-title-color-active: var(--additional-50);
 
-  --app-menu-item-active-text: #2e3d4e;
-  --app-menu-item-active-icon: #2e3d4e;
+  --app-menu-item-active-text: var(--base-text-color, var(--neutrals-950));
+  --app-menu-item-active-icon: var(--base-text-color, var(--neutrals-950));
 }
 
-.vc-app-menu-link:hover .vc-app-menu-item:not(.vc-app-menu-item_active) {
-  @apply tw-bg-[color:var(--app-menu-item-background-color-hover)] tw-bg-opacity-50
-    tw-rounded-[var(--app-menu-item-hover-radius)];
+.vc-app-menu-link {
+  @apply tw-cursor-pointer tw-px-5;
 
-  .vc-app-menu-item__title {
-    @apply tw-text-[color:var(--app-menu-item-title-color-active)];
-  }
+  &:hover .vc-app-menu-link__item:not(.vc-app-menu-link__item_active) {
+    @apply tw-bg-[var(--app-menu-item-background-color-hover)] tw-bg-opacity-50
+      tw-rounded-[var(--app-menu-item-hover-radius)];
 
-  .vc-app-menu-item__icon {
-    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
-  }
+    .vc-app-menu-link__title {
+      @apply tw-text-[color:var(--app-menu-item-title-color-active)];
+    }
 
-  .vc-app-menu-item__title-icon {
-    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
-  }
+    .vc-app-menu-link__icon {
+      @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+    }
 
-  .vc-app-menu-item__handler_enabled {
-    @apply tw-visible #{!important};
+    .vc-app-menu-link__title-icon {
+      @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+    }
   }
-}
-
-.vc-app-menu-item__child-item-link:hover .vc-app-menu-item__child-item:not(.vc-app-menu-item__child-item_active) {
-  @apply tw-bg-[color:var(--app-menu-item-background-color-hover)] tw-bg-opacity-50
-    tw-rounded-[var(--app-menu-item-hover-radius)];
 
-  .vc-app-menu-item__icon {
-    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
-  }
-}
+  &__item {
+    @apply tw-flex tw-items-center tw-w-full tw-h-[var(--app-menu-item-height)]
+      tw-border-none tw-flex-nowrap tw-box-border tw-cursor-pointer tw-relative
+      tw-uppercase tw-select-none tw-py-1 tw-px-2;
 
-.vc-app-menu-item {
-  @apply tw-flex tw-items-center tw-w-full tw-h-[var(--app-menu-item-height)]
-  tw-border-none
-  tw-flex-nowrap tw-box-border tw-cursor-pointer tw-relative tw-uppercase tw-select-none tw-py-[4px] tw-px-[8px];
+    &_collapsed {
+      @apply tw-w-10;
+    }
 
-  &_collapsed {
-    @apply tw-w-[40px];
-  }
+    &_active {
+      @apply tw-bg-[color:var(--app-menu-item-background-color-active)]
+        tw-rounded-[var(--app-menu-item-hover-radius)]
+        before:tw-opacity-100;
 
-  &_active {
-    @apply tw-bg-[color:var(--app-menu-item-background-color-active)]
-    tw-rounded-[var(--app-menu-item-hover-radius)]
-    before:tw-opacity-100;
-  }
+      .vc-app-menu-link__icon {
+        @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+      }
 
-  &_child-opened {
-    .vc-app-menu-item__title {
-      @apply tw-font-bold tw-text-[color:var(--app-menu-item-active-text)] #{!important};
-    }
+      .vc-app-menu-link__title {
+        @apply tw-font-bold tw-text-[color:var(--app-menu-item-title-color-active)] #{!important};
+      }
 
-    .vc-app-menu-item__icon {
-      @apply tw-text-[color:var(--app-menu-item-active-icon)]  #{!important};
+      .vc-app-menu-link__title-icon {
+        @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+      }
     }
-  }
 
-  &__handler {
-    @apply tw-w-[var(--app-menu-item-handler-width)]
-    tw-text-[color:var(--app-menu-item-handler-color)]
-    tw-text-center tw-invisible tw-shrink-0;
+    &_child-opened {
+      .vc-app-menu-link__title {
+        @apply tw-font-bold tw-text-[color:var(--app-menu-item-active-text)] #{!important};
+      }
 
-    &_enabled {
-      @apply tw-cursor-move #{!important};
+      .vc-app-menu-link__icon {
+        @apply tw-text-[color:var(--app-menu-item-active-icon)] #{!important};
+      }
     }
   }
 
   &__icon {
     @apply tw-text-[color:var(--app-menu-item-icon-color)]
     tw-overflow-hidden tw-flex
-    tw-justify-center tw-shrink-0 tw-transition-[color] tw-duration-200;
-  }
-
-  &_active &__icon {
-    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+    tw-justify-center tw-shrink-0 tw-transition-[color] tw-duration-200 tw-w-[var(--app-menu-item-icon-width)];
   }
 
   &__title {
-    @apply tw-truncate
-    tw-text-lg
+    @apply tw-capitalize tw-text-[color:var(--app-menu-item-title-color)] tw-truncate
+    tw-text-sm
     tw-font-medium
-    tw-pl-[7px]
-    tw-text-[color:var(--app-menu-item-title-color)]
+    tw-pl-2
     [transition:color_0.2s_ease]
     tw-opacity-100 tw-w-full tw-flex tw-justify-between tw-items-center;
   }
 
-  &__title-icon {
-    @apply tw-text-[color:var(--app-menu-item-icon-color)] tw-ml-3;
+  &__title-truncate {
+    @apply tw-truncate;
   }
 
-  &_active &__title {
-    @apply tw-text-[color:var(--app-menu-item-title-color-active)]
-    tw-font-bold;
+  &__title-icon {
+    @apply tw-ml-3 tw-text-[color:var(--app-menu-item-icon-color)];
   }
 
-  &_active &__title-icon {
-    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+  &__icon-content {
+    @apply tw-text-center;
   }
 
   &__child {
-    @apply tw-gap-[4px] tw-mt-[4px] tw-flex tw-flex-col;
+    @apply tw-gap-1 tw-mt-1 tw-flex tw-flex-col;
   }
 
   &__child-item {
-    @apply tw-cursor-pointer tw-w-fit tw-py-[4px] tw-px-[8px] tw-rounded-[4px]
-    hover:tw-bg-[color:var(--app-menu-item-background-color-hover)]
+    @apply tw-cursor-pointer tw-min-w-0 tw-flex tw-h-[var(--app-menu-item-height)]
+      tw-items-center tw-transition-[padding] tw-duration-150 tw-w-fit tw-py-1 tw-px-2 tw-rounded-[4px]
+    tw-text-[color:var(--app-menu-item-title-color)] tw-text-xs
+    hover:tw-bg-[var(--app-menu-item-background-color-hover)]
     hover:tw-text-[color:var(--app-menu-item-title-color-active)];
 
+    &_expanded {
+      @apply tw-pl-5 tw-w-full #{!important};
+    }
+
+    &_collapsed {
+      @apply tw-w-10;
+    }
+
     &_active {
-      @apply tw-bg-[color:var(--app-menu-item-background-color-active)]
+      @apply tw-rounded-[var(--app-menu-item-hover-radius)]
+      tw-bg-[color:var(--app-menu-item-background-color-active)]
       tw-text-[color:var(--app-menu-item-title-color-active)] tw-font-bold
       hover:tw-bg-[color:var(--app-menu-item-background-color-active)]
       hover:tw-text-[color:var(--app-menu-item-title-color-active)];
 
-      .vc-app-menu-item__icon {
+      .vc-app-menu-link__icon {
         @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
       }
     }
-
-    &_collapsed {
-      @apply tw-w-[40px];
-    }
   }
 
-  &:hover:not(.vc-app-menu-item_active) {
-    @apply tw-bg-[color:var(--app-menu-item-background-color-hover)] tw-bg-opacity-50
-    tw-rounded-[var(--app-menu-item-hover-radius)];
+  &__child-item-title {
+    @apply tw-truncate tw-pl-2;
   }
 
-  &:hover &__title {
-    @apply tw-text-[color:var(--app-menu-item-title-color-active)];
+  &__child-item-link {
+    @apply tw-cursor-pointer tw-z-[2] tw-px-5;
   }
 
-  &:hover &__icon {
-    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
-  }
+  &__child-item-link:hover .vc-app-menu-link__child-item:not(.vc-app-menu-link__child-item_active) {
+    @apply tw-bg-[var(--app-menu-item-background-color-hover)] tw-bg-opacity-50
+      tw-rounded-[var(--app-menu-item-hover-radius)];
 
-  &:hover &__title-icon {
-    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+    .vc-app-menu-link__icon {
+      @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+    }
   }
 
-  &:hover &__handler {
-    &_enabled {
-      @apply tw-visible #{!important};
-    }
+  &__icon-collapsed {
+    @apply tw-p-0;
   }
 }
 </style>