npm - stk-table-vue - Versions diffs - 0.11.7 → 0.11.8 - Mend

stk-table-vue 0.11.7 → 0.11.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/README.md +9 -8
package/lib/index-C40Rz-HL.js +1 -1
package/lib/src/StkTable/types/index.d.ts +6 -5
package/lib/src/StkTable/useColResize.d.ts +1 -1
package/lib/src/StkTable/useVirtualScroll.d.ts +1 -1
package/lib/src/StkTable/utils/index.d.ts +1 -0
package/lib/stk-table-vue.js +114 -72
package/lib/style.css +1 -1
package/package.json +18 -9
package/src/StkTable/StkTable.vue +9 -1
package/src/StkTable/types/index.ts +7 -5
package/src/StkTable/useColResize.ts +7 -5
package/src/StkTable/useHighlight.ts +3 -1
package/src/StkTable/useKeyboardArrowScroll.ts +15 -13
package/src/StkTable/useMergeCells.ts +2 -2
package/src/StkTable/useScrollbar.ts +16 -6
package/src/StkTable/useVirtualScroll.ts +69 -34
package/src/StkTable/utils/index.ts +12 -2

package/README.md CHANGED Viewed

@@ -12,21 +12,22 @@
     </p>
 </p>
-> Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
->
-> Used for real-time data display, with data highlighting and dynamic effects
->
-> Support Vue3 and Vue2.7
+Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
+Smooth performance with tens of thousands of rows
+Used for real-time data display, with data highlighting and dynamic effects.
+Support Vue3 and Vue2.7
 ## Documentation
