stk-table-vue 0.7.0 → 0.7.2

package/lib/src/StkTable/StkTable.vue.d.ts

@@ -94,7 +94,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     /** 当前行再次点击否可以取消 (rowActive=true)*/
     rowCurrentRevokable?: boolean;
     /** 表头行高。default = rowHeight */
-    headerRowHeight?: number | null;
+    headerRowHeight?: number | string | null;
     /** 虚拟滚动 */
     virtual?: boolean;
     /** x轴虚拟滚动(必须设置列宽)*/
@@ -194,8 +194,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * - true: 不使用 onwheel 滚动。鼠标滚轮滚动时更加平滑。滚动过快时会白屏。
      */
     smoothScroll?: boolean;
-    /** 按整数行纵向滚动 */
-    scrollRowByRow?: boolean;
+    /**
+     * 按整数行纵向滚动
+     * - scrollbar：仅拖动滚动条生效
+     */
+    scrollRowByRow?: boolean | "scrollbar";
 }>, {
     width: string;
     fixedMode: boolean;
@@ -372,7 +375,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     })) | (import('./types/index').UniqKey | (PrivateRowDT & {
         children?: (PrivateRowDT & /*elided*/ any)[];
     }))[], option?: {
-        expand? /** 是否高亮选中的行 */: boolean;
+        expand?: boolean;
     }) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "sort-change": (col: StkTableColumn<any> | null, order: Order, data: any[], sortConfig: SortConfig<any>) => void;
@@ -456,7 +459,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     /** 当前行再次点击否可以取消 (rowActive=true)*/
     rowCurrentRevokable?: boolean;
     /** 表头行高。default = rowHeight */
-    headerRowHeight?: number | null;
+    headerRowHeight?: number | string | null;
     /** 虚拟滚动 */
     virtual?: boolean;
     /** x轴虚拟滚动(必须设置列宽)*/
@@ -556,8 +559,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * - true: 不使用 onwheel 滚动。鼠标滚轮滚动时更加平滑。滚动过快时会白屏。
      */
     smoothScroll?: boolean;
