@whitesev/pops 2.0.9 → 2.0.11

package/src/Pops.ts

@@ -1,57 +1,11 @@
 import { popsDOMUtils } from "./utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "./utils/PopsInstanceUtils";
 import { popsUtils } from "./utils/PopsUtils";
-import indexCSS from "./css/index.css";
-import ninePalaceGridPositionCSS from "./css/ninePalaceGridPosition.css";
-import scrollbarCSS from "./css/scrollbar.css";
-import buttonCSS from "./css/button.css";
-import commonCSS from "./css/common.css";
-import animCSS from "./css/animation.css";
-import alertCSS from "./components/alert/index.css";
-import confirmCSS from "./components/confirm/index.css";
-import promptCSS from "./components/prompt/index.css";
-import loadingCSS from "./components/loading/index.css";
-import iframeCSS from "./components/iframe/index.css";
-import tooltipCSS from "./components/tooltip/index.css";
-import drawerCSS from "./components/drawer/index.css";
-import folderCSS from "./components/folder/index.css";
-import panelCSS from "./components/panel/index.css";
-import rightClickMenuCSS from "./components/rightClickMenu/index.css";
-import SVG_min from "./svg/min.svg";
-import SVG_mise from "./svg/mise.svg";
-import SVG_max from "./svg/max.svg";
-import SVG_close from "./svg/close.svg";
-import SVG_edit from "./svg/edit.svg";
-import SVG_share from "./svg/share.svg";
-import SVG_delete from "./svg/delete.svg";
-import SVG_search from "./svg/search.svg";
-import SVG_upload from "./svg/upload.svg";
-import SVG_loading from "./svg/loading.svg";
-import SVG_next from "./svg/next.svg";
-import SVG_prev from "./svg/prev.svg";
-import SVG_eleme from "./svg/eleme.svg";
-import SVG_elemePlus from "./svg/elemePlus.svg";
-import SVG_chromeFilled from "./svg/chromeFilled.svg";
-import SVG_cpu from "./svg/cpu.svg";
-import SVG_videoPlay from "./svg/videoPlay.svg";
-import SVG_videoPause from "./svg/videoPause.svg";
-import SVG_headset from "./svg/headset.svg";
-import SVG_monitor from "./svg/monitor.svg";
-import SVG_documentCopy from "./svg/documentCopy.svg";
-import SVG_picture from "./svg/picture.svg";
-import SVG_circleClose from "./svg/circleClose.svg";
-import SVG_view from "./svg/view.svg";
-import SVG_hide from "./svg/hide.svg";
-import SVG_keyboard from "./svg/keyboard.svg";
-import SVG_arrowRight from "./svg/arrowRight.svg";
-import SVG_arrowLeft from "./svg/arrowLeft.svg";
 import { PopsCore } from "./Core";
-import { PopsLayerMode } from "./types/main";
 import { PopsAlert } from "./components/alert";
 import type { PopsAlertDetails } from "./components/alert/indexType";
 import { PopsConfirm } from "./components/confirm";
 import type { PopsConfirmDetails } from "./components/confirm/indexType";
-import type { PopsLayerCommonConfig } from "./types/layer";
 import type { PopsPromptDetails } from "./components/prompt/indexType";
 import { PopsPrompt } from "./components/prompt";
 import type { PopsLoadingDetails } from "./components/loading/indexType";
@@ -67,108 +21,29 @@ import type { PopsPanelDetails } from "./components/panel/indexType";
 import { PopsPanel } from "./components/panel";
 import { PopsRightClickMenu } from "./components/rightClickMenu";
 import type { PopsRightClickMenuDetails } from "./components/rightClickMenu/indexType";
-import type { PopsIcon } from "./types/icon";
 import type { PopsSearchSuggestionDetails } from "./components/searchSuggestion/indexType";
 import { PopsSearchSuggestion } from "./components/searchSuggestion";
 import { PopsMathFloatUtils } from "./utils/PopsMathUtils";
 import { PanelHandleContentDetails } from "./components/panel/PanelHandleContentDetails";
 import { GlobalConfig } from "./GlobalConfig";
 import { PopsTooltip } from "./components/tooltip";
-import { PopsSafeUtils } from "./utils/PopsSafeUtils";
+import { PopsCSS } from "./PopsCSS";
+import { PopsIcon } from "./PopsIcon";
+import { PopsLayer } from "./PopsLayer";
+import { PopsAnimation } from "./PopsAnimation";
 
 class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2025.5.26",
