@whitesev/pops 1.0.0

package/dist/types/src/components/confirm/index.d.ts

@@ -0,0 +1,4 @@
+import type { PopsConfirmDetails } from "./types";
+export declare class PopsConfirm {
+    constructor(details: PopsConfirmDetails);
+}

package/dist/types/src/components/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export declare class PopsDrawer {
+}

package/dist/types/src/components/folder/index.d.ts

@@ -0,0 +1,2 @@
+export declare class PopsFolder {
+}

package/dist/types/src/components/iframe/index.d.ts

@@ -0,0 +1,2 @@
+export declare class PopsIframe {
+}

package/dist/types/src/components/loading/index.d.ts

@@ -0,0 +1,2 @@
+export declare class PopsLoading {
+}

package/dist/types/src/components/panel/index.d.ts

@@ -0,0 +1,2 @@
+export declare class PopsPanel {
+}

package/dist/types/src/components/prompt/index.d.ts

@@ -0,0 +1,2 @@
+export declare class PopsPrompt {
+}

package/dist/types/src/components/rightClickMenu/index.d.ts

@@ -0,0 +1,2 @@
+export declare class PopsRightClickMenu {
+}

package/dist/types/src/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export declare class PopsTooltip {
+}

package/dist/types/src/handler/PopsElementHandler.d.ts

@@ -0,0 +1,54 @@
+import type { PopsSupportAnim, PopsSupportBottomBtn, PopsSupportContent, PopsSupportHeaderTitle, PopsTypeSupportAnim, PopsTypeSupportBottomBtn, PopsTypeSupportContent, PopsTypeSupportHeaderTitle } from "../types/main";
+export declare const PopsElementHandler: {
+    /**
+     * 获取遮罩层HTML
+     * @param guid
+     * @param zIndex z-index
+     * @param style
+     */
+    getMaskHTML(guid: string, zIndex?: number, style?: string): string;
+    /**
+     * 获取动画层HTML
+     * @param guid
+     * @param type
+     * @param config
+     * @param html
+     * @param bottomBtnHTML
+     */
+    getAnimHTML(guid: string, type: PopsTypeSupportAnim, config: PopsSupportAnim[keyof PopsSupportAnim], html?: string, bottomBtnHTML?: string): string;
+    /**
+     * 获取顶部按钮层HTML
+     * @param type
+     * @param config
+     */
+    getHeaderBtnHTML(type: PopsTypeSupportHeaderTitle, config: PopsSupportHeaderTitle[keyof PopsSupportHeaderTitle]): string;
+    /**
+     * 获取底部按钮层HTML
+     * @param type
+     * @param config
+     */
+    getBottomBtnHTML(type: PopsTypeSupportBottomBtn, config: PopsSupportBottomBtn[keyof PopsSupportBottomBtn]): string;
+    /**
+     * 获取标题style
+     * @param type
+     * @param config
+     */
+    getHeaderStyle(type: PopsTypeSupportHeaderTitle, config: PopsSupportHeaderTitle[keyof PopsSupportHeaderTitle]): {
+        headerStyle: string;
+        headerPStyle: string;
+    };
+    /**
+     * 获取内容style
+     * @param type
+     * @param config
+     */
+    getContentStyle(type: PopsTypeSupportContent, config: PopsSupportContent[keyof PopsSupportContent]): {
+        contentStyle: string;
+        contentPStyle: string;
+    };
+    /**
+     * 将html转换成元素
+     * @param html
+     */
+    parseElement<T extends HTMLElement>(html: string): T;
+};

package/dist/types/src/handler/PopsHandler.d.ts

