@whitesev/pops 2.1.13 → 2.2.0

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

@@ -61,7 +61,7 @@ export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails<PopsPan
         /** 右侧的总容器的标题头容器 */
         sectionContainerHeaderContainer: HTMLUListElement;
         /** 右侧的总容器的标题头 */
-        sectionContainerHeader: HTMLDivElement;
+        sectionContainerHeader: HTMLLIElement;
         /** 右侧的内容容器 */
         sectionBodyContainer: HTMLUListElement;
     }) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.1.13",
+  "version": "2.2.0",
   "type": "module",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",

package/src/Pops.ts

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

package/src/components/panel/handlerComponents.ts

@@ -2727,14 +2727,18 @@ export const PanelHandlerComponents = () => {
 					});
 					Reflect.set($deepMenuContainer, "__formConfig__", formConfig);
 					let $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
-						className: "pops-panel-deepMenu-container-header-ul",
+						className:
+							"pops-panel-container-header-ul pops-panel-deepMenu-container-header-ul",
+					});
+					let $deepMenuMain = popsDOMUtils.createElement("ul", {
+						className: "pops-panel-container-main-ul",
 					});
-					let $deepMenuBodyUL = popsDOMUtils.createElement("ul");
 					// 标题文字
 					let headerTitleText = formConfig.headerTitle ?? formConfig.text;
-					let $header = popsDOMUtils.createElement("div", {
-						className: "pops-panel-deepMenu-container-header",
-						innerHTML: `<p>${headerTitleText}</p>`,
+					let $header = popsDOMUtils.createElement("li", {
+						className:
+							"pops-panel-container-header-title-text pops-panel-deepMenu-container-header",
+						innerHTML: /*html*/ `<p class="pops-panel-deepMenu-container-header-title-text">${headerTitleText}</p>`,
 					});
 					let $headerLeftArrow = popsDOMUtils.createElement("i", {
 						className: "pops-panel-deepMenu-container-left-arrow-icon",
@@ -2763,12 +2767,12 @@ export const PanelHandlerComponents = () => {
 					);
 					$deepMenuHeaderUL.appendChild($header);
 					$deepMenuContainer.appendChild($deepMenuHeaderUL);
-					$deepMenuContainer.appendChild($deepMenuBodyUL);
+					$deepMenuContainer.appendChild($deepMenuMain);
 
 					if (formConfig.forms && Array.isArray(formConfig.forms)) {
 						for (let index = 0; index < formConfig.forms.length; index++) {
 							let formItemConfig = formConfig.forms[index];
-							this.initFormItem($deepMenuBodyUL, formItemConfig);
+							this.initFormItem($deepMenuMain, formItemConfig);
 						}
 					}
 					that.$el.$content?.appendChild($deepMenuContainer);
@@ -2778,7 +2782,7 @@ export const PanelHandlerComponents = () => {
 							sectionContainer: $deepMenuContainer,
 							sectionContainerHeaderContainer: $deepMenuHeaderUL,
 							sectionContainerHeader: $header,
-							sectionBodyContainer: $deepMenuBodyUL,
+							sectionBodyContainer: $deepMenuMain,
 						});
 					}
 					that.triggerRenderRightContainer($deepMenuContainer);

package/src/components/panel/index.css

@@ -9,7 +9,9 @@
 
 	--pops-panel-forms-margin-top-bottom: 10px;
 	--pops-panel-forms-margin-left-right: 20px;
-	--pops-panel-forms-header-icon-size: 20px;
+	--pops-panel-forms-header-icon-size: calc(
+		var(--pops-panel-forms-container-li-padding-left-right) + 1px
+	);
 	--pops-panel-forms-header-padding-top-bottom: 15px;
 	--pops-panel-forms-header-padding-left-right: 10px;
 	--pops-panel-forms-container-item-left-text-gap: 6px;
@@ -139,13 +141,18 @@ section.pops-panel-container .pops-panel-forms-container-item-header-text {
 section.pops-panel-container li.pops-panel-forms-container-item {
 	display: block;
 }
-section.pops-panel-container .pops-panel-forms-container-item ul {
+section.pops-panel-container
+	.pops-panel-forms-container-item
+	ul.pops-panel-forms-container-item-formlist {
 	border-radius: var(--pops-panel-forms-container-item-border-radius);
 	background: var(--pops-panel-forms-container-item-bg-color);
 	margin: var(--pops-panel-forms-container-item-margin-top-bottom)
 		var(--pops-panel-forms-margin-left-right);
 }
-section.pops-panel-container .pops-panel-forms-container-item ul li {
+section.pops-panel-container
+	.pops-panel-forms-container-item
+	ul.pops-panel-forms-container-item-formlist
+	li {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -163,7 +170,10 @@ section.pops-panel-container
 	margin: 0px;
 	border-bottom: 0;
 }
-section.pops-panel-container .pops-panel-forms-container-item ul li:last-child {
+section.pops-panel-container
+	.pops-panel-forms-container-item
+	ul.pops-panel-forms-container-item-formlist
+	li:last-child {
 	border: 0;
 }
 /* 左侧的文字 */
@@ -1093,7 +1103,9 @@ section.pops-panel-container
 	display: flex;
 	align-items: center;
 }
-.pops-panel-deepMenu-container .pops-panel-deepMenu-container-header {
+section.pops-panel-deepMenu-container
+	.pops-panel-container-header-ul
+	li.pops-panel-deepMenu-container-header {
 	display: flex;
 	align-items: center;
 	width: -webkit-fill-available;
@@ -1104,6 +1116,7 @@ section.pops-panel-container
 				var(--pops-panel-forms-container-li-padding-left-right) -
 				var(--pops-panel-forms-header-icon-size)
 		);
+	gap: 0px;
 }
 .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {
 	width: var(--pops-panel-forms-header-icon-size);

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

@@ -69,7 +69,7 @@ export interface PopsPanelDeepMenuDetails
 			/** 右侧的总容器的标题头容器 */
 			sectionContainerHeaderContainer: HTMLUListElement;
 			/** 右侧的总容器的标题头 */
-			sectionContainerHeader: HTMLDivElement;
+			sectionContainerHeader: HTMLLIElement;
 			/** 右侧的内容容器 */
 			sectionBodyContainer: HTMLUListElement;
 		}