aloha-vue 2.68.0 → 2.70.0

package/package.json

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

@@ -88,11 +88,16 @@ export default {
       required: false,
       default: undefined,
     },
-    focusAfterMove: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
+    focusAfterMove: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    fullWidthRowCallback: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
     icons: {
       type: Object,
       required: false,
@@ -466,9 +471,10 @@ export default {
                   draggedRowIndex: this.draggedRowIndex,
                   editModel: this.activeEditRowKey === rowKey ? this.activeEditModel : undefined,
                   editFocusColumnId: this.activeEditRowKey === rowKey ? this.activeEditFocusColumnId : undefined,
-                  errorIcon: this.errorIcon,
-                  extra: this.extra,
-                  hasActionsColumn: this.hasActionsColumn,
+                  errorIcon: this.errorIcon,
+                  extra: this.extra,
+                  fullWidthRowCallback: this.fullWidthRowCallback,
+                  hasActionsColumn: this.hasActionsColumn,
                   hasActiveEditRow: this.hasActiveEditRow,
                   isActionsSticky: this.isActionsSticky,
                   isActiveEditMode: this.activeEditRowKey === rowKey,
@@ -589,8 +595,9 @@ export default {
               columns: this.columnsVisible,
               columnsStylesGrow: this.columnsStylesGrow,
               draggedRowIndex: this.draggedRowIndex,
-              extra: this.extra,
-              hasActionsColumn: this.hasActionsColumn,
+              extra: this.extra,
+              fullWidthRowCallback: this.fullWidthRowCallback,
+              hasActionsColumn: this.hasActionsColumn,
               hasActiveEditRow: this.hasActiveEditRow,
               isActionsSticky: this.isActionsSticky,
               isActiveEditMode: false,

package/src/ATableForm/ATableFormCell/ATableFormCell.js

@@ -161,8 +161,16 @@ export default {
     } = this.formElementLocal;
 
     const slotProps = {
+      change: this.updateRowData,
       column: this.column,
       columnIndex: this.columnIndex,
+      errorIcon: this.errorIcon,
+      errors: this.errors,
+      id: this.id,
+      isCreateMode: this.isCreateMode,
+      isEditMode: this.isEditMode,
+      isFooter: this.isFooter,
+      modelValue: get(this.rowDataLocal, this.column.id),
       row: this.row,
       rowIndex: this.rowIndex,
       rows: this.rows,

package/src/ATableForm/ATableFormRow/ATableFormRow.js

@@ -140,11 +140,16 @@ export default {
       required: false,
       default: undefined,
     },
-    extra: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
+    extra: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    fullWidthRowCallback: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
     hasActionsColumn: {
       type: Boolean,
       required: false,
@@ -357,11 +362,12 @@ export default {
     };
   },
   computed: {
-    canEditOnRowClick() {
-      if (
-        !this.isEditOnRowClick ||
-        !this.isEditable ||
-        this.isActiveEditMode ||
+    canEditOnRowClick() {
+      if (
+        !this.isEditOnRowClick ||
+        !this.isEditable ||
+        this.isFullWidthRow ||
+        this.isActiveEditMode ||
         this.isCreateMode ||
         this.isFooter ||
         this.isHeader ||
@@ -387,10 +393,26 @@ export default {
       })) {
         return false;
       }
-
-      return true;
-    },
-    currentRowData() {
+
+      return true;
+    },
+    isFullWidthRow() {
+      if (
+        this.isHeader ||
+        this.isCreateMode ||
+        this.isActiveEditMode ||
+        !isFunction(this.fullWidthRowCallback)
+      ) {
+        return false;
+      }
+
+      return !!this.$slots.fullWidthRow && !!this.fullWidthRowCallback({
+        isFooter: this.isFooter,
+        row: this.row,
+        rowIndex: this.rowIndex,
+      });
+    },
+    currentRowData() {
       return this.isActiveEditMode && this.modelLocal ? this.modelLocal : this.row;
     },
   },
@@ -438,8 +460,8 @@ export default {
       },
     },
   },
-  render() {
-    const rows = [];
+  render() {
+    const rows = [];
 
     if (this.isActiveEditMode && this.texts.editInfoText) {
       rows.push(h("tr", {
@@ -460,7 +482,20 @@ export default {
       ]));
     }
 
-    rows.push(h("tr", {
+    let fullWidthRowCells;
+    if (this.isFullWidthRow) {
+      fullWidthRowCells = [h("td", {
+        class: "a_table_form__cell a_table_form__cell_full_width",
+        colspan: this.allColumnsLength,
+      }, this.$slots.fullWidthRow({
+        isFooter: this.isFooter,
+        row: this.row,
+        rowIndex: this.rowIndex,
+        rows: this.rows,
+      }))];
+    }
+
+    rows.push(h("tr", {
       id: this.idTr,
       "aria-grabbed": !this.isHeader && !this.isFooter ? this.draggedRowIndex === this.rowIndex : undefined,
       class: [
@@ -474,98 +509,98 @@ export default {
       onDragleave: this.onDragleave && ($event => this.onDragleave($event, this.rowIndex)),
       onDragover: this.onDragover && ($event => this.onDragover($event, this.rowIndex)),
       onDrop: this.onDrop && ($event => this.onDrop($event, this.rowIndex)),
-    }, [
-      this.isDragAndDrop ?
-        h(ATableFormCellDnd, {
-          id: this.idTr,
-          canMoveRowDown: this.canMoveRowDown,
-          canMoveRowUp: this.canMoveRowUp,
-          isCreateMode: this.isCreateMode,
-          isDndDisabled: this.isDndDisabled,
-          isDndLocked: this.isDndLocked,
-          isDragAndDrop: this.isDragAndDrop,
-          isFooter: this.isFooter,
-          isHeader: this.isHeader,
-          moveRowDown: this.moveRowDown,
-          moveRowUp: this.moveRowUp,
-          onDragend: this.onDragend,
-          onDragstart: this.onDragstart,
-          rowIndex: this.rowIndex,
-          texts: this.texts,
-          widths: this.widths,
-        }) :
-        null,
-      ...(this.rowView === "list" && !this.isHeader ?
-        [h(ATableFormCellList, {
-          id: this.idTr,
-          columns: this.columns,
-          errors: this.errorsLocal,
-          isCreateMode: this.isCreateMode,
-          isEditable: this.isEditable,
-          isEditMode: this.isActiveEditMode,
-          isFooter: this.isFooter,
-          onUpdateRowData: this.updateModelLocal,
-          row: this.row,
-          rowData: this.currentRowData,
-          rowIndex: this.rowIndex,
-          rows: this.rows,
-        }, this.$slots)] :
-        this.columns.map((column, columnIndex) => {
-          if (this.isHeader) {
-            return h(ATableFormTh, {
-              column,
-              columnStyle: this.columnsStylesGrow[column.id],
-              isEditable: this.isEditable,
-            }, this.$slots);
-          }
-
-          return h(ATableFormCell, {
-            id: this.idTr,
-            column,
-            columnIndex,
-            columnStyle: this.columnsStylesGrow[column.id],
-            errorIcon: this.errorIcon,
-            errors: this.errorsLocal,
-            isCreateMode: this.isCreateMode,
-            isEditable: this.isEditable,
-            isEditMode: this.isActiveEditMode,
-            isFooter: this.isFooter,
-            onUpdateRowData: this.updateModelLocal,
-            row: this.row,
-            rowData: this.currentRowData,
-            rowIndex: this.rowIndex,
-            rows: this.rows,
-            tag: this.cellTag,
-          }, this.$slots);
-        })),
-      this.hasActionsColumn ?
-        h(ATableFormCellAction, {
-          id: this.idTr,
-          actionsClasses: this.actionsClasses,
-          actionsDisabledCallback: this.actionsDisabledCallback,
-          actionsHideCallback: this.actionsHideCallback,
-          actionsTitleCallback: this.actionsTitleCallback,
-          extra: this.extra,
-          hasActiveEditRow: this.hasActiveEditRow,
-          isActionsSticky: this.isActionsSticky,
-          isActiveEditMode: this.isActiveEditMode,
-          isDeletable: this.isDeletable,
-          isDeletableConfirm: this.isDeletableConfirm,
-          isEditable: this.isEditable,
-          isFooter: this.isFooter,
-          isHeader: this.isHeader,
-          isSaving: this.isSaving,
-          onCancelEditRow: this.cancelEditRow,
-          onDeleteRow: this.onDeleteRow,
-          onEditRow: this.onEditRow,
-          onSaveEditRow: this.saveEditRow,
-          row: this.row,
-          rowIndex: this.rowIndex,
-          texts: this.texts,
-          widths: this.widths,
-        }) :
-        null,
-    ]));
+    }, fullWidthRowCells || [
+      this.isDragAndDrop ?
+        h(ATableFormCellDnd, {
+          id: this.idTr,
+          canMoveRowDown: this.canMoveRowDown,
+          canMoveRowUp: this.canMoveRowUp,
+          isCreateMode: this.isCreateMode,
+          isDndDisabled: this.isDndDisabled,
+          isDndLocked: this.isDndLocked,
+          isDragAndDrop: this.isDragAndDrop,
+          isFooter: this.isFooter,
+          isHeader: this.isHeader,
+          moveRowDown: this.moveRowDown,
+          moveRowUp: this.moveRowUp,
+          onDragend: this.onDragend,
+          onDragstart: this.onDragstart,
+          rowIndex: this.rowIndex,
+          texts: this.texts,
+          widths: this.widths,
+        }) :
+        null,
+      ...(this.rowView === "list" && !this.isHeader ?
+        [h(ATableFormCellList, {
+          id: this.idTr,
+          columns: this.columns,
+          errors: this.errorsLocal,
+          isCreateMode: this.isCreateMode,
+          isEditable: this.isEditable,
+          isEditMode: this.isActiveEditMode,
+          isFooter: this.isFooter,
+          onUpdateRowData: this.updateModelLocal,
+          row: this.row,
+          rowData: this.currentRowData,
+          rowIndex: this.rowIndex,
+          rows: this.rows,
+        }, this.$slots)] :
+        this.columns.map((column, columnIndex) => {
+          if (this.isHeader) {
+            return h(ATableFormTh, {
+              column,
+              columnStyle: this.columnsStylesGrow[column.id],
+              isEditable: this.isEditable,
+            }, this.$slots);
+          }
+
+          return h(ATableFormCell, {
+            id: this.idTr,
+            column,
+            columnIndex,
+            columnStyle: this.columnsStylesGrow[column.id],
+            errorIcon: this.errorIcon,
+            errors: this.errorsLocal,
+            isCreateMode: this.isCreateMode,
+            isEditable: this.isEditable,
+            isEditMode: this.isActiveEditMode,
+            isFooter: this.isFooter,
+            onUpdateRowData: this.updateModelLocal,
+            row: this.row,
+            rowData: this.currentRowData,
+            rowIndex: this.rowIndex,
+            rows: this.rows,
+            tag: this.cellTag,
+          }, this.$slots);
+        })),
+      this.hasActionsColumn ?
+        h(ATableFormCellAction, {
+          id: this.idTr,
+          actionsClasses: this.actionsClasses,
+          actionsDisabledCallback: this.actionsDisabledCallback,
+          actionsHideCallback: this.actionsHideCallback,
+          actionsTitleCallback: this.actionsTitleCallback,
+          extra: this.extra,
+          hasActiveEditRow: this.hasActiveEditRow,
+          isActionsSticky: this.isActionsSticky,
+          isActiveEditMode: this.isActiveEditMode,
+          isDeletable: this.isDeletable,
+          isDeletableConfirm: this.isDeletableConfirm,
+          isEditable: this.isEditable,
+          isFooter: this.isFooter,
+          isHeader: this.isHeader,
+          isSaving: this.isSaving,
+          onCancelEditRow: this.cancelEditRow,
+          onDeleteRow: this.onDeleteRow,
+          onEditRow: this.onEditRow,
+          onSaveEditRow: this.saveEditRow,
+          row: this.row,
+          rowIndex: this.rowIndex,
+          texts: this.texts,
+          widths: this.widths,
+        }) :
+        null,
+    ]));
 
     if (this.rowView === "table" && this.isActiveEditMode && this.hasErrors) {
       rows.push(h("tr", {

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

@@ -1,6 +1,7 @@
-import {
-  computed,
-  nextTick,
+import {
+  computed,
+  h,
+  nextTick,
   reactive,
   ref,
 } from "vue";
@@ -443,7 +444,7 @@ describe("ATableForm list view", () => {
     expect(wrapper.findComponent(AForm).props("readonly")).toBe(false);
   });
 
-  it("allows DND but not row-click editing when rows are not editable", async() => {
+  it("allows DND but not row-click editing when rows are not editable", async() => {
     const wrapper = mount(ATableForm, {
       props: {
         columns: [
@@ -465,8 +466,112 @@ describe("ATableForm list view", () => {
 
     await wrapper.find("tbody tr.a_table_form__row").trigger("click");
 
-    expect(wrapper.find("tbody button[id$='_save']").exists()).toBe(false);
-  });
+    expect(wrapper.find("tbody button[id$='_save']").exists()).toBe(false);
+  });
+
+  it("renders a matching row as one full-width cell", async() => {
+    const rows = [
+      {
+        id: 1,
+        name: "Section",
+        type: "separator",
+      },
+      {
+        id: 2,
+        name: "Regular row",
+        type: "data",
+      },
+    ];
+    const fullWidthRowCallback = jest.fn(({ row }) => row.type === "separator");
+    const wrapper = mount(ATableForm, {
+      props: {
+        columns: [
+          {
+            id: "id",
+            label: "ID",
+          },
+          {
+            id: "name",
+            label: "Name",
+          },
+        ],
+        fullWidthRowCallback,
+        isDragAndDrop: true,
+        isEditable: true,
+        isEditOnRowClick: true,
+        keyId: "id",
+        rows,
+      },
+      slots: {
+        fullWidthRow: ({ isFooter, row, rowIndex, rows: rowsSlot }) => h("strong", {
+          class: "full-width-row-content",
+          "data-is-footer": `${ isFooter }`,
+          "data-row-index": rowIndex,
+          "data-rows-length": rowsSlot.length,
+        }, row.name),
+      },
+    });
+
+    const bodyRows = wrapper.findAll("tbody tr.a_table_form__row");
+    const fullWidthCell = bodyRows[0].find(".a_table_form__cell_full_width");
+
+    expect(bodyRows).toHaveLength(2);
+    expect(bodyRows[0].findAll("td")).toHaveLength(1);
+    expect(fullWidthCell.attributes("colspan")).toBe("4");
+    expect(fullWidthCell.text()).toBe("Section");
+    expect(fullWidthCell.find(".full-width-row-content").attributes()).toEqual(expect.objectContaining({
+      "data-is-footer": "false",
+      "data-row-index": "0",
+      "data-rows-length": "2",
+    }));
+    expect(bodyRows[0].find(".a_table_form__cell_reorder").exists()).toBe(false);
+    expect(bodyRows[0].find(".a_table_form__cell_actions").exists()).toBe(false);
+    expect(bodyRows[0].classes()).not.toContain("a_table_form__row_edit_on_click");
+    expect(bodyRows[1].findAll("td")).toHaveLength(4);
+    expect(bodyRows[1].classes()).toContain("a_table_form__row_edit_on_click");
+    expect(fullWidthRowCallback).toHaveBeenCalledWith({
+      isFooter: false,
+      row: rows[0],
+      rowIndex: 0,
+    });
+
+    await bodyRows[0].trigger("click");
+
+    expect(wrapper.find("tbody button[id$='_save']").exists()).toBe(false);
+  });
+
+  it("renders matching footer rows through the full-width slot", () => {
+    const footerRow = {
+      label: "Summary",
+      type: "summary",
+    };
+    const wrapper = mount(ATableForm, {
+      props: {
+        columns: [
+          {
+            id: "name",
+            label: "Name",
+          },
+          {
+            id: "value",
+            label: "Value",
+          },
+        ],
+        fullWidthRowCallback: ({ row }) => row.type === "summary",
+        rows: [{ name: "Item", value: 1 }],
+        rowsFooter: [footerRow],
+      },
+      slots: {
+        fullWidthRow: ({ isFooter, row }) => h("span", `${ isFooter }:${ row.label }`),
+      },
+    });
+
+    const footerCells = wrapper.findAll("tfoot td");
+
+    expect(footerCells).toHaveLength(1);
+    expect(footerCells[0].attributes("colspan")).toBe("2");
+    expect(footerCells[0].text()).toBe("true:Summary");
+  });
 
   it("enters edit mode by row click only when enabled and row edit is available", async() => {
     const rows = [

package/src/ui/AInputCurrency/AInputCurrency.js

@@ -353,9 +353,10 @@ export default {
     } = VerifyAPI(props);
 
     const {
-      clearModel,
-      displayValue,
-      initLocalVars,
+      clearModel,
+      displayValue,
+      displayValueReadonly,
+      initLocalVars,
       isInternalChange,
       localModel,
       modelNumber,
@@ -415,9 +416,10 @@ export default {
       attributesToExcludeFromRender,
       clearModel,
       componentStyleHide,
-      decrease,
-      displayValue,
-      errorsId,
+      decrease,
+      displayValue,
+      displayValueReadonly,
+      errorsId,
       hasErrorIcon,
       handleInput,
       handleKeydown,
@@ -452,7 +454,7 @@ export default {
         label: this.label,
         labelClass: this.labelClass,
         labelScreenReader: this.labelScreenReader,
-        modelValue: this.displayValue,
+        modelValue: this.displayValueReadonly,
         readonlyDefault: this.readonlyDefault,
         required: this.required,
         style: this.componentStyleHide,

package/src/ui/AInputCurrency/__tests__/AInputCurrency.ModelAPI.test.js

@@ -0,0 +1,73 @@
+import {
+  reactive,
+} from "vue";
+import {
+  describe,
+  expect,
+  it,
+} from "@jest/globals";
+
+import ModelAPI from "../compositionAPI/ModelAPI";
+
+const getModelAPI = () => {
+  const props = reactive({
+    currencySymbol: "€",
+    currencySymbolPosition: "right",
+    decimalDivider: ",",
+    decimalPartLength: 2,
+    disabled: false,
+    modelType: "number",
+    modelUndefined: undefined,
+    modelValue: 1234.5,
+    required: false,
+    skipRequiredModelInit: false,
+    thousandDivider: ".",
+  });
+  const modelAPI = ModelAPI(props, {
+    adjustFloatPartAndDivider: () => "1.234,50",
+  });
+
+  modelAPI.initLocalVars();
+
+  return {
+    modelAPI,
+    props,
+  };
+};
+
+describe("AInputCurrency ModelAPI", () => {
+  it("adds the currency symbol to the readonly display value at the configured position", () => {
+    const {
+      modelAPI,
+      props,
+    } = getModelAPI();
+
+    expect(modelAPI.displayValueReadonly.value).toBe("1.234,50 €");
+
+    props.currencySymbol = "$";
+    props.currencySymbolPosition = "left";
+
+    expect(modelAPI.displayValueReadonly.value).toBe("$ 1.234,50");
+  });
+
+  it("does not add the currency symbol to an empty readonly display value", () => {
+    const {
+      modelAPI,
+    } = getModelAPI();
+
+    modelAPI.displayValue.value = "";
+
+    expect(modelAPI.displayValueReadonly.value).toBe("");
+  });
+
+  it("keeps the readonly display value unchanged when the currency symbol is empty", () => {
+    const {
+      modelAPI,
+      props,
+    } = getModelAPI();
+
+    props.currencySymbol = "";
+
+    expect(modelAPI.displayValueReadonly.value).toBe("1.234,50");
+  });
+});

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

@@ -13,20 +13,32 @@ export default function ModelAPI(props, {
   adjustFloatPartAndDivider = () => {},
   changeModel = () => {},
 }) {
-  const required = toRef(props, "required");
-  const modelValue = toRef(props, "modelValue");
+  const currencySymbol = toRef(props, "currencySymbol");
+  const currencySymbolPosition = toRef(props, "currencySymbolPosition");
+  const decimalDivider = toRef(props, "decimalDivider");
+  const decimalPartLength = toRef(props, "decimalPartLength");
+  const disabled = toRef(props, "disabled");
   const modelType = toRef(props, "modelType");
   const modelUndefined = toRef(props, "modelUndefined");
+  const modelValue = toRef(props, "modelValue");
+  const required = toRef(props, "required");
   const skipRequiredModelInit = toRef(props, "skipRequiredModelInit");
-  const decimalDivider = toRef(props, "decimalDivider");
-  const disabled = toRef(props, "disabled");
-  const decimalPartLength = toRef(props, "decimalPartLength");
   const thousandDivider = toRef(props, "thousandDivider");
 
   const displayValue = ref(undefined);
   const isInternalChange = ref(false);
   const localModel = ref(undefined);
 
+  const displayValueReadonly = computed(() => {
+    if (isNil(displayValue.value) || displayValue.value === "" || !currencySymbol.value) {
+      return displayValue.value;
+    }
+
+    return currencySymbolPosition.value === "left" ?
+      `${ currencySymbol.value } ${ displayValue.value }` :
+      `${ displayValue.value } ${ currencySymbol.value }`;
+  });
+
   const initLocalVars = () => {
     displayValue.value = adjustFloatPartAndDivider(modelValue.value);
     localModel.value = modelValue.value;
@@ -78,6 +90,7 @@ export default function ModelAPI(props, {
   return {
     clearModel,
     displayValue,
+    displayValueReadonly,
     initLocalVars,
     isInternalChange,
     localModel,