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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +12 -6
  2. package/lib/src/StkTable/StkTable.vue.d.ts +15 -15
  3. package/lib/src/StkTable/index.d.ts +1 -0
  4. package/lib/stk-table-vue.js +9 -15
  5. package/lib/style.css +59 -59
  6. package/package.json +1 -1
  7. package/src/StkTable/StkTable.vue +12 -6
  8. package/src/StkTable/index.ts +1 -0
  9. package/src/StkTable/types/index.ts +3 -0
  10. package/src/StkTable/useAutoResize.ts +34 -0
package/README.md CHANGED
@@ -109,6 +109,18 @@ export type StkProps = Partial<{
109
109
 
110
110
  /** 可拖动至最小的列宽 */
111
111
  colMinWidth: number;
112
+
113
+ /**
114
+ * 单元格分割线。
115
+ * 默认横竖都有
116
+ * "h" - 仅展示横线
117
+ * "v" - 仅展示竖线
118
+ * "body-v" - 仅表体展示竖线
119
+ */
120
+ bordered: boolean | 'h' | 'v' | 'body-v';
121
+
122
+ /** 自动重新计算虚拟滚动高度宽度。默认true */
123
+ autoResize: boolean;
112
124
  }>;
113
125
  ```
114
126
 
@@ -151,12 +163,6 @@ export type StkTableColumn<T extends Record<string, any>> = {
151
163
  customHeaderCell?: Component | VNode | CustomHeaderCellFunc<T>;
152
164
  /** 二级表头 */
153
165
  children?: StkTableColumn<T>[];
154
- /**
155
- * 单元格分割线。
156
- * 默认横竖都有
157
- * horizontal - 仅展示横线
158
- */
159
- border: boolean | 'horizontal';
160
166
  };
161
167
  ```
162
168
 
package/lib/src/StkTable/StkTable.vue.d.ts CHANGED
@@ -1,12 +1,9 @@
1
+ import { SortOption, StkTableColumn } from './types/index';
1
2
  /**
2
- * @author JA+
3
- * 不支持低版本浏览器非虚拟滚动表格的表头固定，列固定，因为会卡。
4
- * TODO:存在的问题：
5
- * [] column.dataIndex 作为唯一键，不能重复
6
- * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
7
- * [] highlight-row 颜色不能恢复到active的颜色
3
+ * 初始化虚拟滚动参数
4
+ * @param {number} [height] 虚拟滚动的高度
8
5
  */
9
- import { SortOption, StkTableColumn } from '../StkTable/types/index';
6
+ declare function initVirtualScroll(height?: number): void;
10
7
  /**
11
8
  * 选中一行，
12
9
  * @param {string} rowKey
@@ -43,14 +40,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
43
40
  minWidth: string;
44
41
  maxWidth: string;
45
42
  fixedMode: boolean;
46
- headless: boolean;
43
+ headless: boolean; /** 排序切换顺序 */
47
44
  theme: "light" | "dark";
48
45
  virtual: boolean;
49
46
  virtualX: boolean;
50
47
  columns: StkTableColumn<any>[];
51
48
  dataSource: any[];
52
- rowKey: import('../StkTable/types/index').UniqKey;
53
- colKey: import('../StkTable/types/index').UniqKey;
49
+ rowKey: import("./types/index").UniqKey;
50
+ colKey: import("./types/index").UniqKey;
54
51
  emptyCellText: string;
55
52
  noDataFull: boolean;
56
53
  showNoData: boolean;
@@ -89,6 +86,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
89
86
  colMinWidth: number;
90
87
  bordered: boolean;
