aloha-vue 1.0.148 → 1.0.150

package/docs/src/components/TheMenu/TheMenu.js

@@ -47,6 +47,16 @@ export default {
           },
           icon: "EyeOpen",
         },
+        {
+          group: "Hola",
+          id: "cloak2",
+          label: "Cloak disabled",
+          to: {
+            name: "PageCloak",
+          },
+          icon: "EyeOpen",
+          disabled: true,
+        },
         {
           group: "Hola",
           id: "loading",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.148",
+  "version": "1.0.150",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/AMenu/AMenuPanelLink.js

@@ -76,6 +76,10 @@ export default {
       return undefined;
     });
 
+    const isLinkDisabled = computed(() => {
+      return !!item.value.disabled;
+    });
+
     const isLinkVisible = computed(() => {
       if (isLinkInSearchPanel.value) {
         return !!idsSearchVisible.value.rest[item.value[AKeyId]];
@@ -117,6 +121,17 @@ export default {
       return dataProParentChildren.value[id.value] && dataProParentChildren.value[id.value].length;
     });
 
+    const title = computed(() => {
+      return item.value.title || labelWithoutFilter.value;
+    });
+
+    const toLocal = computed(() => {
+      if (isLinkDisabled.value) {
+        return "#";
+      }
+      return item.value.to;
+    });
+
     const openSubMenu = () => {
       togglePanel({ parentId: id.value, isLinkInSearchPanel: isLinkInSearchPanel.value });
       setFocusToFirstLinkInPanel(id.value);
@@ -144,12 +159,15 @@ export default {
       countChildren,
       currentSlot,
       icon,
+      isLinkDisabled,
       isLinkTruncated,
       isLinkVisible,
       label,
       labelWithoutFilter,
       onKeydown,
       openSubMenu,
+      title,
+      toLocal,
     };
   },
   render() {
@@ -158,7 +176,7 @@ export default {
     }
     const ICON_AND_TEXT = [
       this.icon && h(AIcon, {
-        class: "a_menu__link__icon",
+        class: ["a_menu__link__icon", this.item.iconClass],
         icon: this.icon,
       }),
       h("span", {
@@ -166,7 +184,7 @@ export default {
       }, [
         h("span", {
           class: "a_position_absolute_all",
-          title: this.labelWithoutFilter,
+          title: this.title,
           ariaHidden: true,
         }),
         h("span", {
@@ -191,8 +209,10 @@ export default {
         }) :
         this.item.to ?
           h(resolveComponent("RouterLink"), {
-            class: "a_menu__link a_menu__link__text_truncated",
-            to: this.item.to,
+            class: ["a_menu__link a_menu__link__text_truncated", {
+              a_menu__link_disabled: this.isLinkDisabled,
+            }],
+            to: this.toLocal,
             tabindex: this.isPanelOpen ? 0 : -1,
             onClick: this.clickLink,
           }, () => ICON_AND_TEXT) :

package/src/styles/components/AMenu.scss

@@ -193,6 +193,10 @@ $a_menu_breakpoint_mobile: 991px;
     box-shadow: inset 0 0 1px 4px var(--a_menu_icon_focus_shadow_color);
   }
 }
+.a_menu__link_disabled {
+  opacity: .8;
+  cursor: not-allowed;
+}
 .a_menu__link__text_truncated {
   text-overflow: ellipsis;
   white-space: nowrap;