aloha-vue 2.59.0 → 2.60.0

package/src/ATableForm/ATableFormCellDnd/ATableFormCellDnd.js

@@ -1,176 +1,182 @@
-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,
-              preventKeyboardRepeat: true,
-              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,
-              preventKeyboardRepeat: true,
-              tabindex: this.isDndDisabled ? -1 : undefined,
-              title: this.texts.reorderDown,
-              textScreenReader: this.texts.reorderDown,
-              onClick: () => this.moveRowDown(this.rowIndex),
-            }),
-          ]),
-    ]);
-  },
-};
+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";
+import LockFill from "aloha-svg/dist/js/bootstrap/LockFill";
+
+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,
+              preventKeyboardRepeat: true,
+              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",
+                {
+                  a_table_form__reorder_handle_disabled: this.isDndDisabled,
+                },
+              ],
+              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: this.isDndDisabled ? LockFill : GripVertical,
+              }),
+            ]),
+            h("span", {
+              class: "a_sr_only",
+            }, [
+              h(ATranslation, {
+                tag: "span",
+                text: this.isDndDisabled ? this.texts.reorderDisabled : 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,
+              preventKeyboardRepeat: true,
+              tabindex: this.isDndDisabled ? -1 : undefined,
+              title: this.texts.reorderDown,
+              textScreenReader: this.texts.reorderDown,
+              onClick: () => this.moveRowDown(this.rowIndex),
+            }),
+          ]),
+    ]);
+  },
+};

package/src/ATableForm/__tests__/ATableForm.DragAndDropAPI.test.js

@@ -0,0 +1,162 @@
+import {
+  computed,
+  reactive,
+} from "vue";
+import {
+  describe,
+  expect,
+  it,
+  jest,
+} from "@jest/globals";
+import {
+  mount,
+} from "@vue/test-utils";
+
+import AIcon from "../../AIcon/AIcon";
+import ATableFormCellDnd from "../ATableFormCellDnd/ATableFormCellDnd";
+
+import DragAndDropAPI from "../compositionAPI/DragAndDropAPI";
+
+import LockFill from "aloha-svg/dist/js/bootstrap/LockFill";
+
+jest.mock("../../AButton/AButton", () => {
+  const {
+    h,
+  } = require("vue");
+
+  return {
+    __esModule: true,
+    default: {
+      name: "AButton",
+      inheritAttrs: false,
+      props: {
+        disabled: Boolean,
+        textScreenReader: String,
+      },
+      render() {
+        return h("button", {
+          disabled: this.disabled,
+        }, this.textScreenReader);
+      },
+    },
+  };
+});
+jest.mock("aloha-svg/dist/js/bootstrap/ChevronDown", () => ({
+  __esModule: true,
+  default: "ChevronDown",
+}));
+jest.mock("aloha-svg/dist/js/bootstrap/ChevronUp", () => ({
+  __esModule: true,
+  default: "ChevronUp",
+}));
+jest.mock("aloha-svg/dist/js/bootstrap/GripVertical", () => ({
+  __esModule: true,
+  default: "GripVertical",
+}));
+jest.mock("aloha-svg/dist/js/bootstrap/LockFill", () => ({
+  __esModule: true,
+  default: "LockFill",
+}));
+
+describe("ATableForm DragAndDropAPI", () => {
+  it("prevents dragging, dropping on, and moving across a disabled row", () => {
+    const emit = jest.fn();
+    const props = reactive({
+      dndDisabledCallback: ({ row }) => row.dndDisabled,
+      focusAfterMove: false,
+      id: "table",
+      isDragAndDrop: true,
+      rows: [
+        { id: 1 },
+        { dndDisabled: true, id: 2 },
+        { id: 3 },
+        { id: 4 },
+      ],
+    });
+    const {
+      draggedRowIndex,
+      isDndDisabledForRow,
+      moveRowDown,
+      onDragover,
+      onDragstart,
+      onDrop,
+    } = DragAndDropAPI(props, { emit }, {
+      isDndDisabled: computed(() => false),
+    });
+
+    expect(isDndDisabledForRow(0)).toBe(false);
+    expect(isDndDisabledForRow(1)).toBe(true);
+
+    onDragstart({}, 1);
+    expect(draggedRowIndex.value).toBeUndefined();
+
+    onDragstart({}, 0);
+    expect(draggedRowIndex.value).toBe(0);
+
+    const preventDefaultDisabled = jest.fn();
+    onDragover({
+      preventDefault: preventDefaultDisabled,
+    }, 1);
+    onDrop({
+      preventDefault: preventDefaultDisabled,
+    }, 1);
+
+    expect(preventDefaultDisabled).not.toHaveBeenCalled();
+    expect(emit).not.toHaveBeenCalled();
+
+    const preventDefaultAfterLock = jest.fn();
+    onDragover({
+      currentTarget: undefined,
+      preventDefault: preventDefaultAfterLock,
+    }, 2);
+    onDrop({
+      preventDefault: preventDefaultAfterLock,
+    }, 2);
+
+    expect(preventDefaultAfterLock).toHaveBeenCalledTimes(2);
+    expect(emit).not.toHaveBeenCalled();
+
+    moveRowDown(2);
+
+    expect(emit).toHaveBeenCalledWith("updateRows", expect.objectContaining({
+      fromIndex: 2,
+      toIndex: 3,
+      trigger: "moveRowDown",
+    }));
+  });
+});
+
+describe("ATableFormCellDnd", () => {
+  it("shows a lock and disables move buttons for a disabled row", () => {
+    const wrapper = mount(ATableFormCellDnd, {
+      props: {
+        canMoveRowDown: () => true,
+        canMoveRowUp: () => true,
+        id: "table_1",
+        isDndDisabled: true,
+        isDragAndDrop: true,
+        moveRowDown: jest.fn(),
+        moveRowUp: jest.fn(),
+        onDragend: jest.fn(),
+        onDragstart: jest.fn(),
+        rowIndex: 1,
+        texts: {
+          reorderDisabled: "Row reordering disabled",
+          reorderDown: "Move row down",
+          reorderHandle: "Drag row to reorder",
+          reorderUp: "Move row up",
+        },
+        widths: {
+          dndColumn: 56,
+        },
+      },
+    });
+
+    expect(wrapper.findComponent(AIcon).props("icon")).toBe(LockFill);
+    expect(wrapper.find(".a_table_form__reorder_handle").attributes("draggable")).toBe("false");
+    expect(wrapper.find(".a_table_form__reorder_handle_disabled").exists()).toBe(true);
+    expect(wrapper.text()).toContain("Row reordering disabled");
+    expect(wrapper.findAll("button")).toHaveLength(2);
+    expect(wrapper.findAll("button").every(button => button.attributes("disabled") !== undefined)).toBe(true);
+  });
+});