@whitesev/pops 1.8.5 → 1.8.6

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

@@ -13,6 +13,7 @@ import type { PopsPanelDetails } from "./components/panel/indexType";
 import type { PopsRightClickMenuDetails } from "./components/rightClickMenu/indexType";
 import type { PopsIcon } from "./types/icon";
 import type { PopsSearchSuggestionDetails, PopsSearchSuggestionResult } from "./components/searchSuggestion/indexType";
+import { type PopsTooltipResult } from "./components/tooltip";
 declare class Pops {
     /** 配置 */
     config: {
@@ -219,7 +220,6 @@ declare class Pops {
             setAsideItemClickEvent(asideLiElement: HTMLElement, asideConfig: import("./components/panel/indexType").PopsPanelContentConfig): void;
         };
     };
-    constructor();
     init(): void;
     /**
      * 释放原有的pops控制权
@@ -289,23 +289,7 @@ declare class Pops {
      * 提示框
      * @param details 配置
      */
-    tooltip: (details: PopsToolTipDetails) => {
-        guid: string;
-        config: Required<PopsToolTipDetails>;
-        toolTipNode: HTMLDivElement;
-        show: () => void;
-        close: () => void;
-    } | {
-        $shadowContainer: HTMLDivElement;
-        $shadowRoot: ShadowRoot;
-        guid: string;
-        config: Required<PopsToolTipDetails>;
-        toolTipNode: HTMLDivElement;
-        show: () => void;
-        close: () => void;
-        off: () => void;
-        on: () => void;
-    };
+    tooltip: <T extends PopsToolTipDetails>(details: T) => PopsTooltipResult<T>;
     /**
      * 抽屉
      * @param details 配置

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

@@ -1,4 +1,148 @@
 import type { PopsToolTipDetails } from "./indexType";
+export declare class ToolTip {
+    $el: {
+        $shadowContainer: HTMLDivElement;
+        $shadowRoot: ShadowRoot;
+        $toolTip: HTMLElement;
+        $content: HTMLElement;
+        $arrow: HTMLElement;
+    };
+    $data: {
+        config: Required<PopsToolTipDetails>;
+        guid: string;
+        timeId_show: number[];
+        timeId_close: number[];
+    };
+    constructor(config: Required<PopsToolTipDetails>, guid: string, ShadowInfo: {
+        $shadowContainer: HTMLDivElement;
+        $shadowRoot: ShadowRoot;
+    });
+    init(): void;
+    /**
+     * 创建提示元素
+     */
+    createToolTip(): {
+        $toolTipContainer: HTMLDivElement;
+        $toolTipArrow: HTMLElement;
+        $toolTipContent: HTMLElement;
+    };
+    /**
+     * 获取提示的内容
+     */
+    getContent(): string;
+    /**
+     * 修改提示的内容
+     * @param text
+     */
+    changeContent(text?: string): void;
+    /**
+     * 获取z-index
+     */
+    getZIndex(): number;
+    /**
+     * 动态修改z-index
+     */
+    changeZIndex(): void;
+    /**
+     * 获取 提示框的位置
+     * @param targetElement 目标元素
+     * @param arrowDistance 箭头和目标元素的距离
+     * @param otherDistance 其它位置的偏移
+     */
+    getPosition(targetElement: HTMLElement, arrowDistance: number, otherDistance: number): {
+        TOP: {
+            left: number;
+            top: number;
+            arrow: string;
+            motion: string;
+        };
+        RIGHT: {
+            left: number;
+            top: number;
+            arrow: string;
+            motion: string;
+        };
+        BOTTOM: {
+            left: number;
+            top: number;
+            arrow: string;
+            motion: string;
+        };
+        LEFT: {
+            left: number;
+            top: number;
+            arrow: string;
+            motion: string;
+        };
+    };
+    /**
+     * 动态修改tooltip的位置
+     */
+    changePosition(): void;
+    /**
+     * 事件绑定
+     */
+    onEvent(): void;
+    /**
+     * 取消事件绑定
+     */
+    offEvent(): void;
+    /**
+     * 显示提示框
+     */
+    show(): void;
+    /**
+     * 绑定 显示事件
+     */
+    onShowEvent(): void;
+    /**
+     * 取消绑定 显示事件
+     */
+    offShowEvent(): void;
+    /**
+     * 关闭提示框
+     */
+    close(...args: any[]): void;
+    /**
+     * 绑定 关闭事件
+     */
+    onCloseEvent(): void;
+    /**
+     * 取消绑定 关闭事件
+     */
+    offCloseEvent(): void;
+    /**
+     * 销毁元素
+     */
+    destory(): void;
+    /**
+     * 动画结束事件
+     */
+    animationFinishEvent(): void;
+    /**
+     * 监听动画结束
+     */
+    onAnimationFinishEvent(): void;
+    /**
+     * 取消监听动画结束
+     */
+    offAnimationFinishEvent(): void;
+    /**
+     * 当鼠标|手触摸
+     */
+    onMouseEnterEvent(): void;
+    /**
+     * 当鼠标|手离开，开始当前动画
+     */
+    onMouseLeaveEvent(): void;
+}
+export type PopsTooltipResult<T extends PopsToolTipDetails> = {
+    guid: string;
+    config: T;
+    $shadowContainer: HTMLDivElement;
+    $shadowRoot: ShadowRoot;
+    toolTip: typeof ToolTip.prototype;
+};
 export declare class PopsTooltip {
     constructor(details: PopsToolTipDetails);
 }

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

