@whitesev/pops 4.2.1 → 4.2.3

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-const version = "4.2.1";
+const version = "4.2.3";
 
 const GlobalConfig = {
     config: {},
@@ -242,6 +242,24 @@ const PopsIcon = {
     },
 };
 
+/**
+ * 通用的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,
@@ -291,6 +309,30 @@ const PopsCore = {
     },
 };
 
+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};
@@ -631,6 +673,10 @@ class PopsUtils {
         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 = [];
@@ -725,9 +771,14 @@ class PopsUtils {
                     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的元素 */
@@ -760,48 +811,6 @@ class PopsUtils {
 }
 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",
-};
-
 /**
  * 存储在元素属性上的事件名
  */
@@ -891,91 +900,91 @@ class PopsDOMUtilsEvent {
             // 这是存在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);
                 // 获取对象上的事件
@@ -1088,31 +1097,34 @@ class PopsDOMUtilsEvent {
             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);
+                            }
                         }
                     }
                 }
@@ -3176,8 +3188,8 @@ const PopsInstanceUtils = {
      * 获取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
@@ -3192,8 +3204,7 @@ const PopsInstanceUtils = {
                 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) {