stk-table-vue 0.1.0 → 0.2.0

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