aloha-vue 2.52.0 → 2.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.52.0",
+  "version": "2.53.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",

package/src/ADropdown/compositionAPI/AttributesAPI.js

@@ -1,101 +1,100 @@
-import {
-  computed,
-  readonly,
-  ref,
-  toRef,
-} from "vue";
-
-import ARemPxAPI from "../../compositionAPI/ARemPxAPI";
-
-import {
-  assign,
-  cloneDeep,
-} from "lodash-es";
-
-export default function AttributesAPI(props, {
-  eventsMenu = computed(() => ({})),
-  statusExpanded = ref(false),
-  wasOpened = ref(false),
-}) {
-  const buttonAttributes = toRef(props, "buttonAttributes");
-  const buttonTag = toRef(props, "buttonTag");
-  const disabled = toRef(props, "disabled");
-  const dropdownAttributes = toRef(props, "dropdownAttributes");
-  const dropdownClass = toRef(props, "dropdownClass");
-  const id = toRef(props, "id");
-  const menuWidth = toRef(props, "menuWidth");
-  const persist = toRef(props, "persist");
-  const readonly = toRef(props, "readonly");
-  const useRem = toRef(props, "useRem");
-
-  const {
-    scalePxWithRem,
-  } = ARemPxAPI();
-
-  const buttonTagLocal = computed(() => {
-    if (readonly.value) {
-      return "span";
-    }
-    return buttonTag.value;
-  });
-
-  const idLocal = computed(() => {
-    return buttonAttributes.value.id || id.value;
-  });
-
-  const buttonAttributesLocal = computed(() => {
-    const BUTTON_ATTRIBUTES = cloneDeep(buttonAttributes.value);
-    if (readonly.value) {
-      return BUTTON_ATTRIBUTES;
-    }
-
-    BUTTON_ATTRIBUTES["aria-haspopup"] = "true";
-    BUTTON_ATTRIBUTES["aria-expanded"] = statusExpanded.value;
-
-    if (buttonTag.value === "button") {
-      BUTTON_ATTRIBUTES.type = BUTTON_ATTRIBUTES.type || "button";
-    }
-    return BUTTON_ATTRIBUTES;
-  });
-
-  const buttonAttributesDisabled = computed(() => {
-    const ATTRIBUTES = {};
-    if (disabled.value) {
-      if (buttonTag.value === "button") {
-        ATTRIBUTES.disabled = true;
-      } else if (buttonTag.value === "a") {
-        ATTRIBUTES.ariaDisabled = true;
-      }
-    }
-
-    return ATTRIBUTES;
-  });
-
-  const dropdownAttributesLocal = computed(() => {
-    const DROPDOWN_ATTRIBUTES = cloneDeep(dropdownAttributes.value);
-    DROPDOWN_ATTRIBUTES.class = ["a_dropdown__menu", dropdownClass.value, {
-      a_dropdown__menu_show: statusExpanded.value,
-    }];
-    if (menuWidth.value) {
-      if (useRem.value) {
-        DROPDOWN_ATTRIBUTES.style = `width: ${ scalePxWithRem(menuWidth.value) }px`;
-      } else {
-        DROPDOWN_ATTRIBUTES.style = `width: ${ menuWidth.value }px`;
-      }
-    }
-    return assign({}, DROPDOWN_ATTRIBUTES, eventsMenu.value);
-  });
-
-  const isMenuRendered = computed(() => {
-    return statusExpanded.value || (persist.value && wasOpened.value);
-  });
-
-  return {
-    idLocal,
-    buttonAttributesDisabled,
-    buttonAttributesLocal,
-    buttonTagLocal,
-    dropdownAttributesLocal,
-    isMenuRendered,
-  };
-}
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import ARemPxAPI from "../../compositionAPI/ARemPxAPI";
+
+import {
+  assign,
+  cloneDeep,
+} from "lodash-es";
+
+export default function AttributesAPI(props, {
+  eventsMenu = computed(() => ({})),
+  statusExpanded = ref(false),
+  wasOpened = ref(false),
+}) {
+  const buttonAttributes = toRef(props, "buttonAttributes");
+  const buttonTag = toRef(props, "buttonTag");
+  const disabled = toRef(props, "disabled");
+  const dropdownAttributes = toRef(props, "dropdownAttributes");
+  const dropdownClass = toRef(props, "dropdownClass");
+  const id = toRef(props, "id");
+  const menuWidth = toRef(props, "menuWidth");
+  const persist = toRef(props, "persist");
+  const readonly = toRef(props, "readonly");
+  const useRem = toRef(props, "useRem");
+
+  const {
+    scalePxWithRem,
+  } = ARemPxAPI();
+
+  const buttonTagLocal = computed(() => {
+    if (readonly.value) {
+      return "span";
+    }
+    return buttonTag.value;
+  });
+
+  const idLocal = computed(() => {
+    return buttonAttributes.value.id || id.value;
+  });
+
+  const buttonAttributesLocal = computed(() => {
+    const BUTTON_ATTRIBUTES = cloneDeep(buttonAttributes.value);
+    if (readonly.value) {
+      return BUTTON_ATTRIBUTES;
+    }
+
+    BUTTON_ATTRIBUTES["aria-haspopup"] = "true";
+    BUTTON_ATTRIBUTES["aria-expanded"] = statusExpanded.value;
+
+    if (buttonTag.value === "button") {
+      BUTTON_ATTRIBUTES.type = BUTTON_ATTRIBUTES.type || "button";
+    }
+    return BUTTON_ATTRIBUTES;
+  });
+
+  const buttonAttributesDisabled = computed(() => {
+    const ATTRIBUTES = {};
+    if (disabled.value) {
+      if (buttonTag.value === "button") {
+        ATTRIBUTES.disabled = true;
+      } else if (buttonTag.value === "a") {
+        ATTRIBUTES.ariaDisabled = true;
+      }
+    }
+
+    return ATTRIBUTES;
+  });
+
+  const dropdownAttributesLocal = computed(() => {
+    const DROPDOWN_ATTRIBUTES = cloneDeep(dropdownAttributes.value);
+    DROPDOWN_ATTRIBUTES.class = ["a_dropdown__menu", dropdownClass.value, {
+      a_dropdown__menu_show: statusExpanded.value,
+    }];
+    if (menuWidth.value) {
+      if (useRem.value) {
+        DROPDOWN_ATTRIBUTES.style = `width: ${ scalePxWithRem(menuWidth.value) }px`;
+      } else {
+        DROPDOWN_ATTRIBUTES.style = `width: ${ menuWidth.value }px`;
+      }
+    }
+    return assign({}, DROPDOWN_ATTRIBUTES, eventsMenu.value);
+  });
+
+  const isMenuRendered = computed(() => {
+    return statusExpanded.value || (persist.value && wasOpened.value);
+  });
+
+  return {
+    idLocal,
+    buttonAttributesDisabled,
+    buttonAttributesLocal,
+    buttonTagLocal,
+    dropdownAttributesLocal,
+    isMenuRendered,
+  };
+}