-    /** 按整数行纵向滚动 */
-    scrollRowByRow?: boolean;
+    /**
+     * 按整数行纵向滚动
+     * - scrollbar：仅拖动滚动条生效
+     */
+    scrollRowByRow?: boolean | "scrollbar";
 }>, {
     width: string;
     fixedMode: boolean;
@@ -670,7 +676,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     stripe: boolean;
     optimizeVue2Scroll: boolean;
     rowKey: UniqKeyProp;
-    headerRowHeight: number | null;
+    headerRowHeight: number | string | null;
     fixedMode: boolean;
     theme: "light" | "dark";
     rowHover: boolean;
@@ -708,7 +714,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     treeConfig: TreeConfig;
     cellFixedMode: "sticky" | "relative";
     smoothScroll: boolean;
-    scrollRowByRow: boolean;
+    scrollRowByRow: boolean | "scrollbar";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

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

@@ -38,7 +38,7 @@ export type CustomCell<T extends CustomCellProps<U> | CustomHeaderCellProps<U>,
 /** 表格列配置 */
 export type StkTableColumn<T extends Record<string, any>> = {
     /**
-     * 用于区分相同dataIndex 的列。
+     * 列唯一键，(可选)，不传则默认取dataIndex 字段作为列唯一键。
      */
     key?: any;
     /**

package/lib/src/StkTable/useScrollRowByRow.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+
+type Params = {
+    props: any;
+    tableContainerRef: Ref<HTMLElement | undefined>;
+};
+export declare function useScrollRowByRow({ props, tableContainerRef }: Params): {
+    isSRBRActive: import('vue').ComputedRef<any>;
+    isDragScroll: Ref<boolean, boolean>;
+};
+export {};

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

@@ -14,7 +14,9 @@ export declare function isEmptyValue(val: any, isNumber?: boolean): boolean;
  * @param targetArray 表格数据
  * @return targetArray 的浅拷贝
  */
-export declare function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: T, targetArray: T[], sortConfig?: SortConfig<T>): T[];
+export declare function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: T, targetArray: T[], sortConfig?: SortConfig<T> & {
+    customCompare?: (a: T, b: T) => number;
+}): T[];
 /**
  * 二分查找
  *  @param searchArray 查找数组

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { createElementBlock, openBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, defineComponent, nextTick, toRaw, normalizeStyle, normalizeClass, unref, createCommentVNode, renderSlot, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, createTextVNode, withCtx, createVNode } from "vue";
+import { createElementBlock, openBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, onUnmounted, defineComponent, nextTick, toRaw, normalizeStyle, normalizeClass, unref, createCommentVNode, renderSlot, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, createTextVNode, withCtx, createVNode } from "vue";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -61,7 +61,6 @@ function isEmptyValue(val, isNumber) {
 }
 function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {}) {
   const { dataIndex, sortField, order } = sortState;
-  sortConfig = { emptyToBottom: false, ...sortConfig };
   let { sortType } = sortState;
   const field = sortField || dataIndex;
   if (!sortType) sortType = typeof newItem[field];
@@ -70,15 +69,19 @@ function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {})
     data.unshift(newItem);
     return data;
   }
+  const { emptyToBottom, customCompare, stringLocaleCompare } = { emptyToBottom: false, ...sortConfig };
   const targetVal = newItem[field];
-  if (sortConfig.emptyToBottom && isEmptyValue(targetVal)) {
+  if (emptyToBottom && isEmptyValue(targetVal)) {
     data.push(newItem);
   } else {
+    const customCompareFn = customCompare || ((a, b) => {
+      const midVal = a[field];
+      const compareRes = strCompare(midVal, targetVal, isNumber, stringLocaleCompare);
+      return order === "asc" ? compareRes : -compareRes;
+    });
     const isNumber = sortType === "number";
     const sIndex = binarySearch(data, (midIndex) => {
-      const midVal = data[midIndex][field];
-      const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
-      return order === "asc" ? compareRes : -compareRes;
+      return customCompareFn(data[midIndex], newItem);
     });
     data.splice(sIndex, 0, newItem);
   }
@@ -636,7 +639,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
     const recursion = () => {
       window.requestAnimationFrame(
         () => {
-          const nowTs = Date.now();
+          const nowTs = performance.now();
           highlightDimRowsAnimation.forEach((store, rowKeyValue) => {
             const { ts, duration } = store;
             const timeOffset = nowTs - ts;
@@ -660,13 +663,13 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
   function setHighlightDimCell(rowKeyValue, colKeyValue, option = {}) {
     var _a;
     const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-cell-key="${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 {
@@ -675,17 +678,16 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
   }
   function setHighlightDimRow(rowKeyValues, option = {}) {
     if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
+    if (!rowKeyValues.length) return;
     const { className, method, keyframe, duration } = {
       className: HIGHLIGHT_ROW_CLASS,
       method: "animation",
       ...defaultHighlightDimOption.value,
       ...option
     };
-    if (method === "css") {
-      highlightRowsInCssKeyframe(rowKeyValues, className, duration);
-    } else if (method === "animation") {
+    if (method === "animation") {
       if (props.virtual) {
-        const nowTs = Date.now();
+        const nowTs = performance.now();
         for (let i = 0; i < rowKeyValues.length; i++) {
           const rowKeyValue = rowKeyValues[i];
           const store = { ts: nowTs, visible: false, keyframe, duration };
@@ -700,6 +702,8 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
           rowEl.animate(keyframe, duration);
         }
       }
+    } else {
+      highlightRowsInCssKeyframe(rowKeyValues, className, duration);
     }
   }
   function highlightRowsInCssKeyframe(rowKeyValues, className, duration) {
@@ -897,6 +901,63 @@ function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
     setRowExpand
   };
 }
+function useScrollRowByRow({ props, tableContainerRef }) {
+  let isMouseDown = false;
+  let isAddListeners = false;
+  const isDragScroll = ref(false);
+  const onlyDragScroll = computed(() => props.scrollRowByRow === "scrollbar");
+  const isSRBRActive = computed(() => {
+    if (onlyDragScroll.value) {
+      return isDragScroll.value;
+    }
+    return props.scrollRowByRow;
+  });
+  watch(
+    () => onlyDragScroll.value,
+    (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() {
+    isMouseDown = true;
+  }
+  function handleMouseUp() {
+    isMouseDown = false;
+    isDragScroll.value = false;
+  }
+  function handleScroll() {
+    if (!isMouseDown) return;
+    isDragScroll.value = true;
+  }
+  return { isSRBRActive, isDragScroll };
+}
 function useThDrag({ props, emits, colKeyGen }) {
   const findParentTH = (e) => e.target.closest("th");
   const dragConfig = computed(() => {
@@ -1061,6 +1122,125 @@ function useTrDrag({ props, emits, dataSourceCopy }) {
     onTrDragEnd
   };
 }
+function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
+  const { defaultExpandAll, defaultExpandKeys, defaultExpandLevel } = props.treeConfig;
+  function toggleTreeNode(row, col) {
+    const expand = row ? !row.__T_EXPANDED__ : false;
+    privateSetTreeExpand(row, { expand, col, isClick: true });
+  }
+  function privateSetTreeExpand(row, option) {
+    const rowKeyOrRowArr = Array.isArray(row) ? row : [row];
+    const tempData = dataSourceCopy.value.slice();
+    for (let i = 0; i < rowKeyOrRowArr.length; i++) {
+      const rowKeyOrRow = rowKeyOrRowArr[i];
+      let rowKey;
+      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 row2 = tempData[index];
+      const level = row2.__T_LV__ || 0;
+      let expanded = option == null ? void 0 : option.expand;
+      if (expanded === void 0) {
+        expanded = !row2.__T_EXPANDED__;
+      }
+      if (expanded) {
+        const children = expandNode(row2, level);
+        tempData.splice(index + 1, 0, ...children);
+      } else {
+        const deleteCount = foldNode(index, tempData, level);
+        tempData.splice(index + 1, deleteCount);
+      }
+      setNodeExpanded(row2, expanded, level);
+      if (option.isClick) {
+        emits("toggle-tree-expand", { expanded: Boolean(expanded), row: row2, col: option.col });
+      }
+    }
+    dataSourceCopy.value = tempData;
+  }
+  function setTreeExpand(row, option) {
+    privateSetTreeExpand(row, { ...option, isClick: false });
+  }
+  function setNodeExpanded(row, expanded, level, parent) {
+    row.__T_EXPANDED__ = expanded;
+    if (level !== void 0) {
+      row.__T_LV__ = level;
+    }
+    if (parent) {
+      row.__T_PARENT_K__ = rowKeyGen(parent);
+    }
+  }
+  function flatTreeData(data) {
+    const result = [];
+    (function recursion(data2, level, parent) {
+      if (!data2) return;
+      for (let i = 0; i < data2.length; i++) {
+        const item = data2[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, level) {
+    let result = [];
+    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, tempData, level) {
+    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
+  };
+}
 const VUE2_SCROLL_TIMEOUT_MS = 200;
 function useVirtualScroll({
   props,
@@ -1377,125 +1557,6 @@ function useVirtualScroll({
     clearAllAutoHeight
   };
 }
-function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
-  const { defaultExpandAll, defaultExpandKeys, defaultExpandLevel } = props.treeConfig;
-  function toggleTreeNode(row, col) {
-    const expand = row ? !row.__T_EXPANDED__ : false;
-    privateSetTreeExpand(row, { expand, col, isClick: true });
-  }
-  function privateSetTreeExpand(row, option) {
-    const rowKeyOrRowArr = Array.isArray(row) ? row : [row];
-    const tempData = dataSourceCopy.value.slice();
-    for (let i = 0; i < rowKeyOrRowArr.length; i++) {
-      const rowKeyOrRow = rowKeyOrRowArr[i];
-      let rowKey;
-      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 row2 = tempData[index];
-      const level = row2.__T_LV__ || 0;
-      let expanded = option == null ? void 0 : option.expand;
-      if (expanded === void 0) {
-        expanded = !row2.__T_EXPANDED__;
-      }
-      if (expanded) {
-        const children = expandNode(row2, level);
-        tempData.splice(index + 1, 0, ...children);
-      } else {
-        const deleteCount = foldNode(index, tempData, level);
-        tempData.splice(index + 1, deleteCount);
-      }
-      setNodeExpanded(row2, expanded, level);
-      if (option.isClick) {
-        emits("toggle-tree-expand", { expanded: Boolean(expanded), row: row2, col: option.col });
-      }
-    }
-    dataSourceCopy.value = tempData;
-  }
-  function setTreeExpand(row, option) {
-    privateSetTreeExpand(row, { ...option, isClick: false });
-  }
-  function setNodeExpanded(row, expanded, level, parent) {
-    row.__T_EXPANDED__ = expanded;
-    if (level !== void 0) {
-      row.__T_LV__ = level;
-    }
-    if (parent) {
-      row.__T_PARENT_K__ = rowKeyGen(parent);
-    }
-  }
-  function flatTreeData(data) {
-    const result = [];
-    (function recursion(data2, level, parent) {
-      if (!data2) return;
-      for (let i = 0; i < data2.length; i++) {
-        const item = data2[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, level) {
-    let result = [];
-    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, tempData, level) {
-    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
-  };
-}
 const _hoisted_1 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
 const _hoisted_2 = ["onMousedown"];
 const _hoisted_3 = { class: "table-header-title" };
@@ -1566,7 +1627,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     treeConfig: { default: () => ({}) },
     cellFixedMode: { default: "sticky" },
     smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL },
-    scrollRowByRow: { type: Boolean, default: false }
+    scrollRowByRow: { type: [Boolean, String], default: false }
   },
   emits: ["sort-change", "row-click", "current-change", "cell-selected", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "cell-mousedown", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "row-order-change", "col-resize", "toggle-row-expand", "toggle-tree-expand", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1620,6 +1681,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const rowKeyGenCache = /* @__PURE__ */ new WeakMap();
