aloha-vue 2.53.0 → 2.55.0

package/src/AAccordion/compositionAPI/IndexesForOpenAPI.js

@@ -1,63 +1,63 @@
-import {
-  computed,
-  toRef,
-  watch,
-} from "vue";
-
-import {
-  AKeyId,
-} from "../../const/AKeys";
-import {
-  forEach,
-  get,
-  isNil,
-} from "lodash-es";
-
-export default function IndexesForOpenAPI(props, {
-  idsForOpen = computed(() => []),
-  dataWithIds = computed(() => []),
-}) {
-  const indexesForOpen = toRef(props, "indexesForOpen");
-  const keyChildren = toRef(props, "keyChildren");
-
-  const getPathForIndexForOpen = ({ indexForOpen }) => {
-    let path = `${ indexForOpen }`.replaceAll(".", `.${ keyChildren.value }.`);
-    path += `.${ AKeyId }`;
-    return path;
-  };
-
-  const setIdsFromIndexesForOpen = ({ isInit } = {}) => {
-    if (isInit && !indexesForOpen.value.length) {
-      return;
-    }
-    const IDS_FOR_OPEN = [];
-    if (keyChildren.value) {
-      forEach(indexesForOpen.value, indexForOpen => {
-        const ID = get(dataWithIds.value, getPathForIndexForOpen({ indexForOpen }));
-        if (!isNil(ID)) {
-          IDS_FOR_OPEN.push(ID);
-        }
-      });
-    } else {
-      forEach(indexesForOpen.value, indexForOpen => {
-        const ID = get(dataWithIds.value, `${ indexForOpen }.${ AKeyId }`);
-        if (!isNil(ID)) {
-          IDS_FOR_OPEN.push(ID);
-        }
-      });
-    }
-    idsForOpen.value = IDS_FOR_OPEN;
-  };
-
-  const initIdsFromIndexesForOpen = () => {
-    setIdsFromIndexesForOpen({ isInit: true });
-  };
-
-  watch(indexesForOpen, () => {
-    setIdsFromIndexesForOpen();
-  });
-
-  return {
-    initIdsFromIndexesForOpen,
-  };
-}
+import {
+  computed,
+  toRef,
+  watch,
+} from "vue";
+
+import {
+  AKeyId,
+} from "../../const/AKeys";
+import {
+  forEach,
+  get,
+  isNil,
+} from "lodash-es";
+
+export default function IndexesForOpenAPI(props, {
+  idsForOpen = computed(() => []),
+  dataWithIds = computed(() => []),
+}) {
+  const indexesForOpen = toRef(props, "indexesForOpen");
+  const keyChildren = toRef(props, "keyChildren");
+
+  const getPathForIndexForOpen = ({ indexForOpen }) => {
+    let path = `${ indexForOpen }`.replaceAll(".", `.${ keyChildren.value }.`);
+    path += `.${ AKeyId }`;
+    return path;
+  };
+
+  const setIdsFromIndexesForOpen = ({ isInit } = {}) => {
+    if (isInit && !indexesForOpen.value.length) {
+      return;
+    }
+    const IDS_FOR_OPEN = [];
+    if (keyChildren.value) {
+      forEach(indexesForOpen.value, indexForOpen => {
+        const ID = get(dataWithIds.value, getPathForIndexForOpen({ indexForOpen }));
+        if (!isNil(ID)) {
+          IDS_FOR_OPEN.push(ID);
+        }
+      });
+    } else {
+      forEach(indexesForOpen.value, indexForOpen => {
+        const ID = get(dataWithIds.value, `${ indexForOpen }.${ AKeyId }`);
+        if (!isNil(ID)) {
+          IDS_FOR_OPEN.push(ID);
+        }
+      });
+    }
+    idsForOpen.value = IDS_FOR_OPEN;
+  };
+
+  const initIdsFromIndexesForOpen = () => {
+    setIdsFromIndexesForOpen({ isInit: true });
+  };
+
+  watch(indexesForOpen, () => {
+    setIdsFromIndexesForOpen();
+  });
+
+  return {
+    initIdsFromIndexesForOpen,
+  };
+}

