@whitesev/pops 2.0.2 → 2.0.4

package/dist/index.system.js

@@ -1224,30 +1224,32 @@ System.register('pops', [], (function (exports) {
                     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);
                         }
                     }
                 }
@@ -1906,31 +1908,37 @@ System.register('pops', [], (function (exports) {
                  * @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) {
@@ -1939,6 +1947,7 @@ System.register('pops', [], (function (exports) {
                                         popsDOMUtils.off(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
                                             capture: true,
                                         });
+                                        resolve();
                                     }
                                     popsDOMUtils.on(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
                                         capture: true,
@@ -1949,11 +1958,11 @@ System.register('pops', [], (function (exports) {
                                     if (layerConfigItem.maskElement) {
                                         layerConfigItem.maskElement.style.display = "none";
                                     }
+                                    resolve();
                                 }
-                                return;
                             }
-                        });
-                    }
+                        }
+                    });
                 },
                 /**
                  * 显示
@@ -1965,27 +1974,30 @@ System.register('pops', [], (function (exports) {
                  * @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"] =
@@ -1993,14 +2005,18 @@ System.register('pops', [], (function (exports) {
                                         .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,
@@ -2011,11 +2027,11 @@ System.register('pops', [], (function (exports) {
                                     if (layerConfigItem.maskElement) {
                                         layerConfigItem.maskElement.style.display = "";
                                     }
+                                    resolve();
                                 }
                             }
-                            return;
-                        });
-                    }
+                        }
+                    });
                 },
                 /**
                  * 关闭
@@ -2026,50 +2042,57 @@ System.register('pops', [], (function (exports) {
                  * @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);
-                    }
+                    });
                 },
                 /**
                  * 拖拽元素
@@ -2474,7 +2497,7 @@ System.register('pops', [], (function (exports) {
                     if (style.startsWith(";")) {
                         style = style.replace(";", "");
                     }
-                    return `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
+                    return /*html*/ `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
                 },
                 /**
                  * 获取动画层HTML
@@ -2502,23 +2525,10 @@ System.register('pops', [], (function (exports) {
                     }
                     let hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
                     return /*html*/ `
-		<div 
-			class="pops-anim"
-			anim="${__config.animation || ""}"
-			style="${popsAnimStyle}"
-			data-guid="${guid}">
-            ${config.style != null
+		<div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null
             ? `<style tyle="text/css">${config.style}</style>`
             : ""}
-			<div
-				class="pops ${config.class || ""}"
-				data-bottom-btn="${hasBottomBtn}"
-				type-value="${type}"
-				style="${popsStyle}"
-				position="${popsPosition}"
-				data-guid="${guid}">
-				${html}
-			</div>
+			<div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
 		</div>`;
                 },
                 /**
@@ -2543,22 +2553,20 @@ System.register('pops', [], (function (exports) {
                         let topRightButtonHTML = "";
                         __config_iframe.topRightButton.split("|").forEach((item) => {
                             item = item.toLowerCase();
-                            topRightButtonHTML += `
+                            topRightButtonHTML += /*html*/ `
                 <button class="pops-header-control" type="${item}">
                     <i class="pops-icon">${pops.config.iconSVG[item]}</i>
                 </button>`;
                         });
