@whitesev/pops
Version:
弹窗库
225 lines (224 loc) • 8.26 kB
TypeScript
import type { PopsAlertDetails } from "../components/alert/indexType";
import type { PopsConfirmDetails } from "../components/confirm/indexType";
import type { PopsDrawerDetails } from "../components/drawer/indexType";
import type { PopsFolderDetails } from "../components/folder/indexType";
import type { PopsIframeDetails } from "../components/iframe/indexType";
import type { PopsLoadingDetails } from "../components/loading/indexType";
import type { PopsPanelDetails } from "../components/panel/indexType";
import type { PopsPromptDetails } from "../components/prompt/indexType";
import type { PopsCommonConfig } from "../types/components";
import { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
import { PopsLayerCommonConfig } from "../types/layer";
import type { PopsAllDetails, PopsLayerMode, PopsMode, PopsType } from "../types/main";
export declare const PopsHandler: {
/**
* 创建shadow
*/
handlerShadow(config: Pick<PopsCommonConfig, "useShadowRoot">): {
$shadowContainer: HTMLDivElement;
$shadowRoot: ShadowRoot;
} | {
$shadowContainer: HTMLDivElement;
$shadowRoot: HTMLDivElement;
};
/**
* 处理初始化
* @param $shadowRoot 所在的shadowRoot
* @param cssText 添加进ShadowRoot的CSS
*/
handleInit($shadowRoot?: ShadowRoot | HTMLElement, cssText?: string | string[]): void;
/**
* 处理遮罩层
*
* + 设置遮罩层的点击事件
* @param details 传递的配置
*/
handleMask(details?: {
type: "alert" | "confirm" | "prompt" | "loading" | "iframe" | "drawer" | "folder" | "panel";
guid: string;
config: Required<PopsAlertDetails> | Required<PopsLoadingDetails> | Required<PopsIframeDetails> | Required<PopsDrawerDetails> | Required<PopsPanelDetails> | Required<PopsFolderDetails>;
animElement: HTMLElement;
maskHTML: string;
}): {
maskElement: HTMLDivElement;
};
/**
* 处理获取元素
* @param animElement
* @param type
*/
handleQueryElement(animElement: HTMLDivElement, type: PopsType): {
/**
* 主元素
*/
popsElement: HTMLDivElement;
/**
* 确认按钮
*/
btnOkElement: HTMLDivElement;
/**
* 取消按钮
*/
btnCancelElement: HTMLDivElement;
/**
* 其它按钮
*/
btnOtherElement: HTMLDivElement;
/**
* 标题元素
*/
titleElement: HTMLDivElement;
/**
* 输入框元素
*/
inputElement: HTMLInputElement | HTMLTextAreaElement;
/**
* 顶部按钮控制层元素
*/
headerControlsElement: HTMLDivElement;
/**
* iframe元素
*/
iframeElement: HTMLIFrameElement;
/**
* 加载中元素
*/
loadingElement: HTMLDivElement;
/**
* 内容元素
*/
contentElement: HTMLDivElement;
/**
* 内容侧边栏容器元素
*/
contentAsideElement: HTMLDivElement;
/**
* 内容主要区域容器元素
*/
contentSectionContainerElement: HTMLDivElement;
/**
* 内容加载中元素
*/
contentLoadingElement: HTMLDivElement;
/**
* 顶部缩小按钮
*/
headerMinBtnElement: HTMLDivElement;
/**
* 顶部放大按钮
*/
headerMaxBtnElement: HTMLDivElement;
/**
* 顶部恢复原样按钮
*/
headerMiseBtnElement: HTMLDivElement;
/**
* 顶部关闭按钮
*/
headerCloseBtnElement: HTMLDivElement;
/**
* 文件夹列表元素
*/
folderListElement: HTMLDivElement;
/**
* 文件夹列表顶部元素
*/
folderListHeaderElement: HTMLDivElement;
/**
* 文件夹列表行元素
*/
folderListHeaderRowElement: HTMLTableRowElement;
/**
* 文件夹列表tbody元素
*/
folderListBodyElement: HTMLTableElement;
/**
* 文件夹列表primary元素
*/
folderFileListBreadcrumbPrimaryElement: HTMLDivElement;
/**
* 文件夹排序按钮-文件名
*/
folderListSortFileNameElement: HTMLDivElement;
/**
* 文件夹排序按钮-修改时间
*/
folderListSortLatestTimeElement: HTMLDivElement;
/**
* 文件夹排序按钮-文件大小
*/
folderListSortFileSizeElement: HTMLDivElement;
};
/**
* 获取事件配置
* @param guid
* @param $shadowContainer
* @param $shadowRoot
* @param mode 当前弹窗类型
* @param animElement 动画层
* @param popsElement 主元素
* @param maskElement 遮罩层
* @param config 当前配置
*/
handleEventDetails(guid: string, $shadowContainer: HTMLDivElement, $shadowRoot: ShadowRoot | HTMLElement, mode: PopsLayerMode, animElement: HTMLDivElement, popsElement: HTMLDivElement, maskElement: HTMLDivElement, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails): PopsEventDetails;
/**
* 获取loading的事件配置
* @param guid
* @param mode 当前弹窗类型
* @param animElement 动画层
* @param popsElement 主元素
* @param maskElement 遮罩层
* @param config 当前配置
*/
handleLoadingEventDetails(guid: string, mode: "loading", animElement: HTMLDivElement, popsElement: HTMLDivElement, maskElement: HTMLDivElement, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails): Omit<PopsEventDetails, "$shadowContainer" | "$shadowRoot">;
/**
* 处理返回的配置,针对popsHandler.handleEventDetails
*/
handleResultDetails<T extends unknown>(details: T): Omit<T, "type" | "function">;
/**
* 处理点击事件
* @param type 当前按钮类型
* @param $btn 按钮元素
* @param eventDetails 事件配置,由popsHandler.handleEventDetails创建的
* @param callback 点击回调
*/
handleClickEvent(type: "cancel" | "close" | "ok" | "other", $btn: HTMLElement, eventDetails: PopsEventDetails, callback: (details: PopsHandlerEventDetails, event: PointerEvent | MouseEvent) => void): void;
/**
* 全局监听键盘事件
* @param keyName 键名|键值
* @param otherKeyList 组合按键,数组类型,包含ctrl、shift、alt和meta(win键或mac的cmd键)
* @param callback 回调函数
*/
handleKeyboardEvent(keyName: string | number, otherKeyList: string[] | undefined, callback: (event: KeyboardEvent) => void): {
removeKeyboardEvent(): void;
};
/**
* 处理prompt的点击事件
* @param type 触发事件类型
* @param inputElement 输入框
* @param $btn 按钮元素
* @param eventDetails 事件配置,由popsHandler.handleEventDetails创建的
* @param callback 点击回调
*/
handlePromptClickEvent(type: "ok" | "close" | "cancel" | "other", inputElement: HTMLInputElement | HTMLTextAreaElement, $btn: HTMLElement, eventDetails: PopsEventDetails, callback: (details: PopsEventDetails & {
type: any;
text: string;
}, event: MouseEvent | PointerEvent) => void): void;
/**
* 把配置的z-index配置转为数字
* @param zIndex
*/
handleZIndex(zIndex: number | (() => number)): number;
/**
* 处理config.only
* @param type 当前弹窗类型
* @param config 配置
*/
handleOnly<T extends Required<PopsAllDetails[keyof PopsAllDetails]>>(type: PopsMode, config: T): T;
/**
* 处理把已创建的元素保存到内部环境中
* @param type 当前弹窗类型
* @param value
*/
handlePush(type: PopsLayerMode, value: PopsLayerCommonConfig): void;
};