aloha-vue 2.2.0 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "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,
@@ -31,11 +49,11 @@ export function isCurrentPopupOpen({ id }) {
   return !!popupOpenIds.value[id];
 }
 
-function openPopup({ id }) {
+export function openPopup({ id }) {
   popupOpenIds.value[id] = true;
 }
 
-function closePopup({ id }) {
+export function closePopup({ id }) {
   if (id in popupOpenIds.value) {
     delete popupOpenIds.value[id];
   }

package/src/index.js

@@ -107,6 +107,13 @@ export {
   default as APageTabTitleAPI,
   setBaseTitle as APageTabTitleAPI_setBaseTitle,
 } from "./compositionAPI/APageTabTitleAPI";
+export {
+  default as APopupAPI,
+  closePopup as APopupAPI_closePopup,
+  isCurrentPopupOpen as APopupAPI_isCurrentPopupOpen,
+  openPopup as APopupAPI_openPopup,
+  togglePopup as APopupAPI_togglePopup,
+} from "./compositionAPI/APopupAPI";
 export { default as UiAPI } from "./ui/compositionApi/UiAPI";
 export { default as UIExcludeRenderAttributesAPI } from "./ui/compositionApi/UIExcludeRenderAttributesAPI";
 export { default as UiStyleHideAPI } from "./ui/compositionApi/UiStyleHideAPI";

package/src/ui/ASelect/ASelect.js

@@ -18,6 +18,7 @@ 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";
@@ -460,6 +461,11 @@ export default {
       onFocus,
     } = UiAPI(props, context);
 
+    const {
+      closePopup,
+      openPopup,
+    } = APopupAPI();
+
     const {
       dataAll,
       dataFromServer,
@@ -585,8 +591,12 @@ export default {
       menuParentRef,
       menuRef,
       togglePopover,
-    } = ToggleAPI(props, context);
-
+    } = ToggleAPI(props, context, {
+      closePopup,
+      htmlIdLocal,
+      openPopup,
+    });
+    
     const {
       deleteExceededItems,
       onChangeModelValue,
@@ -640,6 +650,9 @@ export default {
 
     onBeforeUnmount(() => {
       destroyEventBusClickLabel();
+      closePopup({
+        id: htmlIdLocal.value,
+      });
     });
 
     return {

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

@@ -25,6 +25,10 @@ const ELEMENTS_FOR_ARROWS = ".a_select__element_clickable:not([disabled]):not([d
 
 export default function ToggleAPI(props, {
   emit,
+}, {
+  closePopup = () => {},
+  htmlIdLocal = computed(() => ""),
+  openPopup = () => {},
 }) {
   const disabled = toRef(props, "disabled");
   const menuWidthType = toRef(props, "menuWidthType");
@@ -113,6 +117,9 @@ export default function ToggleAPI(props, {
   };
 
   const onOpen = () => {
+    openPopup({
+      id: htmlIdLocal.value,
+    });
     emit("open");
   };
 
@@ -228,6 +235,9 @@ export default function ToggleAPI(props, {
     destroyPopover();
     destroyEventClickOutside();
     destroyEventPressArrows();
+    closePopup({
+      id: htmlIdLocal.value,
+    });
   }
 
   onBeforeUnmount(() => destroyEventPressArrows());