stk-table-vue 0.8.14 → 0.9.0-beta.1

package/src/StkTable/useThDrag.ts

@@ -1,102 +1,102 @@
-import { computed } from 'vue';
-import { ColKeyGen, StkTableColumn } from './types';
-import { isEmptyValue } from './utils';
-
-type Params = {
-    props: any;
-    emits: any;
-    colKeyGen: ColKeyGen;
-};
-/**
- * 列顺序拖动
- * @returns
- */
-export function useThDrag({ props, emits, colKeyGen }: Params) {
-    const findParentTH = (e: DragEvent) => (e.target as HTMLElement).closest('th');
-
-    const dragConfig = computed(() => {
-        const headerDrag = props.headerDrag;
-        const draggable = headerDrag !== false; // true or object
-        return {
-            draggable,
-            mode: 'insert',
-            disabled: () => false,
-            ...headerDrag,
-        };
-    });
-
-    /** 开始拖动记录th位置 */
-    function onThDragStart(e: DragEvent) {
-        const th = findParentTH(e);
-        if (!th) return;
-        const dragStartKey = th.dataset.colKey || '';
-        const dt = e.dataTransfer;
-        if (dt) {
-            dt.effectAllowed = 'move';
-            dt.setData('text/plain', dragStartKey);
-        }
-
-        emits('th-drag-start', dragStartKey);
-    }
-
-    function onThDragOver(e: DragEvent) {
-        const th = findParentTH(e);
-        if (!th) return;
-
-        const isHeaderDraggable = th.getAttribute('draggable') === 'true';
-        if (!isHeaderDraggable) return;
-
-        const dt = e.dataTransfer;
-        if (dt) {
-            dt.dropEffect = 'move';
-        }
-        e.preventDefault();
-    }
-
-    /** th拖动释放时 */
-    function onThDrop(e: DragEvent) {
-        const th = findParentTH(e);
-        if (!th) return;
-        const dragStartKey = e.dataTransfer?.getData('text');
-        if (dragStartKey !== th.dataset.colKey) {
-            handleColOrderChange(dragStartKey, th.dataset.colKey);
-        }
-        emits('th-drop', th.dataset.colKey);
-    }
-
-    /** 列拖动交换顺序 */
-    function handleColOrderChange(dragStartKey: string | undefined, dragEndKey: string | undefined) {
-        if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
-
-        if (dragConfig.value.mode !== 'none') {
-            const columns: StkTableColumn<any>[] = props.columns.slice();
-
-            const dragStartIndex = columns.findIndex(col => colKeyGen.value(col) === dragStartKey);
-            const dragEndIndex = columns.findIndex(col => colKeyGen.value(col) === dragEndKey);
-
-            if (dragStartIndex === -1 || dragEndIndex === -1) return;
-
-            const dragStartCol = columns[dragStartIndex];
-            // if mode is none, do nothing
-            if (dragConfig.value.mode === 'swap') {
-                columns[dragStartIndex] = columns[dragEndIndex];
-                columns[dragEndIndex] = dragStartCol;
-            } else {
-                // default is insert
-                columns.splice(dragStartIndex, 1);
-                columns.splice(dragEndIndex, 0, dragStartCol);
-            }
-            emits('update:columns', columns);
-        }
-
-        emits('col-order-change', dragStartKey, dragEndKey);
-    }
-
-    return {
-        onThDragStart,
-        onThDragOver,
-        onThDrop,
-        /** 是否可拖拽 */
-        isHeaderDraggable: (col: StkTableColumn<any>) => dragConfig.value.draggable && !dragConfig.value.disabled(col),
-    };
-}
+import { computed } from 'vue';
+import { ColKeyGen, StkTableColumn } from './types';
+import { isEmptyValue } from './utils';
+
+type Params = {
+    props: any;
+    emits: any;
+    colKeyGen: ColKeyGen;
+};
+/**
+ * 列顺序拖动
+ * @returns
+ */
+export function useThDrag({ props, emits, colKeyGen }: Params) {
+    const findParentTH = (e: DragEvent) => (e.target as HTMLElement).closest('th');
+
+    const dragConfig = computed(() => {
+        const headerDrag = props.headerDrag;
+        const draggable = headerDrag !== false; // true or object
+        return {
+            draggable,
+            mode: 'insert',
+            disabled: () => false,
+            ...headerDrag,
+        };
+    });
+
+    /** 开始拖动记录th位置 */
+    function onThDragStart(e: DragEvent) {
+        const th = findParentTH(e);
+        if (!th) return;
+        const dragStartKey = th.dataset.colKey || '';
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.effectAllowed = 'move';
+            dt.setData('text/plain', dragStartKey);
+        }
+
+        emits('th-drag-start', dragStartKey);
+    }
+
+    function onThDragOver(e: DragEvent) {
+        const th = findParentTH(e);
+        if (!th) return;
+
+        const isHeaderDraggable = th.getAttribute('draggable') === 'true';
+        if (!isHeaderDraggable) return;
+
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.dropEffect = 'move';
+        }
+        e.preventDefault();
+    }
+
+    /** th拖动释放时 */
+    function onThDrop(e: DragEvent) {
+        const th = findParentTH(e);
+        if (!th) return;
+        const dragStartKey = e.dataTransfer?.getData('text');
+        if (dragStartKey !== th.dataset.colKey) {
+            handleColOrderChange(dragStartKey, th.dataset.colKey);
+        }
+        emits('th-drop', th.dataset.colKey);
+    }
+
+    /** 列拖动交换顺序 */
+    function handleColOrderChange(dragStartKey: string | undefined, dragEndKey: string | undefined) {
+        if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
+
+        if (dragConfig.value.mode !== 'none') {
+            const columns: StkTableColumn<any>[] = props.columns.slice();
+
+            const dragStartIndex = columns.findIndex(col => colKeyGen.value(col) === dragStartKey);
+            const dragEndIndex = columns.findIndex(col => colKeyGen.value(col) === dragEndKey);
+
+            if (dragStartIndex === -1 || dragEndIndex === -1) return;
+
+            const dragStartCol = columns[dragStartIndex];
+            // if mode is none, do nothing
+            if (dragConfig.value.mode === 'swap') {
+                columns[dragStartIndex] = columns[dragEndIndex];
+                columns[dragEndIndex] = dragStartCol;
+            } else {
+                // default is insert
+                columns.splice(dragStartIndex, 1);
+                columns.splice(dragEndIndex, 0, dragStartCol);
+            }
+            emits('update:columns', columns);
+        }
+
+        emits('col-order-change', dragStartKey, dragEndKey);
+    }
+
+    return {
+        onThDragStart,
+        onThDragOver,
+        onThDrop,
+        /** 是否可拖拽 */
+        isHeaderDraggable: (col: StkTableColumn<any>) => dragConfig.value.draggable && !dragConfig.value.disabled(col),
+    };
+}

