@whitesev/pops 2.0.3 → 2.0.4

package/dist/types/src/Pops.d.ts

@@ -158,9 +158,9 @@ declare class Pops {
             getMaxZIndex(deviation?: number): number;
             getKeyFrames(sheet: CSSStyleSheet): {};
             removeInstance(moreLayerConfigList: PopsLayerCommonConfig[][], guid: string, isAll?: boolean): PopsLayerCommonConfig[][];
-            hide(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): void;
-            show(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): void;
-            close(popsType: string, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): void;
+            hide(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): Promise<void>;
+            show(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement?: HTMLElement): Promise<void>;
+            close(popsType: string, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): Promise<void>;
             drag(moveElement: HTMLElement, options: {
                 dragElement: HTMLElement;
                 limit: boolean;

package/dist/types/src/components/searchSuggestion/indexType.d.ts

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

package/dist/types/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/dist/types/src/types/mask.d.ts

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

package/dist/types/src/utils/PopsInstanceUtils.d.ts

@@ -64,7 +64,7 @@ export declare const PopsInstanceUtils: {
      * @param animElement
      * @param maskElement
      */
-    hide(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): void;
+    hide(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): Promise<void>;
     /**
      * 显示
      * @param popsType
@@ -74,7 +74,7 @@ export declare const PopsInstanceUtils: {
      * @param animElement
      * @param maskElement
      */
-    show(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): void;
+    show(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement?: HTMLElement): Promise<void>;
     /**
      * 关闭
      * @param popsType
@@ -83,7 +83,7 @@ export declare const PopsInstanceUtils: {
      * @param config
      * @param animElement
      */
-    close(popsType: string, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): void;
+    close(popsType: string, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): Promise<void>;
     /**
      * 拖拽元素
      * 说明：

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/Pops.ts

@@ -84,7 +84,7 @@ class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2025.5.1",
+		version: "2025.5.12",
 		cssText: {
 			/** 主CSS */
 			index: indexCSS,

package/src/components/loading/index.ts

@@ -79,6 +79,9 @@ export class PopsLoading {
 				maskHTML: maskHTML,
 			});
 			$mask = _handleMask_.maskElement;
+			// 遮罩层必须是跟随主内容
+			// 即设置主内容position: relative，mask：position: absolute
+			popsDOMUtils.css($mask, "position", "absolute !important");
 			elementList.push($mask);
 		}
 		let eventDetails = PopsHandler.handleLoadingEventDetails(

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/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!);
 			}
 		}
 	}

package/src/utils/PopsInstanceUtils.ts

@@ -268,24 +268,29 @@ export const PopsInstanceUtils = {
 		animElement: HTMLElement,
 		maskElement: HTMLElement
 	) {
-		let popsElement =
-			animElement.querySelector<HTMLDivElement>(".pops[type-value]")!;
-		if (popsType === "drawer") {
-			let drawerConfig = config as Required<PopsDrawerDetails>;
-			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<void>((resolve) => {
+			let popsElement =
+				animElement.querySelector<HTMLDivElement>(".pops[type-value]")!;
+			if (popsType === "drawer") {
+				let drawerConfig = config as Required<PopsDrawerDetails>;
+				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 as any)["animation-name"] =
@@ -295,6 +300,9 @@ export const PopsInstanceUtils = {
 							(layerConfigItem.animElement.style as any)["animation-name"]
 						)
 					) {
+						/**
+						 * 动画结束的回调
+						 */
 						function animationendCallBack() {
 							layerConfigItem.animElement.style.display = "none";
 							if (layerConfigItem.maskElement) {
@@ -308,6 +316,7 @@ export const PopsInstanceUtils = {
 									capture: true,
 								}
 							);
+							resolve();
 						}
 						popsDOMUtils.on(
 							layerConfigItem.animElement,
@@ -322,14 +331,13 @@ export const PopsInstanceUtils = {
 						if (layerConfigItem.maskElement) {
 							layerConfigItem.maskElement.style.display = "none";
 						}
-					}
 
-					return;
+						resolve();
+					}
 				}
-			});
-		}
+			}
+		});
 	},
