aloha-vue 2.57.3 → 2.57.5

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/ATableFormCellDnd/ATableFormCellDnd.js

@@ -133,6 +133,7 @@ export default {
               class: "a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",
               disabled: this.isDndDisabled,
               iconLeft: ChevronUp,
+              preventKeyboardRepeat: true,
               tabindex: this.isDndDisabled ? -1 : undefined,
               title: this.texts.reorderUp,
               textScreenReader: this.texts.reorderUp,
@@ -163,6 +164,7 @@ export default {
               class: "a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",
               disabled: this.isDndDisabled,
               iconLeft: ChevronDown,
+              preventKeyboardRepeat: true,
               tabindex: this.isDndDisabled ? -1 : undefined,
               title: this.texts.reorderDown,
               textScreenReader: this.texts.reorderDown,

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/ATableFormTh/ATableFormTh.js

@@ -36,12 +36,6 @@ export default {
     };
   },
   render() {
-    const slotHeader = this.column.slotHeader;
-    const slotProps = {
-      column: this.column,
-      isEditable: this.isEditable,
-    };
-
     return h("th", {
       class: [
         "a_table_form__cell",

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/ColumnsGrowAPI.js

@@ -14,6 +14,8 @@ import {
   isString,
 } from "lodash-es";
 
+const TABLE_WIDTH_SAFE_DELTA = 2;
+
 export default function ColumnsGrowAPI(props, {
   hasActionsColumn = computed(() => false),
   widthsLocal = computed(() => ({})),
@@ -106,7 +108,8 @@ export default function ColumnsGrowAPI(props, {
     }
 
     const columnsLocal = columns.value || [];
-    const tableWidthAvailable = tableWidth.value - actionsColumnWidth.value - dndColumnWidth.value;
+    // Leave a small buffer to avoid subpixel overflow triggering a useless scrollbar.
+    const tableWidthAvailable = tableWidth.value - actionsColumnWidth.value - dndColumnWidth.value - TABLE_WIDTH_SAFE_DELTA;
 
     if (tableWidthAvailable <= 0) {
       columnsStylesGrow.value = {};

package/src/ATableForm/compositionAPI/DeleteAPI.js

@@ -1,6 +1,6 @@
 export default function DeleteAPI(props, { emit }) {
-  const onDeleteRow = ({ row, rowIndex }) => {
-    emit("deleteRow", { row, rowIndex });
+  const onDeleteRow = ({ row, rowIndex, rowId, btnDeleteId }) => {
+    emit("deleteRow", { row, rowIndex, rowId, btnDeleteId });
   };
 
   return {

package/src/ATableForm/compositionAPI/DragAndDropAPI.js

@@ -12,6 +12,7 @@ import {
 export default function DragAndDropAPI(props, { emit }, {
   isDndDisabled = computed(() => false),
 } = {}) {
+  const focusAfterMove = toRef(props, "focusAfterMove");
   const id = toRef(props, "id");
   const isDragAndDrop = toRef(props, "isDragAndDrop");
   const rows = toRef(props, "rows");
@@ -82,7 +83,7 @@ export default function DragAndDropAPI(props, { emit }, {
     };
   };
 
-  const moveRow = ({ fromIndex, toIndex, trigger }) => {
+  const moveRow = ({ focusId, fromIndex, toIndex, trigger }) => {
     if (!isDragAndDrop.value ||
       isDndDisabled.value ||
       fromIndex === toIndex ||
@@ -97,8 +98,9 @@ export default function DragAndDropAPI(props, { emit }, {
     const [movedRow] = ROWS_LOCAL.splice(fromIndex, 1);
     ROWS_LOCAL.splice(toIndex, 0, movedRow);
 
-    emit("updateRows", { rows: ROWS_LOCAL, trigger, fromIndex, toIndex });
+    emit("updateRows", { focusId, rows: ROWS_LOCAL, trigger, fromIndex, toIndex });
     emit("moveRow", {
+      focusId,
       fromIndex,
       row: movedRow,
       toIndex,
@@ -128,34 +130,42 @@ export default function DragAndDropAPI(props, { emit }, {
     });
   };
 
+  const setFocusAfterMoveLocal = ({ focusId }) => {
+    if (!focusAfterMove.value) {
+      return;
+    }
+
+    nextTick().then(
+      () => {
+        setFocusToElement({ selector: `#${ focusId }` });
+      },
+    );
+  };
+
   const moveRowUp = rowIndex => {
+    const focusIndex = Math.max(1, rowIndex - 1);
+    const focusId = `${ id.value }_${ focusIndex }_up`;
     moveRow({
+      focusId,
       fromIndex: rowIndex,
       toIndex: rowIndex - 1,
       trigger: "moveRowUp",
     });
 
-    nextTick().then(
-      () => {
-        const INDEX = Math.max(1, rowIndex - 1);
-        setFocusToElement({ selector: `#${ id.value }_${ INDEX }_up` });
-      },
-    );
+    setFocusAfterMoveLocal({ focusId });
   };
 
   const moveRowDown = rowIndex => {
+    const focusIndex = Math.min(rows.value.length - 2, rowIndex + 1);
+    const focusId = `${ id.value }_${ focusIndex }_down`;
     moveRow({
+      focusId,
       fromIndex: rowIndex,
       toIndex: rowIndex + 1,
       trigger: "moveRowDown",
     });
 
-    nextTick().then(
-      () => {
-        const INDEX = Math.min(rows.value.length - 2, rowIndex + 1);
-        setFocusToElement({ selector: `#${ id.value }_${ INDEX }_down` });
-      },
-    );
+    setFocusAfterMoveLocal({ focusId });
   };
 
   const onDragstart = ($event, rowIndex) => {

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" ?