bkui-vue 2.0.1-beta.39 → 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 (48) hide show
  1. package/dist/index.cjs.js +63 -63
  2. package/dist/index.esm.js +15769 -15734
  3. package/dist/index.umd.js +63 -63
  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/{scrollbar.css → css/scrollbar.css} +90 -75
  8. package/lib/scrollbar/css/scrollbar.less +139 -0
  9. package/lib/scrollbar/{scrollbar.variable.css → css/scrollbar.variable.css} +89 -74
  10. package/lib/scrollbar/handlers/click-rail.d.ts +2 -0
  11. package/lib/scrollbar/handlers/drag-thumb.d.ts +1 -0
  12. package/lib/scrollbar/handlers/keyboard.d.ts +2 -0
  13. package/lib/scrollbar/handlers/mouse-wheel.d.ts +2 -0
  14. package/lib/scrollbar/handlers/touch.d.ts +4 -0
  15. package/lib/scrollbar/helper/class-names.d.ts +21 -0
  16. package/lib/scrollbar/helper/css.d.ts +3 -0
  17. package/lib/scrollbar/helper/dom.d.ts +4 -0
  18. package/lib/scrollbar/helper/event-manager.d.ts +20 -0
  19. package/lib/scrollbar/helper/util.d.ts +11 -0
  20. package/lib/scrollbar/index.d.ts +133 -13
  21. package/lib/scrollbar/index.js +1331 -18489
  22. package/lib/scrollbar/process-scroll-diff.d.ts +1 -0
  23. package/lib/scrollbar/update-geometry.d.ts +8 -0
  24. package/lib/styles/index.d.ts +1 -0
  25. package/lib/table/hooks/use-columns.d.ts +4 -1
  26. package/lib/table/hooks/use-layout.d.ts +1 -0
  27. package/lib/table/index.js +140 -66
  28. package/lib/table/table.css +108 -115
  29. package/lib/table/table.less +24 -34
  30. package/lib/table/table.variable.css +108 -115
  31. package/lib/table-column/index.js +4 -0
  32. package/lib/tree/tree.css +90 -83
  33. package/lib/tree/tree.variable.css +90 -83
  34. package/lib/virtual-render/index.d.ts +0 -23
  35. package/lib/virtual-render/index.js +54 -106
  36. package/lib/virtual-render/props.d.ts +0 -6
  37. package/lib/virtual-render/use-scrollbar.d.ts +3 -17
  38. package/lib/virtual-render/virtual-render.css +89 -82
  39. package/lib/virtual-render/virtual-render.d.ts +0 -11
  40. package/lib/virtual-render/virtual-render.less +2 -11
  41. package/lib/virtual-render/virtual-render.variable.css +89 -82
  42. package/package.json +1 -1
  43. package/lib/scrollbar/scrollbar-core/can-use-dom.d.ts +0 -2
  44. package/lib/scrollbar/scrollbar-core/helpers.d.ts +0 -5
  45. package/lib/scrollbar/scrollbar-core/index.d.ts +0 -242
  46. package/lib/scrollbar/scrollbar-core/mouse-wheel.d.ts +0 -5
  47. package/lib/scrollbar/scrollbar-core/scrollbar-width.d.ts +0 -1
  48. package/lib/scrollbar/scrollbar.less +0 -119
package/lib/virtual-render/virtual-render.css CHANGED
@@ -145,111 +145,118 @@
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
+ .bk-scrollbar {
149
+ overflow: hidden !important;
150
+ overflow-anchor: none;
151
+ touch-action: auto;
152
+ /*
153
+ * Scrollbar rail styles
154
+ */
155
+ /*
156
+ * Scrollbar thumb styles
157
+ */
156
158
  }
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;
159
+ .bk-scrollbar.bk--active-x > .bk__rail-x,
160
+ .bk-scrollbar.bk--active-y > .bk__rail-y {
161
+ display: block;
167
162
  }