package/src/AAccordion/compositionAPI/ToggleAPI.js

@@ -1,81 +1,85 @@
-import {
-  ref,
-  toRef,
-  watch,
-} from "vue";
-
-import {
-  AKeyId,
-} from "../../const/AKeys";
-import {
-  cloneDeep,
-  filter,
-  isEqual,
-  startsWith,
-} from "lodash-es";
-
-export default function ToggleAPI(props, { emit }) {
-  const alwaysOpen = toRef(props, "alwaysOpen");
-  const disabled = toRef(props, "disabled");
-  const idsForOpenDefault = toRef(props, "idsForOpenDefault");
-  const prevent = toRef(props, "prevent");
-  const stop = toRef(props, "stop");
-
-  const idsForOpen = ref(undefined);
-
-  const initIdsForOpen = () => {
-    idsForOpen.value = idsForOpenDefault.value;
-  };
-
-  const toggleWithAlwaysOpen = ({ currentId, isOpen }) => {
-    if (isOpen) {
-      const CURRENT_ID_PREFIX = currentId.split("__")[0];
-      idsForOpen.value = filter(idsForOpen.value, index => {
-        return !startsWith(index, CURRENT_ID_PREFIX);
-      });
-    } else {
-      idsForOpen.value.push(currentId);
-    }
-  };
-
-  const toggleWithoutAlwaysOpen = ({ currentId, parentsIds, isOpen }) => {
-    if (isOpen) {
-      idsForOpen.value = parentsIds;
-    } else {
-      idsForOpen.value = [...parentsIds, currentId];
-    }
-  };
-
-  const toggleLocal = ({ item, parentsIds, isOpen, $event }) => {
-    if (disabled.value) {
-      return;
-    }
-    const PARENT_IDS = cloneDeep(parentsIds);
-    const CURRENT_ID = item[AKeyId];
-    if (alwaysOpen.value) {
-      toggleWithAlwaysOpen({ item, currentId: CURRENT_ID, isOpen });
-    } else {
-      toggleWithoutAlwaysOpen({ parentsIds: PARENT_IDS, currentId: CURRENT_ID, isOpen });
-    }
-    emit("toggle", { idsForOpen: idsForOpen.value, currentId: CURRENT_ID, parentsIds: PARENT_IDS, isOpen: isOpen, $event, item });
-
-    if (stop.value && $event) {
-      $event.stopPropagation();
-    }
-    if (prevent.value && $event) {
-      $event.preventDefault();
-    }
-  };
-
-  watch(idsForOpenDefault, newValue => {
-    if (!isEqual(newValue, idsForOpen.value)) {
-      idsForOpen.value = cloneDeep(newValue);
-    }
-  });
-
-  return {
-    idsForOpen,
-    initIdsForOpen,
-    toggleLocal,
-  };
-}
+import {
+  ref,
+  toRef,
+  watch,
+} from "vue";
+
+import {
+  AKeyId,
+} from "../../const/AKeys";
+import {
+  cloneDeep,
+  filter,
+  isEqual,
+  startsWith,
+} from "lodash-es";
+
+export default function ToggleAPI(props, { emit }) {
+  const alwaysOpen = toRef(props, "alwaysOpen");
+  const disabled = toRef(props, "disabled");
+  const idsForOpenDefault = toRef(props, "idsForOpenDefault");
+  const oneItemAlwaysOpen = toRef(props, "oneItemAlwaysOpen");
+  const prevent = toRef(props, "prevent");
+  const stop = toRef(props, "stop");
+
+  const idsForOpen = ref(undefined);
+
+  const initIdsForOpen = () => {
+    idsForOpen.value = idsForOpenDefault.value;
+  };
+
+  const toggleWithAlwaysOpen = ({ currentId, isOpen }) => {
+    if (isOpen) {
+      const CURRENT_ID_PREFIX = currentId.split("__")[0];
+      idsForOpen.value = filter(idsForOpen.value, index => {
+        return !startsWith(index, CURRENT_ID_PREFIX);
+      });
+    } else {
+      idsForOpen.value.push(currentId);
+    }
+  };
+
+  const toggleWithoutAlwaysOpen = ({ currentId, parentsIds, isOpen }) => {
+    if (isOpen) {
+      if (oneItemAlwaysOpen.value) {
+        return;
+      }
+      idsForOpen.value = parentsIds;
+    } else {
+      idsForOpen.value = [...parentsIds, currentId];
+    }
+  };
+
+  const toggleLocal = ({ item, parentsIds, isOpen, $event }) => {
+    if (disabled.value) {
+      return;
+    }
+    const PARENT_IDS = cloneDeep(parentsIds);
+    const CURRENT_ID = item[AKeyId];
+    if (alwaysOpen.value) {
+      toggleWithAlwaysOpen({ item, currentId: CURRENT_ID, isOpen });
+    } else {
+      toggleWithoutAlwaysOpen({ parentsIds: PARENT_IDS, currentId: CURRENT_ID, isOpen });
+    }
+    emit("toggle", { idsForOpen: idsForOpen.value, currentId: CURRENT_ID, parentsIds: PARENT_IDS, isOpen: isOpen, $event, item });
+
+    if (stop.value && $event) {
+      $event.stopPropagation();
+    }
+    if (prevent.value && $event) {
+      $event.preventDefault();
+    }
+  };
+
+  watch(idsForOpenDefault, newValue => {
+    if (!isEqual(newValue, idsForOpen.value)) {
+      idsForOpen.value = cloneDeep(newValue);
+    }
+  });
+
+  return {
+    idsForOpen,
+    initIdsForOpen,
+    toggleLocal,
+  };
+}

