stk-table-vue 0.3.1 → 0.3.3

package/src/StkTable/useHighlight.ts

@@ -1,6 +1,6 @@
 import { interpolateRgb } from 'd3-interpolate';
 import { Ref, computed } from 'vue';
-import { HIGHLIGHT_CELL_CLASS, HIGHLIGHT_COLOR, HIGHLIGHT_DURATION, HIGHLIGHT_FREQ, HIGHLIGHT_ROW_CLASS, IS_LEGACY_MODE } from './const';
+import { HIGHLIGHT_CELL_CLASS, HIGHLIGHT_COLOR, HIGHLIGHT_DURATION, HIGHLIGHT_FREQ, HIGHLIGHT_ROW_CLASS } from './const';
 import { HighlightConfig, UniqKey } from './types';
 
 type Params = {
@@ -114,7 +114,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
                     /** 经过的时间 ÷ 高亮持续时间 计算出 颜色过渡进度 (0-1) */
                     const progress = (nowTs - highlightStart) / highlightDuration;
                     let bgc = '';
-                    if (0 < progress && progress < 1) {
+                    if (0 <= progress && progress <= 1) {
                         bgc = highlightInter.value(progress);
                     } else {
                         highlightDimRowsJs.delete(rowKeyValue);
@@ -128,7 +128,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
                 } else {
                     // 没有则停止循环
                     calcHighlightDimLoopJs = false;
-                    highlightDimRowsJs.clear();
+                    highlightDimRowsJs.clear(); // TODO: 是否需要 清除
                 }
             }, highlightFrequency);
         };
@@ -198,13 +198,13 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
             ...option,
         };
 
-        const nowTs = Date.now();
         if (method === 'css' || useCss) {
             // -------- use css keyframe
             highlightRowsInCssKeyframe(rowKeyValues, className, duration);
         } else if (method === 'animation') {
             if (props.virtual) {
                 // -------- 用animation 接口实现动画
+                const nowTs = Date.now();
                 for (let i = 0; i < rowKeyValues.length; i++) {
                     const rowKeyValue = rowKeyValues[i];
                     const store: HighlightDimRowStore = { ts: nowTs, visible: false, keyframe, duration };
@@ -222,6 +222,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
             }
         } 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);

package/src/StkTable/useVirtualScroll.ts

@@ -30,8 +30,10 @@ export type VirtualScrollStore = {
 };
 /** 暂存横向虚拟滚动的数据 */
 export type VirtualScrollXStore = {
-    /** 容器宽度 */
+    /** 父容器宽度 */
     containerWidth: number;
+    /** 滚动容器的宽度 */
+    scrollWidth: number;
     /** 开始位置 */
     startIndex: number;
     /** 结束始位置 */
@@ -69,6 +71,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     const virtualScrollX = ref<VirtualScrollXStore>({
         containerWidth: 0,
+        scrollWidth: 0,
         startIndex: 0,
         endIndex: 0,
         offsetLeft: 0,
@@ -83,7 +86,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     const virtual_dataSourcePart = computed(() => {
         if (!virtual_on.value) return dataSourceCopy.value;
         const { startIndex, endIndex } = virtualScroll.value;
-        return dataSourceCopy.value.slice(startIndex, endIndex);
+        return dataSourceCopy.value.slice(startIndex, endIndex + 1);
     });
 
     const virtual_offsetBottom = computed(() => {
@@ -162,10 +165,9 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     }
 
     function initVirtualScrollX() {
-        if (!props.virtualX) return;
-        const { offsetWidth, scrollLeft } = tableContainerRef.value || {};
-        // scrollTo(null, 0);
-        virtualScrollX.value.containerWidth = offsetWidth || DEFAULT_TABLE_WIDTH;
+        const { clientWidth, scrollLeft, scrollWidth } = tableContainerRef.value || {};
+        virtualScrollX.value.containerWidth = clientWidth || DEFAULT_TABLE_WIDTH;
+        virtualScrollX.value.scrollWidth = scrollWidth || DEFAULT_TABLE_WIDTH;
         updateVirtualScrollX(scrollLeft);
     }
     /**
@@ -184,6 +186,10 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
         // 先更新滚动条位置记录，其他地方可能有依赖。(stripe 时ArrowUp/Down滚动依赖)
         virtualScroll.value.scrollTop = sTop;
+
+        // 非虚拟滚动不往下执行
+        if (!virtual_on.value) return;
+
         let startIndex = Math.floor(sTop / rowHeight);
         if (props.stripe) {
             startIndex -= 1; //预渲染1行
@@ -200,15 +206,13 @@ export function useVirtualScroll<DT extends Record<string, any>>({
                 startIndex -= 1; // 奇数-1变成偶数
             }
         }
-        let endIndex = startIndex + pageSize + 1; //预渲染一行 TODO: 是否需要预渲染一行
+        let endIndex = startIndex + pageSize;
         if (props.stripe) {
             // 由于stripe上方预渲染-1行，这里也要预渲染1+1行
-            endIndex += 2;
+            endIndex += 1;
         }
         const offsetTop = startIndex * rowHeight; // startIndex之前的高度
-        if (endIndex > dataSourceCopy.value.length) {
-            endIndex = dataSourceCopy.value.length; // 溢出index修正
-        }
+        endIndex = Math.min(endIndex, dataSourceCopy.value.length); // 溢出index修正
         if (vue2ScrollYTimeout) {
             window.clearTimeout(vue2ScrollYTimeout);
         }
@@ -235,6 +239,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     /** 通过横向滚动条位置，计算横向虚拟滚动的参数 */
     function updateVirtualScrollX(sLeft = 0) {
+        if (!props.virtualX) return;
         const headerLength = tableHeaderLast.value?.length;
         const { scrollLeft } = virtualScrollX.value;
         if (!headerLength) return;
@@ -269,13 +274,12 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             colWidthSum += getCalculatedColWidth(col);
             // 列宽大于容器宽度则停止
             if (colWidthSum >= containerWidth) {
-                endIndex = colIndex + 1; // 由于slice[start,end)，要加1
+                endIndex = colIndex + 1; // slice endIndex + 1
                 break;
             }
         }
-        if (endIndex > headerLength) {
-            endIndex = headerLength;
-        }
+
+        endIndex = Math.min(endIndex, headerLength);
 
         if (vue2ScrollXTimeout) {
             window.clearTimeout(vue2ScrollXTimeout);

package/src/StkTable/utils.ts

@@ -5,7 +5,7 @@ import { Order, SortConfig, SortOption, SortState, StkTableColumn } from './type
 function isEmptyValue(val: any, isNumber?: boolean) {
     let isEmpty = val === null || val === '';
     if (isNumber) {
-        isEmpty ||= typeof val === 'boolean' || Number.isNaN(+val);
+        isEmpty = isEmpty || typeof val === 'boolean' || Number.isNaN(+val);
     }
     return isEmpty;
 }