stk-table-vue 0.6.17 → 0.7.0

package/src/StkTable/useTrDrag.ts

@@ -1,118 +1,118 @@
-import { computed, ShallowRef } from 'vue';
-import { DragRowConfig } from './types';
-
-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 getClosestTr(e: DragEvent) {
-        const target = e.target as HTMLElement;
-        const tr = target?.closest('tr');
-        return tr;
-    }
-
-    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';
+
+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 getClosestTr(e: DragEvent) {
+        const target = e.target as HTMLElement;
+        const tr = target?.closest('tr');
+        return tr;
+    }
+
+    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,
+    };
+}

package/src/StkTable/useTree.ts

@@ -0,0 +1,158 @@
+import { ShallowRef } from 'vue';
+import { PrivateRowDT, TreeConfig, UniqKey } from './types';
+
+type DT = PrivateRowDT & { children?: DT[] };
+type Option<DT extends Record<string, any>> = {
+    props: any;
+    rowKeyGen: (row: any) => UniqKey;
+    dataSourceCopy: ShallowRef<DT[]>;
+    emits: any;
+};
+
+export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
+    const { defaultExpandAll, defaultExpandKeys, defaultExpandLevel }: TreeConfig = props.treeConfig;
+
+    /** click expended icon to toggle expand row */
+    function toggleTreeNode(row: DT, col: any) {
+        const expand = row ? !row.__T_EXPANDED__ : false;
+        privateSetTreeExpand(row, { expand, col, isClick: true });
+    }
+
+    /**
+     *
+     * @param row rowKey or row
+     * @param option
+     * @param option.expand expand or collapse
+     * @param option.silent if set true, not emit `toggle-tree-expand`, default:false
+     */
+    function privateSetTreeExpand(row: (UniqKey | DT) | (UniqKey | DT)[], option: { expand?: boolean; col?: any; isClick: boolean }) {
+        const rowKeyOrRowArr: (UniqKey | DT)[] = Array.isArray(row) ? row : [row];
+
+        const tempData = dataSourceCopy.value.slice();
+        for (let i = 0; i < rowKeyOrRowArr.length; i++) {
+            const rowKeyOrRow = rowKeyOrRowArr[i];
+            let rowKey: UniqKey;
+            if (typeof rowKeyOrRow === 'string') {
+                rowKey = rowKeyOrRow;
+            } else {
+                rowKey = rowKeyGen(rowKeyOrRow);
+            }
+            const index = tempData.findIndex(it => rowKeyGen(it) === rowKey);
+            if (index === -1) {
+                console.warn('treeExpandRow failed.rowKey:', rowKey);
+                return;
+            }
+
+            const row = tempData[index];
+            const level = row.__T_LV__ || 0;
+            let expanded = option?.expand;
+            if (expanded === void 0) {
+                expanded = !row.__T_EXPANDED__;
+            }
+            if (expanded) {
+                const children = expandNode(row, level);
+                tempData.splice(index + 1, 0, ...children);
+            } else {
+                // delete all child nodes from i
+                const deleteCount = foldNode(index, tempData, level);
+                tempData.splice(index + 1, deleteCount);
+            }
+
+            setNodeExpanded(row, expanded, level);
+
+            if (option.isClick) {
+                emits('toggle-tree-expand', { expanded: Boolean(expanded), row, col: option.col });
+            }
+        }
+
+        dataSourceCopy.value = tempData;
+    }
+
+    function setTreeExpand(row: (UniqKey | DT) | (UniqKey | DT)[], option?: { expand?: boolean }) {
+        privateSetTreeExpand(row, { ...option, isClick: false });
+    }
+
+    function setNodeExpanded(row: DT, expanded: boolean, level?: number, parent?: DT) {
+        row.__T_EXPANDED__ = expanded;
+        if (level !== void 0) {
+            row.__T_LV__ = level;
+        }
+        if (parent) {
+            row.__T_PARENT_K__ = rowKeyGen(parent);
+        }
+    }
+
+    /**
+     * 根据保存的展开状态，深度遍历，展平树形数据。
+     * @param data
+     * @returns
+     */
+    function flatTreeData(data: DT[]) {
+        const result: DT[] = [];
+        (function recursion(data: DT[] | undefined, level: number, parent?: DT) {
+            if (!data) return;
+            for (let i = 0; i < data.length; i++) {
+                const item = data[i];
+                result.push(item);
+                const isExpanded = Boolean(item.__T_EXPANDED__);
+                setNodeExpanded(item, isExpanded, level, parent);
+                if (!isExpanded) {
+                    if (defaultExpandAll) {
+                        setNodeExpanded(item, true);
+                    } else {
+                        if (defaultExpandLevel) {
+                            if (level < defaultExpandLevel) {
+                                setNodeExpanded(item, true);
+                            }
+                        }
+                        if (defaultExpandKeys) {
+                            if (defaultExpandKeys.includes(rowKeyGen(item))) {
+                                setNodeExpanded(item, true);
+                            }
+                        }
+                        if (!item.__T_EXPANDED__) {
+                            continue;
+                        }
+                    }
+                }
+                recursion(item.children, level + 1, item);
+            }
+        })(data, 0);
+        return result;
+    }
+
+    function expandNode(row: DT, level: number) {
+        let result: DT[] = [];
+        row.children &&
+            row.children.forEach(child => {
+                result.push(child);
+                const childLv = level + 1;
+                if (child.__T_EXPANDED__ && child.children) {
+                    const res = expandNode(child, childLv);
+                    result = result.concat(res);
+                } else {
+                    setNodeExpanded(child, false, childLv, row);
+                }
+            });
+        return result;
+    }
+
+    function foldNode(index: number, tempData: DT[], level: number) {
+        let deleteCount = 0;
+        for (let i = index + 1; i < tempData.length; i++) {
+            const child = tempData[i];
+            if (child.__T_LV__ && child.__T_LV__ > level) {
+                deleteCount++;
+            } else {
+                break;
+            }
+        }
+        return deleteCount;
+    }
+
+    return {
+        toggleTreeNode,
+        setTreeExpand,
+        flatTreeData,
+    };
+}