bkui-vue 2.0.1-beta.39.table.1 → 2.0.1-beta.39.table.2

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 (21) hide show
  1. package/dist/index.cjs.js +23 -23
  2. package/dist/index.esm.js +2874 -2870
  3. package/dist/index.umd.js +28 -28
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/index.js +1 -1
  7. package/lib/scrollbar/css/scrollbar.css +239 -0
  8. package/lib/scrollbar/css/scrollbar.less +139 -0
  9. package/lib/scrollbar/css/scrollbar.variable.css +499 -0
  10. package/lib/styles/index.d.ts +1 -0
  11. package/lib/table/hooks/use-layout.d.ts +1 -0
  12. package/lib/table/index.js +16 -4
  13. package/lib/table/table.css +2 -3
  14. package/lib/table/table.less +2 -0
  15. package/lib/table/table.variable.css +2 -3
  16. package/lib/table-column/index.js +4 -0
  17. package/lib/tree/tree.css +0 -3
  18. package/lib/tree/tree.variable.css +0 -3
  19. package/lib/virtual-render/virtual-render.css +0 -3
  20. package/lib/virtual-render/virtual-render.variable.css +0 -3
  21. package/package.json +1 -1
package/lib/scrollbar/css/scrollbar.variable.css ADDED
@@ -0,0 +1,499 @@
1
+ :root {
2
+ --bk-prefix: bk;
3
+ --popover-max-height: var(--popover-max-height);
4
+ --primary-color: var(--primary-color);
5
+ --success-color: var(--success-color);
6
+ --warning-color: var(--warning-color);
7
+ --danger-color: var(--danger-color);
8
+ --default-color: var(--default-color);
9
+ --gray-color: var(--gray-color);
10
+ --light-gray: var(--light-gray);
11
+ --white-color: var(--white-color);
12
+ --whitesmoke-color: var(--whitesmoke-color);
13
+ --disable-color: var(--disable-color);
14
+ --disable-bg-color: var(--disable-bg-color);
15
+ --border-color: var(--border-color);
16
+ --font-size-base: var(--font-size-base);
17
+ --font-size-medium: var(--font-size-medium);
18
+ --font-size-large: var(--font-size-large);
19
+ --line-height-base: var(--line-height-base);
20
+ --line-height-medium: var(--line-height-medium);
21
+ --line-height-large: var(--line-height-large);
22
+ --component-size-small: var(--component-size-small);
23
+ --component-size-base: var(--component-size-base);
24
+ --component-size-large: var(--component-size-large);
25
+ --component-size-small-padding: var(--component-size-small-padding);
26
+ --component-size-base-padding: var(--component-size-base-padding);
27
+ --component-size-large-padding: var(--component-size-large-padding);
28
+ --border-width-base: var(--border-width-base);
29
+ --border-style-base: var(--border-style-base);
30
+ --border-radius-base: var(--border-radius-base);
31
+ --border-style-color: var(--border-style-color);
32
+ --input-disabled-bg: var(--input-disabled-bg);
33
+ --input-disabled-border: var(--input-disabled-border);
34
+ --input-height-base: var(--input-height-base);
35
+ --input-color: var(--input-color);
36
+ --input-bg: var(--input-bg);
37
+ --input-border-color: var(--input-border-color);
38
+ --input-broder-radius: var(--input-broder-radius);
39
+ --input-shadow-color: var(--input-shadow-color);
40
+ --input-horizontal-padding: var(--input-horizontal-padding);
41
+ --input-block-color: var(--input-block-color);
42
+ --input-block-hover-color: var(--input-block-hover-color);
43
+ --input-icon-size: var(--input-icon-size);
44
+ --input-maxlength-color: var(--input-maxlength-color);
45
+ --button-primary-hover-color: var(--button-primary-hover-color);
46
+ --button-danger-hover-color: var(--button-danger-hover-color);
47
+ --button-success-hover-color: var(--button-success-hover-color);
48
+ --button-warning-hover-color: var(--button-warning-hover-color);
49
+ --button-default-hover-border-color: var(--button-default-hover-border-color);
50
+ --button-primary-active-color: var(--button-primary-active-color);
51
+ --button-danger-active-color: var(--button-danger-active-color);
52
+ --button-success-active-color: var(--button-success-active-color);
53
+ --button-warning-active-color: var(--button-warning-active-color);
54
+ --button-selected-bg-color: var(--button-selected-bg-color);
55
+ --button-disabled-selected-bg-color: var(--button-disabled-selected-bg-color);
56
+ --radio-font-color: var(--radio-font-color);
57
+ --radio-active-color: var(--radio-active-color);
58
+ --radio-hover-border-color: var(--radio-hover-border-color);
59
+ --radio-disabled-border: var(--radio-disabled-border);
60
+ --radio-disabled-font-color: var(--radio-disabled-font-color);
61
+ --radio-disabled-checked-bg: var(--radio-disabled-checked-bg);
62
+ --radio-button-checked-bg: var(--radio-button-checked-bg);
63
+ --radio-button-disabled-checked-bg: var(--radio-button-disabled-checked-bg);
64
+ --checkbox-disabled-checked-bg: var(--checkbox-disabled-checked-bg);
65
+ --fixed-navbar-background: var(--fixed-navbar-background);
66
+ --fixed-navbar-boxshadow-color: var(--fixed-navbar-boxshadow-color);
67
+ --switch-default-color: var(--switch-default-color);
68
+ --switch-grey-color: var(--switch-grey-color);
69
+ --breadcrumb-black-color: var(--breadcrumb-black-color);
70
+ --breadcrumb-primary-hover-color: var(--breadcrumb-primary-hover-color);
71
+ --breadcrumb-fn-main-color: var(--breadcrumb-fn-main-color);
72
+ --link-default-hover-color: var(--link-default-hover-color);
73
+ --link-primary-hover-color: var(--link-primary-hover-color);
74
+ --link-success-hover-color: var(--link-success-hover-color);
75
+ --link-warning-hover-color: var(--link-warning-hover-color);
76
+ --link-danger-hover-color: var(--link-danger-hover-color);
77
+ --link-default-disabled-color: var(--link-default-disabled-color);
78
+ --link-primary-disabled-color: var(--link-primary-disabled-color);
79
+ --link-success-disabled-color: var(--link-success-disabled-color);
80
+ --link-warning-disabled-color: var(--link-warning-disabled-color);
81
+ --link-danger-disabled-color: var(--link-danger-disabled-color);
82
+ --message-color: var(--message-color);
83
+ --message-primary-bg-color: var(--message-primary-bg-color);
84
+ --message-primary-border-color: var(--message-primary-border-color);
85
+ --message-primary-shadow-color: var(--message-primary-shadow-color);
86
+ --message-warning-bg-color: var(--message-warning-bg-color);
87
+ --message-warning-border-color: var(--message-warning-border-color);
88
+ --message-warning-shadow-color: var(--message-warning-shadow-color);
89
+ --message-success-bg-color: var(--message-success-bg-color);
90
+ --message-success-border-color: var(--message-success-border-color);
91
+ --message-success-shadow-color: var(--message-success-shadow-color);
92
+ --message-danger-bg-color: var(--message-danger-bg-color);
93
+ --message-danger-border-color: var(--message-danger-border-color);
94
+ --message-danger-shadow-color: var(--message-danger-shadow-color);
95
+ --slider-default-bg: var(--slider-default-bg);
96
+ --slider-disable-bar-bg: var(--slider-disable-bar-bg);
97
+ --menu-bg-color: var(--menu-bg-color);
98
+ --submenu-bg-color: var(--submenu-bg-color);
99
+ --menu-active-bg-color: var(--menu-active-bg-color);
100
+ --menu-color: var(--menu-color);
101
+ --menu-group-color: var(--menu-group-color);
102
+ --menu-width: var(--menu-width);
103
+ --menu-collapse-width: var(--menu-collapse-width);
104
+ --menu-active-color: var(--menu-active-color);
105
+ --nav-header-bg-color: var(--nav-header-bg-color);
106
+ --nav-bg-color: var(--nav-bg-color);
107
+ --date-picker-disabled-bg: var(--date-picker-disabled-bg);
108
+ --date-picker-dropdown-mb: var(--date-picker-dropdown-mb);
109
+ --date-picker-dropdown-bg: var(--date-picker-dropdown-bg);
110
+ --table-bg-color: var(--table-bg-color);
111
+ --table-border-color: var(--table-border-color);
112
+ --table-strip-color: var(--table-strip-color);
113
+ --table-head-bg-color: var(--table-head-bg-color);
114
+ --table-head-font-color: var(--table-head-font-color);
115
+ --table-body-font-color: var(--table-body-font-color);
116
+ --table-row-hover-bg-color: var(--table-row-hover-bg-color);
117
+ --table-row-active-bg-color: var(--table-row-active-bg-color);
118
+ --cascader-panel-border-color: var(--cascader-panel-border-color);
119
+ --cascader-panel-hover: var(--cascader-panel-hover);
120
+ --cascader-panel-active: var(--cascader-panel-active);
121
+ --cascader-panel-disabled-bg: var(--cascader-panel-disabled-bg);
122
+ --search-select-focus-border-color: var(--search-select-focus-border-color);
123
+ --search-select-focus-color: var(--search-select-focus-color);
124
+ --search-select-font-color: var(--search-select-font-color);
125
+ --search-select-placeholder-color: var(--search-select-placeholder-color);
126
+ --search-select-message-color: var(--search-select-message-color);
127
+ --search-select-menu-border-color: var(--search-select-menu-border-color);
128
+ --select-active-color: var(--select-active-color);
129
+ --select-hover-color: var(--select-hover-color);
130
+ }
131
+ :root :root {
132
+ --bk-prefix: bk;
133
+ --popover-max-height: 216px;
134
+ --primary-color: #3a84ff;
135
+ --success-color: #2dcb56;
136
+ --warning-color: #ff9c01;
137
+ --danger-color: #ea3636;
138
+ --default-color: #63656e;
139
+ --gray-color: #979ba5;
140
+ --light-gray: #c4c6cc;
141
+ --white-color: white;
142
+ --whitesmoke-color: #fafbfd;
143
+ --disable-color: #dcdee5;
144
+ --disable-bg-color: #f9fafd;
145
+ --border-color: #dcdee5;
146
+ --font-size-base: 12px;
147
+ --font-size-medium: 14px;
148
+ --font-size-large: 16px;
149
+ --line-height-base: 16px;
150
+ --line-height-medium: 16px;
151
+ --line-height-large: 18px;
152
+ --component-size-small: 26px;
153
+ --component-size-base: 32px;
154
+ --component-size-large: 40px;
155
+ --component-size-small-padding: 0 12px;
156
+ --component-size-base-padding: 0 14px;
157
+ --component-size-large-padding: 0 16px;
158
+ --border-width-base: 1px;
159
+ --border-style-base: solid;
160
+ --border-radius-base: 2px;
161
+ --border-style-color: var(--light-gray);
162
+ --input-disabled-bg: #fafbfd;
163
+ --input-disabled-border: var(--disable-color);
164
+ --input-height-base: var(--component-size-base);
165
+ --input-color: var(--default-color);
166
+ --input-bg: white;
167
+ --input-border-color: var(--light-gray);
168
+ --input-broder-radius: 3px;
169
+ --input-shadow-color: #a3c5fd;
170
+ --input-horizontal-padding: 8px;
171
+ --input-block-color: #f5f7fa;
172
+ --input-block-hover-color: #eaebf0;
173
+ --input-icon-size: var(--font-size-medium);
174
+ --input-maxlength-color: #979ba5;
175
+ --button-primary-hover-color: #5594fa;
176
+ --button-danger-hover-color: #ff5656;
177
+ --button-success-hover-color: #45e35f;
178
+ --button-warning-hover-color: #ffb848;
179
+ --button-default-hover-border-color: #979ba5;
180
+ --button-primary-active-color: #2c77f4;
181
+ --button-danger-active-color: #db2626;
182
+ --button-success-active-color: #1ab943;
183
+ --button-warning-active-color: #eb9000;
184
+ --button-selected-bg-color: #e1ecff;
185
+ --button-disabled-selected-bg-color: #f0f1f5;
186
+ --radio-font-color: #63656e;
187
+ --radio-active-color: #3a84ff;
188
+ --radio-hover-border-color: #979ba5;
189
+ --radio-disabled-border: #dcdee5;
190
+ --radio-disabled-font-color: #c4c6cc;
191
+ --radio-disabled-checked-bg: #a3c5fd;
192
+ --radio-button-checked-bg: #e1ecff;
193
+ --radio-button-disabled-checked-bg: #fafbfd;
194
+ --checkbox-disabled-checked-bg: #a3c5fd;
195
+ --fixed-navbar-background: #fff;
196
+ --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
197
+ --switch-default-color: #fff;
198
+ --switch-grey-color: #c4c6cc;
199
+ --breadcrumb-black-color: #979ba5;
200
+ --breadcrumb-primary-hover-color: #0082ff;
201
+ --breadcrumb-fn-main-color: #63656e;
202
+ --link-default-hover-color: #979ba5;
203
+ --link-primary-hover-color: #699df4;
204
+ --link-success-hover-color: #45e35f;
205
+ --link-warning-hover-color: #ffb848;
206
+ --link-danger-hover-color: #ff5656;
207
+ --link-default-disabled-color: #dcdee5;
208
+ --link-primary-disabled-color: #a3c5fd;
209
+ --link-success-disabled-color: #94f5a4;
210
+ --link-warning-disabled-color: #ffd695;
211
+ --link-danger-disabled-color: #fd9c9c;
212
+ --message-color: var(--default-color);
213
+ --message-primary-bg-color: #f0f8ff;
214
+ --message-primary-border-color: #e1ecff;
215
+ --message-primary-shadow-color: #e1e8f4;
216
+ --message-warning-bg-color: #fff4e2;
217
+ --message-warning-border-color: #ffe8c3;
218
+ --message-warning-shadow-color: #ede6db;
219
+ --message-success-bg-color: #f2fff4;
220
+ --message-success-border-color: #dcffe2;
221
+ --message-success-shadow-color: #cef0d7;
222
+ --message-danger-bg-color: #ffeded;
223
+ --message-danger-border-color: #ffdddd;
224
+ --message-danger-shadow-color: #f6dada;
225
+ --slider-default-bg: #dcdee5;
226
+ --slider-disable-bar-bg: #979ba5;
227
+ --menu-bg-color: #182132;
228
+ --submenu-bg-color: #151d2c;
229
+ --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
230
+ --menu-color: #96a2b9;
231
+ --menu-group-color: var(--default-color);
232
+ --menu-width: 260px;
233
+ --menu-collapse-width: 60px;
234
+ --menu-active-color: white;
235
+ --nav-header-bg-color: #182132;
236
+ --nav-bg-color: #182132;
237
+ --date-picker-disabled-bg: #fafbfd;
238
+ --date-picker-dropdown-mb: 4px;
239
+ --date-picker-dropdown-bg: #fff;
240
+ --table-bg-color: var(--white-color);
241
+ --table-border-color: #dcdee5;
242
+ --table-strip-color: #fafbfd;
243
+ --table-head-bg-color: #fafbfd;
244
+ --table-head-font-color: #313238;
245
+ --table-body-font-color: #63656e;
246
+ --table-row-hover-bg-color: #f5f7fa;
247
+ --table-row-active-bg-color: #f0f1f5;
248
+ --cascader-panel-border-color: #dcdee5;
249
+ --cascader-panel-hover: #f5f7fa;
250
+ --cascader-panel-active: #e1ecff;
251
+ --cascader-panel-disabled-bg: #fff;
252
+ --search-select-focus-border-color: var(--primary-color);
253
+ --search-select-focus-color: #3c96ff;
254
+ --search-select-font-color: var(--default-color);
255
+ --search-select-placeholder-color: var(--light-gray);
256
+ --search-select-message-color: var(--danger-color);
257
+ --search-select-menu-border-color: var(--disable-color);
258
+ --select-active-color: #e1ecff;
259
+ --select-hover-color: #f5f7fa;
260
+ }
261
+ :root {
262
+ --bk-prefix: bk;
263
+ --popover-max-height: 216px;
264
+ --primary-color: #3a84ff;
265
+ --success-color: #2dcb56;
266
+ --warning-color: #ff9c01;
267
+ --danger-color: #ea3636;
268
+ --default-color: #63656e;
269
+ --gray-color: #979ba5;
270
+ --light-gray: #c4c6cc;
271
+ --white-color: white;
272
+ --whitesmoke-color: #fafbfd;
273
+ --disable-color: #dcdee5;
274
+ --disable-bg-color: #f9fafd;
275
+ --border-color: #dcdee5;
276
+ --font-size-base: 12px;
277
+ --font-size-medium: 14px;
278
+ --font-size-large: 16px;
279
+ --line-height-base: 16px;
280
+ --line-height-medium: 16px;
281
+ --line-height-large: 18px;
282
+ --component-size-small: 26px;
283
+ --component-size-base: 32px;
284
+ --component-size-large: 40px;
285
+ --component-size-small-padding: 0 12px;
286
+ --component-size-base-padding: 0 14px;
287
+ --component-size-large-padding: 0 16px;
288
+ --border-width-base: 1px;
289
+ --border-style-base: solid;
290
+ --border-radius-base: 2px;
291
+ --border-style-color: var(--light-gray);
292
+ --input-disabled-bg: #fafbfd;
293
+ --input-disabled-border: var(--disable-color);
294
+ --input-height-base: var(--component-size-base);
295
+ --input-color: var(--default-color);
296
+ --input-bg: white;
297
+ --input-border-color: var(--light-gray);
298
+ --input-broder-radius: 3px;
299
+ --input-shadow-color: #a3c5fd;
300
+ --input-horizontal-padding: 8px;
301
+ --input-block-color: #f5f7fa;
302
+ --input-block-hover-color: #eaebf0;
303
+ --input-icon-size: var(--font-size-medium);
304
+ --input-maxlength-color: #979ba5;
305
+ --button-primary-hover-color: #5594fa;
306
+ --button-danger-hover-color: #ff5656;
307
+ --button-success-hover-color: #45e35f;
308
+ --button-warning-hover-color: #ffb848;
309
+ --button-default-hover-border-color: #979ba5;
310
+ --button-primary-active-color: #2c77f4;
311
+ --button-danger-active-color: #db2626;
312
+ --button-success-active-color: #1ab943;
313
+ --button-warning-active-color: #eb9000;
314
+ --button-selected-bg-color: #e1ecff;
315
+ --button-disabled-selected-bg-color: #f0f1f5;
316
+ --radio-font-color: #63656e;
317
+ --radio-active-color: #3a84ff;
318
+ --radio-hover-border-color: #979ba5;
319
+ --radio-disabled-border: #dcdee5;
320
+ --radio-disabled-font-color: #c4c6cc;
321
+ --radio-disabled-checked-bg: #a3c5fd;
322
+ --radio-button-checked-bg: #e1ecff;
323
+ --radio-button-disabled-checked-bg: #fafbfd;
324
+ --checkbox-disabled-checked-bg: #a3c5fd;
325
+ --fixed-navbar-background: #fff;
326
+ --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
327
+ --switch-default-color: #fff;
328
+ --switch-grey-color: #c4c6cc;
329
+ --breadcrumb-black-color: #979ba5;
330
+ --breadcrumb-primary-hover-color: #0082ff;
331
+ --breadcrumb-fn-main-color: #63656e;
332
+ --link-default-hover-color: #979ba5;
333
+ --link-primary-hover-color: #699df4;
334
+ --link-success-hover-color: #45e35f;
335
+ --link-warning-hover-color: #ffb848;
336
+ --link-danger-hover-color: #ff5656;
337
+ --link-default-disabled-color: #dcdee5;
338
+ --link-primary-disabled-color: #a3c5fd;
339
+ --link-success-disabled-color: #94f5a4;
340
+ --link-warning-disabled-color: #ffd695;
341
+ --link-danger-disabled-color: #fd9c9c;
342
+ --message-color: var(--default-color);
343
+ --message-primary-bg-color: #f0f8ff;
344
+ --message-primary-border-color: #e1ecff;
345
+ --message-primary-shadow-color: #e1e8f4;
346
+ --message-warning-bg-color: #fff4e2;
347
+ --message-warning-border-color: #ffe8c3;
348
+ --message-warning-shadow-color: #ede6db;
349
+ --message-success-bg-color: #f2fff4;
350
+ --message-success-border-color: #dcffe2;
351
+ --message-success-shadow-color: #cef0d7;
352
+ --message-danger-bg-color: #ffeded;
353
+ --message-danger-border-color: #ffdddd;
354
+ --message-danger-shadow-color: #f6dada;
355
+ --slider-default-bg: #dcdee5;
356
+ --slider-disable-bar-bg: #979ba5;
357
+ --menu-bg-color: #182132;
358
+ --submenu-bg-color: #151d2c;
359
+ --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
360
+ --menu-color: #96a2b9;
361
+ --menu-group-color: var(--default-color);
362
+ --menu-width: 260px;
363
+ --menu-collapse-width: 60px;
364
+ --menu-active-color: white;
365
+ --nav-header-bg-color: #182132;
366
+ --nav-bg-color: #182132;
367
+ --date-picker-disabled-bg: #fafbfd;
368
+ --date-picker-dropdown-mb: 4px;
369
+ --date-picker-dropdown-bg: #fff;
370
+ --table-bg-color: var(--white-color);
371
+ --table-border-color: #dcdee5;
372
+ --table-strip-color: #fafbfd;
373
+ --table-head-bg-color: #fafbfd;
374
+ --table-head-font-color: #313238;
375
+ --table-body-font-color: #63656e;
376
+ --table-row-hover-bg-color: #f5f7fa;
377
+ --table-row-active-bg-color: #f0f1f5;
378
+ --cascader-panel-border-color: #dcdee5;
379
+ --cascader-panel-hover: #f5f7fa;
380
+ --cascader-panel-active: #e1ecff;
381
+ --cascader-panel-disabled-bg: #fff;
382
+ --search-select-focus-border-color: var(--primary-color);
383
+ --search-select-focus-color: #3c96ff;
384
+ --search-select-font-color: var(--default-color);
385
+ --search-select-placeholder-color: var(--light-gray);
386
+ --search-select-message-color: var(--danger-color);
387
+ --search-select-menu-border-color: var(--disable-color);
388
+ --select-active-color: #e1ecff;
389
+ --select-hover-color: #f5f7fa;
390
+ }
391
+ .bk-scrollbar {
392
+ overflow: hidden !important;
393
+ overflow-anchor: none;
394
+ touch-action: auto;
395
+ /*
396
+ * Scrollbar rail styles
397
+ */
398
+ /*
399
+ * Scrollbar thumb styles
400
+ */
401
+ }
402
+ .bk-scrollbar.bk--active-x > .bk__rail-x,
403
+ .bk-scrollbar.bk--active-y > .bk__rail-y {
404
+ display: block;
405
+ }
406
+ .bk-scrollbar .bk__rail-x:hover,
407
+ .bk-scrollbar .bk__rail-y:hover,
408
+ .bk-scrollbar .bk__rail-x:focus,
409
+ .bk-scrollbar .bk__rail-y:focus,
410
+ .bk-scrollbar .bk__rail-x.bk--clicking,
411
+ .bk-scrollbar .bk__rail-y.bk--clicking {
412
+ background-color: #f0f1f5;
413
+ }
414
+ .bk-scrollbar .bk__rail-x {
415
+ display: none;
416
+ opacity: 0;
417
+ transition: background-color 0.2s linear, opacity 0.2s linear;
418
+ height: 10px;
419
+ bottom: 0px;
420
+ position: absolute;
421
+ }
422
+ .bk-scrollbar .bk__rail-x.bk-size-small {
423
+ height: 8px;
424
+ }
425
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
426
+ height: 6px;
427
+ }
428
+ .bk-scrollbar .bk__rail-y {
429
+ display: none;
430
+ opacity: 0;
431
+ transition: background-color 0.2s linear, opacity 0.2s linear;
432
+ width: 10px;
433
+ right: 0px;
434
+ position: absolute;
435
+ margin-right: 2px;
436
+ }
437
+ .bk-scrollbar .bk__rail-y.bk-size-small {
438
+ width: 8px;
439
+ }
440
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
441
+ width: 6px;
442
+ }
443
+ .bk-scrollbar:hover > .bk__rail-x,
444
+ .bk-scrollbar:hover > .bk__rail-y,
445
+ .bk-scrollbar.bk--focus > .bk__rail-x,
446
+ .bk-scrollbar.bk--focus > .bk__rail-y,
447
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
448
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
449
+ opacity: 0.9;
450
+ }
451
+ .bk-scrollbar .bk__thumb-x {
452
+ background-color: #dcdee5;
453
+ border-radius: 8px;
454
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
455
+ height: 8px;
456
+ bottom: 0px;
457
+ position: absolute;
458
+ }
459
+ .bk-scrollbar .bk__thumb-y {
460
+ background-color: #dcdee5;
461
+ border-radius: 8px;
462
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
463
+ width: 8px;
464
+ right: 0px;
465
+ position: absolute;
466
+ }
467
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
468
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
469
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
470
+ background-color: #979ba5;
471
+ height: 10px;
472
+ }
473
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
474
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
475
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
476
+ background-color: #979ba5;
477
+ width: 10px;
478
+ }
479
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
480
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
481
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
482
+ height: 8px;
483
+ }
484
+ .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
485
+ .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
486
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
487
+ width: 8px;
488
+ }
489
+ /* MS supports */
490
+ @supports (-ms-overflow-style: none) {
491
+ .bk-scrollbar {
492
+ overflow: auto !important;
493
+ }
494
+ }
495
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
496
+ .bk-scrollbar {
497
+ overflow: auto !important;
498
+ }
499
+ }
package/lib/styles/index.d.ts CHANGED
@@ -56,3 +56,4 @@ import '../pop-confirm/pop-confirm.less';
56
56
  import '../image/image.less';
