@whitesev/pops 1.9.0 → 1.9.2

package/src/components/rightClickMenu/indexType.ts

@@ -1,3 +1,4 @@
+import type { PopsCommonConfig } from "../../types/components";
 import type { PopsIcon } from "../../types/icon";
 
 /**
@@ -40,11 +41,20 @@ export interface PopsRightClickMenuDataDetails {
 /**
  * pops.rightClickMenu
  */
-export interface PopsRightClickMenuDetails {
+export interface PopsRightClickMenuDetails
+	extends Pick<
+		PopsCommonConfig,
+		"useShadowRoot" | "beforeAppendToPageCallBack" | "zIndex" | "style" | "only"
+	> {
 	/**
-	 * 目标，默认为document.documentElement
+	 * 目标，默认为document.documentElement G
 	 */
-	target?: HTMLElement | typeof globalThis | Window | EventTarget | Node;
+	target?:
+		| HTMLElement
+		| (typeof globalThis & Window)
+		| Window
+		| EventTarget
+		| Node;
 	/**
 	 * 目标的子元素选择器，默认为空
 	 */
@@ -57,33 +67,12 @@ export interface PopsRightClickMenuDetails {
 	 * 自定义className，默认为空
 	 */
 	className?: string;
-	/**
-	 * 是否是唯一的弹窗，默认false
-	 */
-	only?: boolean;
 	/**
 	 * 是否启用动画，默认true
 	 */
 	isAnimation?: boolean;
-	/**
-	 * 弹窗的显示层级，默认10000
-	 */
-	zIndex?: number | (() => number);
 	/**
 	 * 是否阻止默认contextmenu事件
 	 */
 	preventDefault?: boolean;
-	/**
-	 * （可选）自定义style
-	 */
-	style?: string | null;
-	/**
-	 * 在元素添加到页面前的事件
-	 * @param $shadowRoot 根元素
-	 * @param $shadowContainer 容器
-	 */
-	beforeAppendToPageCallBack?: (
-		$shadowRoot: ShadowRoot,
-		$shadowContainer: HTMLDivElement
-	) => void;
 }

package/src/components/searchSuggestion/config.ts

@@ -1,7 +1,7 @@
 import type { PopsSearchSuggestionDetails } from "./indexType";
 
 export const searchSuggestionConfig =
-	(): Required<PopsSearchSuggestionDetails> => {
+	(): DeepRequired<PopsSearchSuggestionDetails> => {
 		return {
 			// @ts-ignore
 			target: null,
@@ -25,6 +25,7 @@ export const searchSuggestionConfig =
 					liElement.remove();
 				},
 			},
+			useShadowRoot: true,
 			className: "",
 			isAbsolute: true,
 			isAnimation: true,

package/src/components/searchSuggestion/index.ts

@@ -8,15 +8,11 @@ import { GlobalConfig } from "../../GlobalConfig";
 
 export class PopsSearchSuggestion {
 	constructor(details: PopsSearchSuggestionDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
-		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-		]);
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "searchSuggestion";
 
-		let config: Required<PopsSearchSuggestionDetails> =
-			PopsSearchSuggestionConfig();
+		let config = PopsSearchSuggestionConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
 		if (config.target == null) {
@@ -29,8 +25,13 @@ export class PopsSearchSuggestion {
 		if (details.data) {
 			config.data = details.data;
 		}
-		const guid = popsUtils.getRandomGUID();
-		const PopsType = "searchSuggestion";
+
+		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
+		PopsHandler.handleInit($shadowRoot, [
+			pops.config.cssText.index,
+			pops.config.cssText.anim,
+			pops.config.cssText.common,
+		]);
 
 		if (config.style != null) {
 			let cssNode = document.createElement("style");

package/src/components/searchSuggestion/indexType.ts

@@ -1,8 +1,11 @@
+import type { PopsCommonConfig } from "../../types/components";
+
 /**
  * 搜索建议悬浮窗
  * pops.searchSuggestion
  */
-export interface PopsSearchSuggestionDetails<T = any> {
+export interface PopsSearchSuggestionDetails<T = any>
+	extends Pick<PopsCommonConfig, "useShadowRoot" | "zIndex" | "style"> {
 	/**
 	 * 当前的环境，可以是document，可以是shadowroot，默认是document
 	 * @default document
@@ -82,11 +85,6 @@ export interface PopsSearchSuggestionDetails<T = any> {
 	 * @default true
 	 */
 	positionTopToReverse?: boolean;
-	/**
-	 * 层级，默认10000
-	 * @default 10000
-	 */
-	zIndex?: number | (() => number);
 	/**
 	 * 搜索中的提示
 	 *
@@ -146,10 +144,6 @@ export interface PopsSearchSuggestionDetails<T = any> {
 		liElement: HTMLLIElement,
 		data: T
 	) => void;
-	/**
-	 * （可选）自定义style
-	 */
-	style?: string;
 }
 
 /**

package/src/components/tooltip/config.ts

@@ -1,9 +1,10 @@
 import type { PopsToolTipDetails } from "./indexType";
 
-export const PopsTooltipConfig = (): Required<PopsToolTipDetails> => {
+export const PopsTooltipConfig = (): DeepRequired<PopsToolTipDetails> => {
+	// @ts-ignore
 	return {
-		// @ts-ignore
-		target: null,
+		useShadowRoot: true,
+		target: null as any,
 		content: "默认文字",
 		position: "top",
 		className: "",
@@ -22,10 +23,11 @@ export const PopsTooltipConfig = (): Required<PopsToolTipDetails> => {
 		showAfterCallBack() {},
 		closeBeforeCallBack() {},
 		closeAfterCallBack() {},
+		delayCloseTime: 100,
+		showArrow: true,
 		arrowDistance: 12.5,
 		otherDistance: 0,
-
 		style: "",
 		beforeAppendToPageCallBack() {},
-	};
+	} as Required<PopsToolTipDetails>;
 };

package/src/components/tooltip/index.ts

@@ -11,7 +11,7 @@ type ToolTipEventTypeName = "MouseEvent" | "TouchEvent";
 export class ToolTip {
 	$el = {
 		$shadowContainer: null as unknown as HTMLDivElement,
-		$shadowRoot: null as unknown as ShadowRoot,
+		$shadowRoot: null as unknown as ShadowRoot | HTMLElement,
 		$toolTip: null as unknown as HTMLElement,
 		$content: null as unknown as HTMLElement,
 		$arrow: null as unknown as HTMLElement,
@@ -27,7 +27,7 @@ export class ToolTip {
 		guid: string,
 		ShadowInfo: {
 			$shadowContainer: HTMLDivElement;
-			$shadowRoot: ShadowRoot;
+			$shadowRoot: ShadowRoot | HTMLElement;
 		}
 	) {
 		this.$data.config = config;
@@ -96,6 +96,10 @@ export class ToolTip {
 			});
 			$toolTipContainer.appendChild(cssNode);
 		}
+		// 处理是否显示箭头元素
+		if (!this.$data.config.showArrow) {
+			$toolTipArrow.remove();
+		}
 		return {
 			$toolTipContainer: $toolTipContainer,
 			$toolTipArrow: $toolTipArrow,
@@ -135,12 +139,12 @@ export class ToolTip {
 		this.$el.$toolTip.style.setProperty("z-index", zIndex.toString());
 	}
 	/**
-	 * 获取 提示框的位置
+	 * 计算 提示框的位置
 	 * @param targetElement 目标元素
 	 * @param arrowDistance 箭头和目标元素的距离
 	 * @param otherDistance 其它位置的偏移
 	 */
-	getPosition(
+	calcToolTipPosition(
 		targetElement: HTMLElement,
 		arrowDistance: number,
 		otherDistance: number
@@ -201,7 +205,7 @@ export class ToolTip {
 	 * 动态修改tooltip的位置
 	 */
 	changePosition() {
-		let positionInfo = this.getPosition(
+		let positionInfo = this.calcToolTipPosition(
 			this.$data.config.target,
 			this.$data.config.arrowDistance,
 			this.$data.config.otherDistance
@@ -352,8 +356,8 @@ export class ToolTip {
 		// 其它的如Touch事件不做处理
 		if (event && event instanceof MouseEvent) {
 			let $target = event.composedPath()[0];
-			// 如果是子元素触发的话，忽视
-			if ($target != this.$data.config.target) {
+			// 如果是目标元素的子元素/tooltip元素的子元素触发的话，那就不管
+			if ($target != this.$data.config.target && $target != this.$el.$toolTip) {
 				return;
 			}
 		}
@@ -373,6 +377,10 @@ export class ToolTip {
 		let timeId = setTimeout(() => {
 			// 设置属性触发关闭动画
 			this.clearCloseTimeoutId(eventType, timeId);
+			if (this.$el.$toolTip == null) {
+				// 已清除了
+				return;
+			}
 			this.$el.$toolTip.setAttribute(
 				"data-motion",
 				this.$el.$toolTip
@@ -459,7 +467,10 @@ export class ToolTip {
 	 * 鼠标|触摸进入事件
 	 */
 	toolTipMouseEnterEvent() {
-		this.$el.$toolTip.style.animationPlayState = "paused";
+		this.clearCloseTimeoutId("MouseEvent");
+		this.clearCloseTimeoutId("TouchEvent");
+		// 重置动画状态
+		// this.$el.$toolTip.style.animationPlayState = "paused";
 		// if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
 		// toolTipElement.style.animationPlayState = "paused";
 		// }
@@ -491,8 +502,9 @@ export class ToolTip {
 	/**
 	 * 鼠标|触摸离开事件
 	 */
-	toolTipMouseLeaveEvent() {
-		this.$el.$toolTip.style.animationPlayState = "running";
+	toolTipMouseLeaveEvent(event: MouseEvent | PointerEvent) {
+		this.close(event);
+		// this.$el.$toolTip.style.animationPlayState = "running";
 	}
 	/**
 	 * 监听鼠标|触摸离开事件
@@ -528,25 +540,26 @@ export type PopsTooltipResult<T extends PopsToolTipDetails> = {
 
 export class PopsTooltip {
 	constructor(details: PopsToolTipDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
-		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.tooltipCSS,
-		]);
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "tooltip";
 
-		let config: Required<PopsToolTipDetails> = PopsTooltipConfig();
+		let config = PopsTooltipConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
 		if (!(config.target instanceof HTMLElement)) {
 			throw "config.target 必须是HTMLElement类型";
 		}
-		let guid = popsUtils.getRandomGUID();
-		const PopsType = "tooltip";
-
 		config = PopsHandler.handleOnly(PopsType, config);
 
+		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
+		PopsHandler.handleInit($shadowRoot, [
+			pops.config.cssText.index,
+			pops.config.cssText.anim,
+			pops.config.cssText.common,
+			pops.config.cssText.tooltipCSS,
+		]);
+
 		let toolTip = new ToolTip(config, guid, {
 			$shadowContainer,
 			$shadowRoot,

package/src/components/tooltip/indexType.ts

@@ -1,10 +1,16 @@
+import type { PopsCommonConfig } from "../../types/components";
+
 /** tooltip的出现位置 */
 export type PopsTooltipPosition = "top" | "right" | "bottom" | "left";
 
 /**
  * pops.tooltip
  */
-export interface PopsToolTipDetails {
+export interface PopsToolTipDetails
+	extends Pick<
+		PopsCommonConfig,
+		"useShadowRoot" | "only" | "zIndex" | "style" | "beforeAppendToPageCallBack"
+	> {
 	/**
 	 * 目标元素
 	 */
@@ -14,20 +20,23 @@ export interface PopsToolTipDetails {
 	 */
 	content: string | (() => string);
 	/**
-	 * 位置，默认top
+	 * 位置
+	 * @default "top"
 	 */
 	position?: PopsTooltipPosition;
 	/**
-	 * 自定义className，默认为空
-	 * + github-tooltip
+	 * 自定义className
+	 *
+	 * + github-tooltip github的样式
+	 * @default ""
 	 */
 	className?: string;
 	/**
 	 * 是否使用fixed定位，默认是absolute
-	 * 
+	 *
 	 * @default false
 	 */
-	isFixed?:boolean;
+	isFixed?: boolean;
 	/**
 	 * 是否总是显示，默认为false
 	 * + true 设置的triggerShowEventName、triggerCloseEventName将无效
@@ -42,24 +51,20 @@ export interface PopsToolTipDetails {
 	delayCloseTime?: number;
 	/**
 	 * 触发显示事件的名称，默认mouseenter touchstart，如果是多个事件，按空格分割
+	 * @default  "mouseenter touchstart"
 	 */
 	triggerShowEventName?: string;
 	/**
 	 * 触发关闭事件的名称，默认mouseleave touchend，如果是多个事件，按空格分割
+	 * @default  "mouseleave touchend"
 	 */
 	triggerCloseEventName?: string;
-	/**
-	 * z-index，默认10000
-	 */
-	zIndex?: number | (() => number);
-	/**
-	 * 是否唯一，默认false
-	 */
-	only?: boolean;
 	/**
 	 * 监听的事件配置
 	 */
-	eventOption?: AddEventListenerOptions;
+	eventOption?: {
+		[P in keyof AddEventListenerOptions]: AddEventListenerOptions[P];
+	};
 	/**
 	 * 触发显示前的回调
 	 * @returns
@@ -72,37 +77,35 @@ export interface PopsToolTipDetails {
 	showAfterCallBack?: ($toolTip: HTMLElement) => void;
 	/**
 	 * 触发关闭前的回调
-	 * @returns
-	 * + false 可阻止关闭
 	 */
-	closeBeforeCallBack?: ($toolTip: HTMLElement) => false | void;
+	closeBeforeCallBack?: (
+		/**
+		 *
+		 * @returns
+		 * + false 可阻止关闭
+		 */
+		$toolTip: HTMLElement
+	) => false | void;
 	/**
 	 * 触发关闭后的回调
 	 */
 	closeAfterCallBack?: ($toolTip: HTMLElement) => void;
 	/**
-	 * 箭头与目标的的距离，默认12.5(px)
+	 * 是否显示箭头
+	 * @default true
+	 */
+	showArrow?: boolean;
+	/**
+	 * 箭头与目标的的距离(px)
+	 *
+	 * @default 12.5
 	 */
 	arrowDistance?: number;
 	/**
-	 * 其它的距离，默认0(px)
+	 * 其它的距离(px)
 	 * + 当position为left或者right，这个距离是上、下距离
 	 * + 当position为top或者bottom，这个距离是左、右距离
+	 * @default 0
 	 */
 	otherDistance?: number;
-	/**
-	 * （可选）自定义style
-	 */
-	style?: string;
-	/**
-	 * 在元素添加到页面前的事件
-	 *
-	 * 当tooltip添加到ShadowRoot内时也会触发
-	 * @param $shadowRoot 根元素
-	 * @param $shadowContainer 容器
-	 */
-	beforeAppendToPageCallBack?: (
-		$shadowRoot: ShadowRoot,
-		$shadowContainer: HTMLDivElement
-	) => void;
 }

package/src/css/index.css

@@ -1,5 +1,5 @@
 @charset "utf-8";
-* {
+.pops * {
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
 	margin: 0;

package/src/handler/PopsElementHandler.ts

@@ -65,7 +65,7 @@ export const PopsElementHandler = {
 		<div 
 			class="pops-anim"
 			anim="${__config.animation || ""}"
-			style="${popsAnimStyle};"
+			style="${popsAnimStyle}"
 			data-guid="${guid}">
             ${
 							config.style != null
@@ -140,7 +140,7 @@ export const PopsElementHandler = {
 	 */
 	getBottomBtnHTML(
 		type: PopsTypeSupportBottomBtn,
-		config: PopsSupportBottomBtn[keyof PopsSupportBottomBtn]
+		config: Omit<PopsSupportBottomBtn[keyof PopsSupportBottomBtn], "content">
 	): string {
 		if (!config.btn) {
 			// 未设置btn参数

package/src/handler/PopsHandler.ts

@@ -8,6 +8,7 @@ import type { PopsPanelDetails } from "../components/panel/indexType";
 import type { PopsPromptDetails } from "../components/prompt/indexType";
 import { PopsCore } from "../Core";
 import { pops } from "../Pops";
+import type { PopsCommonConfig } from "../types/components";
 import { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
 import { PopsLayerCommonConfig } from "../types/layer";
 import type {
@@ -24,21 +25,31 @@ export const PopsHandler = {
 	/**
 	 * 创建shadow
 	 */
-	handlerShadow() {
+	handlerShadow(config: Pick<PopsCommonConfig, "useShadowRoot">) {
 		let $shadowContainer = document.createElement("div");
 		$shadowContainer.className = "pops-shadow-container";
-		let $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
-		return {
-			$shadowContainer,
-			$shadowRoot,
-		};
+		if (config.useShadowRoot) {
+			let $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
+			return {
+				$shadowContainer,
+				$shadowRoot,
+			};
+		} else {
+			return {
+				$shadowContainer,
+				$shadowRoot: $shadowContainer,
+			};
+		}
 	},
 	/**
 	 * 处理初始化
 	 * @param $shadowRoot 所在的shadowRoot
 	 * @param cssText 添加进ShadowRoot的CSS
 	 */
-	handleInit($shadowRoot?: ShadowRoot, cssText?: string | string[]) {
+	handleInit(
+		$shadowRoot?: ShadowRoot | HTMLElement,
+		cssText?: string | string[]
+	) {
 		pops.init();
 		if (!arguments.length) {
 			return;
@@ -364,7 +375,7 @@ export const PopsHandler = {
 	handleEventDetails(
 		guid: string,
 		$shadowContainer: HTMLDivElement,
-		$shadowRoot: ShadowRoot,
+		$shadowRoot: ShadowRoot | HTMLElement,
 		mode: PopsLayerMode,
 		animElement: HTMLDivElement,
 		popsElement: HTMLDivElement,
@@ -658,20 +669,13 @@ export const PopsHandler = {
 		} else {
 			// 对配置进行处理
 			// 选择配置的z-index和已有的pops实例的最大z-index值
-			if (typeof config.zIndex === "function") {
-				let originZIndexFn = config.zIndex;
-				config.zIndex = () => {
-					const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(
-						PopsHandler.handleZIndex(originZIndexFn) + 100
-					);
-					return maxZIndex;
-				};
-			} else {
+			let originZIndex = config.zIndex;
+			config.zIndex = () => {
 				const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(
-					PopsHandler.handleZIndex(config.zIndex) + 100
+					PopsHandler.handleZIndex(originZIndex) + 100
 				);
-				config.zIndex = maxZIndex;
-			}
+				return maxZIndex;
+			};
 		}
 		return config;
 	},

package/src/types/button.d.ts

@@ -85,15 +85,18 @@ export interface PopsButtonDetails<T = {}> {
 	 */
 	rightIcon: boolean;
 	/**
-	 * 图标按钮是否是旋转360°，默认false
+	 * 图标按钮是否是旋转360°
+	 * @default false
 	 */
 	iconIsLoading: boolean;
 	/**
-	 * 按钮尺寸大小，默认为空
+	 * 按钮尺寸大小
+	 * @default ""
 	 */
-	size: PopsButtonSize;
+	size: PopsButtonSize | "";
 	/**
-	 * 按钮样式类型，默认为default
+	 * 按钮样式类型
+	 * @default "default"
 	 */
 	type: PopsButtonStyleType;
 	/**
@@ -126,11 +129,13 @@ export interface PopsButtonDetailsAnyType<T = {}> {
 	 */
 	rightIcon: boolean;
 	/**
-	 * 图标按钮是否是旋转360°，默认false
+	 * 图标按钮是否是旋转360°
+	 * @default false
 	 */
 	iconIsLoading: boolean;
 	/**
-	 * 按钮尺寸大小，默认为空
+	 * 按钮尺寸大小
+	 * @default ""
 	 */
 	size: PopsButtonSize;
 	/**
@@ -138,7 +143,8 @@ export interface PopsButtonDetailsAnyType<T = {}> {
 	 */
 	type: string;
 	/**
-	 * 按钮文字，默认为空
+	 * 按钮文字
+	 * @default ""
 	 */
 	text: string;
 	/**
@@ -204,18 +210,6 @@ export interface PopsHeaderCloseButtonDetails {
 	 * 是否启用按钮
 	 */
 	enable?: boolean;
-	/**
-	 * 按钮尺寸大小，默认为空
-	 */
-	size?: PopsButtonSize;
-	/**
-	 * 按钮样式类型，默认为default
-	 */
-	type?: PopsButtonStyleType;
-	/**
-	 * 按钮文字，默认为空
-	 */
-	text?: string;
 	/**
 	 * 按钮点击的回调
 	 */