UNPKG

@whitesev/pops

Version:

弹窗库

323 lines (322 loc) 23.3 kB
import { PopsLayerMode } from "./types/main"; import type { PopsAlertDetails } from "./components/alert/indexType"; import type { PopsConfirmDetails } from "./components/confirm/indexType"; import type { PopsLayerCommonConfig } from "./types/layer"; import type { PopsPromptDetails } from "./components/prompt/indexType"; import type { PopsLoadingDetails } from "./components/loading/indexType"; import type { PopsIframeDetails } from "./components/iframe/indexType"; import type { PopsToolTipDetails } from "./components/tooltip/indexType"; import type { PopsDrawerDetails } from "./components/drawer/indexType"; import type { PopsFolderDetails } from "./components/folder/indexType"; import type { PopsEventDetails } from "./types/event"; import type { PopsPanelDetails } from "./components/panel/indexType"; import type { PopsRightClickMenuDetails } from "./components/rightClickMenu/indexType"; import type { PopsIcon } from "./types/icon"; import type { PopsSearchSuggestionDetails, PopsSearchSuggestionResult } from "./components/searchSuggestion/indexType"; import { type PopsTooltipResult } from "./components/tooltip"; declare class Pops { /** 配置 */ config: { /** 版本号 */ version: string; cssText: { /** 主CSS */ index: string; /** 九宫格位置CSS */ ninePalaceGridPosition: string; /** 滚动条CSS */ scrollbar: string; /** 按钮CSS */ button: string; /** 通用的CSS */ common: string; /** 动画 */ anim: string; /** pops.alert */ alertCSS: string; /** pops.cponfirm */ confirmCSS: string; /** pops.prompt */ promptCSS: string; /** pops.loading */ loadingCSS: string; /** pops.iframe */ iframeCSS: string; /** pops.tooltip */ tooltipCSS: string; /** pops.drawer */ drawerCSS: string; /** pops.folder */ folderCSS: string; /** pops.folder */ panelCSS: string; /** pops.rightClickMenu */ rightClickMenu: string; }; /** icon图标的svg代码 */ iconSVG: { [key in PopsIcon]: string; }; /** 当前已配置的动画@keyframes名字映射(初始化时生成) */ animation: { [key: string]: CSSKeyframesRule; }; /** 是否初始化 */ isInit: boolean; /** 存储已创建的元素 */ layer: { [key in PopsLayerMode]: PopsLayerCommonConfig[]; }; /** 禁止滚动 */ forbiddenScroll: { event(event: Event): boolean; }; /** pops使用的工具类 */ Utils: { isWin(target: any): boolean; isDOM(target: any): boolean; delete(target: any, propName: any): void; assign<T1, T2 extends object, T3 extends boolean>(target: T1, source: T2, isAdd?: T3 | undefined): T3 extends true ? T1 & T2 : T1; getRandomGUID(): string; parseTextToDOM<R extends HTMLElement>(elementString: string): R; contains(target: any): boolean; contains(context: any, target?: any): boolean; formatTime(text?: string | number | Date, formatType?: string): string; formatTime(text?: string | number | Date, formatType?: "yyyy-MM-dd HH:mm:ss" | "yyyy/MM/dd HH:mm:ss" | "yyyy_MM_dd_HH_mm_ss" | "yyyy\u5E74MM\u6708dd\u65E5 HH\u65F6mm\u5206ss\u79D2" | "yyyy\u5E74MM\u6708dd\u65E5 hh:mm:ss" | "yyyy\u5E74MM\u6708dd\u65E5 HH:mm:ss" | "yyyy-MM-dd" | "yyyyMMdd" | "HH:mm:ss"): string; formatByteToSize<T extends boolean>(byteSize: number | string, addType?: T | undefined): T extends true ? string : number; AnyTouch: () => typeof import("any-touch").default; }; /** pops使用的DOM工具类 */ DOMUtils: { getAnimationEndNameList(): string[]; getTransitionEndNameList(): string[]; offset(element: HTMLElement, calcScroll?: boolean): DOMRect; width(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number; height(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number; outerWidth(element: HTMLElement | string | Window | Document, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number; outerHeight(element: HTMLElement | string | Window, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number; addClassName(element: HTMLElement, className: string): void; removeClassName(element: HTMLElement, className: string): void; containsClassName(element: HTMLElement, className: string): boolean; css(element: HTMLElement | string, property: keyof CSSStyleDeclaration): string; css(element: HTMLElement | string, property: string): string; css(element: HTMLElement | string, property: keyof CSSStyleDeclaration & string, value: string | number): string; css(element: HTMLElement | string, property: { [P in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[P]; } | { [key: string]: string | number; }): string; createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, property?: ({ [P in keyof HTMLElementTagNameMap[K]]?: HTMLElementTagNameMap[K][P] extends string | boolean | number ? HTMLElementTagNameMap[K][P] : never; } & { [key: string]: any; }) | string, attributes?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsCreateElementAttributesMap): HTMLElementTagNameMap[K]; getTextBoundingRect(input: HTMLInputElement | HTMLTextAreaElement, selectionStart: number | string, selectionEnd: number | string, debug: boolean): DOMRect; cssHide(ele: Element | null, isImportant?: boolean): void; cssShow(ele: Element | null): void; parseHTML<T1 extends boolean, T2 extends boolean>(html: string, useParser?: T1 | undefined, isComplete?: T2 | undefined): import("./types/PopsDOMUtilsEventType").ParseHTMLReturnType<T1, T2>; append(element: Element | Node | ShadowRoot | HTMLElement | string, content: HTMLElement | string | (HTMLElement | string | Element)[] | NodeList): void; appendHead($ele: HTMLElement): void; appendBody($ele: HTMLElement): void; isShow(element: HTMLElement): boolean; showElement($ele: HTMLElement, ownParent?: Node): { cloneNode: HTMLElement; recovery(): void; }; getStyleValue(element: HTMLElement | CSSStyleDeclaration, styleName: string): number; before(element: HTMLElement | Element | string, content: HTMLElement | string): void; after(element: HTMLElement | Element | string, content: HTMLElement | string): void; on(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], callback: (event: Event) => void, option?: boolean | AddEventListenerOptions): void; on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], callback: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions): void; on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void; on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], selector: string | undefined | null, callback: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions): void; on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], selector: string | undefined | null, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void; on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string, selector: string | undefined | null, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void; off(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], callback?: (event: Event) => void, option?: boolean | AddEventListenerOptions, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void; off<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], callback?: ((event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void) | undefined, option?: boolean | AddEventListenerOptions, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void; off<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string, callback?: ((event: T) => void) | undefined, option?: boolean | AddEventListenerOptions, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void; off<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], selector?: string | undefined, callback?: ((event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void) | undefined, option?: boolean | AddEventListenerOptions, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void; off<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], selector?: string | undefined, callback?: ((event: T) => void) | undefined, option?: boolean | AddEventListenerOptions, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void; offAll(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType?: string): void; offAll(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType?: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType | import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType[]): void; ready<T extends Function>(callback: T): void; trigger(element: HTMLElement | string | NodeList | any[] | Window | Document, eventType: string | string[], details?: object, useDispatchToTriggerEvent?: boolean): void; trigger(element: HTMLElement | string | NodeList | any[] | Window | Document, eventType: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType | import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType[], details?: object, useDispatchToTriggerEvent?: boolean): void; click(element: HTMLElement | string | Window, handler?: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["click"]) => void, details?: any, useDispatchToTriggerEvent?: boolean): void; blur(element: HTMLElement | string | Window, handler?: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["blur"]) => void, details?: object, useDispatchToTriggerEvent?: boolean): void; focus(element: HTMLElement | string | Window, handler?: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["focus"]) => void, details?: object, useDispatchToTriggerEvent?: boolean): void; hover(element: HTMLElement | string, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["hover"]) => void, option?: boolean | AddEventListenerOptions): void; keyup(target: HTMLElement | string | Window | typeof globalThis, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["keyup"]) => void, option?: boolean | AddEventListenerOptions): void; keydown(target: HTMLElement | Window | typeof globalThis | string, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["keydown"]) => void, option?: boolean | AddEventListenerOptions): void; keypress(target: HTMLElement | Window | typeof globalThis | string, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["keypress"]) => void, option?: boolean | AddEventListenerOptions): void; preventEvent(event: Event): boolean; preventEvent(element: HTMLElement, eventNameList?: string | string[], capture?: boolean): boolean; }; /** pops创建的实例使用的工具类 */ InstanceUtils: { getMaxZIndexNodeInfo(deviation?: number, target?: Element | ShadowRoot | Document, ignoreCallBack?: ($ele: Element | HTMLElement | ShadowRoot) => boolean | void): { node: Element; zIndex: number; }; getPopsMaxZIndex(deviation?: number): { zIndex: number; animElement: HTMLDivElement | null; isOverMaxZIndex: boolean; }; getMaxZIndex(deviation?: number): number; getKeyFrames(sheet: CSSStyleSheet): {}; removeInstance(moreLayerConfigList: PopsLayerCommonConfig[][], guid: string, isAll?: boolean): PopsLayerCommonConfig[][]; hide(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): void; show(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): void; close(popsType: string, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): void; drag(moveElement: HTMLElement, options: { dragElement: HTMLElement; limit: boolean; triggerClick?: boolean; extraDistance: number; container?: Window | typeof globalThis | HTMLElement; moveCallBack?: (moveElement: HTMLElement, left: number, top: number) => void; endCallBack?: (moveElement: HTMLElement, left: number, top: number) => void; preventEvent?: (event: TouchEvent | PointerEvent) => boolean; }): void; sortElementListByProperty<T extends unknown, R>(getBeforeValueFun: (value: T) => R, getAfterValueFun: (value: T) => R, sortByDesc?: boolean): (after_obj: T, before_obj: T) => 1 | 0 | -1; }; /** pops处理float类型使用的工具类 */ MathFloatUtils: { isFloat(num: number): boolean; add(number1: number, number2: number): number; sub(number1: number, number2: number): string; division(number1: number, number2: number): number; }; /** pops.panel中用于处理各个类型的工具 */ panelHandleContentUtils: () => { asideULElement: HTMLUListElement; sectionContainerHeaderULElement: HTMLUListElement; sectionContainerULElement: HTMLUListElement; $el: { $content: HTMLDivElement; $contentAside: HTMLDivElement; $contentSectionContainer: HTMLDivElement; }; init(details: { config: Required<PopsPanelDetails>; $el: { $content: HTMLDivElement; $contentAside: HTMLDivElement; $contentSectionContainer: HTMLDivElement; }; }): void; clearContainer(): void; clearAsideItemIsVisited(): void; setAsideItemIsVisited(element: HTMLElement): void; setElementAttributes(element: HTMLElement, attributes?: any): void; setElementProps(element: HTMLElement, props?: any): void; setElementClassName(element: HTMLElement, className?: string | string[] | (() => string | string[])): void; createAsideItem(asideConfig: import("./components/panel/indexType").PopsPanelContentConfig): HTMLLIElement; createSectionContainerItem_switch(formConfig: import("./components/panel/switchType").PopsPanelSwitchDetails): HTMLLIElement; createSectionContainerItem_slider(formConfig: import("./components/panel/sliderType").PopsPanelSliderDetails): HTMLLIElement; createSectionContainerItem_slider_new(formConfig: import("./components/panel/sliderType").PopsPanelSliderDetails): HTMLLIElement; createSectionContainerItem_input(formConfig: import("./components/panel/inputType").PopsPanelInputDetails): HTMLLIElement; createSectionContainerItem_textarea(formConfig: import("./components/panel/textareaType").PopsPanelTextAreaDetails): HTMLLIElement; createSectionContainerItem_select(formConfig: import("./components/panel/selectType").PopsPanelSelectDetails<any>): HTMLLIElement; createSectionContainerItem_select_multiple_new(formConfig: import("./components/panel/selectMultipleType").PopsPanelSelectMultipleDetails<any>): HTMLLIElement; createSectionContainerItem_button(formConfig: import("./components/panel/buttonType").PopsPanelButtonDetails): HTMLLIElement; createSectionContainerItem_deepMenu(formConfig: import("./components/panel/deepMenuType").PopsPanelDeepMenuDetails): HTMLLIElement; createSectionContainerItem_own(formConfig: import("./components/panel/ownType").PopsPanelOwnDetails): HTMLLIElement; createSectionContainerItem(formConfig: import("./components/panel/indexType").PopsPanelFormsTotalDetails): HTMLLIElement | undefined; createSectionContainerItem_forms(formConfig: import("./components/panel/indexType").PopsPanelContentConfig | import("./components/panel/formsType").PopsPanelFormsDetails): void; uListContainerAddItem(formConfig: import("./components/panel/indexType").PopsPanelFormsTotalDetails, containerOptions: Omit<import("./components/panel/commonType").PopsPanelRightAsideContainerOptions, "target">): void; setAsideItemClickEvent(asideLiElement: HTMLElement, asideConfig: import("./components/panel/indexType").PopsPanelContentConfig): void; }; }; init(): void; /** * 释放原有的pops控制权 * @example * let pops = window.pops.noConflict() */ noConflict(): Pops; /** * 通过navigator.userAgent判断是否是手机访问 * @param userAgent */ isPhone(userAgent?: string): boolean; /** * 为所有弹窗设置全局属性 */ GlobalConfig: { config: { style?: string | (() => string) | null; zIndex?: (number | (() => number) | null) | (string | (() => string) | null); } & Partial<import("./types/components").PopsCommonConfig>; setGlobalConfig(config: { style?: string | (() => string) | null; zIndex?: (number | (() => number) | null) | (string | (() => string) | null); } & Partial<import("./types/components").PopsCommonConfig>): void; getGlobalConfig(): { style?: string | undefined; zIndex?: string | number | undefined; useShadowRoot?: boolean | undefined; class?: string | undefined; only?: boolean | undefined; width?: string | undefined; height?: string | undefined; position?: import("./types/position").PopsPosition | undefined; animation?: import("./types/animation").PopsAnimation | undefined; mask?: import("./types/mask").PopsMaskDetails | undefined; forbiddenScroll?: boolean | undefined; beforeAppendToPageCallBack?: void; }; }; /** * 普通信息框 * @param details 配置 */ alert: (details: PopsAlertDetails) => PopsEventDetails; /** * 询问框 * @param details 配置 */ confirm: (details: PopsConfirmDetails) => PopsEventDetails; /** * 输入框 * @param details 配置 */ prompt: (details: PopsPromptDetails) => PopsEventDetails; /** * 加载层 * @param details 配置 */ loading: (details: PopsLoadingDetails) => Omit<PopsEventDetails, "$shadowContainer" | "$shadowRoot">; /** * iframe层 * @param details 配置 */ iframe: (details: PopsIframeDetails) => PopsEventDetails & { iframeElement: HTMLIFrameElement; }; /** * 提示框 * @param details 配置 */ tooltip: <T extends PopsToolTipDetails = PopsToolTipDetails>(details: T) => PopsTooltipResult<T>; /** * 抽屉 * @param details 配置 */ drawer: (details: PopsDrawerDetails) => PopsEventDetails; /** * 文件夹 * @param details 配置 */ folder: (details: PopsFolderDetails) => PopsEventDetails; /** * 配置面板 * @param details 配置 */ panel: (details: PopsPanelDetails) => PopsEventDetails; /** * 右键菜单 * @param details 配置 */ rightClickMenu: (details: PopsRightClickMenuDetails) => PopsEventDetails; /** * 搜索建议 * @param details 配置 */ searchSuggestion: <T = any>(details: PopsSearchSuggestionDetails<T>) => PopsSearchSuggestionResult<T>; } declare const pops: Pops; export { pops };