91
88
  }>, {
89
+ initVirtualScroll: typeof initVirtualScroll;
90
+ initVirtualScrollX: () => void;
91
+ initVirtualScrollY: (height?: number | undefined) => void;
92
92
  setCurrentRow: typeof setCurrentRow;
93
93
  setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
94
94
  setHighlightDimRow: (rowKeyValues: (string | number)[]) => void;
@@ -115,14 +115,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
115
115
  minWidth: string;
116
116
  maxWidth: string;
117
117
  fixedMode: boolean;
118
- headless: boolean;
118
+ headless: boolean; /** 排序切换顺序 */
119
119
  theme: "light" | "dark";
120
120
  virtual: boolean;
121
121
  virtualX: boolean;
122
122
  columns: StkTableColumn<any>[];
123
123
  dataSource: any[];
124
- rowKey: import('../StkTable/types/index').UniqKey;
125
- colKey: import('../StkTable/types/index').UniqKey;
124
+ rowKey: import("./types/index").UniqKey;
125
+ colKey: import("./types/index").UniqKey;
126
126
  emptyCellText: string;
127
127
  noDataFull: boolean;
128
128
  showNoData: boolean;
@@ -178,7 +178,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
178
178
  width: string;
179
179
  minWidth: string;
180
180
  maxWidth: string;
181
- colKey: import('../StkTable/types/index').UniqKey;
181
+ colKey: import("./types/index").UniqKey;
182
182
  fixedMode: boolean;
183
183
  headless: boolean;
184
184
  theme: "light" | "dark";
@@ -186,7 +186,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
186
186
  virtualX: boolean;
187
187
  columns: StkTableColumn<any>[];
188
188
  dataSource: any[];
189
- rowKey: import('../StkTable/types/index').UniqKey;
189
+ rowKey: import("./types/index").UniqKey;
190
190
  emptyCellText: string;
191
191
  noDataFull: boolean;
192
192
  showNoData: boolean;
package/lib/src/StkTable/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default as StkTable } from './StkTable.vue';
2
2
  export { tableSort, insertToOrderedArray } from './utils';
3
+ export type { StkTableColumn } from './types/index';
package/lib/stk-table-vue.js CHANGED
@@ -1,4 +1,4 @@
1
- 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";
1
+ 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";
2
2
  import { interpolateRgb } from "d3-interpolate";
3
3
  const Default_Col_Width = "100";
4
4
  const Default_Table_Height = 100;
@@ -492,7 +492,6 @@ function howDeepTheColumn(arr, level = 1) {
492
492
  });
493
493
  return Math.max(...levels);
494
494
  }
495
- const _withScopeId = (n) => (pushScopeId("data-v-0aa41491"), n = n(), popScopeId(), n);
496
495
  const _hoisted_1 = { key: 0 };
497
496
  const _hoisted_2 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
498
497
  const _hoisted_3 = { class: "table-header-cell-wrapper" };
@@ -501,7 +500,7 @@ const _hoisted_5 = {
501
500
  key: 2,
502
501
  class: "table-header-sorter"
503
502
  };
504
- const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
503
+ const _hoisted_6 = /* @__PURE__ */ createElementVNode("svg", {
505
504
  xmlns: "http://www.w3.org/2000/svg",
506
505
  width: "16px",
507
506
  height: "16px",
@@ -519,7 +518,7 @@ const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElem
519
518
  points: "8 10 4.8 14 11.2 14"
520
519
  })
521
520
  ])
522
- ], -1));
521
+ ], -1);
523
522
  const _hoisted_7 = [
524
523
  _hoisted_6
525
524
  ];
@@ -904,6 +903,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
904
903
  return toRaw(dataSourceCopy.value);
905
904
  }
906
905
  __expose({
906
+ initVirtualScroll,
907
+ initVirtualScrollX,
908
+ initVirtualScrollY,
907
909
  setCurrentRow,
908
910
  setHighlightDimCell,
909
911
  setHighlightDimRow,
@@ -994,7 +996,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
994
996
  column: col
995
997
  }, () => [
996
998
  createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)
997
- ], true),
999
+ ]),
998
1000
  col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : createCommentVNode("", true),
999
1001
  _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
1000
1002
  key: 3,
@@ -1085,22 +1087,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
1085
1087
  }, [
1086
1088
  renderSlot(_ctx.$slots, "empty", {}, () => [
1087
1089
  createTextVNode("暂无数据")
1088
- ], true)
1090
+ ])
1089
1091
  ], 2)) : createCommentVNode("", true)
1090
1092
  ], 38);
1091
1093
  };
1092
1094
  }
1093
1095
  });
1094
- const _export_sfc = (sfc, props) => {
1095
- const target = sfc.__vccOpts || sfc;
1096
- for (const [key, val] of props) {
1097
- target[key] = val;
1098
- }
1099
- return target;
1100
- };
1101
- const StkTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0aa41491"]]);
1102
1096
  export {
1103
- StkTable,
1097
+ _sfc_main as StkTable,
1104
1098
  insertToOrderedArray,
1105
1099
  tableSort
1106
1100
  };
