stk-table-vue 0.3.0 → 0.3.2

package/src/StkTable/style.less

@@ -14,6 +14,7 @@
     --border-color: #e8e8f4;
     --border-width: 1px;
     --td-bgc: #fff;
+    --td-hover-color: #71a2fd;
     --th-bgc: #fafafc;
     --th-color: #272841;
     --tr-active-bgc: rgb(230, 247, 255);
@@ -24,7 +25,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;
 
@@ -48,11 +49,13 @@
     border-left: 1px solid var(--border-color);
     /* 下面border用于表格内容不满高度时，绘制表格边界线 */
     background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+
     /**深色模式 */
     &.dark {
         --th-bgc: #202029;
         --th-color: #C0C0D1;
         --td-bgc: #1b1b24;
+        --td-hover-color: #70a6ff;
         --border-color: #292933;
         --tr-active-bgc: #283f63;
         --tr-hover-bgc: #1a2b46;
@@ -144,238 +147,270 @@
         }
     }
 
+    /* 斑马纹*/
     &.stripe {
 
-        /* 斑马纹*/
-        tbody {
-            tr:nth-child(odd) {
-                background-color: var(--stripe-bgc);
-            }
+        tbody tr:nth-child(odd) {
+            background-color: var(--stripe-bgc);
         }
     }
 
-    /** 列宽调整指示器 */
-    .column-resize-indicator {
-        width: 0;
-        height: 100%;
-        border-left: 2px solid var(--col-resize-indicator-color);
-        position: absolute;
-        z-index: 10;
-        display: none;
-        pointer-events: none;
+    /* 单元格悬浮 */
+    &.cell-hover tbody td:hover {
+        box-shadow: inset 0 0 0 2px var(--td-hover-color);
     }
 
-    .stk-table-main {
-        border-spacing: 0;
-        border-collapse: separate;
-        width: fit-content;
-        /* 不加会导致width 超过100%时为100%，行hover高亮会断开*/
-        min-width: 100%;
-
-        &.fixed-mode {
-            table-layout: fixed;
-            min-width: min-content;
+    /* td 溢出*/
+    &.text-overflow {
+        .table-cell-wrapper {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
+    }
 
-        th,
-        td {
-            z-index: 1;
-            font-size: 14px;
-            box-sizing: border-box;
-            padding: 0 var(--cell-padding-x);
+    /* th 溢出*/
+    &.header-text-overflow {
+        .table-header-cell-wrapper {
+            white-space: nowrap;
+            overflow: hidden;
         }
 
-        th {
-            color: var(--th-color);
-            background-color: var(--th-bgc);
-
-            &.sortable {
-                cursor: pointer;
-            }
+        .table-header-title {
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
 
-            &.text-overflow {
-                .table-header-cell-wrapper {
-                    white-space: nowrap;
-                    overflow: hidden;
-                }
+    /**虚拟滚动模式 */
+    &.virtual {
 
-                .table-header-title {
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-            }
+        /* 为不影响布局，表头行高要定死*/
+        .table-header-cell-wrapper {
+            overflow: hidden;
+            max-height: var(--header-row-height);
         }
 
-        td {
-            &.fixed-cell {
-                background-color: inherit;
-                /* 防止横向滚动后透明*/
-            }
-
-            &.highlight-cell {
-                animation: stk-table-dim var(--highlight-duration) var(--highlight-easing);
-            }
+        tbody {
+            td {
+                height: var(--row-height);
+                line-height: 1;
 
-            &.text-overflow {
                 .table-cell-wrapper {
-                    white-space: nowrap;
+                    max-height: var(--row-height);
                     overflow: hidden;
-                    text-overflow: ellipsis;
                 }
             }
-            
-            &.seq-column{
-                text-align: center;
-            }
         }
 
-        /*固定列阴影-左*/
-        .fixed-cell--left {
-            --shadow-rotate: 90deg;
+        .padding-top-tr td {
+            height: 0;
+        }
+    }
 
-            &.fixed-cell--shadow::after {
-                right: -10px;
-            }
+    &.virtual-x {
+        .virtual-x-left {
+            padding: 0;
         }
+    }
 
-        /*固定列阴影-右*/
-        .fixed-cell--right {
-            --shadow-rotate: -90deg;
+    th,
+    td {
+        z-index: 1;
+        font-size: 14px;
+        box-sizing: border-box;
+        padding: 0 var(--cell-padding-x);
+    }
 
-            &.fixed-cell--shadow::after {
-                left: -10px;
-            }
-        }
+    th {
+        color: var(--th-color);
+        background-color: inherit;
 
-        /*固定列阴影*/
-        .fixed-cell--shadow::after {
-            content: '';
-            width: 10px;
-            height: 100%;
-            top: 0px;
-            position: absolute;
-            pointer-events: none;
-            background-image: linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to)),
+        &.sortable {
+            cursor: pointer;
         }
 
-        thead {
-            tr {
-                height: var(--header-row-height);
+        &:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter {
+            .arrow-up {
+                fill: var(--sort-arrow-hover-color);
+            }
 
-                &:first-child th {
-                    position: sticky;
-                    top: 0;
-                }
+            .arrow-down {
+                fill: var(--sort-arrow-hover-color);
             }
         }
 
-        th {
+        &.sorter-desc .table-header-sorter {
+            display: initial;
 
-            &:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter {
-                .arrow-up {
-                    fill: var(--sort-arrow-hover-color);
-                }
+            .arrow-up {
+                fill: var(--sort-arrow-active-sub-color);
+            }
 
-                .arrow-down {
-                    fill: var(--sort-arrow-hover-color);
-                }
+            .arrow-down {
+                fill: var(--sort-arrow-active-color);
             }
+        }
 
-            &.sorter-desc .table-header-sorter {
-                display: initial;
+        &.sorter-asc .table-header-sorter {
+            display: initial;
 
-                .arrow-up {
-                    fill: var(--sort-arrow-active-sub-color);
-                }
+            .arrow-up {
+                fill: var(--sort-arrow-active-color);
+            }
 
-                .arrow-down {
-                    fill: var(--sort-arrow-active-color);
-                }
+            .arrow-down {
+                fill: var(--sort-arrow-active-sub-color);
             }
+        }
 
-            &.sorter-asc .table-header-sorter {
-                display: initial;
+    }
 
-                .arrow-up {
-                    fill: var(--sort-arrow-active-color);
-                }
+    thead {
+        tr {
+            background-color: var(--th-bgc);
+            height: var(--header-row-height);
 
-                .arrow-down {
-                    fill: var(--sort-arrow-active-sub-color);
-                }
+            &:first-child th {
+                position: sticky;
+                top: 0;
             }
+        }
+    }
 
+    /* stk-table-main 这层为了增加选择器优先级，防止被斑马纹颜色覆盖*/
+    .stk-table-main tbody tr {
+        background-color: var(--td-bgc);
+        height: var(--row-height);
+        /** 一行分层，有利于高亮行重绘
+        transform: translateZ(0);*/
 
+        &:hover {
+            background-color: var(--tr-hover-bgc);
         }
 
-        .table-header-cell-wrapper {
-            max-width: 100%;
-            /*最大宽度不超过列宽*/
-            display: inline-flex;
-            align-items: center;
+        &.active {
+            background-color: var(--tr-active-bgc);
         }
+    }
 
-        .table-header-title {
-            overflow: hidden;
-            align-self: flex-start;
-        }
 
-        .table-header-sorter {
-            flex-shrink: 0;
-            margin-left: 4px;
-            width: 16px;
-            height: 16px;
-            display: none;
+    /** 列宽调整指示器 */
+    .column-resize-indicator {
+        width: 0;
+        height: 100%;
+        border-left: 2px solid var(--col-resize-indicator-color);
+        position: absolute;
+        z-index: 10;
+        display: none;
+        pointer-events: none;
+    }
 
-            .arrow-up,
-            .arrow-down {
-                fill: var(--sort-arrow-color);
-            }
+    .stk-table-main {
+        border-spacing: 0;
+        border-collapse: separate;
+        width: fit-content;
+        /* 不加会导致width 超过100%时为100%，行hover高亮会断开*/
+        min-width: 100%;
+
+        &.fixed-mode {
+            table-layout: fixed;
+            min-width: min-content;
         }
+    }
 
-        .table-header-resizer {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            cursor: col-resize;
-            width: var(--resize-handle-width);
+    .fixed-cell {
+        background-color: inherit;
+        /* 防止横向滚动后透明*/
+    }
 
-            &.left {
-                left: 0;
-            }
+    .highlight-cell {
+        animation: stk-table-dim var(--highlight-duration);
+        animation-timing-function: var(--highlight-timing-function);
+        /* 必须分开些，否则var(step(x))不兼容旧浏览器*/
+    }
 
-            &.right {
-                right: 0;
-            }
+    .seq-column {
+        text-align: center;
+    }
+
+    /*固定列阴影-左*/
+    .fixed-cell--left {
+        --shadow-rotate: 90deg;
+
+        &.fixed-cell--shadow::after {
+            right: -10px;
         }
+    }
 
-        tbody {
+    /*固定列阴影-右*/
+    .fixed-cell--right {
+        --shadow-rotate: -90deg;
 
-            tr {
-                background-color: var(--td-bgc);
-                height: var(--row-height);
-                /** 一行分层，有利于高亮行重绘*/
-                transform: translateZ(0); 
+        &.fixed-cell--shadow::after {
+            left: -10px;
+        }
+    }
 
-                /* td inherit tr bgc*/
-                &.highlight-row {
-                    animation: stk-table-dim var(--highlight-duration) var(--highlight-easing);
-                }
-                
+    /*固定列阴影*/
+    .fixed-cell--shadow::after {
+        content: '';
+        width: 10px;
+        height: 100%;
+        top: 0px;
+        position: absolute;
+        pointer-events: none;
+        background-image: linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to)),
+    }
 
-                &.hover,
-                &:hover {
-                    background-color: var(--tr-hover-bgc);
-                }
+    .table-header-cell-wrapper {
+        max-width: 100%;
+        /*最大宽度不超过列宽*/
+        display: inline-flex;
+        align-items: center;
+    }
 
-                &.active {
-                    background-color: var(--tr-active-bgc);
-                }
-            }
+    .table-header-title {
+        overflow: hidden;
+        align-self: flex-start;
+    }
 
+    .table-header-sorter {
+        flex-shrink: 0;
+        margin-left: 4px;
+        width: 16px;
+        height: 16px;
+        display: none;
+
+        .arrow-up,
+        .arrow-down {
+            fill: var(--sort-arrow-color);
         }
     }
 
+    .table-header-resizer {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        cursor: col-resize;
+        width: var(--resize-handle-width);
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: 0;
+        }
+    }
+
+    /* td inherit tr bgc*/
+    .highlight-row {
+        animation: stk-table-dim var(--highlight-duration);
+        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
+        animation-timing-function: var(--highlight-timing-function);
+    }
+
     .stk-table-no-data {
         background-color: var(--table-bgc);
         line-height: var(--row-height);
@@ -395,40 +430,4 @@
         }
     }
 
-    /**虚拟滚动模式 */
-    &.virtual {
-
-        /* 为不影响布局，表头行高要定死*/
-        .table-header-cell-wrapper {
-            overflow: hidden;
-            max-height: var(--header-row-height);
-        }
-
-        tbody {
-            position: relative;
-
-            tr {
-
-                td {
-                    height: var(--row-height);
-                    line-height: 1;
-
-                    .table-cell-wrapper {
-                        max-height: var(--row-height);
-                        overflow: hidden;
-                    }
-                }
-            }
-        }
-
-        .padding-top-tr td {
-            height: 0;
-        }
-    }
-
-    &.virtual-x {
-        .virtual-x-left {
-            padding: 0;
-        }
-    }
 }

package/src/StkTable/useFixedStyle.ts

@@ -88,7 +88,7 @@ export function useFixedStyle<DT extends Record<string, any>>({
         if (tagType === TagType.TH) {
             // TH
             if (IS_LEGACY_MODE) {
-                style.top = virtualScroll.value.scrollTop + depth * props.rowHeight + 'px';
+                style.top = virtualScroll.value.scrollTop + 'px';
             } else {
                 style.top = depth * props.rowHeight + 'px';
             }

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

@@ -83,7 +83,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(() => {
@@ -184,6 +184,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行
@@ -202,13 +206,11 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         }
         let endIndex = startIndex + pageSize;
         if (props.stripe) {
-            // 由于上方预渲染一行，这里也要预渲染1+1行
-            endIndex += 2;
+            // 由于stripe上方预渲染-1行，这里也要预渲染1+1行
+            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);
         }
@@ -269,13 +271,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;
 }