stk-table-vue 0.7.1 → 0.8.0

package/src/StkTable/useHighlight.ts

@@ -1,8 +1,8 @@
-// import { interpolateRgb } from 'd3-interpolate';
 import { Ref, computed } from 'vue';
 import { HIGHLIGHT_CELL_CLASS, HIGHLIGHT_COLOR, HIGHLIGHT_DURATION, HIGHLIGHT_ROW_CLASS } from './const';
 import { HighlightConfig, UniqKey } from './types';
 import { HighlightDimCellOption, HighlightDimRowOption } from './types/highlightDimOptions';
+import { pureCellKeyGen } from './utils';
 
 type Params = {
     props: any;
@@ -40,18 +40,6 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
     const highlightSteps = computed(() => (highlightFrequency.value ? Math.round(highlightDuration.value / highlightFrequency.value) : null));
     /** 高亮开始 */
     const highlightFrom = computed(() => highlightColor[props.theme as 'light' | 'dark'].from);
-    /** 高亮结束 */
-    // const highlightTo = computed(() => highlightColor[props.theme as 'light' | 'dark'].to);
-    // const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
-
-    /**
-     * 存放高亮行的状态-使用js计算颜色
-     * @key 行唯一键
-     * @value 记录高亮开始时间
-     */
-    // const highlightDimRowsJs = new Map<UniqKey, number>();
-    /** 是否正在计算高亮行的循环-使用js计算颜色 */
-    // const calcHighlightDimLoopJs = false;
 
     /**
      * 存放高亮行的状态-使用animation api实现
@@ -85,7 +73,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
         const recursion = () => {
             window.requestAnimationFrame(
                 () => {
-                    const nowTs = Date.now();
+                    const nowTs = performance.now();
                     highlightDimRowsAnimation.forEach((store, rowKeyValue) => {
                         const { ts, duration } = store;
                         const timeOffset = nowTs - ts;
@@ -110,59 +98,24 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
         recursion();
     }
 
-    /**
-     * js计算高亮渐暗颜色的循环
-     */
-    // function calcRowHighlightLoopJs() {
-    //     if (calcHighlightDimLoopJs) return;
-    //     calcHighlightDimLoopJs = true;
-    //     // js计算gradient
-    //     const recursion = () => {
-    //         window.setTimeout(() => {
-    //             const nowTs = Date.now();
-    //             highlightDimRowsJs.forEach((highlightStart, rowKeyValue) => {
-    //                 /** 经过的时间 ÷ 高亮持续时间 计算出 颜色过渡进度 (0-1) */
-    //                 const progress = (nowTs - highlightStart) / highlightDuration;
-    //                 let bgc = '';
-    //                 if (0 <= progress && progress <= 1) {
-    //                     bgc = highlightInter.value(progress);
-    //                 } else {
-    //                     highlightDimRowsJs.delete(rowKeyValue);
-    //                 }
-    //                 updateRowBgcJs(rowKeyValue, bgc);
-    //             });
-
-    //             if (highlightDimRowsJs.size > 0) {
-    //                 // 还有高亮的行,则下一次循环
-    //                 recursion();
-    //             } else {
-    //                 // 没有则停止循环
-    //                 calcHighlightDimLoopJs = false;
-    //                 highlightDimRowsJs.clear(); // TODO: 是否需要 清除
-    //             }
-    //         }, highlightFrequency || HIGHLIGHT_FREQ);
-    //     };
-    //     recursion();
-    // }
-
     /**
      * 高亮一个单元格。暂不支持虚拟滚动高亮状态记忆。
      * @param rowKeyValue 一行的key
      * @param colKeyValue 列key
      * @param options.method css-使用css渲染，animation-使用animation api。默认animation;
      * @param option.className 自定义css动画的class。
-     * @param option.keyframe 同Keyframe https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
+     * @param option.keyframe 如果自定义keyframe，则 highlightConfig.fps 将会失效。Keyframe：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
      * @param option.duration 动画时长。method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。
      */
     function setHighlightDimCell(rowKeyValue: UniqKey, colKeyValue: string, option: HighlightDimCellOption = {}) {
-        const cellEl = tableContainerRef.value?.querySelector<HTMLElement>(`[data-cell-key="${rowKeyValue}--${colKeyValue}"]`);
+        const cellEl = tableContainerRef.value?.querySelector<HTMLElement>(`[data-cell-key="${pureCellKeyGen(rowKeyValue, colKeyValue)}"]`);
+        if (!cellEl) return;
         const { className, method, duration, keyframe } = {
             className: HIGHLIGHT_CELL_CLASS,
             method: 'animation',
             ...defaultHighlightDimOption.value,
             ...option,
         };
-        if (!cellEl) return;
         if (method === 'animation') {
             cellEl.animate(keyframe, duration);
         } else {
@@ -175,11 +128,12 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
      * @param rowKeyValues 行唯一键的数组
      * @param option.method css-使用css渲染，animation-使用animation api，js-使用js计算颜色。默认animation
      * @param option.className 自定义css动画的class。
-     * @param option.keyframe 同Keyframe。 https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
+     * @param option.keyframe 如果自定义keyframe，则 highlightConfig.fps 将会失效。Keyframe：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats。
      * @param option.duration 动画时长。method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。。
      */
     function setHighlightDimRow(rowKeyValues: UniqKey[], option: HighlightDimRowOption = {}) {
         if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
+        if (!rowKeyValues.length) return;
         const { className, method, keyframe, duration } = {
             className: HIGHLIGHT_ROW_CLASS,
             method: 'animation',
@@ -187,13 +141,10 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
             ...option,
         };
 
-        if (method === 'css') {
-            // -------- use css keyframe
-            highlightRowsInCssKeyframe(rowKeyValues, className, duration);
-        } else if (method === 'animation') {
+        if (method === 'animation') {
             if (props.virtual) {
                 // -------- 用animation 接口实现动画
-                const nowTs = Date.now();
+                const nowTs = performance.now();
                 for (let i = 0; i < rowKeyValues.length; i++) {
                     const rowKeyValue = rowKeyValues[i];
                     const store: HighlightDimRowStore = { ts: nowTs, visible: false, keyframe, duration };
@@ -209,17 +160,10 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
                     rowEl.animate(keyframe, duration);
                 }
             }
+        } else {
+            // -------- use css keyframe
+            highlightRowsInCssKeyframe(rowKeyValues, className, duration);
         }
-        //  else if (method === 'js') {
-        //     // -------- 用js计算颜色渐变的高亮方案
-        //     const nowTs = Date.now();
-        //     for (let i = 0; i < rowKeyValues.length; i++) {
-        //         const rowKeyValue = rowKeyValues[i];
-        //         highlightDimRowsJs.set(rowKeyValue, nowTs);
-        //         updateRowBgcJs(rowKeyValue, highlightFrom.value);
-        //     }
-        //     calcRowHighlightLoopJs();
-        // }
     }
 
     /**
@@ -305,13 +249,6 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
         }
     }
 
-    /** 更新行状态 */
-    // function updateRowBgcJs(rowKeyValue: UniqKey, color: string) {
-    //     const rowEl = document.getElementById(stkTableId + '-' + String(rowKeyValue));
-    //     if (!rowEl) return;
-    //     rowEl.style.backgroundColor = color;
-    // }
-
     return {
         highlightSteps,
         setHighlightDimRow,

package/src/StkTable/useMergeCells.ts

@@ -0,0 +1,125 @@
+import { ref, ShallowRef, watch } from 'vue';
+import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
+import { pureCellKeyGen } from './utils';
+
+export function useMergeCells({
+    props,
+    tableHeaderLast,
+    rowKeyGen,
+    colKeyGen,
+    virtual_dataSourcePart,
+}: {
+    props: any;
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
+    rowKeyGen: RowKeyGen;
+    colKeyGen: ColKeyGen;
+    virtual_dataSourcePart: ShallowRef<any[]>;
+}) {
+    /**
+     * 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 = {};
+    });
+
+    /** 抽象隐藏单元格的逻辑 */
+    function hideCells(rowKey: UniqKey, startIndex: number, count: number, isSelfRow = false, mergeCellKey: string) {
+        for (let i = startIndex; i < startIndex + count; i++) {
+            if (!isSelfRow || i !== startIndex) {
+                // 自己不需要隐藏
+                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);
+            }
+
+            // 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);
+        }
+    }
+
+    /**
+     * 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 colKey = colKeyGen.value(col);
+        const dataSourceSlice = virtual_dataSourcePart.value.slice();
+        const curColIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
+        const curRowIndex = dataSourceSlice.findIndex(item => rowKeyGen(item) === rowKey);
+        const mergedCellKey = pureCellKeyGen(rowKey, colKey);
+
+        if (curRowIndex === -1) return;
+
+        for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
+            const row = dataSourceSlice[i];
+            if (!row) break;
+            const rKey = rowKeyGen(row);
+            const isSelfRow = i === curRowIndex;
+            hideCells(rKey, curColIndex, colspan, isSelfRow, mergedCellKey);
+        }
+
+        return { colspan, rowspan };
+    }
+
+    function updateHoverMergedCells(rowKey: UniqKey | undefined) {
+        const set = rowKey === void 0 ? null : hoverRowMap.value[rowKey];
+        hoverMergedCells.value = set || new Set();
+    }
+
+    function updateActiveMergedCells(clear?: boolean) {
+        if (!props.rowActive) return;
+        if (clear) {
+            activeMergedCells.value.clear();
+        } else {
+            activeMergedCells.value = new Set(hoverMergedCells.value);
+        }
+    }
+
+    return {
+        hiddenCellMap,
+        mergeCellsWrapper,
+        hoverMergedCells,
+        updateHoverMergedCells,
+        activeMergedCells,
+        updateActiveMergedCells,
+    };
+}

package/src/StkTable/useRowExpand.ts

@@ -1,9 +1,9 @@
 import { ShallowRef } from 'vue';
-import { ExpandedRow, PrivateRowDT, StkTableColumn, UniqKey } from './types';
+import { ExpandedRow, PrivateRowDT, RowKeyGen, StkTableColumn, UniqKey } from './types';
 import { EXPANDED_ROW_KEY_PREFIX } from './const';
 type DT = PrivateRowDT;
 type Option<DT extends Record<string, any>> = {
-    rowKeyGen: (row: any) => UniqKey;
+    rowKeyGen: RowKeyGen;
     dataSourceCopy: ShallowRef<DT[]>;
     emits: any;
 };

package/src/StkTable/useScrollRowByRow.ts

@@ -0,0 +1,79 @@
+import { computed, Ref, ref, onMounted, onUnmounted, watch } from 'vue';
+
+type Params = {
+    props: any;
+    tableContainerRef: Ref<HTMLElement | undefined>;
+};
+
+export function useScrollRowByRow({ props, tableContainerRef }: Params) {
+    let isMouseDown = false;
+    let isAddListeners = false;
+    /** record the last scroll bar position */
+    let lastScrollTop = 0;
+
+    /** record is the scroll bar is dragging */
+    const isDragScroll = ref(false);
+    const onlyDragScroll = computed(() => props.scrollRowByRow === 'scrollbar');
+
+    /** is ScrollRowByRow active */
+    const isSRBRActive = computed(() => {
+        if (onlyDragScroll.value) {
+            return isDragScroll.value;
+        }
+        return props.scrollRowByRow;
+    });
+
+    watch(onlyDragScroll, v => {
+        if (v) {
+            addEventListener();
+        } else {
+            removeEventListener();
+        }
+    });
+
+    onMounted(() => {
+        addEventListener();
+    });
+
+    onUnmounted(() => {
+        removeEventListener();
+    });
+
+    function addEventListener() {
+        if (isAddListeners || !onlyDragScroll.value) return;
+        const container = tableContainerRef.value;
+        if (!container) return;
+        container.addEventListener('mousedown', handleMouseDown);
+        container.addEventListener('mouseup', handleMouseUp);
+        container.addEventListener('scroll', handleScroll);
+        isAddListeners = true;
+    }
+
+    function removeEventListener() {
+        const container = tableContainerRef.value;
+        if (!container) return;
+        container.removeEventListener('mousedown', handleMouseDown);
+        container.removeEventListener('mouseup', handleMouseUp);
+        container.removeEventListener('scroll', handleScroll);
+        isAddListeners = false;
+    }
+
+    function handleMouseDown(e: Event) {
+        isMouseDown = true;
+        lastScrollTop = (e.target as HTMLElement).scrollTop;
+    }
+
+    function handleMouseUp() {
+        isMouseDown = false;
+        isDragScroll.value = false;
+        lastScrollTop = 0;
+    }
+
+    function handleScroll(e: Event) {
+        const scrollTop = (e.target as HTMLElement).scrollTop;
+        // if scrollTop === lastScrollTop means horizontal scroll
+        if (!isMouseDown || scrollTop === lastScrollTop) return;
+        isDragScroll.value = true;
+    }
+    return { isSRBRActive, isDragScroll };
+}

package/src/StkTable/useThDrag.ts

@@ -1,17 +1,17 @@
-import { computed, ComputedRef } from 'vue';
-import { StkTableColumn, UniqKey } from './types';
+import { computed } from 'vue';
+import { ColKeyGen, StkTableColumn } from './types';
 import { isEmptyValue } from './utils';
 
-type Params<T extends Record<string, any>> = {
+type Params = {
     props: any;
     emits: any;
-    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
+    colKeyGen: ColKeyGen;
 };
 /**
  * 列顺序拖动
  * @returns
  */
-export function useThDrag<DT extends Record<string, any>>({ props, emits, colKeyGen }: Params<DT>) {
+export function useThDrag({ props, emits, colKeyGen }: Params) {
     const findParentTH = (e: DragEvent) => (e.target as HTMLElement).closest('th');
 
     const dragConfig = computed(() => {
@@ -97,6 +97,6 @@ export function useThDrag<DT extends Record<string, any>>({ props, emits, colKey
         onThDragOver,
         onThDrop,
         /** 是否可拖拽 */
-        isHeaderDraggable: (col: StkTableColumn<DT>) => dragConfig.value.draggable && !dragConfig.value.disabled(col),
+        isHeaderDraggable: (col: StkTableColumn<any>) => dragConfig.value.draggable && !dragConfig.value.disabled(col),
     };
 }

package/src/StkTable/useTree.ts

@@ -1,10 +1,10 @@
 import { ShallowRef } from 'vue';
-import { PrivateRowDT, TreeConfig, UniqKey } from './types';
+import { PrivateRowDT, RowKeyGen, TreeConfig, UniqKey } from './types';
 
 type DT = PrivateRowDT & { children?: DT[] };
 type Option<DT extends Record<string, any>> = {
     props: any;
-    rowKeyGen: (row: any) => UniqKey;
+    rowKeyGen: RowKeyGen;
     dataSourceCopy: ShallowRef<DT[]>;
     emits: any;
 };

package/src/StkTable/useVirtualScroll.ts

@@ -1,6 +1,6 @@
 import { Ref, ShallowRef, computed, ref } from 'vue';
 import { DEFAULT_ROW_HEIGHT, DEFAULT_TABLE_HEIGHT, DEFAULT_TABLE_WIDTH } from './const';
-import { AutoRowHeightConfig, StkTableColumn, UniqKey } from './types';
+import { AutoRowHeightConfig, PrivateStkTableColumn, RowKeyGen, StkTableColumn, UniqKey } from './types';
 import { getCalculatedColWidth } from './utils/constRefUtils';
 
 type Option<DT extends Record<string, any>> = {
@@ -8,9 +8,9 @@ type Option<DT extends Record<string, any>> = {
     tableContainerRef: Ref<HTMLElement | undefined>;
     trRef: Ref<HTMLTableRowElement[] | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
-    tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
-    tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
-    rowKeyGen: (row: any) => UniqKey;
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<DT>[]>;
+    tableHeaders: ShallowRef<PrivateStkTableColumn<DT>[][]>;
+    rowKeyGen: RowKeyGen;
 };
 
 /** 暂存纵向虚拟滚动的数据 */
@@ -133,8 +133,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         const tableHeaderLastValue = tableHeaderLast.value;
         if (virtualX_on.value) {
             // 虚拟横向滚动，固定列要一直保持存在
-            const leftCols: StkTableColumn<DT>[] = [];
-            const rightCols: StkTableColumn<DT>[] = [];
+            const leftCols: PrivateStkTableColumn<DT>[] = [];
+            const rightCols: PrivateStkTableColumn<DT>[] = [];
             /**
              * 存在问题：
              * table columns 从多到少时。比方原来的start=5,end=10，现在start=4,end=8。这时候endIndex就超出数组范围了。

package/src/StkTable/utils/index.ts

@@ -1,4 +1,5 @@
-import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../types';
+import { CELL_KEY_SEPARATE } from '../const';
+import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKey } from '../types';
 
 /** 是否空值 */
 export function isEmptyValue(val: any, isNumber?: boolean) {
@@ -222,3 +223,7 @@ export function getBrowsersVersion(browserName: string) {
     }
     return 100;
 }
+
+export function pureCellKeyGen(rowKey: UniqKey, colKey: UniqKey) {
+    return rowKey + CELL_KEY_SEPARATE + colKey;
+}