@whitesev/pops 4.0.2 → 4.1.0

package/dist/index.system.js

@@ -3,7 +3,7 @@ System.register('pops', [], (function (exports) {
   return {
     execute: (function () {
 
-      const version = "4.0.2";
+      const version = "4.1.0";
 
       const GlobalConfig = {
           config: {},
@@ -62,15 +62,16 @@ System.register('pops', [], (function (exports) {
       };
 
       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);
@@ -81,7 +82,7 @@ System.register('pops', [], (function (exports) {
               };
           }
           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) {
@@ -91,27 +92,27 @@ System.register('pops', [], (function (exports) {
               }
               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();
               }
           }
           /**
@@ -119,10 +120,10 @@ System.register('pops', [], (function (exports) {
            */
           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());
               }
           }
       }
@@ -433,7 +434,8 @@ System.register('pops', [], (function (exports) {
                   if (typeof sourceValue === "object" &&
                       sourceValue != null &&
                       keyName in target &&
-                      !UtilsContext.isDOM(sourceValue)) {
+                      !UtilsContext.isDOM(sourceValue) &&
+                      !(sourceValue instanceof EventEmiter)) {
                       // 源端的值是object类型，且不是元素节点
                       // 如果是数组，那此数组中有值，清空旧的数组再赋值
                       let childObjectValue;
@@ -449,7 +451,7 @@ System.register('pops', [], (function (exports) {
                       Reflect.set(target, keyName, childObjectValue);
                   }
                   else {
-                      /* 直接赋值 */
+                      // 直接赋值
                       Reflect.set(target, keyName, sourceValue);
                   }
               }
@@ -639,33 +641,31 @@ System.register('pops', [], (function (exports) {
               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)) {
@@ -677,61 +677,79 @@ System.register('pops', [], (function (exports) {
               }
               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);
@@ -782,10 +800,17 @@ System.register('pops', [], (function (exports) {
       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) {
@@ -1685,6 +1710,35 @@ System.register('pops', [], (function (exports) {
           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
@@ -3193,7 +3247,7 @@ System.register('pops', [], (function (exports) {
               return totalInstConfigList;
           },
           /**
-           * 隐藏
+           * 显示
            * @param popsType
            * @param instConfigList
            * @param guid
@@ -3201,24 +3255,34 @@ System.register('pops', [], (function (exports) {
            * @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);
                               }
@@ -3226,26 +3290,26 @@ System.register('pops', [], (function (exports) {
                                   $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)) {
                           /**
                            * 动画结束的回调
                            */
@@ -3256,22 +3320,23 @@ System.register('pops', [], (function (exports) {
                           };
                           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
@@ -3279,23 +3344,35 @@ System.register('pops', [], (function (exports) {
            * @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);
                               }
@@ -3303,26 +3380,27 @@ System.register('pops', [], (function (exports) {
                                   $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)) {
                           /**
                            * 动画结束的回调
                            */
@@ -3333,15 +3411,18 @@ System.register('pops', [], (function (exports) {
                           };
                           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();
                   }
               });
@@ -3381,7 +3462,7 @@ System.register('pops', [], (function (exports) {
               await new Promise(async (resolve) => {
                   const $pops = $anim.querySelector(".pops[type-value]");
                   const drawerConfig = config;
-                  const start = () => {
+                  const startAnim = () => {
                       /**
                        * 弹窗已关闭的回调
                        */
@@ -3422,7 +3503,7 @@ System.register('pops', [], (function (exports) {
                   };
                   if (popsType === "drawer") {
                       await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
-                      start();
+                      startAnim();
                   }
                   else {
                       await PopsInstHandler.removeInstance([instConfigList], guid);
@@ -4173,8 +4254,8 @@ System.register('pops', [], (function (exports) {
               style: null,
               lightStyle: null,
               darkStyle: null,
-              beforeAppendToPageCallBack() { },
               stopKeyDownEventPropagation: true,
+              emitter: null,
           };
       };
 
@@ -4183,11 +4264,11 @@ System.register('pops', [], (function (exports) {
               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, [
                   {
@@ -4381,8 +4462,8 @@ System.register('pops', [], (function (exports) {
               style: null,
               lightStyle: null,
               darkStyle: null,
-              beforeAppendToPageCallBack() { },
               stopKeyDownEventPropagation: true,
+              emitter: null,
           };
       };
 
@@ -4391,11 +4472,11 @@ System.register('pops', [], (function (exports) {
               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, [
                   {
@@ -4588,9 +4669,9 @@ System.register('pops', [], (function (exports) {
               style: null,
               lightStyle: null,
               darkStyle: null,
-              beforeAppendToPageCallBack() { },
               forbiddenScroll: false,
               stopKeyDownEventPropagation: true,
+              emitter: null,
           };
       };
 
@@ -4599,11 +4680,11 @@ System.register('pops', [], (function (exports) {
               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, [
                   {
@@ -4814,6 +4895,7 @@ System.register('pops', [], (function (exports) {
               darkStyle: null,
               addIndexCSS: true,
               stopKeyDownEventPropagation: true,
+              emitter: null,
           };
       };
 
@@ -4821,19 +4903,19 @@ System.register('pops', [], (function (exports) {
           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>
@@ -4844,13 +4926,13 @@ System.register('pops', [], (function (exports) {
                     ${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);
               /**
                * 遮罩层元素
                */
@@ -4862,7 +4944,7 @@ System.register('pops', [], (function (exports) {
               if (config.mask.enable) {
                   // 创建遮罩层
                   const handleMask = PopsHandler.handleMask({
-                      type: PopsType,
+                      type: popsType,
                       guid: guid,
                       config: config,
                       animElement: $anim,
@@ -4871,12 +4953,12 @@ System.register('pops', [], (function (exports) {
                   $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,
@@ -5045,8 +5127,8 @@ System.register('pops', [], (function (exports) {
               style: null,
               lightStyle: null,
               darkStyle: null,
-              beforeAppendToPageCallBack() { },
               stopKeyDownEventPropagation: true,
+              emitter: null,
           };
       };
 
@@ -5083,11 +5165,11 @@ System.register('pops', [], (function (exports) {
               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, [
                   {
@@ -6010,8 +6092,8 @@ System.register('pops', [], (function (exports) {
               style: null,
               lightStyle: null,
               darkStyle: null,
-              beforeAppendToPageCallBack() { },
               stopKeyDownEventPropagation: true,
+              emitter: null,
           };
       };
 
@@ -6020,7 +6102,6 @@ System.register('pops', [], (function (exports) {
               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__);
@@ -6028,6 +6109,8 @@ System.register('pops', [], (function (exports) {
                   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, [
                   {
@@ -6055,7 +6138,7 @@ System.register('pops', [], (function (exports) {
                       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);
@@ -7136,9 +7219,9 @@ System.register('pops', [], (function (exports) {
               style: null,
               lightStyle: null,
               darkStyle: null,
-              beforeAppendToPageCallBack() { },
               stopKeyDownEventPropagation: true,
               listenEscapeKeyUpToExitDeepMenu: true,
+              emitter: null,
           };
       };
 
@@ -7250,7 +7333,7 @@ System.register('pops', [], (function (exports) {
               style: "",
               lightStyle: null,
               darkStyle: null,
-              beforeAppendToPageCallBack() { },
+              emitter: null,
           };
       };
 
@@ -7718,7 +7801,6 @@ System.register('pops', [], (function (exports) {
               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__);
@@ -7735,6 +7817,7 @@ System.register('pops', [], (function (exports) {
                       config.onShowEventName += ` ${it}`;
                   });
               }
+              const emitter = config.emitter ?? new EventEmiter(popsType);
               const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
               PopsHandler.handleInit($shadowRoot, [
                   {
@@ -11600,11 +11683,11 @@ System.register('pops', [], (function (exports) {
               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, [
                   {
@@ -11854,8 +11937,8 @@ System.register('pops', [], (function (exports) {
               style: null,
               lightStyle: null,
               darkStyle: null,
-              beforeAppendToPageCallBack() { },
               stopKeyDownEventPropagation: true,
+              emitter: null,
           };
       };
 
@@ -11864,11 +11947,11 @@ System.register('pops', [], (function (exports) {
               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, [
                   {
@@ -12089,10 +12172,10 @@ System.register('pops', [], (function (exports) {
               style: null,
               lightStyle: null,
               darkStyle: null,
-              beforeAppendToPageCallBack() { },
               limitPositionXInView: true,
               limitPositionYInView: true,
               beforeShowCallBack() { },
+              emitter: null,
           };
       };
 
@@ -12101,11 +12184,11 @@ System.register('pops', [], (function (exports) {
               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, [
                   {
@@ -12727,6 +12810,7 @@ System.register('pops', [], (function (exports) {
               style: "",
               lightStyle: null,
               darkStyle: null,
+              emitter: null,
           };
       };
 
@@ -12735,7 +12819,6 @@ System.register('pops', [], (function (exports) {
               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__);
@@ -12743,6 +12826,7 @@ System.register('pops', [], (function (exports) {
               if (config.$inputTarget == null) {
                   config.$inputTarget = config.$target;
               }
+              const emitter = config.emitter ?? new EventEmiter(popsType);
               const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
               PopsHandler.handleInit($shadowRoot, [
                   {
@@ -13627,6 +13711,8 @@ System.register('pops', [], (function (exports) {
               PopsAnimation,
               /** 事件类 */
               EventEmiter,
+              /** 通用的CSS类名 */
+              PopsCommonCSSClassName,
           };
           init() { }
           /**