bkui-vue 2.0.1-beta.34 → 2.0.1-beta.34.scrollbar.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 (42) hide show
  1. package/dist/index.cjs.js +57 -57
  2. package/dist/index.esm.js +14138 -14147
  3. package/dist/index.umd.js +58 -58
  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/handlers/click-rail.d.ts +2 -0
  8. package/lib/scrollbar/handlers/drag-thumb.d.ts +1 -0
  9. package/lib/scrollbar/handlers/keyboard.d.ts +2 -0
  10. package/lib/scrollbar/handlers/mouse-wheel.d.ts +2 -0
  11. package/lib/scrollbar/handlers/touch.d.ts +4 -0
  12. package/lib/scrollbar/helper/class-names.d.ts +21 -0
  13. package/lib/scrollbar/helper/css.d.ts +3 -0
  14. package/lib/scrollbar/helper/dom.d.ts +4 -0
  15. package/lib/scrollbar/helper/event-manager.d.ts +20 -0
  16. package/lib/scrollbar/helper/util.d.ts +11 -0
  17. package/lib/scrollbar/index.d.ts +129 -12
  18. package/lib/scrollbar/index.js +1336 -18488
  19. package/lib/scrollbar/process-scroll-diff.d.ts +1 -0
  20. package/lib/scrollbar/scrollbar.css +91 -75
  21. package/lib/scrollbar/scrollbar.less +111 -91
  22. package/lib/scrollbar/scrollbar.variable.css +90 -74
  23. package/lib/scrollbar/update-geometry.d.ts +8 -0
  24. package/lib/styles/index.d.ts +1 -0
  25. package/lib/table/table.css +90 -82
  26. package/lib/table/table.variable.css +90 -82
  27. package/lib/tree/tree.css +91 -83
  28. package/lib/tree/tree.variable.css +91 -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 +90 -82
  34. package/lib/virtual-render/virtual-render.d.ts +2 -13
  35. package/lib/virtual-render/virtual-render.less +1 -10
  36. package/lib/virtual-render/virtual-render.variable.css +90 -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
package/lib/virtual-render/virtual-render.css CHANGED
@@ -145,111 +145,119 @@
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;
178
+ margin-bottom: 2px;
173
179
  }
174
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
180
+ .bk-scrollbar .bk__rail-x.bk-size-small {
175
181
  height: 8px;
176
182
  }
177
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
178
- background-color: #f0f1f5;
179
- cursor: pointer;
183
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
184
+ height: 6px;
180
185
  }
181
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
182
- background-color: #979ba5;
186
+ .bk-scrollbar .bk__rail-y {
187
+ display: none;
188
+ opacity: 0;
189
+ transition: background-color 0.2s linear, opacity 0.2s linear;
190
+ width: 10px;
191
+ right: 0px;
192
+ position: absolute;
193
+ margin-right: 2px;
183
194
  }
184
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
185
- top: 0;
195
+ .bk-scrollbar .bk__rail-y.bk-size-small {
186
196
  width: 8px;
187
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
188
197
  }
189
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
190
- width: 10px;
198
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
199
+ width: 6px;
200
+ }
201
+ .bk-scrollbar:hover > .bk__rail-x,
202
+ .bk-scrollbar:hover > .bk__rail-y,
203
+ .bk-scrollbar.bk--focus > .bk__rail-x,
204
+ .bk-scrollbar.bk--focus > .bk__rail-y,
205
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
206
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
207
+ opacity: 0.9;
191
208
  }
192
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
193
- left: 0;
209
+ .bk-scrollbar .bk__thumb-x {
210
+ background-color: #dcdee5;
211
+ border-radius: 8px;
212
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
194
213
  height: 8px;
195
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
214
+ bottom: 0px;
215
+ position: absolute;
196
216
  }
197
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
217
+ .bk-scrollbar .bk__thumb-y {
218
+ background-color: #dcdee5;
219
+ border-radius: 8px;
220
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
221
+ width: 8px;
222
+ right: 0px;
223
+ position: absolute;
224
+ }
225
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
226
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
227
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
228
+ background-color: #979ba5;
198
229
  height: 10px;
199
230
  }
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;
231
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
232
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
233
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
234
+ background-color: #979ba5;
235
+ width: 10px;
208
236
  }
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;
237
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
238
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
239
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
240
+ height: 8px;
217
241
  }
218
- .bk-scrollbar-wrapper .bk-scrollbar {
219
- position: absolute;
220
- left: 0;
221
- right: 0;
222
- top: 0;
223
- bottom: 0;
242
+ .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
243
+ .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
244
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
245
+ width: 8px;
224
246
  }
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;
247
+ /* MS supports */
248
+ @supports (-ms-overflow-style: none) {
249
+ .bk-scrollbar {
250
+ overflow: auto !important;
251
+ }
236
252
  }
