stk-table-vue 0.3.0 → 0.3.1

package/README.md

@@ -220,11 +220,6 @@ export type StkProps = {
   highlightConfig?: {
     /** 高亮持续时间(s) */
     duration?: number;
-    /** 高亮背景色 */
-    color?: {
-        light?: { from: string; to: string };
-        dark?: { from: string; to: string };
-    };
     /** 高亮帧率(虚拟滚动生效) */
     fps?: number;
   };
@@ -235,6 +230,7 @@ export type StkProps = {
   };
 };
 ```
+
 #### Emits
 ```js
   {
@@ -527,10 +523,10 @@ export type SortConfig<T extends Record<string, any>> = {
 ### 鼠标悬浮表头时，不展示title
 * 将 `StkTableColumn` 中的 `title` 字段置为 "" 空字符串。这样th中就没有title了。
 * 使用 `StkTableColumn` 中的 `customHeaderCell` 属性中，自定义表头渲染。
-### 虚拟滚动高亮性能
-* 虚拟滚动下，高亮默认由js计算背景实现。好处是滚动不影响高亮状态。
-* 在虚拟滚动下，高亮强制使用css @keyframes 实现动画。`setHighlightDimRow`/`setHighlightCellRow` 最后一个参数传入 `{useCss: true}` 即可。
-
+### 高亮性能
+* 在虚拟滚动下高亮强制使用css @keyframes 实现动画。`setHighlightDimRow`/`setHighlightCellRow` 最后一个参数传入 `{method: 'css'}` 即可。（滚动后动画会中断） 
+* 指定 `{method:'animation'}` 在虚拟滚动下使用animation api实现动画。好处是动画流畅，且滚动后动画不中断。
+* 配置 `props.highlightConfig.fps` 指定高亮帧率。降低帧率有利于性能。
 
 ## Other
 * `$*$` 兼容注释

package/lib/stk-table-vue.js

@@ -941,7 +941,7 @@ function useVirtualScroll({
         startIndex -= 1;
       }
     }
-    let endIndex = startIndex + pageSize;
+    let endIndex = startIndex + pageSize + 1;
     if (props.stripe) {
       endIndex += 2;
     }
@@ -1533,7 +1533,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           },
           {
             "--highlight-duration": props.highlightConfig.duration && props.highlightConfig.duration + "s",
-            "--highlight-easing": unref(highlightSteps) ? `steps(${unref(highlightSteps)})` : ""
+            "--highlight-timing-function": unref(highlightSteps) ? `steps(${unref(highlightSteps)})` : ""
           }
         ]),
         onScroll: onTableScroll,

package/lib/style.css

@@ -21,7 +21,7 @@
   --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
   --highlight-color:#71a2fd;
   --highlight-duration:2s;
-  --highlight-easing:linear;
+  --highlight-timing-function:linear;
   --stripe-bgc:#fafafc;
   --sort-arrow-color:#757699;
   --sort-arrow-hover-color:#8f90b5;
@@ -150,7 +150,8 @@
   background-color:inherit;
 }
 .stk-table .stk-table-main td.highlight-cell{
-  animation:stk-table-dim var(--highlight-duration) var(--highlight-easing);
+  animation:stk-table-dim var(--highlight-duration);
+  animation-timing-function:var(--highlight-timing-function);
 }
 .stk-table .stk-table-main td.text-overflow .table-cell-wrapper{
   white-space:nowrap;
@@ -253,7 +254,8 @@
   transform:translateZ(0);
 }
 .stk-table .stk-table-main tbody tr.highlight-row{
-  animation:stk-table-dim var(--highlight-duration) var(--highlight-easing);
+  animation:stk-table-dim var(--highlight-duration);
+  animation-timing-function:var(--highlight-timing-function);
 }
 .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.3.0",
+    "version": "0.3.1",
     "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

@@ -22,7 +22,7 @@
             },
             {
                 '--highlight-duration': props.highlightConfig.duration && props.highlightConfig.duration + 's',
-                '--highlight-easing': highlightSteps ? `steps(${highlightSteps})` : '',
+                '--highlight-timing-function': highlightSteps ? `steps(${highlightSteps})` : '',
             },
         ]"
         @scroll="onTableScroll"

package/src/StkTable/style.less

@@ -24,7 +24,7 @@
     --bg-border-left: linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
     --highlight-color: #71a2fd;
     --highlight-duration: 2s;
-    --highlight-easing: linear;
+    --highlight-timing-function: linear;
     /* 斑马纹颜色*/
     --stripe-bgc: #fafafc;
 
@@ -213,7 +213,8 @@
             }
 
             &.highlight-cell {
-                animation: stk-table-dim var(--highlight-duration) var(--highlight-easing);
+                animation: stk-table-dim var(--highlight-duration);
+                animation-timing-function: var(--highlight-timing-function); /* 必须分开些，否则var(step(x))不兼容旧浏览器*/
             }
 
             &.text-overflow {
@@ -359,7 +360,8 @@
 
                 /* td inherit tr bgc*/
                 &.highlight-row {
-                    animation: stk-table-dim var(--highlight-duration) var(--highlight-easing);
+                    animation: stk-table-dim var(--highlight-duration);
+                    animation-timing-function: var(--highlight-timing-function); /* 必须分开些，否则var(step(x))不兼容旧浏览器*/
                 }
                 
 

package/src/StkTable/useVirtualScroll.ts

@@ -200,9 +200,9 @@ export function useVirtualScroll<DT extends Record<string, any>>({
                 startIndex -= 1; // 奇数-1变成偶数
             }
         }
-        let endIndex = startIndex + pageSize;
+        let endIndex = startIndex + pageSize + 1; //预渲染一行 TODO: 是否需要预渲染一行
         if (props.stripe) {
-            // 由于上方预渲染一行，这里也要预渲染1+1行
+            // 由于stripe上方预渲染-1行，这里也要预渲染1+1行
             endIndex += 2;
         }
         const offsetTop = startIndex * rowHeight; // startIndex之前的高度