@ohu-mobile/core/lib/Popup/Popup.d.ts

Mobile UI Toolkit

import type { PopupTransformOrigin, PopupPosition, PopupAnimateType, PopupEvents, PopupProps } from './types';
import { ClassOptions } from '../_utils/classHelper';
import { CSSProps } from '../types';
import type { CSSProperties } from 'vue';
interface PopupData {
    wrapperVisible: boolean;
    documentVisible: boolean;
    docEl: HTMLElement | null;
    docRect: {
        width: number;
        height: number;
    } | null;
    anchorEl: HTMLElement | null;
    docPos: {
        top: number;
        bottom: number;
        left: number;
        right: number;
        transformOrigin: string;
    } | null;
    anchorRect: DOMRect | ClientRect | null;
    maskZIndex: number;
    documentZIndex: number;
    touchData: {
        scrollY: number;
        pageY: number;
        scrollEl: HTMLElement | null;
        maxHeight: number;
    };
    rootStyle: CSSProps;
}
export declare const popupProps: {
    visible: BooleanConstructor;
    anchor: import("vue").PropOptions<HTMLElement | (() => HTMLElement) | undefined>;
    transformOrigin: import("vue").PropOptions<PopupTransformOrigin | undefined>;
    marginThreshold: import("vue").PropOptions<number>;
    edgeDetect: import("vue").PropOptions<boolean>;
    lockScroll: import("vue").PropOptions<boolean>;
    position: import("vue").PropOptions<PopupPosition>;
    mask: import("vue").PropOptions<boolean>;
    maskFrosted: import("vue").PropOptions<boolean>;
    maskClosable: import("vue").PropOptions<boolean>;
    maskAnimate: import("vue").PropOptions<"none" | "mask-fade">;
    partialMask: import("vue").PropOptions<"top" | "bottom" | undefined>;
    closeOnMaskTouched: import("vue").PropOptions<boolean>;
    fullscreen: import("vue").PropOptions<boolean>;
    animate: import("vue").PropOptions<PopupAnimateType>;
    targetStyle: import("vue").PropOptions<CSSProperties | undefined>;
    targetClass: import("vue").PropOptions<ClassOptions | undefined>;
    scrollBody: import("vue").PropOptions<boolean>;
    tapThrough: import("vue").PropOptions<boolean>;
    zIndex: NumberConstructor;
    round: import("vue").PropOptions<boolean>;
    hideOnDeactivated: import("vue").PropOptions<boolean>;
};
type PopupInnerProps = {
    isAnchorMode: boolean;
    documentTransition: string;
    documentClass: string[];
    open: () => void;
    close: () => void;
    startScroll: () => void;
    stopScroll: () => void;
    computeDocAndAnchorRect: () => void;
    computeDocumentPosition: () => {
        top: number;
        left: number;
        bottom: number;
        right: number;
        transformOrigin: string;
    };
    onMaskClick: (e: Event) => void;
    onWrapperTouchstart: (e: TouchEvent) => void;
    onWrapperTouchmove: (e: TouchEvent) => void;
    onWrapperTouchend: (e: TouchEvent) => void;
    onDocumentTouch: (e: TouchEvent) => void;
    onBeforeDocumentEnter: () => void;
    onAfterDocumentLeave: () => void;
    onDocumentAfterEnter: () => void;
    onDocumentEnter: (doc: Element) => void;
    onDocumentClick: (e: Event) => void;
    getDocumentStyle: () => CSSProperties;
    renderMask: () => JSX.Element;
    renderDocument: () => JSX.Element;
};
export declare const POPUP_EVENT = "visibleChange";
declare const Popup: import("vue-tsx-support")._TsxComponentV3<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>> & PopupInnerProps & import("../_utils/defineComponent").OhuComponentInnerProps & PopupData & {
    visible: boolean;
    anchor: HTMLElement | (() => HTMLElement) | undefined;
    transformOrigin: PopupTransformOrigin | undefined;
    marginThreshold: number;
    edgeDetect: boolean;
    lockScroll: boolean;
    position: PopupPosition;
    mask: boolean;
    maskFrosted: boolean;
    maskClosable: boolean;
    maskAnimate: "none" | "mask-fade";
    partialMask: "top" | "bottom" | undefined;
    closeOnMaskTouched: boolean;
    fullscreen: boolean;
    animate: PopupAnimateType;
    targetStyle: CSSProperties | undefined;
    targetClass: ClassOptions | undefined;
    scrollBody: boolean;
    tapThrough: boolean;
    zIndex: number;
    round: boolean;
    hideOnDeactivated: boolean;
}, {}, {} & {
    anchor?: HTMLElement | (() => HTMLElement) | undefined;
    round?: boolean | undefined;
    position?: PopupPosition | undefined;
    animate?: PopupAnimateType | undefined;
    visible?: boolean | undefined;
    transformOrigin?: PopupTransformOrigin | undefined;
    marginThreshold?: number | undefined;
    edgeDetect?: boolean | undefined;
    lockScroll?: boolean | undefined;
    mask?: boolean | undefined;
    maskFrosted?: boolean | undefined;
    maskClosable?: boolean | undefined;
    maskAnimate?: "none" | "mask-fade" | undefined;
    partialMask?: "top" | "bottom" | undefined;
    closeOnMaskTouched?: boolean | undefined;
    fullscreen?: boolean | undefined;
    targetStyle?: CSSProperties | undefined;
    targetClass?: ClassOptions | undefined;
    scrollBody?: boolean | undefined;
    tapThrough?: boolean | undefined;
    zIndex?: number | undefined;
    hideOnDeactivated?: boolean | undefined;
} & PopupProps, PopupEvents, {}, {}>;
export default Popup;