aloha-vue 2.56.0 → 2.57.0

package/src/ATableForm/ATableFormCell/ATableFormCell.js

@@ -0,0 +1,182 @@
+import {
+  computed,
+  h,
+} from "vue";
+
+import AFormElement from "../../ui/AFormElement/AFormElement";
+
+import DisabledAPI from "./compositionAPI/DisabledAPI";
+import ReadonlyAPI from "./compositionAPI/ReadonlyAPI";
+import SlotAPI from "./compositionAPI/SlotAPI";
+import StylesAPI from "../compositionAPI/StylesAPI";
+
+import {
+  get,
+} from "lodash-es";
+
+export default {
+  name: "ATableFormCell",
+  props: {
+    column: {
+      type: Object,
+      required: true,
+    },
+    columnIndex: {
+      type: Number,
+      required: true,
+    },
+    columnStyle: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    errorIcon: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    errors: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    isEditMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isEditable: {
+      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,
+    },
+    tag: {
+      type: String,
+      required: false,
+      default: "td",
+    },
+  },
+  emits: [
+    "updateRowData",
+  ],
+  setup(props) {
+    const {
+      columnStyles,
+    } = StylesAPI({
+      column: props.column,
+    });
+
+    const {
+      readonlyLocal,
+    } = ReadonlyAPI(props);
+
+    const {
+      disabledLocal,
+    } = DisabledAPI(props);
+
+    const {
+      hasSlot,
+      hasSlotAfter,
+      slotName,
+      slotNameAfter,
+    } = SlotAPI(props);
+
+    const rowDataLocal = computed(() => {
+      return props.rowData || props.row;
+    });
+
+    return {
+      columnStyles,
+      disabledLocal,
+      hasSlot,
+      hasSlotAfter,
+      readonlyLocal,
+      rowDataLocal,
+      slotName,
+      slotNameAfter,
+    };
+  },
+  methods: {
+    updateRowData({ item, model }) {
+      this.$emit("updateRowData", {
+        column: this.column,
+        columnId: this.column.id,
+        item,
+        model,
+        value: model,
+      });
+    },
+  },
+  render() {
+    const {
+      type = "text",
+      ...formElement
+    } = this.column.formElement || {};
+
+    const slotProps = {
+      column: this.column,
+      columnIndex: this.columnIndex,
+      row: this.row,
+      rowIndex: this.rowIndex,
+      rows: this.rows,
+    };
+
+    return h(this.tag, {
+      class: [
+        "a_table_form__cell",
+        `a_table_form__cell_${ this.tag }`,
+        this.column.class,
+        this.isFooter ? this.column.classFooter : this.column.classRow,
+      ],
+      style: [
+        this.columnStyles,
+        this.columnStyle,
+      ],
+    }, [
+      (this.hasSlot && this.$slots[this.slotName]) ?
+        this.$slots[this.slotName](slotProps) :
+        h(AFormElement, {
+          id: this.column.id,
+          errorIcon: this.errorIcon,
+          idPrefix: this.id,
+          ...formElement,
+          change: this.updateRowData,
+          disabled: this.disabledLocal,
+          errors: get(this.errors, this.column.id),
+          errorsClass: "a_sr_only",
+          modelValue: get(this.rowDataLocal, this.column.id),
+          readonly: this.readonlyLocal,
+          type,
+        }),
+      (this.hasSlotAfter && this.$slots[this.slotNameAfter]) ?
+        this.$slots[this.slotNameAfter](slotProps) :
+        null,
+    ]);
+  },
+};

package/src/ATableForm/ATableFormCell/compositionAPI/DisabledAPI.js

@@ -0,0 +1,20 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function DisabledAPI(props) {
+  const column = toRef(props, "column");
+  const isEditable = toRef(props, "isEditable");
+  const isEditMode = toRef(props, "isEditMode");
+
+  const disabledLocal = computed(() => {
+    return !!column.value?.formElement?.disabled ||
+      (isEditable.value &&
+        !isEditMode.value);
+  });
+
+  return {
+    disabledLocal,
+  };
+}

