stk-table-vue 0.0.1-beta.3 → 0.0.1-beta.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 JA+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -109,6 +109,18 @@ export type StkProps = Partial<{
 
     /** 可拖动至最小的列宽 */
     colMinWidth: number;
+
+    /**
+     * 单元格分割线。
+     * 默认横竖都有
+     * "h" - 仅展示横线
+     * "v" - 仅展示竖线
+     * "body-v" - 仅表体展示竖线
+     */
+    bordered: boolean | 'h' | 'v' | 'body-v';
+
+    /** 自动重新计算虚拟滚动高度宽度。默认true */
+    autoResize: boolean;
 }>;
 ```
 

package/lib/src/StkTable/StkTable.vue.d.ts

@@ -1,12 +1,9 @@
+import { SortOption, StkTableColumn } from './types/index';
 /**
- * @author JA+
- * 不支持低版本浏览器非虚拟滚动表格的表头固定，列固定，因为会卡。
- * TODO:存在的问题：
- * [] column.dataIndex 作为唯一键，不能重复
- * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
- * [] highlight-row 颜色不能恢复到active的颜色
+ * 初始化虚拟滚动参数
+ * @param {number} [height] 虚拟滚动的高度
  */
-import { SortOption, StkTableColumn } from '../StkTable/types/index';
+declare function initVirtualScroll(height?: number): void;
 /**
  * 选中一行，
  * @param {string} rowKey
@@ -43,14 +40,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minWidth: string;
     maxWidth: string;
     fixedMode: boolean;
-    headless: boolean;
+    headless: boolean; /** 排序切换顺序 */
     theme: "light" | "dark";
     virtual: boolean;
     virtualX: boolean;
     columns: StkTableColumn<any>[];
     dataSource: any[];
-    rowKey: import('../StkTable/types/index').UniqKey;
-    colKey: import('../StkTable/types/index').UniqKey;
+    rowKey: import("./types/index").UniqKey;
+    colKey: import("./types/index").UniqKey;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -62,7 +59,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: (row: any, i: number) => string;
     colResizable: boolean;
     colMinWidth: number;
-    border: boolean | "horizontal";
+    bordered: boolean | "h" | "v" | "body-v";
 }>>, {
     width: string;
     fixedMode: boolean;
@@ -87,8 +84,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: () => "";
     colResizable: boolean;
     colMinWidth: number;
-    border: boolean;
+    bordered: boolean;
 }>, {
+    initVirtualScroll: typeof initVirtualScroll;
+    initVirtualScrollX: () => void;
+    initVirtualScrollY: (height?: number | undefined) => void;
     setCurrentRow: typeof setCurrentRow;
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
     setHighlightDimRow: (rowKeyValues: (string | number)[]) => void;
@@ -115,14 +115,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minWidth: string;
     maxWidth: string;
     fixedMode: boolean;
-    headless: boolean;
+    headless: boolean; /** 排序切换顺序 */
     theme: "light" | "dark";
     virtual: boolean;
     virtualX: boolean;
     columns: StkTableColumn<any>[];
     dataSource: any[];
-    rowKey: import('../StkTable/types/index').UniqKey;
-    colKey: import('../StkTable/types/index').UniqKey;
+    rowKey: import("./types/index").UniqKey;
+    colKey: import("./types/index").UniqKey;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -134,7 +134,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: (row: any, i: number) => string;
     colResizable: boolean;
     colMinWidth: number;
-    border: boolean | "horizontal";
+    bordered: boolean | "h" | "v" | "body-v";
 }>>, {
     width: string;
     fixedMode: boolean;
@@ -159,7 +159,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: () => "";
     colResizable: boolean;
     colMinWidth: number;
-    border: boolean;
+    bordered: boolean;
 }>>> & {
     onScroll?: ((...args: any[]) => any) | undefined;
     "onTh-drag-start"?: ((...args: any[]) => any) | undefined;
@@ -178,7 +178,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     width: string;
     minWidth: string;
     maxWidth: string;
-    colKey: import('../StkTable/types/index').UniqKey;
+    colKey: import("./types/index").UniqKey;
     fixedMode: boolean;
     headless: boolean;
     theme: "light" | "dark";
@@ -186,7 +186,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     virtualX: boolean;
     columns: StkTableColumn<any>[];
     dataSource: any[];
-    rowKey: import('../StkTable/types/index').UniqKey;
+    rowKey: import("./types/index").UniqKey;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -198,7 +198,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: (row: any, i: number) => string;
     colResizable: boolean;
     colMinWidth: number;
-    border: boolean | "horizontal";
+    bordered: boolean | "h" | "v" | "body-v";
 }, {}>, {
     tableHeader?(_: {
         column: StkTableColumn<any>;

package/lib/src/StkTable/index.d.ts

@@ -1,2 +1,3 @@
 export { default as StkTable } from './StkTable.vue';
 export { tableSort, insertToOrderedArray } from './utils';
+export type { StkTableColumn } from './types/index';

package/lib/src/StkTable/types/index.d.ts

@@ -113,8 +113,10 @@ export type StkProps = Partial<{
     /**
      * 单元格分割线。
      * 默认横竖都有
-     * horizontal - 仅展示横线
+     * "h" - 仅展示横线
+     * "v" - 仅展示竖线
+     * "body-v" - 仅表体展示竖线
      */
-    border: boolean | 'horizontal';
+    bordered: boolean | 'h' | 'v' | 'body-v';
 }>;
 export {};

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { ref, onMounted, onBeforeUnmount, computed, defineComponent, shallowRef, watch, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vShow, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, createTextVNode, pushScopeId, popScopeId } from "vue";
+import { ref, onMounted, onBeforeUnmount, computed, defineComponent, shallowRef, watch, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vShow, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
 const Default_Col_Width = "100";
 const Default_Table_Height = 100;
@@ -492,7 +492,6 @@ function howDeepTheColumn(arr, level = 1) {
   });
   return Math.max(...levels);
 }
-const _withScopeId = (n) => (pushScopeId("data-v-a99d823a"), n = n(), popScopeId(), n);
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
 const _hoisted_3 = { class: "table-header-cell-wrapper" };
@@ -501,7 +500,7 @@ const _hoisted_5 = {
   key: 2,
   class: "table-header-sorter"
 };
-const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_6 = /* @__PURE__ */ createElementVNode("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16px",
   height: "16px",
@@ -519,7 +518,7 @@ const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElem
       points: "8 10 4.8 14 11.2 14"
     })
   ])
-], -1));
+], -1);
 const _hoisted_7 = [
   _hoisted_6
 ];
@@ -564,7 +563,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     rowClassName: { type: Function, default: () => "" },
     colResizable: { type: Boolean, default: false },
     colMinWidth: { default: 10 },
-    border: { type: [Boolean, String], default: true }
+    bordered: { type: [Boolean, String], default: true }
   },
   emits: [
     "sort-change",
@@ -904,6 +903,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return toRaw(dataSourceCopy.value);
     }
     __expose({
+      initVirtualScroll,
+      initVirtualScrollX,
+      initVirtualScrollY,
       setCurrentRow,
       setHighlightDimCell,
       setHighlightDimRow,
@@ -922,8 +924,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           dark: _ctx.theme === "dark",
           headless: _ctx.headless,
           "is-col-resizing": unref(isColResizing),
-          border: props.border,
-          "border-horizontal": props.border === "horizontal"
+          border: props.bordered,
+          "border-h": props.bordered === "h",
+          "border-v": props.bordered === "v",
+          "border-body-v": props.bordered === "body-v"
         }]),
         style: normalizeStyle(_ctx.virtual && { "--row-height": unref(virtualScroll).rowHeight + "px" }),
         onScroll: onTableScroll,
@@ -992,7 +996,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         column: col
                       }, () => [
                         createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)
-                      ], true),
+                      ]),
                       col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : createCommentVNode("", true),
                       _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
                         key: 3,
@@ -1083,22 +1087,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "empty", {}, () => [
             createTextVNode("暂无数据")
-          ], true)
+          ])
         ], 2)) : createCommentVNode("", true)
       ], 38);
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const StkTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a99d823a"]]);
 export {
-  StkTable,
+  _sfc_main as StkTable,
   insertToOrderedArray,
   tableSort
 };

package/lib/style.css

@@ -1,4 +1,4 @@
-.stk-table[data-v-a99d823a] {
+.stk-table {
   --row-height: 28px;
   --cell-padding-x: 8px;
   --resize-handle-width: 4px;
@@ -28,7 +28,7 @@
   /** 列宽调整指示器 */
   /**虚拟滚动模式 */
 }
-.stk-table.dark[data-v-a99d823a] {
+.stk-table.dark {
   --th-bgc: #181c21;
   --td-bgc: #181c21;
   --border-color: #26292e;
@@ -43,39 +43,45 @@
   --col-resize-indicator-color: #5d6064;
   color: #d0d1d2;
 }
-.stk-table.headless[data-v-a99d823a] {
+.stk-table.headless {
   border-top: 1px solid var(--border-color);
 }
-.stk-table.is-col-resizing th[data-v-a99d823a] {
+.stk-table.is-col-resizing th {
   pointer-events: none;
 }
-.stk-table.border-horizontal[data-v-a99d823a] {
+.stk-table.border-h {
   --bg-border-right: linear-gradient(transparent, transparent);
   --bg-border-left: linear-gradient(transparent, transparent);
 }
-.stk-table.border .stk-table-main th[data-v-a99d823a],
-.stk-table.border .stk-table-main td[data-v-a99d823a] {
+.stk-table.border-v {
+  --bg-border-bottom: linear-gradient(transparent, transparent);
+}
+.stk-table.border .stk-table-main th,
+.stk-table.border .stk-table-main td {
   background-image: var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table.border .stk-table-main thead tr:first-child th[data-v-a99d823a] {
+.stk-table.border .stk-table-main thead tr:first-child th {
   background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table.border .stk-table-main thead tr:first-child th[data-v-a99d823a]:first-child {
+.stk-table.border .stk-table-main thead tr:first-child th:first-child {
   background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border .stk-table-main thead tr th[data-v-a99d823a]:first-child {
+.stk-table.border .stk-table-main thead tr th:first-child {
   background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border .stk-table-main tbody td[data-v-a99d823a]:first-child {
+.stk-table.border .stk-table-main tbody td:first-child {
   background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th[data-v-a99d823a] {
+.stk-table.border.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th {
   background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border.virtual-x .stk-table-main tr .virtual-x-left + th[data-v-a99d823a] {
+.stk-table.border.virtual-x .stk-table-main tr .virtual-x-left + th {
   background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table .column-resize-indicator[data-v-a99d823a] {
+.stk-table.border-body-v .stk-table-main tbody {
+  --bg-border-bottom: linear-gradient(transparent, transparent);
+}
+.stk-table .column-resize-indicator {
   width: 0;
   height: 100%;
   border-left: 1px dashed var(--col-resize-indicator-color);
@@ -84,122 +90,122 @@
   display: none;
   pointer-events: none;
 }
-.stk-table .stk-table-main[data-v-a99d823a] {
+.stk-table .stk-table-main {
   border-spacing: 0;
   border-collapse: separate;
 }
-.stk-table .stk-table-main.fixed-mode[data-v-a99d823a] {
+.stk-table .stk-table-main.fixed-mode {
   table-layout: fixed;
 }
-.stk-table .stk-table-main th[data-v-a99d823a],
-.stk-table .stk-table-main td[data-v-a99d823a] {
+.stk-table .stk-table-main th,
+.stk-table .stk-table-main td {
   z-index: 1;
   height: var(--row-height);
   font-size: 14px;
   box-sizing: border-box;
   padding: 0 var(--cell-padding-x);
 }
-.stk-table .stk-table-main thead tr:first-child th[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr:first-child th {
   position: sticky;
   top: 0;
 }
-.stk-table .stk-table-main thead tr th[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th {
   background-color: var(--th-bgc);
 }
-.stk-table .stk-table-main thead tr th.sortable[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.sortable {
   cursor: pointer;
 }
-.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper {
   white-space: nowrap;
   overflow: hidden;
 }
-.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title {
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up {
   fill: var(--sort-arrow-hover-color);
 }
-.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down {
   fill: var(--sort-arrow-hover-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up {
   fill: var(--sort-arrow-active-sub-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down {
   fill: var(--sort-arrow-active-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up {
   fill: var(--sort-arrow-active-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down {
   fill: var(--sort-arrow-active-sub-color);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper {
   max-width: 100%;
   display: inline-flex;
   align-items: center;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title {
   overflow: hidden;
   align-self: flex-start;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter {
   flex-shrink: 0;
   margin-left: 4px;
   width: 16px;
   height: 16px;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-a99d823a],
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up,
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down {
   fill: var(--sort-arrow-color);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer {
   position: absolute;
   top: 0;
   bottom: 0;
   cursor: col-resize;
   width: var(--resize-handle-width);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left {
   left: 0;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right {
   right: 0;
 }
-.stk-table .stk-table-main tbody[data-v-a99d823a] {
+.stk-table .stk-table-main tbody {
   /**高亮渐暗 */
 }
-@keyframes dim-a99d823a {
+@keyframes dim {
 from {
     background-color: var(--highlight-color);
 }
 }
-.stk-table .stk-table-main tbody tr[data-v-a99d823a] {
+.stk-table .stk-table-main tbody tr {
   background-color: var(--td-bgc);
 }
-.stk-table .stk-table-main tbody tr.highlight-row[data-v-a99d823a] {
-  animation: dim-a99d823a 2s linear;
+.stk-table .stk-table-main tbody tr.highlight-row {
+  animation: dim 2s linear;
 }
-.stk-table .stk-table-main tbody tr.hover[data-v-a99d823a],
-.stk-table .stk-table-main tbody tr[data-v-a99d823a]:hover {
+.stk-table .stk-table-main tbody tr.hover,
+.stk-table .stk-table-main tbody tr:hover {
   background-color: var(--tr-hover-bgc);
 }
-.stk-table .stk-table-main tbody tr.active[data-v-a99d823a] {
+.stk-table .stk-table-main tbody tr.active {
   background-color: var(--tr-active-bgc);
 }
-.stk-table .stk-table-main tbody tr td.fixed-cell[data-v-a99d823a] {
+.stk-table .stk-table-main tbody tr td.fixed-cell {
   background-color: inherit;
 }
-.stk-table .stk-table-main tbody tr td.highlight-cell[data-v-a99d823a] {
-  animation: dim-a99d823a 2s linear;
+.stk-table .stk-table-main tbody tr td.highlight-cell {
+  animation: dim 2s linear;
 }
-.stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper[data-v-a99d823a] {
+.stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.stk-table .stk-table-no-data[data-v-a99d823a] {
+.stk-table .stk-table-no-data {
   background-color: var(--table-bgc);
   line-height: var(--row-height);
   text-align: center;
@@ -214,27 +220,27 @@ from {
   align-items: center;
   justify-content: center;
 }
-.stk-table .stk-table-no-data.no-data-full[data-v-a99d823a] {
+.stk-table .stk-table-no-data.no-data-full {
   flex: 1;
 }
-.stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper[data-v-a99d823a] {
+.stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper {
   overflow: hidden;
   max-height: var(--row-height);
 }
-.stk-table.virtual .stk-table-main tbody[data-v-a99d823a] {
+.stk-table.virtual .stk-table-main tbody {
   position: relative;
 }
-.stk-table.virtual .stk-table-main tbody tr.padding-top-tr td[data-v-a99d823a] {
+.stk-table.virtual .stk-table-main tbody tr.padding-top-tr td {
   height: 0;
 }
-.stk-table.virtual .stk-table-main tbody tr td[data-v-a99d823a] {
+.stk-table.virtual .stk-table-main tbody tr td {
   height: var(--row-height);
   line-height: 1;
 }
-.stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper[data-v-a99d823a] {
+.stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper {
   max-height: var(--row-height);
   overflow: hidden;
 }
-.stk-table.virtual-x .stk-table-main .virtual-x-left[data-v-a99d823a] {
+.stk-table.virtual-x .stk-table-main .virtual-x-left {
   padding: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.0.1-beta.3",
+    "version": "0.0.1-beta.5",
     "description": "simple realtime virtual table for vue3",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -8,8 +8,10 @@
             dark: theme === 'dark',
             headless,
             'is-col-resizing': isColResizing,
-            border: props.border,
-            'border-horizontal': props.border === 'horizontal',
+            border: props.bordered,
+            'border-h': props.bordered === 'h',
+            'border-v': props.bordered === 'v',
+            'border-body-v': props.bordered === 'body-v',
         }"
         :style="virtual && { '--row-height': virtualScroll.rowHeight + 'px' }"
         @scroll="onTableScroll"
@@ -187,9 +189,10 @@
  * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
  * [] highlight-row 颜色不能恢复到active的颜色
  */
-import { Order, SortOption, StkProps, StkTableColumn } from '@/StkTable/types/index';
 import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { Default_Col_Width, Is_Legacy_Mode } from './const';
+import { Order, SortOption, StkProps, StkTableColumn } from './types/index';
+import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useHighlight } from './useHighlight';
 import { useThDrag } from './useThDrag';
@@ -220,7 +223,8 @@ const props = withDefaults(defineProps<StkProps>(), {
     rowClassName: () => '',
     colResizable: false,
     colMinWidth: 10,
-    border: true,
+    bordered: true,
+    autoResize: true,
 });
 
 const emit = defineEmits([
@@ -331,6 +335,8 @@ const {
  */
 const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
 
+useAutoResize({ initVirtualScroll, props, debounceMs: 500 });
+
 watch(
     () => props.columns,
     () => {
@@ -692,6 +698,9 @@ function getTableData() {
 }
 
 defineExpose({
+    initVirtualScroll,
+    initVirtualScrollX,
+    initVirtualScrollY,
     setCurrentRow,
     setHighlightDimCell,
     setHighlightDimRow,
@@ -702,7 +711,7 @@ defineExpose({
 });
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .stk-table {
     // contain: strict;
     --row-height: 28px;
@@ -770,10 +779,13 @@ defineExpose({
     &.is-col-resizing th {
         pointer-events: none;
     }
-    &.border-horizontal {
+    &.border-h {
         --bg-border-right: linear-gradient(transparent, transparent);
         --bg-border-left: linear-gradient(transparent, transparent);
     }
+    &.border-v {
+        --bg-border-bottom: linear-gradient(transparent, transparent);
+    }
 
     &.border {
         .stk-table-main {
@@ -819,6 +831,13 @@ defineExpose({
             }
         }
     }
+    &.border-body-v {
+        .stk-table-main {
+            tbody {
+                --bg-border-bottom: linear-gradient(transparent, transparent);
+            }
+        }
+    }
 
     /** 列宽调整指示器 */
     .column-resize-indicator {
@@ -884,7 +903,7 @@ defineExpose({
                     }
 
                     &.sorter-desc .table-header-cell-wrapper .table-header-sorter {
-                        // display:initial;
+                        display: initial;
                         #arrow-up {
                             fill: var(--sort-arrow-active-sub-color);
                         }
@@ -895,7 +914,7 @@ defineExpose({
                     }
 
                     &.sorter-asc .table-header-cell-wrapper .table-header-sorter {
-                        // display:initial;
+                        display: initial;
                         #arrow-up {
                             fill: var(--sort-arrow-active-color);
                         }
@@ -920,8 +939,7 @@ defineExpose({
                             margin-left: 4px;
                             width: 16px;
                             height: 16px;
-
-                            // display:none;
+                            display: none;
                             #arrow-up,
                             #arrow-down {
                                 fill: var(--sort-arrow-color);

package/src/StkTable/index.ts

@@ -1,2 +1,3 @@
 export { default as StkTable } from './StkTable.vue';
 export { tableSort, insertToOrderedArray } from './utils';
+export type { StkTableColumn } from './types/index';

package/src/StkTable/types/index.ts

@@ -135,7 +135,12 @@ export type StkProps = Partial<{
     /**
      * 单元格分割线。
      * 默认横竖都有
-     * horizontal - 仅展示横线
+     * "h" - 仅展示横线
+     * "v" - 仅展示竖线
+     * "body-v" - 仅表体展示竖线
      */
-    border: boolean | 'horizontal';
+    bordered: boolean | 'h' | 'v' | 'body-v';
+
+    /** 自动重新计算虚拟滚动高度宽度。默认true */
+    autoResize: boolean;
 }>;

package/src/StkTable/useAutoResize.ts

@@ -0,0 +1,34 @@
+import { onBeforeUnmount, onMounted } from 'vue';
+
+type Options = {
+    initVirtualScroll: () => void;
+    props: any;
+    /** 防抖延时 */
+    debounceMs: number;
+};
+/**
+ * 窗口变化自动重置虚拟滚动
+ * @param param0
+ */
+export function useAutoResize({ initVirtualScroll, props, debounceMs }: Options) {
+    onMounted(() => {
+        window.addEventListener('resize', resizeCallback);
+    });
+    onBeforeUnmount(() => {
+        window.removeEventListener('resize', resizeCallback);
+    });
+    let debounceTime = 0;
+    function resizeCallback() {
+        if (debounceTime) {
+            window.clearTimeout(debounceTime);
+        }
+        debounceTime = window.setTimeout(() => {
+            // TODO: 使用ResizeObserver 监听。
+            if (props.autoResize) {
+                scrollTo();
+                initVirtualScroll();
+            }
+            debounceTime = 0;
+        }, debounceMs);
+    }
+}