@vc-shell/framework 1.0.128 → 1.0.130

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

@@ -2,10 +2,13 @@
   <div
     class="vc-app-menu-item"
     :class="[
-      { 'vc-app-menu-item_active': isActive && !children?.length },
-      { 'vc-app-menu-item_no-hover': children?.length },
+      {
+        'vc-app-menu-item_active': isActive(url ?? '') && !children?.length,
+        'vc-app-menu-item_no-hover': !children?.length,
+        'vc-app-menu-item_child-opened': isOpened,
+      },
     ]"
-    @click="$emit('onClick')"
+    @click="onMenuItemClick"
   >
     <div
       class="vc-app-menu-item__handler"
@@ -25,72 +28,150 @@
         size="m"
       />
     </div>
-    <div class="vc-app-menu-item__title">
+    <div class="vc-app-menu-item__title tw-capitalize">
       {{ title }}
       <VcIcon
-        v-if="children?.length"
+        v-if="!!children?.length || false"
         class="vc-app-menu-item__title-icon"
-        icon="fas fa-chevron-down"
+        :icon="`fas fa-chevron-${isOpened ? 'up' : 'down'}`"
         size="xs"
       ></VcIcon>
     </div>
   </div>
+  <!-- Nested menu items -->
+  <div
+    v-show="isOpened"
+    class="vc-app-menu-item__child"
+  >
+    <template
+      v-for="(nested, i) in children"
+      :key="i"
+    >
+      <router-link
+        :to="nested.url"
+        custom
+      >
+        <div
+          :key="i"
+          :class="[
+            {
+              'vc-app-menu-item__child-item_active': isActive(nested.url),
+            },
+            'vc-app-menu-item__child-item',
+          ]"
+          @click="$emit('onClick', nested)"
+        >
+          {{ nested.title }}
+        </div>
+      </router-link>
+    </template>
+  </div>
 </template>
 <script lang="ts" setup>
-import { BladeMenu } from "./../../../../../../../../../core/types";
+import { ref, watch } from "vue";
+import { MenuItem } from "../../../../../../../../../core/types";
 import { VcIcon } from "./../../../../../../../";
+import { useRoute } from "vue-router";
 
 export interface Props {
-  isActive?: boolean;
-  children?: BladeMenu[];
+  children?: MenuItem[];
   sticky?: boolean;
   icon: string;
-  title: string;
+  title?: string;
+  url?: string;
 }
 
 export interface Emits {
-  (event: "onClick"): void;
+  (event: "onClick", item?: MenuItem): void;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   sticky: true,
 });
 
-defineEmits<Emits>();
+const emit = defineEmits<Emits>();
+
+const isOpened = ref(false);
+const route = useRoute();
+
+watch(
+  () => route.path,
+  () => {
+    if (props.children && props.children.length && props.children.find((x) => x?.url === route?.path)) {
+      isOpened.value = true;
+    }
+  },
+  { immediate: true },
+);
+
+function onMenuItemClick() {
+  if (!props.children?.length) {
+    emit("onClick");
+  } else {
+    isOpened.value = !isOpened.value;
+  }
+}
+
+const isActive = (url: string) => {
+  if (url) {
+    const splitted = url.split("/").filter((part) => part !== "");
+    const active = route.path.split("/").filter((part) => part !== "")[0] === splitted[0];
+
+    if (active && props.children?.length) {
+      isOpened.value = true;
+    }
+
+    return active;
+  } else return false;
+};
 </script>
 
 <style lang="scss">
 :root {
-  --app-menu-item-height: 38px;
+  --app-menu-item-height: 36px;
   --app-menu-item-icon-width: 20px;
-  --app-menu-item-icon-color: #337599;
+  --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: #337599;
+  --app-menu-item-background-color-hover: rgba(130, 166, 189, 0.5);
+  --app-menu-item-background-color-active: #82a6bd;
   --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-active-text: #2e3d4e;
+  --app-menu-item-active-icon: #2e3d4e;
 }
 
 .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-flex-nowrap tw-box-border tw-cursor-pointer tw-relative tw-uppercase tw-select-none;
 
   &_active {
-    @apply tw-bg-[color:var(--app-menu-item-background-color-hover)]
+    @apply tw-bg-[color:var(--app-menu-item-background-color-active)]
     tw-rounded-[var(--app-menu-item-hover-radius)]
     before:tw-opacity-100;
   }
 
