bkui-vue 2.0.1-beta.38 → 2.0.1-beta.39.table.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 (45) hide show
  1. package/dist/index.cjs.js +62 -62
  2. package/dist/index.esm.js +15612 -15582
  3. package/dist/index.umd.js +62 -62
  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/info-box/index.js +3 -5
  8. package/lib/scrollbar/handlers/click-rail.d.ts +2 -0
  9. package/lib/scrollbar/handlers/drag-thumb.d.ts +1 -0
  10. package/lib/scrollbar/handlers/keyboard.d.ts +2 -0
  11. package/lib/scrollbar/handlers/mouse-wheel.d.ts +2 -0
  12. package/lib/scrollbar/handlers/touch.d.ts +4 -0
  13. package/lib/scrollbar/helper/class-names.d.ts +21 -0
  14. package/lib/scrollbar/helper/css.d.ts +3 -0
  15. package/lib/scrollbar/helper/dom.d.ts +4 -0
  16. package/lib/scrollbar/helper/event-manager.d.ts +20 -0
  17. package/lib/scrollbar/helper/util.d.ts +11 -0
  18. package/lib/scrollbar/index.d.ts +133 -13
  19. package/lib/scrollbar/index.js +1331 -18489
  20. package/lib/scrollbar/process-scroll-diff.d.ts +1 -0
  21. package/lib/scrollbar/update-geometry.d.ts +8 -0
  22. package/lib/table/hooks/use-columns.d.ts +4 -1
  23. package/lib/table/index.js +126 -64
  24. package/lib/table/table.css +109 -115
  25. package/lib/table/table.less +22 -34
  26. package/lib/table/table.variable.css +109 -115
  27. package/lib/tree/tree.css +93 -83
  28. package/lib/tree/tree.variable.css +93 -83
  29. package/lib/virtual-render/index.d.ts +0 -23
  30. package/lib/virtual-render/index.js +54 -106
  31. package/lib/virtual-render/props.d.ts +0 -6
  32. package/lib/virtual-render/use-scrollbar.d.ts +3 -17
  33. package/lib/virtual-render/virtual-render.css +92 -82
  34. package/lib/virtual-render/virtual-render.d.ts +0 -11
  35. package/lib/virtual-render/virtual-render.less +2 -11
  36. package/lib/virtual-render/virtual-render.variable.css +92 -82
  37. package/package.json +1 -1
  38. package/lib/scrollbar/scrollbar-core/can-use-dom.d.ts +0 -2
  39. package/lib/scrollbar/scrollbar-core/helpers.d.ts +0 -5
  40. package/lib/scrollbar/scrollbar-core/index.d.ts +0 -242
  41. package/lib/scrollbar/scrollbar-core/mouse-wheel.d.ts +0 -5
  42. package/lib/scrollbar/scrollbar-core/scrollbar-width.d.ts +0 -1
  43. package/lib/scrollbar/scrollbar.css +0 -224
  44. package/lib/scrollbar/scrollbar.less +0 -119
  45. package/lib/scrollbar/scrollbar.variable.css +0 -484
package/lib/virtual-render/virtual-render.css CHANGED
@@ -145,111 +145,121 @@
145
145
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
146
146
  border-radius: 4px;
147
147
  }
148
- .bk-scrollbar-wrapper {
149
- position: relative;
150
- overflow: hidden;
151
- }
152
- .bk-scrollbar-wrapper .bk-scrollbar-content-el {
153
- display: inline-flex;
154
- flex-direction: column;
155
- width: 100%;
148
+ /*
149
+ * Container style
150
+ */
151
+ .bk-scrollbar {
152
+ overflow: hidden !important;
153
+ overflow-anchor: none;
154
+ touch-action: auto;
155
+ /*
156
+ * Scrollbar rail styles
157
+ */
158
+ /*
159
+ * Scrollbar thumb styles
160
+ */
156
161
  }
157
- .bk-scrollbar-wrapper .bk-scrollbar-track {
158
- z-index: 1;
159
- position: absolute;
160
- right: 0;
161
- bottom: 0;
162
- pointer-events: none;
163
- overflow: hidden;
164
- }
165
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
166
- width: 6px;
162
+ .bk-scrollbar.bk--active-x > .bk__rail-x,
163
+ .bk-scrollbar.bk--active-y > .bk__rail-y {
164
+ display: block;
167
165
  }
168
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
169
- width: 8px;
166
+ .bk-scrollbar .bk__rail-x:hover,
167
+ .bk-scrollbar .bk__rail-y:hover,
168
+ .bk-scrollbar .bk__rail-x:focus,
169
+ .bk-scrollbar .bk__rail-y:focus,
170
+ .bk-scrollbar .bk__rail-x.bk--clicking,
171
+ .bk-scrollbar .bk__rail-y.bk--clicking {
172
+ background-color: #f0f1f5;
170
173
  }
171
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
172
- height: 6px;
174
+ .bk-scrollbar .bk__rail-x {
175
+ display: none;
176
+ opacity: 0;
177
+ transition: background-color 0.2s linear, opacity 0.2s linear;
178
+ height: 10px;
179
+ bottom: 0px;
180
+ position: absolute;
173
181
  }
174
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
182
+ .bk-scrollbar .bk__rail-x.bk-size-small {
175
183
  height: 8px;
176
184
  }
177
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
178
- background-color: #f0f1f5;
179
- cursor: pointer;
185
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
186
+ height: 6px;
180
187
  }