-		cssText: {
-			/** 主CSS */
-			index: indexCSS,
-			/** 九宫格位置CSS */
-			ninePalaceGridPosition: ninePalaceGridPositionCSS,
-			/** 滚动条CSS */
-			scrollbar: scrollbarCSS,
-			/** 按钮CSS */
-			button: buttonCSS,
-			/** 通用的CSS */
-			common: commonCSS,
-			/** 动画 */
-			anim: animCSS,
-			/** pops.alert */
-			alertCSS: alertCSS,
-			/** pops.cponfirm */
-			confirmCSS: confirmCSS,
-			/** pops.prompt */
-			promptCSS: promptCSS,
-			/** pops.loading */
-			loadingCSS: loadingCSS,
-			/** pops.iframe */
-			iframeCSS: iframeCSS,
-			/** pops.tooltip */
-			tooltipCSS: tooltipCSS,
-			/** pops.drawer */
-			drawerCSS: drawerCSS,
-			/** pops.folder */
-			folderCSS: folderCSS,
-			/** pops.folder */
-			panelCSS: panelCSS,
-			/** pops.rightClickMenu */
-			rightClickMenu: rightClickMenuCSS,
-		},
+		version: "2025.6.4",
+		cssText: PopsCSS,
 		/** icon图标的svg代码 */
-		iconSVG: {
-			min: SVG_min,
-			mise: SVG_mise,
-			max: SVG_max,
-			close: SVG_close,
-			edit: SVG_edit,
-			share: SVG_share,
-			delete: SVG_delete,
-			search: SVG_search,
-			upload: SVG_upload,
-			loading: SVG_loading,
-			next: SVG_next,
-			prev: SVG_prev,
-			eleme: SVG_eleme,
-			elemePlus: SVG_elemePlus,
-			chromeFilled: SVG_chromeFilled,
-			cpu: SVG_cpu,
-			videoPlay: SVG_videoPlay,
-			videoPause: SVG_videoPause,
-			headset: SVG_headset,
-			monitor: SVG_monitor,
-			documentCopy: SVG_documentCopy,
-			picture: SVG_picture,
-			circleClose: SVG_circleClose,
-			view: SVG_view,
-			hide: SVG_hide,
-			keyboard: SVG_keyboard,
-			arrowRight: SVG_arrowRight,
-			arrowLeft: SVG_arrowLeft,
-		} as {
-			[key in PopsIcon]: string;
-		},
+		iconSVG: PopsIcon.$data,
 		/** 当前已配置的动画@keyframes名字映射(初始化时生成) */
-		animation: {} as {
-			[key: string]: CSSKeyframesRule;
-		},
-		/** 是否初始化 */
-		isInit: false,
+		animation: PopsAnimation.$data,
 		/** 存储已创建的元素 */
-		layer: {
-			alert: [],
-			confirm: [],
-			prompt: [],
-			loading: [],
-			iframe: [],
-			tooltip: [],
-			drawer: [],
-			folder: [],
-			panel: [],
-			rightClickMenu: [],
-		} as {
-			[key in PopsLayerMode]: PopsLayerCommonConfig[];
-		},
+		layer: PopsLayer,
 		/** 禁止滚动 */
 		forbiddenScroll: {
 			event(event: Event) {
@@ -186,22 +61,7 @@ class Pops {
 		/** pops.panel中用于处理各个类型的工具 */
 		panelHandleContentUtils: PanelHandleContentDetails,
 	};
-	init() {
-		if (!this.config.isInit) {
-			/* 处理获取当前所有的动画名 */
-			this.config.isInit = true;
-			let animationStyle = document.createElement("style");
-			PopsSafeUtils.setSafeHTML(animationStyle, this.config.cssText.anim);
-			popsDOMUtils.appendHead(animationStyle);
-			this.config.animation = null as any;
-			this.config.animation = PopsInstanceUtils.getKeyFrames(
-				animationStyle.sheet!
-			);
-			popsUtils.setTimeout(() => {
-				animationStyle.remove();
-			}, 50);
-		}
-	}
+	init() {}
 	/**
 	 * 释放原有的pops控制权
 	 * @example
@@ -224,8 +84,8 @@ class Pops {
 	 * 通过navigator.userAgent判断是否是手机访问
 	 * @param userAgent
 	 */
-	isPhone(userAgent = PopsCore.globalThis.navigator.userAgent): boolean {
-		return Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(userAgent));
+	isPhone(userAgent?: string) {
+		return popsUtils.isPhone(userAgent);
 	}
 	/**
 	 * 为所有弹窗设置全局属性

package/src/PopsAnimation.ts

@@ -0,0 +1,32 @@
+import { PopsCSS } from "./PopsCSS";
+import { popsDOMUtils } from "./utils/PopsDOMUtils";
+import { PopsSafeUtils } from "./utils/PopsSafeUtils";
+import { popsUtils } from "./utils/PopsUtils";
+
+export const PopsAnimation = {
+	$data: {} as { [key: string]: CSSKeyframesRule },
+	$flag: {
+		/** 是否初始化 */
+		isInit: false,
+	},
+	init() {
+		if (!this.$flag.isInit) {
+			this.$flag.isInit = true;
+			/* 处理获取当前所有的动画名 */
+			let animationStyle = document.createElement("style");
+			PopsSafeUtils.setSafeHTML(animationStyle, PopsCSS.anim);
+			popsDOMUtils.appendHead(animationStyle);
+			this.$data = null as any;
+			this.$data = popsDOMUtils.getKeyFrames(animationStyle.sheet!);
+			popsUtils.setTimeout(() => {
+				animationStyle.remove();
+			}, 50);
+		}
+	},
+	/**
+	 * 判断是否存在某个动画名
+	 */
+	hasAnim(name: string) {
+		return this.$data.hasOwnProperty(name);
+	},
+};

