bkui-vue 2.0.1-beta.34.scrollbar.3 → 2.0.1-beta.35

package/lib/virtual-render/virtual-render.css

@@ -145,119 +145,111 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.bk-scrollbar {
-  overflow: hidden !important;
-  overflow-anchor: none;
-  touch-action: auto;
-  /*
- * Scrollbar rail styles
- */
-  /*
- * Scrollbar thumb styles
- */
-}
-.bk-scrollbar.bk--active-x > .bk__rail-x,
-.bk-scrollbar.bk--active-y > .bk__rail-y {
-  display: block;
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
 }
-.bk-scrollbar .bk__rail-x:hover,
-.bk-scrollbar .bk__rail-y:hover,
-.bk-scrollbar .bk__rail-x:focus,
-.bk-scrollbar .bk__rail-y:focus,
-.bk-scrollbar .bk__rail-x.bk--clicking,
-.bk-scrollbar .bk__rail-y.bk--clicking {
-  background-color: #f0f1f5;
+.bk-scrollbar-wrapper .bk-scrollbar-content-el {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
 }
-.bk-scrollbar .bk__rail-x {
-  display: none;
-  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  height: 10px;
-  bottom: 0px;
+.bk-scrollbar-wrapper .bk-scrollbar-track {
+  z-index: 1;
   position: absolute;
-  margin-bottom: 2px;
-}
-.bk-scrollbar .bk__rail-x.bk-scroll-size-small {
-  height: 8px;
-}
-.bk-scrollbar .bk__rail-x.bk-scroll-size-small .bk__thumb-x {
-  height: 6px;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
 }
-.bk-scrollbar .bk__rail-y {
-  display: none;
-  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  width: 10px;
-  right: 0px;
-  position: absolute;
-  margin-right: 2px;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
+  width: 6px;
 }
-.bk-scrollbar .bk__rail-y.bk-scroll-size-small {
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
   width: 8px;
 }
-.bk-scrollbar .bk__rail-y.bk-scroll-size-small .bk__thumb-y {
-  width: 6px;
-}
-.bk-scrollbar:hover > .bk__rail-x,
-.bk-scrollbar:hover > .bk__rail-y,
-.bk-scrollbar.bk--focus > .bk__rail-x,
-.bk-scrollbar.bk--focus > .bk__rail-y,
-.bk-scrollbar.bk--scrolling-x > .bk__rail-x,
-.bk-scrollbar.bk--scrolling-y > .bk__rail-y {
-  opacity: 0.9;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
+  height: 6px;
 }
-.bk-scrollbar .bk__thumb-x {
-  background-color: #dcdee5;
-  border-radius: 8px;
-  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
   height: 8px;
-  bottom: 0px;
-  position: absolute;
 }
-.bk-scrollbar .bk__thumb-y {
-  background-color: #dcdee5;
-  border-radius: 8px;
-  transition: background-color 0.2s linear, width 0.2s ease-in-out;
-  width: 8px;
-  right: 0px;
-  position: absolute;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
+  background-color: #f0f1f5;
+  cursor: pointer;
 }
-.bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
-.bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
-.bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
   background-color: #979ba5;
-  height: 10px;
 }
-.bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
-.bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
-.bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
-  background-color: #979ba5;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
+  top: 0;
+  width: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
   width: 10px;
 }
-.bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-x {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
+  left: 0;
   height: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
 }
-.bk-scrollbar .bk-scroll-size-small:hover > .bk__thumb-y,
-.bk-scrollbar .bk-scroll-size-small:focus > .bk__thumb-y,
-.bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-y {
-  width: 8px;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
+  height: 10px;
 }
-/* MS supports */
-@supports (-ms-overflow-style: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
+  right: auto;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-height: 0;
+  min-width: 8px;
+  width: auto;
 }
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.bk-scrollbar-wrapper .bk-scrollbar-dragging {
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.bk-scrollbar-wrapper .bk-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.bk-scrollbar-wrapper .bk-scrollbar::before {
+  position: absolute;
+  content: '';
+  background: #dcdee5;
+  border-radius: 6px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity 0.2s 0.9s linear;
+}
+.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
+  opacity: 0.9;
+  transition-delay: 0s;
+  transition-duration: 0s;
 }
 .bk-virtual-render {
   position: relative;
 }
