bkui-vue 2.0.1-beta.40 → 2.0.1-beta.41

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

@@ -535,111 +535,118 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.bk-scrollbar-wrapper {
-  position: relative;
-  overflow: hidden;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-content-el {
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
+.bk-scrollbar {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  touch-action: auto;
+  /*
+ * Scrollbar rail styles
+ */
+  /*
+ * Scrollbar thumb styles
+ */
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track {
-  z-index: 1;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
-  width: 6px;
+.bk-scrollbar.bk--active-x > .bk__rail-x,
+.bk-scrollbar.bk--active-y > .bk__rail-y {
+  display: block;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
-  width: 8px;
+.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-track.track-small.bk-scrollbar-horizontal {
-  height: 6px;
+.bk-scrollbar .bk__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  height: 10px;
+  bottom: 0px;
+  position: absolute;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
+.bk-scrollbar .bk__rail-x.bk-size-small {
   height: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
-  background-color: #f0f1f5;
-  cursor: pointer;
+.bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
+  height: 6px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
-  background-color: #979ba5;
+.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.bk-scrollbar-vertical {
-  top: 0;
+.bk-scrollbar .bk__rail-y.bk-size-small {
   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__rail-y.bk-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.bk-scrollbar-horizontal {
-  left: 0;
+.bk-scrollbar .bk__thumb-x {
+  background-color: #dcdee5;
+  border-radius: 8px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
   height: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+  bottom: 0px;
+  position: absolute;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
+.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 .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 {
+  background-color: #979ba5;
   height: 10px;
 }
-.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;
+.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;
+  width: 10px;
 }
-.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 .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
+  height: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+.bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
+.bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
+  width: 8px;
 }
-.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;
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }
-.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
-  opacity: 0.9;
-  transition-delay: 0s;
-  transition-duration: 0s;
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }
 .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.40",
+  "version": "2.0.1-beta.41",
   "workspaces": [
     "packages/**",
     "scripts/cli",

package/lib/scrollbar/scrollbar-core/can-use-dom.d.ts

@@ -1,2 +0,0 @@
-declare const _default: () => boolean;
-export default _default;

package/lib/scrollbar/scrollbar-core/helpers.d.ts

@@ -1,5 +0,0 @@
-export declare function getElementWindow(element: Element): Window & typeof globalThis;
-export declare function getElementDocument(element: Element): Document;
-export declare function addClasses(el: HTMLElement | null, classes: string): void;
-export declare function removeClasses(el: HTMLElement | null, classes: string): void;
-export declare function classNamesToQuery(classNames: string): string;

package/lib/scrollbar/scrollbar-core/index.d.ts

@@ -1,242 +0,0 @@
-import * as helpers from './helpers';
-interface DebouncedFunc<T extends (...args: any[]) => void> {
-    /**
-     * Call the original function, but applying the debounce rules.
-     *
-     * If the debounced function can be run immediately, this calls it and returns its return
-     * value.
-     *
-     * Otherwise, it returns the return value of the last invocation, or undefined if the debounced
-     * function was not invoked yet.
-     */
-    (...args: Parameters<T>): ReturnType<T> | undefined;
-    /**
-     * Throw away any pending invocation of the debounced function.
-     */
-    cancel(): void;
-    /**
-     * If there is a pending invocation of the debounced function, invoke it immediately and return
-     * its return value.
-     *
-     * Otherwise, return the value from the last invocation, or undefined if the debounced function
-     * was never invoked.
-     */
-    flush(): ReturnType<T> | undefined;
-}
-export interface Options {
-    forceVisible: Axis | boolean;
-    clickOnTrack: boolean;
-    scrollbarMinSize: number;
-    scrollbarMaxSize: number;
-    classNames: Partial<ClassNames>;
-    ariaLabel: string;
-    contentNode: HTMLElement | null;
-    delegateYContent: HTMLElement | null;
-    delegateXContent: HTMLElement | null;
-    wrapperNode: HTMLElement | null;
-    autoHide: boolean;
-    useSystemScrollXBehavior?: boolean;
-    useSystemScrollYBehavior?: boolean;
-    size: 'default' | 'small';
-    scrollDelegate: {
-        scrollHeight?: number;
-        scrollWidth?: number;
-    };
-    onScrollCallback?: (args: {
-        x: number;
-        y: number;
-    }) => void;
-}
-export type BkScrollBarOptions = Partial<Options>;
-type ClassNames = {
-    contentEl: string;
-    offset: string;
-    mask: string;
-    wrapper: string;
-    placeholder: string;
-    scrollbar: string;
-    track: string;
-    visible: string;
-    horizontal: string;
-    vertical: string;
-    hover: string;
-    dragging: string;
-    scrolling: string;
-    scrollable: string;
-    mouseEntered: string;
-};
-type Axis = 'x' | 'y';
-type AxisProps = {
-    scrollOffsetAttr: 'scrollLeft' | 'scrollTop';
-    sizeAttr: 'height' | 'width';
-    scrollSizeAttr: 'scrollHeight' | 'scrollWidth';
-    offsetSizeAttr: 'offsetHeight' | 'offsetWidth';
-    offsetAttr: 'left' | 'top';
-    overflowAttr: 'overflowX' | 'overflowY';
-    dragOffset: number;
-    isOverflowing: boolean;
-    forceVisible: boolean;
-    track: {
-        size: number;
-        el: HTMLElement | null;
-        rect: DOMRect | null;
-        isVisible: boolean;
-    };
-    scrollbar: {
-        size: number;
-        el: HTMLElement | null;
-        rect: DOMRect | null;
-        isVisible: boolean;
-    };
-};
-type RtlHelpers = {
-    isScrollOriginAtZero: boolean;
-    isScrollingToNegative: boolean;
-} | null;
-type DefaultOptions = Options & typeof BkScrollbarCore.defaultOptions;
-type MouseWheelInstance = {
-    addWheelEvent: (target: HTMLElement) => void;
-    removeWheelEvent: (target: HTMLElement) => void;
-};
-export default class BkScrollbarCore {
-    static rtlHelpers: RtlHelpers;
-    static defaultOptions: Options;
-    /**
-     * Static functions
-     */
-    static helpers: typeof helpers;
-    /**
-     * Helper to fix browsers inconsistency on RTL:
-     *  - Firefox inverts the scrollbar initial position
-     *  - IE11 inverts both scrollbar position and scrolling offset
-     */
-    static getRtlHelpers(): {
-        isScrollOriginAtZero: boolean;
-        isScrollingToNegative: boolean;
-    };
-    static getOffset(el: Element): {
-        top: number;
-        left: number;
-    };
-    el: HTMLElement;
-    options: DefaultOptions;
-    classNames: ClassNames;
-    axis: {
-        x: AxisProps;
-        y: AxisProps;
-    };
-    draggedAxis?: Axis;
-    removePreventClickId: null | number;
-    minScrollbarWidth: number;
-    stopScrollDelay: number;
-    isScrolling: boolean;
-    isMouseEntering: boolean;
-    isDragging: boolean;
-    scrollXTicking: boolean;
-    scrollYTicking: boolean;
-    wrapperEl: HTMLElement | null;
-    contentEl: HTMLElement | null;
-    delegateXContent: HTMLElement | null;
-    delegateYContent: HTMLElement | null;
-    rtlHelpers: RtlHelpers;
-    scrollbarWidth: number;
-    resizeObserver: ResizeObserver | null;
-    mutationObserver: MutationObserver | null;
-    elStyles: CSSStyleDeclaration | null;
-    isRtl: boolean | null;
-    mouseX: number;
-    mouseY: number;
-    mouseWheelInstance: MouseWheelInstance;
-    wheelOffsetY: number;
-    wheelOffsetX: number;
-    mouseWeelTimer: any;
-    /**
-     * 最外层滚动容器滚动实际位置缓存器
-     */
-    wrapperScrollValue: {
-        scrollTop: number;
-        scrollLeft: number;
-    };
-    /**
-     * 模拟滚动条内部缩略滚动器滚动位置缓存器
-     */
-    wrapperScrollMap: {};
-    onMouseMove: (() => void) | DebouncedFunc<(...args: any[]) => void>;
-    onWindowResize: (() => void) | DebouncedFunc<(...args: any[]) => void>;
-    onStopScrolling: (() => void) | DebouncedFunc<(...args: any[]) => void>;
-    onMouseEntered: (() => void) | DebouncedFunc<(...args: any[]) => void>;
-    onMouseWheel: (() => void) | DebouncedFunc<(...args: any[]) => void>;
-    constructor(element: HTMLElement, options?: Partial<Options>);
-    getScrollbarWidth(): number;
-    init(): void;
-    initDOM(): void;
-    initListeners(): void;
-    getWrapperElScrollSize(attrName: string, target?: HTMLElement): any;
-    recalculate(): void;
-    /**
-     * Calculate scrollbar size
-     */
-    getScrollbarSize(axis?: Axis): any;
-    positionScrollbar(axis?: Axis): void;
-    toggleTrackVisibility(axis?: Axis): void;
-    showScrollbar(axis?: Axis): void;
-    hideScrollbar(axis?: Axis): void;
-    /**
-     * On scroll event handling
-     */
-    onScroll: () => void;
-    scrollX: () => void;
-    scrollY: () => void;
-    onMouseEnter: () => void;
-    onMouseMoveForAxis(axis?: Axis): void;
-    onMouseLeave: () => void;
-    onMouseLeaveForAxis(axis?: Axis): void;
-    onPointerEvent: (e: PointerEvent) => void;
-    /**
-     * on scrollbar handle drag movement starts
-     */
-    onDragStart(e: MouseEvent, axis?: Axis): void;
-    /**
-     * Drag scrollbar handle
-     */
-    drag: (e: MouseEvent) => void;
-    getPointerPosition: (dragPos: number, axis: Axis) => number;
-    scrollToAxisPosition: (scrollPos: number, axisValue: Axis) => boolean;
-    fixedScrollTo: (axisValue: Axis, resolvedValue: number) => void;
-    /**
-     * End scroll handle drag
-     */
-    onEndDrag: (e: MouseEvent) => void;
-    /**
-     * Handler to ignore click events during drag
-     */
-    preventClick: (e: MouseEvent) => void;
-    onTrackClick(e: MouseEvent, axis?: Axis): void;
-    /**
-     * Getter for content element
-     */
-    getContentElement(): HTMLElement;
-    /**
-     * Getter for original scrolling element
-     */
-    getScrollElement(): HTMLElement;
-    removeListeners(): void;
-    /**
-     * Remove all listeners from DOM nodes
-     */
-    unMount(): void;
-    /**
-     * Check if mouse is within bounds
-     */
-    isWithinBounds(bbox: DOMRect): boolean;
-    /**
-     * Find element children matches query
-     */
-    findChild(el: HTMLElement, query: string): any;
-    private mOnMouseWheel;
-    private mOnStopScrolling;
-    private mOnMouseEntered;
-    private mOnMouseMove;
-    private mOnWindowResize;
-}
-export {};

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

@@ -1,5 +0,0 @@
-declare const _default: (fn: any) => {
-    addWheelEvent: (target: HTMLElement) => void;
-    removeWheelEvent: (target: HTMLElement) => void;
-};
-export default _default;

package/lib/scrollbar/scrollbar-core/scrollbar-width.d.ts

@@ -1 +0,0 @@
-export default function scrollbarWidth(): number;

package/lib/scrollbar/scrollbar.less

@@ -1,119 +0,0 @@
-@import '../styles/themes/themes.less';
-
-.@{bk-prefix}-scrollbar-wrapper {
-  position: relative;
-  overflow: hidden;
-
-  .@{bk-prefix}-scrollbar-content-el {
-    display: inline-flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .@{bk-prefix}-scrollbar-track {
-    z-index: 1;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    overflow: hidden;
-
-    &.track-small {
-      &.@{bk-prefix}-scrollbar-vertical {
-        width: 6px;
-
-        &.@{bk-prefix}-scrollbar-hover {
-          width: 8px;
-        }
-      }
-
-      &.@{bk-prefix}-scrollbar-horizontal {
-        height: 6px;
-
-        &.@{bk-prefix}-scrollbar-hover {
-          height: 8px;
-        }
-      }
-    }
-
-    &.@{bk-prefix}-scrollbar-hover {
-      background-color: #f0f1f5;
-      cursor: pointer;
-
-      .@{bk-prefix}-scrollbar {
-        &::before {
-          background-color: #979ba5;
-        }
-      }
-    }
-
-    &.@{bk-prefix}-scrollbar-vertical {
-      top: 0;
-      width: 8px;
-      transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
-
-      &.@{bk-prefix}-scrollbar-hover {
-        width: 10px;
-      }
-    }
-
-    &.@{bk-prefix}-scrollbar-horizontal {
-      left: 0;
-      height: 8px;
-      transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
-
-      &.@{bk-prefix}-scrollbar-hover {
-        height: 10px;
-      }
-
-      &.@{bk-prefix}-scrollbar {
-        right: auto;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        min-height: 0;
-        min-width: 8px;
-        width: auto;
-      }
-    }
-  }
-
-  .@{bk-prefix}-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-prefix}-scrollbar {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-
-    &::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-prefix}-scrollbar-visible {
-      &::before {
-        opacity: 0.9;
-        transition-delay: 0s;
-        transition-duration: 0s;
-      }
-    }
-  }
-}