bkui-vue 2.0.1-beta.34 → 2.0.1-beta.34.scrollbar.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 (41) 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/update-geometry.d.ts +8 -0
  21. package/lib/table/table.css +93 -82
  22. package/lib/table/table.variable.css +93 -82
  23. package/lib/tree/tree.css +94 -83
  24. package/lib/tree/tree.variable.css +94 -83
  25. package/lib/virtual-render/index.d.ts +0 -23
  26. package/lib/virtual-render/index.js +54 -106
  27. package/lib/virtual-render/props.d.ts +0 -6
  28. package/lib/virtual-render/use-scrollbar.d.ts +3 -17
  29. package/lib/virtual-render/virtual-render.css +93 -82
  30. package/lib/virtual-render/virtual-render.d.ts +2 -13
  31. package/lib/virtual-render/virtual-render.less +2 -11
  32. package/lib/virtual-render/virtual-render.variable.css +93 -82
  33. package/package.json +1 -1
  34. package/lib/scrollbar/scrollbar-core/can-use-dom.d.ts +0 -2
  35. package/lib/scrollbar/scrollbar-core/helpers.d.ts +0 -5
  36. package/lib/scrollbar/scrollbar-core/index.d.ts +0 -242
  37. package/lib/scrollbar/scrollbar-core/mouse-wheel.d.ts +0 -5
  38. package/lib/scrollbar/scrollbar-core/scrollbar-width.d.ts +0 -1
  39. package/lib/scrollbar/scrollbar.css +0 -224
  40. package/lib/scrollbar/scrollbar.less +0 -119
  41. package/lib/scrollbar/scrollbar.variable.css +0 -484
package/lib/virtual-render/virtual-render.css CHANGED
@@ -145,111 +145,122 @@
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;
181
+ margin-bottom: 2px;
173
182
  }
174
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
183
+ .bk-scrollbar .bk__rail-x.bk-size-small {
175
184
  height: 8px;
176
185
  }
177
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
178
- background-color: #f0f1f5;
179
- cursor: pointer;
186
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
187
+ height: 6px;
180
188
  }
181
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
182
- background-color: #979ba5;
189
+ .bk-scrollbar .bk__rail-y {
190
+ display: none;
191
+ opacity: 0;
192
+ transition: background-color 0.2s linear, opacity 0.2s linear;
193
+ width: 10px;
194
+ right: 0px;
195
+ position: absolute;
196
+ margin-right: 2px;
183
197
  }
184
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
185
- top: 0;
198
+ .bk-scrollbar .bk__rail-y.bk-size-small {
186
199
  width: 8px;
187
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
188
200
  }
189
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
190
- width: 10px;
201
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
202
+ width: 6px;
203
+ }
204
+ .bk-scrollbar:hover > .bk__rail-x,
205
+ .bk-scrollbar:hover > .bk__rail-y,
206
+ .bk-scrollbar.bk--focus > .bk__rail-x,
207
+ .bk-scrollbar.bk--focus > .bk__rail-y,
208
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
209
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
210
+ opacity: 0.9;
191
211
  }
192
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
193
- left: 0;
212
+ .bk-scrollbar .bk__thumb-x {
213
+ background-color: #dcdee5;
214
+ border-radius: 8px;
215
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
194
216
  height: 8px;
195
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
217
+ bottom: 0px;
218
+ position: absolute;
196
219
  }
197
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
220
+ .bk-scrollbar .bk__thumb-y {
221
+ background-color: #dcdee5;
222
+ border-radius: 8px;
223
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
224
+ width: 8px;
225
+ right: 0px;
226
+ position: absolute;
227
+ }
228
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
229
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
230
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
231
+ background-color: #979ba5;
198
232
  height: 10px;
199
233
  }
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;
234
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
235
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
236
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
237
+ background-color: #979ba5;
238
+ width: 10px;
208
239
  }
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;
240
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
241
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
242
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
243
+ height: 8px;
217
244
  }
