@whitesev/pops 1.8.2 → 1.8.4

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

@@ -49,6 +49,20 @@ export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails<PopsPan
      * + false （默认）表示允许进入深层菜单
      */
     clickCallBack?: (event: MouseEvent | PointerEvent, formConfig: PopsPanelDeepMenuDetails) => boolean | void | Promise<boolean | void>;
+    /**
+     * 进入深层菜单后触发的回调
+     * @param formConfig
+     */
+    afterEnterDeepMenuCallBack?: (formConfig: PopsPanelDeepMenuDetails, container: {
+        /** 右侧的总容器 */
+        sectionContainer: HTMLElement;
+        /** 右侧的总容器的标题头容器 */
+        sectionContainerHeaderContainer: HTMLUListElement;
+        /** 右侧的总容器的标题头 */
+        sectionContainerHeader: HTMLDivElement;
+        /** 右侧的内容容器 */
+        sectionBodyContainer: HTMLUListElement;
+    }) => void;
     /**
      * 菜单配置
      */

package/package.json

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

package/src/components/panel/PanelHandleContentDetails.ts

@@ -2422,7 +2422,7 @@ export const PanelHandleContentDetails = () => {
 						"section.pops-panel-container"
 					) as HTMLElement | null;
 					if (currentSection) {
-						popsDOMUtils.cssHide(currentSection,true);
+						popsDOMUtils.cssHide(currentSection, true);
 					}
 					// 子菜单的容器
 					let $deepMenuContainer = popsDOMUtils.createElement("section", {
@@ -2431,7 +2431,7 @@ export const PanelHandleContentDetails = () => {
 					let $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
 						className: "pops-panel-deepMenu-container-header-ul",
 					});
-					let $deepMenuChildMenuUL = popsDOMUtils.createElement("ul");
+					let $deepMenuBodyUL = popsDOMUtils.createElement("ul");
 					// 标题文字
 					let headerTitleText = formConfig.headerTitle ?? formConfig.text;
 					let $header = popsDOMUtils.createElement("div", {
@@ -2464,15 +2464,24 @@ export const PanelHandleContentDetails = () => {
 					);
 					$deepMenuHeaderUL.appendChild($header);
 					$deepMenuContainer.appendChild($deepMenuHeaderUL);
-					$deepMenuContainer.appendChild($deepMenuChildMenuUL);
+					$deepMenuContainer.appendChild($deepMenuBodyUL);
 
 					if (formConfig.forms && Array.isArray(formConfig.forms)) {
 						for (let index = 0; index < formConfig.forms.length; index++) {
 							let formItemConfig = formConfig.forms[index];
-							this.initFormItem($deepMenuChildMenuUL, formItemConfig);
+							this.initFormItem($deepMenuBodyUL, formItemConfig);
 						}
 					}
 					that.$el.$content?.appendChild($deepMenuContainer);
+
+					if (typeof formConfig.afterEnterDeepMenuCallBack === "function") {
+						formConfig.afterEnterDeepMenuCallBack(formConfig, {
+							sectionContainer: $deepMenuContainer,
+							sectionContainerHeaderContainer: $deepMenuHeaderUL,
+							sectionContainerHeader: $header,
+							sectionBodyContainer: $deepMenuBodyUL,
+						});
+					}
 				},
 				/** 设置项的点击事件 */
 				setLiClickEvent() {

package/src/components/panel/deepMenuType.ts

@@ -53,6 +53,23 @@ export interface PopsPanelDeepMenuDetails
 		event: MouseEvent | PointerEvent,
 		formConfig: PopsPanelDeepMenuDetails
 	) => boolean | void | Promise<boolean | void>;
+	/**
+	 * 进入深层菜单后触发的回调
+	 * @param formConfig
+	 */
+	afterEnterDeepMenuCallBack?: (
+		formConfig: PopsPanelDeepMenuDetails,
+		container: {
+			/** 右侧的总容器 */
+			sectionContainer: HTMLElement;
+			/** 右侧的总容器的标题头容器 */
+			sectionContainerHeaderContainer: HTMLUListElement;
+			/** 右侧的总容器的标题头 */
+			sectionContainerHeader: HTMLDivElement;
+			/** 右侧的内容容器 */
+			sectionBodyContainer: HTMLUListElement;
+		}
+	) => void;
 	/**
 	 * 菜单配置
 	 */

package/src/components/panel/index.css

@@ -78,6 +78,7 @@ aside.pops-panel-aside {
 	box-sizing: border-box;
 	flex-shrink: 0;
 	max-width: 200px;
+	min-width: 100px;
 	height: 100%;
 	background: var(--aside-bg-color);
 	border-right: 1px solid var(--aside-bg-color);
@@ -271,6 +272,7 @@ section.pops-panel-container
 	}
 	.pops[type-value="panel"] .pops-panel-content aside.pops-panel-aside {
 		max-width: 20%;
+		min-width: auto;
 	}
 	.pops[type-value="panel"]
 		section.pops-panel-container