stk-table-vue 0.8.4 → 0.8.6

package/lib/style.css

@@ -265,7 +265,8 @@
   background-color:inherit;
 }
 .stk-table .highlight-cell{
-  animation:stk-table-dim var(--highlight-duration);
+  animation-name:stk-table-dim;
+  animation-duration:var(--highlight-duration);
   animation-timing-function:var(--highlight-timing-function);
 }
 .stk-table .seq-column{
@@ -357,7 +358,8 @@
   right:0;
 }
 .stk-table .highlight-row{
-  animation:stk-table-dim var(--highlight-duration);
+  animation-name:stk-table-dim;
+  animation-duration:var(--highlight-duration);
   animation-timing-function:var(--highlight-timing-function);
 }
 .stk-table .stk-table-no-data{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -63,9 +63,9 @@
     "typescript": "^5.8.3",
     "vite": "^7.0.2",
     "vite-plugin-dts": "3.9.1",
-    "vitepress": "^1.6.3",
+    "vitepress": "^1.6.4",
     "vitepress-demo-plugin": "^1.4.5",
-    "vitepress-plugin-llms": "^1.7.0",
+    "vitepress-plugin-llms": "^1.7.5",
     "vitest": "^3.2.4",
     "vue": "^3.5.17",
     "vue-eslint-parser": "^9.4.2"

package/src/StkTable/StkTable.vue

@@ -36,7 +36,7 @@
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
-        <!-- 这个元素用于整数行虚拟滚动时，撑开父容器的高度） -->
+        
         <div
             v-if="isSRBRActive && virtual"
             class="row-by-row-table-height"
@@ -44,7 +44,6 @@
         ></div>
 
         <div v-if="colResizable" ref="colResizeIndicatorRef" class="column-resize-indicator"></div>
-        <!-- 表格主体 -->
         <table
             class="stk-table-main"
             :style="{ width, minWidth, maxWidth }"
@@ -52,15 +51,13 @@
                 'fixed-mode': props.fixedMode,
             }"
         >
-            <thead v-if="!headless" ref="theadRef">
+            <thead v-if="!headless">
                 <tr v-for="(row, rowIndex) in tableHeaders" :key="rowIndex" @contextmenu="onHeaderMenu($event)">
-                    <!-- 这个th用于横向虚拟滚动表格左边距,width、maxWidth 用于兼容低版本浏览器 -->
                     <th
                         v-if="virtualX_on"
                         class="vt-x-left"
                         :style="`min-width:${virtualScrollX.offsetLeft}px;width:${virtualScrollX.offsetLeft}px`"
                     ></th>
-                    <!-- v for中最后一行才用 切割。-->
                     <th
                         v-for="(col, colIndex) in virtualX_on && rowIndex === tableHeaders.length - 1 ? virtualX_columnPart : row"
                         :key="colKeyGen(col)"
@@ -86,7 +83,6 @@
                         @drop="onThDrop"
                         @dragover="onThDragOver"
                     >
-                        <!-- 列宽拖动handler -->
                         <div
                             v-if="colResizeOn(col) && colIndex > 0"
                             class="table-header-resizer left"
@@ -101,17 +97,14 @@
                             </template>
                             <SortIcon v-if="col.sorter" class="table-header-sorter" />
                         </div>
-                        <!-- 列宽拖动handler -->
                         <div v-if="colResizeOn(col)" class="table-header-resizer right" @mousedown="onThResizeMouseDown($event, col)"></div>
                     </th>
-                    <!-- 这个th用于横向虚拟滚动表格右边距 width, min-width 用于兼容低版本浏览器-->
                     <th v-if="virtualX_on" class="vt-x-right" :style="`min-width:${virtualX_offsetRight}px;width:${virtualX_offsetRight}px`"></th>
                 </tr>
             </thead>
 
             <tbody class="stk-tbody-main" @dragover="onTrDragOver" @dragenter="onTrDragEnter" @dragend="onTrDragEnd">
                 <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">
                         <td v-for="col in virtualX_columnPart" :key="colKeyGen(col)" :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"></td>
