@whitesev/pops 1.9.0 → 1.9.2

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

@@ -16,6 +16,7 @@ export declare const GlobalConfig: {
     getGlobalConfig(): {
         style?: string | undefined;
         zIndex?: string | number | undefined;
+        useShadowRoot?: boolean | undefined;
         class?: string | undefined;
         only?: boolean | undefined;
         width?: string | undefined;

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

@@ -153,6 +153,7 @@ declare class Pops {
             getPopsMaxZIndex(deviation?: number): {
                 zIndex: number;
                 animElement: HTMLDivElement | null;
+                isOverMaxZIndex: boolean;
             };
             getMaxZIndex(deviation?: number): number;
             getKeyFrames(sheet: CSSStyleSheet): {};
@@ -247,6 +248,7 @@ declare class Pops {
         getGlobalConfig(): {
             style?: string | undefined;
             zIndex?: string | number | undefined;
+            useShadowRoot?: boolean | undefined;
             class?: string | undefined;
             only?: boolean | undefined;
             width?: string | undefined;

package/dist/types/src/components/alert/config.d.ts

@@ -1,2 +1,2 @@
 import type { PopsAlertDetails } from "./indexType";
-export declare const PopsAlertConfig: () => Required<PopsAlertDetails>;
+export declare const PopsAlertConfig: () => DeepRequired<PopsAlertDetails>;

package/dist/types/src/components/confirm/config.d.ts

@@ -1,2 +1,2 @@
 import type { PopsConfirmDetails } from "./indexType";
-export declare const PopsConfirmConfig: () => Required<PopsConfirmDetails>;
+export declare const PopsConfirmConfig: () => DeepRequired<PopsConfirmDetails>;

package/dist/types/src/components/drawer/config.d.ts

@@ -1,2 +1,2 @@
 import type { PopsDrawerDetails } from "./indexType";
-export declare const PopsDrawerConfig: () => Required<PopsDrawerDetails>;
+export declare const PopsDrawerConfig: () => DeepRequired<PopsDrawerDetails>;

package/dist/types/src/components/folder/config.d.ts

@@ -1,2 +1,2 @@
 import type { PopsFolderDetails } from "./indexType";
-export declare const PopsFolderConfig: () => Required<PopsFolderDetails>;
+export declare const PopsFolderConfig: () => DeepRequired<PopsFolderDetails>;

package/dist/types/src/components/iframe/config.d.ts

@@ -1,2 +1,2 @@
 import type { PopsIframeDetails } from "./indexType";
-export declare const PopsIframeConfig: () => Required<PopsIframeDetails>;
+export declare const PopsIframeConfig: () => DeepRequired<PopsIframeDetails>;

package/dist/types/src/components/loading/config.d.ts

@@ -1,2 +1,2 @@
 import type { PopsLoadingDetails } from "./indexType";
-export declare const PopsLoadingConfig: () => Required<PopsLoadingDetails>;
+export declare const PopsLoadingConfig: () => DeepRequired<PopsLoadingDetails>;

package/dist/types/src/components/panel/config.d.ts

@@ -1,2 +1,2 @@
 import type { PopsPanelDetails } from "./indexType";
-export declare const PopsPanelConfig: () => Required<PopsPanelDetails>;
+export declare const PopsPanelConfig: () => DeepRequired<PopsPanelDetails>;

package/dist/types/src/components/prompt/config.d.ts

@@ -1,2 +1,2 @@
 import type { PopsPromptDetails } from "./indexType";
-export declare const PopsPromptConfig: () => Required<PopsPromptDetails>;
+export declare const PopsPromptConfig: () => DeepRequired<PopsPromptDetails>;

package/dist/types/src/components/rightClickMenu/config.d.ts

@@ -1,2 +1,2 @@
 import type { PopsRightClickMenuDetails } from "./indexType";
-export declare const rightClickMenuConfig: () => Required<PopsRightClickMenuDetails>;
+export declare const rightClickMenuConfig: () => DeepRequired<PopsRightClickMenuDetails>;

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

@@ -1,3 +1,4 @@
+import type { PopsCommonConfig } from "../../types/components";
 import type { PopsIcon } from "../../types/icon";
 /**
  * pops.rightClickMenu的右键菜单配置
@@ -34,11 +35,11 @@ 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;
     /**
      * 目标的子元素选择器，默认为空
      */
@@ -51,30 +52,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/dist/types/src/components/searchSuggestion/config.d.ts

@@ -1,2 +1,2 @@
 import type { PopsSearchSuggestionDetails } from "./indexType";
-export declare const searchSuggestionConfig: () => Required<PopsSearchSuggestionDetails>;
+export declare const searchSuggestionConfig: () => DeepRequired<PopsSearchSuggestionDetails>;

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

@@ -1,8 +1,9 @@
+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
@@ -78,11 +79,6 @@ export interface PopsSearchSuggestionDetails<T = any> {
      * @default true
      */
     positionTopToReverse?: boolean;
-    /**
-     * 层级，默认10000
-     * @default 10000
-     */
-    zIndex?: number | (() => number);
     /**
      * 搜索中的提示
      *
@@ -134,10 +130,6 @@ export interface PopsSearchSuggestionDetails<T = any> {
      * @param data config.data的数据
      */
     selectCallBack?: (event: MouseEvent, liElement: HTMLLIElement, data: T) => void;
-    /**
-     * （可选）自定义style
-     */
-    style?: string;
 }
 /**
  * pops.searchSuggestion的函数返回值

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

@@ -1,2 +1,2 @@
 import type { PopsToolTipDetails } from "./indexType";
-export declare const PopsTooltipConfig: () => Required<PopsToolTipDetails>;
+export declare const PopsTooltipConfig: () => DeepRequired<PopsToolTipDetails>;

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

@@ -3,7 +3,7 @@ type ToolTipEventTypeName = "MouseEvent" | "TouchEvent";
 export declare class ToolTip {
     $el: {
         $shadowContainer: HTMLDivElement;
-        $shadowRoot: ShadowRoot;
+        $shadowRoot: ShadowRoot | HTMLElement;
         $toolTip: HTMLElement;
         $content: HTMLElement;
         $arrow: HTMLElement;
@@ -16,7 +16,7 @@ export declare class ToolTip {
     };
     constructor(config: Required<PopsToolTipDetails>, guid: string, ShadowInfo: {
         $shadowContainer: HTMLDivElement;
-        $shadowRoot: ShadowRoot;
+        $shadowRoot: ShadowRoot | HTMLElement;
     });
     init(): void;
     /**
@@ -45,12 +45,12 @@ export declare class ToolTip {
      */
     changeZIndex(): void;
     /**
-     * 获取 提示框的位置
+     * 计算 提示框的位置
      * @param targetElement 目标元素
      * @param arrowDistance 箭头和目标元素的距离
      * @param otherDistance 其它位置的偏移
      */
-    getPosition(targetElement: HTMLElement, arrowDistance: number, otherDistance: number): {
+    calcToolTipPosition(targetElement: HTMLElement, arrowDistance: number, otherDistance: number): {
         TOP: {
             left: number;
             top: number;
@@ -154,7 +154,7 @@ export declare class ToolTip {
     /**
      * 鼠标|触摸离开事件
      */
-    toolTipMouseLeaveEvent(): void;
+    toolTipMouseLeaveEvent(event: MouseEvent | PointerEvent): void;
     /**
      * 监听鼠标|触摸离开事件
      */

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

@@ -1,9 +1,10 @@
+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"> {
     /**
      * 目标元素
      */
@@ -13,12 +14,15 @@ export interface PopsToolTipDetails {
      */
     content: string | (() => string);
     /**
-     * 位置，默认top
+     * 位置
+     * @default "top"
      */
     position?: PopsTooltipPosition;
     /**
-     * 自定义className，默认为空
-     * + github-tooltip
+     * 自定义className
+     *
+     * + github-tooltip github的样式
+     * @default ""
      */
     className?: string;
     /**
@@ -41,24 +45,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
@@ -71,34 +71,34 @@ export interface PopsToolTipDetails {
     showAfterCallBack?: ($toolTip: HTMLElement) => void;
     /**
      * 触发关闭前的回调
+     */
+    closeBeforeCallBack?: (
+    /**
+     *
      * @returns
      * + false 可阻止关闭
      */
-    closeBeforeCallBack?: ($toolTip: HTMLElement) => false | void;
+    $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/dist/types/src/handler/PopsElementHandler.d.ts

@@ -28,7 +28,7 @@ export declare const PopsElementHandler: {
      * @param type
      * @param config
      */
-    getBottomBtnHTML(type: PopsTypeSupportBottomBtn, config: PopsSupportBottomBtn[keyof PopsSupportBottomBtn]): string;
+    getBottomBtnHTML(type: PopsTypeSupportBottomBtn, config: Omit<PopsSupportBottomBtn[keyof PopsSupportBottomBtn], "content">): string;
     /**
      * 获取标题style
      * @param type

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

@@ -6,6 +6,7 @@ import type { PopsIframeDetails } from "../components/iframe/indexType";
 import type { PopsLoadingDetails } from "../components/loading/indexType";
 import type { PopsPanelDetails } from "../components/panel/indexType";
 import type { PopsPromptDetails } from "../components/prompt/indexType";
+import type { PopsCommonConfig } from "../types/components";
 import { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
 import { PopsLayerCommonConfig } from "../types/layer";
 import type { PopsAllDetails, PopsLayerMode, PopsMode, PopsType } from "../types/main";
@@ -13,16 +14,19 @@ export declare const PopsHandler: {
     /**
      * 创建shadow
      */
-    handlerShadow(): {
+    handlerShadow(config: Pick<PopsCommonConfig, "useShadowRoot">): {
         $shadowContainer: HTMLDivElement;
         $shadowRoot: ShadowRoot;
+    } | {
+        $shadowContainer: HTMLDivElement;
+        $shadowRoot: HTMLDivElement;
     };
     /**
      * 处理初始化
      * @param $shadowRoot 所在的shadowRoot
      * @param cssText 添加进ShadowRoot的CSS
      */
-    handleInit($shadowRoot?: ShadowRoot, cssText?: string | string[]): void;
+    handleInit($shadowRoot?: ShadowRoot | HTMLElement, cssText?: string | string[]): void;
     /**
      * 处理遮罩层
      *
@@ -156,7 +160,7 @@ export declare const PopsHandler: {
      * @param maskElement 遮罩层
      * @param config 当前配置
      */
-    handleEventDetails(guid: string, $shadowContainer: HTMLDivElement, $shadowRoot: ShadowRoot, mode: PopsLayerMode, animElement: HTMLDivElement, popsElement: HTMLDivElement, maskElement: HTMLDivElement, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails): PopsEventDetails;
+    handleEventDetails(guid: string, $shadowContainer: HTMLDivElement, $shadowRoot: ShadowRoot | HTMLElement, mode: PopsLayerMode, animElement: HTMLDivElement, popsElement: HTMLDivElement, maskElement: HTMLDivElement, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails): PopsEventDetails;
     /**
      * 获取loading的事件配置
      * @param guid

package/dist/types/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;
 	/**
 	 * 按钮点击的回调
 	 */

package/dist/types/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/dist/types/src/types/event.d.ts

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

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

@@ -9,3 +9,12 @@ declare module "*.svg" {
 	const content: string;
 	export default content;
 }
+type DeepRequired<T> = T extends Function
+	? T
+	: T extends object
+	? T extends Node
+		? T
+		: {
+				[K in keyof T]-?: DeepRequired<T[K]>;
+		  }
+	: T;

package/dist/types/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;
 }

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

@@ -24,15 +24,18 @@ export interface PopsMaskDetails {
 	 * @param originalRun 当toClose为true，它是关闭弹窗，当toHide为true，它是隐藏弹窗
 	 * @param config 配置信息
 	 */
-	clickCallBack?: (
-		originalRun: () => void,
-		config:
-			| PopsAlertDetails
-			| PopsDrawerDetails
-			| PopsIframeDetails
-			| PopsPromptDetails
-			| PopsFolderDetails
-			| PopsLoadingDetails
-			| PopsPanelDetails
-	) => void;
+	clickCallBack?:
+		| ((
+				originalRun: () => void,
+				config:
+					| PopsAlertDetails
+					| PopsDrawerDetails
+					| PopsIframeDetails
+					| PopsPromptDetails
+					| PopsFolderDetails
+					| PopsLoadingDetails
+					| PopsPanelDetails
+		  ) => void)
+		| undefined
+		| null;
 }

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

@@ -32,12 +32,13 @@ export declare const PopsInstanceUtils: {
     getPopsMaxZIndex(deviation?: number): {
         zIndex: number;
         animElement: HTMLDivElement | null;
+        isOverMaxZIndex: boolean;
     };
     /**
      * 获取页面中最大的z-index
      * @param deviation 获取最大的z-index值的偏移，默认是+1
      * @example
-     * Utils.getMaxZIndex();
+     * getMaxZIndex();
      * > 1001
      **/
     getMaxZIndex(deviation?: number): number;

package/package.json

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

package/src/Pops.ts

@@ -83,7 +83,7 @@ class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2024.11.3",
+		version: "2024.11.24",
 		cssText: {
 			/** 主CSS */
 			index: indexCSS,