+    const { isSRBRActive } = useScrollRowByRow({ props, tableContainerRef });
     const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits, colKeyGen });
     const { onTrDragStart, onTrDrop, onTrDragOver, onTrDragEnd, onTrDragEnter } = useTrDrag({ props, emits, dataSourceCopy });
     const {
@@ -1730,7 +1792,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           nextTick(() => initVirtualScrollY());
         }
         const sortColValue = sortCol.value;
-        if (sortColValue) {
+        if (!isEmptyValue(sortColValue) && !props.sortRemote) {
           const colKey = colKeyGen.value;
           const column = tableHeaderLast.value.find((it) => colKey(it) === sortColValue);
           onColumnSort(column, false);
@@ -2270,7 +2332,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "header-text-overflow": props.showHeaderOverflow,
           "fixed-relative-mode": isRelativeMode.value,
           "auto-row-height": props.autoRowHeight,
-          "scroll-row-by-row": props.scrollRowByRow
+          "scroll-row-by-row": unref(isSRBRActive)
         }]),
         style: normalizeStyle({
           "--row-height": props.autoRowHeight ? void 0 : unref(virtualScroll).rowHeight + "px",
@@ -2281,7 +2343,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onScroll: onTableScroll,
         onWheel: onTableWheel
       }, [
-        props.scrollRowByRow && _ctx.virtual ? (openBlock(), createElementBlock("div", {
+        unref(isSRBRActive) && _ctx.virtual ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "row-by-row-table-height",
           style: normalizeStyle({ height: dataSourceCopy.value.length * unref(virtualScroll).rowHeight + "px" })
@@ -2388,7 +2450,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onDragend: _cache[6] || (_cache[6] = //@ts-ignore
             (...args) => unref(onTrDragEnd) && unref(onTrDragEnd)(...args))
           }, [
-            unref(virtual_on) && !props.scrollRowByRow ? (openBlock(), createElementBlock("tr", {
+            unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
               key: 0,
               style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
               class: "padding-top-tr"
@@ -2523,7 +2585,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }), 128))
               ], 46, _hoisted_6);
             }), 128)),
