@whitesev/pops 2.0.3 → 2.0.5

package/dist/index.cjs.js

@@ -1221,30 +1221,32 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
         if (element == null) {
             return;
         }
+        let setStyleProperty = (propertyName, propertyValue) => {
+            if (typeof propertyValue === "string" &&
+                propertyValue.trim().endsWith("!important")) {
+                propertyValue = propertyValue
+                    .trim()
+                    .replace(/!important$/gi, "")
+                    .trim();
+                element.style.setProperty(propertyName, propertyValue, "important");
+            }
+            else {
+                propertyValue = handlePixe(propertyName, propertyValue);
+                element.style.setProperty(propertyName, propertyValue);
+            }
+        };
         if (typeof property === "string") {
             if (value == null) {
                 return getComputedStyle(element).getPropertyValue(property);
             }
             else {
-                if (value === "string" && value.includes("!important")) {
-                    element.style.setProperty(property, value, "important");
-                }
-                else {
-                    value = handlePixe(property, value);
-                    element.style.setProperty(property, value);
-                }
+                setStyleProperty(property, value);
             }
         }
         else if (typeof property === "object") {
             for (let prop in property) {
-                if (typeof property[prop] === "string" &&
-                    property[prop].includes("!important")) {
-                    element.style.setProperty(prop, property[prop], "important");
-                }
-                else {
-                    property[prop] = handlePixe(prop, property[prop]);
-                    element.style.setProperty(prop, property[prop]);
-                }
+                let value = property[prop];
+                setStyleProperty(prop, value);
             }
         }
     }
