aloha-vue 1.2.75 → 1.2.76

package/package.json

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

package/src/AMenu2/AMenuPanel/AMenuPanel.js

@@ -6,8 +6,10 @@ import {
 
 import AMenuBreadcrumbs from "../AMenuBreadcrumbs/AMenuBreadcrumbs";
 import AMenuPanelGroup from "../AMenuPanelGroup/AMenuPanelGroup";
+import ATranslation from "../../ATranslation/ATranslation";
 
 import GroupAPI from "./compositionAPI/GroupAPI";
+import HeaderAPI from "./compositionAPI/HeaderAPI";
 import IdAPI from "./compositionAPI/IdAPI";
 import LevelAPI from "./compositionAPI/LevelAPI";
 import PanelOpenAPI from "./compositionAPI/PanelOpenAPI";
@@ -103,15 +105,24 @@ export default {
       openedLevelIndex,
     });
 
+    const {
+      isHeaderPanelVisible,
+      parentLabel,
+    } = HeaderAPI(props, {
+      openedLevelIndex,
+    });
+
     provide("isChildPanelOpen", isChildPanelOpen);
     provide("isPanelMain", isPanelMain);
 
     return {
       isChildPanelOpen,
+      isHeaderPanelVisible,
       isItemsWithoutGroup,
       isPanelOpen,
       itemsGroup,
       panelId,
+      parentLabel,
       styleZIndex,
     };
   },
@@ -135,6 +146,15 @@ export default {
         isSearchActive: this.isSearchActive,
         panelParentsOpen: this.panelParentsOpen,
       }),
+      (this.isHeaderPanelVisible) && h("div", {
+        class: "a_menu_2__panel_header",
+      }, [
+        h(ATranslation, {
+          class: "a_menu_2__panel_header__text",
+          html: this.parentLabel,
+          tag: "strong",
+        }),
+      ]),
       h("ul", {
         class: "a_menu_2__listview",
       }, [

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

@@ -0,0 +1,36 @@
+import {
+  computed,
+  inject,
+  toRef,
+} from "vue";
+
+import AKeyLabel from "../../../const/AKeyLabel";
+
+import {
+  get,
+} from "lodash-es";
+
+export default function HeaderAPI(props, {
+  openedLevelIndex = computed(() => 0),
+}) {
+  const dataKeyById = toRef(props, "dataKeyById");
+  const isPanelMain = toRef(props, "isPanelMain");
+  const parentId = toRef(props, "parentId");
+
+  const isMenuOpen = inject("isMenuOpen");
+
+  const isHeaderPanelVisible = computed(() => {
+    return !isPanelMain.value &&
+      !isMenuOpen.value &&
+      openedLevelIndex.value === 0;
+  });
+
+  const parentLabel = computed(() => {
+    return get(dataKeyById.value, `${ parentId.value }.${ AKeyLabel }`);
+  });
+
+  return {
+    isHeaderPanelVisible,
+    parentLabel,
+  };
+}

package/src/AMenu2/AMenuPanelLink/AMenuPanelLink.js

@@ -236,7 +236,7 @@ export default {
               }, this.countChildren),
               h(AIcon, {
                 class: "a_menu_2__link__counter__icon",
-                icon: "ChevronRight",
+                icon: "MenuChevronRight",
               })
             ]),
           ]),

package/src/plugins/AIconPlugin.js

@@ -18,6 +18,7 @@ import CheckLg from "../AIcon/Icons/CheckLg";
 import ChevronDown from "../AIcon/Icons/ChevronDown";
 import ChevronLeft from "../AIcon/Icons/ChevronLeft";
 import ChevronRight from "../AIcon/Icons/ChevronRight";
+import ChevronRightThin from "../AIcon/Icons/bootstrap-1-9-1/ChevronRight";
 import ChevronUp from "../AIcon/Icons/ChevronUp";
 import Close from "../AIcon/Icons/Close";
 import Cog from "../AIcon/Icons/Cog";