-            unref(virtual_on) && !props.scrollRowByRow ? (openBlock(), createElementBlock("tr", {
+            unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
               key: 1,
               style: normalizeStyle(`height: ${unref(virtual_offsetBottom)}px`)
             }, null, 4)) : createCommentVNode("", true)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -40,7 +40,6 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@types/d3-interpolate": "^3.0.4",
     "@types/mockjs": "^1.0.10",
     "@types/node": "^20.12.10",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
@@ -60,7 +59,7 @@
     "postcss-discard-comments": "^6.0.2",
     "postcss-preset-env": "^9.5.11",
     "prettier": "^3.2.5",
-    "stk-table-vue": "^0.6.17",
+    "stk-table-vue": "^0.7.1",
     "typescript": "^5.4.5",
     "vite": "^5.4.10",
     "vite-plugin-dts": "3.9.1",

package/src/StkTable/StkTable.vue

@@ -25,7 +25,7 @@
             'header-text-overflow': props.showHeaderOverflow,
             'fixed-relative-mode': isRelativeMode,
             'auto-row-height': props.autoRowHeight,
-            'scroll-row-by-row': props.scrollRowByRow,
+            'scroll-row-by-row': isSRBRActive,
         }"
         :style="{
             '--row-height': props.autoRowHeight ? void 0 : virtualScroll.rowHeight + 'px',