package/lib/style.css CHANGED
@@ -1,4 +1,4 @@
1
- .stk-table[data-v-0aa41491] {
1
+ .stk-table {
2
2
  --row-height: 28px;
3
3
  --cell-padding-x: 8px;
4
4
  --resize-handle-width: 4px;
@@ -28,7 +28,7 @@
28
28
  /** 列宽调整指示器 */
29
29
  /**虚拟滚动模式 */
30
30
  }
31
- .stk-table.dark[data-v-0aa41491] {
31
+ .stk-table.dark {
32
32
  --th-bgc: #181c21;
33
33
  --td-bgc: #181c21;
34
34
  --border-color: #26292e;
@@ -43,45 +43,45 @@
43
43
  --col-resize-indicator-color: #5d6064;
44
44
  color: #d0d1d2;
45
45
  }
46
- .stk-table.headless[data-v-0aa41491] {
46
+ .stk-table.headless {
47
47
  border-top: 1px solid var(--border-color);
48
48
  }
49
- .stk-table.is-col-resizing th[data-v-0aa41491] {
49
+ .stk-table.is-col-resizing th {
50
50
  pointer-events: none;
51
51
  }
52
- .stk-table.border-h[data-v-0aa41491] {
52
+ .stk-table.border-h {
53
53
  --bg-border-right: linear-gradient(transparent, transparent);
54
54
  --bg-border-left: linear-gradient(transparent, transparent);
55
55
  }
56
- .stk-table.border-v[data-v-0aa41491] {
56
+ .stk-table.border-v {
57
57
  --bg-border-bottom: linear-gradient(transparent, transparent);
58
58
  }
59
- .stk-table.border .stk-table-main th[data-v-0aa41491],
60
- .stk-table.border .stk-table-main td[data-v-0aa41491] {
59
+ .stk-table.border .stk-table-main th,
60
+ .stk-table.border .stk-table-main td {
61
61
  background-image: var(--bg-border-right), var(--bg-border-bottom);
62
62
  }
63
- .stk-table.border .stk-table-main thead tr:first-child th[data-v-0aa41491] {
63
+ .stk-table.border .stk-table-main thead tr:first-child th {
64
64
  background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
65
65
  }
66
- .stk-table.border .stk-table-main thead tr:first-child th[data-v-0aa41491]:first-child {
66
+ .stk-table.border .stk-table-main thead tr:first-child th:first-child {
67
67
  background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
68
68
  }
69
- .stk-table.border .stk-table-main thead tr th[data-v-0aa41491]:first-child {
69
+ .stk-table.border .stk-table-main thead tr th:first-child {
70
70
  background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
71
71
  }
72
- .stk-table.border .stk-table-main tbody td[data-v-0aa41491]:first-child {
72
+ .stk-table.border .stk-table-main tbody td:first-child {
73
73
  background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
74
74
  }
75
- .stk-table.border.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th[data-v-0aa41491] {
75
+ .stk-table.border.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th {
76
76
  background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
77
77
  }
78
- .stk-table.border.virtual-x .stk-table-main tr .virtual-x-left + th[data-v-0aa41491] {
78
+ .stk-table.border.virtual-x .stk-table-main tr .virtual-x-left + th {
79
79
  background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
80
80
  }
81
- .stk-table.border-body-v .stk-table-main tbody[data-v-0aa41491] {
81
+ .stk-table.border-body-v .stk-table-main tbody {
82
82
  --bg-border-bottom: linear-gradient(transparent, transparent);
83
83
  }
84
- .stk-table .column-resize-indicator[data-v-0aa41491] {
84
+ .stk-table .column-resize-indicator {
85
85
  width: 0;
86
86
  height: 100%;
87
87
  border-left: 1px dashed var(--col-resize-indicator-color);
@@ -90,122 +90,122 @@
90
90
  display: none;
91
91
  pointer-events: none;
92
92
  }
93
- .stk-table .stk-table-main[data-v-0aa41491] {
93
+ .stk-table .stk-table-main {
94
94
  border-spacing: 0;
95
95
  border-collapse: separate;
96
96
  }
97
- .stk-table .stk-table-main.fixed-mode[data-v-0aa41491] {
97
+ .stk-table .stk-table-main.fixed-mode {
98
98
  table-layout: fixed;
99
99
  }
100
- .stk-table .stk-table-main th[data-v-0aa41491],
101
- .stk-table .stk-table-main td[data-v-0aa41491] {
100
+ .stk-table .stk-table-main th,
101
+ .stk-table .stk-table-main td {
102
102
  z-index: 1;
103
103
  height: var(--row-height);
104
104
  font-size: 14px;
105
105
  box-sizing: border-box;
106
106
  padding: 0 var(--cell-padding-x);
107
107
  }
108
- .stk-table .stk-table-main thead tr:first-child th[data-v-0aa41491] {
108
+ .stk-table .stk-table-main thead tr:first-child th {
109
109
  position: sticky;
110
110
  top: 0;
111
111
  }
112
- .stk-table .stk-table-main thead tr th[data-v-0aa41491] {
112
+ .stk-table .stk-table-main thead tr th {
113
113
  background-color: var(--th-bgc);
114
114
  }
115
- .stk-table .stk-table-main thead tr th.sortable[data-v-0aa41491] {
115
+ .stk-table .stk-table-main thead tr th.sortable {
116
116
  cursor: pointer;
117
117
  }
118
- .stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper[data-v-0aa41491] {
118
+ .stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper {
119
119
  white-space: nowrap;
120
120
  overflow: hidden;
121
121
  }
122
- .stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title[data-v-0aa41491] {
122
+ .stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title {
123
123
  text-overflow: ellipsis;
124
124
  overflow: hidden;
125
125
  }
126
- .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-0aa41491] {
126
+ .stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up {
127
127
  fill: var(--sort-arrow-hover-color);
128
128
  }
129
- .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-0aa41491] {
129
+ .stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down {
130
130
  fill: var(--sort-arrow-hover-color);
131
131
  }
132
- .stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491] {
132
+ .stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up {
133
133
  fill: var(--sort-arrow-active-sub-color);
134
134
  }
135
- .stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
135
+ .stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down {
136
136
  fill: var(--sort-arrow-active-color);
137
137
  }
138
- .stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491] {
138
+ .stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up {
139
139
  fill: var(--sort-arrow-active-color);
140
140
  }
141
- .stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
141
+ .stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down {
142
142
  fill: var(--sort-arrow-active-sub-color);
143
143
  }
144
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper[data-v-0aa41491] {
144
+ .stk-table .stk-table-main thead tr th .table-header-cell-wrapper {
145
145
  max-width: 100%;
146
146
  display: inline-flex;
147
147
  align-items: center;
148
148
  }
149
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title[data-v-0aa41491] {
149
+ .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title {
150
150
  overflow: hidden;
151
151
  align-self: flex-start;
152
152
  }
153
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter[data-v-0aa41491] {
153
+ .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter {
154
154
  flex-shrink: 0;
155
155
  margin-left: 4px;
156
156
  width: 16px;
157
157
  height: 16px;
158
158
  }
159
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491],
160
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
159
+ .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up,
160
+ .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down {
161
161
  fill: var(--sort-arrow-color);
162
162
  }
163
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer[data-v-0aa41491] {
163
+ .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer {
164
164
  position: absolute;
165
165
  top: 0;
166
166
  bottom: 0;
167
167
  cursor: col-resize;
168
168
  width: var(--resize-handle-width);
169
169
  }
170
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left[data-v-0aa41491] {
170
+ .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left {
171
171
  left: 0;
172
172
  }
173
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right[data-v-0aa41491] {
173
+ .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right {
174
174
  right: 0;
175
175
  }
176
- .stk-table .stk-table-main tbody[data-v-0aa41491] {
176
+ .stk-table .stk-table-main tbody {
177
177
  /**高亮渐暗 */
178
178
  }
179
- @keyframes dim-0aa41491 {
179
+ @keyframes dim {
180
180
  from {
181
181
  background-color: var(--highlight-color);
182
182
  }
183
183
  }
184
- .stk-table .stk-table-main tbody tr[data-v-0aa41491] {
184
+ .stk-table .stk-table-main tbody tr {
185
185
  background-color: var(--td-bgc);
186
186
  }
187
- .stk-table .stk-table-main tbody tr.highlight-row[data-v-0aa41491] {
188
- animation: dim-0aa41491 2s linear;
187
+ .stk-table .stk-table-main tbody tr.highlight-row {
188
+ animation: dim 2s linear;
189
189
  }
190
- .stk-table .stk-table-main tbody tr.hover[data-v-0aa41491],
191
- .stk-table .stk-table-main tbody tr[data-v-0aa41491]:hover {
190
+ .stk-table .stk-table-main tbody tr.hover,
191
+ .stk-table .stk-table-main tbody tr:hover {
192
192
  background-color: var(--tr-hover-bgc);
193
193
  }
194
- .stk-table .stk-table-main tbody tr.active[data-v-0aa41491] {
194
+ .stk-table .stk-table-main tbody tr.active {
195
195
  background-color: var(--tr-active-bgc);
196
196
  }
197
- .stk-table .stk-table-main tbody tr td.fixed-cell[data-v-0aa41491] {
197
+ .stk-table .stk-table-main tbody tr td.fixed-cell {
198
198
  background-color: inherit;
199
199
  }
200
- .stk-table .stk-table-main tbody tr td.highlight-cell[data-v-0aa41491] {
201
- animation: dim-0aa41491 2s linear;
200
+ .stk-table .stk-table-main tbody tr td.highlight-cell {
201
+ animation: dim 2s linear;
202
202
  }
203
- .stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper[data-v-0aa41491] {
203
+ .stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper {
204
204
  white-space: nowrap;
205
205
  overflow: hidden;
206
206
  text-overflow: ellipsis;
207
207
  }
208
- .stk-table .stk-table-no-data[data-v-0aa41491] {
208
+ .stk-table .stk-table-no-data {
209
209
  background-color: var(--table-bgc);
210
210
  line-height: var(--row-height);
211
211
  text-align: center;
@@ -220,27 +220,27 @@ from {
220
220
  align-items: center;
221
221
  justify-content: center;
222
222
  }
223
- .stk-table .stk-table-no-data.no-data-full[data-v-0aa41491] {
223
+ .stk-table .stk-table-no-data.no-data-full {
224
224
  flex: 1;
225
225
  }
226
- .stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper[data-v-0aa41491] {
226
+ .stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper {
227
227
  overflow: hidden;
228
228
  max-height: var(--row-height);
229
229
  }
230
- .stk-table.virtual .stk-table-main tbody[data-v-0aa41491] {
230
+ .stk-table.virtual .stk-table-main tbody {
231
231
  position: relative;
232
232
  }
233
- .stk-table.virtual .stk-table-main tbody tr.padding-top-tr td[data-v-0aa41491] {
233
+ .stk-table.virtual .stk-table-main tbody tr.padding-top-tr td {
234
234
  height: 0;
235
235
  }
236
- .stk-table.virtual .stk-table-main tbody tr td[data-v-0aa41491] {
236
+ .stk-table.virtual .stk-table-main tbody tr td {
237
237
  height: var(--row-height);
238
238
  line-height: 1;
239
239
  }
240
- .stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper[data-v-0aa41491] {
240
+ .stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper {
241
241
  max-height: var(--row-height);
242
242
  overflow: hidden;
243
243
  }
244
- .stk-table.virtual-x .stk-table-main .virtual-x-left[data-v-0aa41491] {
244
+ .stk-table.virtual-x .stk-table-main .virtual-x-left {
245
245
  padding: 0;
246
246
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stk-table-vue",
3
- "version": "0.0.1-beta.4",
3
+ "version": "0.0.1-beta.5",
4
4
  "description": "simple realtime virtual table for vue3",
5
5
  "main": "./lib/stk-table-vue.js",
6
6
  "types": "./lib/StkTable/index.d.ts",
package/src/StkTable/StkTable.vue CHANGED
@@ -189,9 +189,10 @@
189
189
  * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
190
190
  * [] highlight-row 颜色不能恢复到active的颜色
191
191
  */
192
- import { Order, SortOption, StkProps, StkTableColumn } from '@/StkTable/types/index';
193
192
  import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
194
193
  import { Default_Col_Width, Is_Legacy_Mode } from './const';
194
+ import { Order, SortOption, StkProps, StkTableColumn } from './types/index';
195
+ import { useAutoResize } from './useAutoResize';
195
196
  import { useColResize } from './useColResize';
196
197
  import { useHighlight } from './useHighlight';
197
198
  import { useThDrag } from './useThDrag';
@@ -223,6 +224,7 @@ const props = withDefaults(defineProps<StkProps>(), {
223
224
  colResizable: false,
224
225
  colMinWidth: 10,
225
226
  bordered: true,
227
+ autoResize: true,
226
228
  });
227
229
 
228
230
  const emit = defineEmits([
@@ -333,6 +335,8 @@ const {
333
335
  */
334
336
  const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
335
337
 
338
+ useAutoResize({ initVirtualScroll, props, debounceMs: 500 });
339
+
336
340
  watch(
337
341
  () => props.columns,
338
342
  () => {
@@ -694,6 +698,9 @@ function getTableData() {
694
698
  }
695
699
 
696
700
  defineExpose({
701
+ initVirtualScroll,
702
+ initVirtualScrollX,
703
+ initVirtualScrollY,
697
704
  setCurrentRow,
698
705
  setHighlightDimCell,
699
706
  setHighlightDimRow,
@@ -704,7 +711,7 @@ defineExpose({
704
711
  });
705
712
  </script>
706
713
 
707
- <style lang="less" scoped>
714
+ <style lang="less">
708
715
  .stk-table {
709
716
  // contain: strict;
710
717
  --row-height: 28px;
@@ -896,7 +903,7 @@ defineExpose({
896
903
  }
897
904
 
898
905
  &.sorter-desc .table-header-cell-wrapper .table-header-sorter {
899
- // display:initial;
906
+ display: initial;
900
907
  #arrow-up {
901
908
  fill: var(--sort-arrow-active-sub-color);
902
909
  }
@@ -907,7 +914,7 @@ defineExpose({
907
914
  }
908
915
 
909
916
  &.sorter-asc .table-header-cell-wrapper .table-header-sorter {
910
- // display:initial;
917
+ display: initial;
911
918
  #arrow-up {
912
919
  fill: var(--sort-arrow-active-color);
913
920
  }
@@ -932,8 +939,7 @@ defineExpose({
932
939
  margin-left: 4px;
933
940
  width: 16px;
934
941
  height: 16px;
935
-
936
- // display:none;
942
+ display: none;
937
943
  #arrow-up,
938
944
  #arrow-down {
939
945
  fill: var(--sort-arrow-color);
package/src/StkTable/index.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default as StkTable } from './StkTable.vue';
2
2
  export { tableSort, insertToOrderedArray } from './utils';
3
+ export type { StkTableColumn } from './types/index';
package/src/StkTable/types/index.ts CHANGED
@@ -140,4 +140,7 @@ export type StkProps = Partial<{
140
140
  * "body-v" - 仅表体展示竖线
141
141
  */
142
142
  bordered: boolean | 'h' | 'v' | 'body-v';
143
+
144
+ /** 自动重新计算虚拟滚动高度宽度。默认true */
145
+ autoResize: boolean;
143
146
  }>;
package/src/StkTable/useAutoResize.ts ADDED
@@ -0,0 +1,34 @@
1
+ import { onBeforeUnmount, onMounted } from 'vue';
2
+
3
+ type Options = {
4
+ initVirtualScroll: () => void;
5
+ props: any;
6
+ /** 防抖延时 */
7
+ debounceMs: number;
8
+ };
9
+ /**
10
+ * 窗口变化自动重置虚拟滚动
11
+ * @param param0
12
+ */
13
+ export function useAutoResize({ initVirtualScroll, props, debounceMs }: Options) {
14
+ onMounted(() => {
15
+ window.addEventListener('resize', resizeCallback);
16
+ });
17
+ onBeforeUnmount(() => {
18
+ window.removeEventListener('resize', resizeCallback);
19
+ });
20
+ let debounceTime = 0;
21
+ function resizeCallback() {
22
+ if (debounceTime) {
23
+ window.clearTimeout(debounceTime);
24
+ }
25
+ debounceTime = window.setTimeout(() => {
26
+ // TODO: 使用ResizeObserver 监听。
27
+ if (props.autoResize) {
28
+ scrollTo();
29
+ initVirtualScroll();
30
+ }
31
+ debounceTime = 0;
32
+ }, debounceMs);
33
+ }
34
+ }