@whitesev/pops 1.8.8 → 1.8.9

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;
@@ -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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "1.8.8",
+  "version": "1.8.9",
   "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/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/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
 		);