+  &_child-opened {
+    .vc-app-menu-item__title {
+      @apply tw-font-bold tw-text-[color:var(--app-menu-item-active-text)] #{!important};
+    }
+
+    .vc-app-menu-item__icon {
+      @apply tw-text-[color:var(--app-menu-item-active-icon)]  #{!important};
+    }
+  }
+
   &__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;
 
     &_enabled {
-      @apply tw-cursor-move;
+      @apply tw-cursor-move #{!important};
     }
   }
 
@@ -109,10 +190,10 @@ defineEmits<Emits>();
     @apply tw-truncate
     tw-text-lg
     tw-font-medium
-    tw-px-3
+    tw-px-2
     tw-text-[color:var(--app-menu-item-title-color)]
-    [transition:color_0.2s_ease] [transition:opacity_0.1s_ease]
-    tw-opacity-100 tw-w-full;
+    [transition:color_0.2s_ease]
+    tw-opacity-100 tw-w-full tw-flex tw-justify-between tw-items-center;
   }
 
   &__title-icon {
@@ -128,8 +209,25 @@ defineEmits<Emits>();
     @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
   }
 
-  &:hover {
-    @apply tw-bg-[color:var(--app-menu-item-background-color-hover)]
+  &__child {
+    @apply tw-ml-[32px] tw-gap-[4px] tw-mt-[4px] tw-flex tw-flex-col;
+  }
+
+  &__child-item {
+    @apply tw-cursor-pointer tw-w-fit tw-py-[4px] tw-px-[6px] tw-rounded-[4px]
+    hover:tw-bg-[color:var(--app-menu-item-background-color-hover)]
+    hover:tw-text-[color:var(--app-menu-item-title-color-active)];
+
+    &_active {
+      @apply 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)];
+    }
+  }
+
+  &: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)];
   }
 
@@ -147,7 +245,7 @@ defineEmits<Emits>();
 
   &:hover &__handler {
     &_enabled {
-      @apply tw-invisible;
+      @apply tw-visible #{!important};
     }
   }
 }

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

@@ -1,18 +1,16 @@
 <template>
   <div>
-    <template v-if="component && component.url">
+    <template v-if="url">
       <router-link
-        v-slot="{ isExactActive }"
-        :to="component.url"
+        :to="url"
         custom
       >
         <vc-app-menu-link
-          :is-active="isExactActive"
-          :children="children"
           :sticky="sticky"
           :icon="icon ?? ''"
           :title="title ?? ''"
-          @on-click="onMenuItemClick"
+          :url="url"
+          @on-click="$emit('click')"
         />
       </router-link>
     </template>
@@ -22,124 +20,34 @@
         :sticky="sticky"
         :icon="icon ?? ''"
         :title="title ?? ''"
-        @on-click="onMenuItemClick"
+        @on-click="$emit('click', $event)"
       />
-
-      <!-- Nested menu items -->
-      <div
-        v-if="isOpened"
-        class="vc-app-menu-item__child"
-      >
-        <template
-          v-for="(nested, i) in children"
-          :key="i"
-        >
-          <router-link
-            v-slot="{ isActive }"
-            :to="(nested.component?.url as string)"
-            custom
-          >
-            <div
-              v-if="nested.isVisible === undefined || nested.isVisible"
-              :key="i"
-              :class="[
-                {
-                  'vc-app-menu-item__child-item_active': isActive,
-                },
-                'vc-app-menu-item__child-item',
-              ]"
-              @click="$emit('child:click', { item: nested })"
-            >
-              {{ nested.title }}
-            </div>
-          </router-link>
-        </template>
-      </div>
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
-import { BladeMenu } from "./../../../../../../../../core/types";
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
-import { useRoute } from "vue-router";
-import { BladeInstanceConstructor } from "./../../../../../../../../shared";
+import { MenuItem } from "../../../../../../../../core/types";
 
 export interface Props {
   sticky?: boolean;
   isVisible?: boolean;
-  component?: BladeInstanceConstructor;
+  url?: string;
   icon?: string;
   title?: string;
-  children?: BladeMenu[];
+  children?: MenuItem[];
 }
 
 export interface Emits {
-  (event: "click"): void;
-  (
-    event: "child:click",
-    {
-      item,
-    }: {
-      item: BladeMenu;
-    }
-  ): void;
+  (event: "click", item?: MenuItem): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   sticky: true,
   component: undefined,
   children: () => [],
 });
 