+.bk-virtual-render .bk-virtual-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 .bk-virtual-render .bk-virtual-section {
   width: 1px;
   background: transparent;

package/lib/virtual-render/virtual-render.less

@@ -5,8 +5,17 @@
 .@{bk-prefix}-virtual-render {
   position: relative;
 
+  .@{bk-prefix}-virtual-content {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   .@{bk-prefix}-virtual-section {
     width: 1px;
     background: transparent;
   }
-}
+}

package/lib/virtual-render/virtual-render.variable.css

@@ -535,119 +535,111 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.bk-scrollbar {
-  overflow: hidden !important;
-  overflow-anchor: none;
-  touch-action: auto;
-  /*
- * Scrollbar rail styles
- */
-  /*
- * Scrollbar thumb styles
- */
-}
-.bk-scrollbar.bk--active-x > .bk__rail-x,
-.bk-scrollbar.bk--active-y > .bk__rail-y {
-  display: block;
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
 }
-.bk-scrollbar .bk__rail-x:hover,
-.bk-scrollbar .bk__rail-y:hover,
-.bk-scrollbar .bk__rail-x:focus,
-.bk-scrollbar .bk__rail-y:focus,
-.bk-scrollbar .bk__rail-x.bk--clicking,
-.bk-scrollbar .bk__rail-y.bk--clicking {
-  background-color: #f0f1f5;
+.bk-scrollbar-wrapper .bk-scrollbar-content-el {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
 }
-.bk-scrollbar .bk__rail-x {
-  display: none;
-  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  height: 10px;
-  bottom: 0px;
+.bk-scrollbar-wrapper .bk-scrollbar-track {
+  z-index: 1;
   position: absolute;
-  margin-bottom: 2px;
-}
-.bk-scrollbar .bk__rail-x.bk-scroll-size-small {
-  height: 8px;
-}
-.bk-scrollbar .bk__rail-x.bk-scroll-size-small .bk__thumb-x {
-  height: 6px;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
 }
-.bk-scrollbar .bk__rail-y {
-  display: none;
-  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  width: 10px;
-  right: 0px;
-  position: absolute;
-  margin-right: 2px;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
+  width: 6px;
 }
-.bk-scrollbar .bk__rail-y.bk-scroll-size-small {
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
   width: 8px;
 }
-.bk-scrollbar .bk__rail-y.bk-scroll-size-small .bk__thumb-y {
-  width: 6px;
-}
-.bk-scrollbar:hover > .bk__rail-x,
-.bk-scrollbar:hover > .bk__rail-y,
-.bk-scrollbar.bk--focus > .bk__rail-x,
-.bk-scrollbar.bk--focus > .bk__rail-y,
-.bk-scrollbar.bk--scrolling-x > .bk__rail-x,
-.bk-scrollbar.bk--scrolling-y > .bk__rail-y {
-  opacity: 0.9;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
+  height: 6px;
 }
-.bk-scrollbar .bk__thumb-x {
-  background-color: #dcdee5;
-  border-radius: 8px;
-  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
   height: 8px;
-  bottom: 0px;
-  position: absolute;
 }
-.bk-scrollbar .bk__thumb-y {
-  background-color: #dcdee5;
-  border-radius: 8px;
-  transition: background-color 0.2s linear, width 0.2s ease-in-out;
-  width: 8px;
-  right: 0px;
-  position: absolute;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
+  background-color: #f0f1f5;
+  cursor: pointer;
 }
-.bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
-.bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
-.bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
   background-color: #979ba5;
-  height: 10px;
 }
-.bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
-.bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
-.bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
-  background-color: #979ba5;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
+  top: 0;
+  width: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
   width: 10px;
 }
-.bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-x {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
+  left: 0;
   height: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
 }
-.bk-scrollbar .bk-scroll-size-small:hover > .bk__thumb-y,
-.bk-scrollbar .bk-scroll-size-small:focus > .bk__thumb-y,
-.bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-y {
-  width: 8px;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
+  height: 10px;
 }
-/* MS supports */
-@supports (-ms-overflow-style: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
+  right: auto;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-height: 0;
+  min-width: 8px;
+  width: auto;
 }
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.bk-scrollbar-wrapper .bk-scrollbar-dragging {
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.bk-scrollbar-wrapper .bk-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.bk-scrollbar-wrapper .bk-scrollbar::before {
+  position: absolute;
+  content: '';
+  background: #dcdee5;
+  border-radius: 6px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity 0.2s 0.9s linear;
+}
+.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
+  opacity: 0.9;
+  transition-delay: 0s;
+  transition-duration: 0s;
 }
 .bk-virtual-render {
   position: relative;
 }
+.bk-virtual-render .bk-virtual-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 .bk-virtual-render .bk-virtual-section {
   width: 1px;
   background: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "2.0.1-beta.34.scrollbar.3",
+  "version": "2.0.1-beta.35",
   "workspaces": [
     "packages/**",
     "scripts/cli",

package/lib/scrollbar/handlers/click-rail.d.ts

@@ -1,2 +0,0 @@
-import BkScrollbar from '..';
-export default function (i: BkScrollbar): void;

package/lib/scrollbar/handlers/drag-thumb.d.ts

@@ -1 +0,0 @@
-export default function (i: any): void;

package/lib/scrollbar/handlers/keyboard.d.ts

@@ -1,2 +0,0 @@
-import BkScrollbar from '..';
-export default function (i: BkScrollbar): void;

package/lib/scrollbar/handlers/mouse-wheel.d.ts

@@ -1,2 +0,0 @@
-import BkScrollbar from '..';
-export default function (i: BkScrollbar): void;

package/lib/scrollbar/handlers/touch.d.ts

@@ -1,4 +0,0 @@
-import BkScrollbar from '..';
-export default function (i: BkScrollbar & {
-    isInitialized: boolean;
-}): void;

package/lib/scrollbar/helper/class-names.d.ts

@@ -1,21 +0,0 @@
-declare class Cls {
-    main: string;
-    rtl: string;
-    element: {
-        thumb: (x: string) => string;
-        rail: (x: string) => string;
-        size: (size: string) => string;
-        consuming: string;
-    };
-    state: {
-        focus: string;
-        clicking: string;
-        active: (x: string) => string;
-        scrolling: (x: string) => string;
-    };
-    constructor(prefix?: string);
-}
-export default Cls;
-export declare function addScrollingClass(i: any, x: any): void;
-export declare function removeScrollingClass(i: any, x: any): void;
-export declare function setScrollingClassInstantly(i: any, x: any): void;

package/lib/scrollbar/helper/css.d.ts

@@ -1,3 +0,0 @@
-import { VirtualElement } from '..';
-export declare function get(element: Partial<HTMLElement> & Partial<VirtualElement>): CSSStyleDeclaration;
-export declare function set(element: any, obj: any): any;

package/lib/scrollbar/helper/dom.d.ts

@@ -1,4 +0,0 @@
-export declare function div(className: any): HTMLDivElement;
-export declare function matches(el: any, query: any): boolean;
-export declare function remove(el: any): void;
-export declare function queryChildren(element: any, selector: any): any[];

package/lib/scrollbar/helper/event-manager.d.ts

@@ -1,20 +0,0 @@
-import { VirtualElement } from '..';
-declare class EventElement {
-    element: Element & VirtualElement;
-    handlers: Record<string, ((...args: any[]) => void)[]>;
-    constructor(element: Element & VirtualElement);
-    bind(eventName: any, handler: any): void;
-    unbind(eventName: any, target?: any): void;
-    unbindAll(): void;
-    get isEmpty(): boolean;
-}
-export default class EventManager {
-    eventElements: EventElement[];
-    constructor();
-    eventElement(element: any): EventElement;
-    bind(element: any, eventName: any, handler: any): void;
-    unbind(element: any, eventName: any, handler: any): void;
-    unbindAll(): void;
-    once(element: any, eventName: any, handler: any): void;
-}
-export {};

package/lib/scrollbar/helper/util.d.ts

@@ -1,11 +0,0 @@
-import { VirtualElement } from '..';
-export declare function toInt(x: any): number;
-export declare function isEditable(el: any): boolean;
-export declare function outerWidth(element: any): number;
-export declare const env: {
-    isWebKit: boolean;
-    supportsTouch: boolean;
-    supportsIePointer: any;
-    isChrome: boolean;
-};
-export declare const getElement: (element: Partial<HTMLElement> & Partial<VirtualElement>) => Element;

package/lib/scrollbar/process-scroll-diff.d.ts

@@ -1 +0,0 @@
-export default function (i: any, axis: any, diff: any, useScrollingClass?: boolean, forceFireReachEvent?: boolean): void;

package/lib/scrollbar/update-geometry.d.ts

@@ -1,8 +0,0 @@
-import BkScrollbar from '.';
-export type Placement = {
-    left?: number;
-    right?: number;
-    top?: number;
-    bottom?: number;
-};
-export default function (i: BkScrollbar): void;