@whitesev/pops 4.0.2 → 4.1.0

package/dist/index.iife.js

@@ -1,7 +1,7 @@
 var pops = (function () {
   'use strict';
 
-  const version = "4.0.2";
+  const version = "4.1.0";
 
   const GlobalConfig = {
       config: {},
@@ -60,15 +60,16 @@ var pops = (function () {
   };
 
   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);
@@ -79,7 +80,7 @@ var pops = (function () {
           };
       }
       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) {
@@ -89,27 +90,27 @@ var pops = (function () {
           }
           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();
           }
       }
       /**
@@ -117,10 +118,10 @@ var pops = (function () {
        */
       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());
           }
       }
   }
@@ -431,7 +432,8 @@ var pops = (function () {
               if (typeof sourceValue === "object" &&
                   sourceValue != null &&
                   keyName in target &&
-                  !UtilsContext.isDOM(sourceValue)) {
+                  !UtilsContext.isDOM(sourceValue) &&
+                  !(sourceValue instanceof EventEmiter)) {
                   // 源端的值是object类型，且不是元素节点
                   // 如果是数组，那此数组中有值，清空旧的数组再赋值
                   let childObjectValue;
@@ -447,7 +449,7 @@ var pops = (function () {
                   Reflect.set(target, keyName, childObjectValue);
               }
               else {
-                  /* 直接赋值 */
+                  // 直接赋值
                   Reflect.set(target, keyName, sourceValue);
               }
           }
@@ -637,33 +639,31 @@ var pops = (function () {
           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)) {
@@ -675,61 +675,79 @@ var pops = (function () {
           }
           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);
@@ -780,10 +798,17 @@ var pops = (function () {
   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) {
@@ -1683,6 +1708,35 @@ var pops = (function () {
       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
@@ -3191,7 +3245,7 @@ var pops = (function () {
           return totalInstConfigList;
       },
       /**
-       * 隐藏
+       * 显示
        * @param popsType
        * @param instConfigList
        * @param guid
@@ -3199,24 +3253,34 @@ var pops = (function () {
        * @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);
                           }
@@ -3224,26 +3288,26 @@ var pops = (function () {
                               $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)) {
                       /**
                        * 动画结束的回调
                        */
@@ -3254,22 +3318,23 @@ var pops = (function () {
                       };
                       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
@@ -3277,23 +3342,35 @@ var pops = (function () {
        * @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);
                           }
@@ -3301,26 +3378,27 @@ var pops = (function () {
                               $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)) {
                       /**
                        * 动画结束的回调
                        */
@@ -3331,15 +3409,18 @@ var pops = (function () {
                       };
                       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();
               }
           });
@@ -3379,7 +3460,7 @@ var pops = (function () {
           await new Promise(async (resolve) => {
               const $pops = $anim.querySelector(".pops[type-value]");
               const drawerConfig = config;
-              const start = () => {
+              const startAnim = () => {
                   /**
                    * 弹窗已关闭的回调
                    */
@@ -3420,7 +3501,7 @@ var pops = (function () {
               };
               if (popsType === "drawer") {
                   await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
-                  start();
+                  startAnim();
               }
               else {
                   await PopsInstHandler.removeInstance([instConfigList], guid);
@@ -4171,8 +4252,8 @@ var pops = (function () {
           style: null,
           lightStyle: null,
           darkStyle: null,
-          beforeAppendToPageCallBack() { },
           stopKeyDownEventPropagation: true,
+          emitter: null,
       };
   };
 
@@ -4181,11 +4262,11 @@ var pops = (function () {
           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, [
               {
@@ -4379,8 +4460,8 @@ var pops = (function () {
           style: null,
           lightStyle: null,
           darkStyle: null,
-          beforeAppendToPageCallBack() { },
           stopKeyDownEventPropagation: true,
+          emitter: null,
       };
   };
 
@@ -4389,11 +4470,11 @@ var pops = (function () {
           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, [
               {
@@ -4586,9 +4667,9 @@ var pops = (function () {
           style: null,
           lightStyle: null,
           darkStyle: null,
-          beforeAppendToPageCallBack() { },
           forbiddenScroll: false,
           stopKeyDownEventPropagation: true,
+          emitter: null,
       };
   };
 
@@ -4597,11 +4678,11 @@ var pops = (function () {
           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, [
               {
@@ -4812,6 +4893,7 @@ var pops = (function () {
           darkStyle: null,
           addIndexCSS: true,
           stopKeyDownEventPropagation: true,
+          emitter: null,
       };
   };
 
@@ -4819,19 +4901,19 @@ var pops = (function () {
       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>
@@ -4842,13 +4924,13 @@ var pops = (function () {
                     ${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);
           /**
            * 遮罩层元素
            */
@@ -4860,7 +4942,7 @@ var pops = (function () {
           if (config.mask.enable) {
               // 创建遮罩层
               const handleMask = PopsHandler.handleMask({
-                  type: PopsType,
+                  type: popsType,
                   guid: guid,
                   config: config,
                   animElement: $anim,
@@ -4869,12 +4951,12 @@ var pops = (function () {
               $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,
@@ -5043,8 +5125,8 @@ var pops = (function () {
           style: null,
           lightStyle: null,
           darkStyle: null,
-          beforeAppendToPageCallBack() { },
           stopKeyDownEventPropagation: true,
+          emitter: null,
       };
   };
 
@@ -5081,11 +5163,11 @@ var pops = (function () {
           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, [
               {
@@ -6008,8 +6090,8 @@ var pops = (function () {
           style: null,
           lightStyle: null,
           darkStyle: null,
-          beforeAppendToPageCallBack() { },
           stopKeyDownEventPropagation: true,
+          emitter: null,
       };
   };
 
@@ -6018,7 +6100,6 @@ var pops = (function () {
           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__);
@@ -6026,6 +6107,8 @@ var pops = (function () {
               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, [
               {
@@ -6053,7 +6136,7 @@ var pops = (function () {
                   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);
@@ -7134,9 +7217,9 @@ var pops = (function () {
           style: null,
           lightStyle: null,
           darkStyle: null,
-          beforeAppendToPageCallBack() { },
           stopKeyDownEventPropagation: true,
           listenEscapeKeyUpToExitDeepMenu: true,
+          emitter: null,
       };
   };
 
@@ -7248,7 +7331,7 @@ var pops = (function () {
           style: "",
           lightStyle: null,
           darkStyle: null,
-          beforeAppendToPageCallBack() { },
+          emitter: null,
       };
   };
 
@@ -7716,7 +7799,6 @@ var pops = (function () {
           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__);
@@ -7733,6 +7815,7 @@ var pops = (function () {
                   config.onShowEventName += ` ${it}`;
               });
           }
+          const emitter = config.emitter ?? new EventEmiter(popsType);
           const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
           PopsHandler.handleInit($shadowRoot, [
               {
@@ -11598,11 +11681,11 @@ var pops = (function () {
           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, [
               {
@@ -11852,8 +11935,8 @@ var pops = (function () {
           style: null,
           lightStyle: null,
           darkStyle: null,
-          beforeAppendToPageCallBack() { },
           stopKeyDownEventPropagation: true,
+          emitter: null,
       };
   };
 
@@ -11862,11 +11945,11 @@ var pops = (function () {
           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, [
               {
@@ -12087,10 +12170,10 @@ var pops = (function () {
           style: null,
           lightStyle: null,
           darkStyle: null,
-          beforeAppendToPageCallBack() { },
           limitPositionXInView: true,
           limitPositionYInView: true,
           beforeShowCallBack() { },
+          emitter: null,
       };
   };
 
@@ -12099,11 +12182,11 @@ var pops = (function () {
           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, [
               {
@@ -12725,6 +12808,7 @@ var pops = (function () {
           style: "",
           lightStyle: null,
           darkStyle: null,
+          emitter: null,
       };
   };
 
@@ -12733,7 +12817,6 @@ var pops = (function () {
           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__);
@@ -12741,6 +12824,7 @@ var pops = (function () {
           if (config.$inputTarget == null) {
               config.$inputTarget = config.$target;
           }
+          const emitter = config.emitter ?? new EventEmiter(popsType);
           const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
           PopsHandler.handleInit($shadowRoot, [
               {
@@ -13625,6 +13709,8 @@ var pops = (function () {
           PopsAnimation,
           /** 事件类 */
           EventEmiter,
+          /** 通用的CSS类名 */
+          PopsCommonCSSClassName,
       };
       init() { }
       /**