aloha-vue 2.76.0 → 2.78.0

package/src/ATableForm/ATableFormRow/ATableFormRow.js

@@ -140,16 +140,16 @@ export default {
       required: false,
       default: undefined,
     },
-    extra: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    fullWidthRowCallback: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
+    extra: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    fullWidthRowCallback: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
     hasActionsColumn: {
       type: Boolean,
       required: false,
@@ -362,12 +362,12 @@ export default {
     };
   },
   computed: {
-    canEditOnRowClick() {
-      if (
-        !this.isEditOnRowClick ||
-        !this.isEditable ||
-        this.isFullWidthRow ||
-        this.isActiveEditMode ||
+    canEditOnRowClick() {
+      if (
+        !this.isEditOnRowClick ||
+        !this.isEditable ||
+        this.isFullWidthRow ||
+        this.isActiveEditMode ||
         this.isCreateMode ||
         this.isFooter ||
         this.isHeader ||
@@ -393,26 +393,26 @@ export default {
       })) {
         return false;
       }
-
-      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 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;
     },
   },
@@ -460,8 +460,8 @@ export default {
       },
     },
   },
-  render() {
-    const rows = [];
+  render() {
+    const rows = [];
 
     if (this.isActiveEditMode && this.texts.editInfoText) {
       rows.push(h("tr", {
@@ -482,20 +482,20 @@ export default {
       ]));
     }
 
-    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", {
+    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: [
@@ -509,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)),
-    }, 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,
-    ]));
+    }, 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/ATableFormRow/compositionAPI/ClassAPI.js