package/src/ATableForm/ATableFormCell/compositionAPI/ReadonlyAPI.js

@@ -0,0 +1,28 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function ReadonlyAPI(props) {
+  const column = toRef(props, "column");
+  const isEditable = toRef(props, "isEditable");
+  const isEditMode = toRef(props, "isEditMode");
+  const isFooter = toRef(props, "isFooter");
+
+  const readonlyLocal = computed(() => {
+    if (isFooter.value) {
+      return true;
+    }
+    if (isEditable.value) {
+      if (column.value?.formElement?.useRowReadonly) {
+        return !isEditMode.value;
+      }
+      return !!column.value?.formElement?.readonly;
+    }
+    return true;
+  });
+
+  return {
+    readonlyLocal,
+  };
+}

package/src/ATableForm/ATableFormCell/compositionAPI/SlotAPI.js

@@ -0,0 +1,38 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function SlotAPI(props) {
+  const column = toRef(props, "column");
+  const isFooter = toRef(props, "isFooter");
+
+  const slotName = computed(() => {
+    if (isFooter.value) {
+      return column.value.footerSlot;
+    }
+    return column.value.slot;
+  });
+
+  const slotNameAfter = computed(() => {
+    if (isFooter.value) {
+      return column.value.footerSlotAfter;
+    }
+    return column.value.slotAfter;
+  });
+
+  const hasSlot = computed(() => {
+    return !!slotName.value;
+  });
+
+  const hasSlotAfter = computed(() => {
+    return !!slotNameAfter.value;
+  });
+
+  return {
+    hasSlot,
+    hasSlotAfter,
+    slotName,
+    slotNameAfter,
+  };
+}

package/src/ATableForm/ATableFormCellAction/ATableFormCellAction.js