package/src/ADropdown/ADropdown.js

@@ -15,8 +15,6 @@ import {
   focusableSelector,
 } from "../index";
 
-import ADropdownAction from "./ADropdownAction/ADropdownAction";
-
 import APopupAPI from "../compositionAPI/APopupAPI";
 import ActionsAPI from "./compositionAPI/ActionsAPI";
 import AttributesAPI from "./compositionAPI/AttributesAPI";
@@ -28,6 +26,7 @@ import PopperContainerAPI from "../ATooltip/compositionAPI/PopperContainerAPI";
 import RefsAPI from "./compositionAPI/RefsAPI";
 import ToggleAPI from "./compositionAPI/ToggleAPI";
 
+import ADropdownGroup from "./ADropdownGroup";
 import ChevronDown from "aloha-svg/dist/js/bootstrap/ChevronDown";
 import {
   difference,
@@ -189,6 +188,16 @@ export default {
       required: false,
       default: undefined,
     },
+    keyGroup: {
+      type: [String, Number, Array],
+      required: false,
+      default: undefined,
+    },
+    keyGroupLabelCallback: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
     floatingFlip: {
       type: Object,
       required: false,
@@ -220,7 +229,7 @@ export default {
     id: {
       type: String,
       required: false,
-      default: () => uniqueId("a_dropdown_btn_"),
+      default: () => uniqueId("a_dropdown_"),
     },
     inBody: {
       type: Boolean,
@@ -237,6 +246,11 @@ export default {
       required: false,
       default: true,
     },
+    isCloseByButtonInvisibleInViewport: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     isHideWithoutActionAndSlot: {
       type: Boolean,
       required: false,
@@ -282,6 +296,12 @@ export default {
       required: false,
       default: false,
     },
+    sortOrderGroup: {
+      type: String,
+      required: false,
+      default: undefined,
+      validator: value => ["asc", "desc"].indexOf(value) !== -1,
+    },
     triggers: {
       type: Array,
       required: false,
@@ -330,6 +350,7 @@ export default {
     } = PopoverAPI(props, {
       dropdownButtonRef,
       dropdownRef,
+      onReferenceHidden,
     });
 
     const {
@@ -394,6 +415,13 @@ export default {
       buttonClassLocal,
     } = ClassAPI(props);
 
+    function onReferenceHidden() {
+      onClose({
+        isFocusButton: false,
+        trigger: "referenceHidden",
+      });
+    }
+
     initWasOpened();
 
     onMounted(() => {
@@ -491,7 +519,6 @@ export default {
           "div",
           {
             ref: "dropdownRef",
-            role: "application",
             "aria-labelledby": this.idLocal,
             ariaHidden: !this.statusExpanded,
             ...this.dropdownAttributesLocal,
@@ -499,13 +526,11 @@ export default {
           [
             h(this.dropdownTag, {}, [
               this.$slots.dropdown && this.$slots.dropdown(),
-              this.hasActions && this.actionsFiltered.map((action, actionIndex) => {
-                return h(ADropdownAction, {
-                  key: actionIndex,
-                  action,
-                  alwaysTranslate: this.alwaysTranslate,
-                }, this.$slots);
-              }),
+              this.hasActions && h(ADropdownGroup, {
+                actions: this.actionsFiltered,
+                alwaysTranslate: this.alwaysTranslate,
+                dropdownId: this.idLocal,
+              }, this.$slots),
             ]),
           ],
         ), [

package/src/ADropdown/ADropdownGroup.js

@@ -0,0 +1,85 @@
+import {
+  h,
+  resolveComponent,
+} from "vue";
+import {
+  ATranslation,
+} from "../index";
+
+import ADropdownAction from "./ADropdownAction/ADropdownAction";
+
+export default {
+  name: "ADropdownGroup",
+  props: {
+    actions: {
+      type: Array,
+      required: true,
+    },
+    alwaysTranslate: {
+      type: Boolean,
+      required: false,
+    },
+    dropdownId: {
+      type: String,
+      required: true,
+    },
+    levelIndex: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  render() {
+    return this.actions.map((action, actionIndex) => {
+      if (action.__isDropdownGroup) {
+        if (!action.groupLabel) {
+          return h(resolveComponent("ADropdownGroup"), {
+            key: `group_${ this.levelIndex }_${ actionIndex }`,
+            actions: action.children,
+            alwaysTranslate: this.alwaysTranslate,
+            dropdownId: this.dropdownId,
+            levelIndex: this.levelIndex + 1,
+          }, this.$slots);
+        }
+
+        const labelId = `${ this.dropdownId }_group_${ this.levelIndex }_${ actionIndex }`;
+
+        return h("li", {
+          key: `group_${ this.levelIndex }_${ actionIndex }`,
+          class: [
+            "a_dropdown__group",
+            `a_dropdown__group_level_${ this.levelIndex }`,
+          ],
+        }, [
+          h(ATranslation, {
+            id: labelId,
+            alwaysTranslate: this.alwaysTranslate,
+            class: [
+              "a_dropdown__group__label",
+              "a_dropdown__item_header",
+            ],
+            html: action.groupLabel,
+            tag: "div",
+          }),
+          h("ul", {
+            class: "a_dropdown__group__list",
+            "aria-labelledby": labelId,
+          }, [
+            h(resolveComponent("ADropdownGroup"), {
+              actions: action.children,
+              alwaysTranslate: this.alwaysTranslate,
+              dropdownId: this.dropdownId,
+              levelIndex: this.levelIndex + 1,
+            }, this.$slots),
+          ]),
+        ]);
+      }
+
+      return h(ADropdownAction, {
+        key: `action_${ this.levelIndex }_${ actionIndex }`,
+        action,
+        alwaysTranslate: this.alwaysTranslate,
+      }, this.$slots);
+    });
+  },
+};

package/src/ADropdown/compositionAPI/ActionsAPI.js

@@ -1,27 +1,147 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-import {
-  filterActionsHiddenAndDivider,
-} from "../../utils/actions";
-
-export default function ActionsAPI(props) {
-  const actions = toRef(props, "actions");
-
-  const actionsFiltered = computed(() => {
-    return filterActionsHiddenAndDivider({
-      actions: actions.value,
-    });
-  });
-
-  const hasActions = computed(() => {
-    return actionsFiltered.value.length > 0;
-  });
-
-  return {
-    actionsFiltered,
-    hasActions,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  aOrderBy,
+} from "../../utils/utils";
+
+import {
+  filterActionsDivider,
+  filterActionsHiddenAndDivider,
+} from "../../utils/actions";
+import {
+  filter,
+  forEach,
+  get,
+  isArray,
+  isFunction,
+  isNil,
+  isString,
+} from "lodash-es";
+
+export default function ActionsAPI(props) {
+  const actions = toRef(props, "actions");
+  const keyGroup = toRef(props, "keyGroup");
+  const keyGroupLabelCallback = toRef(props, "keyGroupLabelCallback");
+  const sortOrderGroup = toRef(props, "sortOrderGroup");
+
+  const keyGroupArray = computed(() => {
+    if (isArray(keyGroup.value)) {
+      return keyGroup.value;
+    }
+    if (isString(keyGroup.value)) {
+      return [keyGroup.value];
+    }
+    return [];
+  });
+
+  const hasKeyGroup = computed(() => {
+    return keyGroupArray.value.length > 0;
+  });
+
+  const actionsVisible = computed(() => {
+    return filter(actions.value, action => !action.isHidden);
+  });
+
+  const getGroupedActions = ({
+    actionsLocal = [],
+    levelIndex = 0,
+    parentGroups = [],
+  }) => {
+    if (levelIndex >= keyGroupArray.value.length) {
+      return filterActionsDivider({
+        actions: actionsLocal,
+      });
+    }
+
+    const ACTIONS_WITHOUT_GROUP = [];
+    const GROUPS = {};
+
+    forEach(actionsLocal, action => {
+      const GROUP_KEY = get(action, keyGroupArray.value[levelIndex]);
+      if (isNil(GROUP_KEY) || GROUP_KEY === "") {
+        ACTIONS_WITHOUT_GROUP.push(action);
+        return;
+      }
+
+      if (!GROUPS[GROUP_KEY]) {
+        GROUPS[GROUP_KEY] = {
+          groupKey: GROUP_KEY,
+          item: action,
+          actions: [],
+        };
+      }
+      GROUPS[GROUP_KEY].actions.push(action);
+    });
+
+    const ACTIONS_GROUPED = [];
+
+    if (ACTIONS_WITHOUT_GROUP.length) {
+      ACTIONS_GROUPED.push(...getGroupedActions({
+        actionsLocal: ACTIONS_WITHOUT_GROUP,
+        levelIndex: levelIndex + 1,
+        parentGroups,
+      }));
+    }
+
+    let GROUPS_ARRAY = Object.values(GROUPS).map(group => {
+      const CHILDREN = getGroupedActions({
+        actionsLocal: group.actions,
+        levelIndex: levelIndex + 1,
+        parentGroups: [...parentGroups, group.groupKey],
+      });
+
+      if (!CHILDREN.length) {
+        return undefined;
+      }
+
+      return {
+        __isDropdownGroup: true,
+        children: CHILDREN,
+        groupKey: group.groupKey,
+        groupLabel: isFunction(keyGroupLabelCallback.value) ?
+          keyGroupLabelCallback.value({
+            group: group.groupKey,
+            item: group.item,
+            inDropdown: true,
+            levelIndex,
+            parentGroups,
+          }) :
+          group.groupKey,
+      };
+    }).filter(Boolean);
+
+    if (sortOrderGroup.value) {
+      GROUPS_ARRAY = aOrderBy(GROUPS_ARRAY, ["groupLabel"], [sortOrderGroup.value]);
+    }
+
+    ACTIONS_GROUPED.push(...GROUPS_ARRAY);
+
+    return ACTIONS_GROUPED;
+  };
+
+  const actionsFiltered = computed(() => {
+    if (hasKeyGroup.value) {
+      return getGroupedActions({
+        actionsLocal: actionsVisible.value,
+      });
+    }
+
+    return filterActionsHiddenAndDivider({
+      actions: actionsVisible.value,
+    });
+  });
+
+  const hasActions = computed(() => {
+    return actionsFiltered.value.length > 0;
+  });
+
+  return {
+    actionsFiltered,
+    hasActions,
+    hasKeyGroup,
+    keyGroupArray,
+  };
+}