@@ -141,10 +134,8 @@
                     @mouseleave="onTrMouseLeave($event)"
                     @drop="onTrDrop($event, getRowIndex(rowIndex))"
                 >
-                    <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on" class="vt-x-left"></td>
                     <td v-if="row && row.__EXPANDED_ROW__" :colspan="virtualX_columnPart.length">
-                        <!-- TODO: support wheel -->
                         <div class="table-cell-wrapper">
                             <slot name="expand" :row="row.__EXPANDED_ROW__" :col="row.__EXPANDED_COL__">
                                 {{ row.__EXPANDED_ROW__?.[row.__EXPANDED_COL__.dataIndex] ?? '' }}
@@ -650,7 +641,6 @@ const emits = defineEmits<{
 // }>();
 
 const tableContainerRef = ref<HTMLDivElement>();
-const theadRef = ref<HTMLElement>();
 const colResizeIndicatorRef = ref<HTMLDivElement>();
 const trRef = ref<HTMLTableRowElement[]>();
 
@@ -1092,7 +1082,7 @@ const cellStyleMap = computed(() => {
 });
 
 function getRowIndex(rowIndex: number) {
-    return rowIndex + (virtual_on ? virtualScroll.value.startIndex : 0);
+    return rowIndex + (virtual_on.value ? virtualScroll.value.startIndex : 0);
 }
 
 /** th title */
@@ -1311,13 +1301,13 @@ function onTableWheel(e: WheelEvent) {
      * 只有虚拟滚动时，才要用 wheel 代理scroll，防止滚动过快导致的白屏。
      * 滚动条在边界情况时，not preventDefault 。因为会阻塞父级滚动条滚动。
      */
-    if (virtual_on && deltaY) {
+    if (virtual_on.value && deltaY) {
         if ((deltaY > 0 && !isScrollBottom) || (deltaY < 0 && scrollTop > 0)) {
             e.preventDefault();
         }
         dom.scrollTop += deltaY;
     }
-    if (virtualX_on && deltaX) {
+    if (virtualX_on.value && deltaX) {
         if ((deltaX > 0 && !isScrollRight) || (deltaX < 0 && scrollLeft > 0)) {
             e.preventDefault();
         }
@@ -1334,7 +1324,7 @@ function onTableScroll(e: Event) {
     if (!e?.target) return;
 
     const { scrollTop, scrollLeft } = e.target as HTMLElement;
-    const { scrollTop: vScrollTop, startIndex, endIndex } = virtualScroll.value;
+    const { scrollTop: vScrollTop } = virtualScroll.value;
     const { scrollLeft: vScrollLeft } = virtualScrollX.value;
     const isYScroll = scrollTop !== vScrollTop;
     const isXScroll = scrollLeft !== vScrollLeft;
@@ -1356,6 +1346,7 @@ function onTableScroll(e: Event) {
     }
 
     if (isYScroll) {
+        const {  startIndex, endIndex } = virtualScroll.value;
         emits('scroll', e, { startIndex, endIndex });
     }
     if (isXScroll) {

package/src/StkTable/style.less

@@ -381,7 +381,8 @@
     }
 
     .highlight-cell {
-        animation: stk-table-dim var(--highlight-duration);
+        animation-name: stk-table-dim;
+        animation-duration:  var(--highlight-duration);
         animation-timing-function: var(--highlight-timing-function);
         /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
     }
@@ -504,7 +505,8 @@
 
     /* td inherit tr bgc*/
     .highlight-row {
-        animation: stk-table-dim var(--highlight-duration);
+        animation-name: stk-table-dim;
+        animation-duration: var(--highlight-duration);
         /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
         animation-timing-function: var(--highlight-timing-function);
     }