-const route = useRoute();
-const emit = defineEmits<Emits>();
-
-const isOpened = ref(false);
-
-onMounted(() => {
-  if (props.children && props.children.length && props.children.find((x) => x.component?.url === route?.path)) {
-    isOpened.value = true;
-  }
-});
-
-function onMenuItemClick() {
-  if (!props.children?.length) {
-    emit("click");
-  } else {
-    isOpened.value = !isOpened.value;
-  }
-}
+defineEmits<Emits>();
 </script>
-
-<style lang="scss">
-:root {
-  --app-menu-item-height: 38px;
-  --app-menu-item-icon-width: 20px;
-  --app-menu-item-icon-color: #337599;
-  --app-menu-item-icon-color-active: #ffffff;
-  --app-menu-item-handler-width: 10px;
-  --app-menu-item-background-color-hover: #337599;
-  --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;
-}
-.vc-app-menu-item {
-  &__child {
-    @apply tw-ml-[42px] tw-gap-[4px] tw-flex tw-flex-col;
-  }
-
-  &__child-item {
-    @apply tw-cursor-pointer tw-w-fit tw-py-[5px] tw-px-[9px] tw-rounded-[4px]
-    hover:tw-bg-[color:var(--app-menu-item-background-color-hover)]
-    hover:tw-text-[color:var(--app-menu-item-title-color-active)];
-
-    &_active {
-      @apply tw-bg-[color:var(--app-menu-item-background-color-hover)]
-      tw-text-[color:var(--app-menu-item-title-color-active)] tw-font-bold;
-    }
-  }
-}
-</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="isMenuVisible"
-    class="tw-relative tw-w-[var(--app-menu-width)] tw-transition tw-duration-100 tw-pt-4"
+    class="tw-relative tw-w-[var(--app-menu-width)] tw-transition tw-duration-100 tw-pt-[22px]"
     :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,
@@ -32,53 +32,35 @@
         :no-padding="true"
         class="tw-grow tw-basis-0"
       >
-        <div class="tw-gap-[5px] tw-flex tw-flex-col tw-px-4 tw-h-full">
-          <template
-            v-for="(item, index) in mobileMenuItems"
-            :key="`info_item_${index}`"
-          >
-            <template v-if="item.isVisible === undefined || item.isVisible">
-              <component
-                :is="item.component"
-                v-if="item.component"
-                v-bind="item.options"
-                class="tw-p-0 tw-mb-2 tw-w-full tw-h-auto"
-              ></component>
-            </template>
-          </template>
-          <template
-            v-for="(item, index) in items"
-            :key="index"
-          >
-            <VcAppMenuItem
-              v-if="item.isVisible === undefined || item.isVisible"
-              :component="item.component"
-              :icon="item.icon"
-              :children="item.children"
-              :is-visible="item.isVisible as boolean"
-              :title="item.title as string"
-              @click="
-                () => {
-                  $emit('item:click', { item });
-                  isMobileVisible = false;
-                }
-              "
-              @child:click="
-                ({ item: blade }) => {
-                  $emit('item:click', { item: blade });
-                  isMobileVisible = false;
-                }
-              "
-            />
-          </template>
-          <div
-            class="tw-text-[color:var(--app-menu-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1"
-            @click="$emit('version:click')"
-          >
-            {{ version }}
-          </div>
+        <div class="tw-gap-[5px] tw-flex tw-flex-col tw-px-6 tw-h-full">
+          <slot
+            v-if="!$isDesktop.value"
+            name="mobile"
+          ></slot>
+
+          <VcAppMenuItem
+            v-for="item in menuItems"
+            :key="item?.id"
+            :is-visible="true"
+            :url="item.url"
+            :icon="item.icon"
+            :title="item.title as string"
+            :children="item.children"
+            @click="
+              (event) => {
+                $emit('item:click', event ? event : item);
+                isMobileVisible = false;
+              }
+            "
+          />
         </div>
       </VcContainer>
