vexip-ui/dist/components/scroll/scroll.vue.d.ts

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { ScrollbarExposed } from '../scrollbar';
import { EventHandler } from '@vexip-ui/utils';
declare function getState(): {
    scrollX: number;
    scrollY: number;
    percentX: number;
    percentY: number;
    enableXScroll: boolean;
    enableYScroll: boolean;
};
declare function scrollTo(clientX: number, clientY: number, duration?: number): Promise<void>;
declare function scrollBy(deltaX: number, deltaY: number, duration?: number): Promise<void>;
declare function scrollToElement(el: string | Element, duration?: number, offset?: number): Promise<void>;
declare function ensureInView(el: string | Element, duration?: number, offset?: number): Promise<void>;
declare function getXScrollLimit(): number[];
declare function getYScrollLimit(): number[];
declare function addScrollListener(listener: EventHandler): void;
declare function removeScrollListener(listener: EventHandler): void;
declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: {
        extra?(_: {
            getState: typeof getState;
            refresh: () => Promise<void>;
            scrollTo: typeof scrollTo;
            scrollBy: typeof scrollBy;
            scrollToElement: typeof scrollToElement;
            ensureInView: typeof ensureInView;
        }): any;
        default?(_: {
            getState: typeof getState;
            refresh: () => Promise<void>;
            scrollTo: typeof scrollTo;
            scrollBy: typeof scrollBy;
            scrollToElement: typeof scrollToElement;
            ensureInView: typeof ensureInView;
        }): any;
    };
    refs: {
        wrapperEl: HTMLDivElement;
        contentEl: unknown;
        xBar: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
            inherit: import('vue').PropType<boolean>;
            placement: import('vue').PropType<"bottom" | "top" | "right" | "left">;
            scroll: import('vue').PropType<number>;
            barLength: import('vue').PropType<number>;
            width: import('vue').PropType<number>;
            appear: import('vue').PropType<boolean>;
            fade: import('vue').PropType<number>;
            barColor: import('vue').PropType<string>;
            trackColor: import('vue').PropType<string>;
            disabled: import('vue').PropType<boolean>;
            wrapper: import('vue').PropType<string | HTMLElement>;
            duration: import('vue').PropType<number>;
            useTrack: import('vue').PropType<boolean>;
            trackSpeed: import('vue').PropType<number>;
            onScrollStart: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
            onScroll: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
            onScrollEnd: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        }>> & Readonly<{}>, {
            currentScroll: import('vue').Ref<number, number>;
            container: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            bar: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            track: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            handleScroll: (scroll: number) => void;
        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
            container: HTMLDivElement;
            track: HTMLDivElement;
            bar: HTMLDivElement;
        }, HTMLDivElement, import('vue').ComponentProvideOptions, {
            P: {};
            B: {};
            D: {};
            C: {};
            M: {};
            Defaults: {};
        }, Readonly<import('vue').ExtractPropTypes<{
            inherit: import('vue').PropType<boolean>;
            placement: import('vue').PropType<"bottom" | "top" | "right" | "left">;
            scroll: import('vue').PropType<number>;
            barLength: import('vue').PropType<number>;
            width: import('vue').PropType<number>;
            appear: import('vue').PropType<boolean>;
            fade: import('vue').PropType<number>;
            barColor: import('vue').PropType<string>;
            trackColor: import('vue').PropType<string>;
            disabled: import('vue').PropType<boolean>;
            wrapper: import('vue').PropType<string | HTMLElement>;
            duration: import('vue').PropType<number>;
            useTrack: import('vue').PropType<boolean>;
            trackSpeed: import('vue').PropType<number>;
            onScrollStart: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
            onScroll: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
            onScrollEnd: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        }>> & Readonly<{}>, {
            currentScroll: import('vue').Ref<number, number>;
            container: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            bar: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            track: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            handleScroll: (scroll: number) => void;
        }, {}, {}, {}, {}> | null;
        yBar: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
            inherit: import('vue').PropType<boolean>;
            placement: import('vue').PropType<"bottom" | "top" | "right" | "left">;
            scroll: import('vue').PropType<number>;
            barLength: import('vue').PropType<number>;
            width: import('vue').PropType<number>;
            appear: import('vue').PropType<boolean>;
            fade: import('vue').PropType<number>;
            barColor: import('vue').PropType<string>;
            trackColor: import('vue').PropType<string>;
            disabled: import('vue').PropType<boolean>;
            wrapper: import('vue').PropType<string | HTMLElement>;
            duration: import('vue').PropType<number>;
            useTrack: import('vue').PropType<boolean>;
            trackSpeed: import('vue').PropType<number>;
            onScrollStart: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
            onScroll: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
            onScrollEnd: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        }>> & Readonly<{}>, {
            currentScroll: import('vue').Ref<number, number>;
            container: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            bar: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            track: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            handleScroll: (scroll: number) => void;
        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
            container: HTMLDivElement;
            track: HTMLDivElement;
            bar: HTMLDivElement;
        }, HTMLDivElement, import('vue').ComponentProvideOptions, {
            P: {};
            B: {};
            D: {};
            C: {};
            M: {};
            Defaults: {};
        }, Readonly<import('vue').ExtractPropTypes<{
            inherit: import('vue').PropType<boolean>;
            placement: import('vue').PropType<"bottom" | "top" | "right" | "left">;
            scroll: import('vue').PropType<number>;
            barLength: import('vue').PropType<number>;
            width: import('vue').PropType<number>;
            appear: import('vue').PropType<boolean>;
            fade: import('vue').PropType<number>;
            barColor: import('vue').PropType<string>;
            trackColor: import('vue').PropType<string>;
            disabled: import('vue').PropType<boolean>;
            wrapper: import('vue').PropType<string | HTMLElement>;
            duration: import('vue').PropType<number>;
            useTrack: import('vue').PropType<boolean>;
            trackSpeed: import('vue').PropType<number>;
            onScrollStart: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
            onScroll: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
            onScrollEnd: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        }>> & Readonly<{}>, {
            currentScroll: import('vue').Ref<number, number>;
            container: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            bar: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            track: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
            handleScroll: (scroll: number) => void;
        }, {}, {}, {}, {}> | null;
    };
    rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
    inherit: import('vue').PropType<boolean>;
    scrollClass: import('vue').PropType<string | Record<string, any> | (string | Record<string, any>)[]>;
    scrollStyle: import('vue').PropType<string | import('vue').CSSProperties | (string | import('vue').CSSProperties)[]>;
    scrollAttrs: import('vue').PropType<Record<string, any>>;
    mode: import('vue').PropType<"horizontal" | "vertical" | "both" | "horizontal-exact">;
    width: import('vue').PropType<string | number>;
    height: import('vue').PropType<string | number>;
    deltaX: import('vue').PropType<number>;
    deltaY: import('vue').PropType<number>;
    disabled: import('vue').PropType<boolean>;
    pointer: import('vue').PropType<boolean>;
    wheel: import('vue').PropType<boolean>;
    scrollX: import('vue').PropType<number>;
    scrollY: import('vue').PropType<number>;
    useXBar: import('vue').PropType<boolean>;
    useYBar: import('vue').PropType<boolean>;
    barFade: import('vue').PropType<number>;
    barClass: import('vue').PropType<string | Record<string, any> | (string | Record<string, any>)[]>;
    autoplay: import('vue').PropType<number | boolean>;
    playWaiting: import('vue').PropType<number>;
    noBuffer: import('vue').PropType<boolean>;
    noTransition: import('vue').PropType<boolean>;
    onBeforeScroll: import('vue').PropType<(payload: {
        signX: number;
        signY: number;
    }) => boolean>;
    useBarTrack: import('vue').PropType<boolean>;
    scrollTag: import('vue').PropType<string>;
    onResize: import('vue').PropType<((entry: ResizeObserverEntry) => void) | ((entry: ResizeObserverEntry) => void)[]>;
    onXEnabledChange: import('vue').PropType<((enabled: boolean) => void) | ((enabled: boolean) => void)[]>;
    onYEnabledChange: import('vue').PropType<((enabled: boolean) => void) | ((enabled: boolean) => void)[]>;
    onWheel: import('vue').PropType<((payload: import('./symbol').BarScrollPayload & {
        sign: 1 | -1;
    }) => void) | ((payload: import('./symbol').BarScrollPayload & {
        sign: 1 | -1;
    }) => void)[]>;
    onScrollStart: import('vue').PropType<((payload: Omit<import('./symbol').ScrollPayload, "type">) => void) | ((payload: Omit<import('./symbol').ScrollPayload, "type">) => void)[]>;
    onScroll: import('vue').PropType<((payload: import('./symbol').ScrollPayload) => void) | ((payload: import('./symbol').ScrollPayload) => void)[]>;
    onScrollEnd: import('vue').PropType<((payload: Omit<import('./symbol').ScrollPayload, "type">) => void) | ((payload: Omit<import('./symbol').ScrollPayload, "type">) => void)[]>;
    onBarScrollStart: import('vue').PropType<((payload: import('./symbol').BarScrollPayload) => void) | ((payload: import('./symbol').BarScrollPayload) => void)[]>;
    onBarScroll: import('vue').PropType<((payload: import('./symbol').BarScrollPayload) => void) | ((payload: import('./symbol').BarScrollPayload) => void)[]>;
    onBarScrollEnd: import('vue').PropType<((payload: import('./symbol').BarScrollPayload) => void) | ((payload: import('./symbol').BarScrollPayload) => void)[]>;
    onReady: import('vue').PropType<import('@vexip-ui/config').AnyFunction | import('@vexip-ui/config').AnyFunction[]>;
}>, {
    percentX: import('vue').Ref<number, number>;
    percentY: import('vue').Ref<number, number>;
    x: import('vue').Ref<number, number>;
    y: import('vue').Ref<number, number>;
    isReady: import('vue').Ref<boolean, boolean>;
    xBarLength: import('vue').ComputedRef<number>;
    yBarLength: import('vue').ComputedRef<number>;
    enableXScroll: import('vue').ComputedRef<boolean>;
    enableYScroll: import('vue').ComputedRef<boolean>;
    wrapper: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
    content: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
    xBar: import('vue').Ref<ScrollbarExposed | undefined, ScrollbarExposed | undefined>;
    yBar: import('vue').Ref<ScrollbarExposed | undefined, ScrollbarExposed | undefined>;
    refresh: () => Promise<void>;
    scrollTo: typeof scrollTo;
    scrollBy: typeof scrollBy;
    scrollToElement: typeof scrollToElement;
    ensureInView: typeof ensureInView;
    getXScrollLimit: typeof getXScrollLimit;
    getYScrollLimit: typeof getYScrollLimit;
    addScrollListener: typeof addScrollListener;
    removeScrollListener: typeof removeScrollListener;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
    inherit: import('vue').PropType<boolean>;
    scrollClass: import('vue').PropType<string | Record<string, any> | (string | Record<string, any>)[]>;
    scrollStyle: import('vue').PropType<string | import('vue').CSSProperties | (string | import('vue').CSSProperties)[]>;
    scrollAttrs: import('vue').PropType<Record<string, any>>;
    mode: import('vue').PropType<"horizontal" | "vertical" | "both" | "horizontal-exact">;
    width: import('vue').PropType<string | number>;
    height: import('vue').PropType<string | number>;
    deltaX: import('vue').PropType<number>;
    deltaY: import('vue').PropType<number>;
    disabled: import('vue').PropType<boolean>;
    pointer: import('vue').PropType<boolean>;
    wheel: import('vue').PropType<boolean>;
    scrollX: import('vue').PropType<number>;
    scrollY: import('vue').PropType<number>;
    useXBar: import('vue').PropType<boolean>;
    useYBar: import('vue').PropType<boolean>;
    barFade: import('vue').PropType<number>;
    barClass: import('vue').PropType<string | Record<string, any> | (string | Record<string, any>)[]>;
    autoplay: import('vue').PropType<number | boolean>;
    playWaiting: import('vue').PropType<number>;
    noBuffer: import('vue').PropType<boolean>;
    noTransition: import('vue').PropType<boolean>;
    onBeforeScroll: import('vue').PropType<(payload: {
        signX: number;
        signY: number;
    }) => boolean>;
    useBarTrack: import('vue').PropType<boolean>;
    scrollTag: import('vue').PropType<string>;
    onResize: import('vue').PropType<((entry: ResizeObserverEntry) => void) | ((entry: ResizeObserverEntry) => void)[]>;
    onXEnabledChange: import('vue').PropType<((enabled: boolean) => void) | ((enabled: boolean) => void)[]>;
    onYEnabledChange: import('vue').PropType<((enabled: boolean) => void) | ((enabled: boolean) => void)[]>;
    onWheel: import('vue').PropType<((payload: import('./symbol').BarScrollPayload & {
        sign: 1 | -1;
    }) => void) | ((payload: import('./symbol').BarScrollPayload & {
        sign: 1 | -1;
    }) => void)[]>;
    onScrollStart: import('vue').PropType<((payload: Omit<import('./symbol').ScrollPayload, "type">) => void) | ((payload: Omit<import('./symbol').ScrollPayload, "type">) => void)[]>;
    onScroll: import('vue').PropType<((payload: import('./symbol').ScrollPayload) => void) | ((payload: import('./symbol').ScrollPayload) => void)[]>;
    onScrollEnd: import('vue').PropType<((payload: Omit<import('./symbol').ScrollPayload, "type">) => void) | ((payload: Omit<import('./symbol').ScrollPayload, "type">) => void)[]>;
    onBarScrollStart: import('vue').PropType<((payload: import('./symbol').BarScrollPayload) => void) | ((payload: import('./symbol').BarScrollPayload) => void)[]>;
    onBarScroll: import('vue').PropType<((payload: import('./symbol').BarScrollPayload) => void) | ((payload: import('./symbol').BarScrollPayload) => void)[]>;
    onBarScrollEnd: import('vue').PropType<((payload: import('./symbol').BarScrollPayload) => void) | ((payload: import('./symbol').BarScrollPayload) => void)[]>;
    onReady: import('vue').PropType<import('@vexip-ui/config').AnyFunction | import('@vexip-ui/config').AnyFunction[]>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
    wrapperEl: HTMLDivElement;
    contentEl: unknown;
    xBar: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
        inherit: import('vue').PropType<boolean>;
        placement: import('vue').PropType<"bottom" | "top" | "right" | "left">;
        scroll: import('vue').PropType<number>;
        barLength: import('vue').PropType<number>;
        width: import('vue').PropType<number>;
        appear: import('vue').PropType<boolean>;
        fade: import('vue').PropType<number>;
        barColor: import('vue').PropType<string>;
        trackColor: import('vue').PropType<string>;
        disabled: import('vue').PropType<boolean>;
        wrapper: import('vue').PropType<string | HTMLElement>;
        duration: import('vue').PropType<number>;
        useTrack: import('vue').PropType<boolean>;
        trackSpeed: import('vue').PropType<number>;
        onScrollStart: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        onScroll: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        onScrollEnd: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
    }>> & Readonly<{}>, {
        currentScroll: import('vue').Ref<number, number>;
        container: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        bar: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        track: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        handleScroll: (scroll: number) => void;
    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
        container: HTMLDivElement;
        track: HTMLDivElement;
        bar: HTMLDivElement;
    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
        P: {};
        B: {};
        D: {};
        C: {};
        M: {};
        Defaults: {};
    }, Readonly<import('vue').ExtractPropTypes<{
        inherit: import('vue').PropType<boolean>;
        placement: import('vue').PropType<"bottom" | "top" | "right" | "left">;
        scroll: import('vue').PropType<number>;
        barLength: import('vue').PropType<number>;
        width: import('vue').PropType<number>;
        appear: import('vue').PropType<boolean>;
        fade: import('vue').PropType<number>;
        barColor: import('vue').PropType<string>;
        trackColor: import('vue').PropType<string>;
        disabled: import('vue').PropType<boolean>;
        wrapper: import('vue').PropType<string | HTMLElement>;
        duration: import('vue').PropType<number>;
        useTrack: import('vue').PropType<boolean>;
        trackSpeed: import('vue').PropType<number>;
        onScrollStart: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        onScroll: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        onScrollEnd: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
    }>> & Readonly<{}>, {
        currentScroll: import('vue').Ref<number, number>;
        container: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        bar: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        track: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        handleScroll: (scroll: number) => void;
    }, {}, {}, {}, {}> | null;
    yBar: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
        inherit: import('vue').PropType<boolean>;
        placement: import('vue').PropType<"bottom" | "top" | "right" | "left">;
        scroll: import('vue').PropType<number>;
        barLength: import('vue').PropType<number>;
        width: import('vue').PropType<number>;
        appear: import('vue').PropType<boolean>;
        fade: import('vue').PropType<number>;
        barColor: import('vue').PropType<string>;
        trackColor: import('vue').PropType<string>;
        disabled: import('vue').PropType<boolean>;
        wrapper: import('vue').PropType<string | HTMLElement>;
        duration: import('vue').PropType<number>;
        useTrack: import('vue').PropType<boolean>;
        trackSpeed: import('vue').PropType<number>;
        onScrollStart: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        onScroll: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        onScrollEnd: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
    }>> & Readonly<{}>, {
        currentScroll: import('vue').Ref<number, number>;
        container: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        bar: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        track: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        handleScroll: (scroll: number) => void;
    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
        container: HTMLDivElement;
        track: HTMLDivElement;
        bar: HTMLDivElement;
    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
        P: {};
        B: {};
        D: {};
        C: {};
        M: {};
        Defaults: {};
    }, Readonly<import('vue').ExtractPropTypes<{
        inherit: import('vue').PropType<boolean>;
        placement: import('vue').PropType<"bottom" | "top" | "right" | "left">;
        scroll: import('vue').PropType<number>;
        barLength: import('vue').PropType<number>;
        width: import('vue').PropType<number>;
        appear: import('vue').PropType<boolean>;
        fade: import('vue').PropType<number>;
        barColor: import('vue').PropType<string>;
        trackColor: import('vue').PropType<string>;
        disabled: import('vue').PropType<boolean>;
        wrapper: import('vue').PropType<string | HTMLElement>;
        duration: import('vue').PropType<number>;
        useTrack: import('vue').PropType<boolean>;
        trackSpeed: import('vue').PropType<number>;
        onScrollStart: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        onScroll: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
        onScrollEnd: import('vue').PropType<((percent: number) => void) | ((percent: number) => void)[]>;
    }>> & Readonly<{}>, {
        currentScroll: import('vue').Ref<number, number>;
        container: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        bar: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        track: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
        handleScroll: (scroll: number) => void;
    }, {}, {}, {}, {}> | null;
}, HTMLDivElement>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};