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

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -1,112 +1,112 @@
-import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, watch } from 'vue';
-import { StkTableColumn } from './types';
-import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
-
-/** 翻页按键 */
-enum ScrollCodes {
-    ArrowUp = 'ArrowUp',
-    ArrowRight = 'ArrowRight',
-    ArrowDown = 'ArrowDown',
-    ArrowLeft = 'ArrowLeft',
-    PageUp = 'PageUp',
-    PageDown = 'PageDown',
-    Home = 'Home',
-    End = 'End',
-}
-/** 所有翻页按键数组 */
-const ScrollCodesValues = Object.values(ScrollCodes);
-
-type Options<DT extends Record<string, any>> = {
-    props: any;
-    scrollTo: (y: number | null, x: number | null) => void;
-    virtualScroll: Ref<VirtualScrollStore>;
-    virtualScrollX: Ref<VirtualScrollXStore>;
-    tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
-    virtual_on: ComputedRef<boolean>;
-};
-/**
- * 按下键盘箭头滚动。只有悬浮在表体上才能生效键盘。
- *
- * 在低版本浏览器中，虚拟滚动时，使用键盘滚动，等选中的行消失在视口外时，滚动会失效。
- */
-export function useKeyboardArrowScroll<DT extends Record<string, any>>(
-    targetElement: Ref<HTMLElement | undefined>,
-    { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on }: Options<DT>,
-) {
-    /** 检测鼠标是否悬浮在表格体上 */
-    let isMouseOver = false;
-    watch(virtual_on, val => {
-        if (!val) {
-            removeListeners();
-        } else {
-            addEventListeners();
-        }
-    });
-
-    onMounted(addEventListeners);
-
-    onBeforeUnmount(removeListeners);
-
-    function addEventListeners() {
-        window.addEventListener('keydown', handleKeydown);
-        targetElement.value?.addEventListener('mouseenter', handleMouseEnter);
-        targetElement.value?.addEventListener('mouseleave', handleMouseLeave);
-        targetElement.value?.addEventListener('mousedown', handleMouseDown);
-    }
-
-    function removeListeners() {
-        window.removeEventListener('keydown', handleKeydown);
-        targetElement.value?.removeEventListener('mouseenter', handleMouseEnter);
-        targetElement.value?.removeEventListener('mouseleave', handleMouseLeave);
-        targetElement.value?.removeEventListener('mousedown', handleMouseDown);
-    }
-
-    /** 键盘按下事件 */
-    function handleKeydown(e: KeyboardEvent) {
-        if (!virtual_on.value) return; // 非虚拟滚动使用浏览器默认滚动
-        const keyCode = e.code;
-        if (!ScrollCodesValues.includes(keyCode as any)) return;
-        if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
-        e.preventDefault(); // 不触发键盘默认的箭头事件
-
-        const { scrollTop, rowHeight, containerHeight, scrollHeight } = virtualScroll.value;
-        const { scrollLeft } = virtualScrollX.value;
-        const { headless, headerRowHeight } = props;
-
-        // 这里不用virtualScroll 中的pageSize，因为我需要上一页的最后一条放在下一页的第一条
-        const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
-        /** 表体的page */
-        const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
-        if (keyCode=== ScrollCodes.ArrowUp) {
-            scrollTo(scrollTop - rowHeight, null);
-        } else if (keyCode=== ScrollCodes.ArrowRight) {
-            scrollTo(null, scrollLeft + 50);
-        } else if (keyCode=== ScrollCodes.ArrowDown) {
-            scrollTo(scrollTop + rowHeight, null);
-        } else if (keyCode=== ScrollCodes.ArrowLeft) {
-            scrollTo(null, scrollLeft - 50);
-        } else if (keyCode=== ScrollCodes.PageUp) {
-            scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
-        } else if (keyCode=== ScrollCodes.PageDown) {
-            scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
-        } else if (keyCode=== ScrollCodes.Home) {
-            scrollTo(0, null);
-        } else if (keyCode=== ScrollCodes.End) {
-            scrollTo(scrollHeight, null);
-        }
-    }
-
-    function handleMouseEnter() {
-        isMouseOver = true;
-    }
-    function handleMouseLeave() {
-        isMouseOver = false;
-    }
-    /**
-     * 兜底。
-     * 是否存在不触发mouseEnter的时候？
-     */
-    function handleMouseDown() {
-        if (!isMouseOver) isMouseOver = true;
-    }
-}
+import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, watch } from 'vue';
+import { StkTableColumn } from './types';
+import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
+
+/** 翻页按键 */
+enum ScrollCodes {
+    ArrowUp = 'ArrowUp',
+    ArrowRight = 'ArrowRight',
+    ArrowDown = 'ArrowDown',
+    ArrowLeft = 'ArrowLeft',
+    PageUp = 'PageUp',
+    PageDown = 'PageDown',
+    Home = 'Home',
+    End = 'End',
+}
+/** 所有翻页按键数组 */
+const ScrollCodesValues = Object.values(ScrollCodes);
+
+type Options<DT extends Record<string, any>> = {
+    props: any;
+    scrollTo: (y: number | null, x: number | null) => void;
+    virtualScroll: Ref<VirtualScrollStore>;
+    virtualScrollX: Ref<VirtualScrollXStore>;
+    tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
+    virtual_on: ComputedRef<boolean>;
+};
+/**
+ * 按下键盘箭头滚动。只有悬浮在表体上才能生效键盘。
+ *
+ * 在低版本浏览器中，虚拟滚动时，使用键盘滚动，等选中的行消失在视口外时，滚动会失效。
+ */
+export function useKeyboardArrowScroll<DT extends Record<string, any>>(
+    targetElement: Ref<HTMLElement | undefined>,
+    { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on }: Options<DT>,
+) {
+    /** 检测鼠标是否悬浮在表格体上 */
+    let isMouseOver = false;
+    watch(virtual_on, val => {
+        if (!val) {
+            removeListeners();
+        } else {
+            addEventListeners();
+        }
+    });
+
+    onMounted(addEventListeners);
+
+    onBeforeUnmount(removeListeners);
+
+    function addEventListeners() {
+        window.addEventListener('keydown', handleKeydown);
+        targetElement.value?.addEventListener('mouseenter', handleMouseEnter);
+        targetElement.value?.addEventListener('mouseleave', handleMouseLeave);
+        targetElement.value?.addEventListener('mousedown', handleMouseDown);
+    }
+
+    function removeListeners() {
+        window.removeEventListener('keydown', handleKeydown);
+        targetElement.value?.removeEventListener('mouseenter', handleMouseEnter);
+        targetElement.value?.removeEventListener('mouseleave', handleMouseLeave);
+        targetElement.value?.removeEventListener('mousedown', handleMouseDown);
+    }
+
+    /** 键盘按下事件 */
+    function handleKeydown(e: KeyboardEvent) {
+        if (!virtual_on.value) return; // 非虚拟滚动使用浏览器默认滚动
+        const keyCode = e.code;
+        if (!ScrollCodesValues.includes(keyCode as any)) return;
+        if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
+        e.preventDefault(); // 不触发键盘默认的箭头事件
+
+        const { scrollTop, rowHeight, containerHeight, scrollHeight } = virtualScroll.value;
+        const { scrollLeft } = virtualScrollX.value;
+        const { headless, headerRowHeight } = props;
+
+        // 这里不用virtualScroll 中的pageSize，因为我需要上一页的最后一条放在下一页的第一条
+        const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
+        /** 表体的page */
+        const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
+        if (keyCode=== ScrollCodes.ArrowUp) {
+            scrollTo(scrollTop - rowHeight, null);
+        } else if (keyCode=== ScrollCodes.ArrowRight) {
+            scrollTo(null, scrollLeft + 50);
+        } else if (keyCode=== ScrollCodes.ArrowDown) {
+            scrollTo(scrollTop + rowHeight, null);
+        } else if (keyCode=== ScrollCodes.ArrowLeft) {
+            scrollTo(null, scrollLeft - 50);
+        } else if (keyCode=== ScrollCodes.PageUp) {
+            scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
+        } else if (keyCode=== ScrollCodes.PageDown) {
+            scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
+        } else if (keyCode=== ScrollCodes.Home) {
+            scrollTo(0, null);
+        } else if (keyCode=== ScrollCodes.End) {
+            scrollTo(scrollHeight, null);
+        }
+    }
+
+    function handleMouseEnter() {
+        isMouseOver = true;
+    }
+    function handleMouseLeave() {
+        isMouseOver = false;
+    }
+    /**
+     * 兜底。
+     * 是否存在不触发mouseEnter的时候？
+     */
+    function handleMouseDown() {
+        if (!isMouseOver) isMouseOver = true;
+    }
+}

