@whitesev/pops 2.1.12 → 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,7 +1,6 @@
 {
-  "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/pops",
-  "version": "2.1.12",
+  "version": "2.2.0",
   "type": "module",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",
@@ -37,13 +36,13 @@
   "license": "MIT",
   "dependencies": {
     "any-touch": "^2.2.0",
-    "worker-timers": "^8.0.21"
+    "worker-timers": "^8.0.23"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "12.1.4",
-    "rollup": "^4.44.2",
+    "rollup": "^4.45.0",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-import-css": "^4.0.1",
     "tslib": "^2.8.1",

package/src/Pops.ts

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

package/src/components/panel/handlerComponents.ts

@@ -262,6 +262,7 @@ export const PanelHandlerComponents = () => {
 					: asideConfig.title;
 			PopsSafeUtils.setSafeHTML($li, title);
 			/* 处理className */
+			this.setElementClassName($li, "pops-panel-aside-item");
 			this.setElementClassName($li, asideConfig.className);
 			this.setElementAttributes($li, asideConfig.attributes);
 			this.setElementProps($li, asideConfig.props);
@@ -2726,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",
@@ -2762,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);
@@ -2777,7 +2782,7 @@ export const PanelHandlerComponents = () => {
 							sectionContainer: $deepMenuContainer,
 							sectionContainerHeaderContainer: $deepMenuHeaderUL,
 							sectionContainerHeader: $header,
-							sectionBodyContainer: $deepMenuBodyUL,
+							sectionBodyContainer: $deepMenuMain,
 						});
 					}
 					that.triggerRenderRightContainer($deepMenuContainer);
@@ -2879,12 +2884,12 @@ export const PanelHandlerComponents = () => {
 				let formContainerListElement = document.createElement("li");
 				/* 每一项<li>内的子<ul>元素 */
 				let formContainerULElement = document.createElement("ul");
-				formContainerULElement.classList.add(
-					"pops-panel-forms-container-item-formlist"
-				);
 				formContainerListElement.classList.add(
 					"pops-panel-forms-container-item"
 				);
+				formContainerULElement.classList.add(
+					"pops-panel-forms-container-item-formlist"
+				);
 				/* 区域头部的文字 */
 				let formHeaderDivElement = popsDOMUtils.createElement("div", {
 					className: "pops-panel-forms-container-item-header-text",
@@ -3057,6 +3062,9 @@ export const PanelHandlerComponents = () => {
 						headerTitleText.trim() !== ""
 					) {
 						let $containerHeaderTitle = document.createElement("li");
+						$containerHeaderTitle.classList.add(
+							"pops-panel-container-header-title-text"
+						);
 						Reflect.set($containerHeaderTitle, "__asideConfig__", asideConfig);
 						PopsSafeUtils.setSafeHTML($containerHeaderTitle, headerTitleText);
 						this.sectionContainerHeaderULElement.appendChild(

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;
@@ -83,8 +85,10 @@ section.pops-panel-container .pops-panel-deepMenu-container-header-ul {
 	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
 	flex: 0 auto;
 }
-section.pops-panel-container .pops-panel-container-header-ul li {
-	text-align: left;
+section.pops-panel-container .pops-panel-container-header-ul li,
+section.pops-panel-container
+	.pops-panel-container-header-ul
+	li.pops-panel-container-header-title-text {
 	display: flex;
 	justify-content: flex-start !important;
 	margin: 0px !important;
@@ -93,10 +97,11 @@ section.pops-panel-container .pops-panel-container-header-ul li {
 			var(--pops-panel-forms-margin-left-right) +
 				var(--pops-panel-forms-container-li-padding-left-right)
 		);
+	text-align: left;
 }
-section.pops-panel-container > ul:last-child {
+section.pops-panel-container ul.pops-panel-container-main-ul {
 	overflow: auto;
-	flex: 1;
+	/*flex: 1;*/
 }
 aside.pops-panel-aside ul li {
 	margin: 6px 8px;
@@ -136,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;
@@ -160,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;
 }
 /* 左侧的文字 */
@@ -1090,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;
@@ -1101,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;
 		}