@whitesev/pops 2.0.7 → 2.0.9

package/dist/types/src/components/tooltip/index.d.ts

@@ -46,11 +46,12 @@ export declare class ToolTip {
     changeZIndex(): void;
     /**
      * 计算 提示框的位置
+     * @param event 触发的事件
      * @param targetElement 目标元素
      * @param arrowDistance 箭头和目标元素的距离
      * @param otherDistance 其它位置的偏移
      */
-    calcToolTipPosition(targetElement: HTMLElement, arrowDistance: number, otherDistance: number): {
+    calcToolTipPosition(targetElement: HTMLElement, arrowDistance: number, otherDistance: number, event?: MouseEvent | TouchEvent | PointerEvent): {
         TOP: {
             left: number;
             top: number;
@@ -75,11 +76,17 @@ export declare class ToolTip {
             arrow: string;
             motion: string;
         };
+        FOLLOW: {
+            left: number;
+            top: number;
+            arrow: string;
+            motion: string;
+        };
     };
     /**
      * 动态修改tooltip的位置
      */
-    changePosition(): void;
+    changePosition(event?: MouseEvent | TouchEvent | PointerEvent): void;
     /**
      * 事件绑定
      */
@@ -177,6 +184,7 @@ export declare const PopsTooltip: {
         config: {
             target: HTMLElement;
             content: string | (() => string);
+            isDiffContent: boolean;
             position: import("./indexType").PopsTooltipPosition;
             className: string;
             isFixed: boolean;

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

@@ -1,6 +1,6 @@
 import type { PopsCommonConfig } from "../../types/components";
 /** tooltip的出现位置 */
-export type PopsTooltipPosition = "top" | "right" | "bottom" | "left";
+export type PopsTooltipPosition = "top" | "right" | "bottom" | "left" | "follow";
 /**
  * pops.tooltip
  */
@@ -13,20 +13,28 @@ export interface PopsToolTipDetails extends Pick<PopsCommonConfig, "useShadowRoo
      * 显示的文字
      */
     content: string | (() => string);
+    /**
+     * 是否比较获取到的content的内容是否改变
+     *
+     * 如果未改变，则在触发.show时不修改内容
+     * @default false
+     */
+    isDiffContent?: boolean;
     /**
      * 位置
+     * + `follow` 跟随鼠标|触摸位置移动
      * @default "top"
      */
     position?: PopsTooltipPosition;
     /**
      * 自定义className
      *
-     * + github-tooltip github的样式
+     * + `github-tooltip` github的样式
      * @default ""
      */
     className?: string;
     /**
-     * 是否使用fixed定位，默认是absolute
+     * 是否使用fixed定位，false则是absolute定位
      *
      * @default false
      */
@@ -35,7 +43,7 @@ export interface PopsToolTipDetails extends Pick<PopsCommonConfig, "useShadowRoo
      * 是否总是显示，默认为false
      * + true 设置的triggerShowEventName、triggerCloseEventName将无效
      *        返回提供show和close函数，取消on和off
-     * + false 不添加事件，只显示
+     * + false 事件触发才显示
      */
     alwaysShow?: boolean;
     /**
@@ -98,6 +106,7 @@ export interface PopsToolTipDetails extends Pick<PopsCommonConfig, "useShadowRoo
      * 其它的距离(px)
      * + 当position为left或者right，这个距离是上、下距离
      * + 当position为top或者bottom，这个距离是左、右距离
+     * + 当position为follow，这个距离是上、左距离
      * @default 0
      */
     otherDistance?: number;

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

@@ -119,6 +119,22 @@ declare class PopsUtils {
      **/
     formatByteToSize<T extends boolean>(byteSize: number | string, addType?: T): T extends true ? string : number;
     AnyTouch: () => typeof AnyTouch;
+    /**
+     * 自动使用 Worker 执行 setTimeout
+     */
+    setTimeout(callback: Function, timeout?: number): number;
+    /**
+     * 配合 .setTimeout 使用
+     */
+    clearTimeout(timeId: number | undefined): void;
+    /**
+     * 自动使用 Worker 执行 setInterval
+     */
+    setInterval(callback: Function, timeout?: number): number;
+    /**
+     * 配合 .setInterval 使用
+     */
+    clearInterval(timeId: number | undefined): void;
 }
 declare const popsUtils: PopsUtils;
 export { popsUtils };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -35,17 +35,18 @@
   "license": "MIT",
   "dependencies": {
     "@rollup/plugin-commonjs": "^25.0.8",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^11.1.6",
     "any-touch": "^2.2.0",
     "rollup-plugin-clear": "^2.0.7",
-    "tslib": "^2.6.2"
+    "tslib": "^2.8.1",
+    "worker-timers": "^8.0.21"
   },
   "devDependencies": {
-    "rollup-plugin-import-css": "^3.5.0",
+    "rollup-plugin-import-css": "^3.5.8",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-serve": "^1.1.1",
-    "typescript": "^5.4.5"
+    "typescript": "^5.8.3"
   },
   "scripts": {
     "dev": "rollup --config --watch",

package/src/Pops.ts

@@ -80,7 +80,7 @@ class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2025.5.25",
+		version: "2025.5.26",
 		cssText: {
 			/** 主CSS */
 			index: indexCSS,
@@ -197,7 +197,7 @@ class Pops {
 			this.config.animation = PopsInstanceUtils.getKeyFrames(
 				animationStyle.sheet!
 			);
-			setTimeout(() => {
+			popsUtils.setTimeout(() => {
 				animationStyle.remove();
 			}, 50);
 		}

package/src/components/drawer/index.ts

@@ -215,8 +215,8 @@ export const PopsDrawer = {
 		}
 
 		popsDOMUtils.appendBody($shadowContainer);
-		setTimeout(() => {
-			setTimeout(() => {
+		popsUtils.setTimeout(() => {
+			popsUtils.setTimeout(() => {
 				$pops.style.setProperty("transform", "");
 			}, config.openDelay);
 		}, 50);

package/src/components/folder/index.ts

@@ -713,12 +713,12 @@ export const PopsFolder = {
 
 									downloadIframeLinkElement.src = downloadInfo.url;
 									downloadIframeLinkElement.onload = function () {
-										setTimeout(() => {
+										popsUtils.setTimeout(() => {
 											downloadIframeLinkElement.remove();
 										}, 1000);
 									};
 									$shadowRoot.appendChild(downloadIframeLinkElement);
-									setTimeout(() => {
+									popsUtils.setTimeout(() => {
 										downloadIframeLinkElement.remove();
 									}, 3 * 60 * 1000);
 								} else {

package/src/components/iframe/index.ts

@@ -20,7 +20,7 @@ export const PopsIframe = {
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
 		if (config.url == null) {
-			throw "config.url不能为空";
+			throw new Error("config.url不能为空");
 		}
 		config = PopsHandler.handleOnly(PopsType, config);
 

package/src/components/panel/PanelHandleContentDetails.ts

@@ -576,11 +576,11 @@ export const PanelHandleContentDetails = () => {
 					let isSuccess = false;
 					let oldTotalWidth = this.$data.totalWidth;
 					let timer: number | undefined = void 0;
-					let interval = setInterval(() => {
+					let interval = popsUtils.setInterval(() => {
 						if (isSuccess) {
 							this.$interval.isCheck = false;
-							clearTimeout(timer);
-							clearInterval(interval);
+							popsUtils.clearTimeout(timer);
+							popsUtils.clearInterval(interval);
 						} else {
 							this.initTotalWidth();
 							if (this.$data.totalWidth !== 0) {
@@ -598,8 +598,8 @@ export const PanelHandleContentDetails = () => {
 						}
 					}, checkStepTime);
 					/* 最长检测时间是10s */
-					timer = setTimeout(() => {
-						clearInterval(interval);
+					timer = popsUtils.setTimeout(() => {
+						popsUtils.clearInterval(interval);
 					}, maxTime);
 				},
 				/**
@@ -981,16 +981,16 @@ export const PanelHandleContentDetails = () => {
 						return;
 					}
 					this.$data.isCheckingStopDragMove = true;
-					let interval = setInterval(() => {
+					let interval = popsUtils.setInterval(() => {
 						if (!this.$data.isMove) {
 							this.$data.isCheckingStopDragMove = false;
 							this.closeToolTip();
-							clearInterval(interval);
+							popsUtils.clearInterval(interval);
 						}
 					}, 200);
-					setTimeout(() => {
+					popsUtils.setTimeout(() => {
 						this.$data.isCheckingStopDragMove = false;
-						clearInterval(interval);
+						popsUtils.clearInterval(interval);
 					}, 2000);
 				},
 				/**

package/src/components/rightClickMenu/index.ts

@@ -23,7 +23,7 @@ export const PopsRightClickMenu = {
 		config = popsUtils.assign(config, details);
 		config = PopsHandler.handleOnly(PopsType, config);
 		if (config.target == null) {
-			throw "config.target 不能为空";
+			throw new Error("config.target 不能为空");
 		}
 		if (details.data) {
 			// @ts-ignore

package/src/components/searchSuggestion/index.ts

@@ -17,7 +17,7 @@ export const PopsSearchSuggestion = {
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
 		if (config.target == null) {
-			throw new TypeError("config.target 不能为空");
+			throw new Error("config.target 不能为空");
 		}
 		/* 做下兼容处理 */
 		if (config.inputTarget == null) {
@@ -352,7 +352,7 @@ export const PopsSearchSuggestion = {
 						option
 					);
 				} else {
-					throw new TypeError("未知followPosition：" + config.followPosition);
+					throw new Error("未知followPosition：" + config.followPosition);
 				}
 			},
 			/**

package/src/components/tooltip/config.ts

@@ -6,6 +6,7 @@ export const PopsTooltipConfig = (): DeepRequired<PopsToolTipDetails> => {
 		useShadowRoot: true,
 		target: null as any,
 		content: "默认文字",
+		isDiffContent: false,
 		position: "top",
 		className: "",
 		isFixed: false,

package/src/components/tooltip/index.ts

@@ -128,6 +128,19 @@ export class ToolTip {
 		if (text == null) {
 			text = this.getContent();
 		}
+		if (this.$data.config.isDiffContent) {
+			let contentPropKey = "data-content";
+			// @ts-ignore
+			let originContentText: string = this.$el.$content[contentPropKey];
+			if (typeof originContentText === "string") {
+				if (originContentText === text) {
+					// 内容未改变，不修改避免渲染
+					return;
+				}
+			}
+			// @ts-ignore
+			this.$el.$content[contentPropKey] = text;
+		}
 		PopsSafeUtils.setSafeHTML(this.$el.$content, text);
 	}
 	/**
@@ -146,6 +159,7 @@ export class ToolTip {
 	}
 	/**
 	 * 计算 提示框的位置
+	 * @param event 触发的事件
 	 * @param targetElement 目标元素
 	 * @param arrowDistance 箭头和目标元素的距离
 	 * @param otherDistance 其它位置的偏移
@@ -153,7 +167,8 @@ export class ToolTip {
 	calcToolTipPosition(
 		targetElement: HTMLElement,
 		arrowDistance: number,
-		otherDistance: number
+		otherDistance: number,
+		event?: MouseEvent | TouchEvent | PointerEvent
 	) {
 		let offsetInfo = popsDOMUtils.offset(
 			targetElement,
@@ -180,6 +195,30 @@ export class ToolTip {
 		/* 目标元素的Y轴的中间位置 */
 		let targetElement_Y_center_pos =
 			targetElement_top + targetElement_height / 2 - toolTipElement_height / 2;
+
+		let mouseX = 0;
+		let mouseY = 0;
+		if (event != null) {
+			if (event instanceof MouseEvent || event instanceof PointerEvent) {
+				mouseX = event.pageX;
+				mouseY = event.y;
+			} else if (event instanceof TouchEvent) {
+				let touchEvent = event.touches[0];
+				mouseX = touchEvent.pageX;
+				mouseY = touchEvent.pageY;
+			} else {
+				// @ts-ignore
+				if (typeof event.clientX === "number") {
+					// @ts-ignore
+					mouseX = event.clientX;
+				}
+				// @ts-ignore
+				if (typeof event.clientY === "number") {
+					// @ts-ignore
+					mouseY = event.clientY;
+				}
+			}
+		}
 		return {
 			TOP: {
 				left: targetElement_X_center_pos - otherDistance,
@@ -205,19 +244,26 @@ export class ToolTip {
 				arrow: "right",
 				motion: "fadeInLeft",
 			},
+			FOLLOW: {
+				left: mouseX + otherDistance,
+				top: mouseY + otherDistance,
+				arrow: "follow",
+				motion: "",
+			},
 		};
 	}
 	/**
 	 * 动态修改tooltip的位置
 	 */
-	changePosition() {
+	changePosition(event?: MouseEvent | TouchEvent | PointerEvent) {
 		let positionInfo = this.calcToolTipPosition(
 			this.$data.config.target,
 			this.$data.config.arrowDistance,
-			this.$data.config.otherDistance
+			this.$data.config.otherDistance,
+			event
 		);
-		let positionKey =
-			this.$data.config.position.toUpperCase() as any as keyof typeof positionInfo;
+		let positionKey = this.$data.config.position.toUpperCase() as any as
+			| keyof typeof positionInfo;
 		let positionDetail = positionInfo[positionKey];
 		if (positionDetail) {
 			this.$el.$toolTip.style.left = positionDetail.left + "px";
@@ -276,12 +322,12 @@ export class ToolTip {
 			if (typeof timeId === "number") {
 				// 只清除一个
 				if (timeId == currentTimeId) {
-					clearTimeout(timeId);
+					popsUtils.clearTimeout(timeId);
 					timeIdList.splice(index, 1);
 					break;
 				}
 			} else {
-				clearTimeout(currentTimeId);
+				popsUtils.clearTimeout(currentTimeId);
 				timeIdList.splice(index, 1);
 				index--;
 			}
@@ -322,7 +368,7 @@ export class ToolTip {
 		// 更新内容
 		this.changeContent();
 		// 更新tip的位置
-		this.changePosition();
+		this.changePosition(event);
 		if (typeof this.$data.config.showAfterCallBack === "function") {
 			this.$data.config.showAfterCallBack(this.$el.$toolTip);
 		}
@@ -380,19 +426,26 @@ export class ToolTip {
 		) {
 			this.$data.config.delayCloseTime = 100;
 		}
-		let timeId = setTimeout(() => {
+		let timeId = popsUtils.setTimeout(() => {
 			// 设置属性触发关闭动画
 			this.clearCloseTimeoutId(eventType, timeId);
 			if (this.$el.$toolTip == null) {
 				// 已清除了
 				return;
 			}
-			this.$el.$toolTip.setAttribute(
-				"data-motion",
-				this.$el.$toolTip
-					.getAttribute("data-motion")!
-					.replace("fadeIn", "fadeOut")
-			);
+			let motion = this.$el.$toolTip.getAttribute("data-motion");
+			if (motion == null || motion.trim() === "") {
+				// 没有动画
+				this.toolTipAnimationFinishEvent();
+			} else {
+				// 修改data-motion触发动画关闭
+				this.$el.$toolTip.setAttribute(
+					"data-motion",
+					this.$el.$toolTip
+						.getAttribute("data-motion")!
+						.replace("fadeIn", "fadeOut")
+				);
+			}
 		}, this.$data.config.delayCloseTime);
 		this.addCloseTimeoutId(eventType, timeId);
 		if (typeof this.$data.config.closeAfterCallBack === "function") {
@@ -554,7 +607,7 @@ export const PopsTooltip = {
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
 		if (!(config.target instanceof HTMLElement)) {
-			throw "config.target 必须是HTMLElement类型";
+			throw new TypeError("config.target 必须是HTMLElement类型");
 		}
 		config = PopsHandler.handleOnly(PopsType, config);
 

package/src/components/tooltip/indexType.ts

@@ -1,7 +1,12 @@
 import type { PopsCommonConfig } from "../../types/components";
 
 /** tooltip的出现位置 */
-export type PopsTooltipPosition = "top" | "right" | "bottom" | "left";
+export type PopsTooltipPosition =
+	| "top"
+	| "right"
+	| "bottom"
+	| "left"
+	| "follow";
 
 /**
  * pops.tooltip
@@ -19,20 +24,28 @@ export interface PopsToolTipDetails
 	 * 显示的文字
 	 */
 	content: string | (() => string);
+	/**
+	 * 是否比较获取到的content的内容是否改变
+	 *
+	 * 如果未改变，则在触发.show时不修改内容
+	 * @default false
+	 */
+	isDiffContent?: boolean;
 	/**
 	 * 位置
+	 * + `follow` 跟随鼠标|触摸位置移动
 	 * @default "top"
 	 */
 	position?: PopsTooltipPosition;
 	/**
 	 * 自定义className
 	 *
-	 * + github-tooltip github的样式
+	 * + `github-tooltip` github的样式
 	 * @default ""
 	 */
 	className?: string;
 	/**
-	 * 是否使用fixed定位，默认是absolute
+	 * 是否使用fixed定位，false则是absolute定位
 	 *
 	 * @default false
 	 */
@@ -41,7 +54,7 @@ export interface PopsToolTipDetails
 	 * 是否总是显示，默认为false
 	 * + true 设置的triggerShowEventName、triggerCloseEventName将无效
 	 *        返回提供show和close函数，取消on和off
-	 * + false 不添加事件，只显示
+	 * + false 事件触发才显示
 	 */
 	alwaysShow?: boolean;
 	/**
@@ -105,6 +118,7 @@ export interface PopsToolTipDetails
 	 * 其它的距离(px)
 	 * + 当position为left或者right，这个距离是上、下距离
 	 * + 当position为top或者bottom，这个距离是左、右距离
+	 * + 当position为follow，这个距离是上、左距离
 	 * @default 0
 	 */
 	otherDistance?: number;

package/src/utils/PopsDOMUtils.ts

@@ -680,7 +680,7 @@ class PopsDOMUtilsEvent {
 		}
 		if (checkDOMReadyState()) {
 			/* 检查document状态 */
-			setTimeout(callback);
+			popsUtils.setTimeout(callback, 0);
 		} else {
 			/* 添加监听 */
 			addDomReadyListener();

package/src/utils/PopsInstanceUtils.ts

@@ -273,7 +273,7 @@ export const PopsInstanceUtils = {
 				animElement.querySelector<HTMLDivElement>(".pops[type-value]")!;
 			if (popsType === "drawer") {
 				let drawerConfig = config as Required<PopsDrawerDetails>;
-				setTimeout(() => {
+				popsUtils.setTimeout(() => {
 					maskElement.style.setProperty("display", "none");
 					if (["top", "bottom"].includes(drawerConfig.direction)) {
 						popsElement.style.setProperty("height", "0");
@@ -368,7 +368,7 @@ export const PopsInstanceUtils = {
 				animElement.querySelector<HTMLDivElement>(".pops[type-value]")!;
 			if (popsType === "drawer") {
 				let drawerConfig = config as PopsDrawerDetails;
-				setTimeout(() => {
+				popsUtils.setTimeout(() => {
 					popsDOMUtils.css(maskElement!, "display", "");
 					let direction = drawerConfig.direction!;
 					let size = drawerConfig.size!.toString();
@@ -380,7 +380,7 @@ export const PopsInstanceUtils = {
 						console.error("未知direction：", direction);
 					}
 					resolve();
-				}, drawerConfig.openDelay);
+				}, drawerConfig.openDelay ?? 0);
 			} else {
 				let findLayerIns = layerConfigList.find(
 					(layerConfigItem) => layerConfigItem.guid === guid
@@ -512,7 +512,7 @@ export const PopsInstanceUtils = {
 			}
 
 			if (popsType === "drawer") {
-				setTimeout(() => {
+				popsUtils.setTimeout(() => {
 					transitionendEvent();
 				}, drawerConfig.closeDelay);
 			} else {
@@ -786,10 +786,10 @@ export const PopsInstanceUtils = {
 		sortByDesc = true
 	) {
 		if (typeof sortByDesc !== "boolean") {
-			throw "参数 sortByDesc 必须为boolean类型";
+			throw new TypeError("参数 sortByDesc 必须为boolean类型");
 		}
 		if (getBeforeValueFun == null || getAfterValueFun == null) {
-			throw "获取前面的值或后面的值的方法不能为空";
+			throw new Error("获取前面的值或后面的值的方法不能为空");
 		}
 		return function (after_obj: T, before_obj: T) {
 			var beforeValue = getBeforeValueFun(before_obj); /*  前 */

package/src/utils/PopsUtils.ts

@@ -1,6 +1,12 @@
 import { PopsCore } from "../Core";
 import type { PopsUtilsOwnObject } from "../types/main";
 import { popsDOMUtils } from "./PopsDOMUtils";
+import {
+	clearInterval as WorkerClearInterval,
+	clearTimeout as WorkerClearTimeout,
+	setInterval as WorkerSetInterval,
+	setTimeout as WorkerSetTimeout,
+} from "worker-timers";
 import AnyTouch from "any-touch";
 
 class PopsUtils {
@@ -349,7 +355,7 @@ class PopsUtils {
 	formatByteToSize(byteSize: number | string, addType = true) {
 		byteSize = parseInt(byteSize.toString());
 		if (isNaN(byteSize)) {
-			throw new Error("Utils.formatByteToSize 参数 byteSize 格式不正确");
+			throw new TypeError("Utils.formatByteToSize 参数 byteSize 格式不正确");
 		}
 		let result = 0;
 		let resultType = "KB";
@@ -383,6 +389,52 @@ class PopsUtils {
 	AnyTouch = () => {
 		return AnyTouch;
 	};
+	/**
+	 * 自动使用 Worker 执行 setTimeout
+	 */
+	setTimeout(callback: Function, timeout: number = 0) {
+		try {
+			return WorkerSetTimeout(callback, timeout);
+		} catch (error) {
+			return globalThis.setTimeout(callback, timeout);
+		}
+	}
+	/**
+	 * 配合 .setTimeout 使用
+	 */
+	clearTimeout(timeId: number | undefined) {
+		try {
+			if (timeId != null) {
+				WorkerClearTimeout(timeId);
+			}
+		} catch (error) {
+		} finally {
+			globalThis.clearTimeout(timeId);
+		}
+	}
+	/**
+	 * 自动使用 Worker 执行 setInterval
+	 */
+	setInterval(callback: Function, timeout: number = 0) {
+		try {
+			return WorkerSetInterval(callback, timeout);
+		} catch (error) {
+			return globalThis.setInterval(callback, timeout);
+		}
+	}
+	/**
+	 * 配合 .setInterval 使用
+	 */
+	clearInterval(timeId: number | undefined) {
+		try {
+			if (timeId != null) {
+				WorkerClearInterval(timeId);
+			}
+		} catch (error) {
+		} finally {
+			globalThis.clearInterval(timeId);
+		}
+	}
 }
 
 const popsUtils = new PopsUtils();