181
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
182
- background-color: #979ba5;
188
+ .bk-scrollbar .bk__rail-y {
189
+ display: none;
190
+ opacity: 0;
191
+ transition: background-color 0.2s linear, opacity 0.2s linear;
192
+ width: 10px;
193
+ right: 0px;
194
+ position: absolute;
195
+ margin-right: 2px;
183
196
  }
184
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
185
- top: 0;
197
+ .bk-scrollbar .bk__rail-y.bk-size-small {
186
198
  width: 8px;
187
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
188
199
  }
189
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
190
- width: 10px;
200
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
201
+ width: 6px;
202
+ }
203
+ .bk-scrollbar:hover > .bk__rail-x,
204
+ .bk-scrollbar:hover > .bk__rail-y,
205
+ .bk-scrollbar.bk--focus > .bk__rail-x,
206
+ .bk-scrollbar.bk--focus > .bk__rail-y,
207
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
208
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
209
+ opacity: 0.9;
191
210
  }
192
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
193
- left: 0;
211
+ .bk-scrollbar .bk__thumb-x {
212
+ background-color: #dcdee5;
213
+ border-radius: 8px;
214
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
194
215
  height: 8px;
195
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
216
+ bottom: 0px;
217
+ position: absolute;
196
218
  }
197
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
219
+ .bk-scrollbar .bk__thumb-y {
220
+ background-color: #dcdee5;
221
+ border-radius: 8px;
222
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
223
+ width: 8px;
224
+ right: 0px;
225
+ position: absolute;
226
+ }
227
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
228
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
229
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
230
+ background-color: #979ba5;
198
231
  height: 10px;
199
232
  }
200
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
201
- right: auto;
202
- left: 0;
203
- top: 0;
204
- bottom: 0;
205
- min-height: 0;
206
- min-width: 8px;
207
- width: auto;
233
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
234
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
235
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
236
+ background-color: #979ba5;
237
+ width: 10px;
208
238
  }
209
- .bk-scrollbar-wrapper .bk-scrollbar-dragging {
210
- pointer-events: none;
211
- -webkit-touch-callout: none;
212
- -webkit-user-select: none;
213
- -khtml-user-select: none;
214
- -moz-user-select: none;
215
- -ms-user-select: none;
216
- user-select: none;
239
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
240
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
241
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
242
+ height: 8px;
217
243
  }
218
- .bk-scrollbar-wrapper .bk-scrollbar {
219
- position: absolute;
220
- left: 0;
221
- right: 0;
222
- top: 0;
223
- bottom: 0;
244
+ .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
245
+ .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
246
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
247
+ width: 8px;
224
248
  }
225
- .bk-scrollbar-wrapper .bk-scrollbar::before {
226
- position: absolute;
227
- content: '';
228
- background: #dcdee5;
229
- border-radius: 6px;
230
- left: 0;
231
- right: 0;
232
- top: 0;
233
- bottom: 0;
234
- opacity: 0;
235
- transition: opacity 0.2s 0.9s linear;
249
+ /* MS supports */
250
+ @supports (-ms-overflow-style: none) {
251
+ .bk-scrollbar {
252
+ overflow: auto !important;
253
+ }
236
254
  }
237
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
238
- opacity: 0.9;
239
- transition-delay: 0s;
240
- transition-duration: 0s;
255
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
256
+ .bk-scrollbar {
257
+ overflow: auto !important;
258
+ }
241
259
  }
242
260
  .bk-virtual-render {
243
261
  position: relative;
244
262
  }
