@whitesev/pops 2.1.7 → 2.1.8

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/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/pops",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "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.9",
 		cssText: PopsCSS,
 		/** icon图标的svg代码 */
 		iconSVG: PopsIcon.$data,

package/src/components/alert/index.ts

@@ -53,12 +53,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

@@ -53,12 +53,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

@@ -52,14 +52,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

@@ -127,7 +127,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

@@ -63,7 +63,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: {

package/src/components/panel/handlerComponents.ts

@@ -34,9 +34,13 @@ import type { PopsPanelTextAreaDetails } from "./types/components-textarea";
 export const PanelHandlerComponents = () => {
 	return {
 		/**
-		 * 左侧的ul容器
+		 * 左侧上方的的ul容器
 		 */
 		asideULElement: null as any as HTMLUListElement,
+		/**
+		 * 左侧下方的ul容器
+		 */
+		asideBottomULElement: null as any as HTMLUListElement,
 		/**
 		 * 右侧主内容的顶部文字ul容器
 		 */
@@ -71,31 +75,48 @@ export const PanelHandlerComponents = () => {
 				$contentSectionContainer: HTMLElement;
 			};
 		}) {
+			const PopsType = "panel";
 			this.$el = {
 				...details.$el,
 			};
 
 			this.asideULElement =
-				this.$el.$contentAside.querySelector<HTMLUListElement>("ul")!;
+				this.$el.$contentAside.querySelector<HTMLUListElement>(
+					`ul.pops-${PopsType}-aside-top-container`
+				)!;
+			this.asideBottomULElement =
+				this.$el.$contentAside.querySelector<HTMLUListElement>(
+					`ul.pops-${PopsType}-aside-bottom-container`
+				)!;
 			this.sectionContainerHeaderULElement =
-				this.$el.$contentSectionContainer.querySelectorAll<HTMLUListElement>(
-					"ul"
-				)[0];
+				this.$el.$contentSectionContainer.querySelector<HTMLUListElement>(
+					`ul.pops-${PopsType}-container-header-ul`
+				)!;
 			this.sectionContainerULElement =
-				this.$el.$contentSectionContainer.querySelectorAll<HTMLUListElement>(
-					"ul"
-				)[1];
+				this.$el.$contentSectionContainer.querySelector<HTMLUListElement>(
+					`ul.pops-${PopsType}-container-main-ul`
+				)!;
 			/**
 			 * 默认点击的左侧容器项
 			 */
-			let $asideDefaultItemElement: HTMLLIElement | null = null;
+			let $defaultAsideItem: HTMLLIElement | null = null;
 			/** 是否滚动到默认位置（第一个项） */
 			let isScrollToDefaultView = false;
+			// 初始化配置
 			details.config.content.forEach((asideItemConfig) => {
 				let $asideLiElement = this.createAsideItem(asideItemConfig);
 				this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
-				this.asideULElement.appendChild($asideLiElement);
-				if ($asideDefaultItemElement == null) {
+				// 是否处于底部
+				let isBottom =
+					typeof asideItemConfig.isBottom === "function"
+						? asideItemConfig.isBottom()
+						: asideItemConfig.isBottom;
+				if (isBottom) {
+					this.asideBottomULElement.appendChild($asideLiElement);
+				} else {
+					this.asideULElement.appendChild($asideLiElement);
+				}
+				if ($defaultAsideItem == null) {
 					let flag = false;
 					if (typeof asideItemConfig.isDefault === "function") {
 						flag = Boolean(asideItemConfig.isDefault());
@@ -103,7 +124,7 @@ export const PanelHandlerComponents = () => {
 						flag = Boolean(asideItemConfig.isDefault);
 					}
 					if (flag) {
-						$asideDefaultItemElement = $asideLiElement;
+						$defaultAsideItem = $asideLiElement;
 						isScrollToDefaultView = Boolean(
 							asideItemConfig.scrollToDefaultView
 						);
@@ -119,19 +140,15 @@ export const PanelHandlerComponents = () => {
 			});
 
 			/* 点击左侧列表 */
-			if (
-				$asideDefaultItemElement == null &&
-				this.asideULElement.children.length
-			) {
+			if ($defaultAsideItem == null && this.asideULElement.children.length) {
 				/* 默认第一个 */
-				$asideDefaultItemElement = this.asideULElement
-					.children[0] as HTMLLIElement;
+				$defaultAsideItem = <HTMLLIElement>this.asideULElement.children[0];
 			}
-			if ($asideDefaultItemElement) {
+			if ($defaultAsideItem) {
 				/* 点击选择的那一项 */
-				$asideDefaultItemElement.click();
+				$defaultAsideItem.click();
 				if (isScrollToDefaultView) {
-					$asideDefaultItemElement?.scrollIntoView();
+					$defaultAsideItem?.scrollIntoView();
 				}
 			} else {
 				console.error("pops.panel：左侧容器没有项");
@@ -239,11 +256,28 @@ export const PanelHandlerComponents = () => {
 			let $li = document.createElement("li");
 			$li.id = asideConfig.id;
 			Reflect.set($li, "__forms__", asideConfig.forms);
-			PopsSafeUtils.setSafeHTML($li, asideConfig.title);
+			let title =
+				typeof asideConfig.title === "function"
+					? asideConfig.title()
+					: asideConfig.title;
+			PopsSafeUtils.setSafeHTML($li, title);
 			/* 处理className */
 			this.setElementClassName($li, asideConfig.className);
 			this.setElementAttributes($li, asideConfig.attributes);
 			this.setElementProps($li, asideConfig.props);
+			/** 禁用左侧项的hover的CSS样式的类名 */
+			const disableAsideItemHoverCSSClassName =
+				"pops-panel-disabled-aside-hover-css";
+			/** 是否禁用左侧项的hover的CSS样式 */
+			let disableAsideItemHoverCSS =
+				typeof asideConfig.disableAsideItemHoverCSS === "function"
+					? asideConfig.disableAsideItemHoverCSS()
+					: asideConfig.disableAsideItemHoverCSS;
+			if (disableAsideItemHoverCSS) {
+				$li.classList.add(disableAsideItemHoverCSSClassName);
+			} else {
+				$li.classList.remove(disableAsideItemHoverCSSClassName);
+			}
 			return $li;
 		},
 		/**
@@ -2977,28 +3011,47 @@ export const PanelHandlerComponents = () => {
 			asideLiElement: HTMLElement,
 			asideConfig: PopsPanelContentConfig
 		) {
-			const that = this;
 			popsDOMUtils.on<MouseEvent | PointerEvent>(
 				asideLiElement,
 				"click",
-				void 0,
-				(event) => {
+				async (event) => {
+					if (typeof asideConfig.clickFirstCallback === "function") {
+						let clickFirstCallbackResult = await asideConfig.clickFirstCallback(
+							event,
+							this.sectionContainerHeaderULElement,
+							this.sectionContainerULElement
+						);
+						if (
+							typeof clickFirstCallbackResult === "boolean" &&
+							!clickFirstCallbackResult
+						) {
+							return;
+						}
+					}
 					this.clearContainer();
-					let rightContainerFormConfig = Reflect.get(
+					let rightContainerFormConfig: PopsPanelContentConfig[] = Reflect.get(
 						asideLiElement,
 						"__forms__"
-					) as PopsPanelContentConfig[];
+					);
 
 					Reflect.set(
-						that.$el.$contentSectionContainer,
+						this.$el.$contentSectionContainer,
 						"__formConfig__",
 						rightContainerFormConfig
 					);
-					popsDOMUtils.cssShow(that.$el.$contentSectionContainer);
+					popsDOMUtils.cssShow(this.$el.$contentSectionContainer);
 					this.clearAsideItemIsVisited();
 					this.setAsideItemIsVisited(asideLiElement);
 					/* 顶部标题栏，存在就设置 */
-					let headerTitleText = asideConfig.headerTitle ?? asideConfig.title;
+					let title =
+						typeof asideConfig.title === "function"
+							? asideConfig.title()
+							: asideConfig.title;
+					let headerTitleText =
+						typeof asideConfig.headerTitle === "function"
+							? asideConfig.headerTitle()
+							: asideConfig.headerTitle;
+					headerTitleText = headerTitleText ?? title;
 					if (
 						typeof headerTitleText === "string" &&
 						headerTitleText.trim() !== ""
@@ -3015,15 +3068,21 @@ export const PanelHandlerComponents = () => {
 						this.createSectionContainerItem_forms(formConfig);
 					});
 
-					if (typeof asideConfig.callback === "function") {
+					if (typeof asideConfig.clickCallback === "function") {
 						/* 执行回调 */
-						asideConfig.callback(
+						let asideClickCallbackResult = await asideConfig.clickCallback(
 							event,
 							this.sectionContainerHeaderULElement,
 							this.sectionContainerULElement
 						);
+						if (
+							typeof asideClickCallbackResult === "boolean" &&
+							!asideClickCallbackResult
+						) {
+							return;
+						}
 					}
-					that.triggerRenderRightContainer(that.$el.$contentSectionContainer);
+					this.triggerRenderRightContainer(this.$el.$contentSectionContainer);
 				}
 			);
 		},