168
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
169
- width: 8px;
163
+ .bk-scrollbar .bk__rail-x:hover,
164
+ .bk-scrollbar .bk__rail-y:hover,
165
+ .bk-scrollbar .bk__rail-x:focus,
166
+ .bk-scrollbar .bk__rail-y:focus,
167
+ .bk-scrollbar .bk__rail-x.bk--clicking,
168
+ .bk-scrollbar .bk__rail-y.bk--clicking {
169
+ background-color: #f0f1f5;
170
170
  }
171
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
172
- height: 6px;
171
+ .bk-scrollbar .bk__rail-x {
172
+ display: none;
173
+ opacity: 0;
174
+ transition: background-color 0.2s linear, opacity 0.2s linear;
175
+ height: 10px;
176
+ bottom: 0px;
177
+ position: absolute;
173
178
  }
174
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
179
+ .bk-scrollbar .bk__rail-x.bk-size-small {
175
180
  height: 8px;
176
181
  }
177
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
178
- background-color: #f0f1f5;
179
- cursor: pointer;
182
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
183
+ height: 6px;
180
184
  }
181
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
182
- background-color: #979ba5;
185
+ .bk-scrollbar .bk__rail-y {
186
+ display: none;
187
+ opacity: 0;
188
+ transition: background-color 0.2s linear, opacity 0.2s linear;
189
+ width: 10px;
190
+ right: 0px;
191
+ position: absolute;
192
+ margin-right: 2px;
183
193
  }
184
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
185
- top: 0;
194
+ .bk-scrollbar .bk__rail-y.bk-size-small {
186
195
  width: 8px;
187
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
188
196
  }
189
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
190
- width: 10px;
197
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
198
+ width: 6px;
199
+ }
200
+ .bk-scrollbar:hover > .bk__rail-x,
201
+ .bk-scrollbar:hover > .bk__rail-y,
202
+ .bk-scrollbar.bk--focus > .bk__rail-x,
203
+ .bk-scrollbar.bk--focus > .bk__rail-y,
204
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
205
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
206
+ opacity: 0.9;
191
207
  }
192
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
193
- left: 0;
208
+ .bk-scrollbar .bk__thumb-x {
209
+ background-color: #dcdee5;
210
+ border-radius: 8px;
211
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
194
212
  height: 8px;
195
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
213
+ bottom: 0px;
214
+ position: absolute;
196
215
  }
197
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
216
+ .bk-scrollbar .bk__thumb-y {
217
+ background-color: #dcdee5;
218
+ border-radius: 8px;
219
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
220
+ width: 8px;
221
+ right: 0px;
222
+ position: absolute;
223
+ }
224
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
225
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
226
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
227
+ background-color: #979ba5;
198
228
  height: 10px;
199
229
  }
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;
230
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
231
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
232
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
233
+ background-color: #979ba5;
234
+ width: 10px;
208
235
  }
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;
236
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
237
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
238
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
239
+ height: 8px;
217
240
  }
218
- .bk-scrollbar-wrapper .bk-scrollbar {
219
- position: absolute;
220
- left: 0;
221
- right: 0;
222
- top: 0;
223
- bottom: 0;
241
+ .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
242
+ .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
243
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
244
+ width: 8px;
224
245
  }
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;
246
+ /* MS supports */
247
+ @supports (-ms-overflow-style: none) {
248
+ .bk-scrollbar {
249
+ overflow: auto !important;
250
+ }
236
251
  }
237
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
238
- opacity: 0.9;
239
- transition-delay: 0s;
240
- transition-duration: 0s;
252
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
253
+ .bk-scrollbar {
254
+ overflow: auto !important;
255
+ }
241
256
  }