package/src/ui/AInputCurrency/AInputCurrency.js

@@ -386,7 +386,7 @@ export default {
       const isSameAsLocalModel = newVal === localModel.value;
       if (!isInternalChange.value || !isSameAsLocalModel) {
         localModel.value = newVal;
-        handleInput(null, newVal, true);
+        handleInput(null, { value: newVal, updateOutside: true, triggerDetails: "modelChange" });
       }
       isInternalChange.value = false;
     });

package/src/ui/AInputCurrency/compositionAPI/IncreaseDecreaseAPI.js

@@ -1,76 +1,76 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-export default function IncreaseDecreaseAPI(props, {
-  adjustFloatPartAndDivider = () => {},
-  ensurePrecision = () => {},
-  setCurrentValue = () => {},
-  modelNumber = computed(() => undefined),
-}) {
-  const decimalDivider = toRef(props, "decimalDivider");
-  const disabled = toRef(props, "disabled");
-  const modelValue = toRef(props, "modelValue");
-  const max = toRef(props, "max");
-  const min = toRef(props, "min");
-  const step = toRef(props, "step");
-
-  const minDisabled = computed(() => {
-    return modelNumber.value <= min.value;
-  });
-
-  const maxDisabled = computed(() => {
-    return modelNumber.value >= max.value;
-  });
-
-  const setMaximumValue = () => {
-    const newVal = adjustFloatPartAndDivider(max.value);
-    setCurrentValue(newVal);
-  };
-
-  const setMinimumValue = () => {
-    const newVal = adjustFloatPartAndDivider(min.value);
-    setCurrentValue(newVal);
-  };
-
-  const increase = () => {
-    if (disabled.value || maxDisabled.value) {
-      return;
-    }
-    const value = modelNumber.value;
-    const newValue = ensurePrecision({
-      value,
-      currentValue: modelValue.value,
-    }).replace(".", decimalDivider.value);
-    if (value + step.value > max.value) {
-      setMaximumValue();
-
-      return;
-    }
-    setCurrentValue(adjustFloatPartAndDivider(newValue));
-  };
-
-  const decrease = () => {
-    if (disabled.value || minDisabled.value) {
-      return;
-    }
-    const value = modelNumber.value;
-    const newValue = ensurePrecision({
-      value,
-      currentValue: modelValue.value,
-      coefficient: -1,
-    }).replace(".", decimalDivider.value);
-    if (value - step.value < min.value) {
-      setMinimumValue();
-
-      return;
-    }
-    setCurrentValue(adjustFloatPartAndDivider(newValue));
-  };
-
-  return {
-    increase,
-    decrease,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function IncreaseDecreaseAPI(props, {
+  adjustFloatPartAndDivider = () => {},
+  ensurePrecision = () => {},
+  setCurrentValue = () => {},
+  modelNumber = computed(() => undefined),
+}) {
+  const decimalDivider = toRef(props, "decimalDivider");
+  const disabled = toRef(props, "disabled");
+  const modelValue = toRef(props, "modelValue");
+  const max = toRef(props, "max");
+  const min = toRef(props, "min");
+  const step = toRef(props, "step");
+
+  const minDisabled = computed(() => {
+    return modelNumber.value <= min.value;
+  });
+
+  const maxDisabled = computed(() => {
+    return modelNumber.value >= max.value;
+  });
+
+  const setMaximumValue = () => {
+    const newVal = adjustFloatPartAndDivider(max.value);
+    setCurrentValue({ value: newVal });
+  };
+
+  const setMinimumValue = () => {
+    const newVal = adjustFloatPartAndDivider(min.value);
+    setCurrentValue({ value: newVal });
+  };
+
+  const increase = () => {
+    if (disabled.value || maxDisabled.value) {
+      return;
+    }
+    const value = modelNumber.value;
+    const newValue = ensurePrecision({
+      value,
+      currentValue: modelValue.value,
+    }).replace(".", decimalDivider.value);
+    if (value + step.value > max.value) {
+      setMaximumValue();
+
+      return;
+    }
+    setCurrentValue({ value: adjustFloatPartAndDivider(newValue) });
+  };
+
+  const decrease = () => {
+    if (disabled.value || minDisabled.value) {
+      return;
+    }
+    const value = modelNumber.value;
+    const newValue = ensurePrecision({
+      value,
+      currentValue: modelValue.value,
+      coefficient: -1,
+    }).replace(".", decimalDivider.value);
+    if (value - step.value < min.value) {
+      setMinimumValue();
+
+      return;
+    }
+    setCurrentValue({ value: adjustFloatPartAndDivider(newValue) });
+  };
+
+  return {
+    increase,
+    decrease,
+  };
+}

package/src/ui/AInputCurrency/compositionAPI/InputEventsAPI.js

@@ -56,8 +56,8 @@ export default function InputEventsAPI(props, {
     return Number(`${ val }`.replaceAll(thousandDivider.value, "").replace(decimalDivider.value, "."));
   };
 
-  const setValueLocal = (val, updateOutside) => {
-    setCurrentValue(val, updateOutside);
+  const setValueLocal = ({ value, updateOutside, trigger, triggerDetails }) => {
+    setCurrentValue({ value, updateOutside, trigger, triggerDetails });
   };
 
   const setCursorPosition = position => {
@@ -66,14 +66,14 @@ export default function InputEventsAPI(props, {
     });
   };
 
-  const setMaximumValue = () => {
+  const setMaximumValue = ({ trigger, triggerDetails } = {}) => {
     const newVal = adjustFloatPartAndDivider(max.value);
-    setValueLocal(newVal);
+    setValueLocal({ value: newVal, trigger, triggerDetails });
   };
 
-  const setMinimumValue = () => {
+  const setMinimumValue = ({ trigger, triggerDetails } = {}) => {
     const newVal = adjustFloatPartAndDivider(min.value);
-    setValueLocal(newVal);
+    setValueLocal({ value: newVal, trigger, triggerDetails });
   };
 
   const validateMinMax = val => {
@@ -90,9 +90,9 @@ export default function InputEventsAPI(props, {
     }
   };
 
-  const handleInput = ($event, _value, updateOutside = false) => {
+  const handleInput = ($event, { value: _value, updateOutside = false, triggerDetails = "keydown" } = {}) => {
     if (!required.value && isNil(_value) && !$event?.target?.value) {
-      setValueLocal(_value, updateOutside);
+      setValueLocal({ value: _value, updateOutside, triggerDetails });
 
       return;
     }
@@ -138,7 +138,7 @@ export default function InputEventsAPI(props, {
         return;
       }
     }
-    setValueLocal(newVal, updateOutside);
+    setValueLocal({ value: newVal, updateOutside, triggerDetails });
     setCursorPosition(cursorPosition);
   };
 
@@ -158,7 +158,7 @@ export default function InputEventsAPI(props, {
           }
         }
 
-        setValueLocal(newVal);
+        setValueLocal({ value: newVal, triggerDetails: "decrement" });
         isTimeoutActive.value--;
       }, timeoutDelay);
     }
@@ -177,7 +177,7 @@ export default function InputEventsAPI(props, {
           }
         }
 
-        setValueLocal(newVal);
+        setValueLocal({ value: newVal, triggerDetails: "increment" });
         isTimeoutActive.value--;
       }, timeoutDelay);
     }
@@ -221,7 +221,7 @@ export default function InputEventsAPI(props, {
         const positionToSet = value.length + 1;
         if (valueAfterKeyPress[valueAfterKeyPress.length - 1] === decimalDivider.value) {
           valueAfterKeyPress += times(decimalPartLength.value, () => "0").join("");
-          setValueLocal(valueAfterKeyPress);
+          setValueLocal({ value: valueAfterKeyPress, triggerDetails: "keydown" });
           setCursorPosition(positionToSet);
         }
       } else {
@@ -239,7 +239,7 @@ export default function InputEventsAPI(props, {
           intVal,
           floatVal,
         ].join(decimalDivider.value);
-        setValueLocal(result);
+        setValueLocal({ value: result, triggerDetails: "keydown" });
         setCursorPosition(intVal.length + 1);
       }
       isTimeoutActive.value--;
@@ -265,7 +265,7 @@ export default function InputEventsAPI(props, {
         isTimeoutActive.value++;
         requestAnimationFrame(() => {
           setCursorPositionForBackspace({ cursorPosition, numberOfSymbols });
-          setValueLocal(intVal);
+          setValueLocal({ value: intVal, triggerDetails: "backspace" });
           isTimeoutActive.value--;
         }, timeoutDelay);
 
@@ -283,7 +283,7 @@ export default function InputEventsAPI(props, {
     if (!isInteger.value && hasDecimalDivider && value[cursorPosition] === decimalDivider.value) {
       const splitVal = value.split(decimalDivider.value);
       const intVal = splitVal[0];
-      setValueLocal(intVal);
+      setValueLocal({ value: intVal, triggerDetails: "delete" });
       setCursorPosition(cursorPosition);
 
       return;
@@ -315,7 +315,7 @@ export default function InputEventsAPI(props, {
         } else {
           newVal = valWithDivider;
         }
-        setValueLocal(newVal);
+        setValueLocal({ value: newVal, triggerDetails: "delete" });
         setCursorPosition(positionToSet + 1);
       } else {
         requestAnimationFrame(() => {
@@ -440,7 +440,7 @@ export default function InputEventsAPI(props, {
             const splitVal = value.split("");
             splitVal[cursorPosition] = keyValue;
             const newVal = splitVal.join("");
-            setValueLocal(newVal);
+            setValueLocal({ value: newVal, triggerDetails: "keydown" });
             isTimeoutActive.value++;
             requestAnimationFrame(() => {
               setCursorPosition(cursorPosition + 1);
@@ -475,7 +475,7 @@ export default function InputEventsAPI(props, {
       if (cursorPosition === 0 && value.length && value[0] === "0") {
         $event.preventDefault();
         const newVal = `${ keyValue }${ value.slice(1) }`;
-        setValueLocal(newVal);
+        setValueLocal({ value: newVal, triggerDetails: "keydown" });
         setCursorPosition(1);
       } else {
         const numberOfSymbols = value.length;
@@ -543,7 +543,7 @@ export default function InputEventsAPI(props, {
       .match(/.{1,3}/g).join(thousandDivider.value)
       .split("").reverse().join("");
     const valueToPaste = [intValToPaste, floatVal].join(decimalDivider.value);
-    handleInput(null, valueToPaste);
+    handleInput(null, { value: valueToPaste, triggerDetails: "paste" });
   };
 
   const onBlurNumber = $event => {
@@ -558,25 +558,25 @@ export default function InputEventsAPI(props, {
           const value = decimalDivider.value
             ? `0${ decimalDivider.value }${ times(decimalPartLength.value, () => "0").join("") }`
             : "0";
-          setValueLocal(value);
+          setValueLocal({ value, trigger: "blur", triggerDetails: "blur" });
         } else {
-          setMinimumValue();
+          setMinimumValue({ trigger: "blur", triggerDetails: "blur" });
         }
         onBlur($event);
 
         return;
       }
       const value = modelUndefinedLocal.value;
-      setValueLocal(value);
+      setValueLocal({ value, trigger: "blur", triggerDetails: "blur" });
       onBlur($event);
 
       return;
     } else if (!isNil(min.value) && modelNumber.value < min.value) {
-      setMinimumValue();
+      setMinimumValue({ trigger: "blur", triggerDetails: "blur" });
 
       return;
     } else if (!isNil(max.value) && modelNumber.value > max.value) {
-      setMaximumValue();
+      setMaximumValue({ triggerDetails: "blur" });
 
       return;
     }
@@ -589,7 +589,7 @@ export default function InputEventsAPI(props, {
       } else if (floatVal.length < decimalPartLength.value) {
         value += `${ times(decimalPartLength.value - floatVal.length, () => "0").join("") }`;
       }
-      setValueLocal(value);
+      setValueLocal({ value, trigger: "blur", triggerDetails: "blur" });
     }
     onBlur($event);
   };
@@ -645,7 +645,7 @@ export default function InputEventsAPI(props, {
           modelUndefinedLocal.value;
       }
       const shouldInitModel = required.value && !hasModel;
-      handleInput(null, valueToSet, !shouldInitModel);
+      handleInput(null, { value: valueToSet, updateOutside: !shouldInitModel, triggerDetails: "init" });
     });
   };