package/src/PopsCSS.ts

@@ -0,0 +1,51 @@
+import indexCSS from "./css/index.css";
+import ninePalaceGridPositionCSS from "./css/ninePalaceGridPosition.css";
+import scrollbarCSS from "./css/scrollbar.css";
+import buttonCSS from "./css/button.css";
+import commonCSS from "./css/common.css";
+import animCSS from "./css/animation.css";
+import alertCSS from "./components/alert/index.css";
+import confirmCSS from "./components/confirm/index.css";
+import promptCSS from "./components/prompt/index.css";
+import loadingCSS from "./components/loading/index.css";
+import iframeCSS from "./components/iframe/index.css";
+import tooltipCSS from "./components/tooltip/index.css";
+import drawerCSS from "./components/drawer/index.css";
+import folderCSS from "./components/folder/index.css";
+import panelCSS from "./components/panel/index.css";
+import rightClickMenuCSS from "./components/rightClickMenu/index.css";
+
+export const PopsCSS = {
+	/** 主CSS */
+	index: indexCSS,
+	/** 九宫格位置CSS */
+	ninePalaceGridPosition: ninePalaceGridPositionCSS,
+	/** 滚动条CSS */
+	scrollbar: scrollbarCSS,
+	/** 按钮CSS */
+	button: buttonCSS,
+	/** 通用的CSS */
+	common: commonCSS,
+	/** 动画 */
+	anim: animCSS,
+	/** pops.alert */
+	alertCSS: alertCSS,
+	/** pops.cponfirm */
+	confirmCSS: confirmCSS,
+	/** pops.prompt */
+	promptCSS: promptCSS,
+	/** pops.loading */
+	loadingCSS: loadingCSS,
+	/** pops.iframe */
+	iframeCSS: iframeCSS,
+	/** pops.tooltip */
+	tooltipCSS: tooltipCSS,
+	/** pops.drawer */
+	drawerCSS: drawerCSS,
+	/** pops.folder */
+	folderCSS: folderCSS,
+	/** pops.folder */
+	panelCSS: panelCSS,
+	/** pops.rightClickMenu */
+	rightClickMenu: rightClickMenuCSS,
+};

package/src/PopsIcon.ts

