aloha-vue 2.57.3 → 2.57.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.57.3",
+  "version": "2.57.4",
   "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/ATableForm/ATableForm.js

@@ -215,7 +215,7 @@ export default {
     } = IconsAPI(props);
 
     const {
-      classesLocal,
+      actionsClassesLocal,
     } = ClassesAPI(props);
 
     const {
@@ -302,7 +302,7 @@ export default {
       canAddRow,
       canMoveRowDown,
       canMoveRowUp,
-      classesLocal,
+      actionsClassesLocal,
       columnsStylesGrow,
       draggedRowIndex,
       dragOverPosition,
@@ -413,7 +413,7 @@ export default {
                 return h(ATableFormRow, {
                   key: rowKey,
                   id: this.id,
-                  actionsClasses: this.actionsClasses,
+                  actionsClasses: this.actionsClassesLocal,
                   actionsDisabledCallback: this.actionsDisabledCallback,
                   actionsHideCallback: this.actionsHideCallback,
                   actionsTitleCallback: this.actionsTitleCallback,
@@ -469,7 +469,7 @@ export default {
               }),
               this.isAddRowActive && h(ATableFormRow, {
                 id: this.id,
-                actionsClasses: this.actionsClasses,
+                actionsClasses: this.actionsClassesLocal,
                 actionsDisabledCallback: this.actionsDisabledCallback,
                 actionsHideCallback: this.actionsHideCallback,
                 actionsTitleCallback: this.actionsTitleCallback,
@@ -532,7 +532,7 @@ export default {
           }, this.rowsFooter.map((row, rowIndex) => {
             return h(ATableFormRow, {
               id: this.id,
-              actionsClasses: this.actionsClasses,
+              actionsClasses: this.actionsClassesLocal,
               actionsDisabledCallback: this.actionsDisabledCallback,
               actionsHideCallback: this.actionsHideCallback,
               actionsTitleCallback: this.actionsTitleCallback,
@@ -582,7 +582,7 @@ export default {
         class: "a_mt_3 a_text_right",
       }, [
         h(AButton, {
-          class: this.classesLocal.addRow,
+          class: this.actionsClassesLocal.addRow,
           disabled: this.isAddDisabled,
           extra: this.extra,
           iconLeft: this.iconsLocal.actionAddRow,

package/src/ATableForm/ATableFormCellAction/ATableFormCellAction.js

@@ -8,6 +8,7 @@ import ATranslation from "../../ATranslation/ATranslation";
 import DeleteAPI from "./compositionAPI/DeleteAPI";
 import DisabledAPI from "./compositionAPI/DisabledAPI";
 import HiddenAPI from "./compositionAPI/HiddenAPI";
+import IdsAPI from "./compositionAPI/IdsAPI";
 import StylesAPI from "./compositionAPI/StylesAPI";
 import TitleAPI from "./compositionAPI/TitleAPI";
 
@@ -141,9 +142,16 @@ export default {
     } = HiddenAPI(props);
 
     const {
+      idBtnCancel,
       idBtnDelete,
+      idBtnEdit,
+      idBtnSave,
+    } = IdsAPI(props);
+
+    const {
       onDeleteClick,
     } = DeleteAPI(props, {
+      idBtnDelete,
       isActionsDisabled: isDeleteDisabled,
     });
 
@@ -160,7 +168,10 @@ export default {
       columnStyles,
       deleteTitle,
       editTitle,
+      idBtnCancel,
       idBtnDelete,
+      idBtnEdit,
+      idBtnSave,
       isDeleteDisabled,
       isDeleteHidden,
       isEditDisabled,
@@ -199,6 +210,7 @@ export default {
           }, this.isActiveEditMode ?
             [
               h(AButton, {
+                id: this.idBtnCancel,
                 class: [
                   "a_table_form__action_button",
                   this.actionsClasses.editCancel,
@@ -209,11 +221,14 @@ export default {
                 title: this.texts.actionEditCancel,
                 textScreenReader: this.texts.actionEditCancel,
                 onClick: () => this.onCancelEditRow({
+                  id: this.id,
                   row: this.row,
                   rowIndex: this.rowIndex,
+                  trigger: "cancel",
                 }),
               }),
               h(AButton, {
+                id: this.idBtnSave,
                 class: [
                   "a_table_form__action_button",
                   this.actionsClasses.editSave,
@@ -224,6 +239,7 @@ export default {
                 title: this.texts.actionEditSave,
                 textScreenReader: this.texts.actionEditSave,
                 onClick: () => this.onSaveEditRow({
+                  id: this.id,
                   row: this.row,
                   rowIndex: this.rowIndex,
                 }),
@@ -244,6 +260,7 @@ export default {
                 onClick: this.onDeleteClick,
               }),
               this.isEditable && !this.isEditHidden && h(AButton, {
+                id: this.idBtnEdit,
                 class: [
                   "a_table_form__action_button",
                   this.actionsClasses.edit,
@@ -254,6 +271,7 @@ export default {
                 title: this.editTitle,
                 textScreenReader: this.editTitle,
                 onClick: () => this.onEditRow({
+                  id: this.id,
                   row: this.row,
                   rowIndex: this.rowIndex,
                 }),

package/src/ATableForm/ATableFormCellAction/compositionAPI/DeleteAPI.js

@@ -9,9 +9,9 @@ import {
 } from "../../../index";
 
 export default function DeleteAPI(props, {
+  idBtnDelete = computed(() => ""),
   isActionsDisabled = computed(() => false),
 }) {
-  const id = toRef(props, "id");
   const isDeletable = toRef(props, "isDeletable");
   const isDeletableConfirm = toRef(props, "isDeletableConfirm");
   const onDeleteRow = toRef(props, "onDeleteRow");
@@ -24,10 +24,6 @@ export default function DeleteAPI(props, {
     openConfirm,
   } = AConfirmAPI();
 
-  const idBtnDelete = computed(() => {
-    return `${ id.value }_delete`;
-  });
-
   const closeConfirmLocal = () => {
     closeConfirm();
     nextTick().then(
@@ -74,7 +70,6 @@ export default function DeleteAPI(props, {
   };
 
   return {
-    idBtnDelete,
     onDeleteClick,
   };
 }

package/src/ATableForm/ATableFormCellAction/compositionAPI/IdsAPI.js

@@ -0,0 +1,31 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function IdsAPI(props) {
+  const id = toRef(props, "id");
+
+  const idBtnDelete = computed(() => {
+    return `${ id.value }_delete`;
+  });
+
+  const idBtnEdit = computed(() => {
+    return `${ id.value }_edit`;
+  });
+
+  const idBtnCancel = computed(() => {
+    return `${ id.value }_cancel`;
+  });
+
+  const idBtnSave = computed(() => {
+    return `${ id.value }_save`;
+  });
+
+  return {
+    idBtnCancel,
+    idBtnDelete,
+    idBtnEdit,
+    idBtnSave,
+  };
+}

package/src/ATableForm/ATableFormRow/compositionAPI/EditAPI.js

@@ -5,7 +5,6 @@ import {
 
 import {
   cloneDeep,
-  isPlainObject,
   set,
   unset,
 } from "lodash-es";
@@ -51,14 +50,16 @@ export default function EditAPI(props, {
     unset(errorsLocal.value, columnId);
   };
 
-  const cancelEditRow = () => {
+  const cancelEditRow = ({ trigger, id } = {}) => {
     onCancelEditRow.value({
       row: row.value,
       rowIndex: rowIndex.value,
+      trigger,
+      id,
     });
   };
 
-  const saveEditRow = async() => {
+  const saveEditRow = async({ id } = {}) => {
     if (isSaving.value) {
       return;
     }
@@ -79,7 +80,7 @@ export default function EditAPI(props, {
         return;
       }
 
-      cancelEditRow();
+      cancelEditRow({ trigger: "save", id });
     } catch (error) {
       errorsLocal.value = error;
     } finally {

package/src/ATableForm/compositionAPI/ClassesAPI.js

@@ -4,20 +4,20 @@ import {
 } from "vue";
 
 export default function ClassesAPI(props) {
-  const classes = toRef(props, "actionsClasses");
+  const actionsClasses = toRef(props, "actionsClasses");
 
-  const classesLocal = computed(() => {
+  const actionsClassesLocal = computed(() => {
     return {
       delete: "a_btn a_btn_transparent_danger",
       edit: "a_btn a_btn_transparent_primary",
       editCancel: "a_btn a_btn_transparent_primary",
       editSave: "a_btn a_btn_transparent_primary",
       addRow: "a_btn a_btn_outline_primary",
-      ...classes.value,
+      ...actionsClasses.value,
     };
   });
 
   return {
-    classesLocal,
+    actionsClassesLocal,
   };
 }

package/src/ATableForm/compositionAPI/EditAPI.js

@@ -1,107 +1,119 @@
-import {
-  computed,
-  ref,
-  toRef,
-} from "vue";
-
-import {
-  cloneDeep,
-  isFunction,
-} from "lodash-es";
-
-export default function EditAPI(props, {
-  getRowKey = () => {},
-}) {
-  const addRow = toRef(props, "addRow");
-  const columns = toRef(props, "columns");
-  const isAddable = toRef(props, "isAddable");
-  const isEditable = toRef(props, "isEditable");
-  const prepareEditModel = toRef(props, "prepareEditModel");
-  const rows = toRef(props, "rows");
-
-  const activeEditRowKey = ref(undefined);
-  const activeEditModel = ref(undefined);
-  const isAddRowActive = ref(false);
-
-  const hasActiveEditRow = computed(() => {
-    return !!activeEditRowKey.value || isAddRowActive.value;
-  });
-
-  const canAddRow = computed(() => {
-    if (!isAddable.value) {
-      return false;
-    }
-
-    return isFunction(addRow.value);
-  });
-
-  const hasRequiredEditableColumns = computed(() => {
-    if (!isEditable.value) {
-      return false;
-    }
-
-    return columns.value.some(column => {
-      return !!column.formElement?.required;
-    });
-  });
-
-  const getPreparedEditModel = params => {
-    if (!isFunction(prepareEditModel.value)) {
-      return undefined;
-    }
-
-    const result = prepareEditModel.value(params);
-
-    if (result?.model === undefined) {
-      return undefined;
-    }
-
-    return cloneDeep(result.model);
-  };
-
-  const onAddRow = () => {
-    if (hasActiveEditRow.value || !canAddRow.value) {
-      return;
-    }
-
-    activeEditRowKey.value = undefined;
-    activeEditModel.value = getPreparedEditModel({
-      rows: rows.value,
-    });
-    isAddRowActive.value = true;
-  };
-
-  const onCancelEditRow = () => {
-    activeEditRowKey.value = undefined;
-    activeEditModel.value = undefined;
-    isAddRowActive.value = false;
-  };
-
-  const onEditRow = ({ row, rowIndex }) => {
-    if (isAddRowActive.value) {
-      return;
-    }
-
-    activeEditModel.value = getPreparedEditModel({
-      row,
-      rowIndex,
-      rows: rows.value,
-    });
-    activeEditRowKey.value = getRowKey({
-      row,
-      rowIndex,
-    });
-  };
-
-  return {
-    activeEditRowKey,
-    activeEditModel,
-    canAddRow,
-    hasActiveEditRow,
-    hasRequiredEditableColumns,
-    isAddRowActive,
-    onAddRow,
-    onCancelEditRow,
-    onEditRow,
-  };
-}
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  setFocusToElement,
+} from "../../utils/utilsDOM";
+import {
+  cloneDeep,
+  isFunction,
+} from "lodash-es";
+
+export default function EditAPI(props, {
+  getRowKey = () => {},
+}) {
+  const addRow = toRef(props, "addRow");
+  const columns = toRef(props, "columns");
+  const isAddable = toRef(props, "isAddable");
+  const isEditable = toRef(props, "isEditable");
+  const prepareEditModel = toRef(props, "prepareEditModel");
+  const rows = toRef(props, "rows");
+
+  const activeEditRowKey = ref(undefined);
+  const activeEditModel = ref(undefined);
+  const isAddRowActive = ref(false);
+
+  const hasActiveEditRow = computed(() => {
+    return !!activeEditRowKey.value || isAddRowActive.value;
+  });
+
+  const canAddRow = computed(() => {
+    if (!isAddable.value) {
+      return false;
+    }
+
+    return isFunction(addRow.value);
+  });
+
+  const hasRequiredEditableColumns = computed(() => {
+    if (!isEditable.value) {
+      return false;
+    }
+
+    return columns.value.some(column => {
+      return !!column.formElement?.required;
+    });
+  });
+
+  const getPreparedEditModel = params => {
+    if (!isFunction(prepareEditModel.value)) {
+      return undefined;
+    }
+
+    const result = prepareEditModel.value(params);
+
+    if (result?.model === undefined) {
+      return undefined;
+    }
+
+    return cloneDeep(result.model);
+  };
+
+  const onAddRow = () => {
+    if (hasActiveEditRow.value || !canAddRow.value) {
+      return;
+    }
+
+    activeEditRowKey.value = undefined;
+    activeEditModel.value = getPreparedEditModel({
+      rows: rows.value,
+    });
+    isAddRowActive.value = true;
+  };
+
+  const onCancelEditRow = ({ trigger, id } = {}) => {
+    activeEditRowKey.value = undefined;
+    activeEditModel.value = undefined;
+    isAddRowActive.value = false;
+    if (trigger === "cancel") {
+      setTimeout(() => {
+        setFocusToElement({ selector: `#${ id }_edit` });
+      });
+    } else if (trigger === "save") {
+      setTimeout(() => {
+        setFocusToElement({ selector: `#${ id }` });
+      });
+    }
+  };
+
+  const onEditRow = ({ row, rowIndex }) => {
+    if (isAddRowActive.value) {
+      return;
+    }
+
+    activeEditModel.value = getPreparedEditModel({
+      row,
+      rowIndex,
+      rows: rows.value,
+    });
+    activeEditRowKey.value = getRowKey({
+      row,
+      rowIndex,
+    });
+  };
+
+  return {
+    activeEditRowKey,
+    activeEditModel,
+    canAddRow,
+    hasActiveEditRow,
+    hasRequiredEditableColumns,
+    isAddRowActive,
+    onAddRow,
+    onCancelEditRow,
+    onEditRow,
+  };
+}

package/src/ui/AInputCurrency/AInputCurrency.js

@@ -242,6 +242,10 @@ export default {
       required: false,
       default: () => AInputCurrencyPluginOptions.propsDefault.modelUndefined,
     },
+    skipRequiredModelInit: {
+      type: Boolean,
+      required: false,
+    },
     modelValue: {
       type: [String, Number],
       required: false,

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

@@ -30,6 +30,7 @@ export default function InputEventsAPI(props, {
   const modelValue = toRef(props, "modelValue");
   const readonly = toRef(props, "readonly");
   const required = toRef(props, "required");
+  const skipRequiredModelInit = toRef(props, "skipRequiredModelInit");
   const decimalPartLength = toRef(props, "decimalPartLength");
   const thousandDivider = toRef(props, "thousandDivider");
   const validationOnChange = toRef(props, "validationOnChange");
@@ -121,7 +122,7 @@ export default function InputEventsAPI(props, {
   };
 
   const handleInput = ($event, { value: _value, updateOutside = false, triggerDetails = "keydown" } = {}) => {
-    if (!required.value && isNil(_value) && !$event?.target?.value) {
+    if ((!required.value || skipRequiredModelInit.value) && isNil(_value) && !$event?.target?.value) {
       setValueLocal({ value: _value, updateOutside, triggerDetails });
 
       return;
@@ -726,7 +727,7 @@ export default function InputEventsAPI(props, {
           valueToSet = `${ setMinusSymbol }${ intPart }${ decimalDivider.value }${ floatPart }${ zerosToAdd }`;
         }
       } else {
-        valueToSet = required.value ?
+        valueToSet = required.value && !skipRequiredModelInit.value ?
           [
             "0",
             decimalDivider.value,
@@ -734,7 +735,7 @@ export default function InputEventsAPI(props, {
           ].join("") :
           modelUndefinedLocal.value;
       }
-      const shouldInitModel = required.value && !hasModel;
+      const shouldInitModel = required.value && !skipRequiredModelInit.value && !hasModel;
       handleInput(null, { value: valueToSet, updateOutside: !shouldInitModel, triggerDetails: "init" });
     });
   };

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

@@ -17,6 +17,7 @@ export default function ModelAPI(props, {
   const modelValue = toRef(props, "modelValue");
   const modelType = toRef(props, "modelType");
   const modelUndefined = toRef(props, "modelUndefined");
+  const skipRequiredModelInit = toRef(props, "skipRequiredModelInit");
   const decimalDivider = toRef(props, "decimalDivider");
   const disabled = toRef(props, "disabled");
   const decimalPartLength = toRef(props, "decimalPartLength");
@@ -36,7 +37,7 @@ export default function ModelAPI(props, {
   });
 
   const modelUndefinedLocal = computed(() => {
-    if (!required.value) {
+    if (!required.value || skipRequiredModelInit.value) {
       return modelUndefined.value;
     }
     if (!decimalPartLength.value) {
@@ -53,7 +54,7 @@ export default function ModelAPI(props, {
   const setCurrentValue = ({ value, updateOutside = false, trigger, triggerDetails } = {}) => {
     displayValue.value = isNil(value) ? "" : value;
     let newVal;
-    if (!required.value && isNil(value)) {
+    if ((!required.value || skipRequiredModelInit.value) && isNil(value)) {
       newVal = modelUndefinedLocal.value;
     } else {
       newVal = modelType.value === "number" ?