bkui-vue 1.0.3-beta.59 → 1.0.3-beta.60.scrollbar.2

package/lib/virtual-render/props.d.ts

@@ -1,4 +1,7 @@
 import { ExtractPropTypes } from 'vue';
+export type IScrollbarOption = {
+    enabled: boolean;
+};
 export declare const virtualRenderProps: {
     onContentScroll: FunctionConstructor;
     /** 传入原始数据源 */
@@ -181,6 +184,10 @@ export declare const virtualRenderProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 是否允许滚动条改变原有DOM结构
+     */
+    scrollbar: import("vue-types").VueTypeDef<IScrollbarOption>;
     /**
      * 数据监听改变时，是否自动重置位置到[0, 0]
      */

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

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

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

@@ -0,0 +1,5 @@
+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/virtual-render/scrollbar-core/index.d.ts

@@ -0,0 +1,213 @@
+import type { DebouncedFunc } from 'lodash-es';
+import * as helpers from './helpers';
+interface Options {
+    forceVisible: boolean | Axis;
+    clickOnTrack: boolean;
+    scrollbarMinSize: number;
+    scrollbarMaxSize: number;
+    classNames: Partial<ClassNames>;
+    ariaLabel: string;
+    scrollableNode: HTMLElement | null;
+    contentNode: HTMLElement | null;
+    delegateYContent: HTMLElement | null;
+    delegateXContent: HTMLElement | null;
+    wrapperNode: HTMLElement | null;
+    autoHide: boolean;
+    useSystemScrollXBehavior?: boolean;
+    useSystemScrollYBehavior?: boolean;
+    onScrollCallback?: (args: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export type SimpleBarOptions = 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: 'width' | 'height';
+    scrollSizeAttr: 'scrollWidth' | 'scrollHeight';
+    offsetSizeAttr: 'offsetWidth' | 'offsetHeight';
+    offsetAttr: 'left' | 'top';
+    overflowAttr: 'overflowX' | 'overflowY';
+    dragOffset: number;
+    isOverflowing: boolean;
+    forceVisible: boolean;
+    track: {
+        size: any;
+        el: HTMLElement | null;
+        rect: DOMRect | null;
+        isVisible: boolean;
+    };
+    scrollbar: {
+        size: any;
+        el: HTMLElement | null;
+        rect: DOMRect | null;
+        isVisible: boolean;
+    };
+};
+type RtlHelpers = {
+    isScrollOriginAtZero: boolean;
+    isScrollingToNegative: boolean;
+} | null;
+type DefaultOptions = Options & typeof SimpleBarCore.defaultOptions;
+type MouseWheelInstance = {
+    addWheelEvent: (target: HTMLElement) => void;
+    removeWheelEvent: (target: HTMLElement) => void;
+};
+export default class SimpleBarCore {
+    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;
+    wheelOffset: number;
+    mouseWeelTimer: any;
+    /**
+     * 最外层滚动容器滚动实际位置缓存器
+     */
+    wrapperScrollValue: {
+        scrollTop: number;
+        scrollLeft: number;
+    };
+    /**
+     * 模拟滚动条内部缩略滚动器滚动位置缓存器
+     */
+    wrapperScrollMap: {};
+    onMouseMove: DebouncedFunc<any> | (() => void);
+    onWindowResize: DebouncedFunc<any> | (() => void);
+    onStopScrolling: DebouncedFunc<any> | (() => void);
+    onMouseEntered: DebouncedFunc<any> | (() => void);
+    onMouseWheel: DebouncedFunc<any> | (() => void);
+    constructor(element: HTMLElement, options?: Partial<Options>);
+    getScrollbarWidth(): number;
+    init(): void;
+    initDOM(): void;
+    initListeners(): void;
+    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;
+    _onMouseWheel: (args: any) => void;
+    _onStopScrolling: () => void;
+    onMouseEnter: () => void;
+    _onMouseEntered: () => void;
+    _onMouseMove: (e: any) => void;
+    onMouseMoveForAxis(axis?: Axis): void;
+    onMouseLeave: () => void;
+    onMouseLeaveForAxis(axis?: Axis): void;
+    _onWindowResize: () => void;
+    onPointerEvent: (e: any) => void;
+    /**
+     * on scrollbar handle drag movement starts
+     */
+    onDragStart(e: any, axis?: Axis): void;
+    /**
+     * Drag scrollbar handle
+     */
+    drag: (e: any) => 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: any) => void;
+    /**
+     * Handler to ignore click events during drag
+     */
+    preventClick: (e: any) => void;
+    onTrackClick(e: any, 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: any, query: any): any;
+}
+export {};

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

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

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

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

package/lib/virtual-render/use-fix-top.d.ts

@@ -1,4 +1,3 @@
-import { Ref } from 'vue';
 import { VirtualRenderProps } from './props';
 type IFixToTopParams = {
     index?: number;
@@ -8,11 +7,7 @@ type IFixToTopParams = {
     };
     position: number[];
 };
-declare const _default: (props: VirtualRenderProps, refRoot: Ref<HTMLElement>) => {
-    fixToTop: (params: IFixToTopParams) => void;
-    scrollTo: (option?: {
-        left: number;
-        top: number;
-    }) => void;
+declare const _default: (props: VirtualRenderProps, scrollTo: (x: any, y: any) => void) => {
+    fixToTop: (params: IFixToTopParams) => any;
 };
 export default _default;

package/lib/virtual-render/use-scrollbar.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from 'vue';
+import BkSimpleBar from './bk-scrollbar';
+import { VirtualRenderProps } from './props';
+declare const _default: (target: Ref<HTMLElement>, props: VirtualRenderProps) => {
+    init: (scrollFn?: any, delegateXContent?: any, delegateYContent?: any) => void;
+    instance: BkSimpleBar;
+    scrollTo: (x: any, y: any) => void;
+    classNames: {
+        contentEl: string;
+        wrapper: string;
+        scrollbar: string;
+        track: string;
+        visible: string;
+        horizontal: string;
+        vertical: string;
+        hover: string;
+        dragging: string;
+        scrolling: string;
+        scrollable: string;
+        mouseEntered: string;
+    };
+};
+export default _default;

package/lib/virtual-render/v-virtual-render.d.ts

@@ -3,7 +3,7 @@ export declare function getMatchedIndex(maxCount: number, maxHeight: number, gro
     height: number;
     diffHeight: number;
 };
-export declare function computedVirtualIndex(lineHeight: any, callback: any, pagination: any, _el: any, event: any): {
+export declare function computedVirtualIndex(lineHeight: any, callback: any, pagination: any, wrapper: any, event: any): {
     targetStartIndex: number;
     targetEndIndex: number;
     elScrollTop: any;
@@ -20,6 +20,7 @@ export declare class VisibleRender {
     install(): void;
     uninstall(): void;
     setBinding(binding: any): void;
+    private getEvent;
 }
 declare const _default: {
     mounted(el: any, binding: any): void;

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

@@ -15,11 +15,84 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+.bk-scrollbar-wrapper .bk-scroll-content-el {
+  display: inline-flex;
+  flex-direction: column;
+}
+.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.bk-scrollbar-hover {
+  background-color: #F0F1F5;
+  cursor: pointer;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
+  background-color: #979BA5;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
+  top: 0;
+  width: 11px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
+  left: 0;
+  height: 11px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
+  right: auto;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-height: 0;
+  min-width: 10px;
+  width: auto;
+}
+.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;
+  min-height: 10px;
+}
+.bk-scrollbar-wrapper .bk-scrollbar::before {
+  position: absolute;
+  content: '';
+  background: #DcDEE5;
+  border-radius: 7px;
+  left: 2px;
+  right: 2px;
+  top: 2px;
+  bottom: 2px;
+  opacity: 0;
+  transition: opacity 0.2s 0.5s linear;
+}
+.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
+  opacity: 0.5;
+  transition-delay: 0s;
+  transition-duration: 0s;
+}
 .bk-virtual-render {
   position: relative;
 }
-.bk-virtual-render .bk-virtual-content,
-.bk-virtual-render.bk-virtual-content {
+.bk-virtual-render .bk-virtual-content {
   position: absolute;
   top: 0;
   bottom: 0;

package/lib/virtual-render/virtual-render.d.ts

@@ -129,6 +129,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    scrollbar: import("vue-types").VueTypeDef<import("./props").IScrollbarOption>;
     autoReset: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -264,6 +265,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    scrollbar: import("vue-types").VueTypeDef<import("./props").IScrollbarOption>;
     autoReset: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {

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

@@ -1,11 +1,11 @@
 @import '../styles/themes/themes.less';
 @import '../styles/mixins/scroll.less';
+@import './bk-scrollbar.less';
 
 .@{bk-prefix}-virtual-render {
   position: relative;
 
-  .@{bk-prefix}-virtual-content,
-  &.@{bk-prefix}-virtual-content {
+  .@{bk-prefix}-virtual-content {
     position: absolute;
     top: 0;
     bottom: 0;

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

@@ -144,11 +144,84 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+.bk-scrollbar-wrapper .bk-scroll-content-el {
+  display: inline-flex;
+  flex-direction: column;
+}
+.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.bk-scrollbar-hover {
+  background-color: #F0F1F5;
+  cursor: pointer;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
+  background-color: #979BA5;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
+  top: 0;
+  width: 11px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
+  left: 0;
+  height: 11px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
+  right: auto;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-height: 0;
+  min-width: 10px;
+  width: auto;
+}
+.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;
+  min-height: 10px;
+}
+.bk-scrollbar-wrapper .bk-scrollbar::before {
+  position: absolute;
+  content: '';
+  background: #DcDEE5;
+  border-radius: 7px;
+  left: 2px;
+  right: 2px;
+  top: 2px;
+  bottom: 2px;
+  opacity: 0;
+  transition: opacity 0.2s 0.5s linear;
+}
+.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
+  opacity: 0.5;
+  transition-delay: 0s;
+  transition-duration: 0s;
+}
 .bk-virtual-render {
   position: relative;
 }
-.bk-virtual-render .bk-virtual-content,
-.bk-virtual-render.bk-virtual-content {
+.bk-virtual-render .bk-virtual-content {
   position: absolute;
   top: 0;
   bottom: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "1.0.3-beta.59",
+  "version": "1.0.3-beta.60.scrollbar.2",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",
@@ -153,10 +153,14 @@
   "dependencies": {
     "@floating-ui/dom": "~1.5.0",
     "@popperjs/core": "~2.11.8",
+    "can-use-dom": "~0.1.0",
     "date-fns": "~2.30.0",
+    "install": "~0.13.0",
     "js-calendar": "~1.2.3",
     "json-formatter-js": "~2.3.4",
     "lodash": "~4.17.21",
+    "lodash-es": "~4.17.21",
+    "npm": "~10.5.2",
     "tinycolor2": "~1.6.0",
     "vue-types": "~4.1.1"
   }