@@ -0,0 +1,93 @@
+import type { PopsIconType } from "./types/icon";
+import SVG_min from "./svg/min.svg";
+import SVG_mise from "./svg/mise.svg";
+import SVG_max from "./svg/max.svg";
+import SVG_close from "./svg/close.svg";
+import SVG_edit from "./svg/edit.svg";
+import SVG_share from "./svg/share.svg";
+import SVG_delete from "./svg/delete.svg";
+import SVG_search from "./svg/search.svg";
+import SVG_upload from "./svg/upload.svg";
+import SVG_loading from "./svg/loading.svg";
+import SVG_next from "./svg/next.svg";
+import SVG_prev from "./svg/prev.svg";
+import SVG_eleme from "./svg/eleme.svg";
+import SVG_elemePlus from "./svg/elemePlus.svg";
+import SVG_chromeFilled from "./svg/chromeFilled.svg";
+import SVG_cpu from "./svg/cpu.svg";
+import SVG_videoPlay from "./svg/videoPlay.svg";
+import SVG_videoPause from "./svg/videoPause.svg";
+import SVG_headset from "./svg/headset.svg";
+import SVG_monitor from "./svg/monitor.svg";
+import SVG_documentCopy from "./svg/documentCopy.svg";
+import SVG_picture from "./svg/picture.svg";
+import SVG_circleClose from "./svg/circleClose.svg";
+import SVG_view from "./svg/view.svg";
+import SVG_hide from "./svg/hide.svg";
+import SVG_keyboard from "./svg/keyboard.svg";
+import SVG_arrowRight from "./svg/arrowRight.svg";
+import SVG_arrowLeft from "./svg/arrowLeft.svg";
+
+export const PopsIcon = {
+	$data: {
+		min: SVG_min,
+		mise: SVG_mise,
+		max: SVG_max,
+		close: SVG_close,
+		edit: SVG_edit,
+		share: SVG_share,
+		delete: SVG_delete,
+		search: SVG_search,
+		upload: SVG_upload,
+		loading: SVG_loading,
+		next: SVG_next,
+		prev: SVG_prev,
+		eleme: SVG_eleme,
+		elemePlus: SVG_elemePlus,
+		chromeFilled: SVG_chromeFilled,
+		cpu: SVG_cpu,
+		videoPlay: SVG_videoPlay,
+		videoPause: SVG_videoPause,
+		headset: SVG_headset,
+		monitor: SVG_monitor,
+		documentCopy: SVG_documentCopy,
+		picture: SVG_picture,
+		circleClose: SVG_circleClose,
+		view: SVG_view,
+		hide: SVG_hide,
+		keyboard: SVG_keyboard,
+		arrowRight: SVG_arrowRight,
+		arrowLeft: SVG_arrowLeft,
+	} as {
+		[key in PopsIconType]: string;
+	},
+	/**
+	 * 判断是否存在某个icon
+	 * @param iconName 图标名
+	 */
+	hasIcon(iconName: string) {
+		return Object.keys(PopsIcon.$data).includes(iconName);
+	},
+	/**
+	 * 获取icon
+	 * @param iconName 图标名
+	 */
+	getIcon(iconName: string): string | null {
+		return PopsIcon.$data[iconName as keyof typeof this.$data];
+	},
+	/**
+	 * 删除图标
+	 * @param iconName 图标名
+	 */
+	deleteIcon(iconName: string) {
+		return Reflect.deleteProperty(PopsIcon.$data, iconName);
+	},
+	/**
+	 * 设置图标
+	 * @param iconName 图标名
+	 * @param iconHTML 图标html
+	 */
+	setIcon(iconName: string, iconHTML: string) {
+		Reflect.set(PopsIcon.$data, iconName, iconHTML);
+	},
+};

package/src/PopsLayer.ts

@@ -0,0 +1,17 @@
+import type { PopsLayerCommonConfig } from "./types/layer";
+import type { PopsLayerMode } from "./types/main";
+
+export const PopsLayer = {
+	alert: [],
+	confirm: [],
+	prompt: [],
+	loading: [],
+	iframe: [],
+	tooltip: [],
+	drawer: [],
+	folder: [],
+	panel: [],
+	rightClickMenu: [],
+} as {
+	[key in PopsLayerMode]: PopsLayerCommonConfig[];
+};

package/src/components/alert/index.ts

@@ -1,13 +1,13 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsAlertConfig } from "./config";
 import type { PopsMode } from "../../types/main";
 import type { PopsAlertDetails } from "./indexType";
+import { PopsCSS } from "../../PopsCSS";
 
 export const PopsAlert = {
 	init(details: PopsAlertDetails) {
@@ -21,13 +21,13 @@ export const PopsAlert = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.button,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.alertCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.button,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.alertCSS,
 		]);
 
 		// 先把z-index提取出来

package/src/components/confirm/index.ts

@@ -1,7 +1,7 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -20,13 +20,13 @@ export const PopsConfirm = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.button,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.confirmCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.button,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.confirmCSS,
 		]);
 
 		// 先把z-index提取出来

package/src/components/drawer/index.ts

@@ -1,7 +1,7 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsDrawerConfig } from "./config";
@@ -19,13 +19,13 @@ export const PopsDrawer = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.button,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.drawerCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.button,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.drawerCSS,
 		]);
 
 		// 先把z-index提取出来

package/src/components/folder/index.ts

