aloha-vue 2.1.13 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.1.13",
+  "version": "2.3.0",
   "description": "Aloha-vue is a JavaScript library that provides a wide range of accessible components and directives for Vue.js. Accessibility is of paramount importance to us, and we have designed all our components to meet accessibility compliance criteria. This library is a valuable tool for frontend developers and has already been used in three projects, including two large-scale ones",
   "keywords": [
     "accessibility compliance criteria",
@@ -76,6 +76,7 @@
     "babel-plugin-module-resolver": "5.0.2",
     "eslint": "^9.19.0",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import-group": "^1.0.1",
     "eslint-plugin-jest": "28.11.0",
     "eslint-plugin-vue": "^9.32.0",
     "eslint-plugin-vue-pug": "^0.6.2",

package/src/AAlert/AAlert.js

@@ -6,6 +6,7 @@ import AButton from "../AButton/AButton";
 import AIcon from "../AIcon/AIcon";
 import ATranslation from "../ATranslation/ATranslation";
 
+import AttributesAPI from "./compositionAPI/AttributesAPI";
 import ClassAPI from "./compositionAPI/ClassAPI";
 import CloseAPI from "./compositionAPI/CloseAPI";
 import IconAPI from "./compositionAPI/IconAPI";
@@ -31,6 +32,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    ariaAtomic: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     btnCloseAttributes: {
       type: Object,
       required: false,
@@ -71,6 +77,11 @@ export default {
       required: false,
       default: () => alertPluginOptions.value.propsDefault.removeAlertOnClose,
     },
+    role: {
+      type: String,
+      required: false,
+      default: "alert",
+    },
     safeHtml: {
       type: String,
       required: false,
@@ -118,6 +129,11 @@ export default {
       iconLocal,
     } = IconAPI(props);
 
+    const {
+      ariaAtomicLocal,
+      roleLocal,
+    } = AttributesAPI(props);
+
     expose({
       close,
       isHidden,
@@ -125,9 +141,11 @@ export default {
 
     return {
       alertClassLocal,
+      ariaAtomicLocal,
       close,
       iconLocal,
       isHidden,
+      roleLocal,
     };
   },
   render() {
@@ -143,8 +161,8 @@ export default {
       ],
     }, [
       h("div", {
-        role: "alert",
-        ariaAtomic: true,
+        role: this.roleLocal,
+        ariaAtomic: this.ariaAtomicLocal,
       }, [
         this.isVisible && h("div", {
           class: [this.alertClass, this.alertClassLocal],

package/src/AAlert/compositionAPI/AttributesAPI.js

@@ -0,0 +1,30 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function AttributesAPI(props) {
+  const ariaAtomic = toRef(props, "ariaAtomic");
+  const role = toRef(props, "role");
+
+  const ariaAtomicLocal = computed(() => {
+    if (ariaAtomic.value) {
+      return true;
+    }
+
+    return undefined;
+  });
+
+  const roleLocal = computed(() => {
+    if (role.value) {
+      return role.value;
+    }
+
+    return undefined;
+  });
+
+  return {
+    ariaAtomicLocal,
+    roleLocal,
+  };
+}

package/src/ADropdown/ADropdown.js

@@ -1,7 +1,7 @@
 import {
   h,
   onBeforeUnmount,
-  Teleport,
+  Teleport, toRef,
   withDirectives,
 } from "vue";
 
@@ -12,6 +12,7 @@ import AIcon from "../AIcon/AIcon";
 import AOnHooks from "../directives/AOnHooks";
 
 import ActionsAPI from "./compositionAPI/ActionsAPI";
+import APopupAPI from "../compositionAPI/APopupAPI";
 import AttributesAPI from "./compositionAPI/AttributesAPI";
 import ClassAPI from "./compositionAPI/ClassAPI";
 import EventsAPI from "./compositionAPI/EventsAPI";
@@ -291,6 +292,13 @@ export default {
     "close",
   ],
   setup(props, context) {
+    const id = toRef(props, "id");
+
+    const {
+      closePopup,
+      openPopup,
+    } = APopupAPI();
+
     const {
       dropdownButtonRef,
       dropdownRef,
@@ -324,9 +332,11 @@ export default {
       triggerOpen,
       wasOpened,
     } = ToggleAPI(props, context, {
+      closePopup,
+      destroyPopover,
       dropdownButtonRef,
       dropdownRef,
-      destroyPopover,
+      openPopup,
       setFocusToFirstElement,
       startPopper,
     });
@@ -376,6 +386,9 @@ export default {
       destroyEventCloseClick();
       destroyEventPressArrows();
       destroyPopover();
+      closePopup({
+        id: id.value,
+      });
     });
 
     return {

package/src/ADropdown/compositionAPI/ToggleAPI.js

@@ -15,15 +15,18 @@ import {
 } from "lodash-es";
 
 export default function ToggleAPI(props, { emit }, {
+  closePopup = () => {},
   dropdownButtonRef = ref(undefined),
   dropdownRef = ref(undefined),
   destroyPopover = () => {},
+  openPopup = () => {},
   setFocusToFirstElement = () => {},
   startPopper = () => {},
 }) {
   const disabled = toRef(props, "disabled");
   const dropdownRenderDefault = toRef(props, "dropdownRenderDefault");
   const elementsForArrows = toRef(props, "elementsForArrows");
+  const id = toRef(props, "id");
   const isCloseByClickInside = toRef(props, "isCloseByClickInside");
   const isCloseByClickOutside = toRef(props, "isCloseByClickOutside");
   const isListWidthSameWithButton = toRef(props, "isListWidthSameWithButton");
@@ -183,6 +186,9 @@ export default function ToggleAPI(props, { emit }, {
         });
       }
       openDropdownGlobal();
+      openPopup({
+        id: id.value,
+      });
       emit("open");
     });
   };
@@ -227,6 +233,9 @@ export default function ToggleAPI(props, { emit }, {
       setFocusToButton();
     }
     triggerOpen.value = undefined;
+    closePopup({
+      id: id.value,
+    });
     emit("close");
   }
 

package/src/AModal/compositionAPI/EscapeAPI.js

@@ -1,21 +1,27 @@
-import {
-  toRef,
-} from "vue";
-
-export default function EscapeAPI(props) {
-  const close = toRef(props, "close");
-  const useEscape = toRef(props, "useEscape");
-
-  const pressEscape = $event => {
-    if (!useEscape.value) {
-      return;
-    }
-    close.value();
-    $event.preventDefault();
-    $event.stopPropagation();
-  };
-
-  return {
-    pressEscape,
-  };
-}
+import {
+  toRef,
+} from "vue";
+
+import APopupAPI from "../../compositionAPI/APopupAPI";
+
+export default function EscapeAPI(props) {
+  const close = toRef(props, "close");
+  const useEscape = toRef(props, "useEscape");
+
+  const {
+    isOnePopupOpen,
+  } = APopupAPI();
+
+  const pressEscape = $event => {
+    if (!useEscape.value || isOnePopupOpen.value) {
+      return;
+    }
+    close.value();
+    $event.preventDefault();
+    $event.stopPropagation();
+  };
+
+  return {
+    pressEscape,
+  };
+}

package/src/compositionAPI/AHttpAPI.js

@@ -402,7 +402,11 @@ export function callHttpRequestAndCheckSavedApi({
         if (error?.code === "ERR_CANCELED") { // workaround. we'll remake this in v2.0.0
           return reject(error);
         }
-        if (ignoreErrorHandler || checkErrorStatus({ error: error.response, showError, client: API, reject, resolve })) {
+        if (isFunction(ignoreErrorHandler)) {
+          if (ignoreErrorHandler({ error: error.response, showError, client: API })) {
+            return reject(error.response);
+          }
+        } else if (ignoreErrorHandler || checkErrorStatus({ error: error.response, showError, client: API, reject, resolve })) {
           return reject(error.response);
         }
       },

package/src/compositionAPI/APopupAPI.js

@@ -4,12 +4,14 @@ import {
 } from "vue";
 
 import {
+  forEach,
+  isEmpty,
   isUndefined,
 } from "lodash-es";
 
 const popupOpenIds = ref({});
 
-export default function APopupAPI({ id, idRef }) {
+export default function APopupAPI({ id, idRef } = {}) {
   const isPopupOpen = computed(() => {
     if (idRef) {
       return isCurrentPopupOpen({ id: idRef.value });
@@ -17,9 +19,25 @@ export default function APopupAPI({ id, idRef }) {
     return isCurrentPopupOpen({ id });
   });
 
+  const isOnePopupOpen = computed(() => {
+    let isOneOpen = false;
+    if (isEmpty(popupOpenIds.value)) {
+      return isOneOpen;
+    }
+    forEach(popupOpenIds.value, _isOpen => {
+      if (_isOpen) {
+        isOneOpen = true;
+        return false;
+      }
+    });
+
+    return isOneOpen;
+  });
+
   return {
     closePopup,
     isCurrentPopupOpen,
+    isOnePopupOpen,
     isPopupOpen,
     openPopup,
     popupOpenIds,

package/src/ui/ASelect/ASelect.js

@@ -18,8 +18,11 @@ import ASelectLabelElement from "./ASelectLabelElement";
 import ASelectValueCloseable from "./ASelectValueCloseable";
 import ATranslation from "../../ATranslation/ATranslation";
 
+import APopupAPI from "../../compositionAPI/APopupAPI";
 import AttributesAPI from "./compositionAPI/AttributesAPI";
+import DisabledAPI from "./compositionAPI/DisabledAPI";
 import DividerAPI from "./compositionAPI/DividerAPI";
+import ExclusiveOptionsAPI from "./compositionAPI/ExclusiveOptionsAPI";
 import ModelAPI from "./compositionAPI/ModelAPI";
 import ModelChangeAPI from "./compositionAPI/ModelChangeAPI";
 import PopperContainerAPI from "../../ATooltip/compositionAPI/PopperContainerAPI";
@@ -141,6 +144,16 @@ export default {
       required: false,
       default: () => [],
     },
+    exclusiveOptionLabel: {
+      type: String,
+      required: false,
+      default: "_A_SELECT_EXCLUSIVE_",
+    },
+    exclusiveOptionValue: {
+      type: [String, Number, Boolean],
+      required: false,
+      default: "_exclusive_",
+    },
     extra: {
       type: Object,
       required: false,
@@ -198,6 +211,18 @@ export default {
       required: false,
       default: () => selectPluginOptions.value.propsDefault.isDeselectAll,
     },
+    isExclusiveOptionEnabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+      validator: (value, props) => {
+        const type = props?.type;
+        if (type !== "multiselect") {
+          return value === false;
+        }
+        return true;
+      },
+    },
     isHide: {
       type: Boolean,
       required: false,
@@ -436,6 +461,11 @@ export default {
       onFocus,
     } = UiAPI(props, context);
 
+    const {
+      closePopup,
+      openPopup,
+    } = APopupAPI();
+
     const {
       dataAll,
       dataFromServer,
@@ -476,6 +506,18 @@ export default {
       dataLocal,
     });
 
+    const {
+      disabledAttribut,
+      disabledLocal,
+      disabledLocalAttribut,
+      isExclusiveOptionSelected,
+    } = DisabledAPI(props);
+
+    const {
+      exclusiveOption,
+      exclusiveDataKeyByKeyIdLocal,
+    } = ExclusiveOptionsAPI(props);
+
     const {
       isModelLengthLimitExceeded,
       isModelValue,
@@ -512,6 +554,7 @@ export default {
     });
 
     const {
+      hasNotElementsExclusiveWithSearch,
       hasNotElementsExtraWithSearch,
       hasNotElementsWithSearch,
       idForButtonSearchOutside,
@@ -521,6 +564,7 @@ export default {
       onSearchOutside,
       searching,
       searchingElements,
+      searchingElementsExclusive,
       searchingElementsExtra,
       searchingGroups,
       searchingGroupsWithSearchInGroup,
@@ -531,6 +575,7 @@ export default {
     } = UiSearchAPI(props, context, {
       data: dataSort,
       dataExtra: dataExtraLocal,
+      exclusiveOption,
       groupsForLever,
       hasKeyGroup,
       htmlIdLocal,
@@ -546,8 +591,12 @@ export default {
       menuParentRef,
       menuRef,
       togglePopover,
-    } = ToggleAPI(props, context);
-
+    } = ToggleAPI(props, context, {
+      closePopup,
+      htmlIdLocal,
+      openPopup,
+    });
+    
     const {
       deleteExceededItems,
       onChangeModelValue,
@@ -559,6 +608,7 @@ export default {
       changeModel,
       dataAll,
       dataKeyByKeyIdLocal,
+      disabledLocal,
       isMultiselect,
       togglePopover,
     });
@@ -600,6 +650,9 @@ export default {
 
     onBeforeUnmount(() => {
       destroyEventBusClickLabel();
+      closePopup({
+        id: htmlIdLocal.value,
+      });
     });
 
     return {
@@ -616,11 +669,17 @@ export default {
       dataLocal,
       dataSort,
       deleteExceededItems,
+      disabledAttribut,
+      disabledLocal,
+      disabledLocalAttribut,
       errorsId,
+      exclusiveDataKeyByKeyIdLocal,
+      exclusiveOption,
       groupsForLever,
       handleKeydown,
       hasDataExtra,
       hasKeyGroup,
+      hasNotElementsExclusiveWithSearch,
       hasNotElementsExtraWithSearch,
       hasNotElementsWithSearch,
       hasSelectedTitle,
@@ -630,6 +689,7 @@ export default {
       idForList,
       isDividerSelectDeselectVisible,
       isErrors,
+      isExclusiveOptionSelected,
       isModelLengthLimitExceeded,
       isModelValue,
       isMultiselect,
@@ -655,6 +715,7 @@ export default {
       popperContainerIdSelector,
       searching,
       searchingElements,
+      searchingElementsExclusive,
       searchingElementsExtra,
       searchingGroups,
       searchingGroupsWithSearchInGroup,
@@ -720,7 +781,7 @@ export default {
               "aria-haspopup": "listbox",
               ariaExpanded: this.isOpen,
               ariaRequired: this.required,
-              ariaDisabled: this.disabled,
+              ariaDisabled: this.disabledLocal,
               ariaInvalid: this.isErrors,
               "aria-describedby": this.ariaDescribedbyLocal,
               title: this.hasSelectedTitle ? this.selectedTitle : undefined, // TODO: title
@@ -744,7 +805,7 @@ export default {
                           return h(ASelectValueCloseable, {
                             key: index,
                             alwaysTranslate: this.alwaysTranslate,
-                            data: this.dataKeyByKeyIdLocal[item] || {},
+                            data: this.dataKeyByKeyIdLocal[item] || this.exclusiveDataKeyByKeyIdLocal[item] || {},
                             slotName: this.slotName,
                             disabled: this.disabled,
                             onChangeModelValue: this.onChangeModelValue,
@@ -754,7 +815,7 @@ export default {
                           key: this.countMultiselect,
                           alwaysTranslate: this.alwaysTranslate,
                           data: this.limitExceededModelData,
-                          disabled: this.disabled,
+                          disabled: this.disabledLocal,
                           hideDeleteButton: !this.exceededItemsDeletable,
                           onChangeModelValue: this.deleteExceededItems,
                         }),
@@ -837,7 +898,7 @@ export default {
                           h(AButton, {
                             alwaysTranslate: this.alwaysTranslate,
                             ariaDisabled: this.loadingSearchApi,
-                            disabled: this.disabled,
+                            disabled: this.disabledLocal,
                             class: "a_btn a_btn_primary a_select__element_clickable",
                             type: "submit",
                             iconLeft: Search,
@@ -866,7 +927,13 @@ export default {
                       class: "a_select_menu__child",
                     }, [
                       (this.isMultiselect && this.isSelectAll) && h("div", {
-                        class: "a_select__menu__link a_select__menu__link_selected a_select__element_clickable",
+                        class: [
+                          "a_select__menu__link a_select__menu__link_selected a_select__element_clickable",
+                          {
+                            a_select__menu__link_disabled: this.disabledLocal,
+                          },
+                        ],
+                        disabled: this.disabledLocalAttribut,
                         role: "option",
                         tabindex: "-1",
                         onClick: this.onSelectAll,
@@ -882,7 +949,13 @@ export default {
                         h("span", null, this.textSelectAll),
                       ]),
                       (this.isMultiselect && this.isDeselectAll) && h("div", {
-                        class: "a_select__menu__link a_select__menu__link_selected a_select__element_clickable",
+                        class: [
+                          "a_select__menu__link a_select__menu__link_selected a_select__element_clickable",
+                          {
+                            a_select__menu__link_disabled: this.disabled,
+                          },
+                        ],
+                        disabled: this.disabledAttribut,
                         role: "option",
                         tabindex: "-1",
                         onClick: this.onDeselectAll,
@@ -904,6 +977,23 @@ export default {
                       (this.loadingLocal || this.loadingSearchApi) ?
                         h(ACloak) :
                         "",
+                      (this.isMultiselect && this.isExclusiveOptionEnabled) && h("div", {}, [
+                        h(ASelectElement, {
+                          key: this.exclusiveOptionValue,
+                          id: this.htmlIdLocal,
+                          alwaysTranslate: true,
+                          dataItem: this.exclusiveOption,
+                          disabled: false,
+                          searching: this.searching,
+                          itemIndex: 0,
+                          modelSearch: this.modelSearchLowerCase,
+                          modelValue: this.modelValue,
+                          searchingElements: this.searchingElementsExclusive,
+                          searchingGroups: this.searchingGroups,
+                          type: this.type,
+                          onChangeModelValue: this.onChangeModelValue,
+                        }, this.$slots),
+                      ]),
                       this.hasDataExtra && h("div", {}, [
                         ...this.dataExtraLocal.map((item, itemIndex) => {
                           return h(ASelectElement, {
@@ -911,10 +1001,10 @@ export default {
                             id: this.htmlIdLocal,
                             alwaysTranslate: this.alwaysTranslate,
                             dataItem: item,
-                            disabled: this.disabled,
+                            disabled: this.disabledLocal,
                             searching: this.searching,
                             searchingElements: this.searchingElementsExtra,
-                            itemIndex,
+                            itemIndex: this.isExclusiveOptionEnabled ? itemIndex + 1 : itemIndex,
                             keyDisabled: this.keyDisabled,
                             modelSearch: this.modelSearchLowerCase,
                             modelValue: this.modelValue,
@@ -923,7 +1013,7 @@ export default {
                             onChangeModelValue: this.onChangeModelValue,
                           }, this.$slots);
                         }),
-                        !this.hasNotElementsExtraWithSearch && h("div", {
+                        !this.hasNotElementsExtraWithSearch && !this.hasNotElementsExclusiveWithSearch && h("div", {
                           class: "a_select__divider",
                           ariaHidden: true,
                         }),
@@ -934,7 +1024,7 @@ export default {
                             id: `${ this.htmlIdLocal }_lev_0`,
                             alwaysTranslate: this.alwaysTranslate,
                             dataGrouped: this.dataGrouped,
-                            disabled: this.disabled,
+                            disabled: this.disabledLocal,
                             groupsForLever: this.groupsForLever,
                             isErrors: this.isErrors,
                             keyDisabled: this.keyDisabled,
@@ -958,7 +1048,7 @@ export default {
                                 id: this.htmlIdLocal,
                                 alwaysTranslate: this.alwaysTranslate,
                                 dataItem: item,
-                                disabled: this.disabled,
+                                disabled: this.disabledLocal,
                                 searching: this.searching,
                                 searchingElements: this.searchingElements,
                                 itemIndex,

package/src/ui/ASelect/compositionAPI/DisabledAPI.js

@@ -0,0 +1,38 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function DisabledAPI(props) {
+  const disabled = toRef(props, "disabled");
+  const exclusiveOptionValue = toRef(props, "exclusiveOptionValue");
+  const isExclusiveOptionEnabled = toRef(props, "isExclusiveOptionEnabled");
+  const modelValue = toRef(props, "modelValue");
+
+  const isExclusiveOptionSelected = computed(() => {
+    if (isExclusiveOptionEnabled.value) {
+      return modelValue.value && modelValue.value.indexOf(exclusiveOptionValue.value) !== -1;
+    }
+
+    return false;
+  });
+
+  const disabledLocal = computed(() => {
+    return isExclusiveOptionSelected.value || disabled.value;
+  });
+
+  const disabledLocalAttribut = computed(() => {
+    return disabledLocal.value || undefined;
+  });
+
+  const disabledAttribut = computed(() => {
+    return disabled.value || undefined;
+  });
+
+  return {
+    disabledAttribut,
+    disabledLocal,
+    disabledLocalAttribut,
+    isExclusiveOptionSelected,
+  };
+}

package/src/ui/ASelect/compositionAPI/ExclusiveOptionsAPI.js

@@ -0,0 +1,45 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import AKeyId from "../../../const/AKeyId";
+import AKeyLabel from "../../../const/AKeyLabel";
+
+import {
+  getTranslatedText,
+} from "../../../ATranslation/compositionAPI/UtilsAPI";
+
+import {
+  keyBy,
+} from "lodash-es";
+
+export default function ExclusiveOptionsAPI(props) {
+  const exclusiveOptionLabel = toRef(props, "exclusiveOptionLabel");
+  const exclusiveOptionValue = toRef(props, "exclusiveOptionValue");
+  const extra = toRef(props, "extra");
+  const isExclusiveOptionEnabled = toRef(props, "isExclusiveOptionEnabled");
+
+  const exclusiveOption = computed(() => {
+    if (isExclusiveOptionEnabled.value) {
+      return {
+        [AKeyId]: exclusiveOptionValue.value,
+        [AKeyLabel]: getTranslatedText({
+          placeholder: exclusiveOptionLabel.value,
+          extra: extra.value,
+        }),
+      };
+    }
+
+    return undefined;
+  });
+
+  const exclusiveDataKeyByKeyIdLocal = computed(() => {
+    return keyBy([exclusiveOption.value], AKeyId);
+  });
+
+  return {
+    exclusiveOption,
+    exclusiveDataKeyByKeyIdLocal,
+  };
+}