@whitesev/pops 1.9.1 → 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

@@ -248,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/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/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/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;
     /**

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"> {
     /**
      * 目标元素
      */
@@ -52,20 +53,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
@@ -108,16 +101,4 @@ export interface PopsToolTipDetails {
      * @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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "1.9.1",
+  "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.21",
+		version: "2024.11.24",
 		cssText: {
 			/** 主CSS */
 			index: indexCSS,

package/src/components/alert/config.ts

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

package/src/components/alert/index.ts

@@ -11,7 +11,15 @@ import type { PopsAlertDetails } from "./indexType";
 
 export class PopsAlert {
 	constructor(details: PopsAlertDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType: PopsMode = "alert";
+		let config = PopsAlertConfig();
+		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,
@@ -21,13 +29,6 @@ export class PopsAlert {
 			pops.config.cssText.common,
 			pops.config.cssText.alertCSS,
 		]);
-		let config = PopsAlertConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-		let guid = popsUtils.getRandomGUID();
-		// 设置当前类型
-		const PopsType: PopsMode = "alert";
-		config = PopsHandler.handleOnly(PopsType, config);
 
 		// 先把z-index提取出来
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);

package/src/components/confirm/config.ts

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

package/src/components/confirm/index.ts

@@ -10,7 +10,15 @@ import type { PopsConfirmDetails } from "./indexType";
 
 export class PopsConfirm {
 	constructor(details: PopsConfirmDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "confirm";
+		let config = PopsConfirmConfig();
+		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,14 +28,6 @@ export class PopsConfirm {
 			pops.config.cssText.common,
 			pops.config.cssText.confirmCSS,
 		]);
-		let config = PopsConfirmConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-		let guid = popsUtils.getRandomGUID();
-		// 设置当前类型
-		const PopsType = "confirm";
-
-		config = PopsHandler.handleOnly(PopsType, config);
 
 		// 先把z-index提取出来
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);

package/src/components/drawer/config.ts

@@ -70,6 +70,7 @@ export const PopsDrawerConfig = (): DeepRequired<PopsDrawerDetails> => {
 			},
 			clickCallBack: null,
 		},
+		useShadowRoot: true,
 		class: "",
 		zIndex: 10000,
 		only: false,

package/src/components/drawer/index.ts

@@ -9,7 +9,15 @@ import type { PopsDrawerDetails } from "./indexType";
 
 export class PopsDrawer {
 	constructor(details: PopsDrawerDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "drawer";
+		let config = PopsDrawerConfig();
+		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,
@@ -19,13 +27,6 @@ export class PopsDrawer {
 			pops.config.cssText.common,
 			pops.config.cssText.drawerCSS,
 		]);
-		let config = PopsDrawerConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-		let guid = popsUtils.getRandomGUID();
-		const PopsType = "drawer";
-
-		config = PopsHandler.handleOnly(PopsType, config);
 
 		// 先把z-index提取出来
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);

package/src/components/folder/config.ts

@@ -105,6 +105,7 @@ export const PopsFolderConfig = (): DeepRequired<PopsFolderDetails> => {
 				},
 			},
 		},
+		useShadowRoot: true,
 		class: "",
 		only: false,
 		width: "500px",

package/src/components/folder/index.ts

