stk-table-vue 0.2.8 → 0.2.9

package/README.md

@@ -12,7 +12,10 @@ repo:
 * [x] props.dataSource 为 shallowRef 时，高亮行不生效。(bug:2024.02.21)(resolved:0.2.3)
 
 ## Feature TODO:
-* [x] 高亮行，单元格。
+* [x] 高亮行，单元格。使用css keyframe实现。
+  - [x] 虚拟滚动默认通过js计算行高亮背景色，可通过 `useCss` 设置为css keyframe实现 。
+  - [x] 支持配置高亮参数（持续时间，颜色，频率（虚拟滚动））。(`v0.2.9`)
+  - [x] `setHighlightDimRow`/`setHighlightCellRow`支持自定义高亮css类名。(`v0.2.9`)
 * [x] 虚拟滚动。
   - [x] 纵向。
   - [x] 横向（必须设置列宽）。
@@ -29,19 +32,19 @@ repo:
   - [x] 基本表头点击排序。
   - [x] 支持配置 `null` | `undefined` 永远排最后。
   - [] 支持配置 string 使用 `String.prototype.localCompare` 排序。
-* 多级表头。
+* [x] 多级表头。
   - [x] 支持最多`2级`表头。
   - [x] 支持更多级表头。
   - [] 横向虚拟滚动。
 * [x] 支持table-layout: fixed 配置。
-* 鼠标悬浮在表格上，键盘滚动虚拟表格。
+* [x] 鼠标悬浮在表格上，键盘滚动虚拟表格。
   - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight` 按键支持。
   - [x] 键盘 `PageUp`/ `PageDown` 按键支持。
 * [] 非虚拟滚动时，大数据分批加载。
 * [x] vue2.7支持（引入源码使用）。
-  - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。
-* [x] `props.emptyCellText` 支持传入函数。
-* [] 支持配置高亮参数。
+  - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。(`v0.2.0`)
+* [x] `props.emptyCellText` 支持传入函数。(`v0.2.6`)
+
 
 
 ## Usage
@@ -53,8 +56,8 @@ import { StkTable } from 'stk-table-vue'
 import { ref } from 'vue'
 const stkTable = ref<InstanceType<typeof StkTable>>();
 // highlight
-stkTable.value.setHighlightDimRow([rowId]);// highlight row
-stkTable.value.setHighlightDimCell(rowId, colId) // highlight cell
+stkTable.value.setHighlightDimRow([rowId]，{useCss:false,className:'custom-class-name'});// highlight row
+stkTable.value.setHighlightDimCell(rowId, colId,{className:'custom-class-name'}) // highlight cell
 </script>
 
 <template>
@@ -199,6 +202,18 @@ export type StkProps = {
   },
   /** 隐藏头部title。可传入dataIndex数组 */
   hideHeaderTitle?: boolean | string[];
+  /** 高亮配置 */
+  highlightConfig?: {
+    /** 高亮持续时间(s) */
+    duration?: number;
+    /** 高亮背景色 */
+    color?: {
+        light?: { from: string; to: string };
+        dark?: { from: string; to: string };
+    };
+    /** 高亮帧率(虚拟滚动生效) */
+    fps?: number;
+  };
 };
 ```
 #### Emits

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

@@ -1,4 +1,4 @@
-import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKeyProp } from './types/index';
+import { HighlightConfig, Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKeyProp } from './types/index';
 /** Generic stands for DataType */
 type DT = any;
 /**
@@ -120,6 +120,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     sortConfig?: SortConfig<any> | undefined;
     /** 隐藏头部title。可传入dataIndex数组 */
     hideHeaderTitle?: boolean | string[] | undefined;
+    /** 高亮配置 */
+    highlightConfig?: HighlightConfig | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -156,6 +158,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         stringLocaleCompare: boolean;
     };
     hideHeaderTitle: boolean;
+    highlightConfig: () => {};
 }>, {
     /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll: (height?: number | undefined) => void;
@@ -166,10 +169,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 设置当前选中行 */
     setCurrentRow: typeof setCurrentRow;
     /** 设置高亮渐暗单元格 */
-    setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
+    setHighlightDimCell: (rowKeyValue: string, dataIndex: string, option?: {
+        className?: string | undefined;
+    }) => void;
     /** 设置高亮渐暗行 */
     setHighlightDimRow: (rowKeyValues: import("./types/index").UniqKey[], option?: {
         useCss?: boolean | undefined;
+        className?: string | undefined;
     }) => void;
     /** 表格排序列dataIndex */
     sortCol: import("vue").Ref<string | null | undefined>;
@@ -285,6 +291,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     sortConfig?: SortConfig<any> | undefined;
     /** 隐藏头部title。可传入dataIndex数组 */
     hideHeaderTitle?: boolean | string[] | undefined;
+    /** 高亮配置 */
+    highlightConfig?: HighlightConfig | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -321,6 +329,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         stringLocaleCompare: boolean;
     };
     hideHeaderTitle: boolean;
