@whitesev/pops 2.0.2 → 2.0.4

package/src/components/searchSuggestion/index.ts

@@ -2,10 +2,10 @@ import { PopsHandler } from "../../handler/PopsHandler";
 import { pops } from "../../Pops";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
-import type { PopsSearchSuggestionDetails } from "./indexType";
 import { searchSuggestionConfig as PopsSearchSuggestionConfig } from "./config";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
+import type { PopsSearchSuggestionDetails } from "./indexType";
 
 export class PopsSearchSuggestion {
 	constructor(details: PopsSearchSuggestionDetails) {
@@ -105,9 +105,9 @@ export class PopsSearchSuggestion {
 						<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>
          				 `,
 					},
 					{
@@ -188,14 +188,9 @@ export class PopsSearchSuggestion {
 					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() : ""
+					}`,
 				});
 			},
 			/**
@@ -514,7 +509,7 @@ export class PopsSearchSuggestion {
 			 */
 			removePromptsInSearch() {
 				SearchSuggestion.$el.$hintULContainer
-					.querySelector(
+					.querySelector<HTMLLIElement>(
 						`li.pops-${PopsType}-search-suggestion-hint-searching-item`
 					)
 					?.remove();

package/src/components/searchSuggestion/indexType.ts

@@ -46,7 +46,7 @@ export interface PopsSearchSuggestionDetails<T = any>
 	 */
 	className?: string;
 	/**
-	 * position是否使用absolut
+	 * position是否使用absolut，否则是relative
 	 * @default true
 	 */
 	isAbsolute?: boolean;

package/src/handler/PopsElementHandler.ts

@@ -27,7 +27,7 @@ export const PopsElementHandler = {
 		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
@@ -62,25 +62,16 @@ export const PopsElementHandler = {
 		}
 		let hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
 		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 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>`;
 	},
 	/**
@@ -108,23 +99,21 @@ export const PopsElementHandler = {
 			let topRightButtonHTML = "";
 			__config_iframe.topRightButton.split("|").forEach((item: string) => {
 				item = item.toLowerCase();
-				topRightButtonHTML += `
+				topRightButtonHTML += /*html*/ `
                 <button class="pops-header-control" type="${item}">
                     <i class="pops-icon">${
 											(pops.config.iconSVG as any)[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>`;
 			}
@@ -189,20 +178,15 @@ export const PopsElementHandler = {
 					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>`;
 		}
 
@@ -228,20 +212,15 @@ export const PopsElementHandler = {
 					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>`;
 		}
 
@@ -267,20 +246,15 @@ export const PopsElementHandler = {
 					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>`;
 		}
 
@@ -291,34 +265,22 @@ export const PopsElementHandler = {
 			} 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: PopsTypeSupportHeaderTitle,
 		config: PopsSupportHeaderTitle[keyof PopsSupportHeaderTitle]
@@ -331,10 +293,9 @@ export const PopsElementHandler = {
 	},
 	/**
 	 * 获取内容style
-	 * @param type
-	 * @param config
+	 * @param type 弹窗类型
+	 * @param config 弹窗配置
 	 */
-
 	getContentStyle(
 		type: PopsTypeSupportContent,
 		config: PopsSupportContent[keyof PopsSupportContent]

package/src/handler/PopsHandler.ts

@@ -99,9 +99,7 @@ export const PopsHandler = {
 			animElement: HTMLElement;
 			maskHTML: string;
 		}
-	): {
-		maskElement: HTMLDivElement;
-	} {
+	) {
 		let result = {
 			maskElement: popsUtils.parseTextToDOM<HTMLDivElement>(details.maskHTML),
 		};
@@ -117,7 +115,7 @@ export const PopsHandler = {
 			function originalRun() {
 				if (details.config.mask!.clickEvent!.toClose) {
 					/* 关闭 */
-					PopsInstanceUtils.close(
+					return PopsInstanceUtils.close(
 						details.type,
 						targetLayer,
 						details.guid,
@@ -126,7 +124,7 @@ export const PopsHandler = {
 					);
 				} else if (details.config.mask!.clickEvent!.toHide) {
 					/* 隐藏 */
-					PopsInstanceUtils.hide(
+					return PopsInstanceUtils.hide(
 						details.type,
 						targetLayer,
 						details.guid,
@@ -400,7 +398,7 @@ export const PopsHandler = {
 			mode: mode,
 			guid: guid,
 			close() {
-				PopsInstanceUtils.close(
+				return PopsInstanceUtils.close(
 					mode,
 					pops.config.layer[mode],
 					guid,
@@ -409,7 +407,7 @@ export const PopsHandler = {
 				);
 			},
 			hide() {
-				PopsInstanceUtils.hide(
+				return PopsInstanceUtils.hide(
 					mode,
 					pops.config.layer[mode],
 					guid,
@@ -419,7 +417,7 @@ export const PopsHandler = {
 				);
 			},
 			show() {
-				PopsInstanceUtils.show(
+				return PopsInstanceUtils.show(
 					mode,
 					pops.config.layer[mode],
 					guid,
@@ -463,7 +461,7 @@ export const PopsHandler = {
 			mode: mode,
 			guid: guid,
 			close() {
-				PopsInstanceUtils.close(
+				return PopsInstanceUtils.close(
 					mode,
 					pops.config.layer[mode],
 					guid,
@@ -472,7 +470,7 @@ export const PopsHandler = {
 				);
 			},
 			hide() {
-				PopsInstanceUtils.hide(
+				return PopsInstanceUtils.hide(
 					mode,
 					pops.config.layer[mode],
 					guid,
@@ -482,7 +480,7 @@ export const PopsHandler = {
 				);
 			},
 			show() {
-				PopsInstanceUtils.show(
+				return PopsInstanceUtils.show(
 					mode,
 					pops.config.layer[mode],
 					guid,

package/src/types/event.d.ts

@@ -48,9 +48,9 @@ export interface PopsEventDetails {
 	/** 当前弹窗类型 */
 	mode: mode;
 	guid: guid;
-	close: () => void;
-	hide: () => void;
-	show: () => void;
+	close: () => Promise<void>;
+	hide: () => Promise<void>;
+	show: () => Promise<void>;
 }
 
 /**

package/src/types/mask.d.ts

@@ -26,7 +26,7 @@ export interface PopsMaskDetails {
 	 */
 	clickCallBack?:
 		| ((
-				originalRun: () => void,
+				originalRun: () => void | Promise<void>,
 				config:
 					| PopsAlertDetails
 					| PopsDrawerDetails

package/src/utils/PopsDOMUtils.ts

@@ -1569,32 +1569,34 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
+		let setStyleProperty = (
+			propertyName: string,
+			propertyValue: string | number
+		) => {
+			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] as string).includes("!important")
-				) {
-					element.style.setProperty(
-						prop,
-						property[prop] as string,
-						"important"
-					);
-				} else {
-					property[prop] = handlePixe(prop, property[prop] as string);
-					element.style.setProperty(prop, property[prop] as string);
-				}
+				let value = property[prop];
+				setStyleProperty(prop, value!);
 			}
 		}
 	}