@whitesev/pops 4.0.1 → 4.1.0

package/dist/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const version = "4.0.1";
+const version = "4.1.0";
 
 const GlobalConfig = {
     config: {},
@@ -59,15 +59,16 @@ const GlobalConfig = {
 };
 
 class EventEmiter {
-    #type;
-    #data = new Map();
+    [Symbol.toStringTag] = "EventEmiter";
+    type;
+    data = new Map();
     constructor(type) {
-        this.#type = type;
+        this.type = type;
     }
     on(eventName, callback) {
-        const eventList = this.#data.get(eventName) ?? [];
-        eventList.push({ type: this.#type, time: Date.now(), callback: callback });
-        this.#data.set(eventName, eventList);
+        const eventList = this.data.get(eventName) ?? [];
+        eventList.push({ type: this.type, time: Date.now(), callback: callback });
+        this.data.set(eventName, eventList);
         return {
             off: () => {
                 this.off(eventName, callback);
@@ -78,7 +79,7 @@ class EventEmiter {
         };
     }
     off(eventName, callback) {
-        const eventList = this.#data.get(eventName) ?? [];
+        const eventList = this.data.get(eventName) ?? [];
         let isOffSuccess = false;
         for (let index = eventList.length - 1; index >= 0; index--) {
             if (eventList[index].callback === callback) {
@@ -88,27 +89,27 @@ class EventEmiter {
         }
         if (eventList.length === 0) {
             // empty
-            this.#data.delete(eventName);
+            this.data.delete(eventName);
         }
         else {
             if (isOffSuccess) {
                 // update
-                this.#data.set(eventName, eventList);
+                this.data.set(eventName, eventList);
             }
         }
     }
     async emit(eventName, ...args) {
-        const eventList = this.#data.get(eventName) ?? [];
+        const eventList = this.data.get(eventName) ?? [];
         for (const item of eventList) {
             await item.callback(...args);
         }
     }
     offAll(eventName) {
         if (typeof eventName === "string") {
-            this.#data.delete(eventName);
+            this.data.delete(eventName);
         }
         else {
-            this.#data.clear();
+            this.data.clear();
         }
     }
     /**
@@ -116,10 +117,10 @@ class EventEmiter {
      */
     getAllEvents(eventName) {
         if (typeof eventName === "string") {
-            return this.#data.get(eventName);
+            return this.data.get(eventName);
         }
         else {
-            return Array.from(this.#data.values());
+            return Array.from(this.data.values());
         }
     }
 }
@@ -430,7 +431,8 @@ class PopsUtils {
             if (typeof sourceValue === "object" &&
                 sourceValue != null &&
                 keyName in target &&
-                !UtilsContext.isDOM(sourceValue)) {
+                !UtilsContext.isDOM(sourceValue) &&
+                !(sourceValue instanceof EventEmiter)) {
                 // 源端的值是object类型，且不是元素节点
                 // 如果是数组，那此数组中有值，清空旧的数组再赋值
                 let childObjectValue;
@@ -446,7 +448,7 @@ class PopsUtils {
                 Reflect.set(target, keyName, childObjectValue);
             }
             else {
-                /* 直接赋值 */
+                // 直接赋值
                 Reflect.set(target, keyName, sourceValue);
             }
         }
@@ -636,33 +638,31 @@ class PopsUtils {
         if (typeof deviation !== "number" || Number.isNaN(deviation)) {
             deviation = 10;
         }
-        const leftTop = {
-            x: globalThis.innerWidth * (1 / 8),
-            y: globalThis.innerHeight * (1 / 8),
-        };
-        const leftBottom = {
-            x: globalThis.innerWidth * (1 / 8),
-            y: globalThis.innerHeight * (7 / 8),
-        };
-        const rightTop = {
-            x: globalThis.innerWidth * (7 / 8),
-            y: globalThis.innerHeight * (1 / 8),
-        };
-        const rightBottom = {
-            x: globalThis.innerWidth * (7 / 8),
-            y: globalThis.innerHeight * (7 / 8),
-        };
-        const center = {
-            x: globalThis.innerWidth / 2,
-            y: globalThis.innerHeight / 2,
-        };
-        const delayHandlerElementPostionList = [
-            leftTop,
-            leftBottom,
-            rightTop,
-            rightBottom,
-            center,
-        ];
+        /** 坐标偏移 */
+        const positionDistance = 10;
+        const defaultCalcPostion = [];
+        const maxPostionX = globalThis.innerWidth;
+        const maxPostionY = globalThis.innerHeight;
+        const gridXCount = 8;
+        const gridYCount = 8;
+        for (let i = 0; i < gridXCount; i++) {
+            for (let j = 0; j < gridYCount; j++) {
+                const positionX = globalThis.innerWidth * (i / gridXCount) + positionDistance;
+                const positionY = globalThis.innerHeight * (j / gridYCount) + positionDistance;
+                const position = {
+                    x: positionX,
+                    y: positionY,
+                };
+                if (position.x > maxPostionX) {
+                    position.x = maxPostionX;
+                }
+                if (position.y > maxPostionY) {
+                    position.y = maxPostionY;
+                }
+                defaultCalcPostion.push(position);
+            }
+        }
+        const delayHandlerElementPostionList = defaultCalcPostion;
         if ($el) {
             delayHandlerElementPostionList.length = 0;
             if (Array.isArray($el)) {
@@ -674,61 +674,79 @@ class PopsUtils {
         }
         const positionInfoList = delayHandlerElementPostionList
             .map((position) => {
-            let positionNode;
+            let $position;
             let positionX;
             let positionY;
             if (position instanceof HTMLElement) {
-                positionNode = position;
+                $position = position;
                 const nodeRect = position.getBoundingClientRect();
                 positionX = nodeRect.x + nodeRect.width / 2;
                 positionY = nodeRect.y + nodeRect.height / 2;
             }
             else {
-                positionNode = document.elementFromPoint(position.x, position.y);
+                $position = document.elementFromPoint(position.x, position.y);
                 positionX = position.x;
                 positionY = position.y;
             }
-            const shadowRoot = positionNode?.shadowRoot;
+            const shadowRoot = $position?.shadowRoot;
             if (shadowRoot) {
-                positionNode = shadowRoot.elementFromPoint(positionX, positionY);
+                // 处理ShadowRoot
+                $position = shadowRoot.elementFromPoint(positionX, positionY);
             }
-            if (positionNode instanceof HTMLStyleElement)
-                return;
-            if (positionNode instanceof HTMLScriptElement)
-                return;
-            if (positionNode instanceof HTMLMetaElement)
-                return;
-            if (positionNode instanceof HTMLHeadElement)
-                return;
-            if (!(positionNode instanceof HTMLElement))
+            if (!($position instanceof HTMLElement))
                 return;
-            let parent = positionNode;
+            let $parent = $position;
             let zIndex = 0;
-            let maxZIndexNode = null;
-            while (parent) {
-                const nodeStyle = globalThis.getComputedStyle(parent);
+            let $maxZIndexNode = null;
+            let rect = {
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+            };
+            while ($parent) {
+                const nodeStyle = globalThis.getComputedStyle($parent);
                 const nodeZIndex = parseInt(nodeStyle.zIndex);
                 if (nodeStyle.position !== "static" && !isNaN(nodeZIndex)) {
                     if (nodeZIndex > zIndex) {
                         zIndex = nodeZIndex;
-                        maxZIndexNode = parent;
-                    }
-                }
-                parent = parent.parentElement;
+                        $maxZIndexNode = $parent;
+                    }
+                }
+                $parent = $parent.parentElement;
+            }
+            if ($maxZIndexNode) {
+                const maxRect = $maxZIndexNode.getBoundingClientRect();
+                rect = {
+                    x: maxRect.x,
+                    y: maxRect.y,
+                    width: maxRect.width,
+                    height: maxRect.height,
+                    top: maxRect.top,
+                    right: maxRect.right,
+                    bottom: maxRect.bottom,
+                    left: maxRect.left,
+                };
             }
             return {
-                /** 处理了偏移量后的z-index值 */
+                /** 计算偏移量后的z-index值 */
                 zIndex: zIndex + deviation,
-                /** 原始z-index值 */
+                /** 获取到的最大的z-index值 */
                 originZIndex: zIndex,
                 /** 拥有最大z-index的元素 */
-                node: maxZIndexNode,
+                node: $maxZIndexNode,
                 /** 目标坐标元素 */
-                positionNode: positionNode,
-                /** x坐标 */
+                positionNode: $position,
+                /** 目标x坐标 */
                 positionX: positionX,
-                /** y坐标 */
+                /** 目标y坐标 */
                 positionY: positionY,
+                /** node位置信息 */
+                rect,
             };
         })
             .filter((it) => it != null);
@@ -779,10 +797,17 @@ const PopsSafeUtils = {
 const PopsCommonCSSClassName = {
     flexCenter: "pops-flex-items-center",
     flexYCenter: "pops-flex-y-center",
+    flexXCenter: "pops-flex-x-center",
     hide: "pops-hide",
     hideImportant: "pops-hide-important",
+    noBorder: "pops-no-border",
+    noBorderImportant: "pops-no-border-important",
     userSelectNone: "pops-user-select-none",
-    textIsDisabled: "pops-text-is-disabled"};
+    lineHeightCenter: "pops-line-height-center",
+    widthFill: "pops-width-fill",
+    textIsDisabled: "pops-text-is-disabled",
+    textIsDisabledImportant: "pops-text-is-disabled-important",
+};
 
 class PopsDOMUtilsEvent {
     on(element, eventType, selector, callback, option) {
@@ -1682,6 +1707,35 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
     getTransitionEndNameList() {
         return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
     }
+    /**
+     * 是否是隐藏状态
+     *
+     * 检测以下项：
+     *
+     * + `display`: none
+     * + `visibility`: hidden
+     * + `opacity`: 0
+     * + `使用了pops的自定义的隐藏class类`
+     * @param $el 需要检测的元素
+     */
+    isHide($el) {
+        let flag = false;
+        if (this.containsClassName($el, PopsCommonCSSClassName.hide) ||
+            this.containsClassName($el, PopsCommonCSSClassName.hideImportant)) {
+            flag = true;
+        }
+        else {
+            if ($el instanceof HTMLElement) {
+                const style = $el.style;
+                flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
+            }
+            if (!flag) {
+                const style = globalThis.getComputedStyle($el);
+                flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
+            }
+        }
+        return flag;
+    }
     /**
      * 实现jQuery中的$().offset();
      * @param element
@@ -3190,7 +3244,7 @@ const PopsInstHandler = {
         return totalInstConfigList;
     },
     /**
-     * 隐藏
+     * 显示
      * @param popsType
      * @param instConfigList
      * @param guid
@@ -3198,24 +3252,34 @@ const PopsInstHandler = {
      * @param $anim
      * @param $mask
      */
-    hide(config, popsType, instConfigList, guid, $anim, $mask) {
+    show(config, popsType, instConfigList, guid, $anim, $mask) {
         // oxlint-disable-next-line no-async-promise-executor
         return new Promise(async (resolve) => {
             const $pops = $anim.querySelector(".pops[type-value]");
             const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
             if (fintInst) {
-                // 存在实例
+                // 由于是隐蔽状态
+                // 先设置好动画状态
+                // 再显示，会自执行动画
+                const checkVisible = () => {
+                    if (!popsDOMUtils.isHide($anim)) {
+                        return true;
+                    }
+                    else {
+                        return false;
+                    }
+                };
                 const startAnim = async () => {
                     if (popsType === "drawer") {
                         // drawer是抽屉
                         // 单独处理动画
                         const drawerConfig = config;
-                        await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
+                        await popsUtils.sleep(drawerConfig.openDelay ?? 0);
                         if ($mask) {
-                            popsDOMUtils.css($mask, "display", "none");
+                            popsDOMUtils.css($mask, "display", "");
                         }
                         const direction = drawerConfig.direction;
-                        const size = "0";
+                        const size = drawerConfig.size.toString();
                         if (["top", "bottom"].includes(direction)) {
                             $pops.style.setProperty("height", size);
                         }
@@ -3223,26 +3287,26 @@ const PopsInstHandler = {
                             $pops.style.setProperty("width", size);
                         }
                         else {
-                            console.error("未知direction: ", direction);
+                            console.error("未知direction：", direction);
                         }
                     }
                     else {
-                        instConfigItem.$anim.style.width = "100%";
-                        instConfigItem.$anim.style.height = "100%";
-                        Reflect.set(instConfigItem.$anim.style, "animation-name", instConfigItem.$anim.getAttribute("anim") + "-reverse");
+                        instConfigItem.$anim.style.width = "";
+                        instConfigItem.$anim.style.height = "";
+                        Reflect.set(instConfigItem.$anim.style, "animation-name", animName);
                     }
-                };
-                const endCallback = () => {
-                    instConfigItem.$anim.style.display = "none";
+                    instConfigItem.$anim.style.display = "";
                     if (instConfigItem.$mask) {
-                        instConfigItem.$mask.style.display = "none";
+                        instConfigItem.$mask.style.display = "";
                     }
-                    fintInst.emitter.emit("pops:hide", instConfigItem);
+                };
+                const endCallback = () => {
+                    fintInst.emitter.emit("pops:show", instConfigItem);
                 };
                 const instConfigItem = fintInst;
-                fintInst.emitter.emit("pops:before-hide", instConfigItem);
-                await startAnim();
-                if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
+                const animName = instConfigItem.$anim.getAttribute("anim").replace("-reverse", "");
+                fintInst.emitter.emit("pops:before-show", instConfigItem);
+                if (checkVisible() && PopsAnimation.hasAnim(animName)) {
                     /**
                      * 动画结束的回调
                      */
@@ -3253,22 +3317,23 @@ const PopsInstHandler = {
                     };
                     const listener = popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
                         capture: true,
-                        once: true,
                     });
+                    await startAnim();
                 }
                 else {
+                    await startAnim();
                     endCallback();
                     resolve();
                 }
             }
             else {
-                console.error("hide-error: 该实例未存储");
+                console.error("show-error: 该实例未存储");
                 resolve();
             }
         });
     },
     /**
-     * 显示
+     * 隐藏
      * @param popsType
      * @param instConfigList
      * @param guid
@@ -3276,23 +3341,35 @@ const PopsInstHandler = {
      * @param $anim
      * @param $mask
      */
-    show(config, popsType, instConfigList, guid, $anim, $mask) {
+    hide(config, popsType, instConfigList, guid, $anim, $mask) {
         // oxlint-disable-next-line no-async-promise-executor
         return new Promise(async (resolve) => {
             const $pops = $anim.querySelector(".pops[type-value]");
             const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
             if (fintInst) {
+                // 由于是已显示状态
+                // 先执行动画
+                // 再隐藏
+                // 存在实例
+                const checkVisible = () => {
+                    if (!popsDOMUtils.isHide($anim)) {
+                        return true;
+                    }
+                    else {
+                        return false;
+                    }
+                };
                 const startAnim = async () => {
                     if (popsType === "drawer") {
                         // drawer是抽屉
                         // 单独处理动画
                         const drawerConfig = config;
-                        await popsUtils.sleep(drawerConfig.openDelay ?? 0);
+                        await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
                         if ($mask) {
-                            popsDOMUtils.css($mask, "display", "");
+                            popsDOMUtils.css($mask, "display", "none");
                         }
                         const direction = drawerConfig.direction;
-                        const size = drawerConfig.size.toString();
+                        const size = "0";
                         if (["top", "bottom"].includes(direction)) {
                             $pops.style.setProperty("height", size);
                         }
@@ -3300,26 +3377,27 @@ const PopsInstHandler = {
                             $pops.style.setProperty("width", size);
                         }
                         else {
-                            console.error("未知direction：", direction);
+                            console.error("未知direction: ", direction);
                         }
                     }
                     else {
-                        instConfigItem.$anim.style.width = "";
-                        instConfigItem.$anim.style.height = "";
-                        Reflect.set(instConfigItem.$anim.style, "animation-name", instConfigItem.$anim.getAttribute("anim").replace("-reverse", ""));
+                        instConfigItem.$anim.style.width = "100%";
+                        instConfigItem.$anim.style.height = "100%";
+                        Reflect.set(instConfigItem.$anim.style, "animation-name", reverseAnimName);
                     }
                 };
                 const endCallback = () => {
-                    instConfigItem.$anim.style.display = "";
+                    instConfigItem.$anim.style.display = "none";
                     if (instConfigItem.$mask) {
-                        instConfigItem.$mask.style.display = "";
+                        instConfigItem.$mask.style.display = "none";
                     }
-                    fintInst.emitter.emit("pops:show", instConfigItem);
+                    fintInst.emitter.emit("pops:hide", instConfigItem);
                 };
                 const instConfigItem = fintInst;
-                fintInst.emitter.emit("pops:before-show", instConfigItem);
-                await startAnim();
-                if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
+                const animName = instConfigItem.$anim.getAttribute("anim").replace("-reverse", "");
+                const reverseAnimName = animName + "-reverse";
+                fintInst.emitter.emit("pops:before-hide", instConfigItem);
+                if (!checkVisible() && PopsAnimation.hasAnim(reverseAnimName)) {
                     /**
                      * 动画结束的回调
                      */
@@ -3330,15 +3408,18 @@ const PopsInstHandler = {
                     };
                     const listener = popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
                         capture: true,
+                        once: true,
                     });
+                    await startAnim();
                 }
                 else {
+                    await startAnim();
                     endCallback();
                     resolve();
                 }
             }
             else {
-                console.error("show-error: 该实例未存储");
+                console.error("hide-error: 该实例未存储");
                 resolve();
             }
         });
@@ -3378,7 +3459,7 @@ const PopsInstHandler = {
         await new Promise(async (resolve) => {
             const $pops = $anim.querySelector(".pops[type-value]");
             const drawerConfig = config;
-            const start = () => {
+            const startAnim = () => {
                 /**
                  * 弹窗已关闭的回调
                  */
@@ -3419,7 +3500,7 @@ const PopsInstHandler = {
             };
             if (popsType === "drawer") {
                 await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
-                start();
+                startAnim();
             }
             else {
                 await PopsInstHandler.removeInstance([instConfigList], guid);
@@ -4170,8 +4251,8 @@ const PopsAlertDefaultConfig = () => {
         style: null,
         lightStyle: null,
         darkStyle: null,
-        beforeAppendToPageCallBack() { },
         stopKeyDownEventPropagation: true,
+        emitter: null,
     };
 };
 
@@ -4180,11 +4261,11 @@ const PopsAlert = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "alert";
-        const emitter = new EventEmiter(popsType);
         let config = PopsAlertDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
         config = PopsHandler.handleOnly(popsType, config);
+        const emitter = config.emitter ?? new EventEmiter(popsType);
         const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             {
@@ -4378,8 +4459,8 @@ const PopsConfirmDefaultConfig = () => {
         style: null,
         lightStyle: null,
         darkStyle: null,
-        beforeAppendToPageCallBack() { },
         stopKeyDownEventPropagation: true,
+        emitter: null,
     };
 };
 
@@ -4388,11 +4469,11 @@ const PopsConfirm = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "confirm";
-        const emitter = new EventEmiter(popsType);
         let config = PopsConfirmDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
         config = PopsHandler.handleOnly(popsType, config);
+        const emitter = config.emitter ?? new EventEmiter(popsType);
         const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             {
@@ -4585,9 +4666,9 @@ const PopsDrawerDefaultConfig = () => {
         style: null,
         lightStyle: null,
         darkStyle: null,
-        beforeAppendToPageCallBack() { },
         forbiddenScroll: false,
         stopKeyDownEventPropagation: true,
+        emitter: null,
     };
 };
 
@@ -4596,11 +4677,11 @@ const PopsDrawer = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "drawer";
-        const emitter = new EventEmiter(popsType);
         let config = PopsDrawerDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
         config = PopsHandler.handleOnly(popsType, config);
+        const emitter = config.emitter ?? new EventEmiter(popsType);
         const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             {
@@ -4811,6 +4892,7 @@ const PopsLoadingDefaultConfig = () => {
         darkStyle: null,
         addIndexCSS: true,
         stopKeyDownEventPropagation: true,
+        emitter: null,
     };
 };
 
@@ -4818,19 +4900,19 @@ const PopsLoading = {
     init(__config__) {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
-        const PopsType = "loading";
-        const emitter = new EventEmiter(PopsType);
+        const popsType = "loading";
         let config = PopsLoadingDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
-        config = PopsHandler.handleOnly(PopsType, config);
+        config = PopsHandler.handleOnly(popsType, config);
+        const emitter = config.emitter ?? new EventEmiter(popsType);
         // 先把z-index提取出来
         const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
         const maskHTML = PopsElementHandler.createMask(guid, zIndex);
         const { contentPStyle } = PopsElementHandler.createContentStyle("loading", config);
-        const animHTML = PopsElementHandler.createAnim(guid, PopsType, config, 
+        const animHTML = PopsElementHandler.createAnim(guid, popsType, config, 
         /*html*/ `
-            <div class="pops-content pops-${PopsType}-content">${config.addIndexCSS
+            <div class="pops-content pops-${popsType}-content">${config.addIndexCSS
             ? /*html*/ `
                 <style data-model-name="index">${PopsCSS.index}</style>
                 <style data-model-name="anim">${PopsCSS.anim}</style>
@@ -4841,13 +4923,13 @@ const PopsLoading = {
                     ${PopsCSS.loadingCSS}
                 </style>
             ${config.style != null ? `<style>${config.style}</style>` : ""}
-            	<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
+            	<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
             </div>`, "", zIndex);
         /**
          * 弹窗的主元素，包括动画层
          */
         const $anim = PopsElementHandler.parseElement(animHTML);
-        const { $pops: $pops } = PopsHandler.handleQueryElement($anim, PopsType);
+        const { $pops: $pops } = PopsHandler.handleQueryElement($anim, popsType);
         /**
          * 遮罩层元素
          */
@@ -4859,7 +4941,7 @@ const PopsLoading = {
         if (config.mask.enable) {
             // 创建遮罩层
             const handleMask = PopsHandler.handleMask({
-                type: PopsType,
+                type: popsType,
                 guid: guid,
                 config: config,
                 animElement: $anim,
@@ -4868,12 +4950,12 @@ const PopsLoading = {
             $mask = handleMask.maskElement;
             $elList.push($mask);
         }
-        const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, PopsType, $anim, $pops, emitter, $mask);
+        const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, popsType, $anim, $pops, emitter, $mask);
         popsDOMUtils.append(config.$parent, $elList);
         if ($mask != null) {
             $anim.after($mask);
         }
-        PopsHandler.handlePush(PopsType, {
+        PopsHandler.handlePush(popsType, {
             $shadowContainer: $pops,
             $shadowRoot: $pops,
             guid: guid,
@@ -5042,8 +5124,8 @@ const PopsFolderDefaultConfig = () => {
         style: null,
         lightStyle: null,
         darkStyle: null,
-        beforeAppendToPageCallBack() { },
         stopKeyDownEventPropagation: true,
+        emitter: null,
     };
 };
 
@@ -5080,11 +5162,11 @@ const PopsFolder = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "folder";
-        const emitter = new EventEmiter(popsType);
         let config = PopsFolderDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
         config = PopsHandler.handleOnly(popsType, config);
+        const emitter = config.emitter ?? new EventEmiter(popsType);
         const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             {
@@ -6007,8 +6089,8 @@ const PopsIframeDefaultConfig = () => {
         style: null,
         lightStyle: null,
         darkStyle: null,
-        beforeAppendToPageCallBack() { },
         stopKeyDownEventPropagation: true,
+        emitter: null,
     };
 };
 
@@ -6017,7 +6099,6 @@ const PopsIframe = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "iframe";
-        const emitter = new EventEmiter(popsType);
         let config = PopsIframeDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -6025,6 +6106,8 @@ const PopsIframe = {
             throw new TypeError("config.url must not be null.");
         }
         config = PopsHandler.handleOnly(popsType, config);
+        const emitter = config.emitter ??
+            new EventEmiter(popsType);
         const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             {
@@ -6052,7 +6135,7 @@ const PopsIframe = {
                 css: PopsCSS.iframeCSS,
             },
         ]);
-        const maskExtraStyle = config.animation != null && config.animation != "" ? "position:absolute;" : "";
+        const maskExtraStyle = config.animation != null && config.animation != "" && config.animation ? "position:absolute;" : "";
         // 先把z-index提取出来
         const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
         const maskHTML = PopsElementHandler.createMask(guid, zIndex, maskExtraStyle);
@@ -7133,9 +7216,9 @@ const PopsPanelDefaultConfig = () => {
         style: null,
         lightStyle: null,
         darkStyle: null,
-        beforeAppendToPageCallBack() { },
         stopKeyDownEventPropagation: true,
         listenEscapeKeyUpToExitDeepMenu: true,
+        emitter: null,
     };
 };
 
@@ -7247,7 +7330,7 @@ const PopsTooltipDefaultConfig = () => {
         style: "",
         lightStyle: null,
         darkStyle: null,
-        beforeAppendToPageCallBack() { },
+        emitter: null,
     };
 };
 
@@ -7715,7 +7798,6 @@ const PopsTooltip = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "tooltip";
-        const emitter = new EventEmiter(popsType);
         let config = PopsTooltipDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -7732,6 +7814,7 @@ const PopsTooltip = {
                 config.onShowEventName += ` ${it}`;
             });
         }
+        const emitter = config.emitter ?? new EventEmiter(popsType);
         const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             {
@@ -11597,11 +11680,11 @@ const PopsPanel = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "panel";
-        const emitter = new EventEmiter(popsType);
         let config = PopsPanelDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
         config = PopsHandler.handleOnly(popsType, config);
+        const emitter = config.emitter ?? new EventEmiter(popsType);
         const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             {
@@ -11851,8 +11934,8 @@ const PopsPromptDefaultConfig = () => {
         style: null,
         lightStyle: null,
         darkStyle: null,
-        beforeAppendToPageCallBack() { },
         stopKeyDownEventPropagation: true,
+        emitter: null,
     };
 };
 
@@ -11861,11 +11944,11 @@ const PopsPrompt = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "prompt";
-        const emitter = new EventEmiter(popsType);
         let config = PopsPromptDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
         config = PopsHandler.handleOnly(popsType, config);
+        const emitter = config.emitter ?? new EventEmiter(popsType);
         const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             {
@@ -12086,10 +12169,10 @@ const PopsRightClickMenuDefaultConfig = () => {
         style: null,
         lightStyle: null,
         darkStyle: null,
-        beforeAppendToPageCallBack() { },
         limitPositionXInView: true,
         limitPositionYInView: true,
         beforeShowCallBack() { },
+        emitter: null,
     };
 };
 
@@ -12098,11 +12181,11 @@ const PopsRightClickMenu = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "rightClickMenu";
-        const emitter = new EventEmiter(popsType);
         let config = PopsRightClickMenuDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
         config = PopsHandler.handleOnly(popsType, config);
+        const emitter = config.emitter ?? new EventEmiter(popsType);
         const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             {
@@ -12724,6 +12807,7 @@ const PopsSearchSuggestionDefaultConfig = () => {
         style: "",
         lightStyle: null,
         darkStyle: null,
+        emitter: null,
     };
 };
 
@@ -12732,7 +12816,6 @@ const PopsSearchSuggestion = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "searchSuggestion";
-        const emitter = new EventEmiter(popsType);
         let config = PopsSearchSuggestionDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -12740,6 +12823,7 @@ const PopsSearchSuggestion = {
         if (config.$inputTarget == null) {
             config.$inputTarget = config.$target;
         }
+        const emitter = config.emitter ?? new EventEmiter(popsType);
         const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
         PopsHandler.handleInit($shadowRoot, [
             {
@@ -13616,12 +13700,16 @@ class Pops {
         InstanceUtils: PopsInstanceUtils,
         /** pops处理float类型使用的工具类 */
         MathFloatUtils: PopsMathFloatUtils,
+        /** 实例处理函数 */
+        PopsInstHandler,
         /** pops.panel中用于处理各个类型的工具 */
         PanelHandlerComponents,
         /** pops.panel中的动画 */
         PopsAnimation,
         /** 事件类 */
         EventEmiter,
+        /** 通用的CSS类名 */
+        PopsCommonCSSClassName,
     };
     init() { }
     /**