aloha-vue 2.60.1 → 2.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.60.1",
+  "version": "2.61.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/scss/components/ATableForm.scss

@@ -53,6 +53,19 @@
   background-color: var(--a_table_form_bg);
 }
 
+.a_table_form__table_list {
+  .a_table_form__cell_reorder,
+  .a_table_form__cell_actions {
+    vertical-align: middle;
+  }
+}
+
+.a_table_form__cell_list {
+  .a_form {
+    min-width: 0;
+  }
+}
+
 .a_table_form__cell {
   padding: var(--a_table_form_cell_padding_y) var(--a_table_form_cell_padding_x);
   border-top: 1px solid var(--a_table_form_border_color);

package/src/ATableForm/ATableForm.js

@@ -167,6 +167,12 @@ export default {
       required: false,
       default: undefined,
     },
+    rowView: {
+      type: String,
+      required: false,
+      default: "table",
+      validator: value => ["list", "table"].includes(value),
+    },
     rows: {
       type: Array,
       required: false,
@@ -370,10 +376,11 @@ export default {
             "a_table_form__table",
             {
               a_table_form_drag_active: this.draggedRowIndex !== undefined,
+              a_table_form__table_list: this.rowView === "list",
             },
           ],
         }, [
-          h("thead", {
+          this.rowView === "table" && h("thead", {
             class: "a_table_form__head",
           }, [
             h(ATableFormRow, {
@@ -410,6 +417,7 @@ export default {
               onEditRow: this.onEditRow,
               row: {},
               rowIndex: 0,
+              rowView: this.rowView,
               rows: this.rows,
               saveRow: this.saveRow,
               texts: this.textsLocal,
@@ -467,6 +475,7 @@ export default {
                   row,
                   rowClass: this.rowClass,
                   rowIndex,
+                  rowView: this.rowView,
                   rows: this.rows,
                   saveRow: this.saveRow,
                   texts: this.textsLocal,
@@ -524,6 +533,7 @@ export default {
                 row: {},
                 rowClass: this.rowClass,
                 rowIndex: this.rows.length,
+                rowView: this.rowView,
                 rows: this.rows,
                 saveRow: this.addRow,
                 texts: this.textsLocal,
@@ -586,6 +596,7 @@ export default {
               row,
               rowClass: this.rowClass,
               rowIndex,
+              rowView: this.rowView,
               rows: this.rowsFooter,
               saveRow: this.saveRow,
               texts: this.textsLocal,

package/src/ATableForm/ATableFormCellList/ATableFormCellList.js

@@ -0,0 +1,122 @@
+import {
+  computed,
+  h,
+} from "vue";
+
+import AForm from "../../ui/AForm/AForm";
+
+import DataAPI from "./compositionAPI/DataAPI";
+
+function hasItemWithId(items, id) {
+  return items?.some(item => {
+    return item?.id === id || hasItemWithId(item?.children, id);
+  }) || false;
+}
+
+export default {
+  name: "ATableFormCellList",
+  props: {
+    columns: {
+      type: Array,
+      required: true,
+    },
+    errors: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    isEditable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isEditMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isFooter: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    row: {
+      type: Object,
+      required: true,
+    },
+    rowData: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    rowIndex: {
+      type: Number,
+      required: true,
+    },
+    rows: {
+      type: Array,
+      required: true,
+    },
+  },
+  emits: [
+    "updateRowData",
+  ],
+  setup(props) {
+    const {
+      dataForm,
+    } = DataAPI(props);
+
+    return {
+      dataForm,
+      rowDataLocal: computed(() => props.rowData || props.row),
+    };
+  },
+  methods: {
+    updateRowData({
+      fullModel,
+      id,
+      item,
+      model,
+    }) {
+      const column = this.columns.find(columnLocal => {
+        return columnLocal.id === id ||
+          hasItemWithId(columnLocal.formElement?.children, id);
+      });
+
+      this.$emit("updateRowData", {
+        column,
+        columnId: id,
+        fullModel,
+        item,
+        model,
+      });
+    },
+  },
+  render() {
+    return h("td", {
+      class: [
+        "a_table_form__cell",
+        "a_table_form__cell_td",
+        "a_table_form__cell_list",
+      ],
+    }, [
+      h(AForm, {
+        data: this.dataForm,
+        errors: this.errors,
+        idPrefix: this.id,
+        modelValue: this.rowDataLocal,
+        readonly: this.isFooter || !this.isEditable,
+        showErrors: true,
+        showRequiredText: false,
+        tag: "div",
+        useFlatErrors: true,
+        useFlatModel: true,
+        onChange: this.updateRowData,
+      }, this.$slots),
+    ]);
+  },
+};

package/src/ATableForm/ATableFormCellList/compositionAPI/DataAPI.js

@@ -0,0 +1,60 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  cloneDeep,
+  isNil,
+} from "lodash-es";
+
+function normalizeItem(item, {
+  isEditMode,
+  isRowDisabled,
+} = {}) {
+  const ITEM = cloneDeep(item || {});
+
+  if (ITEM.useRowReadonly) {
+    ITEM.readonly = !isEditMode;
+  }
+
+  if (ITEM.children?.length) {
+    ITEM.children = ITEM.children.map(child => normalizeItem(child, {
+      isEditMode,
+    }));
+  }
+
+  if (isRowDisabled) {
+    ITEM.disabled = true;
+  }
+
+  return ITEM;
+}
+
+export default function DataAPI(props) {
+  const columns = toRef(props, "columns");
+  const isEditable = toRef(props, "isEditable");
+  const isEditMode = toRef(props, "isEditMode");
+
+  const dataForm = computed(() => {
+    const isRowDisabled = isEditable.value && !isEditMode.value;
+
+    return columns.value.map(column => {
+      const ITEM = normalizeItem(column.formElement, {
+        isEditMode: isEditMode.value,
+        isRowDisabled,
+      });
+
+      ITEM.id = column.id;
+      if (isNil(ITEM.label)) {
+        ITEM.label = column.label;
+      }
+
+      return ITEM;
+    });
+  });
+
+  return {
+    dataForm,
+  };
+}