@@ -0,0 +1,238 @@
+import {
+  h,
+} from "vue";
+
+import AButton from "../../AButton/AButton";
+import ATranslation from "../../ATranslation/ATranslation";
+
+import DeleteAPI from "./compositionAPI/DeleteAPI";
+import DisabledAPI from "./compositionAPI/DisabledAPI";
+import HiddenAPI from "./compositionAPI/HiddenAPI";
+import StylesAPI from "./compositionAPI/StylesAPI";
+import TitleAPI from "./compositionAPI/TitleAPI";
+
+import Floppy2Fill from "aloha-svg/dist/js/bootstrap/Floppy2Fill";
+import PencilFill from "aloha-svg/dist/js/bootstrap/PencilFill";
+import Trash from "aloha-svg/dist/js/bootstrap/Trash";
+import XLg from "aloha-svg/dist/js/bootstrap/XLg";
+
+
+export default {
+  name: "ATableFormCellAction",
+  props: {
+    hasActiveEditRow: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    actionsDisabledCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actionsHideCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actionsTitleCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    isActiveEditMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isActionsSticky: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDeletable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDeletableConfirm: {
+      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,
+    },
+    isSaving: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    onCancelEditRow: {
+      type: Function,
+      required: true,
+    },
+    onDeleteRow: {
+      type: Function,
+      required: true,
+    },
+    onEditRow: {
+      type: Function,
+      required: true,
+    },
+    onSaveEditRow: {
+      type: Function,
+      required: true,
+    },
+    row: {
+      type: Object,
+      required: true,
+    },
+    rowIndex: {
+      type: Number,
+      required: true,
+    },
+    texts: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    widths: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const {
+      isDeleteDisabled,
+      isEditDisabled,
+    } = DisabledAPI(props);
+
+    const {
+      isDeleteHidden,
+      isEditHidden,
+    } = HiddenAPI(props);
+
+    const {
+      idBtnDelete,
+      onDeleteClick,
+    } = DeleteAPI(props, {
+      isActionsDisabled: isDeleteDisabled,
+    });
+
+    const {
+      columnStyles,
+    } = StylesAPI(props);
+
+    const {
+      deleteTitle,
+      editTitle,
+    } = TitleAPI(props);
+
+    return {
+      columnStyles,
+      deleteTitle,
+      editTitle,
+      idBtnDelete,
+      isDeleteDisabled,
+      isDeleteHidden,
+      isEditDisabled,
+      isEditHidden,
+      onDeleteClick,
+    };
+  },
+  render() {
+    const tag = this.isHeader ? "th" : "td";
+
+    return h(tag, {
+      class: [
+        "a_table_form__cell",
+        `a_table_form__cell_${ tag }`,
+        "a_table_form__cell_actions",
+        {
+          a_table_form__cell_actions_sticky: this.isActionsSticky,
+        },
+      ],
+      style: this.columnStyles,
+    }, [
+      this.isHeader ?
+        h("span", {
+          class: "a_sr_only",
+        }, [
+          h(ATranslation, {
+            tag: "span",
+            text: this.texts.actionsColumn,
+          }),
+        ]) :
+        this.isFooter ?
+          null :
+          h("div", {
+            class: "a_table_form__actions",
+            role: "group",
+          }, this.isActiveEditMode ?
+            [
+              h(AButton, {
+                class: "a_btn a_btn_transparent_primary a_table_form__action_button",
+                disabled: this.isSaving,
+                iconLeft: XLg,
+                title: this.texts.actionEditCancel,
+                textScreenReader: this.texts.actionEditCancel,
+                onClick: () => this.onCancelEditRow({
+                  row: this.row,
+                  rowIndex: this.rowIndex,
+                }),
+              }),
+              h(AButton, {
+                class: "a_btn a_btn_transparent_primary a_table_form__action_button",
+                disabled: this.isSaving,
+                iconLeft: Floppy2Fill,
+                title: this.texts.actionEditSave,
+                textScreenReader: this.texts.actionEditSave,
+                onClick: () => this.onSaveEditRow({
+                  row: this.row,
+                  rowIndex: this.rowIndex,
+                }),
+              }),
+            ] :
+            [
+              (this.isDeletable || this.isDeletableConfirm) && !this.isDeleteHidden && h(AButton, {
+                id: this.idBtnDelete,
+                class: "a_btn a_btn_transparent_danger a_table_form__action_button",
+                disabled: this.isDeleteDisabled,
+                iconLeft: Trash,
+                title: this.deleteTitle,
+                textScreenReader: this.deleteTitle,
+                onClick: this.onDeleteClick,
+              }),
+              this.isEditable && !this.isEditHidden && h(AButton, {
+                class: "a_btn a_btn_transparent_primary a_table_form__action_button",
+                disabled: this.isEditDisabled,
+                iconLeft: PencilFill,
+                title: this.editTitle,
+                textScreenReader: this.editTitle,
+                onClick: () => this.onEditRow({
+                  row: this.row,
+                  rowIndex: this.rowIndex,
+                }),
+              }),
+            ]),
+    ]);
+  },
+};

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

