@whitesev/pops 1.9.1 → 1.9.2

package/src/components/panel/index.ts

@@ -11,7 +11,19 @@ import { GlobalConfig } from "../../GlobalConfig";
 
 export class PopsPanel {
 	constructor(details: PopsPanelDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "panel";
+
+		let config: Required<PopsPanelDetails> = PopsPanelConfig();
+		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+		config = popsUtils.assign(config, details);
+		if (details && Array.isArray(details.content)) {
+			config.content = details.content;
+		}
+		config = PopsHandler.handleOnly(PopsType, config);
+
+		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
 			pops.config.cssText.index,
 			pops.config.cssText.ninePalaceGridPosition,
@@ -22,16 +34,6 @@ export class PopsPanel {
 			pops.config.cssText.panelCSS,
 		]);
 
-		let config: Required<PopsPanelDetails> = PopsPanelConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-		if (details && Array.isArray(details.content)) {
-			config.content = details.content;
-		}
-		let guid = popsUtils.getRandomGUID();
-		const PopsType = "panel";
-		config = PopsHandler.handleOnly(PopsType, config);
-
 		// 先把z-index提取出来
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);
 		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);

package/src/components/prompt/config.ts

@@ -65,6 +65,7 @@ export const PopsPromptConfig = (): DeepRequired<PopsPromptDetails> => {
 				},
 			},
 		},
+		useShadowRoot: true,
 		class: "",
 		only: false,
 		width: "350px",

package/src/components/prompt/index.ts

@@ -10,7 +10,16 @@ import type { PopsPromptDetails } from "./indexType";
 
 export class PopsPrompt {
 	constructor(details: PopsPromptDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "prompt";
+
+		let config = PopsPromptConfig();
+		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+		config = popsUtils.assign(config, details);
+		config = PopsHandler.handleOnly(PopsType, config);
+
+		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
 			pops.config.cssText.index,
 			pops.config.cssText.ninePalaceGridPosition,
@@ -20,13 +29,6 @@ export class PopsPrompt {
 			pops.config.cssText.common,
 			pops.config.cssText.promptCSS,
 		]);
-		let config = PopsPromptConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-		let guid = popsUtils.getRandomGUID();
-		const PopsType = "prompt";
-
-		config = PopsHandler.handleOnly(PopsType, config);
 
 		// 先把z-index提取出来
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);

package/src/components/rightClickMenu/config.ts

@@ -116,6 +116,7 @@ export const rightClickMenuConfig =
 					],
 				},
 			],
+			useShadowRoot: true,
 			className: "",
 			isAnimation: true,
 			only: false,

package/src/components/rightClickMenu/index.ts

@@ -13,17 +13,14 @@ import type {
 
 export class PopsRightClickMenu {
 	constructor(details: PopsRightClickMenuDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
-		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.rightClickMenu,
-		]);
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "rightClickMenu";
 
 		let config = PopsRightClickMenuConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
+		config = PopsHandler.handleOnly(PopsType, config);
 		if (config.target == null) {
 			throw "config.target 不能为空";
 		}
@@ -31,9 +28,13 @@ export class PopsRightClickMenu {
 			// @ts-ignore
 			config.data = details.data;
 		}
-		let guid = popsUtils.getRandomGUID();
-		const PopsType = "rightClickMenu";
-		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.rightClickMenu,
+		]);
 
 		if (config.style != null) {
 			let cssNode = document.createElement("style");

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

@@ -25,6 +25,7 @@ export const searchSuggestionConfig =
 					liElement.remove();
 				},
 			},
+			useShadowRoot: true,
 			className: "",
 			isAbsolute: true,
 			isAnimation: true,

package/src/components/searchSuggestion/index.ts

@@ -8,12 +8,9 @@ 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 = PopsSearchSuggestionConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -28,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

