@whitesev/pops 2.1.7 → 2.1.9

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

@@ -209,6 +209,7 @@ declare class Pops {
         /** pops.panel中用于处理各个类型的工具 */
         PanelHandlerComponents: () => {
             asideULElement: HTMLUListElement;
+            asideBottomULElement: HTMLUListElement;
             sectionContainerHeaderULElement: HTMLUListElement;
             sectionContainerULElement: HTMLUListElement;
             $el: {

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

@@ -15,9 +15,13 @@ import type { PopsPanelTextAreaDetails } from "./types/components-textarea";
  */
 export declare const PanelHandlerComponents: () => {
     /**
-     * 左侧的ul容器
+     * 左侧上方的的ul容器
      */
     asideULElement: HTMLUListElement;
+    /**
+     * 左侧下方的ul容器
+     */
+    asideBottomULElement: HTMLUListElement;
     /**
      * 右侧主内容的顶部文字ul容器
      */

package/dist/types/src/components/panel/types/components-button.d.ts

@@ -14,7 +14,9 @@ export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanel
      */
     attributes?: {
         [key: string]: any;
-    };
+    } | {
+        [key: string]: any;
+    }[];
     /**
      * （可选）自定义属性
      */

package/dist/types/src/components/panel/types/components-deepMenu.d.ts

@@ -18,7 +18,9 @@ export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails<PopsPan
      */
     attributes?: {
         [key: string]: any;
-    };
+    } | {
+        [key: string]: any;
+    }[];
     /**
      * （可选）自定义属性
      */

package/dist/types/src/components/panel/types/components-forms.d.ts

@@ -13,7 +13,9 @@ export interface PopsPanelFormsDetails extends PopsPanelCommonDetails<PopsPanelF
      */
     attributes?: {
         [key: string]: any;
-    };
+    } | {
+        [key: string]: any;
+    }[];
     /**
      * （可选）自定义属性
      */

package/dist/types/src/components/panel/types/components-input.d.ts

@@ -12,7 +12,9 @@ export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelI
      */
     attributes?: {
         [key: string]: any;
-    };
+    } | {
+        [key: string]: any;
+    }[];
     /**
      * （可选）自定义属性
      */

package/dist/types/src/components/panel/types/components-select.d.ts

@@ -14,7 +14,9 @@ export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<
      */
     attributes?: {
         [key: string]: any;
-    };
+    } | {
+        [key: string]: any;
+    }[];
     /**
      * （可选）自定义属性
      */

package/dist/types/src/components/panel/types/components-selectMultiple.d.ts

@@ -41,7 +41,9 @@ export interface PopsPanelSelectMultipleDetails<T = any> extends PopsPanelCommon
      */
     attributes?: {
         [key: string]: any;
-    };
+    } | {
+        [key: string]: any;
+    }[];
     /**
      * （可选）自定义属性
      */

package/dist/types/src/components/panel/types/components-slider.d.ts

@@ -13,7 +13,9 @@ export interface PopsPanelSliderDetails extends PopsPanelCommonDetails<PopsPanel
      */
     attributes?: {
         [key: string]: any;
-    };
+    } | {
+        [key: string]: any;
+    }[];
     /**
      * 自定义属性
      */

package/dist/types/src/components/panel/types/components-switch.d.ts

@@ -12,7 +12,9 @@ export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails<PopsPanel
      */
     attributes?: {
         [key: string]: any;
-    };
+    } | {
+        [key: string]: any;
+    }[];
     /**
      * （可选）自定义属性
      */

package/dist/types/src/components/panel/types/components-textarea.d.ts

@@ -12,7 +12,9 @@ export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPan
      */
     attributes?: {
         [key: string]: any;
-    };
+    } | {
+        [key: string]: any;
+    }[];
     /**
      * （可选）自定义属性
      */

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