+    highlightConfig: () => {};
 }>>> & {
     onScroll?: ((ev: Event, data: {
         startIndex: number;
@@ -375,6 +384,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optimizeVue2Scroll: boolean;
     sortConfig: SortConfig<any>;
     hideHeaderTitle: boolean | string[];
+    highlightConfig: HighlightConfig;
 }, {}>, {
     tableHeader?(_: {
         col: StkTableColumn<any>;

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

@@ -1,9 +1,9 @@
-export declare const Default_Col_Width = "100";
-export declare const Default_Table_Height = 100;
-export declare const Default_Table_Width = 200;
-export declare const Default_Row_Height = 28;
+export declare const DEFAULT_COL_WIDTH = "100";
+export declare const DEFAULT_TABLE_HEIGHT = 100;
+export declare const DEFAULT_TABLE_WIDTH = 200;
+export declare const DEFAULT_ROW_HEIGHT = 28;
 /** 高亮背景色 */
-export declare const Highlight_Color: {
+export declare const HIGHLIGHT_COLOR: {
     light: {
         from: string;
         to: string;
@@ -14,8 +14,12 @@ export declare const Highlight_Color: {
     };
 };
 /** 高亮持续时间 */
-export declare const Highlight_Duration = 2000;
+export declare const HIGHLIGHT_DURATION = 2000;
 /** 高亮变更频率 */
-export declare const Highlight_Color_Change_Freq = 100;
+export declare const HIGHLIGHT_FREQ = 100;
+/** 高亮行class */
+export declare const HIGHLIGHT_ROW_CLASS = "highlight-row";
+/** 高连单元格class */
+export declare const HIGHLIGHT_CELL_CLASS = "highlight-cell";
 /** 是否兼容低版本模式 */
-export declare const Is_Legacy_Mode: boolean;
+export declare const IS_LEGACY_MODE: boolean;

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

@@ -99,4 +99,22 @@ export declare const enum TagType {
     TH = 0,
     TD = 1
 }
+/** 高亮配置 */
+export type HighlightConfig = {
+    /** 高亮持续时间(s) */
+    duration?: number;
+    /** 高亮背景色 */
+    color?: {
+        light?: {
+            from: string;
+            to: string;
+        };
+        dark?: {
+            from: string;
+            to: string;
+        };
+    };
+    /** 高亮帧率(虚拟滚动生效) */
+    fps?: number;
+};
 export {};

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

@@ -1,11 +1,7 @@
 import { Ref } from 'vue';
 import { UniqKey } from './types';
 type Params = {
-    props: {
-        theme: 'light' | 'dark';
-        virtual: boolean;
-        dataSource: any[];
-    };
+    props: any;
     tableContainer: Ref<HTMLElement | undefined>;
 };
 /** 高亮行保存的东西 */
@@ -20,9 +16,13 @@ type HighlightRowStore = {
  */
 export declare function useHighlight({ props, tableContainer }: Params): {
     highlightRowStore: Ref<Record<UniqKey, HighlightRowStore>>;
+    highlightFrom: import("vue").ComputedRef<string>;
     setHighlightDimRow: (rowKeyValues: UniqKey[], option?: {
         useCss?: boolean;
+        className?: string;
+    }) => void;
+    setHighlightDimCell: (rowKeyValue: string, dataIndex: string, option?: {
+        className?: string;
     }) => void;
-    setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
 };
 export {};

package/lib/stk-table-vue.js

@@ -1,15 +1,17 @@
 import { onMounted, onBeforeUnmount, watch, ref, shallowRef, computed, defineComponent, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vShow, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
-const Default_Col_Width = "100";
-const Default_Table_Height = 100;
-const Default_Table_Width = 200;
-const Default_Row_Height = 28;
-const Highlight_Color = {
+const DEFAULT_COL_WIDTH = "100";
+const DEFAULT_TABLE_HEIGHT = 100;
+const DEFAULT_TABLE_WIDTH = 200;
+const DEFAULT_ROW_HEIGHT = 28;
+const HIGHLIGHT_COLOR = {
   light: { from: "#71a2fd", to: "#fff" },
   dark: { from: "#1e4c99", to: "#181c21" }
 };
-const Highlight_Duration = 2e3;
-const Highlight_Color_Change_Freq = 100;
+const HIGHLIGHT_DURATION = 2e3;
+const HIGHLIGHT_FREQ = 100;
+const HIGHLIGHT_ROW_CLASS = "highlight-row";
+const HIGHLIGHT_CELL_CLASS = "highlight-cell";
 let _chromeVersion = 0;
 try {
   const userAgent = navigator.userAgent.match(/chrome\/\d+/i);
@@ -19,7 +21,7 @@ try {
 } catch (e) {
   console.error("Cannot get Chrome version", e);
 }
-const Is_Legacy_Mode = _chromeVersion < 56;
+const IS_LEGACY_MODE = _chromeVersion < 56;
 var TagType = /* @__PURE__ */ ((TagType2) => {
   TagType2[TagType2["TH"] = 0] = "TH";
   TagType2[TagType2["TD"] = 1] = "TD";
@@ -197,7 +199,7 @@ function howDeepTheHeader(arr, level = 1) {
   return Math.max(...levels);
 }
 function getColWidth(col) {
-  const val = (col == null ? void 0 : col.width) ?? Default_Col_Width;
+  const val = (col == null ? void 0 : col.width) ?? DEFAULT_COL_WIDTH;
   if (typeof val === "number") {
     return Math.floor(val);
   }
@@ -442,13 +444,13 @@ function useFixedStyle({
     const isFixedLeft = fixed === "left";
     const style = {};
     const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
-    if (Is_Legacy_Mode) {
+    if (IS_LEGACY_MODE) {
       style.position = "relative";
     } else {
       style.position = "sticky";
     }
     if (tagType === TagType.TH) {
-      if (Is_Legacy_Mode) {
+      if (IS_LEGACY_MODE) {
         style.top = virtualScroll.value.scrollTop + depth * props.rowHeight + "px";
       } else {
         style.top = depth * props.rowHeight + "px";
@@ -458,7 +460,7 @@ function useFixedStyle({
       style.zIndex = isFixedLeft ? "3" : "2";
     }
     if (fixed === "left" || fixed === "right") {
-      if (Is_Legacy_Mode) {
+      if (IS_LEGACY_MODE) {
         if (isFixedLeft) {
           if (virtualX_on.value)
             style.left = virtualScrollX.value.scrollLeft - virtualScrollX.value.offsetLeft + "px";
@@ -482,12 +484,18 @@ function useFixedStyle({
     getFixedStyle
   };
 }
-const HIGHLIGHT_ROW_CLASS = "highlight-row";
-const HIGHLIGHT_CELL_CLASS = "highlight-cell";
 function useHighlight({ props, tableContainer }) {
+  var _a, _b;
+  const config = props.highlightConfig;
   const highlightRowStore = ref({});
-  const highlightFrom = computed(() => Highlight_Color[props.theme].from);
-  const highlightTo = computed(() => Highlight_Color[props.theme].to);
+  const duration = config.duration ? config.duration * 1e3 : HIGHLIGHT_DURATION;
+  const frequency = config.fps ? 1e3 / config.fps : HIGHLIGHT_FREQ;
+  const highlightColor = {
+    light: Object.assign(HIGHLIGHT_COLOR.light, (_a = config.color) == null ? void 0 : _a.light),
+    dark: Object.assign(HIGHLIGHT_COLOR.dark, (_b = config.color) == null ? void 0 : _b.dark)
+  };
+  const highlightFrom = computed(() => highlightColor[props.theme].from);
+  const highlightTo = computed(() => highlightColor[props.theme].to);
   const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
   const highlightDimRowKeys = /* @__PURE__ */ new Set();
   const highlightDimRowsTimeout = /* @__PURE__ */ new Map();
@@ -502,7 +510,7 @@ function useHighlight({ props, tableContainer }) {
         const nowTs = Date.now();
         highlightDimRowKeys.forEach((rowKeyValue) => {
           const highlightItem = highlightRowStore.value[rowKeyValue];
-          const progress = (nowTs - highlightItem.bgc_progress_ms) / Highlight_Duration;
+          const progress = (nowTs - highlightItem.bgc_progress_ms) / duration;
           if (0 < progress && progress < 1) {
             highlightItem.bgc = highlightInter.value(progress);
           } else {
@@ -516,34 +524,36 @@ function useHighlight({ props, tableContainer }) {
         } else {
           calcHighlightDimLoop = false;
         }
-      }, Highlight_Color_Change_Freq);
+      }, frequency);
     };
     recursion();
   }
-  function setHighlightDimCell(rowKeyValue, dataIndex) {
-    var _a;
-    const cellEl = (_a = tableContainer.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
+  function setHighlightDimCell(rowKeyValue, dataIndex, option = {}) {
+    var _a2;
+    const cellEl = (_a2 = tableContainer.value) == null ? void 0 : _a2.querySelector(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
+    const opt = { className: HIGHLIGHT_CELL_CLASS, ...option };
     if (!cellEl)
       return;
-    if (cellEl.classList.contains(HIGHLIGHT_CELL_CLASS)) {
-      cellEl.classList.remove(HIGHLIGHT_CELL_CLASS);
+    if (cellEl.classList.contains(opt.className)) {
+      cellEl.classList.remove(opt.className);
       void cellEl.offsetHeight;
     }
-    cellEl.classList.add(HIGHLIGHT_CELL_CLASS);
+    cellEl.classList.add(opt.className);
     window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
     highlightDimCellsTimeout.set(
       rowKeyValue,
       window.setTimeout(() => {
-        cellEl.classList.remove(HIGHLIGHT_CELL_CLASS);
+        cellEl.classList.remove(opt.className);
         highlightDimCellsTimeout.delete(rowKeyValue);
-      }, Highlight_Duration)
+      }, duration)
     );
   }
   function setHighlightDimRow(rowKeyValues, option = {}) {
-    var _a, _b;
+    var _a2, _b2;
     if (!Array.isArray(rowKeyValues))
       rowKeyValues = [rowKeyValues];
-    if (props.virtual && !option.useCss) {
+    const { className, useCss } = { className: HIGHLIGHT_ROW_CLASS, useCss: false, ...option };
+    if (props.virtual && !useCss) {
       const nowTs = Date.now();
       for (let i = 0; i < rowKeyValues.length; i++) {
         const rowKeyValue = rowKeyValues[i];
@@ -560,11 +570,11 @@ function useHighlight({ props, tableContainer }) {
       const rowElTemp = [];
       for (let i = 0; i < rowKeyValues.length; i++) {
         const rowKeyValue = rowKeyValues[i];
-        const rowEl = (_a = tableContainer.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"]`);
+        const rowEl = (_a2 = tableContainer.value) == null ? void 0 : _a2.querySelector(`[data-row-key="${rowKeyValue}"]`);
         if (!rowEl)
           continue;
-        if (rowEl.classList.contains(HIGHLIGHT_ROW_CLASS)) {
-          rowEl.classList.remove(HIGHLIGHT_ROW_CLASS);
+        if (rowEl.classList.contains(className)) {
+          rowEl.classList.remove(className);
           needRepaint = true;
         }
         rowElTemp.push(rowEl);
@@ -572,19 +582,20 @@ function useHighlight({ props, tableContainer }) {
         highlightDimRowsTimeout.set(
           rowKeyValue,
           window.setTimeout(() => {
-            rowEl.classList.remove(HIGHLIGHT_ROW_CLASS);
+            rowEl.classList.remove(className);
             highlightDimRowsTimeout.delete(rowKeyValue);
-          }, Highlight_Duration)
+          }, duration)
         );
       }
       if (needRepaint) {
-        void ((_b = tableContainer.value) == null ? void 0 : _b.offsetWidth);
+        void ((_b2 = tableContainer.value) == null ? void 0 : _b2.offsetWidth);
       }
-      rowElTemp.forEach((el) => el.classList.add(HIGHLIGHT_ROW_CLASS));
+      rowElTemp.forEach((el) => el.classList.add(className));
     }
   }
   return {
     highlightRowStore,
+    highlightFrom,
     setHighlightDimRow,
     setHighlightDimCell
   };
@@ -776,7 +787,7 @@ function useVirtualScroll({
     if (typeof height === "number") {
       containerHeight = height;
     } else {
-      containerHeight = offsetHeight || Default_Table_Height;
+      containerHeight = offsetHeight || DEFAULT_TABLE_HEIGHT;
     }
     const { headless, headerRowHeight } = props;
     let pageSize = Math.ceil(containerHeight / rowHeight);
@@ -791,7 +802,7 @@ function useVirtualScroll({
     if (!props.virtualX)
       return;
     const { offsetWidth, scrollLeft } = tableContainer.value || {};
-    virtualScrollX.value.containerWidth = offsetWidth || Default_Table_Width;
+    virtualScrollX.value.containerWidth = offsetWidth || DEFAULT_TABLE_WIDTH;
     updateVirtualScrollX(scrollLeft);
   }
   function initVirtualScroll(height) {
@@ -851,12 +862,15 @@ function useVirtualScroll({
     let startIndex = 0;
     let offsetLeft = 0;
     let colWidthSum = 0;
+    let leftColWidthSum = 0;
     for (let colIndex = 0; colIndex < headerLength; colIndex++) {
       startIndex++;
       const col = tableHeaderLast.value[colIndex];
-      if (col.fixed === "left")
-        continue;
       const colWidth = getColWidth(col);
+      if (col.fixed === "left") {
+        leftColWidthSum += colWidth;
+        continue;
+      }
       colWidthSum += colWidth;
       if (colWidthSum >= sLeft) {
         offsetLeft = colWidthSum - colWidth;
@@ -865,11 +879,12 @@ function useVirtualScroll({
       }
     }
     colWidthSum = 0;
+    const containerWidth = virtualScrollX.value.containerWidth - leftColWidthSum;
     let endIndex = headerLength;
     for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
       const col = tableHeaderLast.value[colIndex];
       colWidthSum += getColWidth(col);
-      if (colWidthSum >= virtualScrollX.value.containerWidth) {
+      if (colWidthSum >= containerWidth) {
         endIndex = colIndex + 1;
         break;
       }
@@ -958,7 +973,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     fixedMode: { type: Boolean, default: false },
     headless: { type: Boolean, default: false },
     theme: { default: "light" },
-    rowHeight: { default: Default_Row_Height },
+    rowHeight: { default: DEFAULT_ROW_HEIGHT },
     headerRowHeight: { default: null },
     virtual: { type: Boolean, default: false },
     virtualX: { type: Boolean, default: false },
@@ -985,7 +1000,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emptyToBottom: false,
       stringLocaleCompare: true
     }) },
-    hideHeaderTitle: { type: [Boolean, Array], default: false }
+    hideHeaderTitle: { type: [Boolean, Array], default: false },
+    highlightConfig: { default: () => ({}) }
   },
   emits: ["sort-change", "row-click", "current-change", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1042,7 +1058,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       virtualX_on,
       virtualX_offsetRight
     });
-    const { highlightRowStore, setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer });
+    const { highlightRowStore, highlightFrom, setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer });
     if (props.autoResize) {
       useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs: 200 });
     }
@@ -1389,12 +1405,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "border-body-v": props.bordered === "body-v",
           stripe: props.stripe
         }]),
-        style: normalizeStyle(
+        style: normalizeStyle([
           _ctx.virtual && {
             "--row-height": unref(virtualScroll).rowHeight + "px",
             "--header-row-height": (props.headerRowHeight || props.rowHeight) + "px"
+          },
+          {
+            "--highlight-color": props.highlightConfig.color && unref(highlightFrom),
+            "--highlight-duration": props.highlightConfig.duration && props.highlightConfig.duration + "s"
           }
-        ),
+        ]),
         onScroll: onTableScroll,
         onWheel: onTableWheel
       }, [

package/lib/style.css

@@ -20,6 +20,7 @@
   --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
   --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
   --highlight-color:#71a2fd;
+  --highlight-duration:2s;
   --stripe-bgc:#fafafc;
   --sort-arrow-color:#757699;
   --sort-arrow-hover-color:#8f90b5;
@@ -148,7 +149,7 @@
   background-color:inherit;
 }
 .stk-table .stk-table-main td.highlight-cell{
-  animation:stk-table-dim 2s linear;
+  animation:stk-table-dim var(--highlight-duration) linear;
 }
 .stk-table .stk-table-main td.text-overflow .table-cell-wrapper{
   white-space:nowrap;
@@ -247,7 +248,7 @@
   height:var(--row-height);
 }
 .stk-table .stk-table-main tbody tr.highlight-row{
-  animation:stk-table-dim 2s linear;
+  animation:stk-table-dim var(--highlight-duration) linear;
 }
 .stk-table .stk-table-main tbody tr.hover,
 .stk-table .stk-table-main tbody tr:hover{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.2.8",
+    "version": "0.2.9",
     "description": "Simple realtime virtual table for vue3&vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -15,12 +15,16 @@
             'border-body-v': props.bordered === 'body-v',
             stripe: props.stripe,
         }"
-        :style="
+        :style="[
             virtual && {
                 '--row-height': virtualScroll.rowHeight + 'px',
                 '--header-row-height': (props.headerRowHeight || props.rowHeight) + 'px',
-            }
-        "
+            },
+            {
+                '--highlight-color': props.highlightConfig.color && highlightFrom,
+                '--highlight-duration': props.highlightConfig.duration && props.highlightConfig.duration + 's',
+            },
+        ]"
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
@@ -190,8 +194,8 @@
  * [] highlight-row 颜色不能恢复到active的颜色
  */
 import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
-import { Default_Row_Height } from './const';
-import { Order, SortConfig, SortOption, SortState, StkTableColumn, TagType, UniqKeyProp } from './types/index';
+import { DEFAULT_ROW_HEIGHT } from './const';
+import { HighlightConfig, Order, SortConfig, SortOption, SortState, StkTableColumn, TagType, UniqKeyProp } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useFixedCol } from './useFixedCol';
@@ -289,6 +293,8 @@ const props = withDefaults(
         sortConfig?: SortConfig<DT>;
         /** 隐藏头部title。可传入dataIndex数组 */
         hideHeaderTitle?: boolean | string[];
+        /** 高亮配置 */
+        highlightConfig?: HighlightConfig;
     }>(),
     {
         width: '',
@@ -298,7 +304,7 @@ const props = withDefaults(
         maxWidth: '',
         headless: false,
         theme: 'light',
-        rowHeight: Default_Row_Height,
+        rowHeight: DEFAULT_ROW_HEIGHT,
         headerRowHeight: null,
         virtual: false,
         virtualX: false,
@@ -326,6 +332,7 @@ const props = withDefaults(
             stringLocaleCompare: true,
         }),
         hideHeaderTitle: false,
+        highlightConfig: () => ({}),
     },
 );
 
@@ -497,7 +504,7 @@ const { getFixedStyle } = useFixedStyle<DT>({
 /**
  * 高亮行，高亮单元格
  */
-const { highlightRowStore, setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer });
+const { highlightRowStore, highlightFrom, setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer });
 
 if (props.autoResize) {
     useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs: 200 });

package/src/StkTable/const.ts

@@ -1,18 +1,23 @@
-export const Default_Col_Width = '100';
+export const DEFAULT_COL_WIDTH = '100';
 
-export const Default_Table_Height = 100;
-export const Default_Table_Width = 200;
-export const Default_Row_Height = 28;
+export const DEFAULT_TABLE_HEIGHT = 100;
+export const DEFAULT_TABLE_WIDTH = 200;
+export const DEFAULT_ROW_HEIGHT = 28;
 
 /** 高亮背景色 */
-export const Highlight_Color = {
+export const HIGHLIGHT_COLOR = {
     light: { from: '#71a2fd', to: '#fff' },
     dark: { from: '#1e4c99', to: '#181c21' },
 };
 /** 高亮持续时间 */
-export const Highlight_Duration = 2000;
+export const HIGHLIGHT_DURATION = 2000;
 /** 高亮变更频率 */
-export const Highlight_Color_Change_Freq = 100;
+export const HIGHLIGHT_FREQ = 100;
+
+/** 高亮行class */
+export const HIGHLIGHT_ROW_CLASS = 'highlight-row';
+/** 高连单元格class */
+export const HIGHLIGHT_CELL_CLASS = 'highlight-cell';
 
 let _chromeVersion = 0;
 try {
@@ -24,4 +29,4 @@ try {
     console.error('Cannot get Chrome version', e);
 }
 /** 是否兼容低版本模式 */
-export const Is_Legacy_Mode = _chromeVersion < 56;
+export const IS_LEGACY_MODE = _chromeVersion < 56;

package/src/StkTable/style.less

@@ -23,6 +23,7 @@
     --bg-border-bottom: linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
     --bg-border-left: linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
     --highlight-color: #71a2fd;
+    --highlight-duration: 2s;
     /* 斑马纹颜色*/
     --stripe-bgc: #fafafc;
 
@@ -211,7 +212,7 @@
             }
 
             &.highlight-cell {
-                animation: stk-table-dim 2s linear;
+                animation: stk-table-dim var(--highlight-duration) linear;
             }
 
             &.text-overflow {
@@ -351,7 +352,7 @@
 
                 /* td inherit tr bgc*/
                 &.highlight-row {
-                    animation: stk-table-dim 2s linear;
+                    animation: stk-table-dim var(--highlight-duration) linear;
                 }
 
                 /* &.highlight-row-transition {

package/src/StkTable/types/index.ts

@@ -99,3 +99,16 @@ export const enum TagType {
     TH,
     TD,
 }
+
+/** 高亮配置 */
+export type HighlightConfig = {
+    /** 高亮持续时间(s) */
+    duration?: number;
+    /** 高亮背景色 */
+    color?: {
+        light?: { from: string; to: string };
+        dark?: { from: string; to: string };
+    };
+    /** 高亮帧率(虚拟滚动生效) */
+    fps?: number;
+};

package/src/StkTable/useFixedStyle.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, Ref, computed } from 'vue';
-import { Is_Legacy_Mode } from './const';
+import { IS_LEGACY_MODE } from './const';
 import { StkTableColumn, TagType } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 import { getColWidth } from './utils';
@@ -77,14 +77,14 @@ export function useFixedStyle<DT extends Record<string, any>>({
         const style: CSSProperties = {};
         const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
 
-        if (Is_Legacy_Mode) {
+        if (IS_LEGACY_MODE) {
             style.position = 'relative';
         } else {
             style.position = 'sticky';
         }
         if (tagType === TagType.TH) {
             // TH
-            if (Is_Legacy_Mode) {
+            if (IS_LEGACY_MODE) {
                 style.top = virtualScroll.value.scrollTop + depth * props.rowHeight + 'px';
             } else {
                 style.top = depth * props.rowHeight + 'px';
@@ -96,7 +96,7 @@ export function useFixedStyle<DT extends Record<string, any>>({
         }
 
         if (fixed === 'left' || fixed === 'right') {
-            if (Is_Legacy_Mode) {
+            if (IS_LEGACY_MODE) {
                 if (isFixedLeft) {
                     if (virtualX_on.value) style.left = virtualScrollX.value.scrollLeft - virtualScrollX.value.offsetLeft + 'px';
                     else style.left = virtualScrollX.value.scrollLeft + 'px';

package/src/StkTable/useHighlight.ts

@@ -1,10 +1,10 @@
 import { interpolateRgb } from 'd3-interpolate';
 import { Ref, computed, ref } from 'vue';
-import { Highlight_Color, Highlight_Color_Change_Freq, Highlight_Duration } from './const';
-import { UniqKey } from './types';
+import { HIGHLIGHT_CELL_CLASS, HIGHLIGHT_COLOR, HIGHLIGHT_DURATION, HIGHLIGHT_FREQ, HIGHLIGHT_ROW_CLASS } from './const';
+import { HighlightConfig, UniqKey } from './types';
 
 type Params = {
-    props: { theme: 'light' | 'dark'; virtual: boolean; dataSource: any[] };
+    props: any;
     tableContainer: Ref<HTMLElement | undefined>;
 };
 
@@ -15,23 +15,28 @@ type HighlightRowStore = {
     bgc_progress: number;
 };
 
-/** 高亮行class */
-const HIGHLIGHT_ROW_CLASS = 'highlight-row';
-/** 高连单元格class */
-const HIGHLIGHT_CELL_CLASS = 'highlight-cell';
-
 /**
  * 高亮单元格，行
  * row中新增_bgc_progress_ms 属性控制高亮状态,_bgc控制颜色
  */
 export function useHighlight({ props, tableContainer }: Params) {
+    const config: HighlightConfig = props.highlightConfig;
     /**
      * 高亮行记录 key-rowKey, value-obj
      */
     const highlightRowStore = ref<Record<UniqKey, HighlightRowStore>>({});
-
-    const highlightFrom = computed(() => Highlight_Color[props.theme].from);
-    const highlightTo = computed(() => Highlight_Color[props.theme].to);
+    /** 持续时间 */
+    const duration = config.duration ? config.duration * 1000 : HIGHLIGHT_DURATION;
+    /** 频率 */
+    const frequency = config.fps ? 1000 / config.fps : HIGHLIGHT_FREQ;
+    const highlightColor = {
+        light: Object.assign(HIGHLIGHT_COLOR.light, config.color?.light),
+        dark: Object.assign(HIGHLIGHT_COLOR.dark, config.color?.dark),
+    };
+    /** 高亮开始 */
+    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));
 
     /** 存放高亮行的key*/
@@ -67,7 +72,7 @@ export function useHighlight({ props, tableContainer }: Params) {
                     //   }
                     const highlightItem = highlightRowStore.value[rowKeyValue];
                     /** 经过的时间 ÷ 高亮持续时间 计算出 颜色过渡进度 (0-1) */
-                    const progress = (nowTs - highlightItem.bgc_progress_ms) / Highlight_Duration;
+                    const progress = (nowTs - highlightItem.bgc_progress_ms) / duration;
                     if (0 < progress && progress < 1) {
                         highlightItem.bgc = highlightInter.value(progress);
                     } else {
@@ -86,39 +91,46 @@ export function useHighlight({ props, tableContainer }: Params) {
                     // 没有则停止循环
                     calcHighlightDimLoop = false;
                 }
-            }, Highlight_Color_Change_Freq);
+            }, frequency);
         };
         recursion();
     }
 
-    /** 高亮一个单元格 */
-    function setHighlightDimCell(rowKeyValue: string, dataIndex: string) {
+    /**
+     *  高亮一个单元格
+     * @param rowKeyValue 一行的key
+     * @param dataIndex 列key
+     * @param option.className 高亮类名
+     */
+    function setHighlightDimCell(rowKeyValue: string, dataIndex: string, option: { className?: string } = {}) {
         // TODO: 支持动态计算高亮颜色。不易实现。需记录每一个单元格的颜色情况。
         const cellEl = tableContainer.value?.querySelector<HTMLElement>(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
+        const opt = { className: HIGHLIGHT_CELL_CLASS, ...option };
         if (!cellEl) return;
-        if (cellEl.classList.contains(HIGHLIGHT_CELL_CLASS)) {
-            cellEl.classList.remove(HIGHLIGHT_CELL_CLASS);
+        if (cellEl.classList.contains(opt.className)) {
+            cellEl.classList.remove(opt.className);
             void cellEl.offsetHeight; // 通知浏览器重绘
         }
-        cellEl.classList.add(HIGHLIGHT_CELL_CLASS);
+        cellEl.classList.add(opt.className);
         window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
         highlightDimCellsTimeout.set(
             rowKeyValue,
             window.setTimeout(() => {
-                cellEl.classList.remove(HIGHLIGHT_CELL_CLASS);
+                cellEl.classList.remove(opt.className);
                 highlightDimCellsTimeout.delete(rowKeyValue);
-            }, Highlight_Duration),
+            }, duration),
         );
     }
 
     /**
      * 高亮一行
-     * @param rowKeyValues
+     * @param rowKeyValues 行唯一键的数组
      * @param option.useCss 虚拟滚动时，高亮由js控制。如果仍想使用css 关键帧控制，则配置此项
      */
-    function setHighlightDimRow(rowKeyValues: UniqKey[], option: { useCss?: boolean } = {}) {
+    function setHighlightDimRow(rowKeyValues: UniqKey[], option: { useCss?: boolean; className?: string } = {}) {
         if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
-        if (props.virtual && !option.useCss) {
+        const { className, useCss } = { className: HIGHLIGHT_ROW_CLASS, useCss: false, ...option };
+        if (props.virtual && !useCss) {
             // --------虚拟滚动用js计算颜色渐变的高亮方案
             const nowTs = Date.now(); // 重置渐变进度
             for (let i = 0; i < rowKeyValues.length; i++) {
@@ -141,8 +153,8 @@ export function useHighlight({ props, tableContainer }: Params) {
                 const rowKeyValue = rowKeyValues[i];
                 const rowEl = tableContainer.value?.querySelector<HTMLTableRowElement>(`[data-row-key="${rowKeyValue}"]`);
                 if (!rowEl) continue;
-                if (rowEl.classList.contains(HIGHLIGHT_ROW_CLASS)) {
-                    rowEl.classList.remove(HIGHLIGHT_ROW_CLASS);
+                if (rowEl.classList.contains(className)) {
+                    rowEl.classList.remove(className);
                     needRepaint = true;
                 }
                 rowElTemp.push(rowEl);
@@ -151,20 +163,21 @@ export function useHighlight({ props, tableContainer }: Params) {
                 highlightDimRowsTimeout.set(
                     rowKeyValue,
                     window.setTimeout(() => {
-                        rowEl.classList.remove(HIGHLIGHT_ROW_CLASS);
+                        rowEl.classList.remove(className);
                         highlightDimRowsTimeout.delete(rowKeyValue); // 回收内存
-                    }, Highlight_Duration),
+                    }, duration),
                 );
             }
             if (needRepaint) {
                 void tableContainer.value?.offsetWidth; //强制浏览器重绘
             }
-            rowElTemp.forEach(el => el.classList.add(HIGHLIGHT_ROW_CLASS)); // 统一添加动画
+            rowElTemp.forEach(el => el.classList.add(className)); // 统一添加动画
         }
     }
 
     return {
         highlightRowStore,
+        highlightFrom,
         setHighlightDimRow,
         setHighlightDimCell,
     };

package/src/StkTable/useVirtualScroll.ts

@@ -1,5 +1,5 @@
 import { Ref, ShallowRef, computed, ref } from 'vue';
-import { Default_Table_Height, Default_Table_Width } from './const';
+import { DEFAULT_TABLE_HEIGHT, DEFAULT_TABLE_WIDTH } from './const';
 import { StkTableColumn } from './types';
 import { getColWidth } from './utils';
 
@@ -145,7 +145,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         if (typeof height === 'number') {
             containerHeight = height;
         } else {
-            containerHeight = offsetHeight || Default_Table_Height;
+            containerHeight = offsetHeight || DEFAULT_TABLE_HEIGHT;
         }
         const { headless, headerRowHeight } = props;
         let pageSize = Math.ceil(containerHeight / rowHeight);
@@ -162,7 +162,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         if (!props.virtualX) return;
         const { offsetWidth, scrollLeft } = tableContainer.value || {};
         // scrollTo(null, 0);
-        virtualScrollX.value.containerWidth = offsetWidth || Default_Table_Width;
+        virtualScrollX.value.containerWidth = offsetWidth || DEFAULT_TABLE_WIDTH;
         updateVirtualScrollX(scrollLeft);
     }
     /**
@@ -239,12 +239,16 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         let offsetLeft = 0;
 
         let colWidthSum = 0;
+        let leftColWidthSum = 0;
         for (let colIndex = 0; colIndex < headerLength; colIndex++) {
             startIndex++;
             const col = tableHeaderLast.value[colIndex];
-            // fixed left 不进入计算列宽
-            if (col.fixed === 'left') continue;
             const colWidth = getColWidth(col);
+            // fixed left 不进入计算列宽
+            if (col.fixed === 'left') {
+                leftColWidthSum += colWidth;
+                continue;
+            }
             colWidthSum += colWidth;
             // 列宽（非固定列）加到超过scrollLeft的时候，表示startIndex从上一个开始下标
             if (colWidthSum >= sLeft) {
@@ -255,13 +259,14 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         }
         // -----
         colWidthSum = 0;
+        const containerWidth = virtualScrollX.value.containerWidth - leftColWidthSum;
         let endIndex = headerLength;
         for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
             const col = tableHeaderLast.value[colIndex];
             colWidthSum += getColWidth(col);
             // 列宽大于容器宽度则停止
-            if (colWidthSum >= virtualScrollX.value.containerWidth) {
-                endIndex = colIndex + 1; // TODO:预渲染的列数
+            if (colWidthSum >= containerWidth) {
+                endIndex = colIndex + 1; // 由于slice[start,end)，要加1
                 break;
             }
         }

package/src/StkTable/utils.ts

@@ -1,4 +1,4 @@
-import { Default_Col_Width } from './const';
+import { DEFAULT_COL_WIDTH } from './const';
 import { Order, SortConfig, SortOption, SortState, StkTableColumn } from './types';
 
 /** 是否空值 */
@@ -184,7 +184,7 @@ export function howDeepTheHeader(arr: StkTableColumn<any>[], level = 1) {
 
 /** 获取列宽 */
 export function getColWidth(col: StkTableColumn<any> | null): number {
-    const val = col?.width ?? Default_Col_Width;
+    const val = col?.width ?? DEFAULT_COL_WIDTH;
     if (typeof val === 'number') {
         return Math.floor(val);
     }