242
257
  .bk-virtual-render {
243
258
  position: relative;
244
259
  }
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
260
  .bk-virtual-render .bk-virtual-section {
254
261
  width: 1px;
255
262
  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,118 @@
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
+ .bk-scrollbar {
539
+ overflow: hidden !important;
540
+ overflow-anchor: none;
541
+ touch-action: auto;
542
+ /*
543
+ * Scrollbar rail styles
544
+ */
545
+ /*
546
+ * Scrollbar thumb styles
547
+ */
546
548
  }
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;
549
+ .bk-scrollbar.bk--active-x > .bk__rail-x,
550
+ .bk-scrollbar.bk--active-y > .bk__rail-y {
551
+ display: block;
557
552
  }
558
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
559
- width: 8px;
553
+ .bk-scrollbar .bk__rail-x:hover,
554
+ .bk-scrollbar .bk__rail-y:hover,
555
+ .bk-scrollbar .bk__rail-x:focus,
556
+ .bk-scrollbar .bk__rail-y:focus,
557
+ .bk-scrollbar .bk__rail-x.bk--clicking,
558
+ .bk-scrollbar .bk__rail-y.bk--clicking {
559
+ background-color: #f0f1f5;
560
560
  }
561
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
562
- height: 6px;
561
+ .bk-scrollbar .bk__rail-x {
562
+ display: none;
563
+ opacity: 0;
564
+ transition: background-color 0.2s linear, opacity 0.2s linear;
565
+ height: 10px;
566
+ bottom: 0px;
567
+ position: absolute;
563
568
  }
564
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
569
+ .bk-scrollbar .bk__rail-x.bk-size-small {
565
570
  height: 8px;
566
571
  }
567
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
568
- background-color: #f0f1f5;
569
- cursor: pointer;
572
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
573
+ height: 6px;
570
574
  }
571
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
572
- background-color: #979ba5;
575
+ .bk-scrollbar .bk__rail-y {
576
+ display: none;
577
+ opacity: 0;
578
+ transition: background-color 0.2s linear, opacity 0.2s linear;
579
+ width: 10px;
580
+ right: 0px;
581
+ position: absolute;
582
+ margin-right: 2px;
573
583
  }
574
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
575
- top: 0;
584
+ .bk-scrollbar .bk__rail-y.bk-size-small {
576
585
  width: 8px;
577
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
578
586
  }
579
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
580
- width: 10px;
587
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
588
+ width: 6px;
589
+ }
590
+ .bk-scrollbar:hover > .bk__rail-x,
591
+ .bk-scrollbar:hover > .bk__rail-y,
592
+ .bk-scrollbar.bk--focus > .bk__rail-x,
593
+ .bk-scrollbar.bk--focus > .bk__rail-y,
594
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
595
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
596
+ opacity: 0.9;
581
597
  }
582
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
583
- left: 0;
598
+ .bk-scrollbar .bk__thumb-x {
599
+ background-color: #dcdee5;
600
+ border-radius: 8px;
601
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
584
602
  height: 8px;
585
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
603
+ bottom: 0px;
604
+ position: absolute;
586
605
  }
587
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
606
+ .bk-scrollbar .bk__thumb-y {
607
+ background-color: #dcdee5;
608
+ border-radius: 8px;
609
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
610
+ width: 8px;
611
+ right: 0px;
612
+ position: absolute;
613
+ }
614
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
615
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
616
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
617
+ background-color: #979ba5;
588
618
  height: 10px;
589
619
  }
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;
620
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
621
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
622
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
623
+ background-color: #979ba5;
624
+ width: 10px;
598
625
  }
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;
626
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
627
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
628
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
629
+ height: 8px;
607
630
  }
608
- .bk-scrollbar-wrapper .bk-scrollbar {
609
- position: absolute;
610
- left: 0;
611
- right: 0;
612
- top: 0;
613
- bottom: 0;
631
+ .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
632
+ .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
633
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
634
+ width: 8px;
614
635
  }
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;
636
+ /* MS supports */
637
+ @supports (-ms-overflow-style: none) {
638
+ .bk-scrollbar {
639
+ overflow: auto !important;
640
+ }
626
641
  }
627
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
628
- opacity: 0.9;
629
- transition-delay: 0s;
630
- transition-duration: 0s;
642
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
643
+ .bk-scrollbar {
644
+ overflow: auto !important;
645
+ }
631
646
  }
632
647
  .bk-virtual-render {
633
648
  position: relative;
634
649
  }
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
650
  .bk-virtual-render .bk-virtual-section {
644
651
  width: 1px;
645
652
  background: transparent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bkui-vue",
3
- "version": "2.0.1-beta.39",
3
+ "version": "2.0.1-beta.39.table.2",
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;