@@ -0,0 +1,80 @@
+import {
+  computed,
+  nextTick,
+  toRef,
+} from "vue";
+import {
+  AConfirmAPI,
+  setFocusToElement,
+} from "../../../index";
+
+export default function DeleteAPI(props, {
+  isActionsDisabled = computed(() => false),
+}) {
+  const id = toRef(props, "id");
+  const isDeletable = toRef(props, "isDeletable");
+  const isDeletableConfirm = toRef(props, "isDeletableConfirm");
+  const onDeleteRow = toRef(props, "onDeleteRow");
+  const row = toRef(props, "row");
+  const rowIndex = toRef(props, "rowIndex");
+  const texts = toRef(props, "texts");
+
+  const {
+    closeConfirm,
+    openConfirm,
+  } = AConfirmAPI();
+
+  const idBtnDelete = computed(() => {
+    return `${ id.value }_delete`;
+  });
+
+  const closeConfirmLocal = () => {
+    closeConfirm();
+    nextTick().then(
+      () => {
+        setFocusToElement({ selector: `#${ idBtnDelete.value }` });
+      },
+    );
+  };
+
+  const openDeleteConfirm = () => {
+    openConfirm({
+      bodyHtml: texts.value.actionDeleteConfirmBody,
+      closeButtonText: texts.value.actionDeleteConfirmClose,
+      headerText: texts.value.actionDeleteConfirmHeader,
+      save: async() => {
+        await onDeleteRow.value({
+          row: row.value,
+          rowIndex: rowIndex.value,
+        });
+        closeConfirm();
+      },
+      close: closeConfirmLocal,
+      saveButtonText: texts.value.actionDeleteConfirmSave,
+    });
+  };
+
+  const onDeleteClick = () => {
+    if (isActionsDisabled.value) {
+      return;
+    }
+
+    if (isDeletableConfirm.value) {
+      openDeleteConfirm();
+
+      return;
+    }
+
+    if (isDeletable.value) {
+      onDeleteRow.value({
+        row: row.value,
+        rowIndex: rowIndex.value,
+      });
+    }
+  };
+
+  return {
+    idBtnDelete,
+    onDeleteClick,
+  };
+}

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

@@ -0,0 +1,60 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  get,
+  isFunction,
+} from "lodash-es";
+
+export default function DisabledAPI(props) {
+  const actionsDisabledCallback = toRef(props, "actionsDisabledCallback");
+  const hasActiveEditRow = toRef(props, "hasActiveEditRow");
+  const isActiveEditMode = toRef(props, "isActiveEditMode");
+  const row = toRef(props, "row");
+  const rowIndex = toRef(props, "rowIndex");
+
+  const isActionsDisabled = computed(() => {
+    return hasActiveEditRow.value && !isActiveEditMode.value;
+  });
+
+  const isDeleteDisabled = computed(() => {
+    if (isActionsDisabled.value) {
+      return true;
+    }
+
+    const deleteDisabledCallback = get(actionsDisabledCallback.value, "delete");
+
+    if (isFunction(deleteDisabledCallback)) {
+      return deleteDisabledCallback({
+        row: row.value,
+        rowIndex: rowIndex.value,
+      });
+    }
+
+    return false;
+  });
+
+  const isEditDisabled = computed(() => {
+    if (isActionsDisabled.value) {
+      return true;
+    }
+
+    const editDisabledCallback = get(actionsDisabledCallback.value, "edit");
+
+    if (isFunction(editDisabledCallback)) {
+      return editDisabledCallback({
+        row: row.value,
+        rowIndex: rowIndex.value,
+      });
+    }
+
+    return false;
+  });
+
+  return {
+    isDeleteDisabled,
+    isEditDisabled,
+  };
+}

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

@@ -0,0 +1,46 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  get,
+  isFunction,
+} from "lodash-es";
+
+export default function HiddenAPI(props) {
+  const actionsHideCallback = toRef(props, "actionsHideCallback");
+  const row = toRef(props, "row");
+  const rowIndex = toRef(props, "rowIndex");
+
+  const isDeleteHidden = computed(() => {
+    const deleteHideCallback = get(actionsHideCallback.value, "delete");
+
+    if (isFunction(deleteHideCallback)) {
+      return deleteHideCallback({
+        row: row.value,
+        rowIndex: rowIndex.value,
+      });
+    }
+
+    return false;
+  });
+
+  const isEditHidden = computed(() => {
+    const editHideCallback = get(actionsHideCallback.value, "edit");
+
+    if (isFunction(editHideCallback)) {
+      return editHideCallback({
+        row: row.value,
+        rowIndex: rowIndex.value,
+      });
+    }
+
+    return false;
+  });
+
+  return {
+    isDeleteHidden,
+    isEditHidden,
+  };
+}