@@ -38,7 +38,7 @@
     >
         <!-- 这个元素用于整数行虚拟滚动时，撑开父容器的高度） -->
         <div
-            v-if="props.scrollRowByRow && virtual"
+            v-if="isSRBRActive && virtual"
             class="row-by-row-table-height"
             :style="{ height: dataSourceCopy.length * virtualScroll.rowHeight + 'px' }"
         ></div>
@@ -114,7 +114,7 @@
             <!-- <tbody v-if="virtual_on" :style="{ height: `${virtualScroll.offsetTop}px` }"></tbody> -->
             <!-- <tbody :style="{ transform: `translateY(${virtualScroll.offsetTop}px)` }"> -->
             <tbody class="stk-tbody-main" @dragover="onTrDragOver" @dragenter="onTrDragEnter" @dragend="onTrDragEnd">
-                <tr v-if="virtual_on && !props.scrollRowByRow" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
+                <tr v-if="virtual_on && !isSRBRActive" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on && fixedMode && headless" class="vt-x-left"></td>
                     <template v-if="fixedMode && headless">
@@ -238,7 +238,7 @@
                         </td>
                     </template>
                 </tr>
-                <tr v-if="virtual_on && !props.scrollRowByRow" :style="`height: ${virtual_offsetBottom}px`"></tr>
+                <tr v-if="virtual_on && !isSRBRActive" :style="`height: ${virtual_offsetBottom}px`"></tr>
             </tbody>
         </table>
         <div v-if="(!dataSourceCopy || !dataSourceCopy.length) && showNoData" class="stk-table-no-data" :class="{ 'no-data-full': noDataFull }">
@@ -283,12 +283,13 @@ import { useGetFixedColPosition } from './useGetFixedColPosition';
 import { useHighlight } from './useHighlight';
 import { useKeyboardArrowScroll } from './useKeyboardArrowScroll';
 import { useRowExpand } from './useRowExpand';
+import { useScrollRowByRow } from './useScrollRowByRow';
 import { useThDrag } from './useThDrag';
 import { useTrDrag } from './useTrDrag';
+import { useTree } from './useTree';
 import { useVirtualScroll } from './useVirtualScroll';
 import { createStkTableId, getCalculatedColWidth, getColWidth } from './utils/constRefUtils';
-import { howDeepTheHeader, tableSort, transformWidthToStr } from './utils/index';
-import { useTree } from './useTree';
+import { howDeepTheHeader, isEmptyValue, tableSort, transformWidthToStr } from './utils/index';
 
 /** Generic stands for DataType */
 type DT = any & PrivateRowDT;