-### [Stk Table Vue Official en](https://ja-plus.github.io/stk-table-vue/en/)
-### [Stk Table Vue Official zh-CN](https://ja-plus.github.io/stk-table-vue/)
+### [Stk Table Vue Official](https://ja-plus.github.io/stk-table-vue/)
 ## Repo:
 - [Github](https://github.com/ja-plus/stk-table-vue)
-- [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
+- [Gitee](https://gitee.com/japlus/stk-table-vue)
 ## Demo
 [<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)

package/lib/index-C40Rz-HL.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.6
+ * version: v0.11.8
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

package/lib/src/StkTable/types/index.d.ts CHANGED Viewed

@@ -254,12 +254,13 @@ export type SortConfig<T extends Record<string, any>> = {
     multiSortLimit?: number;
 };
 /** th td type */
-export declare const enum TagType {
-    TH = 0,
-    TD = 1,
+export declare const TagType: {
+    readonly TH: 0;
+    readonly TD: 1;
     /** tfoot */
-    TF = 2
-}
+    readonly TF: 2;
+};
+export type TagType = (typeof TagType)[keyof typeof TagType];
 export type HighlightConfig = {
     /** Duration of the highlight in seconds */
     duration?: number;

package/lib/src/StkTable/useColResize.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ import { ComputedRef, Ref, ShallowRef } from 'vue';
 import { StkTableColumn, UniqKey } from './types';
 /** 列宽拖动 */
-export declare function useColResize<DT extends Record<string, any>>(props: any, emits: any, tableContainerRef: Ref<HTMLElement | undefined>, tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>, colResizeIndicatorRef: Ref<HTMLElement | undefined>, colKeyGen: ComputedRef<(p: any) => UniqKey>, fixedCols: Ref<StkTableColumn<DT>[]>): readonly [ComputedRef<((col: StkTableColumn<DT>) => boolean) | (() => any)>, Ref<boolean, boolean>, (e: MouseEvent, col: StkTableColumn<DT>, leftHandle?: boolean) => void];
+export declare function useColResize<DT extends Record<string, any>>(props: any, emits: any, tableContainerRef: Ref<HTMLElement | undefined>, tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>, colResizeIndicatorRef: Ref<HTMLElement | undefined>, colKeyGen: ComputedRef<(p: any) => UniqKey>, fixedCols: Ref<StkTableColumn<DT>[]>, onColWidthChange?: () => void): readonly [ComputedRef<((col: StkTableColumn<DT>) => boolean) | (() => any)>, Ref<boolean, boolean>, (e: MouseEvent, col: StkTableColumn<DT>, leftHandle?: boolean) => void];

package/lib/src/StkTable/useVirtualScroll.d.ts CHANGED Viewed

@@ -75,4 +75,4 @@ export declare function useVirtualScroll(props: any, tableContainerRef: Ref<HTML
     endIndex: number;
     offsetLeft: number;
     scrollLeft: number;
-}>, import('vue').ComputedRef<any>, import('vue').ComputedRef<PrivateRowDT[]>, import('vue').ComputedRef<number>, import('vue').ComputedRef<any>, import('vue').ComputedRef<PrivateStkTableColumn<PrivateRowDT>[]>, import('vue').ComputedRef<number>, import('vue').ComputedRef<number>, (height?: number) => void, (height?: number) => void, () => void, (sTop?: number) => void, (sLeft?: number) => void, (rowKey: UniqKey, height?: number | null) => void, () => void];
+}>, import('vue').ComputedRef<any>, import('vue').ComputedRef<PrivateRowDT[]>, import('vue').ComputedRef<number>, import('vue').ComputedRef<any>, import('vue').ComputedRef<PrivateStkTableColumn<PrivateRowDT>[]>, import('vue').ComputedRef<number>, import('vue').ComputedRef<number>, (height?: number) => void, (height?: number) => void, () => void, (sTop?: number) => void, (sLeft?: number) => void, (rowKey: UniqKey, height?: number | null) => void, () => void, () => void];

package/lib/src/StkTable/utils/index.d.ts CHANGED Viewed

@@ -68,3 +68,4 @@ export declare function throttle<T extends (...args: any[]) => any>(fn: T, delay
  * @returns A throttled function that executes on the next animation frame
  */
 export declare function rafThrottle<T extends (...args: any[]) => any>(fn: T): (...args: Parameters<T>) => void;
+export declare function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;

package/lib/stk-table-vue.js CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v0.11.6
+ * version: v0.11.8
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
-import { createElementBlock, openBlock, createElementVNode, defineComponent, normalizeStyle, createBlock, createCommentVNode, toDisplayString, ref, computed, onMounted, onBeforeUnmount, watch, shallowRef, onUnmounted, nextTick, customRef, toRaw, provide, toRef, normalizeClass, unref, renderSlot, Fragment, renderList, mergeProps, resolveDynamicComponent, withCtx, createTextVNode, createVNode, createApp, markRaw, getCurrentInstance, h } from "vue";
+import { createElementBlock, openBlock, createElementVNode, defineComponent, normalizeStyle, createBlock, createCommentVNode, toDisplayString, ref, computed, onMounted, onBeforeUnmount, watch, shallowRef, nextTick, customRef, onUnmounted, toRaw, provide, toRef, normalizeClass, unref, renderSlot, Fragment, renderList, mergeProps, resolveDynamicComponent, withCtx, createTextVNode, createVNode, createApp, markRaw, getCurrentInstance, h } from "vue";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -253,7 +253,7 @@ function getClosestColKey(target) {
 function throttle(fn, delay) {
   let timer;
   let lastArgs = null;
-  const callFn = function() {
+  const callFn = () => {
     if (lastArgs) {
       fn(...lastArgs);
       lastArgs = null;
@@ -273,7 +273,7 @@ function throttle(fn, delay) {
 function rafThrottle(fn) {
   let rafId = null;
   let lastArgs = null;
-  const callFn = function() {
+  const callFn = () => {
     if (lastArgs) {
       fn(...lastArgs);
       lastArgs = null;
@@ -886,12 +886,12 @@ function registerFeature(feature) {
     ON_DEMAND_FEATURE[fnName] = f;
   });
 }
-var TagType = /* @__PURE__ */ ((TagType2) => {
-  TagType2[TagType2["TH"] = 0] = "TH";
-  TagType2[TagType2["TD"] = 1] = "TD";
-  TagType2[TagType2["TF"] = 2] = "TF";
-  return TagType2;
-})(TagType || {});
+const TagType = {
+  TH: 0,
+  TD: 1,
+  /** tfoot */
+  TF: 2
+};
 function useAutoResize(tableContainerRef, initVirtualScroll, props, debounceMs) {
   let resizeObserver = null;
   let isObserved = false;
@@ -965,7 +965,7 @@ function useAutoResize(tableContainerRef, initVirtualScroll, props, debounceMs)
     }, debounceMs);
   }
 }
-function useColResize(props, emits, tableContainerRef, tableHeaderLast, colResizeIndicatorRef, colKeyGen, fixedCols) {
+function useColResize(props, emits, tableContainerRef, tableHeaderLast, colResizeIndicatorRef, colKeyGen, fixedCols, onColWidthChange) {
   const isColResizing = ref(false);
   let colResizeState = {
     currentCol: null,
@@ -1062,10 +1062,12 @@ function useColResize(props, emits, tableContainerRef, tableHeaderLast, colResiz
     if (width < props.colMinWidth) width = props.colMinWidth;
     const colKey = colKeyGen.value;
     const curCol = tableHeaderLast.value.find((it) => colKey(it) === colKey(lastCol));
-    if (!curCol) return;
-    curCol.width = width + "px";
-    emits("update:columns", props.columns.slice());
-    emits("col-resize", { ...curCol });
+    if (curCol) {
+      curCol.width = width + "px";
+      onColWidthChange == null ? void 0 : onColWidthChange();
+      emits("update:columns", props.columns.slice());
+      emits("col-resize", { ...curCol });
+    }
     if (colResizeIndicatorRef.value) {
       const style = colResizeIndicatorRef.value.style;
       style.display = "none";
@@ -1276,15 +1278,17 @@ function useHighlight(props, stkTableId, tableContainerRef) {
       window.requestAnimationFrame(
         () => {
           const nowTs = performance.now();
+          const keysToDelete = [];
           highlightDimRowsAnimation.forEach((store, rowKeyValue) => {
             const { ts, duration } = store;
             const timeOffset = nowTs - ts;
             if (timeOffset < duration) {
               updateRowAnimation(rowKeyValue, store, timeOffset);
             } else {
-              highlightDimRowsAnimation.delete(rowKeyValue);
+              keysToDelete.push(rowKeyValue);
             }
           });
+          keysToDelete.forEach((key) => highlightDimRowsAnimation.delete(key));
           if (highlightDimRowsAnimation.size) {
             recursion();
           } else {
@@ -1408,24 +1412,22 @@ function useHighlight(props, stkTableId, tableContainerRef) {
   }
   return [highlightSteps, setHighlightDimRow, setHighlightDimCell];
 }
-var ScrollCodes = /* @__PURE__ */ ((ScrollCodes2) => {
-  ScrollCodes2["ArrowUp"] = "ArrowUp";
-  ScrollCodes2["ArrowRight"] = "ArrowRight";
-  ScrollCodes2["ArrowDown"] = "ArrowDown";
-  ScrollCodes2["ArrowLeft"] = "ArrowLeft";
-  ScrollCodes2["PageUp"] = "PageUp";
-  ScrollCodes2["PageDown"] = "PageDown";
-  ScrollCodes2["Home"] = "Home";
-  ScrollCodes2["End"] = "End";
-  return ScrollCodes2;
-})(ScrollCodes || {});
+const ScrollCodes = {
+  ArrowUp: "ArrowUp",
+  ArrowRight: "ArrowRight",
+  ArrowDown: "ArrowDown",
+  ArrowLeft: "ArrowLeft",
+  PageUp: "PageUp",
+  PageDown: "PageDown",
+  Home: "Home",
+  End: "End"
+};
 const ScrollCodesValues = Object.values(ScrollCodes);
 function useKeyboardArrowScroll(targetElement, props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on, areaSelectionConfig) {
   let isMouseOver = false;
   watch(virtual_on, (val) => {
-    if (!val) {
-      removeListeners();
-    } else {
+    removeListeners();
+    if (val) {
       addEventListeners();
     }
   });
@@ -1457,21 +1459,21 @@ function useKeyboardArrowScroll(targetElement, props, scrollTo, virtualScroll, v
     const { headless, headerRowHeight } = props;
     const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
     const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
-    if (keyCode === "ArrowUp") {
+    if (keyCode === ScrollCodes.ArrowUp) {
       scrollTo(scrollTop - rowHeight, null);
-    } else if (keyCode === "ArrowRight") {
+    } else if (keyCode === ScrollCodes.ArrowRight) {
       scrollTo(null, scrollLeft + 50);
-    } else if (keyCode === "ArrowDown") {
+    } else if (keyCode === ScrollCodes.ArrowDown) {
       scrollTo(scrollTop + rowHeight, null);
-    } else if (keyCode === "ArrowLeft") {
+    } else if (keyCode === ScrollCodes.ArrowLeft) {
       scrollTo(null, scrollLeft - 50);
-    } else if (keyCode === "PageUp") {
+    } else if (keyCode === ScrollCodes.PageUp) {
       scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
-    } else if (keyCode === "PageDown") {
+    } else if (keyCode === ScrollCodes.PageDown) {
       scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
-    } else if (keyCode === "Home") {
+    } else if (keyCode === ScrollCodes.Home) {
       scrollTo(0, null);
-    } else if (keyCode === "End") {
+    } else if (keyCode === ScrollCodes.End) {
       scrollTo(scrollHeight, null);
     }
   }
@@ -1560,7 +1562,7 @@ function useMergeCells(rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, vir
     if (colspan === 1 && rowspan === 1) return;
     const rowKey = rowKeyGen(row);
     const curRowIndex = virtual_dataSourcePart.value.findIndex((item) => rowKeyGen(item) === rowKey);
-    if (curRowIndex === -1) return;
+    if (curRowIndex < 0) return;
     const colKey = colKeyGen.value(col);
     const mergedCellKey = pureCellKeyGen(rowKey, colKey);
     for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
@@ -1649,6 +1651,7 @@ function useScrollbar(props, containerRef, virtualScroll, virtualScrollX, update
   let dragStartTop = 0;
   let dragStartLeft = 0;
   let resizeObserver = null;
+  let currentDragHandler;
   const throttledUpdateScrollbar = throttle(() => updateCustomScrollbar(), 200);
   const rafUpdateVirtualScrollY = rafThrottle((scrollTop) => updateVirtualScrollY(scrollTop));
   onMounted(() => {
@@ -1658,7 +1661,8 @@ function useScrollbar(props, containerRef, virtualScroll, virtualScrollX, update
     }
     initScrollbar();
   });
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
+    onDragEnd();
     resizeObserver == null ? void 0 : resizeObserver.disconnect();
     resizeObserver = null;
   });
@@ -1697,6 +1701,8 @@ function useScrollbar(props, containerRef, virtualScroll, virtualScrollX, update
     addDragListeners(onHorizontalDrag);
   }
   function addDragListeners(dragHandler) {
+    removeCurrentDragHandlerListeners();
+    currentDragHandler = dragHandler;
     document.addEventListener("mousemove", dragHandler);
     document.addEventListener("mouseup", onDragEnd);
     document.addEventListener("touchmove", dragHandler, { passive: false });
@@ -1735,13 +1741,17 @@ function useScrollbar(props, containerRef, virtualScroll, virtualScrollX, update
   function onDragEnd() {
     isDraggingVertical = false;
     isDraggingHorizontal = false;
-    document.removeEventListener("mousemove", onVerticalDrag);
-    document.removeEventListener("mousemove", onHorizontalDrag);
+    removeCurrentDragHandlerListeners();
     document.removeEventListener("mouseup", onDragEnd);
-    document.removeEventListener("touchmove", onVerticalDrag);
-    document.removeEventListener("touchmove", onHorizontalDrag);
     document.removeEventListener("touchend", onDragEnd);
   }
+  function removeCurrentDragHandlerListeners() {
+    if (currentDragHandler) {
+      document.removeEventListener("mousemove", currentDragHandler);
+      document.removeEventListener("touchmove", currentDragHandler);
+      currentDragHandler = void 0;
+    }
+  }
   function initScrollbar() {
     nextTick(updateCustomScrollbar);
   }
@@ -2309,6 +2319,34 @@ function useTree(props, dataSourceCopy, rowKeyGen, emits) {
   }
   return [toggleTreeNode, setTreeExpand, flatTreeData];
 }
+function useColWidthCache(getColWidth2) {
+  let colWidthCache = { cols: null, nonFixedCols: [], leftColWidthSum: 0 };
+  function build(cols) {
+    const nonFixedCols = [];
+    let leftColWidthSum = 0;
+    let cumWidth = 0;
+    for (let i = 0; i < cols.length; i++) {
+      const col = cols[i];
+      const w = getColWidth2(col);
+      if (col.fixed === "left") {
+        leftColWidthSum += w;
+        continue;
+      }
+      cumWidth += w;
+      nonFixedCols.push({ index: i, cumWidth });
+    }
+    colWidthCache = { cols, nonFixedCols, leftColWidthSum };
+    return colWidthCache;
+  }
+  function get(cols) {
+    if (colWidthCache.cols === cols) return colWidthCache;
+    return build(cols);
+  }
+  function clear() {
+    colWidthCache.cols = null;
+  }
+  return [get, clear];
+}
 const VUE2_SCROLL_TIMEOUT_MS = 200;
 function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen, maxRowSpan, scrollbarOptions, isExperimentalScrollY) {
   const tableHeaderHeight = computed(() => props.headerRowHeight * tableHeaders.value.length);
@@ -2331,6 +2369,7 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
     offsetLeft: 0,
     scrollLeft: 0
   });
+  const [getColWidthCache, clearColWidthCache] = useColWidthCache(getCalculatedColWidth);
   const hasExpandCol = computed(() => {
     return tableHeaderLast.value.some((col) => col.type === "expand");
   });
@@ -2366,15 +2405,18 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
       const leftCols = [];
       const rightCols = [];
       const { startIndex, endIndex } = virtualScrollX.value;
-      for (let i = 0; i < startIndex; i++) {
+      const maxIndex = tableHeaderLastValue.length;
+      const validEndIndex = Math.min(endIndex, maxIndex);
+      const validStartIndex = Math.min(startIndex, maxIndex);
+      for (let i = 0; i < validStartIndex; i++) {
         const col = tableHeaderLastValue[i];
         if ((col == null ? void 0 : col.fixed) === "left") leftCols.push(col);
       }
-      for (let i = endIndex; i < tableHeaderLastValue.length; i++) {
+      for (let i = validEndIndex; i < tableHeaderLastValue.length; i++) {
         const col = tableHeaderLastValue[i];
         if ((col == null ? void 0 : col.fixed) === "right") rightCols.push(col);
       }
-      const mainColumns = tableHeaderLastValue.slice(startIndex, endIndex);
+      const mainColumns = tableHeaderLastValue.slice(validStartIndex, validEndIndex);
       return leftCols.concat(mainColumns).concat(rightCols);
     }
     return tableHeaderLastValue;
@@ -2594,32 +2636,26 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
     const { scrollLeft, containerWidth } = virtualScrollX.value;
     let startIndex = 0;
     let offsetLeft = 0;
-    let colWidthSum = 0;
-    let leftColWidthSum = 0;
     let leftFirstColRestWidth = 0;
-    for (let colIndex = 0; colIndex < headerLength; colIndex++) {
-      const col = tableHeaderLastValue[colIndex];
-      const colWidth = getCalculatedColWidth(col);
-      startIndex++;
-      if (col.fixed === "left") {
-        leftColWidthSum += colWidth;
-        continue;
-      }
-      colWidthSum += colWidth;
-      if (colWidthSum >= sLeft) {
-        offsetLeft = colWidthSum - colWidth;
-        startIndex--;
-        leftFirstColRestWidth = colWidthSum - sLeft;
-        break;
-      }
-    }
-    colWidthSum = leftFirstColRestWidth;
+    const { nonFixedCols, leftColWidthSum } = getColWidthCache(tableHeaderLastValue);
+    if (nonFixedCols.length > 0 && sLeft > 0) {
+      const found = binarySearch(nonFixedCols, (mid) => {
+        return nonFixedCols[mid].cumWidth < sLeft ? -1 : 1;
+      });
+      const idx = Math.min(found, nonFixedCols.length - 1);
+      startIndex = nonFixedCols[idx].index;
+      offsetLeft = idx > 0 ? nonFixedCols[idx - 1].cumWidth : 0;
+      leftFirstColRestWidth = nonFixedCols[idx].cumWidth - sLeft;
+    } else if (nonFixedCols.length > 0) {
+      startIndex = nonFixedCols[0].index;
+    }
+    let endColWidthSum = leftFirstColRestWidth;
     const containerW = containerWidth - leftColWidthSum;
     let endIndex = headerLength;
     for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
       const col = tableHeaderLastValue[colIndex];
-      colWidthSum += getCalculatedColWidth(col);
-      if (colWidthSum >= containerW) {
+      endColWidthSum += getCalculatedColWidth(col);
+      if (endColWidthSum >= containerW) {
         endIndex = colIndex + 1;
         break;
       }
@@ -2653,7 +2689,8 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
     updateVirtualScrollY,
     updateVirtualScrollX,
     setAutoHeight,
-    clearAllAutoHeight
+    clearAllAutoHeight,
+    clearColWidthCache
   ];
 }
 function useWheeling(resetDelay = 500) {
@@ -2889,7 +2926,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       updateVirtualScrollY,
       updateVirtualScrollX,
       setAutoHeight,
-      clearAllAutoHeight
+      clearAllAutoHeight,
+      clearColWidthCache
     ] = useVirtualScroll(
       props,
       tableContainerRef,
@@ -2961,7 +2999,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       tableHeaderLast,
       colResizeIndicatorRef,
       colKeyGen,
-      fixedCols
+      fixedCols,
+      clearColWidthCache
     );
     const [toggleExpandRow, setRowExpand] = useRowExpand(emits, dataSourceCopy, rowKeyGen);
     const [toggleTreeNode, setTreeExpand, flatTreeData] = useTree(props, dataSourceCopy, rowKeyGen, emits);
@@ -3065,6 +3104,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       initDataSource(val);
       updateMaxRowSpan();
+      if (!val.length) {
+        clearSelectedArea();
+      }
       if (needInitVirtualScrollY) {
         nextTick(() => initVirtualScrollY());
       }
@@ -3817,7 +3859,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             }, 8, ["style"])) : createCommentVNode("", true),
             createElementVNode("tbody", {
               class: "stk-tbody-main",
-              style: normalizeStyle({ transform: `translateY(${unref(virtualScroll).translateY}px)` }),
+              style: normalizeStyle({ transform: isExperimentalScrollY.value ? `translateY(${unref(virtualScroll).translateY}px)` : "" }),
               onClick: onCellClick,
               onMousedown: onCellMouseDown,
               onMouseover: onCellMouseOver

package/lib/style.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.6
+ * version: v0.11.8
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

package/package.json CHANGED Viewed

@@ -1,10 +1,19 @@
 {
   "name": "stk-table-vue",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "description": "High performance realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
   "homepage": "https://ja-plus.github.io/stk-table-vue/",
+  "author": "japlus",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ja-plus/stk-table-vue"
+  },
+  "bugs": {
+    "url": "https://github.com/ja-plus/stk-table-vue/issues"
+  },
   "packageManager": "pnpm@10.7.0",
   "directories": {
     "test": "test"
@@ -20,27 +29,27 @@
     "docs:update": "cp -rf ./docs-src/.vitepress/dist/* ./docs"
   },
   "keywords": [
-    "virtual table",
     "vue",
+    "table",
+    "vue-table",
+    "virtual table",
+    "virtual-scroll",
+    "data-table",
+    "vue-component",
+    "grid",
     "vue2",
     "vue3",
     "highlight",
     "sticky",
     "virtual",
-    "table",
     "list"
   ],
   "files": [
     "lib",
     "src"
   ],
-  "author": "japlus",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ja-plus/stk-table-vue"
-  },
-  "license": "MIT",
   "devDependencies": {
+    "@chenglou/pretext": "^0.0.3",
     "@types/mockjs": "^1.0.10",
     "@types/node": "^22.18.10",
     "@typescript-eslint/eslint-plugin": "^7.7.0",

package/src/StkTable/StkTable.vue CHANGED Viewed

@@ -131,7 +131,7 @@
                 <tbody
                     class="stk-tbody-main"
-                    :style="{ transform: `translateY(${virtualScroll.translateY}px)` }"
+                    :style="{ transform: isExperimentalScrollY ? `translateY(${virtualScroll.translateY}px)` : '' }"
                     @click="onCellClick"
                     @mousedown="onCellMouseDown"
                     @mouseover="onCellMouseOver"
@@ -850,6 +850,7 @@ const [
     updateVirtualScrollX,
     setAutoHeight,
     clearAllAutoHeight,
+    clearColWidthCache,
 ] = useVirtualScroll(
     props,
     tableContainerRef,
@@ -936,6 +937,7 @@ const [colResizeOn, isColResizing, onThResizeMouseDown] = useColResize(
     colResizeIndicatorRef,
     colKeyGen,
     fixedCols,
+    clearColWidthCache,
 );
 const [toggleExpandRow, setRowExpand] = useRowExpand(emits, dataSourceCopy, rowKeyGen);
@@ -1064,6 +1066,12 @@ function updateDataSource(val: DT[]) {
     }
     initDataSource(val);
     updateMaxRowSpan();
+    // #47
+    if (!val.length) {
+        clearSelectedArea();
+    }
     // if data length is not change, not init virtual scroll
     if (needInitVirtualScrollY) {
         // wait for table render,initVirtualScrollY has get `dom` operation.

package/src/StkTable/types/index.ts CHANGED Viewed

@@ -267,12 +267,14 @@ export type SortConfig<T extends Record<string, any>> = {
 };
 /** th td type */
-export const enum TagType {
-    TH,
-    TD,
+export const TagType = {
+    TH: 0,
+    TD: 1,
     /** tfoot */
-    TF,
-}
+    TF: 2,
+} as const;
+export type TagType = (typeof TagType)[keyof typeof TagType];
 export type HighlightConfig = {
     /** Duration of the highlight in seconds */

package/src/StkTable/useColResize.ts CHANGED Viewed

@@ -24,6 +24,7 @@ export function useColResize<DT extends Record<string, any>>(
     colResizeIndicatorRef: Ref<HTMLElement | undefined>,
     colKeyGen: ComputedRef<(p: any) => UniqKey>,
     fixedCols: Ref<StkTableColumn<DT>[]>,
+    onColWidthChange?: () => void,
 ) {
     /** 列宽是否在拖动 */
     const isColResizing = ref(false);
@@ -163,11 +164,12 @@ export function useColResize<DT extends Record<string, any>>(
         const colKey = colKeyGen.value;
         const curCol = tableHeaderLast.value.find(it => colKey(it) === colKey(lastCol));
-        if (!curCol) return;
-        curCol.width = width + 'px';
-        emits('update:columns', props.columns.slice());
-        emits('col-resize', { ...curCol });
+        if (curCol) {
+            curCol.width = width + 'px';
+            onColWidthChange?.();
+            emits('update:columns', props.columns.slice());
+            emits('col-resize', { ...curCol });
+        }
         // 隐藏指示线
         if (colResizeIndicatorRef.value) {

package/src/StkTable/useHighlight.ts CHANGED Viewed

@@ -68,15 +68,17 @@ export function useHighlight(props: any, stkTableId: string, tableContainerRef:
             window.requestAnimationFrame(
                 () => {
                     const nowTs = performance.now();
+                    const keysToDelete: UniqKey[] = [];
                     highlightDimRowsAnimation.forEach((store, rowKeyValue) => {
                         const { ts, duration } = store;
                         const timeOffset = nowTs - ts;
                         if (timeOffset < duration) {
                             updateRowAnimation(rowKeyValue, store, timeOffset);
                         } else {
-                            highlightDimRowsAnimation.delete(rowKeyValue);
+                            keysToDelete.push(rowKeyValue);
                         }
                     });
+                    keysToDelete.forEach(key => highlightDimRowsAnimation.delete(key));
                     if (highlightDimRowsAnimation.size) {
                         recursion();

package/src/StkTable/useKeyboardArrowScroll.ts CHANGED Viewed

@@ -3,16 +3,19 @@ import { AreaSelectionConfig, 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 ScrollCodes = {
+    ArrowUp: 'ArrowUp',
+    ArrowRight: 'ArrowRight',
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    PageUp: 'PageUp',
+    PageDown: 'PageDown',
+    Home: 'Home',
+    End: 'End',
+} as const;
+type ScrollCodes = (typeof ScrollCodes)[keyof typeof ScrollCodes];
 /** 所有翻页按键数组 */
 const ScrollCodesValues = Object.values(ScrollCodes);
@@ -34,9 +37,8 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
     /** 检测鼠标是否悬浮在表格体上 */
     let isMouseOver = false;
     watch(virtual_on, val => {
-        if (!val) {
-            removeListeners();
-        } else {
+        removeListeners();
+        if (val) {
             addEventListeners();
         }
     });

package/src/StkTable/useMergeCells.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export function useMergeCells(
     tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>,
     rowKeyGen: RowKeyGen,
     colKeyGen: ColKeyGen,
-    virtual_dataSourcePart: ShallowRef<any[]>
+    virtual_dataSourcePart: ShallowRef<any[]>,
 ) {
     /**
      * which cell need be hidden
@@ -99,7 +99,7 @@ export function useMergeCells(
         const rowKey = rowKeyGen(row);
         const curRowIndex = virtual_dataSourcePart.value.findIndex(item => rowKeyGen(item) === rowKey);
-        if (curRowIndex === -1) return;
+        if (curRowIndex < 0) return;
         const colKey = colKeyGen.value(col);
         const mergedCellKey = pureCellKeyGen(rowKey, colKey);

package/src/StkTable/useScrollbar.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { nextTick, onMounted, onUnmounted, ref, Ref } from 'vue';
+import { nextTick, onMounted, onBeforeUnmount, ref, Ref } from 'vue';
 import type { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 import { rafThrottle, throttle } from './utils/index';
@@ -40,6 +40,7 @@ export function useScrollbar(
     let dragStartLeft = 0;
     let resizeObserver: ResizeObserver | null = null;
+    let currentDragHandler: ((e: MouseEvent | TouchEvent) => void) | undefined;
     const throttledUpdateScrollbar = throttle(() => updateCustomScrollbar(), 200);
     // Use requestAnimationFrame for smoother scrollbar dragging performance
@@ -53,7 +54,9 @@ export function useScrollbar(
         initScrollbar();
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
+        // en: Clean up all event listeners to prevent memory leaks
+        onDragEnd();
         resizeObserver?.disconnect();
         resizeObserver = null;
     });
@@ -99,6 +102,8 @@ export function useScrollbar(
     }
     function addDragListeners(dragHandler: (e: MouseEvent | TouchEvent) => void) {
+        removeCurrentDragHandlerListeners();
+        currentDragHandler = dragHandler;
         document.addEventListener('mousemove', dragHandler);
         document.addEventListener('mouseup', onDragEnd);
         document.addEventListener('touchmove', dragHandler, { passive: false });
@@ -143,14 +148,19 @@ export function useScrollbar(
     function onDragEnd() {
         isDraggingVertical = false;
         isDraggingHorizontal = false;
-        document.removeEventListener('mousemove', onVerticalDrag);
-        document.removeEventListener('mousemove', onHorizontalDrag);
+        removeCurrentDragHandlerListeners();
         document.removeEventListener('mouseup', onDragEnd);
-        document.removeEventListener('touchmove', onVerticalDrag);
-        document.removeEventListener('touchmove', onHorizontalDrag);
         document.removeEventListener('touchend', onDragEnd);
     }
+    function removeCurrentDragHandlerListeners() {
+        if (currentDragHandler) {
+            document.removeEventListener('mousemove', currentDragHandler);
+            document.removeEventListener('touchmove', currentDragHandler);
+            currentDragHandler = void 0;
+        }
+    }
     function initScrollbar() {
         nextTick(updateCustomScrollbar);
     }

package/src/StkTable/useVirtualScroll.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import { Ref, ShallowRef, computed, ref } from 'vue';
 import { DEFAULT_ROW_HEIGHT, DEFAULT_TABLE_HEIGHT, DEFAULT_TABLE_WIDTH } from './const';
-import { AutoRowHeightConfig, PrivateRowDT, PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
+import { AutoRowHeightConfig, PrivateRowDT, PrivateStkTableColumn, RowKeyGen, StkTableColumn, UniqKey } from './types';
 import { ScrollbarOptions } from './useScrollbar';
+import { binarySearch } from './utils';
 import { getCalculatedColWidth } from './utils/constRefUtils';
 /** 暂存纵向虚拟滚动的数据 */
@@ -40,6 +41,45 @@ export type VirtualScrollXStore = {
     scrollLeft: number;
 };
+/** 列宽缓存项 */
+type ColWidthCacheItem = { index: number; cumWidth: number };
+/** 列宽缓存 */
+type ColWidthCache<T> = { cols: T[] | null; nonFixedCols: ColWidthCacheItem[]; leftColWidthSum: number };
+/** 横向虚拟滚动列宽缓存，避免每次滚动都 O(n) 构建 */
+function useColWidthCache<T extends { fixed?: StkTableColumn<PrivateRowDT>['fixed'] }>(getColWidth: (col: T) => number) {
+    let colWidthCache: ColWidthCache<T> = { cols: null, nonFixedCols: [], leftColWidthSum: 0 };
+    function build(cols: T[]): ColWidthCache<T> {
+        const nonFixedCols: ColWidthCacheItem[] = [];
+        let leftColWidthSum = 0;
+        let cumWidth = 0;
+        for (let i = 0; i < cols.length; i++) {
+            const col = cols[i];
+            const w = getColWidth(col);
+            if (col.fixed === 'left') {
+                leftColWidthSum += w;
+                continue;
+            }
+            cumWidth += w;
+            nonFixedCols.push({ index: i, cumWidth });
+        }
+        colWidthCache = { cols, nonFixedCols, leftColWidthSum };
+        return colWidthCache;
+    }
+    function get(cols: T[]): ColWidthCache<T> {
+        if (colWidthCache.cols === cols) return colWidthCache;
+        return build(cols);
+    }
+    function clear() {
+        colWidthCache.cols = null;
+    }
+    return [get, clear] as const;
+}
 /** vue2 优化滚动回收延时 */
 const VUE2_SCROLL_TIMEOUT_MS = 200;
@@ -84,6 +124,8 @@ export function useVirtualScroll(
         scrollLeft: 0,
     });
+    const [getColWidthCache, clearColWidthCache] = useColWidthCache<PrivateStkTableColumn<PrivateRowDT>>(getCalculatedColWidth);
     const hasExpandCol = computed(() => {
         return tableHeaderLast.value.some(col => col.type === 'expand');
     });
@@ -129,25 +171,24 @@ export function useVirtualScroll(
             // 虚拟横向滚动，固定列要一直保持存在
             const leftCols: PrivateStkTableColumn<PrivateRowDT>[] = [];
             const rightCols: PrivateStkTableColumn<PrivateRowDT>[] = [];
-            /**
-             * 存在问题：
-             * table columns 从多到少时。比方原来的start=5,end=10，现在start=4,end=8。这时候endIndex就超出数组范围了。
-             * FIXME: 如果新列数 < endIndex，此时需要重新计算列startIndex和endIndex。
-             */
             const { startIndex, endIndex } = virtualScrollX.value;
+            // 将索引钳制到列数组范围内，防止列数减少时越界
+            const maxIndex = tableHeaderLastValue.length;
+            const validEndIndex = Math.min(endIndex, maxIndex);
+            const validStartIndex = Math.min(startIndex, maxIndex);
             // 左侧固定列，如果在左边不可见区。则需要拿出来放在前面
-            for (let i = 0; i < startIndex; i++) {
+            for (let i = 0; i < validStartIndex; i++) {
                 const col = tableHeaderLastValue[i];
                 if (col?.fixed === 'left') leftCols.push(col);
             }
             // 右侧固定列，如果在右边不可见区。则需要拿出来放在后面
-            for (let i = endIndex; i < tableHeaderLastValue.length; i++) {
+            for (let i = validEndIndex; i < tableHeaderLastValue.length; i++) {
                 const col = tableHeaderLastValue[i];
                 if (col?.fixed === 'right') rightCols.push(col);
             }
-            const mainColumns = tableHeaderLastValue.slice(startIndex, endIndex);
+            const mainColumns = tableHeaderLastValue.slice(validStartIndex, validEndIndex);
             return leftCols.concat(mainColumns).concat(rightCols);
         }
@@ -301,7 +342,6 @@ export function useVirtualScroll(
         let startIndex = 0;
         let endIndex = dataLength;
         let autoRowHeightTop = 0;
         if (autoRowHeight || hasExpandCol.value) {
             if (autoRowHeight && trRef.value) {
                 // Batch DOM measurements for better performance
@@ -433,39 +473,33 @@ export function useVirtualScroll(
         const { scrollLeft, containerWidth } = virtualScrollX.value;
         let startIndex = 0;
         let offsetLeft = 0;
-        let colWidthSum = 0;
-        /** 固定左侧列宽 */
-        let leftColWidthSum = 0;
         /** 横向滚动时，第一列的剩余宽度 */
         let leftFirstColRestWidth = 0;
-        for (let colIndex = 0; colIndex < headerLength; colIndex++) {
-            const col = tableHeaderLastValue[colIndex];
-            const colWidth = getCalculatedColWidth(col);
-            startIndex++;
-            // fixed left 不进入计算列宽
-            if (col.fixed === 'left') {
-                leftColWidthSum += colWidth;
-                continue;
-            }
-            colWidthSum += colWidth;
-            // 列宽（非固定列）加到超过scrollLeft的时候，表示startIndex从上一个开始下标
-            if (colWidthSum >= sLeft) {
-                offsetLeft = colWidthSum - colWidth;
-                startIndex--;
-                leftFirstColRestWidth = colWidthSum - sLeft;
-                break;
-            }
+        // 使用缓存的累计宽度数组，列配置不变时直接复用
+        const { nonFixedCols, leftColWidthSum } = getColWidthCache(tableHeaderLastValue);
+        if (nonFixedCols.length > 0 && sLeft > 0) {
+            // 二分查找：找到第一个累计宽度 >= sLeft 的非固定列
+            const found = binarySearch(nonFixedCols, mid => {
+                return nonFixedCols[mid].cumWidth < sLeft ? -1 : 1;
+            });
+            const idx = Math.min(found, nonFixedCols.length - 1);
+            startIndex = nonFixedCols[idx].index;
+            offsetLeft = idx > 0 ? nonFixedCols[idx - 1].cumWidth : 0;
+            leftFirstColRestWidth = nonFixedCols[idx].cumWidth - sLeft;
+        } else if (nonFixedCols.length > 0) {
+            startIndex = nonFixedCols[0].index;
         }
         // -----
-        colWidthSum = leftFirstColRestWidth;
+        let endColWidthSum = leftFirstColRestWidth;
         const containerW = containerWidth - leftColWidthSum;
         let endIndex = headerLength;
         for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
             const col = tableHeaderLastValue[colIndex];
-            colWidthSum += getCalculatedColWidth(col);
+            endColWidthSum += getCalculatedColWidth(col);
             // 列宽大于容器宽度则停止
-            if (colWidthSum >= containerW) {
+            if (endColWidthSum >= containerW) {
                 endIndex = colIndex + 1; // slice endIndex + 1
                 break;
             }
@@ -482,7 +516,7 @@ export function useVirtualScroll(
             // 向左滚动
             Object.assign(virtualScrollX.value, { startIndex, endIndex, offsetLeft, scrollLeft: sLeft });
         } else {
-            //vue2 向右滚动 优化
+            // vue2 向右滚动优化
             Object.assign(virtualScrollX.value, { endIndex, scrollLeft: sLeft });
             vue2ScrollXTimeout = window.setTimeout(() => {
                 Object.assign(virtualScrollX.value, { startIndex, offsetLeft });
@@ -507,5 +541,6 @@ export function useVirtualScroll(
         updateVirtualScrollX,
         setAutoHeight,
         clearAllAutoHeight,
+        clearColWidthCache,
     ] as const;
 }

package/src/StkTable/utils/index.ts CHANGED Viewed

@@ -266,7 +266,7 @@ export function throttle<T extends (...args: any[]) => any>(fn: T, delay: number
     let timer: number;
     let lastArgs: Parameters<T> | null = null;
-    const callFn = function () {
+    const callFn = () => {
         if (lastArgs) {
             fn(...lastArgs);
             lastArgs = null;
@@ -295,7 +295,7 @@ export function rafThrottle<T extends (...args: any[]) => any>(fn: T): (...args:
     let rafId: number | null = null;
     let lastArgs: Parameters<T> | null = null;
-    const callFn = function () {
+    const callFn = () => {
         if (lastArgs) {
             fn(...lastArgs);
             lastArgs = null;
@@ -312,3 +312,13 @@ export function rafThrottle<T extends (...args: any[]) => any>(fn: T): (...args:
         }
     };
 }
+export function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void {
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    return function (...args: Parameters<T>) {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => {
+            fn(...args);
+            timer = null;
+        }, delay);
+    };
+}