aloha-vue 2.75.1 → 2.76.0

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

@@ -1,74 +1,74 @@
-import {
-  computed,
-  ref,
-} from "vue";
-
-import {
-  aLast,
-} from "../../../utils/utilsArray";
-
-
-export default function RenderTruncatedAPI({
-  breadcrumbsItems = computed(() => []),
-  breadcrumbsTruncatedOffset = ref(0),
-}) {
-  const breadcrumbsItemsDropdown = ref([]);
-  const breadcrumbsItemsTruncated = ref([]);
-  const breadcrumbsWidth = ref(0);
-  const indexRenderedItem = ref(undefined);
-  const isRenderedAll = ref(false);
-  const itemsWidth = ref(0);
-  const itemsWidthList = ref([]);
-
-  const addItemInBreadcrumbsItemsTruncated = () => {
-    if (indexRenderedItem.value < 0) {
-      isRenderedAll.value = true;
-      return;
-    }
-    breadcrumbsItemsTruncated.value.unshift(breadcrumbsItems.value[indexRenderedItem.value]);
-    indexRenderedItem.value--;
-  };
-
-  const addDropdownItems = () => {
-    breadcrumbsItemsDropdown.value = breadcrumbsItems.value.slice(0, indexRenderedItem.value + 1);
-    isRenderedAll.value = true;
-  };
-
-  const removeItem = () => {
-    if (breadcrumbsItemsTruncated.value.length <= 1 ||
-      (itemsWidth.value + breadcrumbsTruncatedOffset.value <= breadcrumbsWidth.value)) {
-      addDropdownItems();
-      return;
-    }
-    breadcrumbsItemsTruncated.value.splice(0, 1);
-    indexRenderedItem.value++;
-    itemsWidth.value -= aLast(itemsWidthList.value);
-    itemsWidthList.value.pop();
-    removeItem();
-  };
-
-  const renderItem = el => {
-    const OFFSET_WIDTH = el.offsetWidth;
-    itemsWidth.value += OFFSET_WIDTH;
-    itemsWidthList.value.push(OFFSET_WIDTH);
-    if (itemsWidth.value >= breadcrumbsWidth.value) {
-      removeItem();
-    } else {
-      addItemInBreadcrumbsItemsTruncated();
-    }
-  };
-
-  const renderParent = el => {
-    indexRenderedItem.value = breadcrumbsItems.value.length - 1;
-    addItemInBreadcrumbsItemsTruncated();
-    breadcrumbsWidth.value = el.offsetWidth;
-  };
-
-  return {
-    breadcrumbsItemsDropdown,
-    breadcrumbsItemsTruncated,
-    isRenderedAll,
-    renderItem,
-    renderParent,
-  };
-}
+import {
+  computed,
+  ref,
+} from "vue";
+
+import {
+  aLast,
+} from "../../../utils/utilsArray";
+
+
+export default function RenderTruncatedAPI({
+  breadcrumbsItems = computed(() => []),
+  breadcrumbsTruncatedOffset = ref(0),
+}) {
+  const breadcrumbsItemsDropdown = ref([]);
+  const breadcrumbsItemsTruncated = ref([]);
+  const breadcrumbsWidth = ref(0);
+  const indexRenderedItem = ref(undefined);
+  const isRenderedAll = ref(false);
+  const itemsWidth = ref(0);
+  const itemsWidthList = ref([]);
+
+  const addItemInBreadcrumbsItemsTruncated = () => {
+    if (indexRenderedItem.value < 0) {
+      isRenderedAll.value = true;
+      return;
+    }
+    breadcrumbsItemsTruncated.value.unshift(breadcrumbsItems.value[indexRenderedItem.value]);
+    indexRenderedItem.value--;
+  };
+
+  const addDropdownItems = () => {
+    breadcrumbsItemsDropdown.value = breadcrumbsItems.value.slice(0, indexRenderedItem.value + 1);
+    isRenderedAll.value = true;
+  };
+
+  const removeItem = () => {
+    if (breadcrumbsItemsTruncated.value.length <= 1 ||
+      (itemsWidth.value + breadcrumbsTruncatedOffset.value <= breadcrumbsWidth.value)) {
+      addDropdownItems();
+      return;
+    }
+    breadcrumbsItemsTruncated.value.splice(0, 1);
+    indexRenderedItem.value++;
+    itemsWidth.value -= aLast(itemsWidthList.value);
+    itemsWidthList.value.pop();
+    removeItem();
+  };
+
+  const renderItem = el => {
+    const OFFSET_WIDTH = el.offsetWidth;
+    itemsWidth.value += OFFSET_WIDTH;
+    itemsWidthList.value.push(OFFSET_WIDTH);
+    if (itemsWidth.value >= breadcrumbsWidth.value) {
+      removeItem();
+    } else {
+      addItemInBreadcrumbsItemsTruncated();
+    }
+  };
+
+  const renderParent = el => {
+    indexRenderedItem.value = breadcrumbsItems.value.length - 1;
+    addItemInBreadcrumbsItemsTruncated();
+    breadcrumbsWidth.value = el.offsetWidth;
+  };
+
+  return {
+    breadcrumbsItemsDropdown,
+    breadcrumbsItemsTruncated,
+    isRenderedAll,
+    renderItem,
+    renderParent,
+  };
+}

