@whitesev/pops 2.1.4 → 2.1.6

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

@@ -1,10 +1,10 @@
-import type { PopsSearchSuggestionDetails } from "./indexType";
+import type { PopsSearchSuggestionDetails } from "./types/index";
 export declare const PopsSearchSuggestion: {
     init(details: PopsSearchSuggestionDetails): {
         /**
          * 当前的环境，可以是document，可以是shadowroot，默认是document
          */
-        selfDocument: Document | ShadowRoot | (Document | ShadowRoot)[];
+        selfDocument: ShadowRoot | Document | (ShadowRoot | Document)[];
         $el: {
             /** 根元素 */
             root: HTMLElement;

package/dist/types/src/components/searchSuggestion/{indexType.d.ts → types/index.d.ts}

@@ -1,4 +1,4 @@
-import type { PopsCommonConfig } from "../../types/components";
+import type { PopsCommonConfig } from "../../../types/components";
 /**
  * 搜索建议悬浮窗
  * pops.searchSuggestion

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

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

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

@@ -1,4 +1,4 @@
-import type { PopsToolTipDetails } from "./indexType";
+import type { PopsToolTipDetails } from "./types/index";
 type ToolTipEventTypeName = "MouseEvent" | "TouchEvent";
 export declare class ToolTip {
     $el: {
@@ -185,7 +185,7 @@ export declare const PopsTooltip: {
             target: HTMLElement;
             content: string | (() => string);
             isDiffContent: boolean;
-            position: import("./indexType").PopsTooltipPosition;
+            position: import("./types/index").PopsTooltipPosition;
             className: string;
             isFixed: boolean;
             alwaysShow: boolean;

package/dist/types/src/components/tooltip/{indexType.d.ts → types/index.d.ts}

@@ -1,4 +1,4 @@
-import type { PopsCommonConfig } from "../../types/components";
+import type { PopsCommonConfig } from "../../../types/components";
 /** tooltip的出现位置 */
 export type PopsTooltipPosition = "top" | "right" | "bottom" | "left" | "follow";
 /**

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

@@ -1,11 +1,11 @@
-import type { PopsAlertDetails } from "../components/alert/indexType";
-import type { PopsConfirmDetails } from "../components/confirm/indexType";
-import type { PopsDrawerDetails } from "../components/drawer/indexType";
-import type { PopsFolderDetails } from "../components/folder/indexType";
-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 { PopsAlertDetails } from "../components/alert/types";
+import type { PopsConfirmDetails } from "../components/confirm/types";
+import type { PopsDrawerDetails } from "../components/drawer/types";
+import type { PopsFolderDetails } from "../components/folder/types";
+import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsLoadingDetails } from "../components/loading/types";
+import type { PopsPanelDetails } from "../components/panel/types";
+import type { PopsPromptDetails } from "../components/prompt/types/index";
 import type { PopsCommonConfig } from "../types/components";
 import { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
 import { PopsLayerCommonConfig } from "../types/layer";

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

@@ -16,7 +16,8 @@ export type PopsButtonStyleType =
 	| "success"
 	| "info"
 	| "warning"
-	| "danger";
+	| "danger"
+	| "violet";
 
 /**
  * 按钮大小
@@ -118,48 +119,13 @@ export interface PopsButtonDetails<T = {}> {
 /**
  * 按钮配置（匹配任意类型）
  */
-export interface PopsButtonDetailsAnyType<T = {}> {
-	/**
-	 * 是否启用按钮
-	 */
-	enable: boolean;
-	/**
-	 * 图标按钮，如果名字为内置的，则使用内置的，否则为自定义的svg
-	 */
-	icon: PopsIconType;
-	/**
-	 * 图标按钮是否放在右边
-	 */
-	rightIcon: boolean;
-	/**
-	 * 图标按钮是否是旋转360°
-	 * @default false
-	 */
-	iconIsLoading: boolean;
-	/**
-	 * 按钮尺寸大小
-	 * @default ""
-	 */
-	size: PopsButtonSize;
+export type PopsButtonDetailsAnyType<T = {}> = PopsButtonDetails<T> & {
 	/**
 	 * 按钮样式类型
+	 * @default "default"
 	 */
 	type: string;
-	/**
-	 * 按钮文字
-	 * @default ""
-	 */
-	text: string;
-	/**
-	 * 按钮点击的回调
-	 *
-	 * 如果传入该值，那么将不会自动关闭弹窗
-	 */
-	callback(
-		eventDetails: PopsHandlerEventDetails & T,
-		event: PointerEvent | MouseEvent
-	): void;
-}
+};
 
 /** prompt的点击回调 */
 export interface PopsPromptButtonDetails extends PopsButtonDetails {

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

@@ -1,4 +1,4 @@
-import type { PopsIframeDetails } from "../components/iframe/indexType";
+import type { PopsIframeDetails } from "../components/iframe/types";
 import type { PopsMode } from "./main";
 
 /**

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

@@ -1,21 +1,21 @@
-import type { PopsAlertDetails } from "../components/alert/indexType";
-import type { PopsConfirmDetails } from "../components/confirm/indexType";
-import type { PopsDrawerDetails } from "../components/drawer/indexType";
-import type { PopsFolderDetails } from "../components/folder/indexType";
-import type { PopsIframeDetails } from "../components/iframe/indexType";
-import type { PopsLoadingDetails } from "../components/loading/indexType";
-import type { PopsPanelButtonDetails } from "../components/panel/buttonType";
-import type { PopsPanelDeepMenuDetails } from "../components/panel/deepMenuType";
-import type { PopsPanelDetails } from "../components/panel/indexType";
-import type { PopsPanelInputDetails } from "../components/panel/inputType";
-import type { PopsPanelOwnDetails } from "../components/panel/ownType";
-import type { PopsPanelSelectDetails } from "../components/panel/selectType";
-import type { PopsPanelSliderDetails } from "../components/panel/sliderType";
-import type { PopsPanelSwitchDetails } from "../components/panel/switchType";
-import type { PopsPanelTextAreaDetails } from "../components/panel/textareaType";
-import type { PopsPromptDetails } from "../components/prompt/indexType";
-import { PopsRightClickMenuDetails } from "../components/rightClickMenu/indexType";
-import { PopsToolTipDetails } from "../components/tooltip/indexType";
+import type { PopsAlertDetails } from "../components/alert/types";
+import type { PopsConfirmDetails } from "../components/confirm/types";
+import type { PopsDrawerDetails } from "../components/drawer/types";
+import type { PopsFolderDetails } from "../components/folder/types";
+import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsLoadingDetails } from "../components/loading/types";
+import type { PopsPanelButtonDetails } from "../components/panel/types/components-button";
+import type { PopsPanelDeepMenuDetails } from "../components/panel/types/components-deepMenu";
+import type { PopsPanelDetails } from "../components/panel/types";
+import type { PopsPanelInputDetails } from "../components/panel/types/components-input";
+import type { PopsPanelOwnDetails } from "../components/panel/types/components-own";
+import type { PopsPanelSelectDetails } from "../components/panel/types/components-select";
+import type { PopsPanelSliderDetails } from "../components/panel/types/components-slider";
+import type { PopsPanelSwitchDetails } from "../components/panel/types/components-switch";
+import type { PopsPanelTextAreaDetails } from "../components/panel/types/components-textarea";
+import type { PopsPromptDetails } from "../components/prompt/types/index";
+import { PopsRightClickMenuDetails } from "../components/rightClickMenu/types";
+import { PopsToolTipDetails } from "../components/tooltip/types/index";
 
 export interface PopsUtilsOwnObject<V extends any> {
 	[key: string]: V | PopsUtilsOwnObject<V>;

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

@@ -1,10 +1,10 @@
-import type { PopsAlertDetails } from "../components/alert/indexType";
-import type { PopsDrawerDetails } from "../components/drawer/indexType";
-import type { PopsFolderDetails } from "../components/folder/indexType";
-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 { PopsAlertDetails } from "../components/alert/types";
+import type { PopsDrawerDetails } from "../components/drawer/types";
+import type { PopsFolderDetails } from "../components/folder/types";
+import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsLoadingDetails } from "../components/loading/types";
+import type { PopsPanelDetails } from "../components/panel/types";
+import type { PopsPromptDetails } from "../components/prompt/types/index";
 
 /**
  * 遮罩层配置

package/dist/types/src/{Config.d.ts → utils/PopsDOMUtilsEventsConfig.d.ts}

@@ -1 +1,4 @@
+/**
+ * 存储在元素属性上的事件名
+ */
 export declare const SymbolEvents: unique symbol;

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

@@ -1,11 +1,11 @@
-import type { PopsAlertDetails } from "../components/alert/indexType";
-import type { PopsConfirmDetails } from "../components/confirm/indexType";
-import type { PopsDrawerDetails } from "../components/drawer/indexType";
-import type { PopsFolderDetails } from "../components/folder/indexType";
-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 { PopsAlertDetails } from "../components/alert/types";
+import type { PopsConfirmDetails } from "../components/confirm/types";
+import type { PopsDrawerDetails } from "../components/drawer/types";
+import type { PopsFolderDetails } from "../components/folder/types";
+import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsLoadingDetails } from "../components/loading/types";
+import type { PopsPanelDetails } from "../components/panel/types";
+import type { PopsPromptDetails } from "../components/prompt/types/index";
 import type { PopsLayerCommonConfig } from "../types/layer";
 import type { PopsLayerMode } from "../types/main";
 export declare const PopsInstanceUtils: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/pops",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "type": "module",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",
@@ -42,7 +42,8 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-typescript": "12.1.4",
+    "rollup": "^4.44.2",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-import-css": "^4.0.1",
     "tslib": "^2.8.1",

package/src/GlobalConfig.ts

@@ -1,17 +1,19 @@
-import type { PopsCommonConfig } from "./types/components";
+import type { PopsCommonConfig, PopsDragConfig } from "./types/components";
 
 type EnterReturnType<T> = null | T | (() => T);
 
 type GlobalConfigOption = {
 	style?: EnterReturnType<string>;
 	zIndex?: EnterReturnType<number> | EnterReturnType<string>;
-} & Partial<PopsCommonConfig>;
+} & Partial<PopsCommonConfig> &
+	Partial<PopsDragConfig>;
 
 type ResultGlobalConfigOption<T> = T extends null | undefined
 	? never
 	: T extends (...args: any) => infer R
 	? R
 	: T;
+
 export const GlobalConfig = {
 	config: {} as GlobalConfigOption,
 	/**
@@ -39,8 +41,7 @@ export const GlobalConfig = {
 					configValue == null
 						? ""
 						: typeof configValue === "function"
-						? // @ts-ignore
-						  configValue()
+						? configValue()
 						: configValue;
 
 				if (typeof style === "string") {
@@ -55,7 +56,7 @@ export const GlobalConfig = {
 						? configValue()
 						: configValue;
 				if (typeof zIndex === "string") {
-					let newIndex = (zIndex = parseInt(zIndex));
+					let newIndex = (zIndex = Number(zIndex));
 					if (!isNaN(newIndex)) {
 						result.zIndex = newIndex;
 					}

package/src/Pops.ts

@@ -1,49 +1,49 @@
 import { popsDOMUtils } from "./utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "./utils/PopsInstanceUtils";
 import { popsUtils } from "./utils/PopsUtils";
-import { PopsCore } from "./Core";
+import { PopsCore } from "./PopsCore";
 import { PopsAlert } from "./components/alert";
-import type { PopsAlertDetails } from "./components/alert/indexType";
+import type { PopsAlertDetails } from "./components/alert/types";
 import { PopsConfirm } from "./components/confirm";
-import type { PopsConfirmDetails } from "./components/confirm/indexType";
-import type { PopsPromptDetails } from "./components/prompt/indexType";
+import type { PopsConfirmDetails } from "./components/confirm/types";
+import type { PopsPromptDetails } from "./components/prompt/types/index";
 import { PopsPrompt } from "./components/prompt";
-import type { PopsLoadingDetails } from "./components/loading/indexType";
+import type { PopsLoadingDetails } from "./components/loading/types";
 import { PopsLoading } from "./components/loading";
-import type { PopsIframeDetails } from "./components/iframe/indexType";
+import type { PopsIframeDetails } from "./components/iframe/types";
 import { PopsIframe } from "./components/iframe";
-import type { PopsToolTipDetails } from "./components/tooltip/indexType";
+import type { PopsToolTipDetails } from "./components/tooltip/types/index";
 import { PopsDrawer } from "./components/drawer";
-import type { PopsDrawerDetails } from "./components/drawer/indexType";
-import type { PopsFolderDetails } from "./components/folder/indexType";
+import type { PopsDrawerDetails } from "./components/drawer/types";
+import type { PopsFolderDetails } from "./components/folder/types";
 import { PopsFolder } from "./components/folder";
-import type { PopsPanelDetails } from "./components/panel/indexType";
+import type { PopsPanelDetails } from "./components/panel/types";
 import { PopsPanel } from "./components/panel";
 import { PopsRightClickMenu } from "./components/rightClickMenu";
-import type { PopsRightClickMenuDetails } from "./components/rightClickMenu/indexType";
-import type { PopsSearchSuggestionDetails } from "./components/searchSuggestion/indexType";
+import type { PopsRightClickMenuDetails } from "./components/rightClickMenu/types";
+import type { PopsSearchSuggestionDetails } from "./components/searchSuggestion/types/index";
 import { PopsSearchSuggestion } from "./components/searchSuggestion";
 import { PopsMathFloatUtils } from "./utils/PopsMathUtils";
-import { PanelHandleContentDetails } from "./components/panel/PanelHandleContentDetails";
+import { PanelHandlerComponents } from "./components/panel/handlerComponents";
 import { GlobalConfig } from "./GlobalConfig";
 import { PopsTooltip } from "./components/tooltip";
 import { PopsCSS } from "./PopsCSS";
 import { PopsIcon } from "./PopsIcon";
-import { PopsLayer } from "./PopsLayer";
+import { PopsLayerData } from "./PopsLayer";
 import { PopsAnimation } from "./PopsAnimation";
 
 class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2025.6.25",
+		version: "2025.7.7",
 		cssText: PopsCSS,
 		/** icon图标的svg代码 */
 		iconSVG: PopsIcon.$data,
 		/** 当前已配置的动画@keyframes名字映射(初始化时生成) */
 		animation: PopsAnimation.$data,
 		/** 存储已创建的元素 */
-		layer: PopsLayer,
+		layer: PopsLayerData,
 		/** 禁止滚动 */
 		forbiddenScroll: {
 			event(event: Event) {
@@ -59,7 +59,7 @@ class Pops {
 		/** pops处理float类型使用的工具类 */
 		MathFloatUtils: PopsMathFloatUtils,
 		/** pops.panel中用于处理各个类型的工具 */
-		panelHandleContentUtils: PanelHandleContentDetails,
+		PanelHandlerComponents: PanelHandlerComponents,
 	};
 	init() {}
 	/**
@@ -183,7 +183,20 @@ class Pops {
 
 	/**
 	 * 搜索建议
+	 *
+	 * 注意：调用后需要主动调用.init()和.setAllEvent()进行初始化
 	 * @param details 配置
+	 * @example
+	 * let $input = document.querySelector("#input");
+	 * let searchSuggestion = pops.searchSuggestion({
+	 *     target: $input,
+	 *     inputTarget: $input,
+	 *     getItemHTML: function (item) {
+	 *         return item.value;
+	 *     }
+	 * });
+	 * searchSuggestion.init();
+	 * searchSuggestion.setAllEvent();
 	 */
 	searchSuggestion = <T = any>(details: PopsSearchSuggestionDetails<T>) => {
 		let popsSearchSuggestion = PopsSearchSuggestion.init(details);

package/src/{Core.ts → PopsCore.ts}

@@ -1,24 +1,20 @@
+interface PopsCoreOption {
+	document: Document;
+	window: Window;
+	globalThis: typeof globalThis;
+	self: typeof globalThis;
+}
+
 const PopsCoreDefaultEnv: PopsCoreOption = {
 	document: document,
 	window: window,
 	globalThis: globalThis,
 	self: self,
 };
-const PopsCoreEnv: PopsCoreOption = {
-	document: document,
-	window: window,
-	globalThis: globalThis,
-	self: self,
-};
 
-export interface PopsCoreOption {
-	document: Document;
-	window: Window;
-	globalThis: typeof globalThis;
-	self: typeof globalThis;
-}
+const PopsCoreEnv: PopsCoreOption = Object.assign({}, PopsCoreDefaultEnv);
 
-export const PopsCore = {
+const PopsCore = {
 	init(option?: PopsCoreOption) {
 		if (!option) {
 			option = Object.assign({}, PopsCoreDefaultEnv);
@@ -38,8 +34,11 @@ export const PopsCore = {
 		return PopsCoreEnv.self;
 	},
 };
-export const OriginPrototype = {
+
+const OriginPrototype = {
 	Object: {
 		defineProperty: Object.defineProperty,
 	},
 };
+
+export { PopsCoreOption, PopsCore, OriginPrototype };

package/src/PopsIcon.ts

@@ -28,39 +28,41 @@ import SVG_keyboard from "./svg/keyboard.svg";
 import SVG_arrowRight from "./svg/arrowRight.svg";
 import SVG_arrowLeft from "./svg/arrowLeft.svg";
 
+const PopsIconData: {
+	[key in PopsIconType]: string;
+} = {
+	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,
+};
+
 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;
-	},
+	$data: PopsIconData,
 	/**
 	 * 判断是否存在某个icon
 	 * @param iconName 图标名

package/src/PopsLayer.ts

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

package/src/components/alert/config.ts

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

package/src/components/alert/index.css

@@ -1,47 +0,0 @@
-.pops[type-value] .pops-alert-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.pops[type-value="alert"] .pops-alert-title {
-	width: 100%;
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="alert"] .pops-alert-title p[pops] {
-	width: 100%;
-	overflow: hidden;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-weight: 500;
-	line-height: normal;
-}
-.pops[type-value="alert"] .pops-alert-content {
-	width: 100%;
-	/*height: calc(
-		100% - var(--container-title-height) - var(--container-bottom-btn-height)
-	);*/
-	flex: 1;
-	overflow: auto;
-	word-break: break-word;
-}
-.pops[type-value="alert"] .pops-alert-content p[pops] {
-	padding: 5px 10px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-}
-.pops[type-value="alert"] .pops-alert-btn {
-	/*position: absolute;
-	bottom: 0;*/
-	display: flex;
-	padding: 10px 10px 10px 10px;
-	width: 100%;
-	height: var(--container-bottom-btn-height);
-	max-height: var(--container-bottom-btn-height);
-	line-height: normal;
-	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-	text-align: right;
-	align-items: center;
-}

package/src/components/alert/index.ts

@@ -6,7 +6,7 @@ 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 type { PopsAlertDetails } from "./types";
 import { PopsCSS } from "../../PopsCSS";
 
 export const PopsAlert = {
@@ -48,14 +48,14 @@ export const PopsAlert = {
 			PopsType,
 			config,
 			/*html*/ `
-			<div class="pops-alert-title" style="text-align: ${
+			<div class="pops-title pops-${PopsType}-title" style="text-align: ${
 				config.title.position
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
 					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-			<div class="pops-alert-content" style="${contentStyle}">${
+			<div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
 					: `<p pops style="${contentPStyle}">${config.content.text}</p>`

package/src/components/alert/{indexType.ts → types/index.ts}

@@ -4,11 +4,11 @@ import type {
 	PopsDragConfig,
 	PopsCommonConfig,
 	PopsButtonConfig,
-} from "../../types/components";
+} from "../../../types/components";
 import type {
 	PopsButtonDetails,
 	PopsButtonDetailsAnyType,
-} from "../../types/button";
+} from "../../../types/button";
 
 /**
  * pops.alert

package/src/components/confirm/config.ts

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