@@ -25,9 +25,14 @@ export interface PopsToolTipDetails {
      * 是否总是显示，默认为false
      * + true 设置的triggerShowEventName、triggerCloseEventName将无效
      *        返回提供show和close函数，取消on和off
-     * + false 返回提供on和off，取消close函数
+     * + false 不添加事件，只显示
      */
     alwaysShow?: boolean;
+    /**
+     * 延迟xxms关闭tooltip
+     * @default 100
+     */
+    delayCloseTime?: number;
     /**
      * 触发显示事件的名称，默认mouseenter touchstart，如果是多个事件，按空格分割
      */
@@ -50,22 +55,24 @@ export interface PopsToolTipDetails {
     eventOption?: AddEventListenerOptions;
     /**
      * 触发显示前的回调
-     * 返回值为false可阻止显示
+     * @returns
+     * + false 可阻止显示
      */
-    showBeforeCallBack?: () => boolean | void;
+    showBeforeCallBack?: ($toolTip: HTMLElement) => false | void;
     /**
      * 触发显示后的回调
      */
-    showAfterCallBack?: (toolTipElement: HTMLElement) => void;
+    showAfterCallBack?: ($toolTip: HTMLElement) => void;
     /**
      * 触发关闭前的回调
-     * 返回值为false可阻止关闭
+     * @returns
+     * + false 可阻止关闭
      */
-    closeBeforeCallBack?: (toolTipElement: HTMLElement) => boolean | void;
+    closeBeforeCallBack?: ($toolTip: HTMLElement) => false | void;
     /**
      * 触发关闭后的回调
      */
-    closeAfterCallBack?: (toolTipElement: HTMLElement) => void;
+    closeAfterCallBack?: ($toolTip: HTMLElement) => void;
     /**
      * 箭头与目标的的距离，默认12.5(px)
      */

package/package.json

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

package/src/Pops.ts

@@ -59,7 +59,6 @@ import { PopsLoading } from "./components/loading";
 import type { PopsIframeDetails } from "./components/iframe/indexType";
 import { PopsIframe } from "./components/iframe";
 import type { PopsToolTipDetails } from "./components/tooltip/indexType";
-import { PopsTooltip } from "./components/tooltip";
 import { PopsDrawer } from "./components/drawer";
 import type { PopsDrawerDetails } from "./components/drawer/indexType";
 import type { PopsFolderDetails } from "./components/folder/indexType";
@@ -78,12 +77,13 @@ import { PopsSearchSuggestion } from "./components/searchSuggestion";
 import { PopsMathFloatUtils } from "./utils/PopsMathUtils";
 import { PanelHandleContentDetails } from "./components/panel/PanelHandleContentDetails";
 import { GlobalConfig } from "./GlobalConfig";
+import { PopsTooltip, type PopsTooltipResult } from "./components/tooltip";
 
 class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2024.11.2",
+		version: "2024.11.3",
 		cssText: {
 			/** 主CSS */
 			index: indexCSS,
@@ -189,7 +189,6 @@ class Pops {
 		/** pops.panel中用于处理各个类型的工具 */
 		panelHandleContentUtils: PanelHandleContentDetails,
 	};
-	constructor() {}
 	init() {
 		if (!this.config.isInit) {
 			/* 处理获取当前所有的动画名 */
@@ -284,26 +283,9 @@ class Pops {
 	 * 提示框
 	 * @param details 配置
 	 */
-	tooltip = (details: PopsToolTipDetails) => {
-		return new PopsTooltip(details) as
-			| {
-					guid: string;
-					config: Required<PopsToolTipDetails>;
-					toolTipNode: HTMLDivElement;
-					show: () => void;
-					close: () => void;
-			  }
-			| {
-					$shadowContainer: HTMLDivElement;
-					$shadowRoot: ShadowRoot;
-					guid: string;
-					config: Required<PopsToolTipDetails>;
-					toolTipNode: HTMLDivElement;
-					show: () => void;
-					close: () => void;
-					off: () => void;
-					on: () => void;
-			  };
+	tooltip = <T extends PopsToolTipDetails>(details: T) => {
+		let popsTooltip = new PopsTooltip(details) as PopsTooltipResult<T>;
+		return popsTooltip;
 	};
 
 	/**

package/src/components/panel/PanelHandleContentDetails.ts

@@ -1,8 +1,10 @@
 import { pops } from "../../Pops";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { PopsMathFloatUtils } from "../../utils/PopsMathUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import type { PopsAlertDetails } from "../alert/indexType";
+import type { PopsTooltipResult } from "../tooltip";
 import type { PopsToolTipDetails } from "../tooltip/indexType";
 import type { PopsPanelButtonDetails } from "./buttonType";
 import type { PopsPanelRightAsideContainerOptions } from "./commonType";
@@ -393,13 +395,13 @@ export const PanelHandleContentDetails = () => {
 			};
 			let tooltip = pops.tooltip({
 				target: rangeInputElement.parentElement!,
-				content: getToolTipContent(rangeInputElement.value),
-				zIndex: 1000000,
-				className: "github-tooltip",
-				showBeforeCallBack() {
-					tooltip.toolTipNode.querySelector("div")!.innerText =
-						getToolTipContent(rangeInputElement.value);
+				content: () => {
+					return getToolTipContent(rangeInputElement.value);
+				},
+				zIndex: () => {
+					return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
 				},
+				className: "github-tooltip",
 				alwaysShow: false,
 				only: false,
 				position: "top",
@@ -410,8 +412,9 @@ export const PanelHandleContentDetails = () => {
 				["input", "propertychange"],
 				void 0,
 				function (event) {
-					tooltip.toolTipNode.querySelector("div")!.innerText =
-						getToolTipContent(rangeInputElement.value);
+					tooltip.toolTip.changeContent(
+						getToolTipContent(rangeInputElement.value)
+					);
 					if (typeof formConfig.callback === "function") {
 						formConfig.callback(
 							event as InputEvent,
@@ -520,6 +523,7 @@ export const PanelHandleContentDetails = () => {
 							percent: number;
 						}
 					>(),
+					tooltip: null as any as PopsTooltipResult<PopsToolTipDetails>,
 				},
 				$ele: {
 					slider: liElement.querySelector<HTMLDivElement>(".pops-slider")!,
@@ -533,17 +537,6 @@ export const PanelHandleContentDetails = () => {
 					button: liElement.querySelector<HTMLDivElement>(
 						".pops-slider__button"
 					)!,
-					tooltip: null as any as {
-						$shadowContainer: HTMLDivElement;
-						$shadowRoot: ShadowRoot;
-						guid: string;
-						config: Required<PopsToolTipDetails>;
-						toolTipNode: HTMLDivElement;
-						show: () => void;
-						close: () => void;
-						off: () => void;
-						on: () => void;
-					},
 				},
 				$interval: {
 					isCheck: false,
@@ -938,13 +931,13 @@ export const PanelHandleContentDetails = () => {
 				 * 显示悬浮的
 				 */
 				showToolTip() {
-					this.$ele.tooltip.show();
+					this.$data.tooltip.toolTip.show();
 				},
 				/**
 				 * 关闭悬浮的
 				 */
 				closeToolTip() {
-					this.$ele.tooltip.close();
+					this.$data.tooltip.toolTip.close();
 				},
 				/**
 				 * 检测在1000ms内，是否停止了拖拽
@@ -980,12 +973,13 @@ export const PanelHandleContentDetails = () => {
 							return PopsPanelSlider.value as any as string;
 						}
 					}
-					let tooltipContent = null as any as HTMLElement;
 
-					this.$ele.tooltip = pops.tooltip({
+					let tooltip = pops.tooltip({
 						target: this.$ele.button,
 						content: getToolTipContent,
-						zIndex: 1000000,
+						zIndex: () => {
+							return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
+						},
 						className: "github-tooltip",
 						only: false,
 						eventOption: {
@@ -996,7 +990,7 @@ export const PanelHandleContentDetails = () => {
 							this.intervalInit();
 						},
 						showAfterCallBack: (toolTipNode) => {
-							tooltipContent.innerText = getToolTipContent();
+							tooltip.toolTip.changeContent(getToolTipContent());
 						},
 						closeBeforeCallBack: () => {
 							if (this.$data.isMove) {
@@ -1009,9 +1003,8 @@ export const PanelHandleContentDetails = () => {
 						// only: false,
 						position: "top",
 						arrowDistance: 10,
-					}) as any;
-					tooltipContent =
-						this.$ele.tooltip.toolTipNode.querySelector<HTMLDivElement>("div")!;
+					});
+					this.$data.tooltip = tooltip;
 				},
 			};
 			PopsPanelSlider.init();