@@ -11,7 +11,16 @@ import type { PopsFolderDataConfig, PopsFolderDetails } from "./indexType";
 
 export class PopsFolder {
 	constructor(details: PopsFolderDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "folder";
+
+		let config = PopsFolderConfig();
+		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,
@@ -22,17 +31,19 @@ export class PopsFolder {
 			pops.config.cssText.folderCSS,
 		]);
 
-		let config = PopsFolderConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-
 		/* 办公几件套 */
-		(Folder_ICON as any).docx = Folder_ICON.doc;
-		(Folder_ICON as any).rtf = Folder_ICON.doc;
-		(Folder_ICON as any).xlsx = Folder_ICON.xls;
-		(Folder_ICON as any).pptx = Folder_ICON.ppt;
-		(Folder_ICON as any).dmg = Folder_ICON.ipa;
-		(Folder_ICON as any).json = Folder_ICON.js;
+		// @ts-ignore
+		Folder_ICON.docx = Folder_ICON.doc;
+		// @ts-ignore;
+		Folder_ICON.rtf = Folder_ICON.doc;
+		// @ts-ignore
+		Folder_ICON.xlsx = Folder_ICON.xls;
+		// @ts-ignore
+		Folder_ICON.pptx = Folder_ICON.ppt;
+		// @ts-ignore;
+		Folder_ICON.dmg = Folder_ICON.ipa;
+		// @ts-ignore
+		Folder_ICON.json = Folder_ICON.js;
 
 		/* 压缩包 */
 		let zipIconList = [
@@ -73,39 +84,35 @@ export class PopsFolder {
 		let androidIconList = ["apk", "apkm", "xapk"];
 
 		zipIconList.forEach((keyName) => {
-			(Folder_ICON as any)[keyName] = Folder_ICON.zip;
+			// @ts-ignore
+			Folder_ICON[keyName] = Folder_ICON.zip;
 		});
 		imageIconList.forEach((keyName) => {
-			(Folder_ICON as any)[keyName] = Folder_ICON.png;
+			// @ts-ignore
+			Folder_ICON[keyName] = Folder_ICON.png;
 		});
 		codeLanguageIconList.forEach((keyName) => {
-			(Folder_ICON as any)[keyName] = Folder_ICON.html;
+			// @ts-ignore
+			Folder_ICON[keyName] = Folder_ICON.html;
 		});
 		androidIconList.forEach((keyName) => {
-			(Folder_ICON as any)[keyName] = Folder_ICON.apk;
+			// @ts-ignore
+			Folder_ICON[keyName] = Folder_ICON.apk;
 		});
 
 		if (details?.folder) {
 			// @ts-ignore
 			config.folder = details.folder;
 		}
-		let guid = popsUtils.getRandomGUID();
-		const PopsType = "folder";
-
-		config = PopsHandler.handleOnly(PopsType, config);
 
 		// 先把z-index提取出来
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);
 		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
 
 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
-		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
-			PopsType,
-			config as any
-		);
+		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
 			PopsType,
-
 			config
 		);
 		let animHTML = PopsElementHandler.getAnimHTML(

package/src/components/iframe/config.ts

@@ -13,6 +13,7 @@ export const PopsIframeConfig = (): DeepRequired<PopsIframeDetails> => {
 			icon: true,
 			text: "",
 		},
+		useShadowRoot: true,
 		class: "",
 		url: window.location.href,
 		only: false,

package/src/components/iframe/index.ts

@@ -12,7 +12,19 @@ import type { PopsIframeDetails } from "./indexType";
 
 export class PopsIframe {
 	constructor(details: PopsIframeDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "iframe";
+
+		let config = PopsIframeConfig();
+		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+		config = popsUtils.assign(config, details);
+		if (config.url == null) {
+			throw "config.url不能为空";
+		}
+		config = PopsHandler.handleOnly(PopsType, config);
+
+		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
 			pops.config.cssText.index,
 			pops.config.cssText.ninePalaceGridPosition,
@@ -21,18 +33,10 @@ export class PopsIframe {
 			pops.config.cssText.common,
 			pops.config.cssText.iframeCSS,
 		]);
-		let config = PopsIframeConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-		if (config.url == null) {
-			throw "config.url不能为空";
-		}
-		let guid = popsUtils.getRandomGUID();
-		const PopsType = "iframe";
 
-		config = PopsHandler.handleOnly(PopsType, config);
 		let maskExtraStyle =
-			config.animation != null && (config as any).animation != ""
+			// @ts-ignore
+			config.animation != null && config.animation != ""
 				? "position:absolute;"
 				: "";
 

package/src/components/loading/config.ts

@@ -8,6 +8,7 @@ export const PopsLoadingConfig = (): DeepRequired<PopsLoadingDetails> => {
 			icon: "loading",
 			style: "",
 		},
+		useShadowRoot: true,
 		class: "",
 		only: false,
 		zIndex: 10000,

package/src/components/panel/config.ts

@@ -416,6 +416,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 			},
 			clickCallBack: null,
 		},
+		useShadowRoot: true,
 		class: "",
 		mobileClassName: "pops-panel-is-mobile",
 		isMobile: false,