@whitesev/pops 1.5.3 → 1.5.4

package/dist/index.iife.js

@@ -1525,17 +1525,21 @@ var pops = (function () {
             else {
                 for (const targetKeyName in target) {
                     if (targetKeyName in source) {
+                        // @ts-ignore
                         let targetValue = target[targetKeyName];
+                        // @ts-ignore
                         let sourceValue = source[targetKeyName];
                         if (typeof sourceValue === "object" &&
                             sourceValue != null &&
                             !UtilsContext.isDOM(sourceValue) &&
                             Object.keys(sourceValue).length) {
                             /* 源端的值是object类型，且不是元素节点 */
+                            // @ts-ignore
                             target[targetKeyName] = UtilsContext.assign(targetValue, sourceValue, isAdd);
                             continue;
                         }
                         /* 直接赋值 */
+                        // @ts-ignore
                         target[targetKeyName] = sourceValue;
                     }
                 }
@@ -3553,6 +3557,9 @@ var pops = (function () {
          */
         getMaskHTML(guid, zIndex = 101, style = "") {
             zIndex = zIndex - 100;
+            if (style.startsWith(";")) {
+                style = style.replace(";", "");
+            }
             return `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
         },
         /**
@@ -3562,15 +3569,16 @@ var pops = (function () {
          * @param config
          * @param html
          * @param bottomBtnHTML
+         * @param zIndex
          */
-        getAnimHTML(guid, type, config, html = "", bottomBtnHTML = "") {
+        getAnimHTML(guid, type, config, html = "", bottomBtnHTML = "", zIndex) {
             let __config = config;
             let popsAnimStyle = "";
             let popsStyle = "";
             let popsPosition = __config.position || "";
             if (config.zIndex != null) {
-                popsAnimStyle += `z-index: ${config.zIndex};`;
-                popsStyle += `z-index: ${config.zIndex};`;
+                popsAnimStyle += `z-index: ${zIndex};`;
+                popsStyle += `z-index: ${zIndex};`;
             }
             if (__config.width != null) {
                 popsStyle += `width: ${__config.width};`;
@@ -3579,24 +3587,25 @@ var pops = (function () {
                 popsStyle += `height: ${__config.height};`;
             }
             let hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
-            return `<div 
-                    class="pops-anim"
-                    anim="${__config.animation || ""}"
-                    style="${popsAnimStyle};"
-                    data-guid="${guid}">
+            return /*html*/ `
+		<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>`;
+			<div
+				class="pops ${config.class || ""}"
+				data-bottom-btn="${hasBottomBtn}"
+				type-value="${type}"
+				style="${popsStyle}"
+				position="${popsPosition}"
+				data-guid="${guid}">
+				${html}
+			</div>
+		</div>`;
         },
         /**
          * 获取顶部按钮层HTML
@@ -4206,6 +4215,18 @@ var pops = (function () {
                 capture: true,
             });
         },
+        /**
+         * 把配置的z-index配置转为数字
+         * @param zIndex
+         */
+        handleZIndex(zIndex) {
+            if (typeof zIndex === "function") {
+                return zIndex();
+            }
+            else {
+                return zIndex;
+            }
+        },
         /**
          * 处理config.only
          * @param type 当前弹窗类型
@@ -4231,8 +4252,19 @@ var pops = (function () {
                 }
             }
             else {
-                const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(config.zIndex + 100);
-                config.zIndex = maxZIndex;
+                // 对配置进行处理
+                // 选择配置的z-index和已有的pops实例的最大z-index值
+                if (typeof config.zIndex === "function") {
+                    let originZIndexFn = config.zIndex;
+                    config.zIndex = () => {
+                        const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(PopsHandler.handleZIndex(originZIndexFn) + 100);
+                        return maxZIndex;
+                    };
+                }
+                else {
+                    const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(PopsHandler.handleZIndex(config.zIndex) + 100);
+                    config.zIndex = maxZIndex;
+                }
             }
             return config;
         },
@@ -4320,12 +4352,15 @@ var pops = (function () {
             // 设置当前类型
             const PopsType = "alert";
             config = PopsHandler.handleOnly(PopsType, config);
-            let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+            // 先把z-index提取出来
+            let zIndex = PopsHandler.handleZIndex(config.zIndex);
+            let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
             let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
             let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
             let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
             let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
-            let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, `
+            let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
+            /*html*/ `
 			<div 
 				class="pops-alert-title"
 				style="text-align: ${config.title.position};
@@ -4340,7 +4375,7 @@ var pops = (function () {
             ? config.content.text
             : `<p pops style="${contentPStyle}">${config.content.text}</p>`}
 			</div>
-			${bottomBtnHTML}`, bottomBtnHTML);
+			${bottomBtnHTML}`, bottomBtnHTML, zIndex);
             /**
              * 弹窗的主元素，包括动画层
              */
@@ -4502,12 +4537,15 @@ var pops = (function () {
             // 设置当前类型
             const PopsType = "confirm";
             config = PopsHandler.handleOnly(PopsType, config);
-            let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+            // 先把z-index提取出来
+            let zIndex = PopsHandler.handleZIndex(config.zIndex);
+            let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
             let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
             let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
             let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
             let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
-            let animHTML = PopsElementHandler.getAnimHTML(guid, 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
             ? config.title.text
@@ -4521,7 +4559,7 @@ var pops = (function () {
                 
                         </div>
                         ${bottomBtnHTML}
-            `, bottomBtnHTML);
+            `, bottomBtnHTML, zIndex);
             /**
              * 弹窗的主元素，包括动画层
              */
@@ -4690,12 +4728,15 @@ var pops = (function () {
             let guid = popsUtils.getRandomGUID();
             const PopsType = "prompt";
             config = PopsHandler.handleOnly(PopsType, config);
-            let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+            // 先把z-index提取出来
+            let zIndex = PopsHandler.handleZIndex(config.zIndex);
+            let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
             let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
             let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
             let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
             let { contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
-            let animHTML = PopsElementHandler.getAnimHTML(guid, 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
             ? config.title.text
@@ -4713,8 +4754,8 @@ var pops = (function () {
                 (config.content.password ? "password" : "text") +
                 '">'}
             </div>
-        ${bottomBtnHTML}
-            `, bottomBtnHTML);
+        	${bottomBtnHTML}
+            `, bottomBtnHTML, zIndex);
             /**
              * 弹窗的主元素，包括动画层
              */
@@ -4811,9 +4852,12 @@ var pops = (function () {
             let guid = popsUtils.getRandomGUID();
             const PopsType = "loading";
             config = PopsHandler.handleOnly(PopsType, config);
-            let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+            // 先把z-index提取出来
+            let zIndex = PopsHandler.handleZIndex(config.zIndex);
+            let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
             let { contentPStyle } = PopsElementHandler.getContentStyle("loading", config);
-            let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, `
+            let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
+            /*html*/ `
             <div class="pops-loading-content">
                 ${config.addIndexCSS
             ? `
@@ -4828,7 +4872,7 @@ var pops = (function () {
             ${config.style != null ? `<style>${config.style}</style>` : ""}
             <p pops style="${contentPStyle}">${config.content.text}</p>
             </div>
-            `, "");
+            `, "", zIndex);
             /**
              * 弹窗的主元素，包括动画层
              */
@@ -4944,12 +4988,15 @@ var pops = (function () {
             let maskExtraStyle = config.animation != null && config.animation != ""
                 ? "position:absolute;"
                 : "";
-            let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex, maskExtraStyle);
+            // 先把z-index提取出来
+            let zIndex = PopsHandler.handleZIndex(config.zIndex);
+            let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex, maskExtraStyle);
             let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
             let iframeLoadingHTML = '<div class="pops-loading"></div>';
             let titleText = config.title.text.trim() !== "" ? config.title.text : config.url;
             let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
-            let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, `
+            let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
+            /*html*/ `
             <div 
                 class="pops-iframe-title"
                 style="text-align: ${config.title.position};${headerStyle}"
@@ -4970,7 +5017,7 @@ var pops = (function () {
                 </iframe>
                 </div>
                 ${config.loading.enable ? iframeLoadingHTML : ""}
-            `, "");
+            `, "", zIndex);
             /**
              * 弹窗的主元素，包括动画层
              */
@@ -5202,7 +5249,7 @@ var pops = (function () {
                     popsDOMUtils.addClassName(_toolTipElement_, config.className);
                 }
                 _toolTipElement_.setAttribute("data-guid", guid);
-                _toolTipElement_.style.zIndex = config.zIndex.toString();
+                _toolTipElement_.style.zIndex = PopsHandler.handleZIndex(config.zIndex).toString();
                 _toolTipElement_.innerHTML = `<div style="text-align: center;">${getContent()}</div>`;
                 /* 箭头元素 */
                 let _toolTipArrowHTML_ = '<div class="pops-tip-arrow"></div>';
@@ -5519,12 +5566,15 @@ var pops = (function () {
             let guid = popsUtils.getRandomGUID();
             const PopsType = "drawer";
             config = PopsHandler.handleOnly(PopsType, config);
-            let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+            // 先把z-index提取出来
+            let zIndex = PopsHandler.handleZIndex(config.zIndex);
+            let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
             let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
             let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
             let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
             let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
-            let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, `
+            let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
+            /*html*/ `
             ${config.title.enable
             ? `
             <div class="pops-${PopsType}-title" style="${headerStyle}">
@@ -5548,7 +5598,7 @@ var pops = (function () {
             </div>
 
             ${bottomBtnHTML}
-            `, bottomBtnHTML);
+            `, bottomBtnHTML, zIndex);
             /**
              * 弹窗的主元素，包括动画层
              */
@@ -5906,7 +5956,9 @@ var pops = (function () {
             let guid = popsUtils.getRandomGUID();
             const PopsType = "folder";
             config = PopsHandler.handleOnly(PopsType, config);
-            let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+            // 先把z-index提取出来
+            let zIndex = PopsHandler.handleZIndex(config.zIndex);
+            let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
             let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
             let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
             let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
@@ -6017,7 +6069,7 @@ var pops = (function () {
                 </div>
             </div>
             ${bottomBtnHTML}
-            `, bottomBtnHTML);
+            `, bottomBtnHTML, zIndex);
             /**
              * 弹窗的主元素，包括动画层
              */
@@ -7008,10 +7060,13 @@ var pops = (function () {
             let guid = popsUtils.getRandomGUID();
             const PopsType = "panel";
             config = PopsHandler.handleOnly(PopsType, config);
-            let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+            // 先把z-index提取出来
+            let zIndex = PopsHandler.handleZIndex(config.zIndex);
+            let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
             let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
             let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
-            let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, `
+            let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, 
+            /*html*/ `
 			<div 
 				class="pops-${PopsType}-title"
 				style="text-align: ${config.title.position};
@@ -7029,7 +7084,7 @@ var pops = (function () {
 					<ul class="pops-panel-container-header-ul"></ul>
 					<ul></ul>
 				</section>
-			</div>`, "");
+			</div>`, "", zIndex);
             /**
              * 弹窗的主元素，包括动画层
              */
@@ -9120,7 +9175,7 @@ var pops = (function () {
                  * @param isChildren 是否是rightClickMenu的某一项的子菜单
                  */
                 getMenuContainerElement(zIndex, isChildren) {
-                    let menuElement = popsUtils.parseTextToDOM(`
+                    let menuElement = popsUtils.parseTextToDOM(/*html*/ `
 				<div class="pops-${PopsType}" ${isChildren ? 'is-children="true"' : ""}>
 				<style type="text/css" data-from="pops-${PopsType}">
 				.pops-${PopsType} *{
@@ -9208,6 +9263,12 @@ var pops = (function () {
                     }
                     return menuElement;
                 },
+                /**
+                 * 动态获取配的z-index
+                 */
+                getMenuZIndex() {
+                    return PopsHandler.handleZIndex(config.zIndex);
+                },
                 /**
                  * 获取left、top偏移
                  * @param menuElement 菜单元素
@@ -9242,7 +9303,7 @@ var pops = (function () {
                  * @param _config_
                  */
                 showMenu(menuEvent, _config_) {
-                    let menuElement = this.getMenuContainerElement(config.zIndex, false);
+                    let menuElement = this.getMenuContainerElement(this.getMenuZIndex(), false);
                     menuElement["__menuData__"] = {
                         child: [],
                     };
@@ -9280,7 +9341,7 @@ var pops = (function () {
                  * @param targetLiElement 父li项元素
                  */
                 showClildMenu(menuEvent, posInfo, _config_, rootElement, targetLiElement) {
-                    let menuElement = this.getMenuContainerElement(config.zIndex, true);
+                    let menuElement = this.getMenuContainerElement(this.getMenuZIndex(), true);
                     menuElement["__menuData__"] = {
                         parent: targetLiElement,
                         root: rootElement,
@@ -9546,7 +9607,7 @@ var pops = (function () {
 							}
 							ul.pops-${PopsType}-search-suggestion-hint{
 								position: ${config.isAbsolute ? "absolute" : "fixed"};
-								z-index: ${config.zIndex};
+								z-index: ${PopsHandler.handleZIndex(config.zIndex)};
 								width: 0;
 								left: 0;
 								max-height: ${config.maxHeight};
@@ -9983,7 +10044,7 @@ var pops = (function () {
         /** 配置 */
         config = {
             /** 版本号 */
-            version: "2024.9.9",
+            version: "2024.9.10",
             cssText: {
                 /** 主CSS */
                 index: indexCSS,