import type { CSSProperties, HTMLAttributes, PropType } from 'vue';
import type { ExtractInternalPropTypes, ExtractPublicPropTypes } from '../../../_utils';
export interface ScrollTo {
(x: number, y: number): void;
(options: {
left?: number;
top?: number;
behavior?: ScrollBehavior;
debounce?: boolean;
}): void;
(options: {
el: HTMLElement;
behavior?: ScrollBehavior;
debounce?: boolean;
}): void;
(options: {
index: number;
elSize: number;
behavior?: ScrollBehavior;
debounce?: boolean;
}): void;
(options: {
position: 'top' | 'bottom';
behavior?: ScrollBehavior;
debounce?: boolean;
}): void;
}
export interface ScrollBy {
(x: number, y: number): void;
(options: {
left?: number;
top?: number;
behavior?: ScrollBehavior;
}): void;
}
export interface ScrollbarInstMethods {
syncUnifiedContainer: () => void;
scrollTo: ScrollTo;
scrollBy: ScrollBy;
sync: () => void;
handleMouseEnterWrapper: () => void;
handleMouseLeaveWrapper: () => void;
}
export interface ScrollbarInst extends ScrollbarInstMethods {
$el: HTMLElement;
containerRef: HTMLElement | null;
contentRef: HTMLElement | null;
containerScrollTop: number;
}
declare const scrollbarProps: {
readonly abstract: BooleanConstructor;
readonly duration: {
readonly type: NumberConstructor;
readonly default: 0;
};
readonly scrollable: {
readonly type: BooleanConstructor;
readonly default: true;
};
readonly xScrollable: BooleanConstructor;
readonly trigger: {
readonly type: PropType<"none" | "hover">;
readonly default: "hover";
};
readonly useUnifiedContainer: BooleanConstructor;
readonly triggerDisplayManually: BooleanConstructor;
readonly container: PropType<() => HTMLElement | null | undefined>;
readonly content: PropType<() => HTMLElement | null | undefined>;
readonly containerClass: StringConstructor;
readonly containerStyle: PropType;
readonly contentClass: PropType>;
readonly contentStyle: PropType;
readonly horizontalRailStyle: PropType;
readonly verticalRailStyle: PropType;
readonly onScroll: PropType<(e: Event) => void>;
readonly onWheel: PropType<(e: WheelEvent) => void>;
readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
readonly internalHoistYRail: BooleanConstructor;
readonly internalExposeWidthCssVar: BooleanConstructor;
readonly yPlacement: {
readonly type: PropType<"left" | "right">;
readonly default: "right";
};
readonly xPlacement: {
readonly type: PropType<"top" | "bottom">;
readonly default: "bottom";
};
readonly theme: PropType>;
readonly themeOverrides: PropType>>;
readonly builtinThemeOverrides: PropType>>;
};
export type ScrollbarProps = ExtractPublicPropTypes;
export type ScrollbarInternalProps = ExtractInternalPropTypes;
declare const Scrollbar: import("vue").DefineComponent;
readonly default: "hover";
};
readonly useUnifiedContainer: BooleanConstructor;
readonly triggerDisplayManually: BooleanConstructor;
readonly container: PropType<() => HTMLElement | null | undefined>;
readonly content: PropType<() => HTMLElement | null | undefined>;
readonly containerClass: StringConstructor;
readonly containerStyle: PropType;
readonly contentClass: PropType>;
readonly contentStyle: PropType;
readonly horizontalRailStyle: PropType;
readonly verticalRailStyle: PropType;
readonly onScroll: PropType<(e: Event) => void>;
readonly onWheel: PropType<(e: WheelEvent) => void>;
readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
readonly internalHoistYRail: BooleanConstructor;
readonly internalExposeWidthCssVar: BooleanConstructor;
readonly yPlacement: {
readonly type: PropType<"left" | "right">;
readonly default: "right";
};
readonly xPlacement: {
readonly type: PropType<"top" | "bottom">;
readonly default: "bottom";
};
readonly theme: PropType>;
readonly themeOverrides: PropType>>;
readonly builtinThemeOverrides: PropType>>;
}>, {
mergedClsPrefix: import("vue").Ref;
rtlEnabled: import("vue").Ref | undefined;
containerScrollTop: import("vue").Ref;
wrapperRef: import("vue").Ref;
containerRef: import("vue").Ref;
contentRef: import("vue").Ref;
yRailRef: import("vue").Ref;
xRailRef: import("vue").Ref;
needYBar: import("vue").ComputedRef;
needXBar: import("vue").ComputedRef;
yBarSizePx: import("vue").ComputedRef;
xBarSizePx: import("vue").ComputedRef;
yBarTopPx: import("vue").ComputedRef;
xBarLeftPx: import("vue").ComputedRef;
isShowXBar: import("vue").ComputedRef;
isShowYBar: import("vue").ComputedRef;
isIos: boolean;
handleScroll: (e: Event) => void;
handleContentResize: () => void;
handleContainerResize: (e: ResizeObserverEntry) => void;
handleYScrollMouseDown: (e: MouseEvent) => void;
handleXScrollMouseDown: (e: MouseEvent) => void;
containerWidth: import("vue").Ref;
cssVars: import("vue").ComputedRef<{
'--n-scrollbar-bezier': string;
'--n-scrollbar-color': string;
'--n-scrollbar-color-hover': string;
'--n-scrollbar-border-radius': string;
'--n-scrollbar-width': string;
'--n-scrollbar-height': string;
'--n-scrollbar-rail-top-horizontal-top': string;
'--n-scrollbar-rail-right-horizontal-top': string;
'--n-scrollbar-rail-bottom-horizontal-top': string;
'--n-scrollbar-rail-left-horizontal-top': string;
'--n-scrollbar-rail-top-horizontal-bottom': string;
'--n-scrollbar-rail-right-horizontal-bottom': string;
'--n-scrollbar-rail-bottom-horizontal-bottom': string;
'--n-scrollbar-rail-left-horizontal-bottom': string;
'--n-scrollbar-rail-top-vertical-right': string;
'--n-scrollbar-rail-right-vertical-right': string;
'--n-scrollbar-rail-bottom-vertical-right': string;
'--n-scrollbar-rail-left-vertical-right': string;
'--n-scrollbar-rail-top-vertical-left': string;
'--n-scrollbar-rail-right-vertical-left': string;
'--n-scrollbar-rail-bottom-vertical-left': string;
'--n-scrollbar-rail-left-vertical-left': string;
'--n-scrollbar-rail-color': string;
}> | undefined;
themeClass: import("vue").Ref | undefined;
onRender: (() => void) | undefined;
syncUnifiedContainer: () => void;
scrollTo: ScrollTo;
scrollBy: ScrollBy;
sync: () => void;
handleMouseEnterWrapper: () => void;
handleMouseLeaveWrapper: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly;
readonly default: "hover";
};
readonly useUnifiedContainer: BooleanConstructor;
readonly triggerDisplayManually: BooleanConstructor;
readonly container: PropType<() => HTMLElement | null | undefined>;
readonly content: PropType<() => HTMLElement | null | undefined>;
readonly containerClass: StringConstructor;
readonly containerStyle: PropType;
readonly contentClass: PropType>;
readonly contentStyle: PropType;
readonly horizontalRailStyle: PropType;
readonly verticalRailStyle: PropType;
readonly onScroll: PropType<(e: Event) => void>;
readonly onWheel: PropType<(e: WheelEvent) => void>;
readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
readonly internalHoistYRail: BooleanConstructor;
readonly internalExposeWidthCssVar: BooleanConstructor;
readonly yPlacement: {
readonly type: PropType<"left" | "right">;
readonly default: "right";
};
readonly xPlacement: {
readonly type: PropType<"top" | "bottom">;
readonly default: "bottom";
};
readonly theme: PropType>;
readonly themeOverrides: PropType>>;
readonly builtinThemeOverrides: PropType>>;
}>> & Readonly<{}>, {
readonly abstract: boolean;
readonly duration: number;
readonly scrollable: boolean;
readonly xScrollable: boolean;
readonly trigger: "none" | "hover";
readonly useUnifiedContainer: boolean;
readonly triggerDisplayManually: boolean;
readonly internalHoistYRail: boolean;
readonly internalExposeWidthCssVar: boolean;
readonly yPlacement: "left" | "right";
readonly xPlacement: "top" | "bottom";
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
type NativeScrollbarProps = Omit;
type MergedProps = Partial;
export default Scrollbar;
export declare const XScrollbar: new () => {
$props: MergedProps;
};