@vc-shell/framework 1.0.326 → 1.1.0-alpha.1

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

@@ -21,7 +21,7 @@
         <VcIcon
           class="vc-app-menu-link__icon-content"
           :icon="icon"
-          size="m"
+          size="s"
         />
       </div>
       <div
@@ -31,12 +31,12 @@
         <div class="vc-app-menu-link__title-truncate">
           {{ title }}
         </div>
-        <VcIcon
+        <div
           v-if="!!children?.length || false"
           class="vc-app-menu-link__title-icon"
-          :icon="`fas fa-chevron-${isOpened ? 'up' : 'down'}`"
-          size="xs"
-        />
+        >
+          {{ isOpened ? "-" : "+" }}
+        </div>
       </div>
     </div>
   </div>
@@ -73,7 +73,7 @@
               'vc-app-menu-link__child-item',
             ]"
           >
-            <div
+            <!-- <div
               v-if="nested.icon"
               class="vc-app-menu-link__icon"
               :class="{
@@ -85,12 +85,12 @@
                 :icon="nested.icon"
                 size="m"
               />
-            </div>
+            </div> -->
             <p
               v-if="expand"
               class="vc-app-menu-link__child-item-title"
             >
-              {{ nested.title }}
+              — {{ nested.title }}
             </p>
           </div>
         </div>
