aloha-vue 1.2.54 → 1.2.56

package/package.json

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

package/src/AMenu2/AMenu2.js

@@ -33,6 +33,9 @@ import {
   uniqueId,
 } from "lodash-es";
 
+const DROPDOWN_BUTTON_WIDTH = 34;
+const BREADCRUMBS_PADDINGS = 20;
+
 export default {
   name: "AMenu2",
   provide() {
@@ -51,6 +54,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+    breadcrumbsTruncatedOffset: {
+      type: Number,
+      required: false,
+      default: () => DROPDOWN_BUTTON_WIDTH + BREADCRUMBS_PADDINGS,
+    },
     buttonToggleClass: {
       type: [String, Object],
       required: false,
@@ -173,6 +181,7 @@ export default {
   setup(props) {
     const isLinkTruncated = toRef(props, "isLinkTruncated");
     const showCountChildren = toRef(props, "showCountChildren");
+    const breadcrumbsTruncatedOffset = toRef(props, "breadcrumbsTruncatedOffset");
 
     const {
       dataKeyById,
@@ -309,6 +318,7 @@ export default {
     provide("panelParentsOpen", panelParentsOpen);
     provide("showCountChildren", computed(() => showCountChildren.value));
     provide("togglePanel", togglePanel);
+    provide("breadcrumbsTruncatedOffset", computed(() => breadcrumbsTruncatedOffset.value));
 
     initMenuOpenOrClose();
     initEventBusUpdateViewOnResize();

package/src/AMenu2/AMenuBreadcrumbs/AMenuBreadcrumbs.js

@@ -1,5 +1,6 @@
 import {
   h,
+  inject,
   withDirectives,
 } from "vue";
 
@@ -48,6 +49,8 @@ export default {
     },
   },
   setup(props) {
+    const breadcrumbsTruncatedOffset = inject("breadcrumbsTruncatedOffset");
+
     const {
       breadcrumbsItems,
     } = ItemsAPI(props);
@@ -65,6 +68,7 @@ export default {
       renderParent,
     } = RenderTruncatedAPI({
       breadcrumbsItems,
+      breadcrumbsTruncatedOffset,
     });
 
     return {

package/src/AMenu2/AMenuBreadcrumbs/compositionAPI/RenderTruncatedAPI.js

@@ -9,11 +9,11 @@ import {
 
 export default function RenderTruncatedAPI({
   breadcrumbsItems = computed(() => []),
+  breadcrumbsTruncatedOffset = ref(0),
 }) {
   const breadcrumbsItemsDropdown = ref([]);
   const breadcrumbsItemsTruncated = ref([]);
   const breadcrumbsWidth = ref(0);
-  const dropdownButtonWidth = 30;
   const indexRenderedItem = ref(undefined);
   const isRenderedAll = ref(false);
   const itemsWidth = ref(0);
@@ -35,7 +35,7 @@ export default function RenderTruncatedAPI({
 
   const removeItem = () => {
     if (breadcrumbsItemsTruncated.value.length <= 1 ||
-      (itemsWidth.value + dropdownButtonWidth <= breadcrumbsWidth.value)) {
+      (itemsWidth.value + breadcrumbsTruncatedOffset.value <= breadcrumbsWidth.value)) {
       addDropdownItems();
       return;
     }

package/src/styles/components/AMenu2.scss

@@ -14,7 +14,9 @@
 .a_menu_2 {
   --a_menu_2_width: var(--a_menu_2_width_expanded);
   --a_menu_2_top: 0;
-  --a_menu_2_navbar_top: 65px;
+  --a_menu_2_navbar_top_height: 65px;
+  --a_menu_2_navbar_top_padding: .5rem;
+  --a_menu_2_navbar_top_margin_bottom: .5rem;
   --a_menu_2_background: var(--a_color_white);
   --a_menu_2_border_color: var(--a_color_gray_300);
   --a_menu_2_panel_child_offset: 100%;
@@ -23,6 +25,8 @@
   --a_menu_2_panel_color: var(--a_color_gray_600);
   --a_menu_2_link_color: var(--a_color_gray_900);
   --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_selected_bg: var(--a_color_gray_200);
@@ -202,8 +206,9 @@
 .a_menu_2__navbar_top {
   flex-shrink: 0;
   display: flex;
-  padding: .5rem;
-  height: var(--a_menu_2_navbar_top);
+  padding: var(--a_menu_2_navbar_top_padding);
+  height: var(--a_menu_2_navbar_top_height);
+  margin-bottom: var(--a_menu_2_navbar_top_margin_bottom);
 }
 // search
 .a_menu_2__panel_search {
@@ -406,6 +411,9 @@
     border-top: var(--a_menu_2_submenu_border_width) solid var(--a_menu_2_submenu_open_bg);
     border-top-left-radius: var(--a_menu_2_submenu_border_radius);
   }
+  .a_menu_2__listitem {
+    padding: var(--a_menu_2_listitem_panel_secondary_padding_y) var(--a_menu_2_listitem_panel_secondary_padding_x);
+  }
 }
 .a_menu_2_sub_open,
 .a_menu_2_close {