@@ -48,11 +49,12 @@ import Trash from "../AIcon/Icons/Trash";
 
 export const iconPluginOptions = ref({
   icons: {
-    Aloha,
+    _NoImage,
     AlertDanger,
-    AlertSuccess,
     AlertInfo,
+    AlertSuccess,
     AlertWarning,
+    Aloha,
     AngleDown,
     AngleLeft,
     AngleRight,
@@ -64,8 +66,8 @@ export const iconPluginOptions = ref({
     ChevronLeft,
     ChevronRight,
     ChevronUp,
-    Cog,
     Close,
+    Cog,
     Cross,
     Dnd,
     DoubleAngleDown,
@@ -78,6 +80,7 @@ export const iconPluginOptions = ref({
     FloppyDisk,
     Home,
     Lock,
+    MenuChevronRight: ChevronRightThin,
     Minus,
     Ok,
     OptionHorizontal,
@@ -90,7 +93,6 @@ export const iconPluginOptions = ref({
     ThList,
     ThreeDots,
     Trash,
-    _NoImage,
   },
 });
 

package/src/styles/components/AMenu2.scss

@@ -24,28 +24,38 @@
   --a_menu_2_panel_iconpanel_size: var(--a_menu_2_width_collapsed);
   --a_menu_2_panel_color: var(--a_color_gray_600);
   --a_menu_2_link_color: var(--a_color_gray_900);
+  --a_menu_2_link_hover_color: var(--a_color_gray_900);
+  --a_menu_2_link_hover_bg: var(--a_color_gray_200);
   --a_menu_2_listitem_padding: .3rem;
   --a_menu_2_listitem_panel_secondary_padding_x: .6rem;
   --a_menu_2_listitem_panel_secondary_padding_y: .3rem;
   --a_menu_2_link_padding_x: .7rem;
-  --a_menu_2_link_padding_y: .7rem;
+  --a_menu_2_link_padding_y: .5rem;
   --a_menu_2_link_selected_bg: var(--a_color_gray_200);
   --a_menu_2_link_selected_color: inherit;
   --a_menu_2_link_border_color: transparent;
   --a_menu_2_link_border_radius: .3rem;
+  --a_menu_2_link_focus_size: 0 0 1px 3px;
   --a_menu_2_icon_color: var(--a_menu_2_link_color);
-  --a_menu_2_icon_focus_shadow_color: var(--a_color_focus);
+  --a_menu_2_focus_shadow_color: var(--a_color_focus);
   --a_menu_2_list_header_bg: var(--a_color_gray_200);
-  --a_menu_2_breadcrumb_min_height: 60px;
+  --a_menu_2_breadcrumb_min_height: 65px;
   --a_menu_2_breadcrumb_border_bottom_width: 1px;
   --a_menu_2_submenu_open_bg: var(--a_color_primary);
   --a_menu_2_submenu_open_color: var(--a_color_white);
   --a_menu_2_submenu_border_radius: 1rem;
   --a_menu_2_submenu_border_width: 2px;
   --a_menu_2_search_height: 50px;
+  --a_menu_2_search_link_focus_size: inset 0 0 1px 2px;
   --a_menu_2_close_panel_width: 300px;
   --a_menu_2_close_panel_max_height: 400px;
   --a_menu_2_close_panel_border_radius: .3rem;
+  --a_menu_2_close_panel_box_shadow_color: var(--a_color_gray_600);
+  --a_menu_2_close_panel_box_shadow_size: 0 0 7px 3px;
+  --a_menu_2_close_panel_header_color: var(--a_color_gray_900);
+  --a_menu_2_close_panel_header_border_bottom_color: var(--a_color_gray_600);
+  --a_menu_2_close_panel_header_border_bottom_width: 1px;
+  --a_menu_2_link_line_horizontal_display: none;
 
   width: var(--a_menu_2_width);
   position: absolute;
@@ -101,7 +111,7 @@
     border-color: inherit;
     border-bottom-width: 1px;
     border-bottom-style: solid;
-    display: block;
+    display: var(--a_menu_2_link_line_horizontal_display);
     position: absolute;
     inset-inline-start: 20px;
     inset-inline-end: 0;
@@ -135,11 +145,15 @@
     text-decoration: none;
     color: var(--a_menu_2_link_color);
   }
-  &:focus,
+  &:focus {
+    outline: 0;
+    box-shadow: var(--a_menu_2_link_focus_size) var(--a_menu_2_focus_shadow_color);
+    color: var(--a_menu_2_link_color);
+  }
   &:hover {
     outline: 0;
-    box-shadow: inset 0 0 1px 4px var(--a_menu_2_icon_focus_shadow_color);
     color: var(--a_menu_2_link_color);
+    background-color: var(--a_menu_2_link_hover_bg);
   }
   &.a_menu_2__link_active {
     --a_menu_2_icon_color: var(--a_menu_2_submenu_open_bg);
@@ -480,7 +494,8 @@
       top: auto;
       border: none;
       border-radius: var(--a_menu_2_close_panel_border_radius);
-      box-shadow: 0 0 2px 2px var(--a_color_gray_600);
+      // Aloha
+      box-shadow: var(--a_menu_2_close_panel_box_shadow_size) var(--a_color_gray_600);
       max-height: var(--a_menu_2_close_panel_max_height);
       overflow-y: auto;
       z-index: 2;
@@ -545,7 +560,7 @@
     padding: 0.2rem 0.3rem;
     &:focus,
     &:hover {
-      box-shadow: inset 0 0 1px 2px var(--a_menu_2_icon_focus_shadow_color);
+      box-shadow: var(--a_menu_2_search_link_focus_size) var(--a_menu_2_focus_shadow_color);
     }
   }
   .a_menu_2__breadcrumbs__item__divider {
@@ -568,4 +583,14 @@
 .a_menu_2__breadcrumb__ul_truncated__dropdown {
   padding: .2rem;
   min-width: auto;
+}
+
+.a_menu_2__panel_header {
+  color: var(--a_menu_2_close_panel_header_color);
+  border-bottom: var(--a_menu_2_close_panel_header_border_bottom_width) solid var(--a_menu_2_close_panel_header_border_bottom_color);
+  padding: var(--a_menu_2_listitem_panel_secondary_padding_y) var(--a_menu_2_listitem_panel_secondary_padding_x);
+}
+.a_menu_2__panel_header__text {
+  display: inline-block;
+  padding: var(--a_menu_2_link_padding_y) var(--a_menu_2_link_padding_x);
 }