@vc-shell/framework 1.1.0-alpha.1 → 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="s"
-        />
-      </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="!!children?.length || false"
-          class="vc-app-menu-link__title-icon"
+          v-if="expand"
+          class="vc-app-menu-link__title"
         >
-          {{ isOpened ? "-" : "+" }}
+          <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>
       </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,
-              }"
-            >
-              <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"
+            <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',
+              ]"
             >
-              — {{ nested.title }}
-            </p>
+              <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>
           </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[];
@@ -221,7 +241,11 @@ watch(isOpened, (newValue) => {
       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 {
@@ -300,7 +324,7 @@ watch(isOpened, (newValue) => {
     }
 
     &_collapsed {
-      @apply tw-w-10;
+      @apply tw-w-auto tw-justify-center;
     }
 
     &_active {
@@ -319,7 +343,7 @@ watch(isOpened, (newValue) => {
   }
 
   &__child-item-link {
-    @apply tw-cursor-pointer tw-z-[2];
+    @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) {

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

@@ -1,85 +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,
-        }"
+    <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,
-          }"
-        >
-          <!-- 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>
 </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;
@@ -96,48 +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-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));
@@ -155,7 +113,7 @@ defineExpose({
   @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 {
@@ -178,11 +136,11 @@ defineExpose({
     @apply tw-flex tw-flex-col tw-h-full;
 
     &--desktop {
-      @apply tw-left-0 tw-pt-2;
+      @apply tw-left-0;
     }
 
     &--collapsed {
-      @apply tw-w-[var(--app-menu-width-collapse)] #{!important};
+      // @apply tw-pt-3;
     }
 
     &--expanded {
@@ -252,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/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";