-
 	/**
 	 * 显示
 	 * @param popsType
@@ -353,27 +361,32 @@ export const PopsInstanceUtils = {
 			| PopsPanelDetails
 			| PopsFolderDetails,
 		animElement: HTMLElement,
-		maskElement: HTMLElement
+		maskElement?: HTMLElement
 	) {
-		let popsElement =
-			animElement.querySelector<HTMLDivElement>(".pops[type-value]")!;
-		if (popsType === "drawer") {
-			let drawerConfig = config as PopsDrawerDetails;
-			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<void>((resolve) => {
+			let popsElement =
+				animElement.querySelector<HTMLDivElement>(".pops[type-value]")!;
+			if (popsType === "drawer") {
+				let drawerConfig = config as PopsDrawerDetails;
+				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 as any)["animation-name"] =
@@ -385,10 +398,9 @@ export const PopsInstanceUtils = {
 							(layerConfigItem.animElement.style as any)["animation-name"]
 						)
 					) {
-						layerConfigItem.animElement.style.display = "";
-						if (layerConfigItem.maskElement) {
-							layerConfigItem.maskElement.style.display = "";
-						}
+						/**
+						 * 动画结束的回调
+						 */
 						function animationendCallBack() {
 							popsDOMUtils.off(
 								layerConfigItem.animElement,
@@ -398,6 +410,11 @@ export const PopsInstanceUtils = {
 									capture: true,
 								}
 							);
+							resolve();
+						}
+						layerConfigItem.animElement.style.display = "";
+						if (layerConfigItem.maskElement) {
+							layerConfigItem.maskElement.style.display = "";
 						}
 						popsDOMUtils.on(
 							layerConfigItem.animElement,
@@ -412,11 +429,11 @@ export const PopsInstanceUtils = {
 						if (layerConfigItem.maskElement) {
 							layerConfigItem.maskElement.style.display = "";
 						}
+						resolve();
 					}
 				}
-				return;
-			});
-		}
+			}
+		});
 	},
 	/**
 	 * 关闭
@@ -441,61 +458,68 @@ export const PopsInstanceUtils = {
 			| PopsFolderDetails,
 		animElement: HTMLElement
 	) {
-		let popsElement =
-			animElement.querySelector<HTMLDivElement>(".pops[type-value]")!;
-		let drawerConfig = config as Required<PopsDrawerDetails>;
-		/**
-		 * 动画结束事件
-		 */
-		function transitionendEvent() {
-			function closeCallBack(event: Event) {
-				if ((event as TransitionEvent).propertyName !== "transform") {
-					return;
+		return new Promise<void>((resolve) => {
+			let popsElement =
+				animElement.querySelector<HTMLDivElement>(".pops[type-value]")!;
+			let drawerConfig = config as Required<PopsDrawerDetails>;
+			/**
+			 * 动画结束事件
+			 */
+			function transitionendEvent() {
+				/**
+				 * 弹窗已关闭的回调
+				 */
+				function closeCallBack(event: Event) {
+					if ((event as TransitionEvent).propertyName !== "transform") {
+						return;
+					}
+					popsDOMUtils.off(
+						popsElement,
+						popsDOMUtils.getTransitionEndNameList(),
+						void 0,
+						closeCallBack
+					);
+					PopsInstanceUtils.removeInstance([layerConfigList], guid);
+					resolve();
 				}
-				popsDOMUtils.off(
+				/* 监听过渡结束 */
+				popsDOMUtils.on(
 					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;
+				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%)");
+				} else if (["right"].includes(drawerConfig.direction)) {
+					popsElement.style.setProperty("transform", "translateX(100%)");
+				} else {
+					console.error("未知direction：", drawerConfig.direction);
+				}
 			}
-			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%)");
+
+			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);
-		}
+		});
 	},
 	/**
 	 * 拖拽元素