stk-table-vue 0.2.0 → 0.2.1

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 (32) hide show
  1. package/README.md +51 -17
  2. package/lib/src/StkTable/StkTable.vue.d.ts +373 -367
  3. package/lib/src/StkTable/const.d.ts +21 -21
  4. package/lib/src/StkTable/index.d.ts +3 -3
  5. package/lib/src/StkTable/types/index.d.ts +73 -73
  6. package/lib/src/StkTable/useAutoResize.d.ts +14 -15
  7. package/lib/src/StkTable/useColResize.d.ts +18 -18
  8. package/lib/src/StkTable/useFixedCol.d.ts +20 -20
  9. package/lib/src/StkTable/useFixedStyle.d.ts +20 -20
  10. package/lib/src/StkTable/useHighlight.d.ts +19 -19
  11. package/lib/src/StkTable/useKeyboardArrowScroll.d.ts +17 -17
  12. package/lib/src/StkTable/useThDrag.d.ts +17 -14
  13. package/lib/src/StkTable/useVirtualScroll.d.ts +73 -73
  14. package/lib/src/StkTable/utils.d.ts +25 -23
  15. package/lib/stk-table-vue.js +1422 -1490
  16. package/lib/style.css +298 -294
  17. package/lib/test/StkTable.browser.test.d.ts +1 -1
  18. package/lib/test/insertToOrderedArray.test.d.ts +1 -1
  19. package/lib/test/utils/DragResize.d.ts +28 -28
  20. package/lib/test/utils/h.d.ts +10 -10
  21. package/package.json +2 -2
  22. package/src/StkTable/StkTable.vue +20 -8
  23. package/src/StkTable/style.less +7 -5
  24. package/src/StkTable/types/index.ts +3 -3
  25. package/src/StkTable/useAutoResize.ts +2 -3
  26. package/src/StkTable/useColResize.ts +3 -3
  27. package/src/StkTable/useFixedCol.ts +1 -1
  28. package/src/StkTable/useFixedStyle.ts +4 -3
  29. package/src/StkTable/useHighlight.ts +2 -0
  30. package/src/StkTable/useThDrag.ts +37 -8
  31. package/src/StkTable/useVirtualScroll.ts +6 -12
  32. package/src/StkTable/utils.ts +9 -0
