@whitesev/pops 4.2.1 → 4.2.3

package/dist/index.system.js

@@ -3,7 +3,7 @@ System.register('pops', [], (function (exports) {
   return {
     execute: (function () {
 
-      const version = "4.2.1";
+      const version = "4.2.3";
 
       const GlobalConfig = {
           config: {},
@@ -247,6 +247,24 @@ System.register('pops', [], (function (exports) {
           },
       };
 
+      /**
+       * 通用的CSS类名
+       */
+      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",
+          lineHeightCenter: "pops-line-height-center",
+          widthFill: "pops-width-fill",
+          textIsDisabled: "pops-text-is-disabled",
+          textIsDisabledImportant: "pops-text-is-disabled-important",
+      };
+
       const OriginPrototype = {
           Object: {
               defineProperty: Object.defineProperty,
@@ -296,6 +314,30 @@ System.register('pops', [], (function (exports) {
           },
       };
 
+      const PopsSafeUtils = {
+          /**
+           * 获取安全的html
+           */
+          getSafeHTML(text) {
+              if (window.trustedTypes) {
+                  const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
+                      createHTML: (html) => html,
+                  });
+                  return policy.createHTML(text);
+              }
+              else {
+                  return text;
+              }
+          },
+          /**
+           * 设置安全的html
+           */
+          setSafeHTML($el, text) {
+              // 创建 TrustedHTML 策略（需 CSP 允许）
+              $el.innerHTML = this.getSafeHTML(text);
+          },
+      };
+
       const n$1="clientX",e$2="clientY",t$1=16,c$3="start",o$1="move",s$1="cancel",u$3="end",a$2="left",i$3="right",r$4="up",d$1="down",m$2={4:"start",5:"move",1:"end",3:"cancel"};function v$1(n){return m$2[n]}function b(n,e,t){const c={1:{0:{move:4},4:{move:5,end:1,cancel:3},5:{move:5,end:1,cancel:3}},0:{4:{move:2,end:1,cancel:3},5:{start:2,move:2,end:1,cancel:3}}}[Number(n)][e];return void 0!==c&&c[t]||0}function g$1(n){[1,3,2].includes(n.state)&&(n.state=0);}function h$3(n){return [5,1,3].includes(n)}function j(n){if(n.disabled)return n.state=0,true}function O(n,e){return Object.assign(Object.assign(Object.assign({},n),e),{state:0,disabled:false})}function p$3(n){return Math.round(100*n)/100}
 
       var x=r=>Math.sqrt(r.x*r.x+r.y*r.y),y=(r,a)=>r.x*a.x+r.y*a.y,e$1=(r,a)=>{var t=x(r)*x(a);if(0===t)return 0;var h=y(r,a)/t;return h>1&&(h=1),Math.acos(h)},n=(r,a)=>r.x*a.y-a.x*r.y,o=r=>r/Math.PI*180,s=(r,a)=>{var t=e$1(r,a);return n(r,a)>0&&(t*=-1),o(t)},u$2=(x,y)=>{if(0!==x||0!==y)return Math.abs(x)>=Math.abs(y)?0<x?i$3:a$2:0<y?d$1:r$4};
@@ -636,6 +678,10 @@ System.register('pops', [], (function (exports) {
               if (typeof deviation !== "number" || Number.isNaN(deviation)) {
                   deviation = 10;
               }
+              // 最大值 2147483647
+              // const maxZIndex = Math.pow(2, 31) - 1;
+              // 比较值 2000000000
+              const maxZIndexCompare = 2 * Math.pow(10, 9);
               /** 坐标偏移 */
               const positionDistance = 10;
               const defaultCalcPostion = [];
@@ -730,9 +776,14 @@ System.register('pops', [], (function (exports) {
                           left: maxRect.left,
                       };
                   }
+                  const calcZIndex = zIndex + deviation;
+                  if (calcZIndex >= maxZIndexCompare) {
+                      // 不要超过最大值
+                      return;
+                  }
                   return {
                       /** 计算偏移量后的z-index值 */
-                      zIndex: zIndex + deviation,
+                      zIndex: calcZIndex,
                       /** 获取到的最大的z-index值 */
                       originZIndex: zIndex,
                       /** 拥有最大z-index的元素 */
@@ -765,48 +816,6 @@ System.register('pops', [], (function (exports) {
       }
       const popsUtils = new PopsUtils();
 
-      const PopsSafeUtils = {
-          /**
-           * 获取安全的html
-           */
-          getSafeHTML(text) {
-              if (window.trustedTypes) {
-                  const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
-                      createHTML: (html) => html,
-                  });
-                  return policy.createHTML(text);
-              }
-              else {
-                  return text;
-              }
-          },
-          /**
-           * 设置安全的html
-           */
-          setSafeHTML($el, text) {
-              // 创建 TrustedHTML 策略（需 CSP 允许）
-              $el.innerHTML = this.getSafeHTML(text);
-          },
-      };
-
-      /**
-       * 通用的CSS类名
-       */
-      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",
-          lineHeightCenter: "pops-line-height-center",
-          widthFill: "pops-width-fill",
-          textIsDisabled: "pops-text-is-disabled",
-          textIsDisabledImportant: "pops-text-is-disabled-important",
-      };
-
       /**
        * 存储在元素属性上的事件名
        */
@@ -896,91 +905,91 @@ System.register('pops', [], (function (exports) {
                   // 这是存在selector的情况
                   listenerOption = getOption(args, 4, listenerOption);
               }
-              /**
-               * 如果是once，那么删除该监听和元素上的事件和监听
-               */
-              const checkOptionOnceToRemoveEventListener = ($el) => {
-                  if (listenerOption.once) {
-                      this.off($el, eventTypeList, selector, callback, option);
-                  }
-              };
               $elList.forEach(($elItem) => {
-                  /**
-                   * 事件回调
-                   * @param event
-                   */
-                  const handlerCallBack = function (event) {
-                      let call_this = void 0;
-                      let call_event = void 0;
-                      let call_$selector = void 0;
-                      let execCallback = false;
-                      if (selectorList.length) {
-                          // 存在子元素选择器
-                          // 这时候的this和target都是子元素选择器的元素
-                          let $target;
-                          if (listenerOption.isComposedPath) {
-                              // 可能为空
-                              const composedPath = event.composedPath();
-                              if (!composedPath.length && event.target) {
-                                  composedPath.push(event.target);
-                              }
-                              $target = composedPath[0];
+                  // 遍历事件名设置元素事件
+                  eventTypeList.forEach((eventName) => {
+                      /**
+                       * 如果是option.once，那么删除该监听和元素上的事件和监听
+                       */
+                      const checkOptionOnceToRemoveEventListener = () => {
+                          if (listenerOption.once) {
+                              this.off($elItem, eventName, selector, callback, option);
                           }
-                          else {
-                              $target = event.target;
-                          }
-                          let $parent = $elItem;
-                          if (popsUtils.isWin($parent)) {
-                              // window和document共用一个对象
-                              // 这样就能处理子元素选择器无法匹配的问题
-                              $parent = PopsCore.document.documentElement;
-                          }
-                          const findValue = selectorList.find((selectors) => {
-                              // 判断目标元素是否匹配选择器
-                              if (that.matches($target, selectors)) {
-                                  // 当前目标可以被selector所匹配到
-                                  return true;
+                      };
+                      /**
+                       * 事件回调
+                       * @param event
+                       */
+                      const handlerCallBack = function (event) {
+                          let call_this = void 0;
+                          let call_event = void 0;
+                          let call_$selector = void 0;
+                          let execCallback = false;
+                          if (selectorList.length) {
+                              // 存在子元素选择器
+                              // 这时候的this和target都是子元素选择器的元素
+                              let $target;
+                              if (listenerOption.isComposedPath) {
+                                  // 可能为空
+                                  const composedPath = event.composedPath();
+                                  if (!composedPath.length && event.target) {
+                                      composedPath.push(event.target);
+                                  }
+                                  $target = composedPath[0];
                               }
-                              // 在上层与主元素之间寻找可以被selector所匹配到的
-                              const $closestMatches = that.closest($target, selectors);
-                              if ($closestMatches && $parent?.contains?.($closestMatches)) {
-                                  $target = $closestMatches;
-                                  return true;
+                              else {
+                                  $target = event.target;
                               }
-                              return false;
-                          });
-                          if (findValue) {
-                              // 这里尝试使用defineProperty修改event的target值
-                              try {
-                                  OriginPrototype.Object.defineProperty(event, "target", {
-                                      get() {
-                                          return $target;
-                                      },
-                                  });
-                                  // oxlint-disable-next-line no-empty
+                              let $parent = $elItem;
+                              if (popsUtils.isWin($parent)) {
+                                  // window和document共用一个对象
+                                  // 这样就能处理子元素选择器无法匹配的问题
+                                  $parent = PopsCore.document.documentElement;
+                              }
+                              const findValue = selectorList.find((selectors) => {
+                                  // 判断目标元素是否匹配选择器
+                                  if (that.matches($target, selectors)) {
+                                      // 当前目标可以被selector所匹配到
+                                      return true;
+                                  }
+                                  // 在上层与主元素之间寻找可以被selector所匹配到的
+                                  const $closestMatches = that.closest($target, selectors);
+                                  if ($closestMatches && $parent?.contains?.($closestMatches)) {
+                                      $target = $closestMatches;
+                                      return true;
+                                  }
+                                  return false;
+                              });
+                              if (findValue) {
+                                  // 这里尝试使用defineProperty修改event的target值
+                                  try {
+                                      OriginPrototype.Object.defineProperty(event, "target", {
+                                          get() {
+                                              return $target;
+                                          },
+                                      });
+                                      // oxlint-disable-next-line no-empty
+                                  }
+                                  catch { }
+                                  execCallback = true;
+                                  call_this = $target;
+                                  call_event = event;
+                                  call_$selector = $target;
                               }
-                              catch { }
+                          }
+                          else {
                               execCallback = true;
-                              call_this = $target;
+                              call_this = $elItem;
                               call_event = event;
-                              call_$selector = $target;
                           }
-                      }
-                      else {
-                          execCallback = true;
-                          call_this = $elItem;
-                          call_event = event;
-                      }
-                      if (execCallback) {
-                          const result = listenerCallBack.call(call_this, call_event, call_$selector);
-                          checkOptionOnceToRemoveEventListener($elItem);
-                          if (typeof result === "boolean" && !result) {
-                              return false;
+                          if (execCallback) {
+                              const result = listenerCallBack.call(call_this, call_event, call_$selector);
+                              checkOptionOnceToRemoveEventListener();
+                              if (typeof result === "boolean" && !result) {
+                                  return false;
+                              }
                           }
-                      }
-                  };
-                  // 遍历事件名设置元素事件
-                  eventTypeList.forEach((eventName) => {
+                      };
                       // add listener
                       $elItem.addEventListener(eventName, handlerCallBack, listenerOption);
                       // 获取对象上的事件
@@ -1093,31 +1102,34 @@ System.register('pops', [], (function (exports) {
                   const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
                   eventTypeList.forEach((eventName) => {
                       const handlers = elementEvents[eventName] || [];
-                      const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
-                      for (let index = 0; index < filterHandler.length; index++) {
-                          const handler = filterHandler[index];
+                      // 过滤出需要删除的事件
+                      const handlersFiltered = typeof filter === "function" ? handlers.filter(filter) : handlers;
+                      for (let index = 0; index < handlersFiltered.length; index++) {
+                          const handler = handlersFiltered[index];
+                          // 过滤出的事件再根据下面的条件进行判断处理移除
+                          // 1. callback内存地址必须相同
+                          // 2. selector必须相同
+                          // 3. option.capture必须相同
                           let flag = true;
                           if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
-                              // callback不同
                               flag = false;
                           }
                           if (flag && selectorList.length && Array.isArray(handler.selector)) {
                               if (JSON.stringify(handler.selector) !== JSON.stringify(selectorList)) {
-                                  // 子元素选择器不同
                                   flag = false;
                               }
                           }
                           if (flag &&
                               typeof handler.option.capture === "boolean" &&
                               listenerOption.capture !== handler.option.capture) {
-                              // 事件的配置项不同
                               flag = false;
                           }
                           if (flag) {
                               $elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
-                              const findIndex = handlers.findIndex((item) => item === handler);
-                              if (findIndex !== -1) {
-                                  handlers.splice(findIndex, 1);
+                              for (let i = handlers.length - 1; i >= 0; i--) {
+                                  if (handlers[i] === handler) {
+                                      handlers.splice(i, 1);
+                                  }
                               }
                           }
                       }
@@ -3181,8 +3193,8 @@ System.register('pops', [], (function (exports) {
            * 获取pops所有弹窗中的最大的z-index
            * @param deviation
            */
-          getPopsMaxZIndex(deviation = 1) {
-              deviation = Number.isNaN(deviation) ? 1 : deviation;
+          getPopsMaxZIndex(deviation = 10) {
+              deviation = Number.isNaN(deviation) ? 10 : deviation;
               // 最大值 2147483647
               // const browserMaxZIndex = Math.pow(2, 31) - 1;
               // 比较值 2000000000
@@ -3197,8 +3209,7 @@ System.register('pops', [], (function (exports) {
                       const inst = instData[index];
                       // 不对position为static和display为none的元素进行获取它们的z-index
                       const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
-                      const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
-                      const maxNodeZIndexInfo = nodeZIndexInfoList[0];
+                      const maxNodeZIndexInfo = popsUtils.getMaxZIndexNodeInfoFromPoint($elList)[0];
                       if (maxNodeZIndexInfo) {
                           const nodeZIndex = maxNodeZIndexInfo.zIndex;
                           if (nodeZIndex > zIndex) {