cmms/frontend/node_modules/@vexip-ui/hooks/dist/index.d.ts

504 lines
15 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { BITree } from '../../common/utils/src';
import { ComponentPublicInstance } from 'vue';
import { ComputedRef } from 'vue';
import { MaybeRef } from 'vue';
import { noop } from '../../common/utils/src';
import { OffsetOptions } from '@floating-ui/dom';
import { Placement } from '@floating-ui/dom';
import { Ref } from 'vue';
import { RendererElement } from 'vue';
import { RendererNode } from 'vue';
import { ShiftOptions } from '@floating-ui/dom';
import { Slots } from 'vue';
import { VirtualElement } from '@floating-ui/dom';
import { VNode } from 'vue';
import { VNodeChild } from 'vue';
import { VNodeNormalizedChildren } from 'vue';
import { watch } from 'vue';
import { WatchHandle } from 'vue';
export declare function addActiveThemes(themes: (string | InitThemeOptions)[]): void;
declare type Behavior = ScrollToOptions['behavior'];
export declare const CLICK_OUTSIDE = "clickoutside";
export declare function createSlotRender(slots: Slots, names: string[]): ((params?: any) => VNodeChild) | null;
export declare function createSlotRender(slots: Slots, names: string[], fallback: (params?: any) => VNodeChild): (params?: any) => VNodeChild;
declare type Data = Record<string, any>;
export declare function flatVNodes(children: VNodeNormalizedChildren): VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
export declare interface InitThemeOptions {
name: string;
rootClass?: string;
varsClass?: string;
}
export declare type IntersectionHandler = (entry: IntersectionObserverEntry) => any;
export declare function isHiddenElement(el?: HTMLElement | null): boolean;
declare type Key = number | string | symbol;
export declare type MaybeElement = HTMLElement | SVGElement | undefined | null;
export declare type MaybeInstance = MaybeElement | ComponentPublicInstance;
export { MaybeRef }
export declare type MaybeRefRecord<T> = {
[K in keyof T]: MaybeRef<T[K]>;
};
export declare type ModifierState = Readonly<Omit<Record<string, boolean>, 'activeKeys'> & {
activeKeys: Set<string>;
resetAll: () => void;
}>;
export declare interface MovingState {
xStart: number;
yStart: number;
xEnd: number;
yEnd: number;
clientX: number;
clientY: number;
deltaX: number;
deltaY: number;
lazy: boolean;
[custom: string]: unknown;
}
export declare function observeResize(el: Element, handler: ResizeHandler): void;
export declare function pickToRefs<T extends Record<any, any>, K extends keyof T>(reactive: T, keys: K[]): { [P in K]: Ref<T[P]>; };
export { Placement }
export declare const placementWhileList: readonly Placement[];
export declare function proxyExposed<T>(vnode: VNode): T;
export declare function queryOutsideHiddenElement(el?: Element | null): HTMLElement | null;
export declare type ResizeHandler = (entry: ResizeInfo) => any;
export declare interface ResizeInfo extends ResizeObserverEntry {
offsetWidth: number;
offsetHeight: number;
width: number;
height: number;
}
export declare function setActiveThemes(themes: (string | InitThemeOptions)[]): void;
export declare function unobserveResize(el: Element): void;
export declare function unrefElement<T extends string | MaybeInstance = string | MaybeInstance>(ref: MaybeRef<T>): T extends string | ComponentPublicInstance ? MaybeElement : T;
/**
* 创建一个可以添加 clickoutside 事件的元素 Ref
*
* @param handler 事件的回调方法
* @param target 需要处理的元素 ref可不传
*/
export declare function useClickOutside(handler: () => void, target?: Ref<HTMLElement | null | undefined>): Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
/**
* 创建一个观察了最近的上级元素 display 变化的元素 Ref
*
* @param displayInit 元素初次显示后执行的回调
* @returns 观察了 display 变化的元素 Ref
*/
export declare function useDisplay(displayInit?: typeof noop, element?: Ref<HTMLElement | null | undefined>): Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
export declare function useFullScreen(target?: MaybeRef<MaybeInstance>): UseFullScreenResult;
export declare interface UseFullScreenResult {
target: Ref<MaybeInstance>;
supported: boolean;
full: ComputedRef<boolean>;
enter: (force?: boolean) => Promise<boolean>;
exit: (force?: boolean) => Promise<boolean>;
toggle: (force?: boolean) => Promise<boolean>;
}
export declare function useHover(wrapper?: Ref<HTMLElement | null | undefined>): {
wrapper: Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
isHover: Ref<boolean, boolean>;
};
export declare function useIntersection(options: UseIntersectionOptions): {
target: Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
disconnect: typeof noop;
};
export declare type UseIntersectionOptions = IntersectionObserverInit & {
/**
* 元素交叉状态变化时的回调方法
*/
handler: IntersectionHandler;
/**
* 作用的目标元素的 Ref
*/
target?: Ref<HTMLElement | null | undefined>;
};
export declare function useListener<E = Event>(target: MaybeRef<EventTarget | null | undefined>, event: string, listener: (event: E) => any, options?: UseListenerOptions | boolean): typeof noop;
export declare interface UseListenerOptions extends AddEventListenerOptions {
/**
* 是否禁用整个 hook 的事件处理
*/
disabled?: MaybeRef<boolean>;
}
export declare function useManualRef(): {
updateSet: Set<() => void>;
manualRef: <T>(value: T) => Ref<T, T>;
triggerUpdate: () => void;
};
export declare function useModifier(options?: UseModifierOptions): {
target: Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
modifier: ModifierState;
};
export declare interface UseModifierOptions {
/**
* 作用的目标元素的 Ref
*/
target?: Ref<HTMLElement | null | undefined>;
/**
* 是否禁用整个 hook 的事件处理
*/
disabled?: MaybeRef<boolean>;
/**
* 配置键名的别名,会与默认别名动态合并
*/
aliasMap?: Record<string, string>;
/**
* 是否在目标元素失去焦点时重置修饰符
*
* @default true
*/
autoReset?: boolean;
/**
* 事件的 capture 选项
*
* @default false
*/
capture?: boolean;
/**
* 事件的 passive 选项
*
* @default true
*/
passive?: boolean;
/**
* 是否严格匹配目标元素
*/
strictTarget?: boolean;
/**
* 键按下的事件回调函数
*/
onKeyDown?: (event: KeyboardEvent, modifier: ModifierState) => void;
/**
* 键抬起的时间回调函数
*/
onKeyUp?: (event: KeyboardEvent, modifier: ModifierState) => void;
}
export declare function useMounted(wait?: 'tick' | 'frame'): {
isMounted: Readonly<Ref<boolean, boolean>>;
};
export declare function useMoving(options: UseMovingOptions): {
target: Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
moving: ComputedRef<boolean>;
x: Ref<number, number>;
y: Ref<number, number>;
lazy: Ref<boolean, boolean>;
disabled: Ref<boolean, boolean>;
};
export declare interface UseMovingOptions {
/**
* 作用的目标元素的 Ref
*/
target?: Ref<HTMLElement | null | undefined>;
/**
* 横向位置的初始值
*/
x?: MaybeRef<number>;
/**
* 纵向位置的初始值
*/
y?: MaybeRef<number>;
/**
* 为否为懒加载,开启后会在 End 事件再更新位置状态
*/
lazy?: MaybeRef<boolean>;
/**
* 是否禁用整个 hook 的事件处理
*/
disabled?: MaybeRef<boolean>;
/**
* 事件的 capture 选项
*
* @default true
*/
capture?: boolean;
/**
* 是否阻止 MouseDown 事件冒泡和默认行为
*
* @default true
*/
stopMouse?: boolean;
/**
* 是否阻止 TouchStart 事件冒泡和默认行为
*
* @default true
*/
stopTouch?: boolean;
/**
* 移动开始时的回调函数,返回 false 可以阻止本次移动
*/
onStart?: (state: MovingState, event: PointerEvent) => any;
/**
* 移动中的回调函数
*/
onMove?: (state: MovingState, event: PointerEvent) => void;
/**
* 移动结束时的回调函数
*/
onEnd?: (state: MovingState, event: PointerEvent) => void;
}
export declare function usePointer(options?: UsePointerOption): {
unregister: () => void;
x: Ref<number, number>;
y: Ref<number, number>;
};
export declare interface UsePointerOption {
/**
* 横向位置的初始值
*/
x?: number;
/**
* 纵向位置的初始值
*/
y?: number;
/**
* 是否手动停止,默认情况下会在组件的 BeforeUnmount 生命周期注销
*
* @default false
*/
manualStop?: boolean;
}
export declare function usePopper(initOptions: UsePopperOptions): {
wrapper: Ref<HTMLElement | null | undefined, HTMLElement | null | undefined> | undefined;
reference: Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
popper: Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
placement: Ref<Placement, Placement>;
transferTo: Ref<string, string>;
updatePopper: () => Promise<void>;
};
export declare interface UsePopperOptions {
/**
* popper 元素出现的位置
*/
placement: MaybeRef<Placement>;
/**
* popper 元素需要迁移至的目标选择器,为 true 时会迁移至 body
*/
transfer?: MaybeRef<boolean | string>;
/**
* 设置是否为从右向左的阅读方向
*/
isRtl?: MaybeRef<boolean>;
/**
* 包围元素,用于判断 clickoutside 事件
*
* 即使 popper 元素迁移至 wrapper 元素外部,点击 popper 元素时仍认为处于 wrapper 元素内部
*/
wrapper?: Ref<HTMLElement | null | undefined>;
/**
* 设置 popper 元素为否需要 drop此时 transform-origin 会自动调整
*/
isDrop?: MaybeRef<boolean>;
/**
* 参考元素popper 元素的位置计算依据
*/
reference?: Ref<HTMLElement | VirtualElement | null | undefined>;
/**
* popper 元素
*/
popper?: Ref<HTMLElement | null | undefined>;
/**
* arrow 元素
*/
arrow?: Ref<HTMLElement | null | undefined>;
/**
* popper 元素的偏移量,可传入一个回调函数
*/
offset?: MaybeRef<number[] | OffsetOptions>;
/**
* popper 元素是否限制在窗口内
*/
shift?: MaybeRef<boolean | ShiftOptions>;
/**
* 设置是否自动更新 popper 元素
*
* @default false
*/
autoUpdate?: boolean;
}
/**
* 获取用于记录 `requestAnimationFrame` 返回值的对象,记录的定时器会在作用域消除时自动清理
*/
export declare function useRaf(): {
timer: Record<string, any>;
};
export declare function useResize(options?: UseResizeOptions): {
/**
* @deprecated Will be removed in next major version, please directly use `observeResize` from imports.
*/
observeResize: typeof observeResize;
/**
* @deprecated Will be removed in next major version, please directly use `unobserveResize` from imports.
*/
unobserveResize: typeof unobserveResize;
unobserve: () => void;
};
export declare interface UseResizeOptions {
/**
* 作用的目标元素的 Ref
*/
target?: MaybeRef<HTMLElement | null | undefined>;
onResize?: ResizeHandler;
}
export declare function useRtl(): {
isRtl: Ref<boolean, boolean>;
};
/**
* 获取用于记录 `setInterval` 返回值的对象,记录的定时器会在作用域消除时自动清理
*/
export declare function useSetInterval(): {
timer: Record<string, any>;
};
/**
* 获取用于记录 `setTimeout` 返回值的对象,记录的定时器会在作用域消除时自动清理
*/
export declare function useSetTimeout(): {
timer: Record<string, any>;
};
export declare function useTheme(wrapper?: MaybeElement): {
theme: Ref<string | undefined, string | undefined>;
};
/**
* 获取三个分别用于记录 `setTimeout`、`setInterval` 和 `requestAnimationFrame` 返回值的对象
*
* 记录在这些对象上的定时器将会在作用域消除时自动清理
*/
export declare function useTimerRecord(): {
timeout: Record<string, any>;
interval: Record<string, any>;
raf: Record<string, any>;
};
export declare function useTriggerHandler(trigger: Ref<string>, currentVisible: Ref<boolean>, delay?: number): {
handleTriggerEnter: () => void;
handleTriggerLeave: () => void;
handleTriggerClick: () => void;
};
export declare function useVirtual<T extends Data = Data>(options: VirtualOptions<T>): {
wrapper: HTMLElement | Ref<HTMLElement | null | undefined, HTMLElement | null | undefined> | null;
indexMap: ComputedRef<Map<Key, number>>;
heightTree: ComputedRef<BITree>;
startIndex: ComputedRef<number>;
scrollOffset: Ref<number, number>;
visibleItems: ComputedRef<T[]>;
listStyle: ComputedRef< {
readonly height: string | undefined;
readonly minHeight: string | undefined;
readonly boxSizing: "content-box";
}>;
itemsStyle: ComputedRef< {
transform: string;
}>;
handleScroll: () => void;
handleResize: (entry: ResizeObserverEntry) => void;
handleItemResize: (key: Key, entry: ResizeObserverEntry) => void;
scrollTo: (top: number, behavior?: Behavior) => void;
scrollBy: (delta: number, behavior?: Behavior) => void;
scrollToKey: (key: Key, behavior?: Behavior) => void;
scrollToIndex: (index: number, behavior?: Behavior) => void;
ensureIndexInView: (index: number, behavior?: Behavior) => void;
ensureKeyInView: (key: Key, behavior?: Behavior) => void;
};
export { VirtualElement }
export declare interface VirtualOptions<T extends Data> {
/**
* 虚拟滚动的元素
*/
items: MaybeRef<T[]>;
/**
* 设置元素的最小高度
*/
itemSize: MaybeRef<number>;
/**
* 设置元素是否为固定高度,固定高度时不处理 resize
*/
itemFixed: MaybeRef<boolean>;
/**
* 元素的主键
*/
idKey: MaybeRef<keyof T>;
/**
* 默认停留在的元素的主键,未实现
*/
defaultKeyAt?: Key;
/**
* 设置前后的缓冲元素的个数
*/
bufferSize?: MaybeRef<number>;
/**
* 虚拟滚动的包围元素
*/
wrapper?: MaybeRef<HTMLElement | null | undefined>;
/**
* 是否自动观察 wrapper 缩放
*
* @default true
*/
autoResize?: boolean;
}
export declare function watchPauseable(...args: Parameters<typeof watch>): {
active: Readonly<Ref<boolean, boolean>>;
pause: () => void;
resume: () => void;
stop: WatchHandle;
};
export { }