@fastkit/vue-scroller
Version:
A library for controlling the scrolling state of elements and components in Vue applications.
180 lines (176 loc) • 7.61 kB
TypeScript
import * as _fastkit_scroller from '@fastkit/scroller';
import { ScrollerSetting, Scroller, ScrollAxis, ScrollDirection, ScrollXDirection, ScrollYDirection, ScrollerState, ScrollerScrollOptions, ScrollPosition, ScrollToElementTarget, ScrollerScrollToElementOptions, ScrollToSideTargets, ScrollStopper, ScrollToElementAdditionalOffset } from '@fastkit/scroller';
export * from '@fastkit/scroller';
import * as vue from 'vue';
import { PropType, ExtractPropTypes } from 'vue';
import * as _fastkit_vue_utils from '@fastkit/vue-utils';
import { ExtractPropInput } from '@fastkit/vue-utils';
import * as vue_jsx_runtime from 'vue/jsx-runtime';
type UseScrollerTarget = 'self' | 'body';
interface UseScrollerSetting extends Omit<Partial<ScrollerSetting>, 'el'> {
el?: UseScrollerTarget;
}
declare function useScrollerControl(setting: UseScrollerSetting): {
readonly elementRef: vue.Ref<HTMLElement | null>;
readonly scroller: Scroller;
readonly containerHeight: number;
readonly containerWidth: number;
readonly isDestroyed: boolean;
readonly isPending: boolean;
readonly isReady: boolean;
readonly isRunning: boolean;
readonly lastAxis: ScrollAxis;
readonly lastDirection: ScrollDirection;
readonly lastXDirection: ScrollXDirection;
readonly lastYDirection: ScrollYDirection;
readonly nowScrolling: boolean;
readonly scrollEnabled: boolean;
readonly scrollHeight: number;
readonly scrollWidth: number;
readonly scrollableX: boolean;
readonly scrollableY: boolean;
readonly state: ScrollerState;
scrollBottom: number;
scrollLeft: number;
scrollRight: number;
scrollTop: number;
ready(): Promise<void>;
element(): HTMLElement | null;
start(): Promise<void>;
stop(): void;
destroy(): void;
update(): void;
toJSON(): _fastkit_scroller.ScrollerObserver;
toString(): string;
cancel(): void;
by(diffX: number, diffY: number, options?: ScrollerScrollOptions): _fastkit_scroller.ScrollResult;
to(scrollPosition: Partial<ScrollPosition>, options?: ScrollerScrollOptions): _fastkit_scroller.ScrollResult;
toElement(target: ScrollToElementTarget, options?: ScrollerScrollToElementOptions): _fastkit_scroller.ScrollResult;
toSide(targets: ScrollToSideTargets, options?: ScrollerScrollOptions): _fastkit_scroller.ScrollResult;
toTop(options?: ScrollerScrollOptions): _fastkit_scroller.ScrollResult;
toRight(options?: ScrollerScrollOptions): _fastkit_scroller.ScrollResult;
toBottom(options?: ScrollerScrollOptions): _fastkit_scroller.ScrollResult;
toLeft(options?: ScrollerScrollOptions): _fastkit_scroller.ScrollResult;
toLeftTop(options?: ScrollerScrollOptions): _fastkit_scroller.ScrollResult;
toLeftBottom(options?: ScrollerScrollOptions): _fastkit_scroller.ScrollResult;
toRightTop(options?: ScrollerScrollOptions): _fastkit_scroller.ScrollResult;
toRightBottom(options?: ScrollerScrollOptions): _fastkit_scroller.ScrollResult;
pushScrollStopper(stopper: ScrollStopper): () => void;
removeScrollStopper(stopper: ScrollStopper): void;
setScrollToElementAdditionalOffset(offset: ScrollToElementAdditionalOffset | undefined): void;
deleteScrollToElementAdditionalOffset(): void;
};
type UseScroller = ReturnType<typeof useScrollerControl>;
declare function getDocumentScroller(): UseScroller;
type ScrollerControl = ReturnType<typeof useScrollerControl>;
interface VScrollerSettings extends UseScrollerSetting {
}
declare const scrollerProps: {
settings: {
type: PropType<VScrollerSettings | null>;
default: null;
};
/**
* スクロール可能な辺にガイドとして影を表示する場合に設定する
*/
guide: (BooleanConstructor | NumberConstructor)[];
/**
* スクロールするコンテナ要素のクラス名
*/
containerClass: StringConstructor;
};
type VScrollerProps = ExtractPropInput<typeof scrollerProps>;
type VScrollerResolvedProps = ExtractPropTypes<typeof scrollerProps>;
/** Scrollability in each direction */
interface ScrollerScrollability {
/** Whether you can scroll to the left or not */
left: boolean;
/** Whether you can scroll to the right or not */
right: boolean;
/** Whether you can scroll to the top or not */
top: boolean;
/** Whether you can scroll to the bottom or not */
bottom: boolean;
}
/**
* Combined Scrollability
*
* The information immediately below is marked as scrollable to account for the margin of the `guide` prop, so `false` may be marked even if the information is actually scrollable.
* If you want to check strict scrollability, check the `strict` property.
*/
interface ScrollerCombinedScrollability extends ScrollerScrollability {
/**
* Strict scrollability
*
* Scrollable more than 0px will be marked as valid
*/
strict: ScrollerScrollability;
}
interface ScrollerAPI {
get scroller(): ScrollerControl;
/**
* Combined Scrollability
*
* @see {@link ScrollerCombinedScrollability}
*/
get scrollable(): ScrollerCombinedScrollability;
}
declare const _ScrollerI: vue.DefineComponent<{
settings: {
type: PropType<VScrollerSettings | null>;
default: null;
};
/**
* スクロール可能な辺にガイドとして影を表示する場合に設定する
*/
guide: (BooleanConstructor | NumberConstructor)[];
/**
* スクロールするコンテナ要素のクラス名
*/
containerClass: StringConstructor;
}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ExtractPropTypes<{
settings: {
type: PropType<VScrollerSettings | null>;
default: null;
};
/**
* スクロール可能な辺にガイドとして影を表示する場合に設定する
*/
guide: (BooleanConstructor | NumberConstructor)[];
/**
* スクロールするコンテナ要素のクラス名
*/
containerClass: StringConstructor;
}>>, {
settings: VScrollerSettings | null;
}, {}>;
declare const VScroller: _fastkit_vue_utils.TypedComponent<_fastkit_vue_utils.ExposedComponent<ScrollerAPI, vue.DefineComponent<{
settings: {
type: PropType<VScrollerSettings | null>;
default: null;
};
/**
* スクロール可能な辺にガイドとして影を表示する場合に設定する
*/
guide: (BooleanConstructor | NumberConstructor)[];
/**
* スクロールするコンテナ要素のクラス名
*/
containerClass: StringConstructor;
}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ExtractPropTypes<{
settings: {
type: PropType<VScrollerSettings | null>;
default: null;
};
/**
* スクロール可能な辺にガイドとして影を表示する場合に設定する
*/
guide: (BooleanConstructor | NumberConstructor)[];
/**
* スクロールするコンテナ要素のクラス名
*/
containerClass: StringConstructor;
}>>, {
settings: VScrollerSettings | null;
}, {}>>, {}>;
export { type ScrollerAPI, type ScrollerCombinedScrollability, type ScrollerControl, type ScrollerScrollability, type UseScroller, type UseScrollerSetting, type UseScrollerTarget, VScroller, type VScrollerProps, type VScrollerResolvedProps, type VScrollerSettings, _ScrollerI, getDocumentScroller, scrollerProps, useScrollerControl };