@@ -331,7 +332,7 @@ const props = withDefaults(
         /** 当前行再次点击否可以取消 (rowActive=true)*/
         rowCurrentRevokable?: boolean;
         /** 表头行高。default = rowHeight */
-        headerRowHeight?: number | null;
+        headerRowHeight?: number | string | null;
         /** 虚拟滚动 */
         virtual?: boolean;
         /** x轴虚拟滚动(必须设置列宽)*/
@@ -428,8 +429,11 @@ const props = withDefaults(
          * - true: 不使用 onwheel 滚动。鼠标滚轮滚动时更加平滑。滚动过快时会白屏。
          */
         smoothScroll?: boolean;
-        /** 按整数行纵向滚动 */
-        scrollRowByRow?: boolean;
+        /**
+         * 按整数行纵向滚动
+         * - scrollbar：仅拖动滚动条生效
+         */
+        scrollRowByRow?: boolean | 'scrollbar';
     }>(),
     {
         width: '',
@@ -738,6 +742,8 @@ const getEmptyCellText = computed(() => {
 
 const rowKeyGenCache = new WeakMap();
 
+const { isSRBRActive } = useScrollRowByRow({ props, tableContainerRef });
+
 const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits, colKeyGen });
 
 const { onTrDragStart, onTrDrop, onTrDragOver, onTrDragEnd, onTrDragEnter } = useTrDrag({ props, emits, dataSourceCopy });
@@ -870,7 +876,7 @@ watch(
             nextTick(() => initVirtualScrollY());
         }
         const sortColValue = sortCol.value;
-        if (sortColValue) {
+        if (!isEmptyValue(sortColValue) && !props.sortRemote) {
             // sort
             const colKey = colKeyGen.value;
             const column = tableHeaderLast.value.find(it => colKey(it) === sortColValue);

package/src/StkTable/types/index.ts

@@ -43,7 +43,7 @@ export type CustomCell<T extends CustomCellProps<U> | CustomHeaderCellProps<U>,
 /** 表格列配置 */
 export type StkTableColumn<T extends Record<string, any>> = {
     /**
-     * 用于区分相同dataIndex 的列。
+     * 列唯一键，(可选)，不传则默认取dataIndex 字段作为列唯一键。
      */
     key?: any;
     /**

package/src/StkTable/useHighlight.ts

@@ -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}"]`);
+        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/useScrollRowByRow.ts

@@ -0,0 +1,76 @@
+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;
+
+    /**记录滚动条是否正在被拖动 */
+    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.value,
+        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() {
+        isMouseDown = true;
+    }
+
+    function handleMouseUp() {
+        isMouseDown = false;
+        isDragScroll.value = false;
+    }
+
+    function handleScroll() {
+        if (!isMouseDown) return;
+        isDragScroll.value = true;
+    }
+    return { isSRBRActive, isDragScroll };
+}

package/src/StkTable/utils/index.ts

@@ -21,9 +21,13 @@ export function isEmptyValue(val: any, isNumber?: boolean) {
  * @param targetArray 表格数据
  * @return targetArray 的浅拷贝
  */
-export function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: T, targetArray: T[], sortConfig: SortConfig<T> = {}) {
+export function insertToOrderedArray<T extends object>(
+    sortState: SortState<T>,
+    newItem: T,
+    targetArray: T[],
+    sortConfig: SortConfig<T> & { customCompare?: (a: T, b: T) => number } = {},
+) {
     const { dataIndex, sortField, order } = sortState;
-    sortConfig = { emptyToBottom: false, ...sortConfig };
     let { sortType } = sortState;
     const field = sortField || dataIndex;
     if (!sortType) sortType = typeof newItem[field] as 'number' | 'string';
@@ -35,17 +39,24 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<T>,
         return data;
     }
 
+    const { emptyToBottom, customCompare, stringLocaleCompare } = { emptyToBottom: false, ...sortConfig };
+
     const targetVal: any = newItem[field];
-    if (sortConfig.emptyToBottom && isEmptyValue(targetVal)) {
+    if (emptyToBottom && isEmptyValue(targetVal)) {
         // 空值排在最下方
         data.push(newItem);
     } else {
+        const customCompareFn =
+            customCompare ||
+            ((a, b) => {
+                const midVal: any = a[field];
+                const compareRes = strCompare(midVal, targetVal, isNumber, stringLocaleCompare);
+                return order === 'asc' ? compareRes : -compareRes;
+            });
         const isNumber = sortType === 'number';
         // 二分插入
         const sIndex = binarySearch(data, midIndex => {
-            const midVal: any = data[midIndex][field];
-            const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
-            return order === 'asc' ? compareRes : -compareRes;
+            return customCompareFn(data[midIndex], newItem);
         });
         data.splice(sIndex, 0, newItem);
     }