@@ -182,26 +182,25 @@ watch(isOpened, (newValue) => {
 
 <style lang="scss">
 :root {
-  --app-menu-item-height: 36px;
-  --app-menu-item-icon-width: 22px;
-  --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: var(--base-text-color, var(--neutrals-950));
-  --app-menu-item-title-color-active: var(--additional-50);
+  --app-menu-item-height: 38px;
+  --app-menu-item-icon-width: 16px;
+  --app-menu-item-icon-color: var(--neutrals-600);
+  --app-menu-item-icon-color-active: var(--primary-700);
+  --app-menu-item-background-color-hover: var(--neutrals-100);
+  --app-menu-item-background-color-active: var(--primary-100);
+  --app-menu-item-hover-radius: 6px;
+  --app-menu-item-title-color: var(--neutrals-600);
+  --app-menu-item-title-color-active: var(--primary-700);
 
   --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 {
-  @apply tw-cursor-pointer tw-px-5;
+  @apply tw-cursor-pointer tw-w-full;
 
   &: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)];
+    @apply tw-bg-[var(--app-menu-item-background-color-hover)] tw-bg-opacity-50 tw-rounded;
 
     .vc-app-menu-link__title {
       @apply tw-text-[color:var(--app-menu-item-title-color-active)];
@@ -219,23 +218,21 @@ watch(isOpened, (newValue) => {
   &__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;
+      tw-uppercase tw-select-none tw-px-2;
 
     &_collapsed {
       @apply tw-w-10;
     }
 
     &_active {
-      @apply tw-bg-[color:var(--app-menu-item-background-color-active)]
-        tw-rounded-[var(--app-menu-item-hover-radius)]
-        before:tw-opacity-100;
+      @apply tw-bg-[color:var(--app-menu-item-background-color-active)] tw-rounded;
 
       .vc-app-menu-link__icon {
         @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
       }
 
       .vc-app-menu-link__title {
-        @apply tw-font-bold tw-text-[color:var(--app-menu-item-title-color-active)] #{!important};
+        @apply tw-text-[color:var(--app-menu-item-title-color-active)] #{!important};
       }
 
       .vc-app-menu-link__title-icon {
@@ -243,15 +240,15 @@ watch(isOpened, (newValue) => {
       }
     }
 
-    &_child-opened {
-      .vc-app-menu-link__title {
-        @apply tw-font-bold tw-text-[color:var(--app-menu-item-active-text)] #{!important};
-      }
+    // &_child-opened {
+    //   .vc-app-menu-link__title {
+    //     @apply tw-text-[color:var(--app-menu-item-active-text)] #{!important};
+    //   }
 
-      .vc-app-menu-link__icon {
-        @apply tw-text-[color:var(--app-menu-item-active-icon)] #{!important};
-      }
-    }
+    //   .vc-app-menu-link__icon {
+    //     @apply tw-text-[color:var(--app-menu-item-active-icon)] #{!important};
+    //   }
+    // }
   }
 
   &__icon {
@@ -261,14 +258,20 @@ watch(isOpened, (newValue) => {
   }
 
   &__title {
-    @apply tw-capitalize tw-text-[color:var(--app-menu-item-title-color)] tw-truncate
+    @apply tw-text-[color:var(--app-menu-item-title-color)] tw-truncate
     tw-text-sm
-    tw-font-medium
-    tw-pl-2
+    tw-font-normal
+    tw-leading-normal
+    tw-normal-case
+    tw-pl-4
     [transition:color_0.2s_ease]
     tw-opacity-100 tw-w-full tw-flex tw-justify-between tw-items-center;
   }
 
+  &__title-icon {
+    @apply tw-ml-3 tw-text-lg;
+  }
+
   &__title-truncate {
     @apply tw-truncate;
   }
@@ -287,8 +290,8 @@ watch(isOpened, (newValue) => {
 
   &__child-item {
     @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
+      tw-items-center tw-transition-[padding] tw-duration-150 tw-w-fit tw-py-2 tw-px-3
+    tw-text-[color:var(--app-menu-item-title-color)] tw-text-sm
     hover:tw-bg-[var(--app-menu-item-background-color-hover)]
     hover:tw-text-[color:var(--app-menu-item-title-color-active)];
 
@@ -301,11 +304,9 @@ watch(isOpened, (newValue) => {
     }
 
     &_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)];
+      @apply tw-bg-[color:var(--app-menu-item-background-color-active)] tw-rounded #{!important};
+      @apply tw-font-medium;
+      @apply tw-text-[color:var(--app-menu-item-title-color-active)] #{!important};
 
       .vc-app-menu-link__icon {
         @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
@@ -314,16 +315,15 @@ watch(isOpened, (newValue) => {
   }
 
   &__child-item-title {
-    @apply tw-truncate tw-pl-2;
+    @apply tw-truncate tw-pl-5;
   }
 
   &__child-item-link {
-    @apply tw-cursor-pointer tw-z-[2] tw-px-5;
+    @apply tw-cursor-pointer tw-z-[2];
   }
 
   &__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)];
+    @apply tw-bg-[var(--app-menu-item-background-color-hover)] tw-bg-opacity-50 tw-rounded;
 
     .vc-app-menu-link__icon {
       @apply tw-text-[color:var(--app-menu-item-icon-color-active)];

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

@@ -11,35 +11,14 @@
         :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)"
       >
         <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),
           }"
         >
-          <div
-            v-if="$isDesktop.value"
-            class="vc-app-menu__burger-container"
-          >
-            <button
-              class="vc-app-menu__burger-button"
-              @click="toggleMenu"
-            >
-              <VcIcon
-                :icon="isExpanded ? 'fas fa-angle-double-left' : 'fas fa-angle-double-right'"
-                size="xl"
-              ></VcIcon>
-            </button>
-          </div>
-
           <!-- Show scrollable area with menu items -->
           <VcContainer
             :no-padding="true"
@@ -80,13 +59,13 @@
             </div>
           </VcContainer>
 
-          <div
+          <!-- <div
             v-if="version"
             class="vc-app-menu__version"
             @click="$emit('version:click')"
           >
             {{ version }}
-          </div>
+          </div> -->
         </div>
       </div>
     </template>
@@ -157,8 +136,6 @@ defineExpose({
 
 <style lang="scss">
 :root {
-  --app-menu-width: 230px;
-  --app-menu-width-collapse: 70px;
   --app-menu-background: var(--app-background, var(--primary-50));
   --app-menu-background-color: var(--additional-50);
   --app-menu-version-color: var(--neutrals-400);
@@ -175,7 +152,7 @@ defineExpose({
 }
 
 .vc-app-menu {
-  @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] tw-z-[1001];
+  @apply tw-h-full;
 
   &.vc-app-menu--mobile {
     @apply tw-hidden tw-h-full tw-w-full #{!important};
@@ -198,11 +175,10 @@ defineExpose({
   }
 
   &__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};
+    @apply tw-flex tw-flex-col tw-h-full;
 
     &--desktop {
-      @apply tw-left-0 tw-pt-6;
+      @apply tw-left-0 tw-pt-2;
     }
 
     &--collapsed {

package/ui/components/organisms/vc-app/composables/useToolbarSlots.ts

@@ -0,0 +1,37 @@
+import { useSlots, type Slot, h } from "vue";
+import type { IMenuItem } from "../../../../../core/types";
+import { ThemeSelector, LanguageSelector } from "../../../../../shared/components";
+
+export function useToolbarSlots() {
+  const slots = useSlots();
+
+  const getToolbarMenuItems = (): IMenuItem[] => {
+    const menuItems: IMenuItem[] = [];
+
+    const slotConfig = {
+      "toolbar:theme-selector": ThemeSelector,
+      "toolbar:language-selector": LanguageSelector,
+    };
+
+    // Check each slot
+    Object.entries(slotConfig).forEach(([slotName, defaultComponent]) => {
+      const slot = slots[slotName];
+      if (slot) {
+        // If the slot exists, use its contents
+        menuItems.push({
+          component: slot,
+        });
+      } else {
+        menuItems.push({
+          component: () => h(defaultComponent),
+        });
+      }
+    });
+
+    return menuItems;
+  };
+
+  return {
+    getToolbarMenuItems,
+  };
+}

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

@@ -12,74 +12,81 @@
     }"
   >
     <!-- 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"
+
+    <div class="vc-app__main-content">
+      <!-- Init main menu -->
+      <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>
-          <slot name="toolbar:notifications-dropdown">
+        </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 />
+            </slot>
+            <slot name="toolbar:notifications-dropdown">
+              <NotificationDropdown />
+            </slot>
+          </slot> -->
+
+          <slot
+            name="toolbar:notifications-dropdown"
+            :notifications-dropdown="NotificationDropdown"
+          >
             <NotificationDropdown />
           </slot>
+        </template>
+
+        <template #navmenu>
+          <VcAppMenu
+            v-if="!disableMenu"
+            ref="menu"
+            class="vc-app__app-menu"
+            :version="version"
+            @item:click="onMenuItemClick"
+          >
+          </VcAppMenu>
+        </template>
+
+        <template #user-dropdown>
           <slot
             name="toolbar:user-dropdown"
-            :user-dropdown="UserDropdownButton"
+            :user-dropdown="UserDropdownComponent as unknown as typeof UserDropdownButton"
           >
-            <UserDropdownButton
-              :avatar-url="avatar"
-              :role="role"
-              :name="name"
-            />
+            <UserDropdownComponent />
           </slot>
-        </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"
-      >
-      </VcAppMenu>
+        </template>
+      </VcAppBar>
 
       <!-- Blade navigation -->
       <div
@@ -98,23 +105,22 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, provide } from "vue";
+import { h, inject, provide } 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 { MenuItem } from "../../../../core/types";
+import { useToolbarSlots } from "./composables/useToolbarSlots";
 
 export interface Props {
   isReady: boolean;
@@ -133,14 +139,14 @@ defineOptions({
 
 defineSlots<{
   "app-switcher": void;
-  toolbar: (props: {
-    UserDropdownButton: typeof UserDropdownButton;
-    LanguageSelector: typeof LanguageSelector;
-    NotificationDropdown: typeof NotificationDropdown;
-  }) => 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:notifications-dropdown": (props: { notificationsDropdown: typeof NotificationDropdown }) => void;
   "toolbar:user-dropdown": (props: { userDropdown: typeof UserDropdownButton }) => void;
   "blade-navigation": void;
   "toolbar:theme-selector": void;
@@ -162,6 +168,17 @@ const route = useRoute();
 const { isAuthenticated } = useUser();
 const routes = router.getRoutes();
 
+const { getToolbarMenuItems } = useToolbarSlots();
+
+const UserDropdownComponent = () => {
+  return h(UserDropdownButton, {
+    avatar: props.avatar,
+    role: props.role,
+    name: props.name,
+    menuItems: getToolbarMenuItems(),
+  });
+};
+
 const onMenuItemClick = function (item: MenuItem) {
   console.debug(`vc-app#onMenuItemClick() called.`);
   if (item.routeId) {
@@ -234,7 +251,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;

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

@@ -63,9 +63,9 @@
       v-if="!$isMobile.value"
       class="vc-blade-header__controls"
     >
-      <template v-if="expandable">
+      <template v-if="blade.expandable">
         <div
-          v-if="maximized"
+          v-if="blade.maximized"
           class="vc-blade-header__button"
           @click="onCollapse"
         >
@@ -79,10 +79,7 @@
           class="vc-blade-header__button"
           @click="onExpand"
         >
-          <VcIcon
-            icon="fas fa-window-maximize"
-            size="s"
-          />
+          <VcIcon :icon="AppWindowIcon" />
         </div>
       </template>
       <div
@@ -90,7 +87,10 @@
         class="vc-blade-header__button"
         @click="onClose"
       >
-        <VcIcon icon="fas fa-times" />
+        <VcIcon
+          :icon="CrossSignIcon"
+          size="xs"
+        />
       </div>
     </div>
   </div>
@@ -98,12 +98,11 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../../../";
-import { ref } from "vue";
+import { ComputedRef, inject, ref } from "vue";
 import { useFloating, shift } from "@floating-ui/vue";
+import { CrossSignIcon, AppWindowIcon } from "../../../../atoms/vc-icon/icons";
 
 export interface Props {
-  expandable?: boolean;
-  maximized?: boolean;
   closable?: boolean;
   title?: string;
   subtitle?: string;
@@ -114,6 +113,7 @@ const props = defineProps<Props>();
 
 const emit = defineEmits(["close", "expand", "collapse"]);
 
+const blade = inject("$blade") as ComputedRef<{ expandable: boolean; maximized: boolean }>;
 const tooltipVisible = ref(false);
 const tooltipIconRef = ref<HTMLElement | null>(null);
 const tooltipRef = ref<HTMLElement | null>(null);
@@ -123,13 +123,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,7 +143,7 @@ function onClose(): void {
 
 <style lang="scss">
 :root {
-  --blade-header-height: 50px;
+  --blade-header-height: 82px;
   --blade-header-background-color: var(--additional-50);
 
   --blade-header-button-color: var(--secondary-500);
@@ -166,7 +166,7 @@ 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-5 tw-border-solid tw-border-b tw-border-b-[color:var(--blade-header-border-color)];
 
   &__actions {
     @apply tw-grow tw-basis-0 tw-overflow-hidden tw-flex tw-justify-end;
@@ -197,11 +197,11 @@ function onClose(): void {
   }
 
   &__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 +213,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>