@@ -0,0 +1,210 @@
+import type { PopsAlertDetails } from "../components/alert/types";
+import type { PopsConfirmDetails } from "../components/confirm/types";
+import type { PopsDrawerDetails } from "../components/drawer/types";
+import type { PopsFolderDetails } from "../components/folder/types";
+import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsLoadingDetails } from "../components/loading/types";
+import type { PopsPanelDetails } from "../components/panel/types";
+import type { PopsPromptDetails } from "../components/prompt/types";
+import type { PopsLayerMode, PopsMode, PopsType } from "../types/main";
+export declare const PopsHandler: {
+    /**
+     * 创建shadow
+     */
+    handlerShadow(): {
+        $shadowContainer: HTMLDivElement;
+        $shadowRoot: ShadowRoot;
+    };
+    /**
+     * 处理初始化
+     * @param $shadowRoot 所在的shadowRoot
+     * @param cssText 添加进ShadowRoot的CSS
+     */
+    handleInit($shadowRoot: ShadowRoot, cssText: string | string[]): void;
+    /**
+     * 处理遮罩层
+     * @param details 传递的配置
+     */
+    handleMask(details?: {
+        type: "alert" | "confirm" | "prompt" | "loading" | "iframe" | "drawer" | "folder" | "panel";
+        guid: string;
+        config: Required<PopsAlertDetails>;
+        animElement: HTMLElement;
+        maskHTML: string;
+    }): {
+        maskElement: HTMLDivElement;
+    };
+    /**
+     * 处理获取元素
+     * @param {HTMLDivElement} animElement
+     * @param type
+     */
+    handleQueryElement(animElement: HTMLDivElement, type: PopsType): {
+        /**
+         * 主元素
+         */
+        popsElement: HTMLDivElement | null;
+        /**
+         * 确认按钮
+         */
+        btnOkElement: HTMLDivElement | null;
+        /**
+         * 取消按钮
+         */
+        btnCancelElement: HTMLDivElement | null;
+        /**
+         * 其它按钮
+         */
+        btnOtherElement: HTMLDivElement | null;
+        /**
+         * 标题元素
+         */
+        titleElement: HTMLDivElement | null;
+        /**
+         * 输入框元素
+         */
+        inputElement: HTMLInputElement | HTMLTextAreaElement | null;
+        /**
+         * 顶部按钮控制层元素
+         */
+        headerControlsElement: HTMLDivElement | null;
+        /**
+         * iframe元素
+         */
+        iframeElement: HTMLIFrameElement | null;
+        /**
+         * 加载中元素
+         */
+        loadingElement: HTMLDivElement | null;
+        /**
+         * 内容元素
+         */
+        contentElement: HTMLDivElement | null;
+        /**
+         * 内容侧边栏容器元素
+         */
+        contentAsideElement: HTMLDivElement | null;
+        /**
+         * 内容主要区域容器元素
+         */
+        contentSectionContainerElement: HTMLDivElement | null;
+        /**
+         * 内容加载中元素
+         */
+        contentLoadingElement: HTMLDivElement | null;
+        /**
+         * 顶部缩小按钮
+         */
+        headerMinBtnElement: HTMLDivElement | null;
+        /**
+         * 顶部放大按钮
+         */
+        headerMaxBtnElement: HTMLDivElement | null;
+        /**
+         * 顶部恢复原样按钮
+         */
+        headerMiseBtnElement: HTMLDivElement | null;
+        /**
+         * 顶部关闭按钮
+         */
+        headerCloseBtnElement: HTMLDivElement | null;
+        /**
+         * 文件夹列表元素
+         */
+        folderListElement: HTMLDivElement | null;
+        /**
+         * 文件夹列表顶部元素
+         */
+        folderListHeaderElement: HTMLDivElement | null;
+        /**
+         * 文件夹列表行元素
+         */
+        folderListHeaderRowElement: HTMLTableRowElement | null;
+        /**
+         * 文件夹列表tbody元素
+         */
+        folderListBodyElement: HTMLTableElement | null;
+        /**
+         * 文件夹列表primary元素
+         */
+        folderFileListBreadcrumbPrimaryElement: HTMLDivElement | null;
+        /**
+         * 文件夹排序按钮-文件名
+         */
+        folderListSortFileNameElement: HTMLDivElement | null;
+        /**
+         * 文件夹排序按钮-修改时间
+         */
+        folderListSortLatestTimeElement: HTMLDivElement | null;
+        /**
+         * 文件夹排序按钮-文件大小
+         */
+        folderListSortFileSizeElement: HTMLDivElement | null;
+    };
+    /**
+     * 获取事件配置
+     * @param guid
+     * @param $shadowContainer
+     * @param $shadowRoot
+     * @param mode 当前弹窗类型
+     * @param animElement 动画层
+     * @param popsElement 主元素
+     * @param maskElement 遮罩层
+     * @param config 当前配置
+     */
+    handleEventDetails(guid: string, $shadowContainer: HTMLDivElement, $shadowRoot: ShadowRoot, mode: PopsLayerMode, animElement: HTMLDivElement, popsElement: HTMLDivElement, maskElement: HTMLDivElement, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails): PopsEventDetails;
+    /**
+     * 处理返回的配置，针对popsHandler.handleEventDetails
+     */
+    handleResultDetails(details: any): {
+        $shadowContainer: HTMLDivElement;
+        $shadowRoot: ShadowRoot;
+        animElement: HTMLElement;
+        popsElement: HTMLElement;
+        maskElement: HTMLElement;
+        close: () => void;
+        hide: () => void;
+        show: () => void;
+    };
+    /**
+     * 处理点击事件
+     * @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 inputElement 输入框
+     * @param  $btn 按钮元素
+     * @param type 触发事件类型
+     * @param event 事件配置，由popsHandler.handleEventDetails创建的
+     * @param callback 点击回调
+     */
+    handlePromptClickEvent(inputElement: HTMLInputElement, $btn: HTMLElement, type: "ok" | "close", event: MouseEvent | PointerEvent, callback: (event: (MouseEvent | PointerEvent) & {
+        type: any;
+        text: string;
+    }) => void): void;
+    /**
+     * 处理config.only
+     * @param type 当前弹窗类型
+     * @param config 配置
+     */
+    handleOnly<T extends unknown>(type: PopsMode, config: T): T;
+    /**
+     * 处理把已创建的元素保存到内部环境中
+     * @param type 当前弹窗类型
+     * @param value
+     */
+    handlePush(type: PopsLayerMode, value: PopsLayerCommonConfig): void;
+};

