@whitesev/pops 2.0.3 → 2.0.4

package/dist/index.umd.js

@@ -1225,30 +1225,32 @@
             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);
                 }
             }
         }
@@ -1907,31 +1909,37 @@
          * @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) {
@@ -1940,6 +1948,7 @@
                                 popsDOMUtils.off(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
                                     capture: true,
                                 });
+                                resolve();
                             }
                             popsDOMUtils.on(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
                                 capture: true,
@@ -1950,11 +1959,11 @@
                             if (layerConfigItem.maskElement) {
                                 layerConfigItem.maskElement.style.display = "none";
                             }
+                            resolve();
                         }
-                        return;
                     }
-                });
-            }
+                }
+            });
         },
         /**
          * 显示
@@ -1966,27 +1975,30 @@
          * @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"] =
@@ -1994,14 +2006,18 @@
                                 .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,
@@ -2012,11 +2028,11 @@
                             if (layerConfigItem.maskElement) {
                                 layerConfigItem.maskElement.style.display = "";
                             }
+                            resolve();
                         }
                     }
-                    return;
-                });
-            }
+                }
+            });
         },
         /**
          * 关闭
@@ -2027,50 +2043,57 @@
          * @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);
-            }
+            });
         },
         /**
          * 拖拽元素
@@ -2799,11 +2822,11 @@
                 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") {
@@ -2982,13 +3005,13 @@
                 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);
                 },
             };
         },
@@ -3010,13 +3033,13 @@
                 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);
                 },
             };
         },
@@ -3784,6 +3807,9 @@
                     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);
@@ -10058,7 +10084,7 @@
         /** 配置 */
         config = {
             /** 版本号 */
-            version: "2025.5.1",
+            version: "2025.5.12",
             cssText: {
                 /** 主CSS */
                 index: indexCSS,