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

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

@@ -3,42 +3,53 @@
     class="vc-app-menu-link"
     @click="onMenuItemClick"
   >
-    <div
-      class="vc-app-menu-link__item"
-      :class="[
-        {
-          '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-link__icon"
+    <VcTooltip>
+      <template
+        v-if="!expand"
+        #tooltip
+        >{{ title }}</template
       >
-        <VcIcon
-          class="vc-app-menu-link__icon-content"
-          :icon="icon"
-          size="m"
-        />
-      </div>
       <div
-        v-if="expand"
-        class="vc-app-menu-link__title"
+        class="vc-app-menu-link__item"
+        :class="[
+          {
+            '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 class="vc-app-menu-link__title-truncate">
-          {{ title }}
+        <div
+          v-if="icon"
+          class="vc-app-menu-link__icon"
+        >
+          <VcIcon
+            class="vc-app-menu-link__icon-content"
+            :icon="icon"
+            size="s"
+          />
+        </div>
+        <div
+          v-if="expand"
+          class="vc-app-menu-link__title"
+        >
+          <div class="vc-app-menu-link__title-truncate">
+            {{ title }}
+          </div>
+          <div
+            v-if="!!children?.length || false"
+            class="vc-app-menu-link__title-icon"
+          >
+            <VcIcon
+              class="vc-app-menu-item__title-icon"
+              :icon="isOpened ? ChevronUpIcon : ChevronDownIcon"
+              size="m"
+            ></VcIcon>
+          </div>
         </div>
-        <VcIcon
-          v-if="!!children?.length || false"
-          class="vc-app-menu-link__title-icon"
-          :icon="`fas fa-chevron-${isOpened ? 'up' : 'down'}`"
-          size="xs"
-        />
       </div>
-    </div>
+    </VcTooltip>
   </div>
 
   <div
@@ -52,58 +63,67 @@
       v-for="(nested, i) in children"
       :key="i"
     >
-      <router-link
-        v-if="$hasAccess(nested.permissions!) && nested.url"
-        :to="nested.url"
-        custom
-      >
-        <div
-          class="vc-app-menu-link__child-item-link"
-          :data-test-id="nested.routeId"
-          @click="$emit('onClick', nested)"
+      <VcTooltip>
+        <template
+          v-if="!expand"
+          #tooltip
+          >{{ nested.title }}</template
+        >
+        <router-link
+          v-if="$hasAccess(nested.permissions!) && nested.url"
+          :to="nested.url"
+          custom
         >
           <div
-            :key="i"
-            :class="[
-              {
-                '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-link__child-item',
-            ]"
+            class="vc-app-menu-link__child-item-link"
+            :data-test-id="nested.routeId"
+            @click="$emit('onClick', nested)"
           >
             <div
-              v-if="nested.icon"
-              class="vc-app-menu-link__icon"
-              :class="{
-                'vc-app-menu-link__icon-collapsed': !expand,
-              }"
+              :key="i"
+              :class="[
+                {
+                  '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-link__child-item',
+              ]"
             >
-              <VcIcon
-                class="vc-app-menu-link__icon-content"
-                :icon="nested.icon"
-                size="m"
-              />
+              <div
+                v-if="nested.icon"
+                class="vc-app-menu-link__icon"
+                :class="{
+                  'vc-app-menu-link__icon-collapsed': !expand,
+                }"
+              >
+                <VcIcon
+                  class="vc-app-menu-link__icon-content"
+                  :icon="nested.icon"
+                  size="m"
+                />
+              </div>
+              <p
+                v-if="expand"
+                class="vc-app-menu-link__child-item-title"
+              >
+                {{ nested.title }}
+              </p>
             </div>
-            <p
-              v-if="expand"
-              class="vc-app-menu-link__child-item-title"
-            >
-              {{ nested.title }}
-            </p>
           </div>
-        </div>
-      </router-link>
+        </router-link>
+      </VcTooltip>
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch, computed, onMounted } from "vue";
-import { MenuItem } from "../../../../../../../../../core/types";
+import { MenuItem } from "./../../../../../../../../../core/types";
 import { VcIcon } from "./../../../../../../../";
 import { useRoute } from "vue-router";
+import ChevronUpIcon from "./../../../../../../../atoms/vc-icon/icons/ChevronUpIcon.vue";
+import ChevronDownIcon from "./../../../../../../../atoms/vc-icon/icons/ChevronDownIcon.vue";
 
 export interface Props {
   children?: MenuItem[];
@@ -182,26 +202,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 +238,25 @@ 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;
+      @apply tw-justify-center;
+
+      .vc-app-menu-link__title {
+        @apply tw-hidden;
+      }
     }
 
     &_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 +264,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 +282,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 +314,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)];
 
@@ -297,15 +324,13 @@ watch(isOpened, (newValue) => {
     }
 
     &_collapsed {
-      @apply tw-w-10;
+      @apply tw-w-auto tw-justify-center;
     }
 
     &_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 +339,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] tw-w-full;
   }
 
   &__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