package/src/StkTable/useTrDrag.ts

@@ -1,113 +1,113 @@
-import { computed, ShallowRef } from 'vue';
-import { DragRowConfig } from './types';
-import { getClosestTr } from './utils';
-
-type Params = {
-    props: any;
-    emits: any;
-    dataSourceCopy: ShallowRef<any[]>;
-};
-
-const TR_DRAGGING_CLASS = 'tr-dragging';
-const TR_DRAG_OVER_CLASS = 'tr-dragging-over';
-const DATA_TRANSFER_FORMAT = 'text/plain';
-
-/**
- * 拖拽行
- * TODO: 不在虚拟滚动的情况下，从上面拖拽到下面，跨页的时候，滚动条会自适应位置。没有顶上去
- */
-export function useTrDrag({ props, emits, dataSourceCopy }: Params) {
-    let trDragFlag = false;
-
-    const dragRowConfig = computed<DragRowConfig>(() => {
-        return { mode: 'insert', ...props.dragRowConfig };
-    });
-
-    function onTrDragStart(e: DragEvent, rowIndex: number) {
-        const tr = getClosestTr(e);
-        if (tr) {
-            const trRect = tr.getBoundingClientRect();
-            const x = e.clientX - (trRect.left ?? 0);
-            e.dataTransfer?.setDragImage(tr, x, trRect.height / 2);
-            tr.classList.add(TR_DRAGGING_CLASS);
-        }
-        const dt = e.dataTransfer;
-        if (dt) {
-            dt.effectAllowed = 'move';
-            dt.setData(DATA_TRANSFER_FORMAT, String(rowIndex));
-        }
-        trDragFlag = true;
-    }
-
-    function onTrDragOver(e: DragEvent) {
-        if (!trDragFlag) return;
-        e.preventDefault(); // 阻止默认行为，否则不会触发 drop 事件
-
-        const dt = e.dataTransfer;
-        if (dt) {
-            dt.dropEffect = 'move';
-        }
-    }
-
-    let oldTr: HTMLElement | null = null;
-    function onTrDragEnter(e: DragEvent) {
-        if (!trDragFlag) return;
-        e.preventDefault();
-        const tr = getClosestTr(e);
-        if (oldTr && oldTr !== tr) {
-            // 两个tr不一样说明移动到了另一个tr中
-            oldTr.classList.remove(TR_DRAG_OVER_CLASS);
-        }
-        if (tr) {
-            oldTr = tr;
-            tr.classList.add(TR_DRAG_OVER_CLASS);
-        }
-    }
-
-    function onTrDragEnd(e: DragEvent) {
-        if (!trDragFlag) return;
-        const tr = getClosestTr(e);
-        if (tr) {
-            tr.classList.remove(TR_DRAGGING_CLASS);
-        }
-        if (oldTr) {
-            oldTr.classList.remove(TR_DRAG_OVER_CLASS);
-            oldTr = null;
-        }
-        trDragFlag = false;
-    }
-
-    function onTrDrop(e: DragEvent, rowIndex: number) {
-        if (!trDragFlag) return;
-        const dt = e.dataTransfer;
-        if (!dt) return;
-        const mode = dragRowConfig.value.mode;
-        const sourceIndex = Number(dt.getData(DATA_TRANSFER_FORMAT));
-        // dt.clearData(DATA_TRANSFER_FORMAT); // firefox not work
-        const endIndex = rowIndex;
-        if (sourceIndex === endIndex) return;
-
-        if (mode !== 'none') {
-            const dataSourceTemp = dataSourceCopy.value.slice();
-            const sourceRow = dataSourceTemp[sourceIndex];
-            if (mode === 'swap') {
-                dataSourceTemp[sourceIndex] = dataSourceTemp[endIndex];
-                dataSourceTemp[endIndex] = sourceRow;
-            } else {
-                dataSourceTemp.splice(sourceIndex, 1);
-                dataSourceTemp.splice(endIndex, 0, sourceRow);
-            }
-            dataSourceCopy.value = dataSourceTemp;
-        }
-        emits('row-order-change', sourceIndex, endIndex);
-    }
-
-    return {
-        dragRowConfig,
-        onTrDragStart,
-        onTrDragEnter,
-        onTrDragOver,
-        onTrDrop,
-        onTrDragEnd,
-    };
-}
+import { computed, ShallowRef } from 'vue';
+import { DragRowConfig } from './types';
+import { getClosestTr } from './utils';
+
+type Params = {
+    props: any;
+    emits: any;
+    dataSourceCopy: ShallowRef<any[]>;
+};
+
+const TR_DRAGGING_CLASS = 'tr-dragging';
+const TR_DRAG_OVER_CLASS = 'tr-dragging-over';
+const DATA_TRANSFER_FORMAT = 'text/plain';
+
+/**
+ * 拖拽行
+ * TODO: 不在虚拟滚动的情况下，从上面拖拽到下面，跨页的时候，滚动条会自适应位置。没有顶上去
+ */
+export function useTrDrag({ props, emits, dataSourceCopy }: Params) {
+    let trDragFlag = false;
+
+    const dragRowConfig = computed<DragRowConfig>(() => {
+        return { mode: 'insert', ...props.dragRowConfig };
+    });
+
+    function onTrDragStart(e: DragEvent, rowIndex: number) {
+        const tr = getClosestTr(e);
+        if (tr) {
+            const trRect = tr.getBoundingClientRect();
+            const x = e.clientX - (trRect.left ?? 0);
+            e.dataTransfer?.setDragImage(tr, x, trRect.height / 2);
+            tr.classList.add(TR_DRAGGING_CLASS);
+        }
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.effectAllowed = 'move';
+            dt.setData(DATA_TRANSFER_FORMAT, String(rowIndex));
+        }
+        trDragFlag = true;
+    }
+
+    function onTrDragOver(e: DragEvent) {
+        if (!trDragFlag) return;
+        e.preventDefault(); // 阻止默认行为，否则不会触发 drop 事件
+
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.dropEffect = 'move';
+        }
+    }
+
+    let oldTr: HTMLElement | null = null;
+    function onTrDragEnter(e: DragEvent) {
+        if (!trDragFlag) return;
+        e.preventDefault();
+        const tr = getClosestTr(e);
+        if (oldTr && oldTr !== tr) {
+            // 两个tr不一样说明移动到了另一个tr中
+            oldTr.classList.remove(TR_DRAG_OVER_CLASS);
+        }
+        if (tr) {
+            oldTr = tr;
+            tr.classList.add(TR_DRAG_OVER_CLASS);
+        }
+    }
+
+    function onTrDragEnd(e: DragEvent) {
+        if (!trDragFlag) return;
+        const tr = getClosestTr(e);
+        if (tr) {
+            tr.classList.remove(TR_DRAGGING_CLASS);
+        }
+        if (oldTr) {
+            oldTr.classList.remove(TR_DRAG_OVER_CLASS);
+            oldTr = null;
+        }
+        trDragFlag = false;
+    }
+
+    function onTrDrop(e: DragEvent, rowIndex: number) {
+        if (!trDragFlag) return;
+        const dt = e.dataTransfer;
+        if (!dt) return;
+        const mode = dragRowConfig.value.mode;
+        const sourceIndex = Number(dt.getData(DATA_TRANSFER_FORMAT));
+        // dt.clearData(DATA_TRANSFER_FORMAT); // firefox not work
+        const endIndex = rowIndex;
+        if (sourceIndex === endIndex) return;
+
+        if (mode !== 'none') {
+            const dataSourceTemp = dataSourceCopy.value.slice();
+            const sourceRow = dataSourceTemp[sourceIndex];
+            if (mode === 'swap') {
+                dataSourceTemp[sourceIndex] = dataSourceTemp[endIndex];
+                dataSourceTemp[endIndex] = sourceRow;
+            } else {
+                dataSourceTemp.splice(sourceIndex, 1);
+                dataSourceTemp.splice(endIndex, 0, sourceRow);
+            }
+            dataSourceCopy.value = dataSourceTemp;
+        }
+        emits('row-order-change', sourceIndex, endIndex);
+    }
+
+    return {
+        dragRowConfig,
+        onTrDragStart,
+        onTrDragEnter,
+        onTrDragOver,
+        onTrDrop,
+        onTrDragEnd,
+    };
+}