aloha-vue 1.2.62 → 1.2.63

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.62",
+  "version": "1.2.63",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/AMenu2/AMenuPanel/AMenuPanel.js

@@ -1,5 +1,7 @@
 import {
-  h, provide, toRef,
+  h,
+  provide,
+  toRef,
 } from "vue";
 
 import AMenuBreadcrumbs from "../AMenuBreadcrumbs/AMenuBreadcrumbs";
@@ -7,6 +9,7 @@ import AMenuPanelGroup from "../AMenuPanelGroup/AMenuPanelGroup";
 
 import GroupAPI from "./compositionAPI/GroupAPI";
 import IdAPI from "./compositionAPI/IdAPI";
+import LevelAPI from "./compositionAPI/LevelAPI";
 import PanelOpenAPI from "./compositionAPI/PanelOpenAPI";
 
 export default {
@@ -83,6 +86,11 @@ export default {
       panelId,
     } = IdAPI(props);
 
+    const {
+      openedLevelIndex,
+      styleZIndex,
+    } = LevelAPI(props);
+
     const {
       isItemsWithoutGroup,
       itemsGroup,
@@ -91,7 +99,9 @@ export default {
     const {
       isChildPanelOpen,
       isPanelOpen,
-    } = PanelOpenAPI(props);
+    } = PanelOpenAPI(props, {
+      openedLevelIndex,
+    });
 
     provide("isChildPanelOpen", isChildPanelOpen);
     provide("isPanelMain", isPanelMain);
@@ -102,6 +112,7 @@ export default {
       isPanelOpen,
       itemsGroup,
       panelId,
+      styleZIndex,
     };
   },
   render() {
@@ -113,6 +124,7 @@ export default {
         a_menu_2__panel_opened: !this.isSearchActive && this.isPanelOpen,
         a_menu_2__panel_parent: !this.isSearchActive && this.isChildPanelOpen,
       }],
+      style: this.styleZIndex,
     }, [
       (!this.isPanelMain && this.isPanelOpen) && h(AMenuBreadcrumbs, {
         breadcrumbsLinkClass: this.breadcrumbsLinkClass,

package/src/AMenu2/AMenuPanel/compositionAPI/LevelAPI.js

@@ -0,0 +1,25 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function LevelAPI(props) {
+  const panelParentsOpen = toRef(props, "panelParentsOpen");
+  const parentId = toRef(props, "parentId");
+
+  const openedLevelIndex = computed(() => {
+    return panelParentsOpen.value.indexOf(parentId.value);
+  });
+
+  const styleZIndex = computed(() => {
+    if (openedLevelIndex.value !== -1) {
+      return `z-index: ${ openedLevelIndex.value + 2 };`;
+    }
+    return undefined;
+  });
+
+  return {
+    openedLevelIndex,
+    styleZIndex,
+  };
+}

package/src/AMenu2/AMenuPanel/compositionAPI/PanelOpenAPI.js

@@ -3,11 +3,12 @@ import {
   toRef,
 } from "vue";
 
-export default function PanelOpenAPI(props) {
+export default function PanelOpenAPI(props, {
+  openedLevelIndex = computed(() => -1),
+}) {
   const isPanelMain = toRef(props, "isPanelMain");
   const isSearchActive = toRef(props, "isSearchActive");
   const panelParentsOpen = toRef(props, "panelParentsOpen");
-  const parentId = toRef(props, "parentId");
 
   const isPanelOpen = computed(() => {
     if (isSearchActive.value) {
@@ -17,7 +18,7 @@ export default function PanelOpenAPI(props) {
       return panelParentsOpen.value.length === 0;
     }
     if (panelParentsOpen.value.length) {
-      return panelParentsOpen.value.indexOf(parentId.value) === panelParentsOpen.value.length - 1;
+      return openedLevelIndex.value === panelParentsOpen.value.length - 1;
     }
     return false;
   });
@@ -26,7 +27,7 @@ export default function PanelOpenAPI(props) {
     if (isPanelMain.value) {
       return panelParentsOpen.value.length > 0;
     }
-    const INDEX = panelParentsOpen.value.indexOf(parentId.value);
+    const INDEX = openedLevelIndex.value;
 
     return INDEX !== -1 && INDEX !== panelParentsOpen.value.length - 1;
   });

package/src/styles/components/AMenu2.scss

@@ -567,4 +567,5 @@
 }
 .a_menu_2__breadcrumb__ul_truncated__dropdown {
   padding: .2rem;
+  min-width: auto;
 }