237
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
238
- opacity: 0.9;
239
- transition-delay: 0s;
240
- transition-duration: 0s;
253
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
254
+ .bk-scrollbar {
255
+ overflow: auto !important;
256
+ }
241
257
  }
242
258
  .bk-virtual-render {
243
259
  position: relative;
244
260
  }
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
261
  .bk-virtual-render .bk-virtual-section {
254
262
  width: 1px;
255
263
  background: transparent;
package/lib/virtual-render/virtual-render.d.ts CHANGED
@@ -94,16 +94,11 @@ 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
  } & {
105
100
  default: number;
106
- };
101
+ }; /** 指令触发Scroll事件，计算当前startIndex & endIndex & scrollTop & translateY */
107
102
  scrollPosition: import("vue-types").VueTypeValidableDef<string> & {
108
103
  default: string;
109
104
  } & {
@@ -233,16 +228,11 @@ 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
  } & {
244
234
  default: number;
245
- };
235
+ }; /** 指令触发Scroll事件，计算当前startIndex & endIndex & scrollTop & translateY */
246
236
  scrollPosition: import("vue-types").VueTypeValidableDef<string> & {
247
237
  default: string;
248
238
  } & {
@@ -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
@@ -5,17 +5,8 @@
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,119 @@
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;
568
+ margin-bottom: 2px;
563
569
  }
564
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
570
+ .bk-scrollbar .bk__rail-x.bk-size-small {
565
571
  height: 8px;
566
572
  }
567
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
568
- background-color: #f0f1f5;
569
- cursor: pointer;
573
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
574
+ height: 6px;
570
575
  }
571
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
572
- background-color: #979ba5;
576
+ .bk-scrollbar .bk__rail-y {
577
+ display: none;
578
+ opacity: 0;
579
+ transition: background-color 0.2s linear, opacity 0.2s linear;
580
+ width: 10px;
581
+ right: 0px;
582
+ position: absolute;
583
+ margin-right: 2px;
573
584
  }
574
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
575
- top: 0;
585
+ .bk-scrollbar .bk__rail-y.bk-size-small {
576
586
  width: 8px;
577
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
578
587
  }
579
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
580
- width: 10px;
588
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
589
+ width: 6px;
590
+ }
591
+ .bk-scrollbar:hover > .bk__rail-x,
592
+ .bk-scrollbar:hover > .bk__rail-y,
593
+ .bk-scrollbar.bk--focus > .bk__rail-x,
594
+ .bk-scrollbar.bk--focus > .bk__rail-y,
595
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
596
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
597
+ opacity: 0.9;
581
598
  }
582
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
583
- left: 0;
599
+ .bk-scrollbar .bk__thumb-x {
600
+ background-color: #dcdee5;
601
+ border-radius: 8px;
602
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
584
603
  height: 8px;
585
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
604
+ bottom: 0px;
605
+ position: absolute;
586
606
  }
587
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
607
+ .bk-scrollbar .bk__thumb-y {
608
+ background-color: #dcdee5;
609
+ border-radius: 8px;
610
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
611
+ width: 8px;
612
+ right: 0px;
613
+ position: absolute;
614
+ }
615
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
616
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
617
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
618
+ background-color: #979ba5;
588
619
  height: 10px;
589
620
  }
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;
621
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
622
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
623
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
624
+ background-color: #979ba5;
625
+ width: 10px;
598
626
  }
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;
627
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
628
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
629
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
630
+ height: 8px;
607
631
  }
608
- .bk-scrollbar-wrapper .bk-scrollbar {
609
- position: absolute;
610
- left: 0;
611
- right: 0;
612
- top: 0;
613
- bottom: 0;
632
+ .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
633
+ .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
634
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
635
+ width: 8px;
614
636
  }
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;
637
+ /* MS supports */
638
+ @supports (-ms-overflow-style: none) {
639
+ .bk-scrollbar {
640
+ overflow: auto !important;
641
+ }
626
642
  }
627
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
628
- opacity: 0.9;
629
- transition-delay: 0s;
630
- transition-duration: 0s;
643
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
644
+ .bk-scrollbar {
645
+ overflow: auto !important;
646
+ }
631
647
  }
632
648
  .bk-virtual-render {
633
649
  position: relative;
634
650
  }
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
651
  .bk-virtual-render .bk-virtual-section {
644
652
  width: 1px;
645
653
  background: transparent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bkui-vue",
3
- "version": "2.0.1-beta.34",
3
+ "version": "2.0.1-beta.34.scrollbar.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;