package/src/AMenu/AMenuPanel/AMenuPanel.js

@@ -1,186 +1,186 @@
-import {
-  h,
-  provide,
-  toRef,
-} from "vue";
-
-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";
-
-export default {
-  name: "AMenuPanel",
-  props: {
-    attributesBlockerClick: {
-      type: Object,
-      required: true,
-    },
-    breadcrumbsLinkClass: {
-      type: [String, Object],
-      required: false,
-      default: undefined,
-    },
-    breadcrumbsTruncatedDropdownProps: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    dataKeyById: {
-      type: Object,
-      required: true,
-    },
-    dataProParentChildren: {
-      type: Object,
-      required: true,
-    },
-    isBreadcrumbsTruncated: {
-      type: Boolean,
-      required: false,
-    },
-    isPanelMain: {
-      type: Boolean,
-      required: false,
-    },
-    isSearchActive: {
-      type: Boolean,
-      required: true,
-    },
-    keyGroup: {
-      type: String,
-      required: true,
-    },
-    keyIcon: {
-      type: String,
-      required: true,
-    },
-    menuId: {
-      type: String,
-      required: true,
-    },
-    paneIndex: {
-      type: [Number, String],
-      required: true,
-    },
-    panelItems: {
-      type: Array,
-      required: true,
-    },
-    panelParentsOpen: {
-      type: Array,
-      required: true,
-    },
-    parentId: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-  },
-  setup(props) {
-    const isPanelMain = toRef(props, "isPanelMain");
-
-    const {
-      panelId,
-    } = IdAPI(props);
-
-    const {
-      openedLevelIndex,
-      styleZIndex,
-    } = LevelAPI(props);
-
-    const {
-      isItemsWithoutGroup,
-      itemsGroup,
-    } = GroupAPI(props);
-
-    const {
-      isChildPanelOpen,
-      isPanelOpen,
-    } = PanelOpenAPI(props, {
-      openedLevelIndex,
-    });
-
-    const {
-      isHeaderPanelVisible,
-      parentLabel,
-    } = HeaderAPI(props, {
-      openedLevelIndex,
-    });
-
-    provide("isChildPanelOpen", isChildPanelOpen);
-    provide("isPanelMain", isPanelMain);
-
-    return {
-      isChildPanelOpen,
-      isHeaderPanelVisible,
-      isItemsWithoutGroup,
-      isPanelOpen,
-      itemsGroup,
-      panelId,
-      parentLabel,
-      styleZIndex,
-    };
-  },
-  render() {
-    return h("div", {
-      id: this.panelId,
-      class: ["a_menu__panel", {
-        a_menu__panel_main: !this.isSearchActive && this.isPanelMain,
-        a_menu__panel_secondary: !this.isPanelMain,
-        a_menu__panel_opened: !this.isSearchActive && this.isPanelOpen,
-        a_menu__panel_parent: !this.isSearchActive && this.isChildPanelOpen,
-      }],
-      style: this.styleZIndex,
-    }, [
-      (!this.isPanelMain && this.isPanelOpen) && h(AMenuBreadcrumbs, {
-        breadcrumbsLinkClass: this.breadcrumbsLinkClass,
-        breadcrumbsTruncatedDropdownProps: this.breadcrumbsTruncatedDropdownProps,
-        dataKeyById: this.dataKeyById,
-        isBreadcrumbsTruncated: this.isBreadcrumbsTruncated,
-        isPanelMain: this.isPanelMain,
-        isSearchActive: this.isSearchActive,
-        panelParentsOpen: this.panelParentsOpen,
-      }),
-      (this.isHeaderPanelVisible) && h("div", {
-        class: "a_menu__panel_header",
-      }, [
-        h(ATranslation, {
-          class: "a_menu__panel_header__text",
-          html: this.parentLabel,
-          tag: "strong",
-        }),
-      ]),
-      h("ul", {
-        class: "a_menu__listview",
-      }, [
-        this.isItemsWithoutGroup && h(AMenuPanelGroup, {
-          dataProParentChildren: this.dataProParentChildren,
-          groupItems: this.itemsGroup.withoutGroup,
-          isPanelOpen: this.isPanelOpen,
-          keyIcon: this.keyIcon,
-          menuId: this.menuId,
-          paneIndex: this.paneIndex,
-          groupIndex: "00",
-        }, this.$slots),
-        Object.keys(this.itemsGroup.withGroup).map((key, groupIndex) => {
-          return h(AMenuPanelGroup, {
-            key,
-            dataProParentChildren: this.dataProParentChildren,
-            groupIndex,
-            groupItems: this.itemsGroup.withGroup[key],
-            groupLabel: key,
-            isPanelOpen: this.isPanelOpen,
-            keyIcon: this.keyIcon,
-            menuId: this.menuId,
-            paneIndex: this.paneIndex,
-          }, this.$slots);
-        }),
-      ]),
-    ]);
-  },
-};
+import {
+  h,
+  provide,
+  toRef,
+} from "vue";
+
+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";
+
+export default {
+  name: "AMenuPanel",
+  props: {
+    attributesBlockerClick: {
+      type: Object,
+      required: true,
+    },
+    breadcrumbsLinkClass: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+    breadcrumbsTruncatedDropdownProps: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    dataKeyById: {
+      type: Object,
+      required: true,
+    },
+    dataProParentChildren: {
+      type: Object,
+      required: true,
+    },
+    isBreadcrumbsTruncated: {
+      type: Boolean,
+      required: false,
+    },
+    isPanelMain: {
+      type: Boolean,
+      required: false,
+    },
+    isSearchActive: {
+      type: Boolean,
+      required: true,
+    },
+    keyGroup: {
+      type: String,
+      required: true,
+    },
+    keyIcon: {
+      type: String,
+      required: true,
+    },
+    menuId: {
+      type: String,
+      required: true,
+    },
+    paneIndex: {
+      type: [Number, String],
+      required: true,
+    },
+    panelItems: {
+      type: Array,
+      required: true,
+    },
+    panelParentsOpen: {
+      type: Array,
+      required: true,
+    },
+    parentId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const isPanelMain = toRef(props, "isPanelMain");
+
+    const {
+      panelId,
+    } = IdAPI(props);
+
+    const {
+      openedLevelIndex,
+      styleZIndex,
+    } = LevelAPI(props);
+
+    const {
+      isItemsWithoutGroup,
+      itemsGroup,
+    } = GroupAPI(props);
+
+    const {
+      isChildPanelOpen,
+      isPanelOpen,
+    } = PanelOpenAPI(props, {
+      openedLevelIndex,
+    });
+
+    const {
+      isHeaderPanelVisible,
+      parentLabel,
+    } = HeaderAPI(props, {
+      openedLevelIndex,
+    });
+
+    provide("isChildPanelOpen", isChildPanelOpen);
+    provide("isPanelMain", isPanelMain);
+
+    return {
+      isChildPanelOpen,
+      isHeaderPanelVisible,
+      isItemsWithoutGroup,
+      isPanelOpen,
+      itemsGroup,
+      panelId,
+      parentLabel,
+      styleZIndex,
+    };
+  },
+  render() {
+    return h("div", {
+      id: this.panelId,
+      class: ["a_menu__panel", {
+        a_menu__panel_main: !this.isSearchActive && this.isPanelMain,
+        a_menu__panel_secondary: !this.isPanelMain,
+        a_menu__panel_opened: !this.isSearchActive && this.isPanelOpen,
+        a_menu__panel_parent: !this.isSearchActive && this.isChildPanelOpen,
+      }],
+      style: this.styleZIndex,
+    }, [
+      (!this.isPanelMain && this.isPanelOpen) && h(AMenuBreadcrumbs, {
+        breadcrumbsLinkClass: this.breadcrumbsLinkClass,
+        breadcrumbsTruncatedDropdownProps: this.breadcrumbsTruncatedDropdownProps,
+        dataKeyById: this.dataKeyById,
+        isBreadcrumbsTruncated: this.isBreadcrumbsTruncated,
+        isPanelMain: this.isPanelMain,
+        isSearchActive: this.isSearchActive,
+        panelParentsOpen: this.panelParentsOpen,
+      }),
+      (this.isHeaderPanelVisible) && h("div", {
+        class: "a_menu__panel_header",
+      }, [
+        h(ATranslation, {
+          class: "a_menu__panel_header__text",
+          html: this.parentLabel,
+          tag: "strong",
+        }),
+      ]),
+      h("ul", {
+        class: "a_menu__listview",
+      }, [
+        this.isItemsWithoutGroup && h(AMenuPanelGroup, {
+          dataProParentChildren: this.dataProParentChildren,
+          groupItems: this.itemsGroup.withoutGroup,
+          isPanelOpen: this.isPanelOpen,
+          keyIcon: this.keyIcon,
+          menuId: this.menuId,
+          paneIndex: this.paneIndex,
+          groupIndex: "00",
+        }, this.$slots),
+        Object.keys(this.itemsGroup.withGroup).map((key, groupIndex) => {
+          return h(AMenuPanelGroup, {
+            key,
+            dataProParentChildren: this.dataProParentChildren,
+            groupIndex,
+            groupItems: this.itemsGroup.withGroup[key],
+            groupLabel: key,
+            isPanelOpen: this.isPanelOpen,
+            keyIcon: this.keyIcon,
+            menuId: this.menuId,
+            paneIndex: this.paneIndex,
+          }, this.$slots);
+        }),
+      ]),
+    ]);
+  },
+};