@@ -35,37 +35,50 @@ export interface PopsPanelContentConfig {
      */
     id: string;
     /**
-     * 元素的className
+     * （可选）元素的className，值为空的话就不设置
+     * @default ""
      */
     className?: string | string[];
     /**
      * 左侧的标题，可以是html格式
      */
-    title: string;
+    title: string | (() => string);
     /**
-     * （可选）中间顶部的标题
+     * （可选）中间顶部的标题，如果为空，则使用title的值代替
+     * @default title
      */
-    headerTitle?: string;
+    headerTitle?: string | (() => string);
     /**
-     * （可选）内容高度是否自动适应（与headerTitle的高度有关）
+     * （可选）是否是默认的，指打开弹窗的先显示出来的内容，默认为首位第一个项，如果多个配置都设置了isDefault的值为true，那么只有第一个值生效
+     * @default false
      */
-    autoAdaptionContentHeight?: string;
+    isDefault?: boolean | (() => boolean);
     /**
-     * （可选）是否是默认的，指打开弹窗的先显示出来的内容
+     * （可选）是否是位于底部的
+     *
+     * 自上而下排序
+     * @default false
      */
-    isDefault?: boolean | (() => boolean);
+    isBottom?: boolean | (() => boolean);
+    /**
+     * （可选）是否禁用左侧项的hover的CSS样式
+     */
+    disableAsideItemHoverCSS?: boolean | (() => boolean);
     /**
      * （可选）是否自动滚动到默认的项
+     * @default false
      */
     scrollToDefaultView?: boolean;
     /**
-     * （可选）自定义元素属性
+     * （可选）自定义元素属性.setAttribute、.getAttribute
      */
     attributes?: {
         [key: string]: any;
-    };
+    } | {
+        [key: string]: any;
+    }[];
     /**
-     * （可选）自定义属性
+     * （可选）自定义元素内部的属性值
      */
     props?: {
         [K in keyof HTMLElement]?: HTMLElement[K];
@@ -74,16 +87,26 @@ export interface PopsPanelContentConfig {
      * 子配置
      */
     forms: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+    /**
+     * 左侧容器的点击回调（点击后第一个触发该回调）
+     * @returns
+     * + false 阻止默认行为
+     */
+    clickFirstCallback?: (event: MouseEvent | PointerEvent, rightHeaderElement: HTMLUListElement, rightContainerElement: HTMLUListElement) => void | boolean | Promise<void | boolean>;
     /**
      * 左侧容器的点击回调
+     * @returns
+     * + false 阻止默认进入菜单详情
+     */
+    clickCallback?: (event: MouseEvent | PointerEvent, rightHeaderElement: HTMLUListElement, rightContainerElement: HTMLUListElement) => void | boolean | Promise<void | boolean>;
+    /**
+     * 左侧项添加到panel后的回调
      */
-    callback?: (event: MouseEvent | PointerEvent, rightHeaderElement: HTMLUListElement, rightContainerElement: HTMLUListElement) => void;
+    afterRender?: (
     /**
-     * 左侧容器添加到panel后的回调
-     * @param rightHeaderElement
-     * @param rightContainerElement
+     * 配置
      */
-    afterRender?: (data: {
+    data: {
         /** 容器配置 */
         asideConfig: PopsPanelContentConfig;
         /** 左侧容器的元素 */
@@ -99,16 +122,18 @@ export interface PopsPanelDetails extends PopsTitleConfig, PopsDragConfig, PopsC
      */
     content: PopsPanelContentConfig[];
     /**
-     * 按钮配置
+     * 右上角的按钮配置
      */
     btn?: {
         /**
-         * 右上角的关闭按钮
+         * 关闭按钮
          */
         close?: PopsHeaderCloseButtonDetails;
     };
     /**
-     * 移动端适配的的className，默认为pops-panel-is-mobile
+     * 移动端适配的的className
+     *
+     * @default "pops-panel-is-mobile"
      */
     mobileClassName?: string;
     /**

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

@@ -23,10 +23,13 @@ export declare const PopsHandler: {
     };
     /**
      * 处理初始化
-     * @param $shadowRoot 所在的shadowRoot
-     * @param cssText 添加进ShadowRoot的CSS
+     * @param $styleParent style元素的父元素
+     * @param css 添加进ShadowRoot的CSS
      */
-    handleInit($shadowRoot?: ShadowRoot | HTMLElement, cssText?: string | string[]): void;
+    handleInit($styleParent?: ShadowRoot | HTMLElement, css?: string | string[] | {
+        name?: string;
+        css: string;
+    }[]): void;
     /**
      * 处理遮罩层
      *

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/pops",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "type": "module",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",
@@ -50,9 +50,9 @@
     "typescript": "^5.8.3"
   },
   "scripts": {
-    "dev": "rollup --config --watch",
-    "build": "rollup --config",
-    "build:all": "rollup --config",
-    "build:all-new": "rollup --config"
+    "dev": "npx rollup -c -w",
+    "build": "npx rollup -c",
+    "build:all": "npx rollup -c",
+    "build:all-new": "npx rollup -c"
   }
 }

package/src/Pops.ts

@@ -36,7 +36,7 @@ class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2025.7.7",
+		version: "2025.7.10",
 		cssText: PopsCSS,
 		/** icon图标的svg代码 */
 		iconSVG: PopsIcon.$data,

package/src/components/alert/index.ts

@@ -21,13 +21,34 @@ export const PopsAlert = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			PopsCSS.index,
-			PopsCSS.ninePalaceGridPosition,
-			PopsCSS.scrollbar,
-			PopsCSS.button,
-			PopsCSS.anim,
-			PopsCSS.common,
-			PopsCSS.alertCSS,
+			{
+				name: "index",
+				css: PopsCSS.index,
+			},
+			{
+				name: "ninePalaceGridPosition",
+				css: PopsCSS.ninePalaceGridPosition,
+			},
+			{
+				name: "scrollbar",
+				css: PopsCSS.scrollbar,
+			},
+			{
+				name: "button",
+				css: PopsCSS.button,
+			},
+			{
+				name: "anim",
+				css: PopsCSS.anim,
+			},
+			{
+				name: "common",
+				css: PopsCSS.common,
+			},
+			{
+				name: "alertCSS",
+				css: PopsCSS.alertCSS,
+			},
 		]);
 
 		// 先把z-index提取出来
@@ -53,12 +74,12 @@ export const PopsAlert = {
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
+					: `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
 			<div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
-					: `<p pops style="${contentPStyle}">${config.content.text}</p>`
+					: `<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
 			}</div>${bottomBtnHTML}`,
 			bottomBtnHTML,
 			zIndex

package/src/components/confirm/index.ts

@@ -20,13 +20,34 @@ export const PopsConfirm = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			PopsCSS.index,
-			PopsCSS.ninePalaceGridPosition,
-			PopsCSS.scrollbar,
-			PopsCSS.button,
-			PopsCSS.anim,
-			PopsCSS.common,
-			PopsCSS.confirmCSS,
+			{
+				name: "index",
+				css: PopsCSS.index,
+			},
+			{
+				name: "ninePalaceGridPosition",
+				css: PopsCSS.ninePalaceGridPosition,
+			},
+			{
+				name: "scrollbar",
+				css: PopsCSS.scrollbar,
+			},
+			{
+				name: "button",
+				css: PopsCSS.button,
+			},
+			{
+				name: "anim",
+				css: PopsCSS.anim,
+			},
+			{
+				name: "common",
+				css: PopsCSS.common,
+			},
+			{
+				name: "confirmCSS",
+				css: PopsCSS.confirmCSS,
+			},
 		]);
 
 		// 先把z-index提取出来
@@ -53,12 +74,12 @@ export const PopsConfirm = {
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
+					: `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
                         <div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
-					: `<p pops style="${contentPStyle}">${config.content.text}</p>`
+					: `<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
 			}</div>${bottomBtnHTML}`,
 			bottomBtnHTML,
 			zIndex

package/src/components/drawer/index.ts

@@ -19,13 +19,34 @@ export const PopsDrawer = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			PopsCSS.index,
-			PopsCSS.ninePalaceGridPosition,
-			PopsCSS.scrollbar,
-			PopsCSS.button,
-			PopsCSS.anim,
-			PopsCSS.common,
-			PopsCSS.drawerCSS,
+			{
+				name: "index",
+				css: PopsCSS.index,
+			},
+			{
+				name: "ninePalaceGridPosition",
+				css: PopsCSS.ninePalaceGridPosition,
+			},
+			{
+				name: "scrollbar",
+				css: PopsCSS.scrollbar,
+			},
+			{
+				name: "button",
+				css: PopsCSS.button,
+			},
+			{
+				name: "anim",
+				css: PopsCSS.anim,
+			},
+			{
+				name: "common",
+				css: PopsCSS.common,
+			},
+			{
+				name: "drawerCSS",
+				css: PopsCSS.drawerCSS,
+			},
 		]);
 
 		// 先把z-index提取出来
@@ -52,14 +73,14 @@ export const PopsDrawer = {
 								? /*html*/ `<div class="pops-title pops-${PopsType}-title" style="${headerStyle}">${
 										config.title.html
 											? config.title.text
-											: /*html*/ `<p pops style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`
+											: /*html*/ `<p pops class="pops-${PopsType}-title-text" style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`
 								  }${headerBtnHTML}</div>`
 								: ""
 						}
             <div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
-					: `<p pops style="${contentPStyle}">${config.content.text}</p>`
+					: `<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
 			}</div>${bottomBtnHTML}`,
 			bottomBtnHTML,
 			zIndex

package/src/components/folder/index.ts

@@ -24,13 +24,34 @@ export const PopsFolder = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			PopsCSS.index,
-			PopsCSS.ninePalaceGridPosition,
-			PopsCSS.scrollbar,
-			PopsCSS.button,
-			PopsCSS.anim,
-			PopsCSS.common,
-			PopsCSS.folderCSS,
+			{
+				name: "index",
+				css: PopsCSS.index,
+			},
+			{
+				name: "ninePalaceGridPosition",
+				css: PopsCSS.ninePalaceGridPosition,
+			},
+			{
+				name: "scrollbar",
+				css: PopsCSS.scrollbar,
+			},
+			{
+				name: "button",
+				css: PopsCSS.button,
+			},
+			{
+				name: "anim",
+				css: PopsCSS.anim,
+			},
+			{
+				name: "common",
+				css: PopsCSS.common,
+			},
+			{
+				name: "folderCSS",
+				css: PopsCSS.folderCSS,
+			},
 		]);
 
 		/* 办公几件套 */