@@ -1,106 +1,62 @@
 <template>
-  <Sidebar
-    :is-expanded="$isMobile.value ? isMobileVisible : false"
-    render="mobile"
-    @close="() => (isMobileVisible = false)"
+  <div
+    v-if="isMenuVisible"
+    class="vc-app-menu"
+    :class="{
+      'vc-app-menu--mobile': $isMobile.value,
+      'vc-app-menu--collapsed': $isDesktop.value && !isExpanded,
+    }"
   >
-    <template #content>
-      <div
-        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)"
+    <div
+      class="vc-app-menu__inner"
+      :class="{
+        'vc-app-menu__inner--desktop': $isDesktop.value,
+        'vc-app-menu__inner--collapsed': $isDesktop.value && !isExpanded,
+      }"
+    >
+      <!-- Show scrollable area with menu items -->
+      <VcContainer
+        :no-padding="true"
+        class="vc-app-menu__container"
       >
-        <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"
-            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
+        <div class="vc-app-menu__menu-items">
+          <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 : true"
+            @click="handleMenuItemClick( item, $event)"
+          />
+        </div>
+      </VcContainer>
+
+      <!-- <div
             v-if="version"
             class="vc-app-menu__version"
             @click="$emit('version:click')"
           >
             {{ version }}
-          </div>
-        </div>
-      </div>
-    </template>
-  </Sidebar>
+          </div> -->
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, Ref, inject } from "vue";
 import VcAppMenuItem from "./_internal/vc-app-menu-item/vc-app-menu-item.vue";
-import { VcContainer, VcIcon } from "./../../../../";
+import { VcContainer } from "./../../../../";
 import { useMenuService } from "../../../../../../core/composables";
 import { MenuItem } from "../../../../../../core/types";
-import { useLocalStorage } from "@vueuse/core";
-import { Sidebar } from "../../../../../../shared/components";
+import { useMenuExpanded } from "../../../../../../shared/composables/useMenuExpanded";
+import { useAppMenuState } from "../composables/useAppMenuState";
 
 export interface Props {
   version: string | undefined;
@@ -117,50 +73,29 @@ withDefaults(defineProps<Props>(), {
   version: "",
 });
 
-defineEmits<Emits>();
+const emit = defineEmits<Emits>();
+
+const isMobile = inject("isMobile") as Ref<boolean>;
 const { menuItems } = useMenuService();
-const isExpanded = useLocalStorage("VC_APP_MENU_EXPANDED", true);
-const isExpandedOver = ref(false);
+const { isExpanded } = useMenuExpanded();
+const { closeAll } = useAppMenuState();
 
-const isMobileVisible = ref(false);
+const handleMenuItemClick = (item: MenuItem, nestedItem?: MenuItem) => {
+  if (isMobile.value) {
+    closeAll();
+  }
+  emit("item:click", nestedItem ? nestedItem : item);
+};
 
 const isMenuVisible = computed(() => {
   return !!menuItems.value.length;
 });
-
-function toggleMenu() {
-  isExpanded.value = !isExpanded.value;
-}
-
-let expandTimeout: ReturnType<typeof setTimeout> | null = null;
-
-function expandOverHandler(state: boolean) {
-  if (expandTimeout) {
-    clearTimeout(expandTimeout);
-  }
-
-  if (state) {
-    expandTimeout = setTimeout(() => {
-      if (isExpandedOver.value !== state) {
-        isExpandedOver.value = state;
-      }
-    }, 50);
-  } else {
-    isExpandedOver.value = state;
-  }
-}
-
-defineExpose({
-  isMobileVisible,
-});
 </script>
 
 <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-background-color: var(--app-bar-background, var(--neutrals-50));
   --app-menu-version-color: var(--neutrals-400);
 
   --app-menu-close-color: var(--app-menu-burger-color, var(--primary-500));
@@ -175,10 +110,10 @@ 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};
+    @apply tw-h-full tw-w-full #{!important};
   }
 
   &.vc-app-menu--block {
@@ -198,15 +133,14 @@ 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;
     }
 
     &--collapsed {
-      @apply tw-w-[var(--app-menu-width-collapse)] #{!important};
+      // @apply tw-pt-3;
     }
 
     &--expanded {
@@ -276,5 +210,23 @@ defineExpose({
   &__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;
   }
+
+  &--collapsed {
+    // @apply tw-w-[50px];
+
+    .vc-app-menu__inner {
+      // @apply tw-w-[50px];
+    }
+  }
+
+  &--collapsed {
+    @apply tw-w-[50px];
+
+    .vc-app-menu__collapse-button {
+      svg {
+        @apply tw-rotate-180;
+      }
+    }
+  }
 }
 </style>

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/index.ts

@@ -1 +1,2 @@
 export { default as VcApp } from "./vc-app.vue";
+export { default as AppBarButtonTemplate } from "./_internal/vc-app-bar/components/app-bar-button/app-bar-button.vue";