@@ -1,11 +1,12 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
+import { PopsLoading } from "../loading";
 import { PopsFolderConfig } from "./config";
 import { Folder_ICON } from "./folderIcon";
 import type { PopsFolderDataConfig, PopsFolderDetails } from "./indexType";
@@ -23,13 +24,13 @@ export const PopsFolder = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.button,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.folderCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.button,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.folderCSS,
 		]);
 
 		/* 办公几件套 */
@@ -129,7 +130,7 @@ export const PopsFolder = {
 					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
 			<div class="pops-folder-content ${
-				pops.isPhone() ? "pops-mobile-folder-content" : ""
+				popsUtils.isPhone() ? "pops-mobile-folder-content" : ""
 			}">
                 <div class="pops-folder-list">
                     <div class="pops-folder-file-list-breadcrumb">
@@ -213,7 +214,7 @@ export const PopsFolder = {
                     <table class="pops-folder-list-table__body">
                         <colgroup>
                         ${
-													pops.isPhone()
+													popsUtils.isPhone()
 														? `<col width="100%">`
 														: `
                             <col width="52%">
@@ -572,9 +573,8 @@ export const PopsFolder = {
 			} else {
 				console.error("获取导航按钮失败");
 			}
-			let loadingMask = pops.loading({
+			let loadingMask = PopsLoading.init({
 				parent: $content,
-
 				content: {
 					text: "获取文件列表中...",
 				},
@@ -600,7 +600,7 @@ export const PopsFolder = {
 			_config_: PopsFolderDataConfig
 		) {
 			clearFolerRow();
-			let loadingMask = pops.loading({
+			let loadingMask = PopsLoading.init({
 				parent: $content,
 
 				content: {
@@ -828,7 +828,7 @@ export const PopsFolder = {
 			sortFolderConfig(_config_, config.sort.name, config.sort.isDesc);
 			_config_.forEach((item) => {
 				if (item["isFolder"]) {
-					let { folderELement, fileNameElement } = pops.isPhone()
+					let { folderELement, fileNameElement } = popsUtils.isPhone()
 						? createMobileFolderRowElement(item["fileName"], "", "", true)
 						: createFolderRowElement(item["fileName"], "", "", true);
 
@@ -842,7 +842,7 @@ export const PopsFolder = {
 
 					folderListBodyElement.appendChild(folderELement);
 				} else {
-					let { folderELement, fileNameElement } = pops.isPhone()
+					let { folderELement, fileNameElement } = popsUtils.isPhone()
 						? createMobileFolderRowElement(
 								item["fileName"],
 								item.latestTime,

package/src/components/iframe/index.ts

@@ -2,7 +2,8 @@ import { PopsCore } from "../../Core";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
+import { PopsLayer } from "../../PopsLayer";
 import type { PopsEventDetails } from "../../types/event";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
@@ -26,12 +27,12 @@ export const PopsIframe = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.iframeCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.iframeCSS,
 		]);
 
 		let maskExtraStyle =
@@ -304,11 +305,7 @@ export const PopsIframe = {
 			(event) => {
 				event.preventDefault();
 				event.stopPropagation();
-				PopsInstanceUtils.removeInstance(
-					[pops.config.layer.iframe],
-					guid,
-					false
-				);
+				PopsInstanceUtils.removeInstance([PopsLayer.iframe], guid, false);
 				if (typeof config?.btn?.close?.callback === "function") {
 					config.btn.close.callback(eventDetails, event);
 				}

package/src/components/loading/index.ts

@@ -1,7 +1,7 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsLoadingConfig } from "./config";
@@ -33,14 +33,14 @@ export const PopsLoading = {
             <div class="pops-loading-content">${
 							config.addIndexCSS
 								? /*html*/ `
-                <style data-model-name="index">${pops.config.cssText.index}</style>
-                <style data-model-name="anim">${pops.config.cssText.anim}</style>
-                <style data-model-name="common">${pops.config.cssText.common}</style>
+                <style data-model-name="index">${PopsCSS.index}</style>
+                <style data-model-name="anim">${PopsCSS.anim}</style>
+                <style data-model-name="common">${PopsCSS.common}</style>
                 `
 								: ""
 						}
                 <style data-model-name="loadingCSS">
-                    ${pops.config.cssText.loadingCSS}
+                    ${PopsCSS.loadingCSS}
                 </style>
             ${config.style != null ? `<style>${config.style}</style>` : ""}
             	<p pops style="${contentPStyle}">${config.content.text}</p>