stk-table-vue 0.8.4 → 0.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "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,15 +36,14 @@
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
-        <!-- 这个元素用于整数行虚拟滚动时，撑开父容器的高度） -->
+        
         <div
             v-if="isSRBRActive && virtual"
             class="row-by-row-table-height"
             :style="{ height: dataSourceCopy.length * virtualScroll.rowHeight + 'px' }"
-        ></div>
+        ><!-- 这个元素用于整数行虚拟滚动时，撑开父容器的高度） --></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)"
@@ -101,17 +98,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 +135,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 +642,6 @@ const emits = defineEmits<{
 // }>();
 
 const tableContainerRef = ref<HTMLDivElement>();
-const theadRef = ref<HTMLElement>();
 const colResizeIndicatorRef = ref<HTMLDivElement>();
 const trRef = ref<HTMLTableRowElement[]>();
 
@@ -1334,7 +1325,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 +1347,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);
     }