package/lib/style.css CHANGED
@@ -1,294 +1,298 @@
1
- @keyframes stkTableDim{
2
- from{
3
- background-color:var(--highlight-color);
4
- }
5
- }
6
- .stk-table{
7
- --row-height:28px;
8
- --header-row-height:var(--row-height);
9
- --cell-padding-x:8px;
10
- --resize-handle-width:4px;
11
- --border-color:#e8e8f4;
12
- --border-width:1px;
13
- --td-bgc:#fff;
14
- --th-bgc:#fafafc;
15
- --th-color:#272841;
16
- --tr-active-bgc:#e6f7ff;
17
- --tr-hover-bgc:rgba(230, 247, 255, 0.7);
18
- --bg-border-top:linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
19
- --bg-border-right:linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
20
- --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
21
- --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
22
- --highlight-color:#71a2fd;
23
- --stripe-bgc:#fafafc;
24
- --sort-arrow-color:#757699;
25
- --sort-arrow-hover-color:#8f90b5;
26
- --sort-arrow-active-color:#1b63d9;
27
- --sort-arrow-active-sub-color:#cbcbe1;
28
- --col-resize-indicator-color:#87879c;
29
- --fixed-col-shadow-color-from:rgba(0, 0, 0, 0.1);
30
- --fixed-col-shadow-color-to:rgba(0, 0, 0, 0);
31
- position:relative;
32
- overflow:auto;
33
- display:flex;
34
- flex-direction:column;
35
- border-left:1px solid #e8e8f4;
36
- border-left:1px solid var(--border-color);
37
- }
38
- .stk-table.dark{
39
- --th-bgc:#202029;
40
- --th-color:#C0C0D1;
41
- --td-bgc:#1b1b24;
42
- --border-color:#292933;
43
- --tr-active-bgc:#283f63;
44
- --tr-hover-bgc:#1a2b46;
45
- --table-bgc:#1b1b24;
46
- --highlight-color:#1e4c99;
47
- --stripe-bgc:#202029;
48
- --sort-arrow-color:#5d6064;
49
- --sort-arrow-hover-color:#727782;
50
- --sort-arrow-active-color:#d0d1d2;
51
- --sort-arrow-active-sub-color:#5d6064;
52
- --col-resize-indicator-color:#5d6064;
53
- --fixed-col-shadow-color-from:rgba(135, 135, 156, 0.1);
54
- --fixed-col-shadow-color-to:rgba(135, 135, 156, 0);
55
- color:#d1d1e0;
56
- }
57
- .stk-table.headless{
58
- border-top:1px solid var(--border-color);
59
- }
60
- .stk-table.col-resizable .stk-table-main{
61
- width:-moz-fit-content !important;
62
- width:fit-content !important;
63
- min-width:-moz-min-content !important;
64
- min-width:min-content !important;
65
- }
66
- .stk-table.is-col-resizing th{
67
- pointer-events:none;
68
- }
69
- .stk-table.border-h{
70
- --bg-border-right:linear-gradient(transparent, transparent);
71
- --bg-border-left:linear-gradient(transparent, transparent);
72
- }
73
- .stk-table.border-v{
74
- --bg-border-bottom:linear-gradient(transparent, transparent);
75
- }
76
- .stk-table.border th,
77
- .stk-table.border td{
78
- background-image:var(--bg-border-right), var(--bg-border-bottom);
79
- }
80
- .stk-table.border thead tr:first-child th{
81
- background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
82
- }
83
- .stk-table.border.virtual-x .virtual-x-left{
84
- background:none;
85
- pointer-events:none;
86
- }
87
- .stk-table.border.virtual-x .virtual-x-right{
88
- padding:0;
89
- background:none;
90
- pointer-events:none;
91
- }
92
- .stk-table.border-body-v tbody{
93
- --bg-border-bottom:linear-gradient(transparent, transparent);
94
- }
95
- .stk-table.stripe{
96
- }
97
- .stk-table.stripe tbody tr:nth-child(odd){
98
- background-color:var(--stripe-bgc);
99
- }
100
- .stk-table .column-resize-indicator{
101
- width:0;
102
- height:100%;
103
- border-left:2px solid var(--col-resize-indicator-color);
104
- position:absolute;
105
- z-index:10;
106
- display:none;
107
- pointer-events:none;
108
- }
109
- .stk-table .stk-table-main{
110
- border-spacing:0;
111
- border-collapse:separate;
112
- width:-moz-fit-content;
113
- width:fit-content;
114
- min-width:100%;
115
- }
116
- .stk-table .stk-table-main.fixed-mode{
117
- table-layout:fixed;
118
- min-width:-moz-min-content;
119
- min-width:min-content;
120
- }
121
- .stk-table .stk-table-main th,
122
- .stk-table .stk-table-main td{
123
- z-index:1;
124
- font-size:14px;
125
- box-sizing:border-box;
126
- padding:0 var(--cell-padding-x);
127
- }
128
- .stk-table .stk-table-main th{
129
- color:var(--th-color);
130
- background-color:var(--th-bgc);
131
- }
132
- .stk-table .stk-table-main th.sortable{
133
- cursor:pointer;
134
- }
135
- .stk-table .stk-table-main th.text-overflow .table-header-cell-wrapper{
136
- white-space:nowrap;
137
- overflow:hidden;
138
- }
139
- .stk-table .stk-table-main th.text-overflow .table-header-title{
140
- text-overflow:ellipsis;
141
- overflow:hidden;
142
- }
143
- .stk-table .stk-table-main td.fixed-cell{
144
- background-color:inherit;
145
- }
146
- .stk-table .stk-table-main td.highlight-cell{
147
- animation:stkTableDim 2s linear;
148
- }
149
- .stk-table .stk-table-main td.text-overflow .table-cell-wrapper{
150
- white-space:nowrap;
151
- overflow:hidden;
152
- text-overflow:ellipsis;
153
- }
154
- .stk-table .stk-table-main .fixed-cell--left{
155
- --shadow-rotate:90deg;
156
- }
157
- .stk-table .stk-table-main .fixed-cell--left.fixed-cell--shadow::after{
158
- right:-10px;
159
- }
160
- .stk-table .stk-table-main .fixed-cell--right{
161
- --shadow-rotate:-90deg;
162
- }
163
- .stk-table .stk-table-main .fixed-cell--right.fixed-cell--shadow::after{
164
- left:-10px;
165
- }
166
- .stk-table .stk-table-main .fixed-cell--shadow::after{
167
- content:'';
168
- width:10px;
169
- height:100%;
170
- top:0px;
171
- position:absolute;
172
- pointer-events:none;
173
- background-image:linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
174
- }
175
- .stk-table .stk-table-main thead tr{
176
- height:var(--header-row-height);
177
- }
178
- .stk-table .stk-table-main thead tr:first-child th{
179
- position:sticky;
180
- top:0;
181
- }
182
- .stk-table .stk-table-main th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-up{
183
- fill:var(--sort-arrow-hover-color);
184
- }
185
- .stk-table .stk-table-main th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-down{
186
- fill:var(--sort-arrow-hover-color);
187
- }
188
- .stk-table .stk-table-main th.sorter-desc .table-header-sorter{
189
- display:inline;
190
- display:initial;
191
- }
192
- .stk-table .stk-table-main th.sorter-desc .table-header-sorter .arrow-up{
193
- fill:var(--sort-arrow-active-sub-color);
194
- }
195
- .stk-table .stk-table-main th.sorter-desc .table-header-sorter .arrow-down{
196
- fill:var(--sort-arrow-active-color);
197
- }
198
- .stk-table .stk-table-main th.sorter-asc .table-header-sorter{
199
- display:inline;
200
- display:initial;
201
- }
202
- .stk-table .stk-table-main th.sorter-asc .table-header-sorter .arrow-up{
203
- fill:var(--sort-arrow-active-color);
204
- }
205
- .stk-table .stk-table-main th.sorter-asc .table-header-sorter .arrow-down{
206
- fill:var(--sort-arrow-active-sub-color);
207
- }
208
- .stk-table .stk-table-main .table-header-cell-wrapper{
209
- max-width:100%;
210
- display:inline-flex;
211
- align-items:center;
212
- }
213
- .stk-table .stk-table-main .table-header-title{
214
- overflow:hidden;
215
- align-self:flex-start;
216
- }
217
- .stk-table .stk-table-main .table-header-sorter{
218
- flex-shrink:0;
219
- margin-left:4px;
220
- width:16px;
221
- height:16px;
222
- display:none;
223
- }
224
- .stk-table .stk-table-main .table-header-sorter .arrow-up,
225
- .stk-table .stk-table-main .table-header-sorter .arrow-down{
226
- fill:var(--sort-arrow-color);
227
- }
228
- .stk-table .stk-table-main .table-header-resizer{
229
- position:absolute;
230
- top:0;
231
- bottom:0;
232
- cursor:col-resize;
233
- width:var(--resize-handle-width);
234
- }
235
- .stk-table .stk-table-main .table-header-resizer.left{
236
- left:0;
237
- }
238
- .stk-table .stk-table-main .table-header-resizer.right{
239
- right:0;
240
- }
241
- .stk-table .stk-table-main tbody tr{
242
- background-color:var(--td-bgc);
243
- height:var(--row-height);
244
- }
245
- .stk-table .stk-table-main tbody tr.highlight-row{
246
- animation:stkTableDim 2s linear;
247
- }
248
- .stk-table .stk-table-main tbody tr.hover,
249
- .stk-table .stk-table-main tbody tr:hover{
250
- background-color:var(--tr-hover-bgc);
251
- }
252
- .stk-table .stk-table-main tbody tr.active{
253
- background-color:var(--tr-active-bgc);
254
- }
255
- .stk-table .stk-table-no-data{
256
- background-color:var(--table-bgc);
257
- line-height:var(--row-height);
258
- text-align:center;
259
- font-size:14px;
260
- position:sticky;
261
- left:0px;
262
- border-right:var(--border-width) solid var(--border-color);
263
- border-bottom:var(--border-width) solid var(--border-color);
264
- display:flex;
265
- flex-direction:column;
266
- align-items:center;
267
- justify-content:center;
268
- }
269
- .stk-table .stk-table-no-data.no-data-full{
270
- flex:1;
271
- }
272
- .stk-table.virtual{
273
- }
274
- .stk-table.virtual .table-header-cell-wrapper{
275
- overflow:hidden;
276
- max-height:var(--header-row-height);
277
- }
278
- .stk-table.virtual tbody{
279
- position:relative;
280
- }
281
- .stk-table.virtual tbody tr td{
282
- height:var(--row-height);
283
- line-height:1;
284
- }
285
- .stk-table.virtual tbody tr td .table-cell-wrapper{
286
- max-height:var(--row-height);
287
- overflow:hidden;
288
- }
289
- .stk-table.virtual .padding-top-tr td{
290
- height:0;
291
- }
292
- .stk-table.virtual-x .virtual-x-left{
293
- padding:0;
294
- }
1
+ @keyframes stk-table-dim{
2
+ from{
3
+ background-color:var(--highlight-color);
4
+ }
5
+ }
6
+ .stk-table{
7
+ --row-height:28px;
8
+ --header-row-height:var(--row-height);
9
+ --cell-padding-x:8px;
10
+ --resize-handle-width:4px;
11
+ --border-color:#e8e8f4;
12
+ --border-width:1px;
13
+ --td-bgc:#fff;
14
+ --th-bgc:#fafafc;
15
+ --th-color:#272841;
16
+ --tr-active-bgc:#e6f7ff;
17
+ --tr-hover-bgc:rgba(230, 247, 255, 0.7);
18
+ --bg-border-top:linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
19
+ --bg-border-right:linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
20
+ --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
21
+ --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
22
+ --highlight-color:#71a2fd;
23
+ --stripe-bgc:#fafafc;
24
+ --sort-arrow-color:#757699;
25
+ --sort-arrow-hover-color:#8f90b5;
26
+ --sort-arrow-active-color:#1b63d9;
27
+ --sort-arrow-active-sub-color:#cbcbe1;
28
+ --col-resize-indicator-color:#87879c;
29
+ --fixed-col-shadow-color-from:rgba(0, 0, 0, 0.1);
30
+ --fixed-col-shadow-color-to:rgba(0, 0, 0, 0);
31
+ position:relative;
32
+ overflow:auto;
33
+ display:flex;
34
+ flex-direction:column;
35
+ box-sizing:border-box;
36
+ border-left:1px solid #e8e8f4;
37
+ border-left:1px solid var(--border-color);
38
+ background-image:linear-gradient(180deg, #e8e8f4 1px, transparent 1px), linear-gradient(270deg, #e8e8f4 1px, transparent 1px), linear-gradient(0deg, #e8e8f4 1px, transparent 1px);
39
+ background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
40
+ }
41
+ .stk-table.dark{
42
+ --th-bgc:#202029;
43
+ --th-color:#C0C0D1;
44
+ --td-bgc:#1b1b24;
45
+ --border-color:#292933;
46
+ --tr-active-bgc:#283f63;
47
+ --tr-hover-bgc:#1a2b46;
48
+ --table-bgc:#1b1b24;
49
+ --highlight-color:#1e4c99;
50
+ --stripe-bgc:#202029;
51
+ --sort-arrow-color:#5d6064;
52
+ --sort-arrow-hover-color:#727782;
53
+ --sort-arrow-active-color:#d0d1d2;
54
+ --sort-arrow-active-sub-color:#5d6064;
55
+ --col-resize-indicator-color:#5d6064;
56
+ --fixed-col-shadow-color-from:rgba(135, 135, 156, 0.1);
57
+ --fixed-col-shadow-color-to:rgba(135, 135, 156, 0);
58
+ color:#d1d1e0;
59
+ }
60
+ .stk-table.headless{
61
+ border-top:1px solid var(--border-color);
62
+ background-image:var(--bg-border-right), var(--bg-border-bottom);
63
+ }
64
+ .stk-table.col-resizable .stk-table-main{
65
+ width:-moz-fit-content !important;
66
+ width:fit-content !important;
67
+ min-width:-moz-min-content !important;
68
+ min-width:min-content !important;
69
+ }
70
+ .stk-table.is-col-resizing th{
71
+ pointer-events:none;
72
+ }
73
+ .stk-table.border-h{
74
+ --bg-border-right:linear-gradient(transparent, transparent);
75
+ --bg-border-left:linear-gradient(transparent, transparent);
76
+ }
77
+ .stk-table.border-v{
78
+ --bg-border-bottom:linear-gradient(transparent, transparent);
79
+ }
80
+ .stk-table.border th,
81
+ .stk-table.border td{
82
+ background-image:var(--bg-border-right), var(--bg-border-bottom);
83
+ }
84
+ .stk-table.border thead tr:first-child th{
85
+ background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
86
+ }
87
+ .stk-table.border.virtual-x .virtual-x-left{
88
+ background:none;
89
+ pointer-events:none;
90
+ }
91
+ .stk-table.border.virtual-x .virtual-x-right{
92
+ padding:0;
93
+ background:none;
94
+ pointer-events:none;
95
+ }
96
+ .stk-table.border-body-v tbody{
97
+ --bg-border-bottom:linear-gradient(transparent, transparent);
98
+ }
99
+ .stk-table.stripe{
100
+ }
101
+ .stk-table.stripe tbody tr:nth-child(odd){
102
+ background-color:var(--stripe-bgc);
103
+ }
104
+ .stk-table .column-resize-indicator{
105
+ width:0;
106
+ height:100%;
107
+ border-left:2px solid var(--col-resize-indicator-color);
108
+ position:absolute;
109
+ z-index:10;
110
+ display:none;
111
+ pointer-events:none;
112
+ }
113
+ .stk-table .stk-table-main{
114
+ border-spacing:0;
115
+ border-collapse:separate;
116
+ width:-moz-fit-content;
117
+ width:fit-content;
118
+ min-width:100%;
119
+ }
120
+ .stk-table .stk-table-main.fixed-mode{
121
+ table-layout:fixed;
122
+ min-width:-moz-min-content;
123
+ min-width:min-content;
124
+ }
125
+ .stk-table .stk-table-main th,
126
+ .stk-table .stk-table-main td{
127
+ z-index:1;
128
+ font-size:14px;
129
+ box-sizing:border-box;
130
+ padding:0 var(--cell-padding-x);
131
+ }
132
+ .stk-table .stk-table-main th{
133
+ color:var(--th-color);
134
+ background-color:var(--th-bgc);
135
+ }
136
+ .stk-table .stk-table-main th.sortable{
137
+ cursor:pointer;
138
+ }
139
+ .stk-table .stk-table-main th.text-overflow .table-header-cell-wrapper{
140
+ white-space:nowrap;
141
+ overflow:hidden;
142
+ }
143
+ .stk-table .stk-table-main th.text-overflow .table-header-title{
144
+ text-overflow:ellipsis;
145
+ overflow:hidden;
146
+ }
147
+ .stk-table .stk-table-main td.fixed-cell{
148
+ background-color:inherit;
149
+ }
150
+ .stk-table .stk-table-main td.highlight-cell{
151
+ animation:stk-table-dim 2s linear;
152
+ }
153
+ .stk-table .stk-table-main td.text-overflow .table-cell-wrapper{
154
+ white-space:nowrap;
155
+ overflow:hidden;
156
+ text-overflow:ellipsis;
157
+ }
158
+ .stk-table .stk-table-main .fixed-cell--left{
159
+ --shadow-rotate:90deg;
160
+ }
161
+ .stk-table .stk-table-main .fixed-cell--left.fixed-cell--shadow::after{
162
+ right:-10px;
163
+ }
164
+ .stk-table .stk-table-main .fixed-cell--right{
165
+ --shadow-rotate:-90deg;
166
+ }
167
+ .stk-table .stk-table-main .fixed-cell--right.fixed-cell--shadow::after{
168
+ left:-10px;
169
+ }
170
+ .stk-table .stk-table-main .fixed-cell--shadow::after{
171
+ content:'';
172
+ width:10px;
173
+ height:100%;
174
+ top:0px;
175
+ position:absolute;
176
+ pointer-events:none;
177
+ background-image:linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
178
+ }
179
+ .stk-table .stk-table-main thead tr{
180
+ height:var(--header-row-height);
181
+ }
182
+ .stk-table .stk-table-main thead tr:first-child th{
183
+ position:sticky;
184
+ top:0;
185
+ }
186
+ .stk-table .stk-table-main th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-up{
187
+ fill:var(--sort-arrow-hover-color);
188
+ }
189
+ .stk-table .stk-table-main th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-down{
190
+ fill:var(--sort-arrow-hover-color);
191
+ }
192
+ .stk-table .stk-table-main th.sorter-desc .table-header-sorter{
193
+ display:inline;
194
+ display:initial;
195
+ }
196
+ .stk-table .stk-table-main th.sorter-desc .table-header-sorter .arrow-up{
197
+ fill:var(--sort-arrow-active-sub-color);
198
+ }
199
+ .stk-table .stk-table-main th.sorter-desc .table-header-sorter .arrow-down{
200
+ fill:var(--sort-arrow-active-color);
201
+ }
202
+ .stk-table .stk-table-main th.sorter-asc .table-header-sorter{
203
+ display:inline;
204
+ display:initial;
205
+ }
206
+ .stk-table .stk-table-main th.sorter-asc .table-header-sorter .arrow-up{
207
+ fill:var(--sort-arrow-active-color);
208
+ }
209
+ .stk-table .stk-table-main th.sorter-asc .table-header-sorter .arrow-down{
210
+ fill:var(--sort-arrow-active-sub-color);
211
+ }
212
+ .stk-table .stk-table-main .table-header-cell-wrapper{
213
+ max-width:100%;
214
+ display:inline-flex;
215
+ align-items:center;
216
+ }
217
+ .stk-table .stk-table-main .table-header-title{
218
+ overflow:hidden;
219
+ align-self:flex-start;
220
+ }
221
+ .stk-table .stk-table-main .table-header-sorter{
222
+ flex-shrink:0;
223
+ margin-left:4px;
224
+ width:16px;
225
+ height:16px;
226
+ display:none;
227
+ }
228
+ .stk-table .stk-table-main .table-header-sorter .arrow-up,
229
+ .stk-table .stk-table-main .table-header-sorter .arrow-down{
230
+ fill:var(--sort-arrow-color);
231
+ }
232
+ .stk-table .stk-table-main .table-header-resizer{
233
+ position:absolute;
234
+ top:0;
235
+ bottom:0;
236
+ cursor:col-resize;
237
+ width:var(--resize-handle-width);
238
+ }
239
+ .stk-table .stk-table-main .table-header-resizer.left{
240
+ left:0;
241
+ }
242
+ .stk-table .stk-table-main .table-header-resizer.right{
243
+ right:0;
244
+ }
245
+ .stk-table .stk-table-main tbody tr{
246
+ background-color:var(--td-bgc);
247
+ height:var(--row-height);
248
+ }
249
+ .stk-table .stk-table-main tbody tr.highlight-row{
250
+ animation:stk-table-dim 2s linear;
251
+ }
252
+ .stk-table .stk-table-main tbody tr.hover,
253
+ .stk-table .stk-table-main tbody tr:hover{
254
+ background-color:var(--tr-hover-bgc);
255
+ }
256
+ .stk-table .stk-table-main tbody tr.active{
257
+ background-color:var(--tr-active-bgc);
258
+ }
259
+ .stk-table .stk-table-no-data{
260
+ background-color:var(--table-bgc);
261
+ line-height:var(--row-height);
262
+ text-align:center;
263
+ font-size:14px;
264
+ position:sticky;
265
+ left:0px;
266
+ border-right:var(--border-width) solid var(--border-color);
267
+ border-bottom:var(--border-width) solid var(--border-color);
268
+ display:flex;
269
+ flex-direction:column;
270
+ align-items:center;
271
+ justify-content:center;
272
+ }
273
+ .stk-table .stk-table-no-data.no-data-full{
274
+ flex:1;
275
+ }
276
+ .stk-table.virtual{
277
+ }
278
+ .stk-table.virtual .table-header-cell-wrapper{
279
+ overflow:hidden;
280
+ max-height:var(--header-row-height);
281
+ }
282
+ .stk-table.virtual tbody{
283
+ position:relative;
284
+ }
285
+ .stk-table.virtual tbody tr td{
286
+ height:var(--row-height);
287
+ line-height:1;
288
+ }
289
+ .stk-table.virtual tbody tr td .table-cell-wrapper{
290
+ max-height:var(--row-height);
291
+ overflow:hidden;
292
+ }
293
+ .stk-table.virtual .padding-top-tr td{
294
+ height:0;
295
+ }
296
+ .stk-table.virtual-x .virtual-x-left{
297
+ padding:0;
298
+ }
package/lib/test/StkTable.browser.test.d.ts CHANGED
@@ -1 +1 @@
1
- export {};
1
+ export {};
package/lib/test/insertToOrderedArray.test.d.ts CHANGED
@@ -1 +1 @@
1
- export {};
1
+ export {};
package/lib/test/utils/DragResize.d.ts CHANGED
@@ -1,28 +1,28 @@
1
- export default class DragResize {
2
- /**
3
- *
4
- * @param {HTMLElement} el
5
- */
6
- constructor(el: HTMLElement);
7
- buttonSize: {
8
- width: number;
9
- height: number;
10
- };
11
- /** @type {ResizeObserver} */
12
- resizeObserver: ResizeObserver;
13
- /** @type {DOMRect} */
14
- targetDOMRect: DOMRect;
15
- /** @type {{left:number,top:number}} */
16
- resizeButtonStyle: {
17
- left: number;
18
- top: number;
19
- };
20
- el: HTMLElement;
21
- initData(): void;
22
- createResizeButton(): void;
23
- resizeButton: HTMLElement | undefined;
24
- /** 监听元素大小改变 */
25
- onResize(): void;
26
- addButtonHoverStyle(): void;
27
- addEvent(): void;
28
- }
1
+ export default class DragResize {
2
+ /**
3
+ *
4
+ * @param {HTMLElement} el
5
+ */
6
+ constructor(el: HTMLElement);
7
+ buttonSize: {
8
+ width: number;
9
+ height: number;
10
+ };
11
+ /** @type {ResizeObserver} */
12
+ resizeObserver: ResizeObserver;
13
+ /** @type {DOMRect} */
14
+ targetDOMRect: DOMRect;
15
+ /** @type {{left:number,top:number}} */
16
+ resizeButtonStyle: {
17
+ left: number;
18
+ top: number;
19
+ };
20
+ el: HTMLElement;
21
+ initData(): void;
22
+ createResizeButton(): void;
23
+ resizeButton: HTMLElement | undefined;
24
+ /** 监听元素大小改变 */
25
+ onResize(): void;
26
+ addButtonHoverStyle(): void;
27
+ addEvent(): void;
28
+ }