aloha-vue 1.6.0 → 1.8.0

package/CHANGELOG.md

@@ -7,6 +7,14 @@
 ---
 # Versions
 
+## 1.8.0
+
+- `AModal`: don't close modal if popup opened
+
+## 1.7.0
+
+- `AAlert`: new props ariaAtomic and role
+
 ## 1.6.0
 
 - `AHttpAPI`: ignoreErrorHandler as function

package/docs/src/views/PageAlert/compositionAPI/PropsAPI.js

@@ -21,6 +21,13 @@ export default function PropsAPI() {
       default: undefined,
       required: false,
     },
+    {
+      name: "aria-atomic",
+      description: "_A_ALERT_PROPS_ARIA_ATOMIC_DESCRIPTION_",
+      type: "Boolean",
+      default: true,
+      required: false,
+    },
     {
       name: "btn-close-attributes",
       description: "_A_ALERT_PROPS_BTN_CLOSE_ATTRIBUTES_DESCRIPTION_",
@@ -77,6 +84,13 @@ export default function PropsAPI() {
       default: false,
       required: false,
     },
+    {
+      name: "role",
+      description: "_A_ALERT_PROPS_ROLE_DESCRIPTION_",
+      type: "String",
+      default: "alert",
+      required: false,
+    },
     {
       name: "safe-html",
       description: "_A_ALERT_PROPS_SAFE_HTML_DESCRIPTION_",

package/docs/src/views/PageAlert/i18n/ar.json

@@ -1,4 +1,6 @@
 {
+  "_A_ALERT_PROPS_ARIA_ATOMIC_DESCRIPTION_": "",
+  "_A_ALERT_PROPS_ROLE_DESCRIPTION_": "",
   "_A_ALERT_COMPONENT_DESCRIPTION_": "يعرض رسائل تنبيه مهمة.",
   "_A_ALERT_COMPONENT_NAME_": "تنبيه",
   "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_": "يتم إصداره عند إغلاق التنبيه.",

package/docs/src/views/PageAlert/i18n/de.json

@@ -1,4 +1,6 @@
 {
+  "_A_ALERT_PROPS_ARIA_ATOMIC_DESCRIPTION_": "",
+  "_A_ALERT_PROPS_ROLE_DESCRIPTION_": "",
   "_A_ALERT_COMPONENT_DESCRIPTION_": "Zeigt wichtige Warnmeldungen an.",
   "_A_ALERT_COMPONENT_NAME_": "Warnung",
   "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_": "Auslösen, wenn die Warnung geschlossen ist",

package/docs/src/views/PageAlert/i18n/en.json

@@ -1,4 +1,6 @@
 {
+  "_A_ALERT_PROPS_ARIA_ATOMIC_DESCRIPTION_": "",
+  "_A_ALERT_PROPS_ROLE_DESCRIPTION_": "",
   "_A_ALERT_COMPONENT_DESCRIPTION_": "Displays important alert messages.",
   "_A_ALERT_COMPONENT_NAME_": "warning",
   "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_": "Trigger when alert is closed",

package/docs/src/views/PageAlert/i18n/es.json

@@ -1,4 +1,6 @@
 {
+  "_A_ALERT_PROPS_ARIA_ATOMIC_DESCRIPTION_": "",
+  "_A_ALERT_PROPS_ROLE_DESCRIPTION_": "",
   "_A_ALERT_COMPONENT_DESCRIPTION_": "Muestra mensajes de alerta importantes.",
   "_A_ALERT_COMPONENT_NAME_": "advertencia",
   "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_": "Se desencadena cuando se cierra la alerta.",

package/docs/src/views/PageAlert/i18n/fr.json

@@ -1,4 +1,6 @@
 {
+  "_A_ALERT_PROPS_ARIA_ATOMIC_DESCRIPTION_": "",
+  "_A_ALERT_PROPS_ROLE_DESCRIPTION_": "",
   "_A_ALERT_COMPONENT_DESCRIPTION_": "Affiche des messages d'alerte importants.",
   "_A_ALERT_COMPONENT_NAME_": "avertissement",
   "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_": "Déclenché lorsque l'alerte est fermée.",

package/docs/src/views/PageAlert/i18n/hr.json

@@ -1,4 +1,6 @@
 {
+  "_A_ALERT_PROPS_ARIA_ATOMIC_DESCRIPTION_": "",
+  "_A_ALERT_PROPS_ROLE_DESCRIPTION_": "",
   "_A_ALERT_COMPONENT_DESCRIPTION_": "Komponenta koja služi za prikaz važnih upozorenja.",
   "_A_ALERT_COMPONENT_NAME_": "Upozorenje",
   "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_": "Aktivira se zatvaranjem upozorenja.",

package/docs/src/views/PageAlert/i18n/it.json

@@ -1,4 +1,6 @@
 {
+  "_A_ALERT_PROPS_ARIA_ATOMIC_DESCRIPTION_": "",
+  "_A_ALERT_PROPS_ROLE_DESCRIPTION_": "",
   "_A_ALERT_COMPONENT_DESCRIPTION_": "Visualizza messaggi di avviso importanti.",
   "_A_ALERT_COMPONENT_NAME_": "avviso",
   "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_": "Emesso quando l'avviso viene chiuso.",

package/docs/src/views/PageAlert/i18n/ru.json

@@ -1,4 +1,6 @@
 {
+  "_A_ALERT_PROPS_ARIA_ATOMIC_DESCRIPTION_": "",
+  "_A_ALERT_PROPS_ROLE_DESCRIPTION_": "",
   "_A_ALERT_COMPONENT_DESCRIPTION_": "Отображает важные предупреждающие сообщения.",
   "_A_ALERT_COMPONENT_NAME_": "Оповещение",
   "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_": "Триггер, когда оповещение закрыто",

package/package.json

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

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 {
       required: false,
       default: () => alertPluginOptions.value.propsDefault.alertContentClass,
     },
+    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";
@@ -287,6 +288,13 @@ export default {
     "close",
   ],
   setup(props, context) {
+    const id = toRef(props, "id");
+
+    const {
+      closePopup,
+      openPopup,
+    } = APopupAPI();
+
     const {
       dropdownButtonRef,
       dropdownRef,
@@ -319,9 +327,11 @@ export default {
       triggerOpen,
       wasOpened,
     } = ToggleAPI(props, context, {
+      closePopup,
+      destroyPopover,
       dropdownButtonRef,
       dropdownRef,
-      destroyPopover,
+      openPopup,
       setFocusToFirstElement,
       startPopper,
     });
@@ -370,6 +380,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");
@@ -181,6 +184,9 @@ export default function ToggleAPI(props, { emit }, {
         });
       }
       openDropdownGlobal();
+      openPopup({
+        id: id.value,
+      });
       emit("open");
     });
   };
@@ -225,6 +231,9 @@ export default function ToggleAPI(props, { emit }, {
       setFocusToButton();
     }
     triggerOpen.value = undefined;
+    closePopup({
+      id: id.value,
+    });
     emit("close");
   }
 

package/src/AModal/compositionAPI/EscapeAPI.js

@@ -2,12 +2,18 @@ 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) {
+    if (!useEscape.value || isOnePopupOpen.value) {
       return;
     }
     close.value();

package/src/compositionAPI/APopupAPI.js

@@ -4,22 +4,40 @@ 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 });
     }
     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,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";
@@ -461,6 +462,11 @@ export default {
       onFocus,
     } = UiAPI(props, context);
 
+    const {
+      closePopup,
+      openPopup,
+    } = APopupAPI();
+
     const {
       dataAll,
       dataFromServer,
@@ -586,7 +592,11 @@ export default {
       menuParentRef,
       menuRef,
       togglePopover,
-    } = ToggleAPI(props, context);
+    } = ToggleAPI(props, context, {
+      closePopup,
+      htmlIdLocal,
+      openPopup,
+    });
     
     const {
       deleteExceededItems,
@@ -641,6 +651,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");
@@ -115,6 +119,9 @@ export default function ToggleAPI(props, {
   };
 
   const onOpen = () => {
+    openPopup({
+      id: htmlIdLocal.value,
+    });
     emit("open");
   };
 
@@ -230,6 +237,9 @@ export default function ToggleAPI(props, {
     destroyPopover();
     destroyEventClickOutside();
     destroyEventPressArrows();
+    closePopup({
+      id: htmlIdLocal.value,
+    });
   }
 
   onBeforeUnmount(() => destroyEventPressArrows());