@@ -3,6 +3,7 @@ import type { PopsToolTipDetails } from "./indexType";
 export const PopsTooltipConfig = (): DeepRequired<PopsToolTipDetails> => {
 	// @ts-ignore
 	return {
+		useShadowRoot: true,
 		target: null as any,
 		content: "默认文字",
 		position: "top",

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;
@@ -540,13 +540,9 @@ 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 = PopsTooltipConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -554,11 +550,16 @@ export class PopsTooltip {
 		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"
+	> {
 	/**
 	 * 目标元素
 	 */
@@ -53,20 +59,12 @@ export interface PopsToolTipDetails {
 	 * @default  "mouseleave touchend"
 	 */
 	triggerCloseEventName?: string;
-	/**
-	 * z-index
-	 * @default 10000
-	 */
-	zIndex?: number | (() => number);
-	/**
-	 * 是否唯一
-	 * @default false
-	 */
-	only?: boolean;
 	/**
 	 * 监听的事件配置
 	 */
-	eventOption?: AddEventListenerOptions;
+	eventOption?: {
+		[P in keyof AddEventListenerOptions]: AddEventListenerOptions[P];
+	};
 	/**
 	 * 触发显示前的回调
 	 * @returns
@@ -110,19 +108,4 @@ export interface PopsToolTipDetails {
 	 * @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,

package/src/types/components.d.ts

@@ -154,36 +154,50 @@ export interface PopsDragConfig {
  */
 export interface PopsCommonConfig {
 	/**
-	 * 自定义的className，默认为空
+	 * 是否使用shadowRoot
+	 *
+	 * @default true
+	 */
+	useShadowRoot?: boolean;
+	/**
+	 * 自定义的className
+	 *
+	 * @default ""
 	 */
 	class?: string;
 	/**
-	 * 是否是唯一的，默认false
+	 * 是否是唯一的
+	 *
 	 * @default false
 	 */
 	only?: boolean;
 	/**
-	 *  宽度，默认350px
-	 * @default 350
+	 *  宽度
+	 *
+	 * @default "350px"
 	 */
 	width: string;
 	/**
-	 *  高度，默认200px
-	 * @default 200
+	 *  高度
+	 *
+	 * @default "200px"
 	 */
 	height: string;
 	/**
-	 * 位置，默认center
+	 * 位置
+	 *
 	 * @default "center"
 	 */
 	position?: PopsPosition;
 	/**
-	 * 动画，默认pops-anim-fadein-zoom
+	 * 动画
+	 *
 	 * @default "pops-anim-fadein-zoom"
 	 */
 	animation?: PopsAnimation;
 	/**
-	 * z-index显示层级，默认10000
+	 * z-index显示层级
+	 *
 	 * @default 10000
 	 */
 	zIndex?: number | (() => number);
@@ -192,9 +206,10 @@ export interface PopsCommonConfig {
 	 */
 	mask?: PopsMaskDetails;
 	/**
-	 * 是否禁用页面滚动，默认false
+	 * 是否禁用页面滚动
 	 *
 	 * 暂时不会生效
+	 *
 	 * @default false
 	 */
 	forbiddenScroll?: boolean;
@@ -208,7 +223,7 @@ export interface PopsCommonConfig {
 	 * @param $shadowContainer 容器
 	 */
 	beforeAppendToPageCallBack?: (
-		$shadowRoot: ShadowRoot,
+		$shadowRoot: ShadowRoot | HTMLElement,
 		$shadowContainer: HTMLDivElement
 	) => void;
 }

package/src/types/event.d.ts

@@ -36,7 +36,7 @@ export interface PopsEventDetails {
 	/** 最外层包裹的元素 */
 	$shadowContainer: HTMLDivElement;
 	/** ShadowRoot */
-	$shadowRoot: ShadowRoot;
+	$shadowRoot: ShadowRoot | HTMLElement;
 	/** -> 动画层 */
 	element: HTMLDivElement;
 	/** 动画层 */

package/src/types/layer.d.ts

@@ -16,7 +16,7 @@ export interface PopsLayerCommonConfig extends PopsLayerConfig {
 	/** shadow容器 */
 	$shadowContainer: HTMLDivElement;
 	/** shadow容器的shandowRoot */
-	$shadowRoot: ShadowRoot;
+	$shadowRoot: ShadowRoot | HTMLElement;
 	/** 移除实例前的回调函数 */
 	beforeRemoveCallBack?: (layerCommonConfig: PopsLayerCommonConfig) => void;
 }