package/dist/types/src/utils/AnyTouch.d.ts

@@ -0,0 +1,17 @@
+export function AnyTouch(): {
+    (el: any, options: any): this;
+    STATE_POSSIBLE: number;
+    STATE_START: number;
+    STATE_MOVE: number;
+    STATE_END: number;
+    STATE_CANCELLED: number;
+    STATE_FAILED: number;
+    STATE_RECOGNIZED: number;
+    tap: (at: any, options: any) => any;
+    pan: (at: any, options: any) => any;
+    swipe: (at: any, options: any) => any;
+    press: (at: any, options: any) => any;
+    rotate: (at: any, options: any) => any;
+    pinch: (at: any, options: any) => any;
+    doubletap: (at: any) => any;
+};

package/dist/types/src/utils/PopsDOMUtils.d.ts

@@ -0,0 +1,278 @@
+import { PopsDOMUtilsEvent } from "./PopsDOMUtilsEvent";
+declare class PopsDOMUtils extends PopsDOMUtilsEvent {
+    /** 获取 animationend 在各个浏览器的兼容名 */
+    getAnimationEndNameList(): string[];
+    /** 获取 transitionend 在各个浏览器的兼容名 */
+    getTransitionEndNameList(): string[];
+    /**
+     * 实现jQuery中的$().offset();
+     * @param {HTMLElement} element
+     * @returns
+     */
+    offset(element: HTMLElement): DOMRect;
+    /**
+     * 获取元素的宽度
+     * @param element 要获取宽度的元素
+     * @param isShow 是否已进行isShow，避免爆堆栈
+     * @returns 元素的宽度，单位为像素
+     * @example
+     * // 获取元素a.xx的宽度
+     * DOMUtils.width(document.querySelector("a.xx"))
+     * DOMUtils.width("a.xx")
+     * > 100
+     * // 获取window的宽度
+     * DOMUtils.width(window)
+     * > 400
+     * @example
+     * // 设置元素a.xx的宽度为200
+     * DOMUtils.width(document.querySelector("a.xx"),200)
+     * DOMUtils.width("a.xx",200)
+     */
+    width(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean): number;
+    /**
+     * 获取元素的高度
+     * @param element 要获取高度的元素
+     * @param isShow 是否已进行isShow，避免爆堆栈
+     * @returns 元素的高度，单位为像素
+     * @example
+     * // 获取元素a.xx的高度
+     * DOMUtils.height(document.querySelector("a.xx"))
+     * DOMUtils.height("a.xx")
+     * > 100
+     * // 获取window的高度
+     * DOMUtils.height(window)
+     * > 700
+     * @example
+     * // 设置元素a.xx的高度为200
+     * DOMUtils.height(document.querySelector("a.xx"),200)
+     * DOMUtils.height("a.xx",200)
+     */
+    height(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean): number;
+    /**
+     * 获取元素的外部宽度（包括边框和外边距）
+     * @param {HTMLElement|string} element 要获取外部宽度的元素
+     * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
+     * @returns {number} 元素的外部宽度，单位为像素
+     * @example
+     * // 获取元素a.xx的外部宽度
+     * DOMUtils.outerWidth(document.querySelector("a.xx"))
+     * DOMUtils.outerWidth("a.xx")
+     * > 100
+     * // 获取window的外部宽度
+     * DOMUtils.outerWidth(window)
+     * > 400
+     */
+    outerWidth(element: HTMLElement | string | Window | Document, isShow?: boolean): number;
+    /**
+     * 获取元素的外部高度（包括边框和外边距）
+     * @param {HTMLElement|string} element 要获取外部高度的元素
+     * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
+     * @returns {number} 元素的外部高度，单位为像素
+     * @example
+     * // 获取元素a.xx的外部高度
+     * DOMUtils.outerHeight(document.querySelector("a.xx"))
+     * DOMUtils.outerHeight("a.xx")
+     * > 100
+     * // 获取window的外部高度
+     * DOMUtils.outerHeight(window)
+     * > 700
+     */
+    outerHeight(element: HTMLElement | string | Window, isShow?: boolean): number;
+    /**
+     * 添加className
+     * @param element 目标元素
+     * @param className className属性
+     */
+    addClassName(element: HTMLElement, className: string): void;
+    /**
+     * 删除className
+     * @param element 目标元素
+     * @param className className属性
+     */
+    removeClassName(element: HTMLElement, className: string): void;
+    /**
+     * 判断元素是否包含某个className
+     * @param element 目标元素
+     * @param className className属性
+     */
+    containsClassName(element: HTMLElement, className: string): boolean;
+    /**
+     * 获取元素的样式属性值
+     * @param element 目标元素
+     * @param property 样式属性名或包含多个属性名和属性值的对象
+     * @example
+     * // 获取元素a.xx的CSS属性display
+     * DOMUtils.css(document.querySelector("a.xx"),"display");
+     * DOMUtils.css("a.xx","display");
+     * > "none"
+     * */
+    css(element: HTMLElement | string, property: keyof CSSStyleDeclaration): string;
+    /**
+     * 获取元素的样式属性值
+     * @param element 目标元素
+     * @param property 样式属性名或包含多个属性名和属性值的对象
+     * @example
+     * // 获取元素a.xx的CSS属性display
+     * DOMUtils.css(document.querySelector("a.xx"),"display");
+     * DOMUtils.css("a.xx","display");
+     * > "none"
+     * */
+    css(element: HTMLElement | string, property: string): string;
+    /**
+     * 设置元素的样式属性
+     * @param element 目标元素
+     * @param property 样式属性名或包含多个属性名和属性值的对象
+     * @param value 样式属性值
+     * @example
+     * // 设置元素a.xx的CSS属性display为block
+     * DOMUtils.css(document.querySelector("a.xx"),"display","block");
+     * DOMUtils.css(document.querySelector("a.xx"),"display","block !important");
+     * DOMUtils.css("a.xx","display","block");
+     * DOMUtils.css("a.xx","display","block !important");
+     * @example
+     * // 设置元素a.xx的CSS属性top为10px
+     * DOMUtils.css(document.querySelector("a.xx"),"top","10px");
+     * DOMUtils.css(document.querySelector("a.xx"),"top",10);
+     * */
+    css(element: HTMLElement | string, property: keyof CSSStyleDeclaration & string, value: string | number): string;
+    /**
+     * 设置元素的样式属性
+     * @param element 目标元素
+     * @param property 样式属性名或包含多个属性名和属性值的对象
+     * @param value 样式属性值
+     * @example
+     * // 设置元素a.xx的CSS属性display为block
+     * DOMUtils.css(document.querySelector("a.xx"),{ display: "block" }});
+     * DOMUtils.css(document.querySelector("a.xx"),{ display: "block !important" }});
+     * @example
+     * // 设置元素a.xx的CSS属性top为10px
+     * DOMUtils.css(document.querySelector("a.xx"),{ top: "10px" });
+     * DOMUtils.css(document.querySelector("a.xx"),{ top: 10 });
+     * */
+    css(element: HTMLElement | string, property: {
+        [P in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[P];
+    } | {
+        [key: string]: string | number;
+    }): string;
+    /**
+     * 创建元素
+     * @param tagName 标签名
+     * @param property 属性
+     * @param attributes 元素上的自定义属性
+     * @example
+     * // 创建一个DIV元素，且属性class为xxx
+     * DOMUtils.createElement("div",undefined,{ class:"xxx" });
+     * > <div class="xxx"></div>
+     * @example
+     * // 创建一个DIV元素
+     * DOMUtils.createElement("div");
+     * > <div></div>
+     * @example
+     * // 创建一个DIV元素
+     * DOMUtils.createElement("div","测试");
+     * > <div>测试</div>
+     */
+    createElement<K extends keyof HTMLElementTagNameMap>(
+    /** 元素名 */
+    tagName: K, 
+    /** 属性 */
+    property?: ({
+        [P in keyof HTMLElementTagNameMap[K]]?: HTMLElementTagNameMap[K][P];
+    } & {
+        [key: string]: any;
+    }) | string, 
+    /** 自定义属性 */
+    attributes?: PopsDOMUtilsCreateElementAttributesMap): HTMLElementTagNameMap[K];
+    /**
+     * 获取文字的位置信息
+     * @param input 输入框
+     * @param selectionStart 起始位置
+     * @param selectionEnd 结束位置
+     * @param debug 是否是调试模式
+     * + true 不删除临时节点元素
+     * + false 删除临时节点元素
+     */
+    getTextBoundingRect(input: HTMLInputElement, selectionStart: number | string, selectionEnd: number | string, debug: boolean): DOMRect;
+    /**
+     * 使用className来隐藏元素
+     * @param ele
+     * @param isImportant 是否使用!important
+     */
+    cssHide(ele: Element | null, isImportant?: boolean): void;
+    /**
+     * cssHide的反向使用
+     * @param ele
+     */
+    cssShow(ele: Element | null): void;
+    /**
+     * 将字符串转为Element元素
+     * @param html
+     * @param useParser 是否使用DOMParser来生成元素，有些时候通过DOMParser生成的元素有点问题
+     * + true 使用DOMPraser来转换字符串
+     * + false （默认）创建一个div，里面放入字符串，然后提取firstChild
+     * @param isComplete 是否是完整的
+     * + true 如果useParser为true，那么返回整个使用DOMParser转换成的Document
+     * 如果useParser为false，返回一个DIV元素，DIV元素内包裹着需要转换的字符串
+     * + false （默认）如果useParser为true，那么返回整个使用DOMParser转换成的Document的body
+     * 如果useParser为false，返回一个DIV元素的firstChild
+     * @example
+     * // 将字符串转为Element元素
+     * DOMUtils.parseHTML("<a href='xxxx'></a>")
+     * > <a href="xxxx"></a>
+     * @example
+     * // 使用DOMParser将字符串转为Element元素
+     * DOMUtils.parseHTML("<a href='xxxx'></a>",true)
+     * > <a href="xxxx"></a>
+     * @example
+     * // 由于需要转换的元素是多个元素，将字符串转为完整的Element元素
+     * DOMUtils.parseHTML("<a href='xxxx'></a><a href='xxxx'></a>",false, true)
+     * > <div><a href="xxxx"></a><a href='xxxx'></a></div>
+     * @example
+     * // 由于需要转换的元素是多个元素，使用DOMParser将字符串转为完整的Element元素
+     * DOMUtils.parseHTML("<a href='xxxx'></a><a href='xxxx'></a>",true, true)
+     * > #document
+     */
+    parseHTML<T1 extends boolean, T2 extends boolean>(html: string, useParser?: T1, isComplete?: T2): ParseHTMLReturnType<T1, T2>;
+    /**
+     * 函数在元素内部末尾添加子元素或HTML字符串
+     * @param element 目标元素
+     * @param content 子元素或HTML字符串
+     * @example
+     * // 元素a.xx的内部末尾添加一个元素
+     * DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
+     * DOMUtils.append("a.xx","'<b class="xx"></b>")
+     * */
+    append(element: Element | Node | ShadowRoot | HTMLElement | string, content: HTMLElement | string | (HTMLElement | string | Element)[] | NodeList): void;
+    /**
+     * 把元素标签添加到head内
+     */
+    appendHead($ele: HTMLElement): void;
+    /**
+     * 把元素添加进body内
+     * @param $ele
+     */
+    appendBody($ele: HTMLElement): void;
+    /**
+     * 判断元素是否已显示或已连接
+     * @param element
+     */
+    isShow(element: HTMLElement): boolean;
+    /**
+     * 用于显示元素并获取它的高度宽度等其它属性
+     * @param element
+     */
+    showElement(element: HTMLElement): {
+        /**
+         * 恢复修改的style
+         */
+        recovery(): void;
+    };
+    /**
+     * 获取元素上的Float格式的属性px
+     * @param element
+     * @param styleName style名
+     */
+    getStyleValue(element: HTMLElement | CSSStyleDeclaration, styleName: string): number;
+}
+declare const popsDOMUtils: PopsDOMUtils;
+export { popsDOMUtils };