@whitesev/pops 1.8.8 → 1.9.0

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

@@ -86,7 +86,7 @@ declare class Pops {
         DOMUtils: {
             getAnimationEndNameList(): string[];
             getTransitionEndNameList(): string[];
-            offset(element: HTMLElement): DOMRect;
+            offset(element: HTMLElement, calcScroll?: boolean): DOMRect;
             width(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
             height(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
             outerWidth(element: HTMLElement | string | Window | Document, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
@@ -146,15 +146,15 @@ declare class Pops {
         };
         /** pops创建的实例使用的工具类 */
         InstanceUtils: {
-            getMaxZIndexNodeInfo(deviation?: number): {
+            getMaxZIndexNodeInfo(deviation?: number, target?: Element | ShadowRoot | Document, ignoreCallBack?: ($ele: Element | HTMLElement | ShadowRoot) => boolean | void): {
                 node: Element;
                 zIndex: number;
             };
-            getMaxZIndex(deviation?: number): number;
             getPopsMaxZIndex(deviation?: number): {
                 zIndex: number;
                 animElement: HTMLDivElement | null;
             };
+            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;
@@ -289,7 +289,7 @@ declare class Pops {
      * 提示框
      * @param details 配置
      */
-    tooltip: <T extends PopsToolTipDetails>(details: T) => PopsTooltipResult<T>;
+    tooltip: <T extends PopsToolTipDetails = PopsToolTipDetails>(details: T) => PopsTooltipResult<T>;
     /**
      * 抽屉
      * @param details 配置

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

@@ -130,39 +130,39 @@ export declare class ToolTip {
     /**
      * 动画结束事件
      */
-    animationFinishEvent(): void;
+    toolTipAnimationFinishEvent(): void;
     /**
-     * 监听动画结束
+     * 监听tooltip的动画结束
      */
-    onAnimationFinishEvent(): void;
+    onToolTipAnimationFinishEvent(): void;
     /**
-     * 取消监听动画结束
+     * 取消tooltip监听动画结束
      */
-    offAnimationFinishEvent(): void;
+    offToolTipAnimationFinishEvent(): void;
     /**
      * 鼠标|触摸进入事件
      */
-    mouseEnterEvent(): void;
+    toolTipMouseEnterEvent(): void;
     /**
      * 监听鼠标|触摸事件
      */
-    onMouseEnterEvent(): void;
+    onToolTipMouseEnterEvent(): void;
     /**
      * 取消监听鼠标|触摸事件
      */
-    offMouseEnterEvent(): void;
+    offToolTipMouseEnterEvent(): void;
     /**
      * 鼠标|触摸离开事件
      */
-    mouseLeaveEvent(): void;
+    toolTipMouseLeaveEvent(): void;
     /**
      * 监听鼠标|触摸离开事件
      */
-    onMouseLeaveEvent(): void;
+    onToolTipMouseLeaveEvent(): void;
     /**
      * 取消监听鼠标|触摸离开事件
      */
-    offMouseLeaveEvent(): void;
+    offToolTipMouseLeaveEvent(): void;
 }
 export type PopsTooltipResult<T extends PopsToolTipDetails> = {
     guid: string;

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

@@ -21,6 +21,12 @@ export interface PopsToolTipDetails {
      * + github-tooltip
      */
     className?: string;
+    /**
+     * 是否使用fixed定位，默认是absolute
+     *
+     * @default false
+     */
+    isFixed?: boolean;
     /**
      * 是否总是显示，默认为false
      * + true 设置的triggerShowEventName、triggerCloseEventName将无效

package/dist/types/src/handler/PopsHandler.d.ts

@@ -25,6 +25,8 @@ export declare const PopsHandler: {
     handleInit($shadowRoot?: ShadowRoot, cssText?: string | string[]): void;
     /**
      * 处理遮罩层
+     *
+     * + 设置遮罩层的点击事件
      * @param details 传递的配置
      */
     handleMask(details?: {
@@ -38,7 +40,7 @@ export declare const PopsHandler: {
     };
     /**
      * 处理获取元素
-     * @param {HTMLDivElement} animElement
+     * @param animElement
      * @param type
      */
     handleQueryElement(animElement: HTMLDivElement, type: PopsType): {

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

@@ -339,10 +339,10 @@ declare class PopsDOMUtils extends PopsDOMUtilsEvent {
     getTransitionEndNameList(): string[];
     /**
      * 实现jQuery中的$().offset();
-     * @param {HTMLElement} element
-     * @returns
+     * @param element
+     * @param calcScroll 计算滚动距离
      */
-    offset(element: HTMLElement): DOMRect;
+    offset(element: HTMLElement, calcScroll?: boolean): DOMRect;
     /**
      * 获取元素的宽度
      * @param element 要获取宽度的元素

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

@@ -12,6 +12,8 @@ export declare const PopsInstanceUtils: {
     /**
      * 获取页面中最大的z-index的元素信息
      * @param deviation 获取最大的z-index值的偏移，默认是+1
+     * @param node 进行判断的元素，默认是document
+     * @param ignoreCallBack 执行元素处理时调用的函数，返回false可忽略不想要处理的元素
      * @example
      * Utils.getMaxZIndexNodeInfo();
      * > {
@@ -19,18 +21,10 @@ export declare const PopsInstanceUtils: {
      *   zIndex: 1001
      * }
      **/
-    getMaxZIndexNodeInfo(deviation?: number): {
+    getMaxZIndexNodeInfo(deviation?: number, target?: Element | ShadowRoot | Document, ignoreCallBack?: ($ele: Element | HTMLElement | ShadowRoot) => boolean | void): {
         node: Element;
         zIndex: number;
     };
-    /**
-     * 获取页面中最大的z-index
-     * @param deviation 获取最大的z-index值的偏移，默认是+1
-     * @example
-     * Utils.getMaxZIndex();
-     * > 1001
-     **/
-    getMaxZIndex(deviation?: number): number;
     /**
      * 获取pops所有弹窗中的最大的z-index
      * @param deviation
@@ -39,6 +33,14 @@ export declare const PopsInstanceUtils: {
         zIndex: number;
         animElement: HTMLDivElement | null;
     };
+    /**
+     * 获取页面中最大的z-index
+     * @param deviation 获取最大的z-index值的偏移，默认是+1
+     * @example
+     * Utils.getMaxZIndex();
+     * > 1001
+     **/
+    getMaxZIndex(deviation?: number): number;
     /**
      * 获取CSS Rule
      * @param sheet

package/package.json

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

package/src/Pops.ts

@@ -283,7 +283,7 @@ class Pops {
 	 * 提示框
 	 * @param details 配置
 	 */
-	tooltip = <T extends PopsToolTipDetails>(details: T) => {
+	tooltip = <T extends PopsToolTipDetails=PopsToolTipDetails>(details: T) => {
 		let popsTooltip = new PopsTooltip(details) as PopsTooltipResult<T>;
 		return popsTooltip;
 	};

package/src/components/panel/PanelHandleContentDetails.ts

@@ -980,6 +980,7 @@ export const PanelHandleContentDetails = () => {
 						zIndex: () => {
 							return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
 						},
+						isFixed: true,
 						className: "github-tooltip",
 						only: false,
 						eventOption: {
@@ -1000,7 +1001,6 @@ export const PanelHandleContentDetails = () => {
 							}
 						},
 						alwaysShow: false,
-						// only: false,
 						position: "top",
 						arrowDistance: 10,
 					});

package/src/components/panel/index.ts

@@ -93,19 +93,19 @@ export class PopsPanel {
 		/**
 		 * 已创建的元素列表
 		 */
-		let elementList: HTMLElement[] = [$anim];
+		let isCreatedElementList: HTMLElement[] = [$anim];
 
 		/* 遮罩层元素 */
 		if (config.mask.enable) {
-			let _handleMask_ = PopsHandler.handleMask({
+			let { maskElement } = PopsHandler.handleMask({
 				type: PopsType,
 				guid: guid,
 				config: config,
 				animElement: $anim,
 				maskHTML: maskHTML,
 			});
-			$mask = _handleMask_.maskElement;
-			elementList.push($mask);
+			$mask = maskElement;
+			isCreatedElementList.push($mask);
 		}
 
 		/* 处理返回的配置 */
@@ -128,7 +128,7 @@ export class PopsPanel {
 		);
 
 		/* 创建到页面中 */
-		popsDOMUtils.append($shadowRoot, elementList);
+		popsDOMUtils.append($shadowRoot, isCreatedElementList);
 		if (typeof config.beforeAppendToPageCallBack === "function") {
 			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
 		}

package/src/components/tooltip/config.ts

@@ -5,9 +5,9 @@ export const PopsTooltipConfig = (): Required<PopsToolTipDetails> => {
 		// @ts-ignore
 		target: null,
 		content: "默认文字",
-
 		position: "top",
 		className: "",
+		isFixed: false,
 		alwaysShow: false,
 		triggerShowEventName: "mouseenter touchstart",
 		triggerCloseEventName: "mouseleave touchend",

package/src/components/tooltip/index.css

@@ -13,7 +13,6 @@
 	--tooltip-arrow--after-width: 12px;
 	--tooltip-arrow--after-height: 12px;
 
-	position: absolute;
 	padding: var(--tooltip-padding-top) var(--tooltip-padding-right)
 		var(--tooltip-padding-bottom) var(--tooltip-padding-left);
 	max-width: 400px;
@@ -24,6 +23,12 @@
 	color: var(--tooltip-color);
 	font-size: var(--tooltip-font-size);
 }
+.pops-tip[data-position="absolute"] {
+	position: absolute;
+}
+.pops-tip[data-position="fixed"] {
+	position: fixed;
+}
 /* github的样式 */
 .pops-tip.github-tooltip {
 	--tooltip-bg-opacity: 1;

package/src/components/tooltip/index.ts

@@ -56,13 +56,20 @@ export class ToolTip {
 	 * 创建提示元素
 	 */
 	createToolTip() {
-		let $toolTipContainer = popsDOMUtils.createElement("div", {
-			className: "pops-tip",
-			innerHTML: /*html*/ `
+		let $toolTipContainer = popsDOMUtils.createElement(
+			"div",
+			{
+				className: "pops-tip",
+				innerHTML: /*html*/ `
 				<div class="pops-tip-content" style="text-align: center;"></div>
 				<div class="pops-tip-arrow"></div>
 			`,
-		});
+			},
+			{
+				"data-position": this.$data.config.isFixed ? "fixed" : "absolute",
+				"data-guid": this.$data.guid,
+			}
+		);
 		/** 内容 */
 		let $toolTipContent =
 			$toolTipContainer.querySelector<HTMLElement>(".pops-tip-content")!;
@@ -77,8 +84,6 @@ export class ToolTip {
 		) {
 			popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
 		}
-		// 添加attr
-		$toolTipContainer.setAttribute("data-guid", this.$data.guid);
 		// 添加z-index
 		$toolTipContainer.style.zIndex = PopsHandler.handleZIndex(
 			this.$data.config.zIndex
@@ -140,14 +145,22 @@ export class ToolTip {
 		arrowDistance: number,
 		otherDistance: number
 	) {
-		let targetElement_width = popsDOMUtils.offset(targetElement).width;
-		let targetElement_height = popsDOMUtils.offset(targetElement).height;
-		let targetElement_top = popsDOMUtils.offset(targetElement).top;
+		let offsetInfo = popsDOMUtils.offset(
+			targetElement,
+			!this.$data.config.isFixed
+		);
+		// 目标 宽
+		let targetElement_width = offsetInfo.width;
+		// 目标 高
+		let targetElement_height = offsetInfo.height;
+		// 目标 顶部距离
+		let targetElement_top = offsetInfo.top;
 
-		// let targetElement_bottom = popsDOMUtils.offset(targetElement).bottom;
-		let targetElement_left = popsDOMUtils.offset(targetElement).left;
+		// let targetElement_bottom = offsetInfo.bottom;
+		// 目标 左边距离
+		let targetElement_left = offsetInfo.left;
 
-		// let targetElement_right = popsDOMUtils.offset(targetElement).right;
+		// let targetElement_right = offsetInfo.right;
 
 		let toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
 		let toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
@@ -211,21 +224,21 @@ export class ToolTip {
 	 */
 	onEvent() {
 		// 监听动画结束事件
-		this.onAnimationFinishEvent();
+		this.onToolTipAnimationFinishEvent();
 		this.onShowEvent();
 		this.onCloseEvent();
-		this.onMouseEnterEvent();
-		this.onMouseLeaveEvent();
+		this.onToolTipMouseEnterEvent();
+		this.onToolTipMouseLeaveEvent();
 	}
 	/**
 	 * 取消事件绑定
 	 */
 	offEvent() {
-		this.offAnimationFinishEvent();
+		this.offToolTipAnimationFinishEvent();
 		this.offShowEvent();
 		this.offCloseEvent();
-		this.offMouseEnterEvent();
-		this.offMouseLeaveEvent();
+		this.offToolTipMouseEnterEvent();
+		this.offToolTipMouseLeaveEvent();
 	}
 	/**
 	 * 添加关闭的timeId
@@ -413,7 +426,7 @@ export class ToolTip {
 	/**
 	 * 动画结束事件
 	 */
-	animationFinishEvent() {
+	toolTipAnimationFinishEvent() {
 		if (!this.$el.$toolTip) {
 			return;
 		}
@@ -423,29 +436,29 @@ export class ToolTip {
 		this.destory();
 	}
 	/**
-	 * 监听动画结束
+	 * 监听tooltip的动画结束
 	 */
-	onAnimationFinishEvent() {
+	onToolTipAnimationFinishEvent() {
 		popsDOMUtils.on(
 			this.$el.$toolTip,
 			popsDOMUtils.getAnimationEndNameList(),
-			this.animationFinishEvent.bind(this)
+			this.toolTipAnimationFinishEvent.bind(this)
 		);
 	}
 	/**
-	 * 取消监听动画结束
+	 * 取消tooltip监听动画结束
 	 */
-	offAnimationFinishEvent() {
+	offToolTipAnimationFinishEvent() {
 		popsDOMUtils.off(
 			this.$el.$toolTip,
 			popsDOMUtils.getAnimationEndNameList(),
-			this.animationFinishEvent.bind(this)
+			this.toolTipAnimationFinishEvent.bind(this)
 		);
 	}
 	/**
 	 * 鼠标|触摸进入事件
 	 */
-	mouseEnterEvent() {
+	toolTipMouseEnterEvent() {
 		this.$el.$toolTip.style.animationPlayState = "paused";
 		// if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
 		// toolTipElement.style.animationPlayState = "paused";
@@ -454,52 +467,52 @@ export class ToolTip {
 	/**
 	 * 监听鼠标|触摸事件
 	 */
-	onMouseEnterEvent() {
+	onToolTipMouseEnterEvent() {
 		this.clearCloseTimeoutId("MouseEvent");
 		this.clearCloseTimeoutId("TouchEvent");
 		popsDOMUtils.on(
 			this.$el.$toolTip,
 			"mouseenter touchstart",
-			this.mouseEnterEvent.bind(this),
+			this.toolTipMouseEnterEvent.bind(this),
 			this.$data.config.eventOption
 		);
 	}
 	/**
 	 * 取消监听鼠标|触摸事件
 	 */
-	offMouseEnterEvent() {
+	offToolTipMouseEnterEvent() {
 		popsDOMUtils.off(
 			this.$el.$toolTip,
 			"mouseenter touchstart",
-			this.mouseEnterEvent.bind(this),
+			this.toolTipMouseEnterEvent.bind(this),
 			this.$data.config.eventOption
 		);
 	}
 	/**
 	 * 鼠标|触摸离开事件
 	 */
-	mouseLeaveEvent() {
+	toolTipMouseLeaveEvent() {
 		this.$el.$toolTip.style.animationPlayState = "running";
 	}
 	/**
 	 * 监听鼠标|触摸离开事件
 	 */
-	onMouseLeaveEvent() {
+	onToolTipMouseLeaveEvent() {
 		popsDOMUtils.on(
 			this.$el.$toolTip,
 			"mouseleave touchend",
-			this.mouseLeaveEvent.bind(this),
+			this.toolTipMouseLeaveEvent.bind(this),
 			this.$data.config.eventOption
 		);
 	}
 	/**
 	 * 取消监听鼠标|触摸离开事件
 	 */
-	offMouseLeaveEvent() {
+	offToolTipMouseLeaveEvent() {
 		popsDOMUtils.off(
 			this.$el.$toolTip,
 			"mouseleave touchend",
-			this.mouseLeaveEvent.bind(this),
+			this.toolTipMouseLeaveEvent.bind(this),
 			this.$data.config.eventOption
 		);
 	}

package/src/components/tooltip/indexType.ts

@@ -22,6 +22,12 @@ export interface PopsToolTipDetails {
 	 * + github-tooltip
 	 */
 	className?: string;
+	/**
+	 * 是否使用fixed定位，默认是absolute
+	 * 
+	 * @default false
+	 */
+	isFixed?:boolean;
 	/**
 	 * 是否总是显示，默认为false
 	 * + true 设置的triggerShowEventName、triggerCloseEventName将无效

package/src/handler/PopsHandler.ts

@@ -62,6 +62,8 @@ export const PopsHandler = {
 	},
 	/**
 	 * 处理遮罩层
+	 *
+	 * + 设置遮罩层的点击事件
 	 * @param details 传递的配置
 	 */
 	handleMask(
@@ -130,27 +132,32 @@ export const PopsHandler = {
 			}
 			return false;
 		}
-		function isAnimElement(element: HTMLDivElement) {
-			return Boolean(
-				element?.localName?.toLowerCase() === "div" &&
-					element.className &&
-					element.className === "pops-anim" &&
-					element.hasAttribute("anim")
-			);
-		}
+		// 判断是否启用了遮罩层点击动作
 		if (
 			details.config.mask.clickEvent!.toClose ||
 			details.config.mask.clickEvent!.toHide
 		) {
+			/**
+			 * 判断点击的元素是否是动画层的元素
+			 * @param element
+			 * @returns
+			 */
+			function isAnimElement(element: HTMLElement) {
+				return Boolean(
+					element?.localName?.toLowerCase() === "div" &&
+						element.className &&
+						element.className === "pops-anim" &&
+						element.hasAttribute("anim")
+				);
+			}
 			/* 判断按下的元素是否是pops-anim */
 			popsDOMUtils.on(
 				details.animElement,
 				["touchstart", "mousedown"],
 				void 0,
 				(event) => {
-					isMaskClick = isAnimElement(
-						event.composedPath()[0] as HTMLDivElement
-					);
+					let $click = event.composedPath()[0] as HTMLElement;
+					isMaskClick = isAnimElement($click);
 				}
 			);
 			/* 如果有动画层，在动画层上监听点击事件 */
@@ -159,10 +166,8 @@ export const PopsHandler = {
 				"click",
 				void 0,
 				(event) => {
-					if (
-						isAnimElement(event.composedPath()[0] as HTMLDivElement) &&
-						isMaskClick
-					) {
+					let $click = event.composedPath()[0] as HTMLElement;
+					if (isAnimElement($click) && isMaskClick) {
 						return clickEvent(event);
 					}
 				}
@@ -183,7 +188,7 @@ export const PopsHandler = {
 	},
 	/**
 	 * 处理获取元素
-	 * @param {HTMLDivElement} animElement
+	 * @param animElement
 	 * @param type
 	 */
 	handleQueryElement(animElement: HTMLDivElement, type: PopsType) {

package/src/utils/PopsDOMUtils.ts

@@ -1107,15 +1107,19 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 	}
 	/**
 	 * 实现jQuery中的$().offset();
-	 * @param {HTMLElement} element
-	 * @returns
+	 * @param element
+	 * @param calcScroll 计算滚动距离
 	 */
-	offset(element: HTMLElement) {
+	offset(element: HTMLElement, calcScroll: boolean = true) {
 		let rect = element.getBoundingClientRect();
 		let win = element.ownerDocument.defaultView;
 		let resultRect = new DOMRect(
-			parseFloat((rect.left + (win?.pageXOffset || 0)).toString()),
-			parseFloat((rect.top + (win?.pageYOffset || 0)).toString()),
+			calcScroll
+				? parseFloat((rect.left + (win?.pageXOffset || 0)).toString())
+				: rect.left,
+			calcScroll
+				? parseFloat((rect.top + (win?.pageYOffset || 0)).toString())
+				: rect.top,
 			rect.width,
 			rect.height
 		);