245
- .bk-virtual-render .bk-virtual-content {
246
- position: absolute;
247
- top: 0;
248
- bottom: 0;
249
- left: 0;
250
- width: 100%;
251
- height: 100%;
252
- }
253
263
  .bk-virtual-render .bk-virtual-section {
254
264
  width: 1px;
255
265
  background: transparent;
package/lib/virtual-render/virtual-render.d.ts CHANGED
@@ -94,11 +94,6 @@ declare const _default: import("vue").DefineComponent<{
94
94
  } & {
95
95
  default: string;
96
96
  };
97
- contentAs: import("vue-types").VueTypeValidableDef<string> & {
98
- default: string;
99
- } & {
100
- default: string;
101
- };
102
97
  scrollOffsetTop: import("vue-types").VueTypeValidableDef<number> & {
103
98
  default: number;
104
99
  } & {
@@ -233,11 +228,6 @@ declare const _default: import("vue").DefineComponent<{
233
228
  } & {
234
229
  default: string;
235
230
  };
236
- contentAs: import("vue-types").VueTypeValidableDef<string> & {
237
- default: string;
238
- } & {
239
- default: string;
240
- };
241
231
  scrollOffsetTop: import("vue-types").VueTypeValidableDef<number> & {
242
232
  default: number;
243
233
  } & {
@@ -305,7 +295,6 @@ declare const _default: import("vue").DefineComponent<{
305
295
  groupItemCount: number;
306
296
  preloadItemCount: number;
307
297
  renderAs: string;
308
- contentAs: string;
309
298
  scrollOffsetTop: number;
310
299
  scrollPosition: string;
311
300
  abosuteHeight: string | number;
package/lib/virtual-render/virtual-render.less CHANGED
@@ -1,21 +1,12 @@
1
1
  @import '../styles/themes/themes.less';
2
2
  @import '../styles/mixins/scroll.less';
3
- @import '../scrollbar/scrollbar.less';
3
+ @import '../scrollbar/css/scrollbar.less';
4
4
 
5
5
  .@{bk-prefix}-virtual-render {
6
6
  position: relative;
7
7
 
8
- .@{bk-prefix}-virtual-content {
9
- position: absolute;
10
- top: 0;
11
- bottom: 0;
12
- left: 0;
13
- width: 100%;
14
- height: 100%;
15
- }
16
-
17
8
  .@{bk-prefix}-virtual-section {
18
9
  width: 1px;
19
10
  background: transparent;
20
11
  }
21
- }
12
+ }
package/lib/virtual-render/virtual-render.variable.css CHANGED
@@ -535,111 +535,121 @@
535
535
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
536
536
  border-radius: 4px;
537
537
  }
538
- .bk-scrollbar-wrapper {
539
- position: relative;
540
- overflow: hidden;
541
- }
542
- .bk-scrollbar-wrapper .bk-scrollbar-content-el {
543
- display: inline-flex;
544
- flex-direction: column;
545
- width: 100%;
538
+ /*
539
+ * Container style
540
+ */
541
+ .bk-scrollbar {
542
+ overflow: hidden !important;
543
+ overflow-anchor: none;
544
+ touch-action: auto;
545
+ /*
546
+ * Scrollbar rail styles
547
+ */
548
+ /*
549
+ * Scrollbar thumb styles
550
+ */
546
551
  }
547
- .bk-scrollbar-wrapper .bk-scrollbar-track {
548
- z-index: 1;
549
- position: absolute;
550
- right: 0;
551
- bottom: 0;
552
- pointer-events: none;
553
- overflow: hidden;
554
- }
555
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
556
- width: 6px;
552
+ .bk-scrollbar.bk--active-x > .bk__rail-x,
553
+ .bk-scrollbar.bk--active-y > .bk__rail-y {
554
+ display: block;
557
555
  }
558
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
559
- width: 8px;
556
+ .bk-scrollbar .bk__rail-x:hover,
557
+ .bk-scrollbar .bk__rail-y:hover,
558
+ .bk-scrollbar .bk__rail-x:focus,
559
+ .bk-scrollbar .bk__rail-y:focus,
560
+ .bk-scrollbar .bk__rail-x.bk--clicking,
561
+ .bk-scrollbar .bk__rail-y.bk--clicking {
562
+ background-color: #f0f1f5;
560
563
  }
561
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
562
- height: 6px;
564
+ .bk-scrollbar .bk__rail-x {
565
+ display: none;
566
+ opacity: 0;
567
+ transition: background-color 0.2s linear, opacity 0.2s linear;
568
+ height: 10px;
569
+ bottom: 0px;
570
+ position: absolute;
563
571
  }
564
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
572
+ .bk-scrollbar .bk__rail-x.bk-size-small {
565
573
  height: 8px;
566
574
  }
567
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
568
- background-color: #f0f1f5;
569
- cursor: pointer;
575
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
576
+ height: 6px;
570
577
  }
571
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
572
- background-color: #979ba5;
578
+ .bk-scrollbar .bk__rail-y {
579
+ display: none;
580
+ opacity: 0;
581
+ transition: background-color 0.2s linear, opacity 0.2s linear;
582
+ width: 10px;
583
+ right: 0px;
584
+ position: absolute;
585
+ margin-right: 2px;
573
586
  }
574
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
575
- top: 0;
587
+ .bk-scrollbar .bk__rail-y.bk-size-small {
576
588
  width: 8px;
577
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
578
589
  }
579
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
580
- width: 10px;
590
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
591
+ width: 6px;
592
+ }
593
+ .bk-scrollbar:hover > .bk__rail-x,
594
+ .bk-scrollbar:hover > .bk__rail-y,
595
+ .bk-scrollbar.bk--focus > .bk__rail-x,
596
+ .bk-scrollbar.bk--focus > .bk__rail-y,
597
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
598
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
599
+ opacity: 0.9;
581
600
  }
