aloha-vue 2.63.0 → 2.64.0

package/src/ATableForm/__tests__/ATableForm.ListView.test.js

@@ -1,9 +1,9 @@
-import {
-  computed,
-  nextTick,
-  reactive,
-  ref,
-} from "vue";
+import {
+  computed,
+  nextTick,
+  reactive,
+  ref,
+} from "vue";
 import {
   describe,
   expect,
@@ -15,18 +15,20 @@ import {
 } from "@vue/test-utils";
 
 import AForm from "../../ui/AForm/AForm";
-import ATableForm from "../ATableForm";
-import ATableFormCellList from "../ATableFormCellList/ATableFormCellList";
-
-import CellDisabledAPI from "../ATableFormCell/compositionAPI/DisabledAPI";
-import CellReadonlyAPI from "../ATableFormCell/compositionAPI/ReadonlyAPI";
-import CellActionStylesAPI from "../ATableFormCellAction/compositionAPI/StylesAPI";
-import ColumnsAPI from "../compositionAPI/ColumnsAPI";
-import ColumnsGrowAPI from "../compositionAPI/ColumnsGrowAPI";
+import ATableFormCellList from "../ATableFormCellList/ATableFormCellList";
+
+import CellActionStylesAPI from "../ATableFormCellAction/compositionAPI/StylesAPI";
+import CellDisabledAPI from "../ATableFormCell/compositionAPI/DisabledAPI";
+import CellReadonlyAPI from "../ATableFormCell/compositionAPI/ReadonlyAPI";
+import ColumnsAPI from "../compositionAPI/ColumnsAPI";
+import ColumnsGrowAPI from "../compositionAPI/ColumnsGrowAPI";
 import DataAPI from "../ATableFormCellList/compositionAPI/DataAPI";
 import RowEditAPI from "../ATableFormRow/compositionAPI/EditAPI";
 import TableEditAPI from "../compositionAPI/EditAPI";
 
+import ATableForm from "../ATableForm";
+import getFormElement from "../utils/getFormElement";
+
 jest.mock("../../ui/AForm/AForm", () => {
   const {
     h,
@@ -176,214 +178,297 @@ jest.mock("aloha-svg/dist/js/bootstrap/XLg", () => ({
   default: "<svg></svg>",
 }));
 
-describe("ATableForm list view", () => {
-  it("uses disabled fields for editable rows and readonly fields for non-editable rows", () => {
-    const props = reactive({
-      column: {
-        formElement: {},
-      },
-      isEditable: true,
-      isEditMode: false,
-      isFooter: false,
-    });
-    const {
-      disabledLocal,
-    } = CellDisabledAPI(props);
-    const {
-      readonlyLocal,
-    } = CellReadonlyAPI(props);
-
-    expect(disabledLocal.value).toBe(true);
-    expect(readonlyLocal.value).toBe(false);
-
-    props.isEditable = false;
-
-    expect(disabledLocal.value).toBe(false);
-    expect(readonlyLocal.value).toBe(true);
-  });
-
-  it.each([
-    [true, true, 112],
-    [true, false, 64],
-    [false, true, 64],
-    [false, false, 64],
-  ])("uses the expected action width for editable=%s and deletable=%s", (isEditable, isDeletable, width) => {
-    const props = reactive({
-      hasActiveEditRow: false,
-      isActiveEditMode: false,
-      isDeletable,
-      isDeletableConfirm: false,
-      isEditable,
-      widths: {
-        actionsColumnDouble: 112,
-        actionsColumnSingle: 64,
-      },
-    });
-    const {
-      columnStyles,
-    } = CellActionStylesAPI(props);
-
-    expect(columnStyles.value.width).toBe(`${ width }px`);
-  });
-
-  it("shows the actions column only for edit, delete, or an active add row", () => {
-    const isAddRowActive = ref(false);
-    const props = reactive({
-      columns: [{ id: "name" }],
-      isDeletable: false,
-      isDeletableConfirm: false,
-      isDragAndDrop: false,
-      isEditable: false,
-      rowView: "table",
-    });
-    const {
-      allColumnsLength,
-      hasActionsColumn,
-    } = ColumnsAPI(props, {
-      isAddRowActive,
-    });
-
-    expect(hasActionsColumn.value).toBe(false);
-    expect(allColumnsLength.value).toBe(1);
-
-    props.isEditable = true;
-    expect(hasActionsColumn.value).toBe(true);
-    expect(allColumnsLength.value).toBe(2);
-
-    props.isEditable = false;
-    props.isDeletableConfirm = true;
-    expect(hasActionsColumn.value).toBe(true);
-
-    props.isDeletableConfirm = false;
-    isAddRowActive.value = true;
-    expect(hasActionsColumn.value).toBe(true);
-  });
-
-  it("grows all columns equally only when no column has a positive grow value", async() => {
-    const resizeObserverOriginal = global.ResizeObserver;
-    global.ResizeObserver = class {
-      disconnect() {}
-      observe() {}
-      unobserve() {}
-    };
-
-    const wrapperElement = document.createElement("div");
-    const tableElement = document.createElement("table");
-    tableElement.id = "table_grow_fallback";
-    wrapperElement.getBoundingClientRect = () => ({ width: 500 });
-    wrapperElement.appendChild(tableElement);
-    document.body.appendChild(wrapperElement);
-
-    const props = reactive({
-      id: "table_grow_fallback",
-      isColumnsGrow: true,
-      isDeletable: false,
-      isDeletableConfirm: false,
-      isDragAndDrop: false,
-      isEditable: true,
-    });
-    const columns = ref([
-      { grow: 0, id: "first", width: "100px" },
-      { id: "second", width: "100px" },
-    ]);
-    const columnsVisible = computed(() => columns.value);
-    const {
-      columnsStylesGrow,
-      destroyColumnsGrowObserver,
-      initColumnsGrowObserver,
-    } = ColumnsGrowAPI(props, {
-      columnsVisible,
-      hasActionsColumn: computed(() => true),
-      widthsLocal: computed(() => ({
-        actionsColumnDouble: 112,
-        actionsColumnSingle: 64,
-        dndColumn: 56,
-      })),
-    });
-
-    initColumnsGrowObserver();
-
-    expect(columnsStylesGrow.value).toEqual({
-      first: {
-        maxWidth: "217px",
-        minWidth: "217px",
-        width: "217px",
-      },
-      second: {
-        maxWidth: "217px",
-        minWidth: "217px",
-        width: "217px",
-      },
-    });
-
-    columns.value = [
-      { grow: 1, id: "first", width: "100px" },
-      { grow: 0, id: "second", width: "100px" },
-    ];
-    await nextTick();
-
-    expect(columnsStylesGrow.value.first.width).toBe("334px");
-    expect(columnsStylesGrow.value.second.width).toBe("100px");
-
-    destroyColumnsGrowObserver();
-    wrapperElement.remove();
-    global.ResizeObserver = resizeObserverOriginal;
-  });
-
-  it("allows adding editable data when row editing is disabled", async() => {
-    const wrapper = mount(ATableForm, {
-      props: {
-        addRow: jest.fn(),
-        columns: [
-          {
-            id: "name",
-            formElement: {
-              type: "text",
-            },
-          },
-        ],
-        isAddable: true,
-        isEditable: false,
-        rowView: "list",
-        rows: [],
-      },
-    });
-
-    expect(wrapper.find(".a_table_form__cell_actions").exists()).toBe(false);
-
-    await wrapper.find(".a_mt_3 button").trigger("click");
-
-    expect(wrapper.find("tbody button[id$='_cancel']").exists()).toBe(true);
-    expect(wrapper.find("tbody button[id$='_save']").exists()).toBe(true);
-    expect(wrapper.findComponent(AForm).props("readonly")).toBe(false);
-  });
-
-  it("allows DND but not row-click editing when rows are not editable", async() => {
-    const wrapper = mount(ATableForm, {
-      props: {
-        columns: [
-          {
-            id: "name",
-            formElement: {
-              type: "text",
-            },
-          },
-        ],
-        isDragAndDrop: true,
-        isEditable: false,
-        isEditOnRowClick: true,
-        rows: [{ name: "Readonly" }],
-      },
-    });
-
-    expect(wrapper.find("tbody .a_table_form__reorder_handle").attributes("draggable")).toBe("true");
-
-    await wrapper.find("tbody tr.a_table_form__row").trigger("click");
-
-    expect(wrapper.find("tbody button[id$='_save']").exists()).toBe(false);
-  });
-
-  it("enters edit mode by row click only when enabled and row edit is available", async() => {
+describe("ATableForm list view", () => {
+  it("uses disabled fields for editable rows and readonly fields for non-editable rows", () => {
+    const props = reactive({
+      column: {
+        formElement: {},
+      },
+      isEditable: true,
+      isEditMode: false,
+      isFooter: false,
+    });
+    const {
+      disabledLocal,
+    } = CellDisabledAPI(props);
+    const {
+      readonlyLocal,
+    } = CellReadonlyAPI(props);
+
+    expect(disabledLocal.value).toBe(true);
+    expect(readonlyLocal.value).toBe(false);
+
+    props.isEditable = false;
+
+    expect(disabledLocal.value).toBe(false);
+    expect(readonlyLocal.value).toBe(true);
+  });
+
+  it("merges row-specific form element props only in edit mode", () => {
+    const formElementEditPropsCallback = jest.fn(({ rowData }) => ({
+      disabled: rowData.locked,
+      min: rowData.minimum,
+      readonly: true,
+    }));
+    const props = reactive({
+      column: {
+        id: "score",
+        formElement: {
+          disabled: false,
+          min: 0,
+          type: "integer",
+        },
+        formElementEditPropsCallback,
+      },
+      columnIndex: 1,
+      isCreateMode: true,
+      isEditable: true,
+      isEditMode: false,
+      isFooter: false,
+      row: {
+        id: 1,
+        locked: true,
+        minimum: 10,
+      },
+      rowData: {
+        id: 1,
+        locked: true,
+        minimum: 20,
+      },
+      rowIndex: 2,
+      rows: [],
+    });
+    const formElement = computed(() => getFormElement({
+      column: props.column,
+      columnIndex: props.columnIndex,
+      isCreateMode: props.isCreateMode,
+      isEditMode: props.isEditMode,
+      row: props.row,
+      rowData: props.rowData,
+      rowIndex: props.rowIndex,
+      rows: props.rows,
+    }));
+    const {
+      disabledLocal,
+    } = CellDisabledAPI(props, {
+      formElement,
+    });
+    const {
+      readonlyLocal,
+    } = CellReadonlyAPI(props, {
+      formElement,
+    });
+
+    expect(formElement.value).toEqual(props.column.formElement);
+    expect(formElementEditPropsCallback).not.toHaveBeenCalled();
+
+    props.isEditMode = true;
+
+    expect(formElement.value).toEqual(props.column.formElement);
+    expect(formElementEditPropsCallback).not.toHaveBeenCalled();
+
+    props.isCreateMode = false;
+
+    expect(formElement.value).toEqual({
+      disabled: true,
+      min: 20,
+      readonly: true,
+      type: "integer",
+    });
+    expect(disabledLocal.value).toBe(true);
+    expect(readonlyLocal.value).toBe(true);
+    expect(formElementEditPropsCallback).toHaveBeenCalledWith({
+      column: props.column,
+      columnIndex: 1,
+      row: props.row,
+      rowData: props.rowData,
+      rowIndex: 2,
+      rows: props.rows,
+    });
+  });
+
+  it.each([
+    [true, true, 112],
+    [true, false, 64],
+    [false, true, 64],
+    [false, false, 64],
+  ])("uses the expected action width for editable=%s and deletable=%s", (isEditable, isDeletable, width) => {
+    const props = reactive({
+      hasActiveEditRow: false,
+      isActiveEditMode: false,
+      isDeletable,
+      isDeletableConfirm: false,
+      isEditable,
+      widths: {
+        actionsColumnDouble: 112,
+        actionsColumnSingle: 64,
+      },
+    });
+    const {
+      columnStyles,
+    } = CellActionStylesAPI(props);
+
+    expect(columnStyles.value.width).toBe(`${ width }px`);
+  });
+
+  it("shows the actions column only for edit, delete, or an active add row", () => {
+    const isAddRowActive = ref(false);
+    const props = reactive({
+      columns: [{ id: "name" }],
+      isDeletable: false,
+      isDeletableConfirm: false,
+      isDragAndDrop: false,
+      isEditable: false,
+      rowView: "table",
+    });
+    const {
+      allColumnsLength,
+      hasActionsColumn,
+    } = ColumnsAPI(props, {
+      isAddRowActive,
+    });
+
+    expect(hasActionsColumn.value).toBe(false);
+    expect(allColumnsLength.value).toBe(1);
+
+    props.isEditable = true;
+    expect(hasActionsColumn.value).toBe(true);
+    expect(allColumnsLength.value).toBe(2);
+
+    props.isEditable = false;
+    props.isDeletableConfirm = true;
+    expect(hasActionsColumn.value).toBe(true);
+
+    props.isDeletableConfirm = false;
+    isAddRowActive.value = true;
+    expect(hasActionsColumn.value).toBe(true);
+  });
+
+  it("grows all columns equally only when no column has a positive grow value", async() => {
+    const resizeObserverOriginal = global.ResizeObserver;
+    global.ResizeObserver = class {
+      disconnect() {}
+      observe() {}
+      unobserve() {}
+    };
+
+    const wrapperElement = document.createElement("div");
+    const tableElement = document.createElement("table");
+    tableElement.id = "table_grow_fallback";
+    wrapperElement.getBoundingClientRect = () => ({ width: 500 });
+    wrapperElement.appendChild(tableElement);
+    document.body.appendChild(wrapperElement);
+
+    const props = reactive({
+      id: "table_grow_fallback",
+      isColumnsGrow: true,
+      isDeletable: false,
+      isDeletableConfirm: false,
+      isDragAndDrop: false,
+      isEditable: true,
+    });
+    const columns = ref([
+      { grow: 0, id: "first", width: "100px" },
+      { id: "second", width: "100px" },
+    ]);
+    const columnsVisible = computed(() => columns.value);
+    const {
+      columnsStylesGrow,
+      destroyColumnsGrowObserver,
+      initColumnsGrowObserver,
+    } = ColumnsGrowAPI(props, {
+      columnsVisible,
+      hasActionsColumn: computed(() => true),
+      widthsLocal: computed(() => ({
+        actionsColumnDouble: 112,
+        actionsColumnSingle: 64,
+        dndColumn: 56,
+      })),
+    });
+
+    initColumnsGrowObserver();
+
+    expect(columnsStylesGrow.value).toEqual({
+      first: {
+        maxWidth: "217px",
+        minWidth: "217px",
+        width: "217px",
+      },
+      second: {
+        maxWidth: "217px",
+        minWidth: "217px",
+        width: "217px",
+      },
+    });
+
+    columns.value = [
+      { grow: 1, id: "first", width: "100px" },
+      { grow: 0, id: "second", width: "100px" },
+    ];
+    await nextTick();
+
+    expect(columnsStylesGrow.value.first.width).toBe("334px");
+    expect(columnsStylesGrow.value.second.width).toBe("100px");
+
+    destroyColumnsGrowObserver();
+    wrapperElement.remove();
+    global.ResizeObserver = resizeObserverOriginal;
+  });
+
+  it("allows adding editable data when row editing is disabled", async() => {
+    const wrapper = mount(ATableForm, {
+      props: {
+        addRow: jest.fn(),
+        columns: [
+          {
+            id: "name",
+            formElement: {
+              type: "text",
+            },
+          },
+        ],
+        isAddable: true,
+        isEditable: false,
+        rowView: "list",
+        rows: [],
+      },
+    });
+
+    expect(wrapper.find(".a_table_form__cell_actions").exists()).toBe(false);
+
+    await wrapper.find(".a_mt_3 button").trigger("click");
+
+    expect(wrapper.find("tbody button[id$='_cancel']").exists()).toBe(true);
+    expect(wrapper.find("tbody button[id$='_save']").exists()).toBe(true);
+    expect(wrapper.findComponent(AForm).props("readonly")).toBe(false);
+  });
+
+  it("allows DND but not row-click editing when rows are not editable", async() => {
+    const wrapper = mount(ATableForm, {
+      props: {
+        columns: [
+          {
+            id: "name",
+            formElement: {
+              type: "text",
+            },
+          },
+        ],
+        isDragAndDrop: true,
+        isEditable: false,
+        isEditOnRowClick: true,
+        rows: [{ name: "Readonly" }],
+      },
+    });
+
+    expect(wrapper.find("tbody .a_table_form__reorder_handle").attributes("draggable")).toBe("true");
+
+    await wrapper.find("tbody tr.a_table_form__row").trigger("click");
+
+    expect(wrapper.find("tbody button[id$='_save']").exists()).toBe(false);
+  });
+
+  it("enters edit mode by row click only when enabled and row edit is available", async() => {
     const rows = [
       {
         id: 1,
@@ -634,6 +719,49 @@ describe("ATableForm list view", () => {
     expect(dataForm.value[0].children[0].readonly).toBe(false);
   });
 
+  it("applies row-specific form element props in list edit mode", () => {
+    const props = reactive({
+      columns: [
+        {
+          id: "score",
+          formElement: {
+            min: 0,
+            type: "integer",
+          },
+          formElementEditPropsCallback: ({ rowData }) => ({
+            disabled: rowData.locked,
+            min: rowData.minimum,
+          }),
+        },
+      ],
+      isEditable: true,
+      isEditMode: false,
+      row: {
+        locked: true,
+        minimum: 10,
+      },
+      rowData: {
+        locked: true,
+        minimum: 20,
+      },
+      rowIndex: 0,
+      rows: [],
+    });
+    const {
+      dataForm,
+    } = DataAPI(props);
+
+    expect(dataForm.value[0].min).toBe(0);
+
+    props.isEditMode = true;
+
+    expect(dataForm.value[0]).toEqual(expect.objectContaining({
+      disabled: true,
+      min: 20,
+      type: "integer",
+    }));
+  });
+
   it("passes the complete errors object to AForm and emits its full model", async() => {
     const errors = {
       negative: ["Value is too low"],

package/src/ATableForm/utils/getFormElement.js

@@ -0,0 +1,32 @@
+import {
+  isFunction,
+} from "lodash-es";
+
+export default function getFormElement({
+  column,
+  columnIndex,
+  isCreateMode,
+  isEditMode,
+  row,
+  rowData,
+  rowIndex,
+  rows,
+}) {
+  const formElement = column?.formElement || {};
+
+  if (!isEditMode || isCreateMode || !isFunction(column?.formElementEditPropsCallback)) {
+    return formElement;
+  }
+
+  return {
+    ...formElement,
+    ...column.formElementEditPropsCallback({
+      column,
+      columnIndex,
+      row,
+      rowData,
+      rowIndex,
+      rows,
+    }),
+  };
+}

package/src/ui/AInputCurrency/AInputCurrency.js

@@ -318,6 +318,7 @@ export default {
     const {
       adjustFloatPartAndDivider,
       getCleanIntValue,
+      normalizeValueFromModel,
     } = UtilsAPI(props);
 
     const {
@@ -391,6 +392,7 @@ export default {
       increase,
       modelNumber,
       modelUndefinedLocal,
+      normalizeValueFromModel,
       onBlur,
       onFocus,
       setCurrentValue,

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

@@ -18,6 +18,7 @@ export default function InputEventsAPI(props, {
   increase = () => {},
   modelNumber = computed(() => undefined),
   modelUndefinedLocal = computed(() => undefined),
+  normalizeValueFromModel = value => value,
   onBlur = () => {},
   onFocus = () => {},
   setCurrentValue = () => {},
@@ -129,7 +130,7 @@ export default function InputEventsAPI(props, {
     }
     let value;
     if (updateOutside) {
-      value = typeof _value === "number" ? `${ _value }`.replace(".", decimalDivider.value) : _value;
+      value = normalizeValueFromModel(_value);
     } else {
       value = isNil(_value) ? $event.target.value : `${ _value }`;
     }
@@ -713,7 +714,7 @@ export default function InputEventsAPI(props, {
       const hasModel = modelValue.value || modelValue.value === 0;
       let valueToSet;
       if (hasModel) {
-        valueToSet = modelValue.value.toString().replace(".", decimalDivider.value);
+        valueToSet = normalizeValueFromModel(modelValue.value);
         if (decimalDivider.value) {
           const splitVal = valueToSet.toString().split(decimalDivider.value);
           const intPart = splitVal[0];