@@ -1,55 +1,55 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-import {
-  isFunction,
-} from "lodash-es";
-
-export default function ClassAPI(props, {
-  hasErrors = computed(() => false),
-}) {
-  const hasActiveEditRow = toRef(props, "hasActiveEditRow");
-  const isActiveEditMode = toRef(props, "isActiveEditMode");
-  const isCreateMode = toRef(props, "isCreateMode");
-  const isFooter = toRef(props, "isFooter");
-  const isHeader = toRef(props, "isHeader");
-  const row = toRef(props, "row");
-  const rowClass = toRef(props, "rowClass");
-  const rowIndex = toRef(props, "rowIndex");
-  const trClass = toRef(props, "trClass");
-
-  const rowClassLocal = computed(() => {
-    if (isFunction(rowClass.value)) {
-      return rowClass.value({
-        row: row.value,
-        rowIndex: rowIndex.value,
-        rowindex: rowIndex.value,
-        isCreateMode: isCreateMode.value,
-        isFooter: isFooter.value,
-        isHeader: isHeader.value,
-      });
-    }
-
-    return rowClass.value;
-  });
-
-  const trClassLocal = computed(() => {
-    return [
-      trClass.value,
-      rowClassLocal.value,
-      {
-        a_table_form__row_active: !isHeader.value && !isFooter.value && isActiveEditMode.value,
-        a_table_form__row_errors: !isHeader.value && !isFooter.value && hasErrors.value,
-        a_table_form__row_inactive: !isHeader.value && !isFooter.value &&
-          hasActiveEditRow.value && !isActiveEditMode.value,
-      },
-    ];
-  });
-
-  return {
-    rowClassLocal,
-    trClassLocal,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  isFunction,
+} from "lodash-es";
+
+export default function ClassAPI(props, {
+  hasErrors = computed(() => false),
+}) {
+  const hasActiveEditRow = toRef(props, "hasActiveEditRow");
+  const isActiveEditMode = toRef(props, "isActiveEditMode");
+  const isCreateMode = toRef(props, "isCreateMode");
+  const isFooter = toRef(props, "isFooter");
+  const isHeader = toRef(props, "isHeader");
+  const row = toRef(props, "row");
+  const rowClass = toRef(props, "rowClass");
+  const rowIndex = toRef(props, "rowIndex");
+  const trClass = toRef(props, "trClass");
+
+  const rowClassLocal = computed(() => {
+    if (isFunction(rowClass.value)) {
+      return rowClass.value({
+        row: row.value,
+        rowIndex: rowIndex.value,
+        rowindex: rowIndex.value,
+        isCreateMode: isCreateMode.value,
+        isFooter: isFooter.value,
+        isHeader: isHeader.value,
+      });
+    }
+
+    return rowClass.value;
+  });
+
+  const trClassLocal = computed(() => {
+    return [
+      trClass.value,
+      rowClassLocal.value,
+      {
+        a_table_form__row_active: !isHeader.value && !isFooter.value && isActiveEditMode.value,
+        a_table_form__row_errors: !isHeader.value && !isFooter.value && hasErrors.value,
+        a_table_form__row_inactive: !isHeader.value && !isFooter.value &&
+          hasActiveEditRow.value && !isActiveEditMode.value,
+      },
+    ];
+  });
+
+  return {
+    rowClassLocal,
+    trClassLocal,
+  };
+}

package/src/ATableForm/ATableFormTh/ATableFormTh.js

@@ -1,64 +1,64 @@
-import {
-  h,
-} from "vue";
-
-import ATranslation from "../../ATranslation/ATranslation";
-
-import StylesAPI from "../compositionAPI/StylesAPI";
-
-export default {
-  name: "ATableFormTh",
-  props: {
-    column: {
-      type: Object,
-      required: true,
-    },
-    columnStyle: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    isEditable: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  setup(props) {
-    const {
-      columnStyles,
-    } = StylesAPI({
-      column: props.column,
-    });
-
-    return {
-      columnStyles,
-    };
-  },
-  render() {
-    return h("th", {
-      class: [
-        "a_table_form__cell",
-        "a_table_form__cell_th",
-        this.column.class,
-      ],
-      style: [
-        this.columnStyles,
-        this.columnStyle,
-      ],
-    }, [
-      (this.column.slotHeader && this.$slots[this.column.slotHeader]) ?
-        this.$slots[this.column.slotHeader]({
-          column: this.column,
-          isEditable: this.isEditable,
-        }) :
-        this.column.label && h(ATranslation, {
-          html: this.column.label,
-          tag: "span",
-        }),
-      this.isEditable && this.column.formElement?.required && h("span", {
-        class: "a_label__required",
-      }, "*"),
-    ]);
-  },
-};
+import {
+  h,
+} from "vue";
+
+import ATranslation from "../../ATranslation/ATranslation";
+
+import StylesAPI from "../compositionAPI/StylesAPI";
+
+export default {
+  name: "ATableFormTh",
+  props: {
+    column: {
+      type: Object,
+      required: true,
+    },
+    columnStyle: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    isEditable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  setup(props) {
+    const {
+      columnStyles,
+    } = StylesAPI({
+      column: props.column,
+    });
+
+    return {
+      columnStyles,
+    };
+  },
+  render() {
+    return h("th", {
+      class: [
+        "a_table_form__cell",
+        "a_table_form__cell_th",
+        this.column.class,
+      ],
+      style: [
+        this.columnStyles,
+        this.columnStyle,
+      ],
+    }, [
+      (this.column.slotHeader && this.$slots[this.column.slotHeader]) ?
+        this.$slots[this.column.slotHeader]({
+          column: this.column,
+          isEditable: this.isEditable,
+        }) :
+        this.column.label && h(ATranslation, {
+          html: this.column.label,
+          tag: "span",
+        }),
+      this.isEditable && this.column.formElement?.required && h("span", {
+        class: "a_label__required",
+      }, "*"),
+    ]);
+  },
+};

package/src/ATableForm/compositionAPI/ColumnsAPI.js

@@ -1,42 +1,42 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-
-export default function ColumnsAPI(props, {
-  isAddRowActive = computed(() => false),
-} = {}) {
-  const columns = toRef(props, "columns");
-  const isDeletable = toRef(props, "isDeletable");
-  const isDeletableConfirm = toRef(props, "isDeletableConfirm");
-  const isDragAndDrop = toRef(props, "isDragAndDrop");
-  const isEditable = toRef(props, "isEditable");
-  const rowView = toRef(props, "rowView");
-
-  const hasActionsColumn = computed(() => {
-    return !!(isEditable.value || isDeletable.value || isDeletableConfirm.value || isAddRowActive.value);
-  });
-
-  const columnsVisible = computed(() => {
-    return columns.value.filter(column => column.isRender !== false);
-  });
-
-  const allColumnsLength = computed(() => {
-    let length = rowView.value === "list" ? 1 : columnsVisible.value.length;
-    if (isDragAndDrop.value) {
-      length += 1;
-    }
-    if (hasActionsColumn.value) {
-      length += 1;
-    }
-
-    return length;
-  });
-
-  return {
-    allColumnsLength,
-    columnsVisible,
-    hasActionsColumn,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+
+export default function ColumnsAPI(props, {
+  isAddRowActive = computed(() => false),
+} = {}) {
+  const columns = toRef(props, "columns");
+  const isDeletable = toRef(props, "isDeletable");
+  const isDeletableConfirm = toRef(props, "isDeletableConfirm");
+  const isDragAndDrop = toRef(props, "isDragAndDrop");
+  const isEditable = toRef(props, "isEditable");
+  const rowView = toRef(props, "rowView");
+
+  const hasActionsColumn = computed(() => {
+    return !!(isEditable.value || isDeletable.value || isDeletableConfirm.value || isAddRowActive.value);
+  });
+
+  const columnsVisible = computed(() => {
+    return columns.value.filter(column => column.isRender !== false);
+  });
+
+  const allColumnsLength = computed(() => {
+    let length = rowView.value === "list" ? 1 : columnsVisible.value.length;
+    if (isDragAndDrop.value) {
+      length += 1;
+    }
+    if (hasActionsColumn.value) {
+      length += 1;
+    }
+
+    return length;
+  });
+
+  return {
+    allColumnsLength,
+    columnsVisible,
+    hasActionsColumn,
+  };
+}