-                        resultHTML = `
-            <div class="pops-header-controls" data-margin>
-                ${topRightButtonHTML}
-            </div>`;
+                        resultHTML = /*html*/ `
+            <div class="pops-header-controls" data-margin>${topRightButtonHTML}</div>`;
                     }
                     else {
                         if (__config_confirm.btn?.close?.enable) {
-                            closeHTML = `
+                            closeHTML = /*html*/ `
                 <div class="pops-header-controls">
                     <button class="pops-header-control" type="close" data-header>
-                    <i class="pops-icon">${pops.config.iconSVG["close"]}</i>
+                    	<i class="pops-icon">${pops.config.iconSVG["close"]}</i>
                     </button>
                 </div>`;
                         }
@@ -2615,20 +2623,15 @@ System.register('pops', [], (function (exports) {
                                 iconHTML = okIcon;
                             }
                             iconHTML = iconHTML || "";
-                            okIconHTML = `
-                <i class="pops-bottom-icon" is-loading="${config.btn.ok.iconIsLoading}">
-                    ${iconHTML}
-                </i>`;
+                            okIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${config.btn.ok.iconIsLoading}">${iconHTML}</i>`;
                         }
-                        okHTML = `
+                        okHTML = /*html*/ `
             <button 
                     class="pops-${type}-btn-ok ${okButtonSizeClassName}"
                     type="${__config_confirm.btn.ok?.type}"
 					data-has-icon="${(__config_confirm.btn.ok.icon || "") !== ""}"
                     data-rightIcon="${__config_confirm.btn.ok?.rightIcon}"
-            >
-            ${okIconHTML}
-                <span>${config.btn.ok.text}</span>
+            >${okIconHTML}<span>${config.btn.ok.text}</span>
             </button>`;
                     }
                     if (__config_confirm.btn?.cancel?.enable) {
@@ -2654,20 +2657,15 @@ System.register('pops', [], (function (exports) {
                                 iconHTML = cancelIcon;
                             }
                             iconHTML = iconHTML || "";
-                            cancelIconHTML = `
-                <i class="pops-bottom-icon" is-loading="${__config_confirm.btn.cancel.iconIsLoading}">
-                    ${iconHTML}
-                </i>`;
+                            cancelIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${__config_confirm.btn.cancel.iconIsLoading}">${iconHTML}</i>`;
                         }
-                        cancelHTML = `
+                        cancelHTML = /*html*/ `
             <button
                     class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
                     type="${__config_confirm.btn.cancel.type}"
 					data-has-icon="${(__config_confirm.btn.cancel.icon || "") !== ""}"
                     data-rightIcon="${__config_confirm.btn.cancel.rightIcon}"
-            >
-            ${cancelIconHTML}
-                <span>${__config_confirm.btn.cancel.text}</span>
+            >${cancelIconHTML}<span>${__config_confirm.btn.cancel.text}</span>
             </button>`;
                     }
                     if (__config_confirm.btn?.other?.enable) {
@@ -2690,20 +2688,15 @@ System.register('pops', [], (function (exports) {
                                 iconHTML = pops.config.iconSVG[otherIcon];
                             }
                             iconHTML = iconHTML || "";
-                            otherIconHTML = `
-                <i class="pops-bottom-icon" is-loading="${__config_confirm.btn.other.iconIsLoading}">
-                    ${iconHTML}
-                </i>`;
+                            otherIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${__config_confirm.btn.other.iconIsLoading}">${iconHTML}</i>`;
                         }
-                        ohterHTML = `
+                        ohterHTML = /*html*/ `
             <button
                     class="pops-${type}-btn-other ${otherButtonSizeClassName}"
                     type="${__config_confirm.btn.other.type}"
 					data-has-icon="${(__config_confirm.btn.other.icon || "") !== ""}"
                     data-rightIcon="${__config_confirm.btn.other.rightIcon}"
