@whitesev/pops 2.0.6 → 2.0.8

package/src/components/searchSuggestion/index.ts

@@ -7,8 +7,8 @@ import { GlobalConfig } from "../../GlobalConfig";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import type { PopsSearchSuggestionDetails } from "./indexType";
 
-export class PopsSearchSuggestion {
-	constructor(details: PopsSearchSuggestionDetails) {
+export const PopsSearchSuggestion = {
+	init(details: PopsSearchSuggestionDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
 		const PopsType = "searchSuggestion";
@@ -17,7 +17,7 @@ export class 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 class PopsSearchSuggestion {
 						option
 					);
 				} else {
-					throw new TypeError("未知followPosition：" + config.followPosition);
+					throw new Error("未知followPosition：" + config.followPosition);
 				}
 			},
 			/**
@@ -675,5 +675,5 @@ export class PopsSearchSuggestion {
 			},
 		};
 		return SearchSuggestion;
-	}
-}
+	},
+};

package/src/components/searchSuggestion/indexType.ts

@@ -145,112 +145,3 @@ export interface PopsSearchSuggestionDetails<T = any>
 		data: T
 	) => void;
 }
-
-/**
- * pops.searchSuggestion的函数返回值
- */
-export interface PopsSearchSuggestionResult<T = any> {
-	$el: {
-		/** 根元素 */
-		root: HTMLElement;
-		/** ul元素 */
-		$hintULContainer: HTMLUListElement;
-		/** 动态更新CSS */
-		$dynamicCSS: HTMLStyleElement;
-	};
-	/**
-	 * 初始化
-	 */
-	init: () => void;
-	/**
-	 * 获取显示出搜索建议框的html
-	 */
-	getSearchSelectElement: () => HTMLElement;
-	/**
-	 * 获取显示出搜索建议框的每一项的html
-	 */
-	getSearchItemLiElement: (data: T, index: number) => HTMLElement;
-	/**
-	 * 获取data-value值
-	 */
-	getItemDataValue: (data: T) => T;
-	/**
-	 * 设置搜索建议框每一项的点击事件
-	 */
-	setSearchItemClickEvent: (liElement: HTMLLIElement) => void;
-	/**
-	 * 监听输入框内容改变
-	 */
-	setInputChangeEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 移除输入框内容改变的监听
-	 */
-	removeInputChangeEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 设置显示搜索建议框的事件
-	 */
-	setShowEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 移除显示搜索建议框的事件
-	 */
-	removeShowEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 设置隐藏搜索建议框的事件
-	 */
-	setHideEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 移除隐藏搜索建议框的事件
-	 */
-	removeHideEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 设置所有监听
-	 */
-	setAllEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 移除所有监听
-	 */
-	removeAllEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 获取删除按钮的html
-	 */
-	getDeleteIconHTML: (size: number, fill: string) => void;
-	/**
-	 * 设置当前正在搜索中的提示
-	 */
-	setPromptsInSearch: () => void;
-	/**
-	 * 移除正在搜索中的提示
-	 */
-	removePromptsInSearch: () => void;
-	/**
-	 * 清空所有的搜索结果
-	 */
-	clearAllSearchItemLi: () => void;
-	/**
-	 * 修改搜索建议框的位置(top、left)
-	 * 因为目标元素可能是动态隐藏的
-	 */
-	changeHintULElementPosition: () => void;
-	/**
-	 * 修改搜索建议框的width
-	 * 因为目标元素可能是动态隐藏的
-	 */
-	changeHintULElementWidth: () => void;
-	updateDynamicCSS: () => void;
-	/**
-	 * 更新页面显示的搜索结果
-	 */
-	update: (data: T[]) => void;
-	/**
-	 * 清空当前的搜索结果并显示无结果
-	 */
-	clear: () => void;
-	/**
-	 * 隐藏搜索建议框
-	 */
-	hide: () => void;
-	/**
-	 * 显示搜索建议框
-	 */
-	show: () => void;
-}

package/src/components/tooltip/index.ts

@@ -146,6 +146,7 @@ export class ToolTip {
 	}
 	/**
 	 * 计算 提示框的位置
+	 * @param event 触发的事件
 	 * @param targetElement 目标元素
 	 * @param arrowDistance 箭头和目标元素的距离
 	 * @param otherDistance 其它位置的偏移
@@ -153,7 +154,8 @@ export class ToolTip {
 	calcToolTipPosition(
 		targetElement: HTMLElement,
 		arrowDistance: number,
-		otherDistance: number
+		otherDistance: number,
+		event?: MouseEvent | TouchEvent | PointerEvent
 	) {
 		let offsetInfo = popsDOMUtils.offset(
 			targetElement,
@@ -180,6 +182,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 +231,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 +309,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 +355,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 +413,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") {
@@ -544,8 +584,8 @@ export type PopsTooltipResult<T extends PopsToolTipDetails> = {
 	toolTip: typeof ToolTip.prototype;
 };
 
-export class PopsTooltip {
-	constructor(details: PopsToolTipDetails) {
+export const PopsTooltip = {
+	init(details: PopsToolTipDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
 		const PopsType = "tooltip";
@@ -554,7 +594,7 @@ export class 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);
 
@@ -579,11 +619,11 @@ export class PopsTooltip {
 		}
 
 		return {
-			guid: guid,
-			config: config,
-			$shadowContainer: $shadowContainer,
-			$shadowRoot: $shadowRoot,
-			toolTip: toolTip,
+			guid,
+			config,
+			$shadowContainer,
+			$shadowRoot,
+			toolTip,
 		};
-	}
-}
+	},
+};

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
@@ -21,18 +26,19 @@ export interface PopsToolTipDetails
 	content: string | (() => string);
 	/**
 	 * 位置
+	 * + `follow` 跟随鼠标|触摸位置移动
 	 * @default "top"
 	 */
 	position?: PopsTooltipPosition;
 	/**
 	 * 自定义className
 	 *
-	 * + github-tooltip github的样式
+	 * + `github-tooltip` github的样式
 	 * @default ""
 	 */
 	className?: string;
 	/**
-	 * 是否使用fixed定位，默认是absolute
+	 * 是否使用fixed定位，false则是absolute定位
 	 *
 	 * @default false
 	 */
@@ -41,7 +47,7 @@ export interface PopsToolTipDetails
 	 * 是否总是显示，默认为false
 	 * + true 设置的triggerShowEventName、triggerCloseEventName将无效
 	 *        返回提供show和close函数，取消on和off
-	 * + false 不添加事件，只显示
+	 * + false 事件触发才显示
 	 */
 	alwaysShow?: boolean;
 	/**
@@ -105,6 +111,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();