aloha-vue 2.62.0 → 2.63.0

package/src/ATableForm/ATableFormRow/ATableFormRow.js

@@ -1,584 +1,590 @@
-import {
-  h,
-  nextTick,
-} from "vue";
-import {
-  AAlert,
-  AErrors,
-} from "../../index";
-
-import ATableFormCell from "../ATableFormCell/ATableFormCell";
-import ATableFormCellAction from "../ATableFormCellAction/ATableFormCellAction";
-import ATableFormCellDnd from "../ATableFormCellDnd/ATableFormCellDnd";
-import ATableFormCellList from "../ATableFormCellList/ATableFormCellList";
-import ATableFormTh from "../ATableFormTh/ATableFormTh";
-
-import ClassAPI from "./compositionAPI/ClassAPI";
-import EditAPI from "./compositionAPI/EditAPI";
-import ErrorsAPI from "./compositionAPI/ErrorsAPI";
-import FocusAPI from "./compositionAPI/FocusAPI";
-import IdAPI from "./compositionAPI/IdAPI";
-
-import {
-  cloneDeep,
-  get,
-  isFunction,
-} from "lodash-es";
-
-const INTERACTIVE_ROW_CLICK_SELECTOR = [
-  "a",
-  "button",
-  "[contenteditable]",
-  "[role='button']",
-  "[role='checkbox']",
-  "[role='combobox']",
-  "[role='link']",
-  "[role='menuitem']",
-  "[role='option']",
-  "[role='radio']",
-  "[role='switch']",
-  "[role='textbox']",
-].join(",");
-
-const isDisabledOrReadonlyElement = element => {
-  return !!element && (
-    element.disabled ||
-    element.hasAttribute("readonly") ||
-    element.getAttribute("aria-disabled") === "true" ||
-    element.getAttribute("aria-readonly") === "true"
-  );
-};
-
-const getColumnIdFromRowClickEvent = ($event, idTr) => {
-  const columnElement = $event.target?.closest?.("[data-column-id]");
-
-  if (columnElement?.dataset.columnId) {
-    return columnElement.dataset.columnId;
-  }
-
-  const elementWithId = $event.target?.closest?.("[id]");
-  const elementId = elementWithId?.id;
-
-  if (elementId?.startsWith(idTr)) {
-    return elementId.slice(idTr.length);
-  }
-
-  return undefined;
-};
-
-export default {
-  name: "ATableFormRow",
-  props: {
-    actionsClasses: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    actionsDisabledCallback: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    actionsHideCallback: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    actionsTitleCallback: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    allColumnsLength: {
-      type: Number,
-      required: true,
-    },
-    canMoveRowDown: {
-      type: Function,
-      required: true,
-    },
-    canMoveRowUp: {
-      type: Function,
-      required: true,
-    },
-    cellTag: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    changeModel: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    columns: {
-      type: Array,
-      required: true,
-    },
-    columnsStylesGrow: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    draggedRowIndex: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
-    editModel: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    editFocusColumnId: {
-      type: [String, Number],
-      required: false,
-      default: undefined,
-    },
-    errorIcon: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    extra: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    hasActionsColumn: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    hasActiveEditRow: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    id: {
-      type: String,
-      required: true,
-    },
-    isActionsSticky: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isActiveEditMode: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isCreateMode: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isDeletable: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isDeletableConfirm: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
+import {
+  h,
+  nextTick,
+} from "vue";
+import {
+  AAlert,
+  AErrors,
+} from "../../index";
+
+import ATableFormCell from "../ATableFormCell/ATableFormCell";
+import ATableFormCellAction from "../ATableFormCellAction/ATableFormCellAction";
+import ATableFormCellDnd from "../ATableFormCellDnd/ATableFormCellDnd";
+import ATableFormCellList from "../ATableFormCellList/ATableFormCellList";
+import ATableFormTh from "../ATableFormTh/ATableFormTh";
+
+import ClassAPI from "./compositionAPI/ClassAPI";
+import EditAPI from "./compositionAPI/EditAPI";
+import ErrorsAPI from "./compositionAPI/ErrorsAPI";
+import FocusAPI from "./compositionAPI/FocusAPI";
+import IdAPI from "./compositionAPI/IdAPI";
+
+import {
+  cloneDeep,
+  get,
+  isFunction,
+} from "lodash-es";
+
+const INTERACTIVE_ROW_CLICK_SELECTOR = [
+  "a",
+  "button",
+  "[contenteditable]",
+  "[role='button']",
+  "[role='checkbox']",
+  "[role='combobox']",
+  "[role='link']",
+  "[role='menuitem']",
+  "[role='option']",
+  "[role='radio']",
+  "[role='switch']",
+  "[role='textbox']",
+].join(",");
+
+const isDisabledOrReadonlyElement = element => {
+  return !!element && (
+    element.disabled ||
+    element.hasAttribute("readonly") ||
+    element.getAttribute("aria-disabled") === "true" ||
+    element.getAttribute("aria-readonly") === "true"
+  );
+};
+
+const getColumnIdFromRowClickEvent = ($event, idTr) => {
+  const columnElement = $event.target?.closest?.("[data-column-id]");
+
+  if (columnElement?.dataset.columnId) {
+    return columnElement.dataset.columnId;
+  }
+
+  const elementWithId = $event.target?.closest?.("[id]");
+  const elementId = elementWithId?.id;
+
+  if (elementId?.startsWith(idTr)) {
+    return elementId.slice(idTr.length);
+  }
+
+  return undefined;
+};
+
+export default {
+  name: "ATableFormRow",
+  props: {
+    actionsClasses: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actionsDisabledCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actionsHideCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actionsTitleCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    allColumnsLength: {
+      type: Number,
+      required: true,
+    },
+    canMoveRowDown: {
+      type: Function,
+      required: true,
+    },
+    canMoveRowUp: {
+      type: Function,
+      required: true,
+    },
+    cellTag: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    changeModel: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
+    columnsStylesGrow: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    draggedRowIndex: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    editModel: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    editFocusColumnId: {
+      type: [String, Number],
+      required: false,
+      default: undefined,
+    },
+    errorIcon: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    extra: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    hasActionsColumn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hasActiveEditRow: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    isActionsSticky: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isActiveEditMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isCreateMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDeletable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDeletableConfirm: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isDndDisabled: {
       type: Boolean,
       required: false,
       default: false,
     },
-    isDragAndDrop: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isEditable: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isEditOnRowClick: {
+    isDndLocked: {
       type: Boolean,
       required: false,
       default: false,
     },
-    isFooter: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isHeader: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    moveRowDown: {
-      type: Function,
-      required: true,
-    },
-    moveRowUp: {
-      type: Function,
-      required: true,
-    },
-    onCancelEditRow: {
-      type: Function,
-      required: true,
-    },
-    onDeleteRow: {
-      type: Function,
-      required: true,
-    },
-    onDragend: {
-      type: Function,
-      required: true,
-    },
-    onDragleave: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    onDragover: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    onDragstart: {
-      type: Function,
-      required: true,
-    },
-    onDrop: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    onEditRow: {
-      type: Function,
-      required: true,
-    },
-    row: {
-      type: Object,
-      required: true,
-    },
-    rowClass: {
-      type: [String, Object, Array, Function],
-      required: false,
-      default: undefined,
-    },
-    rowIndex: {
-      type: Number,
-      required: true,
-    },
-    rows: {
-      type: Array,
-      required: true,
-    },
-    rowView: {
-      type: String,
-      required: false,
-      default: "table",
-      validator: value => ["list", "table"].includes(value),
-    },
-    saveRow: {
-      type: Function,
-      required: true,
-    },
-    texts: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    trClass: {
-      type: [String, Object, Array],
-      required: false,
-      default: undefined,
-    },
-    widths: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-  },
-  setup(props) {
-    const {
-      idTr,
-    } = IdAPI(props);
-
-    const {
-      focusEditableElementByColumnId,
-      focusFirstEditableElement,
-    } = FocusAPI({
-      idTr,
-    });
-
-    const {
-      errorsLocal,
-      hasErrors,
-      optionsListForErrors,
-    } = ErrorsAPI(props);
-
-    const {
-      rowClassLocal,
-      trClassLocal,
-    } = ClassAPI(props, {
-      hasErrors,
-    });
-
-    const {
-      cancelEditRow,
-      isSaving,
-      modelLocal,
-      saveEditRow,
-      updateModelLocal,
-    } = EditAPI(props, {
-      errorsLocal,
-    });
-
-    return {
-      cancelEditRow,
-      errorsLocal,
-      focusFirstEditableElement,
-      focusEditableElementByColumnId,
-      hasErrors,
-      rowClassLocal,
-      idTr,
-      isSaving,
-      modelLocal,
-      optionsListForErrors,
-      saveEditRow,
-      trClassLocal,
-      updateModelLocal,
-    };
-  },
-  computed: {
-    canEditOnRowClick() {
-      if (
-        !this.isEditOnRowClick ||
-        !this.isEditable ||
-        this.isActiveEditMode ||
-        this.isCreateMode ||
-        this.isFooter ||
-        this.isHeader ||
-        this.hasActiveEditRow
-      ) {
-        return false;
-      }
-
-      const editHideCallback = get(this.actionsHideCallback, "edit");
-
-      if (isFunction(editHideCallback) && editHideCallback({
-        row: this.row,
-        rowIndex: this.rowIndex,
-      })) {
-        return false;
-      }
-
-      const editDisabledCallback = get(this.actionsDisabledCallback, "edit");
-
-      if (isFunction(editDisabledCallback) && editDisabledCallback({
-        row: this.row,
-        rowIndex: this.rowIndex,
-      })) {
-        return false;
-      }
-
-      return true;
-    },
-    currentRowData() {
-      return this.isActiveEditMode && this.modelLocal ? this.modelLocal : this.row;
-    },
-  },
-  methods: {
-    onRowClick($event) {
-      if (!this.canEditOnRowClick) {
-        return;
-      }
-
-      if ($event.target?.closest?.(".a_table_form__cell_actions, .a_table_form__cell_reorder")) {
-        return;
-      }
-
-      const interactiveElement = $event.target?.closest?.(INTERACTIVE_ROW_CLICK_SELECTOR);
-
-      if (interactiveElement && !isDisabledOrReadonlyElement(interactiveElement)) {
-        return;
-      }
-
-      this.onEditRow({
-        focusColumnId: getColumnIdFromRowClickEvent($event, this.idTr),
-        id: this.idTr,
-        row: this.row,
-        rowIndex: this.rowIndex,
-      });
-    },
-  },
-  watch: {
-    isActiveEditMode: {
-      immediate: true,
-      handler(isActiveEditMode) {
-        if (isActiveEditMode) {
-          this.modelLocal = cloneDeep(this.editModel === undefined ? this.row : this.editModel);
-          this.errorsLocal = {};
-          nextTick(() => {
-            if (!this.focusEditableElementByColumnId(this.editFocusColumnId)) {
-              this.focusFirstEditableElement();
-            }
-          });
-          return;
-        }
-
-        this.errorsLocal = {};
-        this.isSaving = false;
-      },
-    },
-  },
-  render() {
-    const rows = [];
-
-    if (this.isActiveEditMode && this.texts.editInfoText) {
-      rows.push(h("tr", {
-        class: "a_table_form__row a_table_form__row_info",
-        key: `info_${ this.rowIndex }`,
-      }, [
-        h("td", {
-          class: "a_table_form__cell a_table_form__cell_info",
-          colspan: this.allColumnsLength,
-        }, [
-          h(AAlert, {
-            alertClass: "a_table_form__info",
-            html: this.texts.editInfoText,
-            isVisible: true,
-            type: "info",
-          }),
-        ]),
-      ]));
-    }
-
-    rows.push(h("tr", {
-      id: this.idTr,
-      "aria-grabbed": !this.isHeader && !this.isFooter ? this.draggedRowIndex === this.rowIndex : undefined,
-      class: [
-        this.trClassLocal,
-        {
-          a_table_form__row_edit_on_click: this.canEditOnRowClick,
-        },
-      ],
-      key: `main_${ this.rowIndex }`,
-      onClick: this.onRowClick,
-      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,
+    isDragAndDrop: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isEditable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isEditOnRowClick: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isFooter: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isHeader: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    moveRowDown: {
+      type: Function,
+      required: true,
+    },
+    moveRowUp: {
+      type: Function,
+      required: true,
+    },
+    onCancelEditRow: {
+      type: Function,
+      required: true,
+    },
+    onDeleteRow: {
+      type: Function,
+      required: true,
+    },
+    onDragend: {
+      type: Function,
+      required: true,
+    },
+    onDragleave: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    onDragover: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    onDragstart: {
+      type: Function,
+      required: true,
+    },
+    onDrop: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    onEditRow: {
+      type: Function,
+      required: true,
+    },
+    row: {
+      type: Object,
+      required: true,
+    },
+    rowClass: {
+      type: [String, Object, Array, Function],
+      required: false,
+      default: undefined,
+    },
+    rowIndex: {
+      type: Number,
+      required: true,
+    },
+    rows: {
+      type: Array,
+      required: true,
+    },
+    rowView: {
+      type: String,
+      required: false,
+      default: "table",
+      validator: value => ["list", "table"].includes(value),
+    },
+    saveRow: {
+      type: Function,
+      required: true,
+    },
+    texts: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    trClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
+    widths: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const {
+      idTr,
+    } = IdAPI(props);
+
+    const {
+      focusEditableElementByColumnId,
+      focusFirstEditableElement,
+    } = FocusAPI({
+      idTr,
+    });
+
+    const {
+      errorsLocal,
+      hasErrors,
+      optionsListForErrors,
+    } = ErrorsAPI(props);
+
+    const {
+      rowClassLocal,
+      trClassLocal,
+    } = ClassAPI(props, {
+      hasErrors,
+    });
+
+    const {
+      cancelEditRow,
+      isSaving,
+      modelLocal,
+      saveEditRow,
+      updateModelLocal,
+    } = EditAPI(props, {
+      errorsLocal,
+    });
+
+    return {
+      cancelEditRow,
+      errorsLocal,
+      focusFirstEditableElement,
+      focusEditableElementByColumnId,
+      hasErrors,
+      rowClassLocal,
+      idTr,
+      isSaving,
+      modelLocal,
+      optionsListForErrors,
+      saveEditRow,
+      trClassLocal,
+      updateModelLocal,
+    };
+  },
+  computed: {
+    canEditOnRowClick() {
+      if (
+        !this.isEditOnRowClick ||
+        !this.isEditable ||
+        this.isActiveEditMode ||
+        this.isCreateMode ||
+        this.isFooter ||
+        this.isHeader ||
+        this.hasActiveEditRow
+      ) {
+        return false;
+      }
+
+      const editHideCallback = get(this.actionsHideCallback, "edit");
+
+      if (isFunction(editHideCallback) && editHideCallback({
+        row: this.row,
+        rowIndex: this.rowIndex,
+      })) {
+        return false;
+      }
+
+      const editDisabledCallback = get(this.actionsDisabledCallback, "edit");
+
+      if (isFunction(editDisabledCallback) && editDisabledCallback({
+        row: this.row,
+        rowIndex: this.rowIndex,
+      })) {
+        return false;
+      }
+
+      return true;
+    },
+    currentRowData() {
+      return this.isActiveEditMode && this.modelLocal ? this.modelLocal : this.row;
+    },
+  },
+  methods: {
+    onRowClick($event) {
+      if (!this.canEditOnRowClick) {
+        return;
+      }
+
+      if ($event.target?.closest?.(".a_table_form__cell_actions, .a_table_form__cell_reorder")) {
+        return;
+      }
+
+      const interactiveElement = $event.target?.closest?.(INTERACTIVE_ROW_CLICK_SELECTOR);
+
+      if (interactiveElement && !isDisabledOrReadonlyElement(interactiveElement)) {
+        return;
+      }
+
+      this.onEditRow({
+        focusColumnId: getColumnIdFromRowClickEvent($event, this.idTr),
+        id: this.idTr,
+        row: this.row,
+        rowIndex: this.rowIndex,
+      });
+    },
+  },
+  watch: {
+    isActiveEditMode: {
+      immediate: true,
+      handler(isActiveEditMode) {
+        if (isActiveEditMode) {
+          this.modelLocal = cloneDeep(this.editModel === undefined ? this.row : this.editModel);
+          this.errorsLocal = {};
+          nextTick(() => {
+            if (!this.focusEditableElementByColumnId(this.editFocusColumnId)) {
+              this.focusFirstEditableElement();
+            }
+          });
+          return;
+        }
+
+        this.errorsLocal = {};
+        this.isSaving = false;
+      },
+    },
+  },
+  render() {
+    const rows = [];
+
+    if (this.isActiveEditMode && this.texts.editInfoText) {
+      rows.push(h("tr", {
+        class: "a_table_form__row a_table_form__row_info",
+        key: `info_${ this.rowIndex }`,
+      }, [
+        h("td", {
+          class: "a_table_form__cell a_table_form__cell_info",
+          colspan: this.allColumnsLength,
+        }, [
+          h(AAlert, {
+            alertClass: "a_table_form__info",
+            html: this.texts.editInfoText,
+            isVisible: true,
+            type: "info",
+          }),
+        ]),
+      ]));
+    }
+
+    rows.push(h("tr", {
+      id: this.idTr,
+      "aria-grabbed": !this.isHeader && !this.isFooter ? this.draggedRowIndex === this.rowIndex : undefined,
+      class: [
+        this.trClassLocal,
+        {
+          a_table_form__row_edit_on_click: this.canEditOnRowClick,
+        },
+      ],
+      key: `main_${ this.rowIndex }`,
+      onClick: this.onRowClick,
+      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,
-          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,
-          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,
-            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", {
-        class: "a_table_form__row a_table_form__row_errors",
-        key: `errors_${ this.rowIndex }`,
-      }, [
-        h("td", {
-          class: "a_table_form__cell a_table_form__cell_errors",
-          colspan: this.allColumnsLength,
-        }, [
-          h(AErrors, {
-            autoFocus: true,
-            closable: false,
-            errors: this.errorsLocal,
-            optionsList: this.optionsListForErrors,
-            idPrefix: this.idTr,
-          }),
-        ]),
-      ]));
-    }
-
-    return rows;
-  },
-};
+          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,
+          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,
+            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", {
+        class: "a_table_form__row a_table_form__row_errors",
+        key: `errors_${ this.rowIndex }`,
+      }, [
+        h("td", {
+          class: "a_table_form__cell a_table_form__cell_errors",
+          colspan: this.allColumnsLength,
+        }, [
+          h(AErrors, {
+            autoFocus: true,
+            closable: false,
+            errors: this.errorsLocal,
+            optionsList: this.optionsListForErrors,
+            idPrefix: this.idTr,
+          }),
+        ]),
+      ]));
+    }
+
+    return rows;
+  },
+};