package/src/StkTable/useMaxRowSpan.ts

@@ -1,56 +1,56 @@
-import { ShallowRef } from "vue";
-import { PrivateStkTableColumn, RowKeyGen, UniqKey } from "./types";
-
-type Options = {
-    props:any,
-    tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
-    rowKeyGen: RowKeyGen;
-    dataSourceCopy: ShallowRef<any[]>;
-}
-
-export function useMaxRowSpan({ props, tableHeaderLast, rowKeyGen, dataSourceCopy }: Options) {
-    /** max rowspan of each row */
-    const maxRowSpan = new Map<UniqKey, number>();
-
-    /** 
-     * Use dataSourceCopy and tableHeaderLast to calculate maxRowSpan 
-     * @link {maxRowSpan}
-     */
-    function updateMaxRowSpan() {
-        if(!props.virtual) {
-            if(maxRowSpan.size) maxRowSpan.clear();
-            return;
-        }
-        maxRowSpan.clear();
-
-        const data = dataSourceCopy.value;
-        const columns = tableHeaderLast.value;
-
-        const columnsWithMerge = columns.filter(col => col.mergeCells);
-        if (!columnsWithMerge.length) return;
-
-        const dataLength = data.length;
-        const mergeColumnsLength = columnsWithMerge.length;
-
-        for (let rowIndex = 0; rowIndex < dataLength; rowIndex++) {
-            const row = data[rowIndex];
-            const rowKey = rowKeyGen(row);
-            let currentMax = maxRowSpan.get(rowKey) || 0;
-
-            for (let colIndex = 0; colIndex < mergeColumnsLength; colIndex++) {
-                const col = columnsWithMerge[colIndex];
-                const { rowspan = 1 } = col.mergeCells!({ row, col, rowIndex, colIndex }) || {};
-
-                if (rowspan > 1 && rowspan > currentMax) {
-                    currentMax = rowspan;
-                    maxRowSpan.set(rowKey, currentMax);
-                }
-            }
-        }
-    }
-
-    return {
-        maxRowSpan,
-        updateMaxRowSpan
-    }
+import { ShallowRef } from "vue";
+import { PrivateStkTableColumn, RowKeyGen, UniqKey } from "./types";
+
+type Options = {
+    props:any,
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
+    rowKeyGen: RowKeyGen;
+    dataSourceCopy: ShallowRef<any[]>;
+}
+
+export function useMaxRowSpan({ props, tableHeaderLast, rowKeyGen, dataSourceCopy }: Options) {
+    /** max rowspan of each row */
+    const maxRowSpan = new Map<UniqKey, number>();
+
+    /** 
+     * Use dataSourceCopy and tableHeaderLast to calculate maxRowSpan 
+     * @link {maxRowSpan}
+     */
+    function updateMaxRowSpan() {
+        if(!props.virtual) {
+            if(maxRowSpan.size) maxRowSpan.clear();
+            return;
+        }
+        maxRowSpan.clear();
+
+        const data = dataSourceCopy.value;
+        const columns = tableHeaderLast.value;
+
+        const columnsWithMerge = columns.filter(col => col.mergeCells);
+        if (!columnsWithMerge.length) return;
+
+        const dataLength = data.length;
+        const mergeColumnsLength = columnsWithMerge.length;
+
+        for (let rowIndex = 0; rowIndex < dataLength; rowIndex++) {
+            const row = data[rowIndex];
+            const rowKey = rowKeyGen(row);
+            let currentMax = maxRowSpan.get(rowKey) || 0;
+
+            for (let colIndex = 0; colIndex < mergeColumnsLength; colIndex++) {
+                const col = columnsWithMerge[colIndex];
+                const { rowspan = 1 } = col.mergeCells!({ row, col, rowIndex, colIndex }) || {};
+
+                if (rowspan > 1 && rowspan > currentMax) {
+                    currentMax = rowspan;
+                    maxRowSpan.set(rowKey, currentMax);
+                }
+            }
+        }
+    }
+
+    return {
+        maxRowSpan,
+        updateMaxRowSpan
+    }
 }

package/src/StkTable/useMergeCells.ts

@@ -1,123 +1,120 @@
-import { Ref, ref, ShallowRef, watch } from 'vue';
-import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowActiveOption, RowKeyGen, UniqKey } from './types';
-import { pureCellKeyGen } from './utils';
-type Options = {
-    rowActiveProp: Ref<RowActiveOption<any>>;
-    tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
-    rowKeyGen: RowKeyGen;
-    colKeyGen: ColKeyGen;
-    virtual_dataSourcePart: ShallowRef<any[]>;
-};
-export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart }: Options) {
-    /**
-     * which cell need be hidden
-     * - key: rowKey
-     * - value: colKey Set
-     */
-    const hiddenCellMap = ref<Record<UniqKey, Set<UniqKey>>>({});
-    /**
-     * hover other row and rowspan cell should be highlighted
-     * - key: rowKey
-     * - value: cellKey Set
-     */
-    const hoverRowMap = ref<Record<UniqKey, Set<string>>>({});
-
-    /** hover current row , which rowspan cells should be highlight */
-    const hoverMergedCells = ref(new Set<string>());
-    /** click current row , which rowspan cells should be highlight */
-    const activeMergedCells = ref(new Set<string>());
-
-    watch([virtual_dataSourcePart, tableHeaderLast], () => {
-        hiddenCellMap.value = {};
-        hoverRowMap.value = {};
-    });
-
-    /**
-     * abstract the logic of hiding cells
-     */
-    function hideCells(rowKey: UniqKey, colKey: UniqKey, colspan: number, isSelfRow = false, mergeCellKey: string) {
-        const startIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
-
-        for (let i = startIndex; i < startIndex + colspan; i++) {
-            if(!isSelfRow) {
-                // if other row hovered, the rowspan cell need to be highlight
-                if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = new Set();
-                hoverRowMap.value[rowKey].add(mergeCellKey);
-            }
-            if (isSelfRow && i === startIndex) {
-                // self row start cell does not need to be hidden
-                continue;
-            }
-            const nextCol = tableHeaderLast.value[i];
-            if (!nextCol) break;
-            const nextColKey = colKeyGen.value(nextCol);
-            if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = new Set();
-            hiddenCellMap.value[rowKey].add(nextColKey);
-
-        }
-    }
-
-    /**
-     * calculate colspan and rowspan
-     * @param row
-     * @param col
-     * @param rowIndex
-     * @param colIndex
-     * @returns
-     */
-    function mergeCellsWrapper(
-        row: MergeCellsParam<any>['row'],
-        col: MergeCellsParam<any>['col'],
-        rowIndex: MergeCellsParam<any>['rowIndex'],
-        colIndex: MergeCellsParam<any>['colIndex'],
-    ): { colspan?: number; rowspan?: number } | undefined {
-        if (!col.mergeCells) return;
-
-        let { colspan, rowspan } = col.mergeCells({ row, col, rowIndex, colIndex }) || {};
-
-        // default colspan and rowspan is 1
-        colspan = colspan || 1;
-        rowspan = rowspan || 1;
-
-        if (colspan === 1 && rowspan === 1) return;
-
-        const rowKey = rowKeyGen(row);
-
-        const curRowIndex = virtual_dataSourcePart.value.findIndex(item => rowKeyGen(item) === rowKey);
-        if (curRowIndex === -1) return;
-
-        const colKey = colKeyGen.value(col);
-        const mergedCellKey = pureCellKeyGen(rowKey, colKey);
-
-        for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
-            const row = virtual_dataSourcePart.value[i];
-            if (!row) break;
-            hideCells(rowKeyGen(row), colKey, colspan, i === curRowIndex, mergedCellKey);
-        }
-
-        return { colspan, rowspan };
-    }
-
-    const emptySet = new Set<string>();
-    function updateHoverMergedCells(rowKey: UniqKey | undefined) {
-        hoverMergedCells.value = rowKey === void 0 ? emptySet : hoverRowMap.value[rowKey] || emptySet;
-    }
-
-    function updateActiveMergedCells(clear?: boolean, rowKey?: UniqKey) {
-        if (!rowActiveProp.value.enabled) return;
-        if (clear) {
-            activeMergedCells.value.clear();
-            return;
-        }
-        activeMergedCells.value = (rowKey !== void 0 && hoverRowMap.value[rowKey]) || new Set(hoverMergedCells.value);
-    }
-
-    return {
-        hiddenCellMap,
-        mergeCellsWrapper,
-        hoverMergedCells,
-        updateHoverMergedCells,
-        activeMergedCells,
-        updateActiveMergedCells,
-    };
-}
+import { Ref, ref, ShallowRef, watch } from 'vue';
+import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowActiveOption, RowKeyGen, UniqKey } from './types';
+import { pureCellKeyGen } from './utils';
+type Options = {
+    rowActiveProp: Ref<RowActiveOption<any>>;
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
+    rowKeyGen: RowKeyGen;
+    colKeyGen: ColKeyGen;
+    virtual_dataSourcePart: ShallowRef<any[]>;
+};
+export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart }: Options) {
+    /**
+     * which cell need be hidden
+     * - key: rowKey
+     * - value: colKey Set
+     */
+    const hiddenCellMap = ref<Record<UniqKey, Set<UniqKey>>>({});
+    /**
+     * hover other row and rowspan cell should be highlighted
+     * - key: rowKey
+     * - value: cellKey Set
+     */
+    const hoverRowMap = ref<Record<UniqKey, Set<string>>>({});
+
+    /** hover current row , which rowspan cells should be highlight */
+    const hoverMergedCells = ref(new Set<string>());
+    /** click current row , which rowspan cells should be highlight */
+    const activeMergedCells = ref(new Set<string>());
+
+    watch([virtual_dataSourcePart, tableHeaderLast], () => {
+        hiddenCellMap.value = {};
+        hoverRowMap.value = {};
+    });
+
+    /**
+     * abstract the logic of hiding cells
+     */
+    function hideCells(rowKey: UniqKey, colKey: UniqKey, colspan: number, isSelfRow = false, mergeCellKey: string) {
+        const startIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
+
+        for (let i = startIndex; i < startIndex + colspan; i++) {
+            // if other row hovered, the rowspan cell need to be highlight
+            if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = new Set();
+            hoverRowMap.value[rowKey].add(mergeCellKey);
+            if (isSelfRow && i === startIndex) {
+                // self row start cell does not need to be hidden
+                continue;
+            }
+            const nextCol = tableHeaderLast.value[i];
+            if (!nextCol) break;
+            const nextColKey = colKeyGen.value(nextCol);
+            if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = new Set();
+            hiddenCellMap.value[rowKey].add(nextColKey);
+        }
+    }
+
+    /**
+     * calculate colspan and rowspan
+     * @param row
+     * @param col
+     * @param rowIndex
+     * @param colIndex
+     * @returns
+     */
+    function mergeCellsWrapper(
+        row: MergeCellsParam<any>['row'],
+        col: MergeCellsParam<any>['col'],
+        rowIndex: MergeCellsParam<any>['rowIndex'],
+        colIndex: MergeCellsParam<any>['colIndex'],
+    ): { colspan?: number; rowspan?: number } | undefined {
+        if (!col.mergeCells) return;
+
+        let { colspan, rowspan } = col.mergeCells({ row, col, rowIndex, colIndex }) || {};
+
+        // default colspan and rowspan is 1
+        colspan = colspan || 1;
+        rowspan = rowspan || 1;
+
+        if (colspan === 1 && rowspan === 1) return;
+
+        const rowKey = rowKeyGen(row);
+
+        const curRowIndex = virtual_dataSourcePart.value.findIndex(item => rowKeyGen(item) === rowKey);
+        if (curRowIndex === -1) return;
+
+        const colKey = colKeyGen.value(col);
+        const mergedCellKey = pureCellKeyGen(rowKey, colKey);
+
+        for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
+            const row = virtual_dataSourcePart.value[i];
+            if (!row) break;
+            hideCells(rowKeyGen(row), colKey, colspan, i === curRowIndex, mergedCellKey);
+        }
+
+        return { colspan, rowspan };
+    }
+
+    const emptySet = new Set<string>();
+    function updateHoverMergedCells(rowKey: UniqKey | undefined) {
+        hoverMergedCells.value = rowKey === void 0 ? emptySet : hoverRowMap.value[rowKey] || emptySet;
+    }
+
+    function updateActiveMergedCells(clear?: boolean, rowKey?: UniqKey) {
+        if (!rowActiveProp.value.enabled) return;
+        if (clear) {
+            activeMergedCells.value = new Set();
+            return;
+        }
+        activeMergedCells.value = (rowKey !== void 0 && hoverRowMap.value[rowKey]) || new Set(hoverMergedCells.value);
+    }
+
+    return {
+        hiddenCellMap,
+        mergeCellsWrapper,
+        hoverMergedCells,
+        updateHoverMergedCells,
+        activeMergedCells,
+        updateActiveMergedCells,
+    };
+}