57
57
  import '../image/image-viewer.less';
58
58
  import '../overflow-title/overflow-title.less';
59
+ import '../scrollbar/css/scrollbar.less';
package/lib/table/hooks/use-layout.d.ts CHANGED
@@ -7,6 +7,7 @@ declare const _default: (props: TablePropTypes, ctx: any) => {
7
7
  renderFooter: (childrend?: any) => JSX.Element;
8
8
  renderFixedBottom: () => JSX.Element;
9
9
  setBodyHeight: (height: number) => void;
10
+ setVirtualBodyHeight: (height: number) => void;
10
11
  setFootHeight: (height: number) => void;
11
12
  setTranslateX: (val: number) => void;
12
13
  setDragOffsetX: (val: number) => void;
package/lib/table/index.js CHANGED
@@ -17661,6 +17661,9 @@ var IColSortBehavior;
17661
17661
  */
17662
17662
  IColSortBehavior["interdependent"] = "interdependent";
17663
17663
  })(IColSortBehavior || (IColSortBehavior = {}));
17664
+ // export enum BkScrollBehavior {
17665
+ // AUTO = 'auto',
17666
+ // };
17664
17667
  var tableProps = {
17665
17668
  /**
17666
17669
  * 渲染列表
@@ -17910,6 +17913,7 @@ var tableProps = {
17910
17913
  * 启用Scrollbar
17911
17914
  */
17912
17915
  scrollbar: shared_namespaceObject.PropTypes.bool.def(true),
17916
+ // scrollbehavior: toType<`${ScrollBehavior}`>('ScrollBehavior', {
17913
17917
  /**
17914
17918
  * 固定在底部的配置项
17915
17919
  */
@@ -21160,8 +21164,12 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
21160
21164
  var lineHeight = (0,external_vue_namespaceObject.ref)((_props$rowHeight = props.rowHeight) !== null && _props$rowHeight !== void 0 ? _props$rowHeight : LINE_HEIGHT);
21161
21165
  var headerRowCount = (0,external_vue_namespaceObject.ref)(1);
21162
21166
  var fixedBottomHeight = (0,external_vue_namespaceObject.computed)(function () {
21163
- var _props$fixedBottom, _props$fixedBottom$he, _props$fixedBottom2;
21164
- return ((_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.position) === 'relative' ? (_props$fixedBottom$he = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.height) !== null && _props$fixedBottom$he !== void 0 ? _props$fixedBottom$he : LINE_HEIGHT : 0;
21167
+ var _ctx$slots;
21168
+ if ((_ctx$slots = ctx.slots) !== null && _ctx$slots !== void 0 && _ctx$slots.fixedBottom) {
21169
+ var _props$fixedBottom, _props$fixedBottom$he, _props$fixedBottom2;
21170
+ return ((_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.position) === 'relative' ? (_props$fixedBottom$he = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.height) !== null && _props$fixedBottom$he !== void 0 ? _props$fixedBottom$he : LINE_HEIGHT : 0;
21171
+ }
21172
+ return 0;
21165
21173
  });
21166
21174
  var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
21167
21175
  resolveClassName = _usePrefix.resolveClassName;
@@ -21236,14 +21244,14 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
21236
21244
  return (0,shared_namespaceObject.classes)(defineProperty_defineProperty(defineProperty_defineProperty({}, resolveClassName('table-footer'), true), 'is-hidden', footHeight.value === 0));
21237
21245
  });
21238
21246
  var renderContainer = function renderContainer(childrend) {
21239
- var _ctx$slots$default, _ctx$slots;
21247
+ var _ctx$slots$default, _ctx$slots2;
21240
21248
  return (0,external_vue_namespaceObject.createVNode)("div", {
21241
21249
  "ref": refRoot,
21242
21250
  "style": tableStyle.value,
21243
21251
  "class": tableClass.value
21244
21252
  }, [childrend, (0,external_vue_namespaceObject.createVNode)(ghost_body, null, {
21245
21253
  "default": function _default() {
21246
- return [(_ctx$slots$default = (_ctx$slots = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots)];
21254
+ return [(_ctx$slots$default = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots2)];
21247
21255
  }
21248
21256
  })]);
21249
21257
  };
@@ -21286,6 +21294,9 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
21286
21294
  var setBodyHeight = function setBodyHeight(height) {
21287
21295
  bodyHeight.value = height - headHeight.value - fixedBottomHeight.value - footHeight.value;
21288
21296
  };
21297
+ var setVirtualBodyHeight = function setVirtualBodyHeight(height) {
21298
+ bodyHeight.value = height;
21299
+ };
21289
21300
  var footHeight = (0,external_vue_namespaceObject.ref)(0);
21290
21301
  var footerStyle = (0,external_vue_namespaceObject.computed)(function () {
21291
21302
  return {
@@ -21421,6 +21432,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
21421
21432
  renderFooter: renderFooter,
21422
21433
  renderFixedBottom: renderFixedBottom,
21423
21434
  setBodyHeight: setBodyHeight,
21435
+ setVirtualBodyHeight: setVirtualBodyHeight,
21424
21436
  setFootHeight: setFootHeight,
21425
21437
  setTranslateX: setTranslateX,
21426
21438
  setDragOffsetX: setDragOffsetX,
package/lib/table/table.css CHANGED
@@ -145,9 +145,6 @@
145
145
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
146
146
  border-radius: 4px;
147
147
  }
148
- /*
149
- * Container style
150
- */
151
148
  .bk-scrollbar {
152
149
  overflow: hidden !important;
153
150
  overflow-anchor: none;
@@ -1500,6 +1497,7 @@
1500
1497
  overflow: hidden;
1501
1498
  background-color: var(--background-color);
1502
1499
  height: var(--row-height);
1500
+ min-height: var(--row-height);
1503
1501
  }
1504
1502
  .bk-table .bk-table-head.has-group .is-head-group {
1505
1503
  border-bottom: 1px solid var(--table-border-color);
@@ -1552,6 +1550,7 @@
1552
1550
  display: flex;
1553
1551
  width: 100%;
1554
1552
  height: var(--footer-height);
1553
+ min-height: var(--footer-height);
1555
1554
  align-items: center;
1556
1555
  padding: 0 16px 0 22px;
1557
1556
  }
package/lib/table/table.less CHANGED
@@ -298,6 +298,7 @@
298
298
  overflow: hidden;
299
299
  background-color: var(--background-color);
300
300
  height: var(--row-height);
301
+ min-height: var(--row-height);
301
302
 
302
303
  &.has-group {
303
304
  .is-head-group {
@@ -362,6 +363,7 @@
362
363
  display: flex;
363
364
  width: 100%;
364
365
  height: var(--footer-height);
366
+ min-height: var(--footer-height);
365
367
  align-items: center;
366
368
  padding: 0 16px 0 22px;
367
369
 
package/lib/table/table.variable.css CHANGED
@@ -535,9 +535,6 @@
535
535
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
536
536
  border-radius: 4px;
537
537
  }
538
- /*
539
- * Container style
540
- */
541
538
  .bk-scrollbar {
542
539
  overflow: hidden !important;
543
540
  overflow-anchor: none;
@@ -1890,6 +1887,7 @@
1890
1887
  overflow: hidden;
1891
1888
  background-color: var(--background-color);
1892
1889
  height: var(--row-height);
1890
+ min-height: var(--row-height);
1893
1891
  }
1894
1892
  .bk-table .bk-table-head.has-group .is-head-group {
1895
1893
  border-bottom: 1px solid var(--table-border-color);
@@ -1942,6 +1940,7 @@
1942
1940
  display: flex;
1943
1941
  width: 100%;
1944
1942
  height: var(--footer-height);
1943
+ min-height: var(--footer-height);
1945
1944
  align-items: center;
1946
1945
  padding: 0 16px 0 22px;
1947
1946
  }
package/lib/table-column/index.js CHANGED
@@ -17636,6 +17636,9 @@ var IColSortBehavior;
17636
17636
  */
17637
17637
  IColSortBehavior["interdependent"] = "interdependent";
17638
17638
  })(IColSortBehavior || (IColSortBehavior = {}));
17639
+ // export enum BkScrollBehavior {
17640
+ // AUTO = 'auto',
17641
+ // };
17639
17642
  var tableProps = {
17640
17643
  /**
17641
17644
  * 渲染列表
@@ -17885,6 +17888,7 @@ var tableProps = {
17885
17888
  * 启用Scrollbar
17886
17889
  */
17887
17890
  scrollbar: shared_namespaceObject.PropTypes.bool.def(true),
17891
+ // scrollbehavior: toType<`${ScrollBehavior}`>('ScrollBehavior', {
17888
17892
  /**
17889
17893
  * 固定在底部的配置项
17890
17894
  */
package/lib/tree/tree.css CHANGED
@@ -145,9 +145,6 @@
145
145
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
146
146
  border-radius: 4px;
147
147
  }
148
- /*
149
- * Container style
150
- */
151
148
  .bk-scrollbar {
152
149
  overflow: hidden !important;
153
150
  overflow-anchor: none;
package/lib/tree/tree.variable.css CHANGED
@@ -535,9 +535,6 @@
535
535
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
536
536
  border-radius: 4px;
537
537
  }
538
- /*
539
- * Container style
540
- */
541
538
  .bk-scrollbar {
542
539
  overflow: hidden !important;
543
540
  overflow-anchor: none;