@@ -1903,31 +1905,37 @@ const PopsInstanceUtils = {
      * @param maskElement
      */
     hide(popsType, layerConfigList, guid, config, animElement, maskElement) {
-        let popsElement = animElement.querySelector(".pops[type-value]");
-        if (popsType === "drawer") {
-            let drawerConfig = config;
-            setTimeout(() => {
-                maskElement.style.setProperty("display", "none");
-                if (["top", "bottom"].includes(drawerConfig.direction)) {
-                    popsElement.style.setProperty("height", "0");
-                }
-                else if (["left", "right"].includes(drawerConfig.direction)) {
-                    popsElement.style.setProperty("width", "0");
-                }
-                else {
-                    console.error("未知direction：", drawerConfig.direction);
-                }
-            }, drawerConfig.closeDelay);
-        }
-        else {
-            layerConfigList.forEach((layerConfigItem) => {
-                if (layerConfigItem.guid === guid) {
+        return new Promise((resolve) => {
+            let popsElement = animElement.querySelector(".pops[type-value]");
+            if (popsType === "drawer") {
+                let drawerConfig = config;
+                setTimeout(() => {
+                    maskElement.style.setProperty("display", "none");
+                    if (["top", "bottom"].includes(drawerConfig.direction)) {
+                        popsElement.style.setProperty("height", "0");
+                    }
+                    else if (["left", "right"].includes(drawerConfig.direction)) {
+                        popsElement.style.setProperty("width", "0");
+                    }
+                    else {
+                        console.error("未知direction：", drawerConfig.direction);
+                    }
+                    resolve();
+                }, drawerConfig.closeDelay);
+            }
+            else {
+                let findLayerIns = layerConfigList.find((layerConfigItem) => layerConfigItem.guid === guid);
+                if (findLayerIns) {
                     /* 存在动画 */
+                    let layerConfigItem = findLayerIns;
                     layerConfigItem.animElement.style.width = "100%";
                     layerConfigItem.animElement.style.height = "100%";
                     layerConfigItem.animElement.style["animation-name"] =
                         layerConfigItem.animElement.getAttribute("anim") + "-reverse";
                     if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.style["animation-name"])) {
+                        /**
+                         * 动画结束的回调
+                         */
                         function animationendCallBack() {
                             layerConfigItem.animElement.style.display = "none";
                             if (layerConfigItem.maskElement) {
@@ -1936,6 +1944,7 @@ const PopsInstanceUtils = {
                             popsDOMUtils.off(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
                                 capture: true,
                             });
+                            resolve();
                         }
                         popsDOMUtils.on(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
                             capture: true,
@@ -1946,11 +1955,11 @@ const PopsInstanceUtils = {
                         if (layerConfigItem.maskElement) {
                             layerConfigItem.maskElement.style.display = "none";
                         }
+                        resolve();
                     }
-                    return;
                 }
-            });
-        }
+            }
+        });
     },
     /**
      * 显示
@@ -1962,27 +1971,30 @@ const PopsInstanceUtils = {
      * @param maskElement
      */
     show(popsType, layerConfigList, guid, config, animElement, maskElement) {
-        let popsElement = animElement.querySelector(".pops[type-value]");
-        if (popsType === "drawer") {
-            let drawerConfig = config;
-            setTimeout(() => {
-                maskElement.style.setProperty("display", "");
-                let direction = drawerConfig.direction;
-                let size = drawerConfig.size.toString();
-                if (["top", "bottom"].includes(direction)) {
-                    popsElement.style.setProperty("height", size);
-                }
-                else if (["left", "right"].includes(direction)) {
-                    popsElement.style.setProperty("width", size);
-                }
-                else {
-                    console.error("未知direction：", direction);
-                }
-            }, drawerConfig.openDelay);
-        }
-        else {
-            layerConfigList.forEach((layerConfigItem) => {
-                if (layerConfigItem.guid === guid) {
+        return new Promise((resolve) => {
+            let popsElement = animElement.querySelector(".pops[type-value]");
+            if (popsType === "drawer") {
+                let drawerConfig = config;
+                setTimeout(() => {
+                    popsDOMUtils.css(maskElement, "display", "");
+                    let direction = drawerConfig.direction;
+                    let size = drawerConfig.size.toString();
+                    if (["top", "bottom"].includes(direction)) {
+                        popsElement.style.setProperty("height", size);
+                    }
+                    else if (["left", "right"].includes(direction)) {
+                        popsElement.style.setProperty("width", size);
+                    }
+                    else {
+                        console.error("未知direction：", direction);
+                    }
+                    resolve();
+                }, drawerConfig.openDelay);
+            }
+            else {
+                let findLayerIns = layerConfigList.find((layerConfigItem) => layerConfigItem.guid === guid);
+                if (findLayerIns) {
+                    let layerConfigItem = findLayerIns;
                     layerConfigItem.animElement.style.width = "";
                     layerConfigItem.animElement.style.height = "";
                     layerConfigItem.animElement.style["animation-name"] =
@@ -1990,14 +2002,18 @@ const PopsInstanceUtils = {
                             .animElement.getAttribute("anim")
                             .replace("-reverse", "");
                     if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.style["animation-name"])) {
-                        layerConfigItem.animElement.style.display = "";
-                        if (layerConfigItem.maskElement) {
-                            layerConfigItem.maskElement.style.display = "";
-                        }
+                        /**
+                         * 动画结束的回调
+                         */
                         function animationendCallBack() {
                             popsDOMUtils.off(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
                                 capture: true,
                             });
+                            resolve();
+                        }
+                        layerConfigItem.animElement.style.display = "";
+                        if (layerConfigItem.maskElement) {
+                            layerConfigItem.maskElement.style.display = "";
                         }
                         popsDOMUtils.on(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
                             capture: true,
@@ -2008,11 +2024,11 @@ const PopsInstanceUtils = {
                         if (layerConfigItem.maskElement) {
                             layerConfigItem.maskElement.style.display = "";
                         }
+                        resolve();
                     }
                 }
-                return;
-            });
-        }
+            }
+        });
     },
     /**
      * 关闭
@@ -2023,50 +2039,57 @@ const PopsInstanceUtils = {
      * @param animElement
      */
     close(popsType, layerConfigList, guid, config, animElement) {
-        let popsElement = animElement.querySelector(".pops[type-value]");
-        let drawerConfig = config;
-        /**
-         * 动画结束事件
-         */
-        function transitionendEvent() {
-            function closeCallBack(event) {
-                if (event.propertyName !== "transform") {
+        return new Promise((resolve) => {
+            let popsElement = animElement.querySelector(".pops[type-value]");
+            let drawerConfig = config;
+            /**
+             * 动画结束事件
+             */
+            function transitionendEvent() {
+                /**
+                 * 弹窗已关闭的回调
+                 */
+                function closeCallBack(event) {
+                    if (event.propertyName !== "transform") {
+                        return;
+                    }
+                    popsDOMUtils.off(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, closeCallBack);
+                    PopsInstanceUtils.removeInstance([layerConfigList], guid);
+                    resolve();
+                }
+                /* 监听过渡结束 */
+                popsDOMUtils.on(popsElement, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
+                let popsTransForm = getComputedStyle(popsElement).transform;
+                if (popsTransForm !== "none") {
+                    popsDOMUtils.trigger(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, true);
                     return;
                 }
-                popsDOMUtils.off(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, closeCallBack);
-                PopsInstanceUtils.removeInstance([layerConfigList], guid);
-            }
-            /* 监听过渡结束 */
-            popsDOMUtils.on(popsElement, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
-            let popsTransForm = getComputedStyle(popsElement).transform;
-            if (popsTransForm !== "none") {
-                popsDOMUtils.trigger(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, true);
-                return;
-            }
-            if (["top"].includes(drawerConfig.direction)) {
-                popsElement.style.setProperty("transform", "translateY(-100%)");
-            }
-            else if (["bottom"].includes(drawerConfig.direction)) {
-                popsElement.style.setProperty("transform", "translateY(100%)");
-            }
-            else if (["left"].includes(drawerConfig.direction)) {
-                popsElement.style.setProperty("transform", "translateX(-100%)");
+                if (["top"].includes(drawerConfig.direction)) {
+                    popsElement.style.setProperty("transform", "translateY(-100%)");
+                }
+                else if (["bottom"].includes(drawerConfig.direction)) {
+                    popsElement.style.setProperty("transform", "translateY(100%)");
+                }
+                else if (["left"].includes(drawerConfig.direction)) {
+                    popsElement.style.setProperty("transform", "translateX(-100%)");
+                }
+                else if (["right"].includes(drawerConfig.direction)) {
+                    popsElement.style.setProperty("transform", "translateX(100%)");
+                }
+                else {
+                    console.error("未知direction：", drawerConfig.direction);
+                }
             }
-            else if (["right"].includes(drawerConfig.direction)) {
-                popsElement.style.setProperty("transform", "translateX(100%)");
+            if (popsType === "drawer") {
+                setTimeout(() => {
+                    transitionendEvent();
+                }, drawerConfig.closeDelay);
             }
             else {
-                console.error("未知direction：", drawerConfig.direction);
+                PopsInstanceUtils.removeInstance([layerConfigList], guid);
+                resolve();
             }
-        }
-        if (popsType === "drawer") {
-            setTimeout(() => {
-                transitionendEvent();
-            }, drawerConfig.closeDelay);
-        }
-        else {
-            PopsInstanceUtils.removeInstance([layerConfigList], guid);
-        }
+        });
     },
     /**
      * 拖拽元素
@@ -2795,11 +2818,11 @@ const PopsHandler = {
             function originalRun() {
                 if (details.config.mask.clickEvent.toClose) {
                     /* 关闭 */
-                    PopsInstanceUtils.close(details.type, targetLayer, details.guid, details.config, details.animElement);
+                    return PopsInstanceUtils.close(details.type, targetLayer, details.guid, details.config, details.animElement);
                 }
                 else if (details.config.mask.clickEvent.toHide) {
                     /* 隐藏 */
-                    PopsInstanceUtils.hide(details.type, targetLayer, details.guid, details.config, details.animElement, result.maskElement);
+                    return PopsInstanceUtils.hide(details.type, targetLayer, details.guid, details.config, details.animElement, result.maskElement);
                 }
             }
             if (typeof details.config.mask.clickCallBack === "function") {
@@ -2978,13 +3001,13 @@ const PopsHandler = {
             mode: mode,
             guid: guid,
             close() {
-                PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
+                return PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
             },
             hide() {
-                PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
+                return PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
             },
             show() {
-                PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
+                return PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
             },
         };
     },
@@ -3006,13 +3029,13 @@ const PopsHandler = {
             mode: mode,
             guid: guid,
             close() {
-                PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
+                return PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
             },
             hide() {
-                PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
+                return PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
             },
             show() {
-                PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
+                return PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
             },
         };
     },
@@ -3761,6 +3784,9 @@ class PopsLoading {
          * 弹窗的主元素，包括动画层
          */
         let $anim = PopsElementHandler.parseElement(animHTML);
+        // 遮罩层必须是跟随主内容
+        // 即设置主内容position: relative，mask：position: absolute
+        popsDOMUtils.css($anim, "position", "absolute !important");
         let { popsElement: $pops } = PopsHandler.handleQueryElement($anim, PopsType);
         /**
          * 遮罩层元素
@@ -3780,6 +3806,9 @@ class PopsLoading {
                 maskHTML: maskHTML,
             });
             $mask = _handleMask_.maskElement;
+            // 遮罩层必须是跟随主内容
+            // 即设置主内容position: relative，mask：position: absolute
+            popsDOMUtils.css($mask, "position", "absolute !important");
             elementList.push($mask);
         }
         let eventDetails = PopsHandler.handleLoadingEventDetails(guid, PopsType, $anim, $pops, $mask, config);
@@ -10054,7 +10083,7 @@ class Pops {
     /** 配置 */
     config = {
         /** 版本号 */
-        version: "2025.5.1",
+        version: "2025.5.12",
         cssText: {
             /** 主CSS */
             index: indexCSS,