-            >
-            ${otherIconHTML}
-                <span>${__config_confirm.btn.other.text}</span>
+            >${otherIconHTML}<span>${__config_confirm.btn.other.text}</span>
             </button>`;
                     }
                     if (__config_confirm.btn.merge) {
@@ -2714,33 +2707,22 @@ System.register('pops', [], (function (exports) {
                         else {
                             flexStyle += "flex-direction: row;";
                         }
-                        resultHTML = `
-            <div class="pops-${type}-btn" style="${btnStyle}">
-                ${ohterHTML}
-                <div 
+                        resultHTML = /*html*/ `
+            <div class="pops-${type}-btn" style="${btnStyle}">${ohterHTML}<div 
                     class="pops-${type}-btn-merge"
-                    style="${flexStyle}">
-                    ${okHTML}
-                    ${cancelHTML}
-                </div>
+                    style="${flexStyle}">${okHTML}${cancelHTML}</div>
             </div>
             `;
                     }
                     else {
-                        resultHTML = `
-            <div class="pops-${type}-btn" style="${btnStyle}">
-                ${okHTML}
-                ${cancelHTML}
-                ${ohterHTML}
-            </div>
-            `;
+                        resultHTML = /*html*/ `<div class="pops-${type}-btn" style="${btnStyle}">${okHTML}${cancelHTML}${ohterHTML}</div>`;
                     }
                     return resultHTML;
                 },
                 /**
                  * 获取标题style
-                 * @param type
-                 * @param config
+                 * @param type 弹窗类型
+                 * @param config 弹窗配置
                  */
                 getHeaderStyle(type, config) {
                     return {
@@ -2750,8 +2732,8 @@ System.register('pops', [], (function (exports) {
                 },
                 /**
                  * 获取内容style
-                 * @param type
-                 * @param config
+                 * @param type 弹窗类型
+                 * @param config 弹窗配置
                  */
                 getContentStyle(type, config) {
                     return {
@@ -2839,11 +2821,11 @@ System.register('pops', [], (function (exports) {
                         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") {
@@ -3022,13 +3004,13 @@ System.register('pops', [], (function (exports) {
                         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);
                         },
                     };
                 },
@@ -3050,13 +3032,13 @@ System.register('pops', [], (function (exports) {
                         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);
                         },
                     };
                 },
@@ -3295,21 +3277,12 @@ System.register('pops', [], (function (exports) {
                     let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
                     let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
                     /*html*/ `
-			<div 
-				class="pops-alert-title"
-				style="text-align: ${config.title.position};
-				${headerStyle}">
-				${config.title.html
+			<div class="pops-alert-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? config.title.text
-            : `<p pops style="${headerPStyle}">${config.title.text}</p>`}
-				${headerBtnHTML}
-			</div>
-			<div class="pops-alert-content" style="${contentStyle}">
-				${config.content.html
+            : `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
+			<div class="pops-alert-content" style="${contentStyle}">${config.content.html
             ? config.content.text
-            : `<p pops style="${contentPStyle}">${config.content.text}</p>`}
-			</div>
-			${bottomBtnHTML}`, bottomBtnHTML, zIndex);
+            : `<p pops style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
                     /**
                      * 弹窗的主元素，包括动画层
                      */
@@ -3486,22 +3459,12 @@ System.register('pops', [], (function (exports) {
                     let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
                     let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
                     /*html*/ `
-            <div class="pops-confirm-title" style="text-align: ${config.title.position};${headerStyle}">
-                            ${config.title.html
+            <div class="pops-confirm-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? config.title.text
-            : `<p pops style="${headerPStyle}">${config.title.text}</p>`}
-                ${headerBtnHTML}
-                        </div>
-                        <div class="pops-confirm-content" style="${contentStyle}">
-                ${config.content.html
+            : `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
+                        <div class="pops-confirm-content" style="${contentStyle}">${config.content.html
             ? config.content.text
-            : `<p pops style="${contentPStyle}">${config.content.text}</p>`}
-                
-                        </div>
-
-						
-                        ${bottomBtnHTML}
-            `, bottomBtnHTML, zIndex);
+            : `<p pops style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
                     /**
                      * 弹窗的主元素，包括动画层
                      */
@@ -3683,14 +3646,10 @@ System.register('pops', [], (function (exports) {
                     let { contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
                     let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
                     /*html*/ `
-            <div class="pops-prompt-title" style="text-align: ${config.title.position};${headerStyle}">
-            ${config.title.html
+            <div class="pops-prompt-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? config.title.text
-            : `<p pops style="${headerPStyle}">${config.title.text}</p>`}
-            ${headerBtnHTML}
-            </div>
-            <div class="pops-prompt-content" style="${contentPStyle}">
-            ${config.content.row
+            : `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
+            <div class="pops-prompt-content" style="${contentPStyle}">${config.content.row
             ? '<textarea pops="" placeholder="' +
                 config.content.placeholder +
                 '"></textarea>'
@@ -3698,10 +3657,7 @@ System.register('pops', [], (function (exports) {
                 config.content.placeholder +
                 '" type="' +
                 (config.content.password ? "password" : "text") +
-                '">'}
-            </div>
-        	${bottomBtnHTML}
-            `, bottomBtnHTML, zIndex);
+                '">'}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
                     /**
                      * 弹窗的主元素，包括动画层
                      */
@@ -3814,9 +3770,8 @@ System.register('pops', [], (function (exports) {
                     let { contentPStyle } = PopsElementHandler.getContentStyle("loading", config);
                     let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
                     /*html*/ `
-            <div class="pops-loading-content">
-                ${config.addIndexCSS
-            ? `
+            <div class="pops-loading-content">${config.addIndexCSS
+            ? /*html*/ `
                 <style data-model-name="index">${pops.config.cssText.index}</style>
                 <style data-model-name="anim">${pops.config.cssText.anim}</style>
                 <style data-model-name="common">${pops.config.cssText.common}</style>
@@ -3826,9 +3781,8 @@ System.register('pops', [], (function (exports) {
                     ${pops.config.cssText.loadingCSS}
                 </style>
             ${config.style != null ? `<style>${config.style}</style>` : ""}
-            <p pops style="${contentPStyle}">${config.content.text}</p>
-            </div>
-            `, "", zIndex);
+            	<p pops style="${contentPStyle}">${config.content.text}</p>
+            </div>`, "", zIndex);
                     /**
                      * 弹窗的主元素，包括动画层
                      */
@@ -3852,6 +3806,9 @@ System.register('pops', [], (function (exports) {
                             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);
@@ -3962,27 +3919,16 @@ System.register('pops', [], (function (exports) {
                     let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
                     let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
                     /*html*/ `
-            <div 
-                class="pops-iframe-title"
-                style="text-align: ${config.title.position};${headerStyle}"
-            >
-                ${config.title.html
+            <div class="pops-iframe-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? titleText
-            : `<p pops style="${headerPStyle}">${titleText}</p>`}
-                ${headerBtnHTML}
-            </div>
-                        <div class="pops-iframe-content">
+            : `<p pops style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
+			<div class="pops-iframe-content">
                 <div class="pops-iframe-content-global-loading"></div>
-                <iframe
-                        src="${config.url}"
-                        pops
-                        ${config.sandbox
+                <iframe src="${config.url}" pops ${config.sandbox
             ? "sandbox='allow-forms allow-same-origin allow-scripts'"
             : ""}>
                 </iframe>
-                </div>
-                ${config.loading.enable ? iframeLoadingHTML : ""}
-            `, "", zIndex);
+			</div>${config.loading.enable ? iframeLoadingHTML : ""}`, "", zIndex);
                     /**
                      * 弹窗的主元素，包括动画层
                      */
@@ -4288,29 +4234,14 @@ System.register('pops', [], (function (exports) {
                     let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
                     /*html*/ `
             ${config.title.enable
-            ? `
-            <div class="pops-${PopsType}-title" style="${headerStyle}">
-                ${config.title.html
+            ? /*html*/ `
+            <div class="pops-${PopsType}-title" style="${headerStyle}">${config.title.html
                 ? config.title.text
-                : `<p 
-                            pops
-                            style="
-                                width: 100%;
-                                text-align: ${config.title.position};
-                                ${headerPStyle}">${config.title.text}</p>`}
-                ${headerBtnHTML}
-            </div>
-            `
+                : /*html*/ `<p pops style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>`
             : ""}
-            
-            <div class="pops-${PopsType}-content" style="${contentStyle}">
-                ${config.content.html
+            <div class="pops-${PopsType}-content" style="${contentStyle}">${config.content.html
             ? config.content.text
-            : `<p pops style="${contentPStyle}">${config.content.text}</p>`}
-            </div>
-
-            ${bottomBtnHTML}
-            `, bottomBtnHTML, zIndex);
+            : `<p pops style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
                     /**
                      * 弹窗的主元素，包括动画层
                      */
@@ -4692,14 +4623,12 @@ System.register('pops', [], (function (exports) {
                     let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
                     let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
                     let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
-                    let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, `
-            <div class="pops-folder-title" style="text-align: ${config.title.position};${headerStyle}">
-                            ${config.title.html
+                    let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
+                    /*html*/ `
+            <div class="pops-folder-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? config.title.text
-            : `<p pops style="${headerPStyle}">${config.title.text}</p>`}
-                ${headerBtnHTML}
-                        </div>
-                        <div class="pops-folder-content ${pops.isPhone() ? "pops-mobile-folder-content" : ""}">
+            : `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
+			<div class="pops-folder-content ${pops.isPhone() ? "pops-mobile-folder-content" : ""}">
                 <div class="pops-folder-list">
                     <div class="pops-folder-file-list-breadcrumb">
                     <div class="pops-folder-file-list-breadcrumb-primary">
@@ -4711,7 +4640,6 @@ System.register('pops', [], (function (exports) {
                     <div class="pops-folder-list-table__header-div">
                     <table class="pops-folder-list-table__header">
                         <colgroup>
-                        <!-- <col width="8%"> --!>
                         <col width="52%">
                         <col width="24%">
                         <col width="16%">
@@ -4782,7 +4710,6 @@ System.register('pops', [], (function (exports) {
                     <div class="pops-folder-list-table__body-div">
                     <table class="pops-folder-list-table__body">
                         <colgroup>
-                        <!-- <col width="8%"> --!>
                         ${pops.isPhone()
             ? `<col width="100%">`
             : `
@@ -4797,9 +4724,7 @@ System.register('pops', [], (function (exports) {
                     </table>
                     </div>
                 </div>
-            </div>
-            ${bottomBtnHTML}
-            `, bottomBtnHTML, zIndex);
+            </div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
                     /**
                      * 弹窗的主元素，包括动画层
                      */
@@ -4980,9 +4905,7 @@ System.register('pops', [], (function (exports) {
 				<div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
 					<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
 					<div>
-						<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
-							${fileName}
-						</a>
+						<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">${fileName}</a>
 						<span>${latestTime} ${fileSize}</span>
 					</div>
 				</div>
@@ -6125,9 +6048,7 @@ System.register('pops', [], (function (exports) {
                         PopsSafeUtils.setSafeHTML(liElement, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-					${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-switch">
 					<input class="pops-panel-switch__input" type="checkbox">
 					<span class="pops-panel-switch__core">
@@ -6227,9 +6148,7 @@ System.register('pops', [], (function (exports) {
                         PopsSafeUtils.setSafeHTML(liElement, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-					${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-slider">
 					<input type="range" min="${formConfig.min}" max="${formConfig.max}">
 				</div>
@@ -6292,9 +6211,7 @@ System.register('pops', [], (function (exports) {
                         PopsSafeUtils.setSafeHTML(liElement, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text" style="flex: 1;">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-					${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-slider pops-slider-width">
 					<div class="pops-slider__runway">
 						<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
@@ -6855,9 +6772,7 @@ System.register('pops', [], (function (exports) {
                         PopsSafeUtils.setSafeHTML(liElement, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-input pops-user-select-none">
 					<input type="${inputType}" placeholder="${formConfig.placeholder}">
 				</div>
@@ -7052,12 +6967,9 @@ System.register('pops', [], (function (exports) {
                         PopsSafeUtils.setSafeHTML(liElement, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-textarea">
-					<textarea placeholder="${formConfig.placeholder ?? ""}">
-				</textarea>
+					<textarea placeholder="${formConfig.placeholder ?? ""}"></textarea>
 				</div>
 			`);
                         const PopsPanelTextArea = {
@@ -7127,9 +7039,7 @@ System.register('pops', [], (function (exports) {
                         PopsSafeUtils.setSafeHTML(liElement, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-select pops-user-select-none">
 					<select></select>
 				</div>
@@ -7323,9 +7233,7 @@ System.register('pops', [], (function (exports) {
                         PopsSafeUtils.setSafeHTML(liElement, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-select-multiple">
 					<div class="el-select__wrapper">
 						<div class="el-select__selection">
@@ -7618,9 +7526,7 @@ System.register('pops', [], (function (exports) {
                                     function createSelectItemElement(dataInfo) {
                                         let $item = popsDOMUtils.createElement("li", {
                                             className: "select-item",
-                                            innerHTML: /*html*/ `
-									<span>${dataInfo.text}</span>
-								`,
+                                            innerHTML: /*html*/ `<span>${dataInfo.text}</span>`,
                                         });
                                         Reflect.set($item, "data-info", dataInfo);
                                         return $item;
@@ -7882,9 +7788,7 @@ System.register('pops', [], (function (exports) {
                         PopsSafeUtils.setSafeHTML(liElement, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-					${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-button">
 					<button class="pops-panel-button_inner">
 						<i class="pops-bottom-icon"></i>
@@ -8049,13 +7953,8 @@ System.register('pops', [], (function (exports) {
                         PopsSafeUtils.setSafeHTML($li, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-					${leftDescriptionText}
-				</div>
-				<div class="pops-panel-deepMenu">
-					${rightText}
-					${arrowRightIconHTML}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
+				<div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
 				`);
                         const PopsPanelDeepMenu = {
                             [Symbol.toStringTag]: "PopsPanelDeepMenu",
@@ -8438,15 +8337,9 @@ System.register('pops', [], (function (exports) {
                     let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
                     let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
                     /*html*/ `
-			<div 
-				class="pops-${PopsType}-title"
-				style="text-align: ${config.title.position};
-				${headerStyle}">
-				${config.title.html
+			<div class="pops-${PopsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? config.title.text
-            : `<p pops style="${headerPStyle}">${config.title.text}</p>`}
-				${headerBtnHTML}
-			</div>
+            : `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
 			<div class="pops-${PopsType}-content">
 				<aside class="pops-${PopsType}-aside">
 					<ul></ul>
@@ -8991,7 +8884,8 @@ System.register('pops', [], (function (exports) {
                                 /* 判断有无图标，有就添加进去 */
                                 if (typeof item.icon === "string" && item.icon.trim() !== "") {
                                     let iconSVGHTML = pops.config.iconSVG[item.icon] ?? item.icon;
-                                    let iconElement = popsUtils.parseTextToDOM(`<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`);
+                                    let iconElement = popsUtils.parseTextToDOM(
+                                    /*html*/ `<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`);
                                     menuLiElement.appendChild(iconElement);
                                 }
                                 /* 插入文字 */
@@ -9008,7 +8902,9 @@ System.register('pops', [], (function (exports) {
                                             return;
                                         }
                                         function removeElement(element) {
-                                            element.querySelectorAll("ul li").forEach((ele) => {
+                                            element
+                                                .querySelectorAll("ul li")
+                                                .forEach((ele) => {
                                                 if (ele?.__menuData__?.child) {
                                                     removeElement(ele.__menuData__.child);
                                                 }
@@ -9225,9 +9121,7 @@ System.register('pops', [], (function (exports) {
 						<style data-dynamic="true">
 							${this.getDynamicCSS()}
 						</style>
-						<ul class="pops-${PopsType}-search-suggestion-hint">
-							${config.toSearhNotResultHTML}
-						</ul>
+						<ul class="pops-${PopsType}-search-suggestion-hint">${config.toSearhNotResultHTML}</ul>
          				 `,
                             }, {
                                 "data-guid": guid,
@@ -9306,12 +9200,7 @@ System.register('pops', [], (function (exports) {
                                 className: `pops-${PopsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
                                 "data-index": index,
                                 "data-value": SearchSuggestion.getItemDataValue(data),
-                                innerHTML: `
-          			${config.getItemHTML(data)}
-          			${config.deleteIcon.enable
-                        ? SearchSuggestion.getDeleteIconHTML()
-                        : ""}
-          			`,
+                                innerHTML: `${config.getItemHTML(data)}${config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""}`,
                             });
                         },
                         /**
@@ -10194,7 +10083,7 @@ System.register('pops', [], (function (exports) {
                 /** 配置 */
                 config = {
                     /** 版本号 */
-                    version: "2025.3.2",
+                    version: "2025.5.12",
                     cssText: {
                         /** 主CSS */
                         index: indexCSS,