aloha-vue 2.56.0 → 2.57.0

package/src/ATableForm/ATableFormCellAction/compositionAPI/StylesAPI.js

@@ -0,0 +1,29 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function StylesAPI(props) {
+  const isDeletable = toRef(props, "isDeletable");
+  const isDeletableConfirm = toRef(props, "isDeletableConfirm");
+  const isEditable = toRef(props, "isEditable");
+  const isActiveEditMode = toRef(props, "isActiveEditMode");
+  const widths = toRef(props, "widths");
+
+  const columnStyles = computed(() => {
+    const hasDeleteAction = isDeletable.value || isDeletableConfirm.value;
+    const width = isEditable.value || (isActiveEditMode.value && hasDeleteAction) ?
+      widths.value.actionsColumnDouble :
+      widths.value.actionsColumnSingle;
+
+    return {
+      maxWidth: `${ width }px`,
+      minWidth: `${ width }px`,
+      width: `${ width }px`,
+    };
+  });
+
+  return {
+    columnStyles,
+  };
+}

package/src/ATableForm/ATableFormCellAction/compositionAPI/TitleAPI.js

@@ -0,0 +1,47 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  get,
+  isFunction,
+} from "lodash-es";
+
+export default function TitleAPI(props) {
+  const row = toRef(props, "row");
+  const rowIndex = toRef(props, "rowIndex");
+  const texts = toRef(props, "texts");
+  const actionsTitleCallback = toRef(props, "actionsTitleCallback");
+
+  const deleteTitle = computed(() => {
+    const deleteTitleCallback = get(actionsTitleCallback.value, "delete");
+
+    if (isFunction(deleteTitleCallback)) {
+      return deleteTitleCallback({
+        row: row.value,
+        rowIndex: rowIndex.value,
+      });
+    }
+
+    return texts.value.actionDelete;
+  });
+
+  const editTitle = computed(() => {
+    const editTitleCallback = get(actionsTitleCallback.value, "edit");
+
+    if (isFunction(editTitleCallback)) {
+      return editTitleCallback({
+        row: row.value,
+        rowIndex: rowIndex.value,
+      });
+    }
+
+    return texts.value.actionEdit;
+  });
+
+  return {
+    deleteTitle,
+    editTitle,
+  };
+}

package/src/ATableForm/ATableFormCellDnd/ATableFormCellDnd.js