@@ -127,7 +148,7 @@ export const PopsFolder = {
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
+					: `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
 			<div class="pops-content pops-${PopsType}-content ${
 				popsUtils.isPhone() ? "pops-mobile-folder-content" : ""

package/src/components/iframe/index.ts

@@ -27,12 +27,30 @@ export const PopsIframe = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			PopsCSS.index,
-			PopsCSS.ninePalaceGridPosition,
-			PopsCSS.scrollbar,
-			PopsCSS.anim,
-			PopsCSS.common,
-			PopsCSS.iframeCSS,
+			{
+				name: "index",
+				css: PopsCSS.index,
+			},
+			{
+				name: "ninePalaceGridPosition",
+				css: PopsCSS.ninePalaceGridPosition,
+			},
+			{
+				name: "scrollbar",
+				css: PopsCSS.scrollbar,
+			},
+			{
+				name: "anim",
+				css: PopsCSS.anim,
+			},
+			{
+				name: "common",
+				css: PopsCSS.common,
+			},
+			{
+				name: "iframeCSS",
+				css: PopsCSS.iframeCSS,
+			},
 		]);
 
 		let maskExtraStyle =
@@ -63,7 +81,7 @@ export const PopsIframe = {
 			};${headerStyle}">${
 				config.title.html
 					? titleText
-					: `<p pops style="${headerPStyle}">${titleText}</p>`
+					: `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${titleText}</p>`
 			}${headerBtnHTML}</div>
 			<div class="pops-content pops-${PopsType}-content">
                 <div class="pops-${PopsType}-content-global-loading"></div>

package/src/components/loading/index.ts

@@ -43,7 +43,9 @@ export const PopsLoading = {
                     ${PopsCSS.loadingCSS}
                 </style>
             ${config.style != null ? `<style>${config.style}</style>` : ""}
-            	<p pops style="${contentPStyle}">${config.content.text}</p>
+            	<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${
+				config.content.text
+			}</p>
             </div>`,
 			"",
 			zIndex

package/src/components/panel/config.ts

@@ -432,6 +432,52 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 					},
 				],
 			},
