@sdata/web-vue 1.9.0 → 1.11.0

package/es/scrollbar/interface.d.ts

@@ -1,16 +1,105 @@
-export interface ThumbData {
-    ratio: number;
-    thumbSize: number;
-    max: number;
+import type { Elements as OverlayScrollbarElements, EventListener, EventListenerArgs, EventListeners, InstancePlugin, OnUpdatedEventListenerArgs, OverflowBehavior, Options as OverlayScrollbarOptions, PartialOptions as OverlayScrollbarPartialOptions, ReadonlyOptions as OverlayScrollbarReadonlyOptions, ScrollbarsAutoHideBehavior, ScrollbarsVisibilityBehavior, State as OverlayScrollbarState } from 'overlayscrollbars';
+import type { CSSProperties } from 'vue';
+export type ScrollbarType = 'track' | 'embed';
+export interface ScrollbarClickScrollBehaviorOptions {
+    clickScrollDistance: number;
+    clickScrollDuration: number;
+    clickPressDelay: number;
+    pressDistanceDuration: number;
 }
-export interface ThumbMap {
-    size: 'width' | 'height';
-    direction: 'left' | 'top';
-    offset: 'offsetWidth' | 'offsetHeight';
-    client: 'clientX' | 'clientY';
+export type ScrollbarClickScrollBehavior = boolean | 'instant' | ((isHorizontal: boolean) => Partial<ScrollbarClickScrollBehaviorOptions> | false | null | undefined | void);
+export type ScrollbarUpdateDebounceValue = [
+    timeout?: number | false | null | undefined,
+    maxWait?: number | false | null | undefined,
+    leading?: boolean | null | undefined
+] | number | false | null;
+export interface ScrollbarUpdateOptions {
+    elementEvents?: Array<[elementSelector: string, eventNames: string]> | null;
+    debounce?: {
+        mutation?: ScrollbarUpdateDebounceValue;
+        resize?: ScrollbarUpdateDebounceValue;
+        event?: ScrollbarUpdateDebounceValue;
+        env?: ScrollbarUpdateDebounceValue;
+    } | ScrollbarUpdateDebounceValue;
+    attributes?: string[] | null;
+    ignoreMutation?: ((mutation: MutationRecord) => boolean) | null;
+    flowDirectionStyles?: ((viewport: HTMLElement) => Record<string, unknown>) | null;
 }
+export interface ScrollbarOverflowOptions {
+    x?: OverflowBehavior;
+    y?: OverflowBehavior;
+}
+export interface ScrollbarScrollbarsOptions {
+    theme?: string | null;
+    visibility?: ScrollbarsVisibilityBehavior;
+    autoHide?: ScrollbarsAutoHideBehavior;
+    autoHideDelay?: number;
+    autoHideSuspend?: boolean;
+    dragScroll?: boolean;
+    clickScroll?: ScrollbarClickScrollBehavior;
+    pointers?: string[] | null;
+}
+export interface ScrollbarOptions {
+    paddingAbsolute?: OverlayScrollbarPartialOptions['paddingAbsolute'];
+    showNativeOverlaidScrollbars?: OverlayScrollbarPartialOptions['showNativeOverlaidScrollbars'];
+    update?: ScrollbarUpdateOptions;
+    overflow?: ScrollbarOverflowOptions;
+    scrollbars?: ScrollbarScrollbarsOptions;
+}
+export type ScrollbarOptionsResolved = OverlayScrollbarOptions;
+export type ScrollbarReadonlyOptions = OverlayScrollbarReadonlyOptions;
+export type ScrollbarEventListeners = EventListeners;
+export type ScrollbarEventListenerArgs = EventListenerArgs;
+export type ScrollbarEventListener<Name extends keyof EventListenerArgs> = EventListener<Name>;
+export type ScrollbarUpdatedEvent = OnUpdatedEventListenerArgs;
+export type ScrollbarElements = OverlayScrollbarElements;
+export type ScrollbarState = OverlayScrollbarState;
+export type ScrollbarPlugin = InstancePlugin;
 export interface ScrollbarProps {
-    type: 'track' | 'embed';
-    outerClass: any;
-    outerStyle: any;
+    type?: ScrollbarType;
+    outerClass?: string | Record<string, any> | unknown[];
+    outerStyle?: CSSProperties | CSSProperties[];
+    paddingAbsolute?: OverlayScrollbarPartialOptions['paddingAbsolute'];
+    showNativeOverlaidScrollbars?: OverlayScrollbarPartialOptions['showNativeOverlaidScrollbars'];
+    updateOptions?: ScrollbarUpdateOptions;
+    overflow?: ScrollbarOverflowOptions;
+    scrollbars?: ScrollbarScrollbarsOptions;
+    overlayOptions?: ScrollbarOptions;
+    events?: EventListeners;
+}
+export interface ScrollbarExpose {
+    options(): OverlayScrollbarOptions | undefined;
+    options(newOptions: ScrollbarOptions, pure?: boolean): OverlayScrollbarOptions | undefined;
+    on(eventListeners: EventListeners, pure?: boolean): (() => void) | undefined;
+    on<Name extends keyof EventListenerArgs>(name: Name, listener: EventListener<Name>): (() => void) | undefined;
+    on<Name extends keyof EventListenerArgs>(name: Name, listener: EventListener<Name>[]): (() => void) | undefined;
+    off<Name extends keyof EventListenerArgs>(name: Name, listener: EventListener<Name>): void;
+    off<Name extends keyof EventListenerArgs>(name: Name, listener: EventListener<Name>[]): void;
+    update(force?: boolean): boolean;
+    sleep(sleeping: boolean): void;
+    state(): OverlayScrollbarState | undefined;
+    elements(): OverlayScrollbarElements | undefined;
+    destroy(): void;
+    plugin<P extends InstancePlugin>(osPlugin: P): unknown;
+    scrollTo(options?: number | {
+        left?: number;
+        top?: number;
+    }, y?: number): void;
+    scrollTop(top: number): void;
+    scrollLeft(left: number): void;
+    getOSInstance(): {
+        options(): OverlayScrollbarOptions;
+        options(newOptions: ScrollbarOptions, pure?: boolean): OverlayScrollbarOptions;
+        on(eventListeners: EventListeners, pure?: boolean): () => void;
+        on<Name extends keyof EventListenerArgs>(name: Name, listener: EventListener<Name>): () => void;
+        on<Name extends keyof EventListenerArgs>(name: Name, listener: EventListener<Name>[]): () => void;
+        off<Name extends keyof EventListenerArgs>(name: Name, listener: EventListener<Name>): void;
+        off<Name extends keyof EventListenerArgs>(name: Name, listener: EventListener<Name>[]): void;
+        update(force?: boolean): boolean;
+        sleep(sleeping: boolean): void;
+        state(): OverlayScrollbarState;
+        elements(): OverlayScrollbarElements;
+        destroy(): void;
+        plugin<P extends InstancePlugin>(osPlugin: P): unknown;
+    } | null;
 }

package/es/scrollbar/scrollbar.js

@@ -1,49 +1,15 @@
 import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
 import scrollbar_vue_vue_type_script_lang_default from "./scrollbar.vue_vue_type_script_lang.js";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveComponent, withCtx } from "vue";
+import { createElementBlock, createElementVNode, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot } from "vue";
 //#region components/scrollbar/scrollbar.vue
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	const _component_ResizeObserver = resolveComponent("ResizeObserver");
-	const _component_thumb = resolveComponent("thumb");
 	return openBlock(), createElementBlock("div", {
 		class: normalizeClass(_ctx.cls),
-		style: normalizeStyle(_ctx.style)
-	}, [
-		createVNode(_component_ResizeObserver, { onResize: _ctx.handleResize }, {
-			default: withCtx(() => [createElementVNode("div", mergeProps({
-				ref: "containerRef",
-				class: `${_ctx.prefixCls}-container`
-			}, _ctx.$attrs, { onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.handleScroll && _ctx.handleScroll(...args)) }), [createVNode(_component_ResizeObserver, { onResize: _ctx.handleResize }, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, ["onResize"])], 16)]),
-			_: 3
-		}, 8, ["onResize"]),
-		!_ctx.hide && _ctx.hasHorizontalScrollbar ? (openBlock(), createBlock(_component_thumb, {
-			key: 0,
-			ref: "horizontalThumbRef",
-			data: _ctx.horizontalData,
-			direction: "horizontal",
-			both: _ctx.isBoth,
-			onScroll: _ctx.handleHorizontalScroll
-		}, null, 8, [
-			"data",
-			"both",
-			"onScroll"
-		])) : createCommentVNode("", true),
-		!_ctx.hide && _ctx.hasVerticalScrollbar ? (openBlock(), createBlock(_component_thumb, {
-			key: 1,
-			ref: "verticalThumbRef",
-			data: _ctx.verticalData,
-			direction: "vertical",
-			both: _ctx.isBoth,
-			onScroll: _ctx.handleVerticalScroll
-		}, null, 8, [
-			"data",
-			"both",
-			"onScroll"
-		])) : createCommentVNode("", true)
-	], 6);
+		style: normalizeStyle(_ctx.outerStyle)
+	}, [createElementVNode("div", mergeProps({
+		ref: "containerRef",
+		class: `${_ctx.prefixCls}-container`
+	}, _ctx.$attrs), [renderSlot(_ctx.$slots, "default")], 16)], 6);
 }
 var scrollbar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(scrollbar_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion

package/es/scrollbar/scrollbar.vue.d.ts

@@ -1,5 +1,6 @@
+import type { EventListenerArgs, EventListeners } from 'overlayscrollbars';
 import { PropType, StyleValue } from 'vue';
-import { ThumbData } from './interface';
+import type { ScrollbarEventListener, ScrollbarPlugin, ScrollbarProps } from './interface';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -11,6 +12,29 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     outerStyle: {
         type: PropType<StyleValue>;
     };
+    paddingAbsolute: {
+        type: PropType<ScrollbarProps["paddingAbsolute"]>;
+        default: undefined;
+    };
+    showNativeOverlaidScrollbars: {
+        type: PropType<ScrollbarProps["showNativeOverlaidScrollbars"]>;
+        default: undefined;
+    };
+    updateOptions: {
+        type: PropType<ScrollbarProps["updateOptions"]>;
+    };
+    overflow: {
+        type: PropType<ScrollbarProps["overflow"]>;
+    };
+    scrollbars: {
+        type: PropType<ScrollbarProps["scrollbars"]>;
+    };
+    overlayOptions: {
+        type: PropType<ScrollbarProps["overlayOptions"]>;
+    };
+    events: {
+        type: PropType<ScrollbarProps["events"]>;
+    };
     hide: {
         type: BooleanConstructor;
         default: boolean;
@@ -26,20 +50,80 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     prefixCls: string;
     cls: import("vue").ComputedRef<(string | Record<string, any> | unknown[] | undefined)[]>;
-    style: import("vue").ComputedRef<StyleValue[]>;
+    outerStyle: import("vue").ComputedRef<StyleValue>;
     containerRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
-    horizontalThumbRef: import("vue").Ref<any, any>;
-    verticalThumbRef: import("vue").Ref<any, any>;
-    horizontalData: import("vue").Ref<ThumbData | undefined, ThumbData | undefined>;
-    verticalData: import("vue").Ref<ThumbData | undefined, ThumbData | undefined>;
-    isBoth: import("vue").Ref<boolean, boolean>;
-    hasHorizontalScrollbar: import("vue").ComputedRef<boolean>;
-    hasVerticalScrollbar: import("vue").ComputedRef<boolean>;
-    handleResize: () => void;
-    handleScroll: (ev: Event) => void;
-    handleHorizontalScroll: (offset: number) => void;
-    handleVerticalScroll: (offset: number) => void;
+    mergedOptions: import("vue").ComputedRef<{
+        paddingAbsolute: boolean | undefined;
+        showNativeOverlaidScrollbars: boolean | undefined;
+        update: import("./interface").ScrollbarUpdateOptions | undefined;
+        overflow: {
+            x: string;
+            y: string;
+        };
+        scrollbars: {
+            theme: string | null;
+            visibility: import("overlayscrollbars").ScrollbarsVisibilityBehavior;
+            autoHide: string;
+            autoHideDelay?: number;
+            autoHideSuspend: boolean;
+            dragScroll?: boolean;
+            clickScroll: string | boolean | ((isHorizontal: boolean) => Partial<import("./interface").ScrollbarClickScrollBehaviorOptions> | false | null | undefined | void);
+            pointers?: string[] | null;
+        };
+    }>;
+    resolveOSInstance: () => {
+        options: {
+            (): import("overlayscrollbars").Options;
+            (newOptions: import("overlayscrollbars").PartialOptions, pure?: boolean): import("overlayscrollbars").Options;
+        };
+        on: {
+            (eventListeners: EventListeners, pure?: boolean): () => void;
+            <N extends keyof EventListenerArgs>(name: N, listener: import("overlayscrollbars").EventListener<N>): () => void;
+            <N extends keyof EventListenerArgs>(name: N, listener: import("overlayscrollbars").EventListener<N>[]): () => void;
+        };
+        off: {
+            <N extends keyof EventListenerArgs>(name: N, listener: import("overlayscrollbars").EventListener<N>): void;
+            <N extends keyof EventListenerArgs>(name: N, listener: import("overlayscrollbars").EventListener<N>[]): void;
+        };
+        update: (force?: boolean) => boolean;
+        sleep: (sleeping: boolean) => void;
+        state: () => import("overlayscrollbars").State;
+        elements: () => import("overlayscrollbars").Elements;
+        destroy: () => void;
+        plugin: <P extends import("overlayscrollbars").InstancePlugin>(osPlugin: P) => import("overlayscrollbars").InferInstancePluginModuleInstance<P> | undefined;
+    } | null;
+    getScrollOffsetElement: () => HTMLElement | null;
 }, {}, {}, {
+    getOSInstance(): {
+        options: {
+            (): import("overlayscrollbars").Options;
+            (newOptions: import("overlayscrollbars").PartialOptions, pure?: boolean): import("overlayscrollbars").Options;
+        };
+        on: {
+            (eventListeners: EventListeners, pure?: boolean): () => void;
+            <N extends keyof EventListenerArgs>(name: N, listener: import("overlayscrollbars").EventListener<N>): () => void;
+            <N extends keyof EventListenerArgs>(name: N, listener: import("overlayscrollbars").EventListener<N>[]): () => void;
+        };
+        off: {
+            <N extends keyof EventListenerArgs>(name: N, listener: import("overlayscrollbars").EventListener<N>): void;
+            <N extends keyof EventListenerArgs>(name: N, listener: import("overlayscrollbars").EventListener<N>[]): void;
+        };
+        update: (force?: boolean) => boolean;
+        sleep: (sleeping: boolean) => void;
+        state: () => import("overlayscrollbars").State;
+        elements: () => import("overlayscrollbars").Elements;
+        destroy: () => void;
+        plugin: <P extends import("overlayscrollbars").InstancePlugin>(osPlugin: P) => import("overlayscrollbars").InferInstancePluginModuleInstance<P> | undefined;
+    } | null;
+    options(newOptions?: ScrollbarProps["overlayOptions"], pure?: boolean): import("overlayscrollbars").Options | undefined;
+    on(nameOrListeners: keyof EventListenerArgs | EventListeners, listenerOrPure?: ScrollbarEventListener<keyof EventListenerArgs> | ScrollbarEventListener<keyof EventListenerArgs>[] | boolean): (() => void) | undefined;
+    off(name: keyof EventListenerArgs, listener: ScrollbarEventListener<keyof EventListenerArgs> | ScrollbarEventListener<keyof EventListenerArgs>[]): void;
+    update(force?: boolean): boolean;
+    sleep(sleeping: boolean): void;
+    state(): import("overlayscrollbars").State | undefined;
+    elements(): import("overlayscrollbars").Elements | undefined;
+    plugin(osPlugin: ScrollbarPlugin): void | import("overlayscrollbars").PluginModuleInstance | undefined;
+    destroy(): void;
     scrollTo(options?: number | {
         left?: number;
         top?: number;
@@ -57,6 +141,29 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     outerStyle: {
         type: PropType<StyleValue>;
     };
+    paddingAbsolute: {
+        type: PropType<ScrollbarProps["paddingAbsolute"]>;
+        default: undefined;
+    };
+    showNativeOverlaidScrollbars: {
+        type: PropType<ScrollbarProps["showNativeOverlaidScrollbars"]>;
+        default: undefined;
+    };
+    updateOptions: {
+        type: PropType<ScrollbarProps["updateOptions"]>;
+    };
+    overflow: {
+        type: PropType<ScrollbarProps["overflow"]>;
+    };
+    scrollbars: {
+        type: PropType<ScrollbarProps["scrollbars"]>;
+    };
+    overlayOptions: {
+        type: PropType<ScrollbarProps["overlayOptions"]>;
+    };
+    events: {
+        type: PropType<ScrollbarProps["events"]>;
+    };
     hide: {
         type: BooleanConstructor;
         default: boolean;
@@ -73,72 +180,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onScroll?: ((_ev: Event) => any) | undefined;
 }>, {
     type: "embed" | "track";
+    paddingAbsolute: boolean | undefined;
+    showNativeOverlaidScrollbars: boolean | undefined;
     hide: boolean;
     disableHorizontal: boolean;
     disableVertical: boolean;
-}, {}, {
-    ResizeObserver: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        watchOnUpdated: BooleanConstructor;
-    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "resize"[], "resize", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        watchOnUpdated: BooleanConstructor;
-    }>> & Readonly<{
-        onResize?: ((...args: any[]) => any) | undefined;
-    }>, {
-        watchOnUpdated: boolean;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-    Thumb: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        data: {
-            type: PropType<ThumbData>;
-        };
-        direction: {
-            type: PropType<import("..").Direction>;
-            default: string;
-        };
-        alwaysShow: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        both: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>, {
-        visible: import("vue").Ref<boolean, boolean>;
-        trackRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
-        thumbRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
-        prefixCls: string;
-        thumbCls: import("vue").ComputedRef<(string | {
-            [x: string]: boolean;
-        })[]>;
-        thumbStyle: import("vue").ComputedRef<{
-            [x: string]: string;
-        }>;
-        handleThumbMouseDown: (ev: MouseEvent) => void;
-        handleTrackClick: (ev: MouseEvent) => void;
-        setOffset: (_offset: number) => void;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "scroll"[], "scroll", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        data: {
-            type: PropType<ThumbData>;
-        };
-        direction: {
-            type: PropType<import("..").Direction>;
-            default: string;
-        };
-        alwaysShow: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        both: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{
-        onScroll?: ((...args: any[]) => any) | undefined;
-    }>, {
-        direction: "horizontal" | "vertical";
-        alwaysShow: boolean;
-        both: boolean;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;