218
- .bk-scrollbar-wrapper .bk-scrollbar {
219
- position: absolute;
220
- left: 0;
221
- right: 0;
222
- top: 0;
223
- bottom: 0;
245
+ .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
246
+ .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
247
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
248
+ width: 8px;
224
249
  }
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;
250
+ /* MS supports */
251
+ @supports (-ms-overflow-style: none) {
252
+ .bk-scrollbar {
253
+ overflow: auto !important;
254
+ }
236
255
  }
237
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
238
- opacity: 0.9;
239
- transition-delay: 0s;
240
- transition-duration: 0s;
256
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
257
+ .bk-scrollbar {
258
+ overflow: auto !important;
259
+ }
241
260
  }
242
261
  .bk-virtual-render {
243
262
  position: relative;
244
263
  }
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
264
  .bk-virtual-render .bk-virtual-section {
254
265
  width: 1px;
255
266
  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
@@ -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,122 @@
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;
571
+ margin-bottom: 2px;
563
572
  }
564
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
573
+ .bk-scrollbar .bk__rail-x.bk-size-small {
565
574
  height: 8px;
566
575
  }
567
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
568
- background-color: #f0f1f5;
569
- cursor: pointer;
576
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
577
+ height: 6px;
570
578
  }
571
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
572
- background-color: #979ba5;
579
+ .bk-scrollbar .bk__rail-y {
580
+ display: none;
581
+ opacity: 0;
582
+ transition: background-color 0.2s linear, opacity 0.2s linear;
583
+ width: 10px;
584
+ right: 0px;
585
+ position: absolute;
586
+ margin-right: 2px;
573
587
  }
574
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
575
- top: 0;
588
+ .bk-scrollbar .bk__rail-y.bk-size-small {
576
589
  width: 8px;
577
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
578
590
  }
579
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
580
- width: 10px;
591
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
592
+ width: 6px;
593
+ }
594
+ .bk-scrollbar:hover > .bk__rail-x,
595
+ .bk-scrollbar:hover > .bk__rail-y,
596
+ .bk-scrollbar.bk--focus > .bk__rail-x,
597
+ .bk-scrollbar.bk--focus > .bk__rail-y,
598
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
599
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
600
+ opacity: 0.9;
581
601
  }
582
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
583
- left: 0;
602
+ .bk-scrollbar .bk__thumb-x {
603
+ background-color: #dcdee5;
604
+ border-radius: 8px;
605
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
584
606
  height: 8px;
585
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
607
+ bottom: 0px;
608
+ position: absolute;
586
609
  }
587
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
610
+ .bk-scrollbar .bk__thumb-y {
611
+ background-color: #dcdee5;
612
+ border-radius: 8px;
613
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
614
+ width: 8px;
615
+ right: 0px;
616
+ position: absolute;
617
+ }
618
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
619
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
620
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
621
+ background-color: #979ba5;
588
622
  height: 10px;
589
623
  }
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;
624
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
625
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
626
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
627
+ background-color: #979ba5;
628
+ width: 10px;
598
629
  }
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;
630
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
631
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
632
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
633
+ height: 8px;
607
634
  }
608
- .bk-scrollbar-wrapper .bk-scrollbar {
609
- position: absolute;
610
- left: 0;
611
- right: 0;
612
- top: 0;
613
- bottom: 0;
635
+ .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
636
+ .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
637
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
638
+ width: 8px;
614
639
  }
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;
640
+ /* MS supports */
641
+ @supports (-ms-overflow-style: none) {
642
+ .bk-scrollbar {
643
+ overflow: auto !important;
644
+ }
626
645
  }
627
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
628
- opacity: 0.9;
629
- transition-delay: 0s;
630
- transition-duration: 0s;
646
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
647
+ .bk-scrollbar {
648
+ overflow: auto !important;
649
+ }
631
650
  }
632
651
  .bk-virtual-render {
633
652
  position: relative;
634
653
  }
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
654
  .bk-virtual-render .bk-virtual-section {
644
655
  width: 1px;
645
656
  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.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;