+			{
+				id: "whitesev-panel-bottom-config-1",
+				title: /*html*/ `
+					<a rel="nofollow" href="https://www.npmjs.com/package/@whitesev/pops" target="_blank"><img src="https://img.shields.io/npm/v/@whitesev/pops?label=pops" alt="npm pops version"></a>
+				`,
+				isBottom: true,
+				disableAsideItemHoverCSS: true,
+				attributes: [
+					{
+						"data-value": "value",
+						"data-value-2": "value2",
+					},
+				],
+				// @ts-ignore
+				props: {},
+				forms: [],
+				clickFirstCallback: function (
+					event: MouseEvent | PointerEvent,
+					rightHeaderElement: HTMLUListElement,
+					rightContainerElement: HTMLUListElement
+				) {
+					return false;
+				},
+			},
+			{
+				id: "whitesev-panel-bottom-config-2",
+				// @ts-ignore
+				title: "版本：" + pops.config.version,
+				isBottom: true,
+				attributes: [
+					{
+						"data-value": "value",
+						"data-value-2": "value2",
+					},
+				],
+				// @ts-ignore
+				props: {},
+				forms: [],
+				clickFirstCallback: function (
+					event: MouseEvent | PointerEvent,
+					rightHeaderElement: HTMLUListElement,
+					rightContainerElement: HTMLUListElement
+				) {
+					return false;
+				},
+			},
 		],
 		btn: {
 			close: {