package/src/AMenu/AMenuPanel/compositionAPI/GroupAPI.js

@@ -1,43 +1,43 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-import {
-  forEach,
-  get,
-  isNil,
-} from "lodash-es";
-
-export default function GroupAPI(props) {
-  const panelItems = toRef(props, "panelItems");
-  const keyGroup = toRef(props, "keyGroup");
-
-  const itemsGroup = computed(() => {
-    const WITHOUT_GROUP = [];
-    const WITH_GROUP = {};
-    forEach(panelItems.value, item => {
-      const GROUP = get(item, keyGroup.value);
-      if (isNil(GROUP)) {
-        WITHOUT_GROUP.push(item);
-      } else {
-        WITH_GROUP[GROUP] = WITH_GROUP[GROUP] || [];
-        WITH_GROUP[GROUP].push(item);
-      }
-    });
-
-    return {
-      withoutGroup: WITHOUT_GROUP,
-      withGroup: WITH_GROUP,
-    };
-  });
-
-  const isItemsWithoutGroup = computed(() => {
-    return itemsGroup.value.withoutGroup.length > 0;
-  });
-
-  return {
-    isItemsWithoutGroup,
-    itemsGroup,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  forEach,
+  get,
+  isNil,
+} from "lodash-es";
+
+export default function GroupAPI(props) {
+  const panelItems = toRef(props, "panelItems");
+  const keyGroup = toRef(props, "keyGroup");
+
+  const itemsGroup = computed(() => {
+    const WITHOUT_GROUP = [];
+    const WITH_GROUP = {};
+    forEach(panelItems.value, item => {
+      const GROUP = get(item, keyGroup.value);
+      if (isNil(GROUP)) {
+        WITHOUT_GROUP.push(item);
+      } else {
+        WITH_GROUP[GROUP] = WITH_GROUP[GROUP] || [];
+        WITH_GROUP[GROUP].push(item);
+      }
+    });
+
+    return {
+      withoutGroup: WITHOUT_GROUP,
+      withGroup: WITH_GROUP,
+    };
+  });
+
+  const isItemsWithoutGroup = computed(() => {
+    return itemsGroup.value.withoutGroup.length > 0;
+  });
+
+  return {
+    isItemsWithoutGroup,
+    itemsGroup,
+  };
+}

package/src/AMenu/AMenuPanel/compositionAPI/IdAPI.js

@@ -1,25 +1,25 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-import {
-  getElementId,
-} from "../../utils/utils";
-
-export default function IdAPI(props) {
-  const menuId = toRef(props, "menuId");
-  const parentId = toRef(props, "parentId");
-
-  const panelId = computed(() => {
-    return getElementId({
-      menuId: menuId.value,
-      id: parentId.value,
-      suffix: "panel",
-    });
-  });
-
-  return {
-    panelId,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  getElementId,
+} from "../../utils/utils";
+
+export default function IdAPI(props) {
+  const menuId = toRef(props, "menuId");
+  const parentId = toRef(props, "parentId");
+
+  const panelId = computed(() => {
+    return getElementId({
+      menuId: menuId.value,
+      id: parentId.value,
+      suffix: "panel",
+    });
+  });
+
+  return {
+    panelId,
+  };
+}