+      <div
+        class="tw-text-[color:var(--app-menu-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1"
+        @click="$emit('version:click')"
+      >
+        {{ version }}
+      </div>
     </div>
   </div>
 </template>
@@ -87,31 +69,31 @@
 import { computed, ref } from "vue";
 import VcAppMenuItem from "./_internal/vc-app-menu-item/vc-app-menu-item.vue";
 import { VcContainer, VcIcon } from "./../../../../";
-import { BladeMenu, IBladeToolbar } from "./../../../../../../core/types";
+import { useMenuService } from "../../../../../../core/composables";
+import { MenuItem } from "../../../../../../core/types";
 
 export interface Props {
-  items?: BladeMenu[];
-  mobileMenuItems?: IBladeToolbar[];
   version: string;
 }
 
 export interface Emits {
-  (event: "item:click", { item }: { item: BladeMenu }): void;
+  (event: "item:click", item: MenuItem): void;
   (event: "version:click"): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   items: () => [],
   mobileMenuItems: () => [],
   version: "",
 });
 
 defineEmits<Emits>();
+const { menuItems } = useMenuService();
 
 const isMobileVisible = ref(false);
 
 const isMenuVisible = computed(() => {
-  return props.items.some((item) => item.isVisible);
+  return !!menuItems.value.length;
 });
 
 defineExpose({

package/ui/components/organisms/vc-app/index.ts

@@ -1,12 +1 @@
-import { VNode } from "vue";
-import _App from "./vc-app.vue";
-
-export const VcApp = _App as typeof _App & {
-  new (): {
-    $slots: {
-      appSwitcher: () => VNode[];
-      bladeNavigation: () => VNode[];
-      passwordChange: () => VNode[];
-    };
-  };
-};
+export { default as VcApp } from "./vc-app.vue";

package/ui/components/organisms/vc-app/vc-app.stories.ts

@@ -18,43 +18,43 @@ export const Primary: Story = {
     template: '<vc-app v-bind="args"></vc-app>',
   }),
   args: {
-    menuItems: [
-      {
-        title: "Dashboard",
-        icon: "fas fa-home",
-        isVisible: true,
-      },
-      {
-        title: "Orders",
-        icon: "fas fa-file-alt",
-        isVisible: true,
-      },
-      {
-        title: "Products",
-        icon: "fas fa-box-open",
-        isVisible: true,
-      },
-      {
-        title: "Offers",
-        icon: "fas fa-file-invoice",
-        isVisible: true,
-      },
-      {
-        title: "Import",
-        icon: "fas fa-file-import",
-        isVisible: true,
-      },
-      {
-        title: "Logout",
-        icon: "fas fa-sign-out-alt",
-      },
-    ],
-    toolbarItems: [
-      { id: "1", icon: "fas fa-globe", title: "Language selector" },
-      { id: "2", icon: "fas fa-bell", title: "Notifications", isAccent: true },
-    ],
+    // menuItems: [
+    //   {
+    //     title: "Dashboard",
+    //     icon: "fas fa-home",
+    //     isVisible: true,
+    //   },
+    //   {
+    //     title: "Orders",
+    //     icon: "fas fa-file-alt",
+    //     isVisible: true,
+    //   },
+    //   {
+    //     title: "Products",
+    //     icon: "fas fa-box-open",
+    //     isVisible: true,
+    //   },
+    //   {
+    //     title: "Offers",
+    //     icon: "fas fa-file-invoice",
+    //     isVisible: true,
+    //   },
+    //   {
+    //     title: "Import",
+    //     icon: "fas fa-file-import",
+    //     isVisible: true,
+    //   },
+    //   {
+    //     title: "Logout",
+    //     icon: "fas fa-sign-out-alt",
+    //   },
+    // ],
+    // toolbarItems: [
+    //   { id: "1", icon: "fas fa-globe", title: "Language selector" },
+    //   { id: "2", icon: "fas fa-bell", title: "Notifications", isAccent: true },
+    // ],
     isReady: true,
-    isAuthorized: true,
+    // isAuthorized: true,
     version: "0.0.100",
     logo: "images/main-logo.svg",
   },