@@ -0,0 +1,174 @@
+import {
+  computed,
+  h,
+} from "vue";
+
+import AButton from "../../AButton/AButton";
+import AIcon from "../../AIcon/AIcon";
+import ATranslation from "../../ATranslation/ATranslation";
+
+import IdAPI from "./compositionAPI/IdAPI";
+
+import ChevronDown from "aloha-svg/dist/js/bootstrap/ChevronDown";
+import ChevronUp from "aloha-svg/dist/js/bootstrap/ChevronUp";
+import GripVertical from "aloha-svg/dist/js/bootstrap/GripVertical";
+
+export default {
+  name: "ATableFormCellDnd",
+  props: {
+    canMoveRowDown: {
+      type: Function,
+      required: true,
+    },
+    canMoveRowUp: {
+      type: Function,
+      required: true,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    isCreateMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDragAndDrop: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDndDisabled: {
+      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,
+    },
+    onDragend: {
+      type: Function,
+      required: true,
+    },
+    onDragstart: {
+      type: Function,
+      required: true,
+    },
+    rowIndex: {
+      type: Number,
+      required: true,
+    },
+    texts: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    widths: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const {
+      idBtnDown,
+      idBtnUp,
+    } = IdAPI(props);
+
+    return {
+      columnStyles: computed(() => ({
+        maxWidth: `${ props.widths.dndColumn }px`,
+        minWidth: `${ props.widths.dndColumn }px`,
+        width: `${ props.widths.dndColumn }px`,
+      })),
+      idBtnDown,
+      idBtnUp,
+    };
+  },
+  render() {
+    const tag = this.isHeader ? "th" : "td";
+    const isHandleDraggable = this.isDragAndDrop && !this.isDndDisabled;
+
+    return h(tag, {
+      class: [
+        "a_table_form__cell",
+        `a_table_form__cell_${ tag }`,
+        "a_table_form__cell_reorder",
+      ],
+      style: this.columnStyles,
+    }, [
+      this.isHeader ?
+        h("span", {
+          class: "a_sr_only",
+        }, [
+          h(ATranslation, {
+            tag: "span",
+            text: this.texts.reorderColumn,
+          }),
+        ]) :
+        this.isCreateMode ?
+          null :
+        this.isFooter ?
+          null :
+          h("div", {
+            class: "a_table_form__reorder_actions",
+          }, [
+            this.canMoveRowUp(this.rowIndex) && h(AButton, {
+              id: this.idBtnUp,
+              class: "a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",
+              disabled: this.isDndDisabled,
+              iconLeft: ChevronUp,
+              tabindex: this.isDndDisabled ? -1 : undefined,
+              title: this.texts.reorderUp,
+              textScreenReader: this.texts.reorderUp,
+              onClick: () => this.moveRowUp(this.rowIndex),
+            }),
+            h("span", {
+              ariaHidden: true,
+              class: "a_table_form__reorder_handle",
+              draggable: isHandleDraggable,
+              onDragend: isHandleDraggable ? this.onDragend : undefined,
+              onDragstart: isHandleDraggable ? ($event => this.onDragstart($event, this.rowIndex)) : undefined,
+            }, [
+              h(AIcon, {
+                class: "a_table_form__reorder_icon",
+                icon: GripVertical,
+              }),
+            ]),
+            h("span", {
+              class: "a_sr_only",
+            }, [
+              h(ATranslation, {
+                tag: "span",
+                text: this.texts.reorderHandle,
+              }),
+            ]),
+            this.canMoveRowDown(this.rowIndex) && h(AButton, {
+              id: this.idBtnDown,
+              class: "a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",
+              disabled: this.isDndDisabled,
+              iconLeft: ChevronDown,
+              tabindex: this.isDndDisabled ? -1 : undefined,
+              title: this.texts.reorderDown,
+              textScreenReader: this.texts.reorderDown,
+              onClick: () => this.moveRowDown(this.rowIndex),
+            }),
+          ]),
+    ]);
+  },
+};

package/src/ATableForm/ATableFormCellDnd/compositionAPI/IdAPI.js

@@ -0,0 +1,21 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function IdAPI(props) {
+  const id = toRef(props, "id");
+
+  const idBtnUp = computed(() => {
+    return `${ id.value }_up`;
+  });
+
+  const idBtnDown = computed(() => {
+    return `${ id.value }_down`;
+  });
+
+  return {
+    idBtnDown,
+    idBtnUp,
+  };
+}

package/src/ATableForm/ATableFormRow/ATableFormRow.js

@@ -0,0 +1,431 @@
+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 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,
+} from "lodash-es";
+
+export default {
+  name: "ATableFormRow",
+  props: {
+    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: () => ({}),
+    },
+    actionsDisabledCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actionsHideCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actionsTitleCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    draggedRowIndex: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    editModel: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    errorIcon: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    hasActionsColumn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hasActiveEditRow: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    isActiveEditMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isActionsSticky: {
+      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,
+    },
+    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,
+    },
+    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 {
+      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,
+      hasErrors,
+      rowClassLocal,
+      idTr,
+      isSaving,
+      modelLocal,
+      optionsListForErrors,
+      saveEditRow,
+      trClassLocal,
+      updateModelLocal,
+    };
+  },
+  computed: {
+    currentRowData() {
+      return this.isActiveEditMode && this.modelLocal ? this.modelLocal : this.row;
+    },
+  },
+  watch: {
+    isActiveEditMode: {
+      immediate: true,
+      handler(isActiveEditMode) {
+        if (isActiveEditMode) {
+          this.modelLocal = cloneDeep(this.editModel === undefined ? this.row : this.editModel);
+          this.errorsLocal = {};
+          nextTick(() => {
+            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,
+      key: `main_${ this.rowIndex }`,
+      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.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, {
+          actionsDisabledCallback: this.actionsDisabledCallback,
+          actionsHideCallback: this.actionsHideCallback,
+          id: this.idTr,
+          hasActiveEditRow: this.hasActiveEditRow,
+          isActiveEditMode: this.isActiveEditMode,
+          isActionsSticky: this.isActionsSticky,
+          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,
+          actionsTitleCallback: this.actionsTitleCallback,
+          widths: this.widths,
+        }) :
+        null,
+    ]));
+
+    if (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;
+  },
+};