@imengyu/vue-scroll-rect/lib/ScrollRect.vue.d.ts

A scroll rect component for Vue3

export interface ScrollRectProps {
    /**
     * Scroll direction
     *
     * * both : Scroll in both directions
     * * vertical : Scroll only in vertical direction
     * * horizontal : Scroll only in horizontal direction
     * * none : Disable scroll
     *
     * @default both
     */
    scroll?: 'both' | 'none' | 'vertical' | 'horizontal';
    /**
     * Show scroll bar always, otherwise show scroll bar when mouse over
     * @default false
     */
    scrollBarAlwaysShow?: boolean;
    /**
     * Is able to click scroll bar background to set scroll position? (When `scrollBarAlwaysShow` is true)
     * @default true
     */
    scrollBarBackgroundClickable?: boolean;
    /**
     * CSS class of inner container
     */
    containerClass?: string;
    /**
     * Container style
     */
    containerStyle?: Record<string, any>;
    /**
     * Width of scroll rect
     */
    width?: number | string;
    /**
     * Height of scroll rect
     */
    height?: number | string;
    /**
     * Max width of inner container
     */
    maxWidth?: number | string;
    /**
     * Max height of inner container
     */
    maxHeight?: number | string;
    /**
     * Specify how many pixels of scroll distance trigger `scrollToStart` event.
     * @default 50
     */
    scrollToStartThreshold?: number;
    /**
     * Specify how many pixels of scroll distance trigger `scrollToEnd` event.
     * @default 50
     */
    scrollToEndThreshold?: number;
    /**
     * Enable pull to refresh.
     * @default false
     */
    enablePullToRefresh?: boolean;
    /**
     * Pull to refresh threshold.
     * @default 50
     */
    pullToRefreshThreshold?: number;
    /**
     * Pull-to-refresh loading state (supports v-model:pullToRefreshLoading).
     * @default false
     */
    pullToRefreshLoading?: boolean;
    /**
     * Height (px) of the pull area while loading.
     * @default 48
     */
    pullRefreshLoadingHeight?: number;
    /**
     * Maximum pull distance (px) before rubber-band clamp.
     * @default 120
     */
    pullRefreshMaxDistance?: number;
    /**
     * Enable back to top.
     * Can use slot `backToTop` to custom back to top button.
     * Slot props:
     * - onBackToTop: function to scroll to start
     * @default false
     */
    enableBackToTop?: boolean;
    /**
     * 超过该滚动偏移量（像素）后显示「返回顶部」：纵向看 `scrollTop`，横向看 `scrollLeft`（与 `scroll` 模式对应）。
     * @default 120
     */
    backToTopThreshold?: number;
}
declare function customScrollX(x: number): void;
declare function customScrollY(y: number): void;
export type ScrollRectPullRefreshState = 'idle' | 'pulling' | 'release' | 'loading';
export interface ScrollRectPullRefreshSlotParams {
    /**
     * 下拉状态：未拉动 / 拉动中 / 可释放 / 加载中
     */
    state: ScrollRectPullRefreshState;
    /**
     * 当前下拉距离（像素）
     */
    distance: number;
    /**
     * 触发加载的阈值（像素），与 `pullToRefreshThreshold` 一致
     */
    threshold: number;
    /**
     * 是否处于加载中（与 `pullToRefreshLoading` / v-model 一致）
     */
    loading: boolean;
    /**
     * 加载区域高度（像素），与 `pullRefreshLoadingHeight` 一致
     */
    loadingHeight: number;
}
export interface ScrollRectBackToTopSlotParams {
    /**
     * 滚动到起点 (0, 0)，与实例方法 `scrollToStart` 一致
     */
    onBackToTop: () => void;
    /**
     * 是否应显示返回控件（滚动已超过 `backToTopThreshold`，与默认按钮 `is-visible` 一致）
     */
    visible: boolean;
}
export interface ScrollRectScrollBarSlotParams {
    scrollValue: {
        /**
         * Is scrollbar visible?
         */
        show: boolean;
        /**
         * Scroll bar calculation length (percentage, 0-100)
         */
        size: number;
        /**
         * Scroll bar calculation length (pixel)
         */
        sizeRaw: number;
        /**
         * Scroll bar scrolling position (percentage, 0-100)
         */
        pos: number;
    };
    /**
     * Scroll bar scrolling position callback
     * @param pec (percentage, 0-100)
     */
    onScroll: (pec: number) => void;
}
export interface ScrollRectInstance {
    /**
     * Force update scrollbar state
     */
    refreshScrollState(): void;
    /**
     * Get scroll containerElement
     */
    getScrollContainer(): HTMLElement | undefined;
    /**
     * Scroll to position
     * @param x X scroll pos (pixel)
     * @param y Y scroll pos (pixel)
     */
    scrollTo(x: number, y: number): void;
    /**
     * Scroll to 0,0
     */
    scrollToStart(): void;
    /**
     * Scroll to container.scrollWidth, container.scrollHeight
     */
    scrollToEnd(): void;
}
declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: {
        pullRefresh?(_: {
            state: "loading" | "idle" | "release" | "pulling";
            distance: number;
            threshold: number;
            loading: boolean;
            loadingHeight: number;
        }): any;
        default?(_: {}): any;
        backToTop?(_: {
            onBackToTop: () => void;
            visible: boolean;
        }): any;
        scrollBarX?(_: {
            scrollBarValue: {
                show: boolean;
                size: number;
                sizeRaw: number;
                pos: number;
            };
            onScroll: typeof customScrollX;
        }): any;
        scrollBarY?(_: {
            scrollBarValue: {
                show: boolean;
                size: number;
                sizeRaw: number;
                pos: number;
            };
            onScroll: typeof customScrollY;
        }): any;
    };
    refs: {
        scrollrect: HTMLDivElement;
        container: HTMLDivElement;
        scrollBarRefX: HTMLDivElement;
        scrollBarThumbRefX: HTMLDivElement;
        scrollBarRefY: HTMLDivElement;
        scrollBarThumbRefY: HTMLDivElement;
    };
    rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<ScrollRectProps, {
    /**
     * Force update scrollbar state
     */
    refreshScrollState(): void;
    /**
     * Get scroll containerElement
     */
    getScrollContainer(): HTMLElement | undefined;
    /**
     * Scroll to position
     * @param x X scroll pos (pixel)
     * @param y Y scroll pos (pixel)
     */
    scrollTo(x: number, y: number): void;
    /**
     * Scroll to 0,0
     */
    scrollToStart(): void;
    /**
     * Scroll to container.scrollWidth, container.scrollHeight
     */
    scrollToEnd(): void;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
    scroll: (scrollLeft: number, scrollTop: number) => any;
    resized: (scrollWidth: number, scrollHeight: number) => any;
    scrollToStart: () => any;
    scrollToEnd: () => any;
    pullToRefreshStart: () => any;
    pullToRefreshEnd: () => any;
    "update:pullToRefreshLoading": (loading: boolean) => any;
}, string, import('vue').PublicProps, Readonly<ScrollRectProps> & Readonly<{
    onScroll?: ((scrollLeft: number, scrollTop: number) => any) | undefined;
    onResized?: ((scrollWidth: number, scrollHeight: number) => any) | undefined;
    onScrollToStart?: (() => any) | undefined;
    onScrollToEnd?: (() => any) | undefined;
    onPullToRefreshStart?: (() => any) | undefined;
    onPullToRefreshEnd?: (() => any) | undefined;
    "onUpdate:pullToRefreshLoading"?: ((loading: boolean) => any) | undefined;
}>, {
    scroll: "both" | "none" | "vertical" | "horizontal";
    scrollBarAlwaysShow: boolean;
    scrollBarBackgroundClickable: boolean;
    containerClass: string;
    scrollToStartThreshold: number;
    scrollToEndThreshold: number;
    enablePullToRefresh: boolean;
    pullToRefreshThreshold: number;
    pullToRefreshLoading: boolean;
    pullRefreshLoadingHeight: number;
    pullRefreshMaxDistance: number;
    enableBackToTop: boolean;
    backToTopThreshold: number;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
    scrollrect: HTMLDivElement;
    container: HTMLDivElement;
    scrollBarRefX: HTMLDivElement;
    scrollBarThumbRefX: HTMLDivElement;
    scrollBarRefY: HTMLDivElement;
    scrollBarThumbRefY: HTMLDivElement;
}, HTMLDivElement>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};