aloha-vue 2.59.0 → 2.60.0

package/src/ATableForm/compositionAPI/DragAndDropAPI.js

@@ -1,268 +1,302 @@
-import {
-  computed,
-  nextTick,
-  ref,
-  toRef,
-} from "vue";
-
-import {
-  setFocusToElement,
-} from "../../utils/utilsDOM";
-
-export default function DragAndDropAPI(props, { emit }, {
-  isDndDisabled = computed(() => false),
-} = {}) {
-  const focusAfterMove = toRef(props, "focusAfterMove");
-  const id = toRef(props, "id");
-  const isDragAndDrop = toRef(props, "isDragAndDrop");
-  const rows = toRef(props, "rows");
-
-  const draggedRowIndex = ref(undefined);
-  const dragOverRowIndex = ref(undefined);
-  const dragOverPosition = ref(undefined);
-  const dragPreviewElement = ref(undefined);
-
-  const removeDragPreview = () => {
-    dragPreviewElement.value?.remove();
-    dragPreviewElement.value = undefined;
-  };
-
-  const createDragPreview = $event => {
-    const rowElement = $event.target?.closest?.("tr");
-
-    if (!rowElement) {
-      return undefined;
-    }
-
-    const rowRect = rowElement.getBoundingClientRect();
-    const previewTable = document.createElement("table");
-    const previewBody = document.createElement("tbody");
-    const previewRow = rowElement.cloneNode(true);
-
-    previewTable.className = "a_table_form__table";
-    previewTable.style.borderCollapse = "collapse";
-    previewTable.style.borderSpacing = "0";
-    previewTable.style.width = `${ rowRect.width }px`;
-    previewTable.style.tableLayout = "fixed";
-
-    Array.from(rowElement.children).forEach((cell, index) => {
-      const previewCell = previewRow.children[index];
-
-      if (previewCell) {
-        const cellStyles = window.getComputedStyle(cell);
-
-        previewCell.style.width = `${ cell.getBoundingClientRect().width }px`;
-        previewCell.style.backgroundColor = cellStyles.backgroundColor;
-        previewCell.style.borderTop = cellStyles.borderTop;
-        previewCell.style.borderRight = cellStyles.borderRight;
-        previewCell.style.borderBottom = cellStyles.borderBottom;
-        previewCell.style.borderLeft = cellStyles.borderLeft;
-        previewCell.style.color = cellStyles.color;
-      }
-    });
-
-    previewBody.appendChild(previewRow);
-    previewTable.appendChild(previewBody);
-
-    const previewWrapper = document.createElement("div");
-    previewWrapper.className = "a_table_form a_table_form__drag_preview";
-    previewWrapper.style.position = "fixed";
-    previewWrapper.style.top = "-10000px";
-    previewWrapper.style.left = "-10000px";
-    previewWrapper.style.pointerEvents = "none";
-    previewWrapper.style.zIndex = "9999";
-    previewWrapper.appendChild(previewTable);
-
-    document.body.appendChild(previewWrapper);
-    dragPreviewElement.value = previewWrapper;
-
-    return {
-      element: previewWrapper,
-      offsetX: Math.min($event.offsetX || 0, rowRect.width / 2),
-      offsetY: Math.min($event.offsetY || 0, rowRect.height / 2),
-    };
-  };
-
-  const moveRow = ({ focusId, fromIndex, toIndex, trigger }) => {
-    if (!isDragAndDrop.value ||
-      isDndDisabled.value ||
-      fromIndex === toIndex ||
-      fromIndex < 0 ||
-      toIndex < 0 ||
-      fromIndex >= rows.value.length ||
-      toIndex >= rows.value.length) {
-      return;
-    }
-
-    const ROWS_LOCAL = [...rows.value];
-    const [movedRow] = ROWS_LOCAL.splice(fromIndex, 1);
-    ROWS_LOCAL.splice(toIndex, 0, movedRow);
-
-    emit("updateRows", { focusId, rows: ROWS_LOCAL, trigger, fromIndex, toIndex });
-    emit("moveRow", {
-      focusId,
-      fromIndex,
-      row: movedRow,
-      toIndex,
-    });
-  };
-
-  const moveRowToPosition = ({ fromIndex, rowIndex, position = "before" }) => {
-    if (!isDragAndDrop.value ||
-      isDndDisabled.value ||
-      fromIndex < 0 ||
-      rowIndex < 0 ||
-      fromIndex >= rows.value.length ||
-      rowIndex >= rows.value.length) {
-      return;
-    }
-
-    let insertIndex = position === "after" ? rowIndex + 1 : rowIndex;
-
-    if (fromIndex < insertIndex) {
-      insertIndex -= 1;
-    }
-
-    moveRow({
-      fromIndex,
-      toIndex: insertIndex,
-      trigger: "dnd",
-    });
-  };
-
-  const setFocusAfterMoveLocal = ({ focusId }) => {
-    if (!focusAfterMove.value) {
-      return;
-    }
-
-    nextTick().then(
-      () => {
-        setFocusToElement({ selector: `#${ focusId }` });
-      },
-    );
-  };
-
-  const moveRowUp = rowIndex => {
-    const focusIndex = Math.max(1, rowIndex - 1);
-    const focusId = `${ id.value }_${ focusIndex }_up`;
-    moveRow({
-      focusId,
-      fromIndex: rowIndex,
-      toIndex: rowIndex - 1,
-      trigger: "moveRowUp",
-    });
-
-    setFocusAfterMoveLocal({ focusId });
-  };
-
-  const moveRowDown = rowIndex => {
-    const focusIndex = Math.min(rows.value.length - 2, rowIndex + 1);
-    const focusId = `${ id.value }_${ focusIndex }_down`;
-    moveRow({
-      focusId,
-      fromIndex: rowIndex,
-      toIndex: rowIndex + 1,
-      trigger: "moveRowDown",
-    });
-
-    setFocusAfterMoveLocal({ focusId });
-  };
-
-  const onDragstart = ($event, rowIndex) => {
-    if (!isDragAndDrop.value || isDndDisabled.value) {
-      return;
-    }
-
-    if ($event?.dataTransfer) {
-      $event.dataTransfer.effectAllowed = "move";
-      $event.dataTransfer.setData("text/plain", `${ rowIndex }`);
-      removeDragPreview();
-
-      const preview = createDragPreview($event);
-      if (preview) {
-        $event.dataTransfer.setDragImage(preview.element, preview.offsetX, preview.offsetY);
-      }
-    }
-
-    draggedRowIndex.value = rowIndex;
-  };
-
-  const onDragover = ($event, rowIndex) => {
-    if (!isDragAndDrop.value || isDndDisabled.value) {
-      return;
-    }
-
-    $event.preventDefault();
-
-    const rect = $event.currentTarget?.getBoundingClientRect?.();
-    if (rect) {
-      const middleY = rect.top + rect.height / 2;
-      dragOverPosition.value = $event.clientY < middleY ? "before" : "after";
-    } else {
-      dragOverPosition.value = "after";
-    }
-
-    dragOverRowIndex.value = rowIndex;
-  };
-
-  const onDragleave = ($event, rowIndex) => {
-    if (!isDragAndDrop.value || isDndDisabled.value) {
-      return;
-    }
-
-    const relatedTarget = $event.relatedTarget;
-    if ($event.currentTarget?.contains?.(relatedTarget)) {
-      return;
-    }
-
-    if (dragOverRowIndex.value === rowIndex) {
-      dragOverRowIndex.value = undefined;
-      dragOverPosition.value = undefined;
-    }
-  };
-
-  const onDrop = ($event, rowIndex) => {
-    if (!isDragAndDrop.value || isDndDisabled.value) {
-      return;
-    }
-
-    $event.preventDefault();
-
-    if (draggedRowIndex.value === undefined) {
-      return;
-    }
-
-    moveRowToPosition({
-      fromIndex: draggedRowIndex.value,
-      position: dragOverPosition.value || "after",
-      rowIndex,
-    });
-
-    removeDragPreview();
-    draggedRowIndex.value = undefined;
-    dragOverRowIndex.value = undefined;
-    dragOverPosition.value = undefined;
-  };
-
-  const onDragend = () => {
-    removeDragPreview();
-    draggedRowIndex.value = undefined;
-    dragOverRowIndex.value = undefined;
-    dragOverPosition.value = undefined;
-  };
-
-  return {
-    canMoveRowDown: computed(() => rowIndex => rowIndex < rows.value.length - 1),
-    canMoveRowUp: computed(() => rowIndex => rowIndex > 0),
-    dragOverPosition,
-    dragOverRowIndex,
-    draggedRowIndex,
-    onDragleave,
-    moveRowDown,
-    moveRowUp,
-    onDragend,
-    onDragover,
-    onDragstart,
-    onDrop,
-  };
-}
+import {
+  computed,
+  nextTick,
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  setFocusToElement,
+} from "../../utils/utilsDOM";
+import {
+  isFunction,
+} from "lodash-es";
+
+export default function DragAndDropAPI(props, { emit }, {
+  isDndDisabled = computed(() => false),
+} = {}) {
+  const dndDisabledCallback = toRef(props, "dndDisabledCallback");
+  const focusAfterMove = toRef(props, "focusAfterMove");
+  const id = toRef(props, "id");
+  const isDragAndDrop = toRef(props, "isDragAndDrop");
+  const rows = toRef(props, "rows");
+
+  const draggedRowIndex = ref(undefined);
+  const dragOverRowIndex = ref(undefined);
+  const dragOverPosition = ref(undefined);
+  const dragPreviewElement = ref(undefined);
+
+  const isDndDisabledForRow = rowIndex => {
+    if (isDndDisabled.value) {
+      return true;
+    }
+
+    if (isFunction(dndDisabledCallback.value)) {
+      return !!dndDisabledCallback.value({
+        row: rows.value[rowIndex],
+        rowIndex,
+      });
+    }
+
+    return false;
+  };
+
+  const hasDisabledRowBetween = (fromIndex, toIndex) => {
+    const indexFrom = Math.min(fromIndex, toIndex);
+    const indexTo = Math.max(fromIndex, toIndex);
+
+    for (let rowIndex = indexFrom; rowIndex <= indexTo; rowIndex++) {
+      if (isDndDisabledForRow(rowIndex)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  const removeDragPreview = () => {
+    dragPreviewElement.value?.remove();
+    dragPreviewElement.value = undefined;
+  };
+
+  const createDragPreview = $event => {
+    const rowElement = $event.target?.closest?.("tr");
+
+    if (!rowElement) {
+      return undefined;
+    }
+
+    const rowRect = rowElement.getBoundingClientRect();
+    const previewTable = document.createElement("table");
+    const previewBody = document.createElement("tbody");
+    const previewRow = rowElement.cloneNode(true);
+
+    previewTable.className = "a_table_form__table";
+    previewTable.style.borderCollapse = "collapse";
+    previewTable.style.borderSpacing = "0";
+    previewTable.style.width = `${ rowRect.width }px`;
+    previewTable.style.tableLayout = "fixed";
+
+    Array.from(rowElement.children).forEach((cell, index) => {
+      const previewCell = previewRow.children[index];
+
+      if (previewCell) {
+        const cellStyles = window.getComputedStyle(cell);
+
+        previewCell.style.width = `${ cell.getBoundingClientRect().width }px`;
+        previewCell.style.backgroundColor = cellStyles.backgroundColor;
+        previewCell.style.borderTop = cellStyles.borderTop;
+        previewCell.style.borderRight = cellStyles.borderRight;
+        previewCell.style.borderBottom = cellStyles.borderBottom;
+        previewCell.style.borderLeft = cellStyles.borderLeft;
+        previewCell.style.color = cellStyles.color;
+      }
+    });
+
+    previewBody.appendChild(previewRow);
+    previewTable.appendChild(previewBody);
+
+    const previewWrapper = document.createElement("div");
+    previewWrapper.className = "a_table_form a_table_form__drag_preview";
+    previewWrapper.style.position = "fixed";
+    previewWrapper.style.top = "-10000px";
+    previewWrapper.style.left = "-10000px";
+    previewWrapper.style.pointerEvents = "none";
+    previewWrapper.style.zIndex = "9999";
+    previewWrapper.appendChild(previewTable);
+
+    document.body.appendChild(previewWrapper);
+    dragPreviewElement.value = previewWrapper;
+
+    return {
+      element: previewWrapper,
+      offsetX: Math.min($event.offsetX || 0, rowRect.width / 2),
+      offsetY: Math.min($event.offsetY || 0, rowRect.height / 2),
+    };
+  };
+
+  const moveRow = ({ focusId, fromIndex, toIndex, trigger }) => {
+    if (!isDragAndDrop.value ||
+      isDndDisabled.value ||
+      fromIndex === toIndex ||
+      fromIndex < 0 ||
+      toIndex < 0 ||
+      fromIndex >= rows.value.length ||
+      toIndex >= rows.value.length ||
+      hasDisabledRowBetween(fromIndex, toIndex)) {
+      return;
+    }
+
+    const ROWS_LOCAL = [...rows.value];
+    const [movedRow] = ROWS_LOCAL.splice(fromIndex, 1);
+    ROWS_LOCAL.splice(toIndex, 0, movedRow);
+
+    emit("updateRows", { focusId, rows: ROWS_LOCAL, trigger, fromIndex, toIndex });
+    emit("moveRow", {
+      focusId,
+      fromIndex,
+      row: movedRow,
+      toIndex,
+    });
+  };
+
+  const moveRowToPosition = ({ fromIndex, rowIndex, position = "before" }) => {
+    if (!isDragAndDrop.value ||
+      isDndDisabled.value ||
+      fromIndex < 0 ||
+      rowIndex < 0 ||
+      fromIndex >= rows.value.length ||
+      rowIndex >= rows.value.length) {
+      return;
+    }
+
+    let insertIndex = position === "after" ? rowIndex + 1 : rowIndex;
+
+    if (fromIndex < insertIndex) {
+      insertIndex -= 1;
+    }
+
+    moveRow({
+      fromIndex,
+      toIndex: insertIndex,
+      trigger: "dnd",
+    });
+  };
+
+  const setFocusAfterMoveLocal = ({ focusId }) => {
+    if (!focusAfterMove.value) {
+      return;
+    }
+
+    nextTick().then(
+      () => {
+        setFocusToElement({ selector: `#${ focusId }` });
+      },
+    );
+  };
+
+  const moveRowUp = rowIndex => {
+    const focusIndex = Math.max(1, rowIndex - 1);
+    const focusId = `${ id.value }_${ focusIndex }_up`;
+    moveRow({
+      focusId,
+      fromIndex: rowIndex,
+      toIndex: rowIndex - 1,
+      trigger: "moveRowUp",
+    });
+
+    setFocusAfterMoveLocal({ focusId });
+  };
+
+  const moveRowDown = rowIndex => {
+    const focusIndex = Math.min(rows.value.length - 2, rowIndex + 1);
+    const focusId = `${ id.value }_${ focusIndex }_down`;
+    moveRow({
+      focusId,
+      fromIndex: rowIndex,
+      toIndex: rowIndex + 1,
+      trigger: "moveRowDown",
+    });
+
+    setFocusAfterMoveLocal({ focusId });
+  };
+
+  const onDragstart = ($event, rowIndex) => {
+    if (!isDragAndDrop.value || isDndDisabledForRow(rowIndex)) {
+      return;
+    }
+
+    if ($event?.dataTransfer) {
+      $event.dataTransfer.effectAllowed = "move";
+      $event.dataTransfer.setData("text/plain", `${ rowIndex }`);
+      removeDragPreview();
+
+      const preview = createDragPreview($event);
+      if (preview) {
+        $event.dataTransfer.setDragImage(preview.element, preview.offsetX, preview.offsetY);
+      }
+    }
+
+    draggedRowIndex.value = rowIndex;
+  };
+
+  const onDragover = ($event, rowIndex) => {
+    if (!isDragAndDrop.value || isDndDisabledForRow(rowIndex)) {
+      return;
+    }
+
+    $event.preventDefault();
+
+    const rect = $event.currentTarget?.getBoundingClientRect?.();
+    if (rect) {
+      const middleY = rect.top + rect.height / 2;
+      dragOverPosition.value = $event.clientY < middleY ? "before" : "after";
+    } else {
+      dragOverPosition.value = "after";
+    }
+
+    dragOverRowIndex.value = rowIndex;
+  };
+
+  const onDragleave = ($event, rowIndex) => {
+    if (!isDragAndDrop.value || isDndDisabledForRow(rowIndex)) {
+      return;
+    }
+
+    const relatedTarget = $event.relatedTarget;
+    if ($event.currentTarget?.contains?.(relatedTarget)) {
+      return;
+    }
+
+    if (dragOverRowIndex.value === rowIndex) {
+      dragOverRowIndex.value = undefined;
+      dragOverPosition.value = undefined;
+    }
+  };
+
+  const onDrop = ($event, rowIndex) => {
+    if (!isDragAndDrop.value || isDndDisabledForRow(rowIndex)) {
+      return;
+    }
+
+    $event.preventDefault();
+
+    if (draggedRowIndex.value === undefined) {
+      return;
+    }
+
+    moveRowToPosition({
+      fromIndex: draggedRowIndex.value,
+      position: dragOverPosition.value || "after",
+      rowIndex,
+    });
+
+    removeDragPreview();
+    draggedRowIndex.value = undefined;
+    dragOverRowIndex.value = undefined;
+    dragOverPosition.value = undefined;
+  };
+
+  const onDragend = () => {
+    removeDragPreview();
+    draggedRowIndex.value = undefined;
+    dragOverRowIndex.value = undefined;
+    dragOverPosition.value = undefined;
+  };
+
+  return {
+    canMoveRowDown: computed(() => rowIndex => rowIndex < rows.value.length - 1),
+    canMoveRowUp: computed(() => rowIndex => rowIndex > 0),
+    dragOverPosition,
+    dragOverRowIndex,
+    draggedRowIndex,
+    isDndDisabledForRow,
+    onDragleave,
+    moveRowDown,
+    moveRowUp,
+    onDragend,
+    onDragover,
+    onDragstart,
+    onDrop,
+  };
+}

package/src/ATableForm/compositionAPI/TextsAPI.js

@@ -1,34 +1,35 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-export default function TextsAPI(props) {
-  const texts = toRef(props, "texts");
-
-  const textsLocal = computed(() => {
-    return {
-      actionsColumn: "_A_TABLE_FORM_ACTIONS_",
-      actionAddRow: "_A_TABLE_FORM_ADD_ROW_",
-      actionDelete: "_A_TABLE_FORM_DELETE_",
-      actionDeleteConfirmBody: "_A_TABLE_FORM_DELETE_CONFIRM_BODY_",
-      actionDeleteConfirmClose: "_A_TABLE_FORM_DELETE_CONFIRM_CLOSE_",
-      actionDeleteConfirmHeader: "_A_TABLE_FORM_DELETE_CONFIRM_HEADER_",
-      actionDeleteConfirmSave: "_A_TABLE_FORM_DELETE_CONFIRM_SAVE_",
-      actionEdit: "_A_TABLE_FORM_EDIT_",
-      actionEditCancel: "_A_TABLE_FORM_EDIT_CANCEL_",
-      actionEditSave: "_A_TABLE_FORM_EDIT_SAVE_",
-      editInfoText: undefined,
-      emptyText: "_A_TABLE_FORM_EMPTY_",
-      reorderColumn: "_A_TABLE_FORM_REORDER_COLUMN_",
-      reorderDown: "_A_TABLE_FORM_MOVE_DOWN_",
-      reorderHandle: "_A_TABLE_FORM_REORDER_",
-      reorderUp: "_A_TABLE_FORM_MOVE_UP_",
-      ...texts.value,
-    };
-  });
-
-  return {
-    textsLocal,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function TextsAPI(props) {
+  const texts = toRef(props, "texts");
+
+  const textsLocal = computed(() => {
+    return {
+      actionsColumn: "_A_TABLE_FORM_ACTIONS_",
+      actionAddRow: "_A_TABLE_FORM_ADD_ROW_",
+      actionDelete: "_A_TABLE_FORM_DELETE_",
+      actionDeleteConfirmBody: "_A_TABLE_FORM_DELETE_CONFIRM_BODY_",
+      actionDeleteConfirmClose: "_A_TABLE_FORM_DELETE_CONFIRM_CLOSE_",
+      actionDeleteConfirmHeader: "_A_TABLE_FORM_DELETE_CONFIRM_HEADER_",
+      actionDeleteConfirmSave: "_A_TABLE_FORM_DELETE_CONFIRM_SAVE_",
+      actionEdit: "_A_TABLE_FORM_EDIT_",
+      actionEditCancel: "_A_TABLE_FORM_EDIT_CANCEL_",
+      actionEditSave: "_A_TABLE_FORM_EDIT_SAVE_",
+      editInfoText: undefined,
+      emptyText: "_A_TABLE_FORM_EMPTY_",
+      reorderColumn: "_A_TABLE_FORM_REORDER_COLUMN_",
+      reorderDisabled: "_A_TABLE_FORM_REORDER_DISABLED_",
+      reorderDown: "_A_TABLE_FORM_MOVE_DOWN_",
+      reorderHandle: "_A_TABLE_FORM_REORDER_",
+      reorderUp: "_A_TABLE_FORM_MOVE_UP_",
+      ...texts.value,
+    };
+  });
+
+  return {
+    textsLocal,
+  };
+}