582
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
583
- left: 0;
601
+ .bk-scrollbar .bk__thumb-x {
602
+ background-color: #dcdee5;
603
+ border-radius: 8px;
604
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
584
605
  height: 8px;
585
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
606
+ bottom: 0px;
607
+ position: absolute;
586
608
  }
587
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
609
+ .bk-scrollbar .bk__thumb-y {
610
+ background-color: #dcdee5;
611
+ border-radius: 8px;
612
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
613
+ width: 8px;
614
+ right: 0px;
615
+ position: absolute;
616
+ }
617
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
618
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
619
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
620
+ background-color: #979ba5;
588
621
  height: 10px;
589
622
  }
590
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
591
- right: auto;
592
- left: 0;
593
- top: 0;
594
- bottom: 0;
595
- min-height: 0;
596
- min-width: 8px;
597
- width: auto;
623
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
624
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
625
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
626
+ background-color: #979ba5;
627
+ width: 10px;
598
628
  }
599
- .bk-scrollbar-wrapper .bk-scrollbar-dragging {
600
- pointer-events: none;
601
- -webkit-touch-callout: none;
602
- -webkit-user-select: none;
603
- -khtml-user-select: none;
604
- -moz-user-select: none;
605
- -ms-user-select: none;
606
- user-select: none;
629
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
630
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
631
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
632
+ height: 8px;
607
633
  }
608
- .bk-scrollbar-wrapper .bk-scrollbar {
609
- position: absolute;
610
- left: 0;
611
- right: 0;
612
- top: 0;
613
- bottom: 0;
634
+ .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
635
+ .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
636
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
637
+ width: 8px;
614
638
  }
615
- .bk-scrollbar-wrapper .bk-scrollbar::before {
616
- position: absolute;
617
- content: '';
618
- background: #dcdee5;
619
- border-radius: 6px;
620
- left: 0;
621
- right: 0;
622
- top: 0;
623
- bottom: 0;
624
- opacity: 0;
625
- transition: opacity 0.2s 0.9s linear;
639
+ /* MS supports */
640
+ @supports (-ms-overflow-style: none) {
641
+ .bk-scrollbar {
642
+ overflow: auto !important;
643
+ }
626
644
  }
627
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
628
- opacity: 0.9;
629
- transition-delay: 0s;
630
- transition-duration: 0s;
645
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
646
+ .bk-scrollbar {
647
+ overflow: auto !important;
648
+ }
631
649
  }
632
650
  .bk-virtual-render {
633
651
  position: relative;
634
652
  }
635
- .bk-virtual-render .bk-virtual-content {
636
- position: absolute;
637
- top: 0;
638
- bottom: 0;
639
- left: 0;
640
- width: 100%;
641
- height: 100%;
642
- }
643
653
  .bk-virtual-render .bk-virtual-section {
644
654
  width: 1px;
645
655
  background: transparent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bkui-vue",
3
- "version": "2.0.1-beta.38",
3
+ "version": "2.0.1-beta.39.table.1",
4
4
  "workspaces": [
5
5
  "packages/**",
6
6
  "scripts/cli",
package/lib/scrollbar/scrollbar-core/can-use-dom.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const _default: () => boolean;
2
- export default _default;
package/lib/scrollbar/scrollbar-core/helpers.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export declare function getElementWindow(element: Element): Window & typeof globalThis;
2
- export declare function getElementDocument(element: Element): Document;
3
- export declare function addClasses(el: HTMLElement | null, classes: string): void;
4
- export declare function removeClasses(el: HTMLElement | null, classes: string): void;
5
- export declare function classNamesToQuery(classNames: string): string;