@whitesev/pops 1.7.8 → 1.8.0

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

@@ -214,8 +214,8 @@ declare class Pops {
             createSectionContainerItem_deepMenu(formConfig: import("./components/panel/deepMenuType").PopsPanelDeepMenuDetails): HTMLLIElement;
             createSectionContainerItem_own(formConfig: import("./components/panel/ownType").PopsPanelOwnDetails): HTMLLIElement;
             createSectionContainerItem(formConfig: import("./components/panel/indexType").PopsPanelFormsTotalDetails): HTMLLIElement | undefined;
-            initFormItem(formConfig: import("./components/panel/indexType").PopsPanelContentConfig): void;
-            uListContainerAddItem(formConfig: import("./components/panel/indexType").PopsPanelFormsTotalDetails, containerOptions: import("./components/panel/commonType").PopsPanelRightAsideContainerOptions): void;
+            initFormItem(formConfig: import("./components/panel/indexType").PopsPanelContentConfig | import("./components/panel/formsType").PopsPanelFormsDetails): void;
+            uListContainerAddItem(formConfig: import("./components/panel/indexType").PopsPanelFormsTotalDetails, containerOptions: Omit<import("./components/panel/commonType").PopsPanelRightAsideContainerOptions, "target">): void;
             setAsideItemClickEvent(asideLiElement: HTMLElement, asideConfig: import("./components/panel/indexType").PopsPanelContentConfig): void;
         };
     };

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

@@ -1,6 +1,7 @@
 import type { PopsPanelButtonDetails } from "./buttonType";
 import type { PopsPanelRightAsideContainerOptions } from "./commonType";
 import type { PopsPanelDeepMenuDetails } from "./deepMenuType";
+import type { PopsPanelFormsDetails } from "./formsType";
 import type { PopsPanelContentConfig, PopsPanelDetails, PopsPanelFormsTotalDetails } from "./indexType";
 import type { PopsPanelInputDetails } from "./inputType";
 import type { PopsPanelOwnDetails } from "./ownType";
@@ -149,13 +150,13 @@ export declare const PanelHandleContentDetails: () => {
      * 生成配置每一项的元素
      * @param formConfig
      */
-    initFormItem(formConfig: PopsPanelContentConfig): void;
+    initFormItem(formConfig: PopsPanelContentConfig | PopsPanelFormsDetails): void;
     /**
      *
      * @param formConfig
      * @param containerOptions
      */
-    uListContainerAddItem(formConfig: PopsPanelFormsTotalDetails, containerOptions: PopsPanelRightAsideContainerOptions): void;
+    uListContainerAddItem(formConfig: PopsPanelFormsTotalDetails, containerOptions: Omit<PopsPanelRightAsideContainerOptions, "target">): void;
     /**
      * 为左侧容器元素添加点击事件
      * @param asideLiElement 左侧的容器<li>元素

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

@@ -3,9 +3,11 @@ import { PopsPanelFormsTotalDetails } from "./indexType";
  * 右侧容器的配置
  */
 export interface PopsPanelRightAsideContainerOptions {
-    /** 把获取的项<li>元素添加到这个<ul>元素内 */
+    /** 当前的<li>元素 */
+    target: HTMLLIElement | undefined;
+    /** 当前的<li>元素的父<ul>元素 */
     ulElement: HTMLUListElement;
-    /**  */
+    /** 当前的<li>元素所在的统一的<ul>元素 */
     sectionContainerULElement?: HTMLUListElement;
     /**  */
     formContainerListElement?: HTMLLIElement;

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

@@ -24,6 +24,10 @@ export interface PopsPanelFormsDetails extends PopsPanelCommonDetails {
      * 显示在左边的文字
      */
     text: string;
+    /**
+     * 是否进行折叠
+     */
+    isFold?: boolean;
     /**
      * 类型
      */

package/package.json

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

package/src/Pops.ts

@@ -83,7 +83,7 @@ class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2024.10.19",
+		version: "2024.10.27",
 		cssText: {
 			/** 主CSS */
 			index: indexCSS,

package/src/components/panel/PanelHandleContentDetails.ts

@@ -2263,14 +2263,14 @@ export const PanelHandleContentDetails = () => {
 		 */
 		createSectionContainerItem_deepMenu(formConfig: PopsPanelDeepMenuDetails) {
 			let that = this;
-			let liElement = document.createElement("li");
-			liElement.classList.add("pops-panel-deepMenu-nav-item");
-			(liElement as any)["__formConfig__"] = formConfig;
-			this.setElementClassName(liElement, formConfig.className);
+			let $li = document.createElement("li");
+			$li.classList.add("pops-panel-deepMenu-nav-item");
+			($li as any)["__formConfig__"] = formConfig;
+			this.setElementClassName($li, formConfig.className);
 			// 设置属性
-			this.setElementAttributes(liElement, formConfig.attributes);
+			this.setElementAttributes($li, formConfig.attributes);
 			// 设置元素上的属性
-			this.setElementProps(liElement, formConfig.props);
+			this.setElementProps($li, formConfig.props);
 
 			/* 左边底部的描述的文字 */
 			let leftDescriptionText = "";
@@ -2291,7 +2291,7 @@ export const PanelHandleContentDetails = () => {
 			if (formConfig.rightText) {
 				rightText = /*html*/ `<p class="pops-panel-item-right-text">${formConfig.rightText}</p>`;
 			}
-			liElement.innerHTML = /*html*/ `
+			$li.innerHTML = /*html*/ `
 			<div class="pops-panel-item-left-text">
 				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
 				${leftDescriptionText}
@@ -2320,21 +2320,56 @@ export const PanelHandleContentDetails = () => {
 					$container: HTMLElement,
 					formItemConfig: PopsPanelFormsTotalDetails | PopsPanelFormsDetails
 				) {
-					if (formItemConfig["type"] === "forms") {
-						let childForms = formItemConfig["forms"];
+					let formConfig_forms = formItemConfig as PopsPanelFormsDetails;
+					if (formConfig_forms["type"] === "forms") {
+						let childForms = formConfig_forms["forms"];
 						/* 每一项<li>元素 */
 						let formContainerListElement = document.createElement("li");
 						/* 每一项<li>内的子<ul>元素 */
 						let formContainerULElement = document.createElement("ul");
-						formContainerListElement.className =
-							"pops-panel-forms-container-item";
+						formContainerULElement.classList.add(
+							"pops-panel-forms-container-item-formlist"
+						);
+						formContainerListElement.classList.add(
+							"pops-panel-forms-container-item"
+						);
 						/* 区域头部的文字 */
 						let formHeaderDivElement = popsDOMUtils.createElement("div", {
 							className: "pops-panel-forms-container-item-header-text",
 						});
-						formHeaderDivElement.innerHTML = formItemConfig["text"];
-						/* 加进容器内 */
-						formContainerListElement.appendChild(formHeaderDivElement);
+						formHeaderDivElement.innerHTML = formConfig_forms["text"];
+
+						if (formConfig_forms.isFold) {
+							/* 添加第一个 */
+							/* 加进容器内 */
+							formHeaderDivElement.innerHTML = /*html*/ `
+								<p>${formConfig_forms.text}</p>
+								<i class="pops-panel-forms-fold-container-icon">
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+										<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
+									</svg>
+								</i>
+								
+							`;
+							// 添加点击事件
+							popsDOMUtils.on(formHeaderDivElement, "click", (event) => {
+								if (formContainerListElement.hasAttribute("data-fold-enable")) {
+									formContainerListElement.removeAttribute("data-fold-enable");
+								} else {
+									formContainerListElement.setAttribute("data-fold-enable", "");
+								}
+							});
+							formHeaderDivElement.classList.add(
+								"pops-panel-forms-fold-container"
+							);
+							formHeaderDivElement.classList.add("pops-user-select-none");
+							formContainerListElement.setAttribute("data-fold-enable", "");
+							formContainerListElement.classList.add("pops-panel-forms-fold");
+							formContainerListElement.appendChild(formHeaderDivElement);
+						} else {
+							/* 加进容器内 */
+							formContainerListElement.appendChild(formHeaderDivElement);
+						}
 
 						that.setElementClassName(
 							formContainerListElement,
@@ -2443,22 +2478,22 @@ export const PanelHandleContentDetails = () => {
 				},
 				/** 设置项的点击事件 */
 				setLiClickEvent() {
-					popsDOMUtils.on(liElement, "click", void 0, async (event) => {
+					popsDOMUtils.on($li, "click", void 0, async (event) => {
 						if (typeof formConfig.clickCallBack === "function") {
 							let result = await formConfig.clickCallBack(event, formConfig);
 							if (result) {
 								return;
 							}
 						}
-						this.gotoDeepMenu(event, liElement);
+						this.gotoDeepMenu(event, $li);
 					});
 				},
 			};
 
 			PopsPanelDeepMenu.init();
-			(liElement as any)["data-deepMenu"] = PopsPanelDeepMenu;
+			($li as any)["data-deepMenu"] = PopsPanelDeepMenu;
 
-			return liElement;
+			return $li;
 		},
 		/**
 		 * 获取中间容器的元素<li>
@@ -2526,24 +2561,54 @@ export const PanelHandleContentDetails = () => {
 		 * 生成配置每一项的元素
 		 * @param formConfig
 		 */
-		initFormItem(formConfig: PopsPanelContentConfig) {
+		initFormItem(formConfig: PopsPanelContentConfig | PopsPanelFormsDetails) {
 			let that = this;
-			if ((formConfig as any)["type"] === "forms") {
-				let __formConfig_forms = formConfig as any as PopsPanelFormsDetails;
+			let formConfig_forms = formConfig as PopsPanelFormsDetails;
+			if (formConfig_forms["type"] === "forms") {
 				let childForms = formConfig["forms"];
 				/* 每一项<li>元素 */
 				let formContainerListElement = document.createElement("li");
 				/* 每一项<li>内的子<ul>元素 */
 				let formContainerULElement = document.createElement("ul");
-				formContainerListElement.className = "pops-panel-forms-container-item";
+				formContainerULElement.classList.add(
+					"pops-panel-forms-container-item-formlist"
+				);
+				formContainerListElement.classList.add(
+					"pops-panel-forms-container-item"
+				);
 				/* 区域头部的文字 */
 				let formHeaderDivElement = popsDOMUtils.createElement("div", {
 					className: "pops-panel-forms-container-item-header-text",
 				});
-				formHeaderDivElement.innerHTML = __formConfig_forms["text"];
-				/* 加进容器内 */
-				formContainerListElement.appendChild(formHeaderDivElement);
-
+				formHeaderDivElement.innerHTML = formConfig_forms["text"];
+				if (formConfig_forms.isFold) {
+					/* 加进容器内 */
+					formHeaderDivElement.innerHTML = /*html*/ `
+						<p>${formConfig_forms.text}</p>
+						<i class="pops-panel-forms-fold-container-icon">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+								<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
+							</svg>
+						</i>
+						
+					`;
+					// 添加点击事件
+					popsDOMUtils.on(formHeaderDivElement, "click", (event) => {
+						if (formContainerListElement.hasAttribute("data-fold-enable")) {
+							formContainerListElement.removeAttribute("data-fold-enable");
+						} else {
+							formContainerListElement.setAttribute("data-fold-enable", "");
+						}
+					});
+					formHeaderDivElement.classList.add("pops-panel-forms-fold-container");
+					formHeaderDivElement.classList.add("pops-user-select-none");
+					formContainerListElement.setAttribute("data-fold-enable", "");
+					formContainerListElement.classList.add("pops-panel-forms-fold");
+					formContainerListElement.appendChild(formHeaderDivElement);
+				} else {
+					/* 加进容器内 */
+					formContainerListElement.appendChild(formHeaderDivElement);
+				}
 				that.setElementClassName(
 					formContainerListElement,
 					formConfig.className
@@ -2577,14 +2642,17 @@ export const PanelHandleContentDetails = () => {
 		 */
 		uListContainerAddItem(
 			formConfig: PopsPanelFormsTotalDetails,
-			containerOptions: PopsPanelRightAsideContainerOptions
+			containerOptions: Omit<PopsPanelRightAsideContainerOptions, "target">
 		) {
 			let itemLiElement = this.createSectionContainerItem(formConfig);
 			if (itemLiElement) {
 				containerOptions["ulElement"].appendChild(itemLiElement);
 			}
 			if (typeof formConfig.afterAddToUListCallBack === "function") {
-				formConfig.afterAddToUListCallBack(formConfig, containerOptions);
+				formConfig.afterAddToUListCallBack(formConfig, {
+					...containerOptions,
+					target: itemLiElement,
+				});
 			}
 		},
 		/**

package/src/components/panel/commonType.ts

@@ -4,9 +4,11 @@ import { PopsPanelFormsTotalDetails } from "./indexType";
  * 右侧容器的配置
  */
 export interface PopsPanelRightAsideContainerOptions {
-	/** 把获取的项<li>元素添加到这个<ul>元素内 */
+	/** 当前的<li>元素 */
+	target: HTMLLIElement | undefined;
+	/** 当前的<li>元素的父<ul>元素 */
 	ulElement: HTMLUListElement;
-	/**  */
+	/** 当前的<li>元素所在的统一的<ul>元素 */
 	sectionContainerULElement?: HTMLUListElement;
 	/**  */
 	formContainerListElement?: HTMLLIElement;

package/src/components/panel/config.ts

@@ -310,6 +310,25 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 							},
 						],
 					},
+					{
+						type: "forms",
+						isFold: true,
+						text: "折叠菜单",
+						forms: [
+							{
+								className: "panel-switch",
+								text: "switch",
+								type: "switch",
+								attributes: [],
+								getValue() {
+									return true;
+								},
+								callback(event, value) {
+									console.log("按钮开启状态：", value);
+								},
+							},
+						],
+					},
 				],
 			},
 		],

package/src/components/panel/formsType.ts

@@ -25,6 +25,10 @@ export interface PopsPanelFormsDetails extends PopsPanelCommonDetails {
 	 * 显示在左边的文字
 	 */
 	text: string;
+	/**
+	 * 是否进行折叠
+	 */
+	isFold?: boolean;
 	/**
 	 * 类型
 	 */

package/src/components/panel/index.css

@@ -2,12 +2,24 @@
 	--el-disabled-text-color: #a8abb2;
 	--el-disabled-bg-color: #f5f7fa;
 	--el-disabled-border-color: #e4e7ed;
-	--aside-bg-color: #f2f2f2;
+	--pops-bg-color: #f2f2f2;
+	--pops-color: #333;
+	--title-bg-color: #ffffff;
+	--aside-bg-color: #ffffff;
+	--aside-hover-color: rgb(64, 158, 255);
+	--aside-hover-bg-color: rgba(64, 158, 255, 0.1);
+	--container-item-bg-color: #ffffff;
+	--container-title-color: #333;
+}
+.pops[type-value="panel"] {
+	color: var(--pops-color);
+	background: var(--pops-bg-color);
 }
 .pops[type-value] .pops-panel-title {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	background: var(--title-bg-color);
 }
 
 .pops[type-value="panel"] .pops-panel-title {
@@ -18,7 +30,6 @@
 .pops[type-value="panel"] .pops-panel-title p[pops] {
 	width: 100%;
 	overflow: hidden;
-	color: #333;
 	text-indent: 15px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -103,8 +114,8 @@ aside.pops-panel-aside ul li {
 }
 aside.pops-panel-aside .pops-is-visited,
 aside.pops-panel-aside ul li:hover {
-	color: rgb(64, 158, 255);
-	background: rgba(64, 158, 255, 0.1);
+	color: var(--aside-hover-color);
+	background: var(--aside-hover-bg-color);
 }
 section.pops-panel-container > ul li {
 	display: flex;
@@ -113,24 +124,35 @@ section.pops-panel-container > ul li {
 	margin: 10px 20px;
 	gap: 10px;
 }
+section.pops-panel-container .pops-panel-forms-container-item-header-text {
+	color: var(--container-title-color);
+}
 section.pops-panel-container li.pops-panel-forms-container-item {
 	display: block;
 	margin-top: 20px;
 }
 section.pops-panel-container .pops-panel-forms-container-item ul {
 	border-radius: 6px;
-	background: var(--aside-bg-color);
+	background: var(--container-item-bg-color);
 	margin: 10px;
 }
 section.pops-panel-container .pops-panel-forms-container-item ul li {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin: 0px;
-	padding: 10px 10px;
+	padding: 12px 0px;
+	margin: 0px 16px;
 	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
 	text-align: left;
 }
+section.pops-panel-container
+	.pops-panel-forms-container-item
+	ul
+	li.pops-panel-deepMenu-nav-item {
+	padding: 12px 16px;
+	margin: 0px;
+	border-bottom: 0;
+}
 section.pops-panel-container .pops-panel-forms-container-item ul li:last-child {
 	border: 0;
 }
@@ -157,69 +179,112 @@ section.pops-panel-container
 	font-size: 0.8em;
 	color: rgb(108, 108, 108);
 }
-/* 兼容移动端CSS */
-.pops[type-value="panel"].pops-panel-is-mobile {
-	width: 92%;
-	width: 92vw;
-}
-.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container {
-	padding: 10px 0px;
+
+/* 折叠面板 */
+
+section.pops-panel-container .pops-panel-forms-fold {
+	border-radius: 6px;
+	background: var(--container-item-bg-color);
+	margin: 10px 30px;
 }
-.pops[type-value="panel"].pops-panel-is-mobile
-	.pops-panel-content
-	aside.pops-panel-aside {
-	width: 20%;
+section.pops-panel-container
+	.pops-panel-forms-fold
+	.pops-panel-forms-fold-container {
+	display: flex;
+	align-items: center;
+	fill: #6c6c6c;
+	justify-content: space-between;
+	margin: 0px 16px !important;
+	padding: 12px 0px !important;
 }
-.pops[type-value="panel"].pops-panel-is-mobile
-	section.pops-panel-container
-	.pops-panel-forms-container-item
-	> div {
-	margin: 5px 10px;
-	text-align: left;
+section.pops-panel-container
+	.pops-panel-forms-fold[data-fold-enable]
+	.pops-panel-forms-fold-container-icon {
+	transform: rotate(90deg);
 }
-.pops[type-value="panel"].pops-panel-is-mobile
-	section.pops-panel-container
-	.pops-panel-forms-container-item
-	ul {
-	margin: 0px !important;
-}
-.pops[type-value="panel"].pops-panel-is-mobile
-	section.pops-panel-container
-	> ul
-	li {
-	padding: 10px 10px;
-	margin: 0;
+section.pops-panel-container
+	.pops-panel-forms-fold
+	.pops-panel-forms-fold-container-icon {
+	width: 15px;
+	height: 15px;
+	display: flex;
+	align-items: center;
+	transform: rotate(-90deg);
+	transition: transform 0.3s;
 }
-.pops[type-value="panel"].pops-panel-is-mobile
-	section.pops-panel-container
-	> ul
-	> li
-	div:nth-child(2) {
-	max-width: 55%;
-	margin-left: 6px;
-	text-align: right;
+section.pops-panel-container
+	.pops-panel-forms-fold[data-fold-enable]
+	.pops-panel-forms-container-item-formlist {
+	height: 0;
 }
-.pops[type-value="panel"].pops-panel-is-mobile
-	section.pops-panel-container
-	.pops-panel-select
-	select {
-	min-width: 88px !important;
-	width: -webkit-fill-available;
-	width: -moz-available;
+section.pops-panel-container
+	.pops-panel-forms-fold
+	.pops-panel-forms-container-item-formlist {
+	transition: height 0.3s;
+	overflow: hidden;
+	border-radius: unset;
+	background: unset;
+	margin: 0;
+	height: auto;
+	height: calc-size(auto, size);
 }
-.pops[type-value="panel"].pops-panel-is-mobile
-	section.pops-panel-container
-	.pops-panel-container-header-ul
-	li {
-	font-size: 16px;
-}
-.pops[type-value="panel"].pops-panel-is-mobile .pops-panel-title p[pops],
-.pops[type-value="panel"].pops-panel-is-mobile
-	section.pops-panel-container
-	> ul
-	li,
-.pops[type-value="panel"].pops-panel-is-mobile aside.pops-panel-aside ul li {
-	font-size: 14px;
+/* 折叠面板 */
+
+/* 姑且认为小于600px的屏幕为移动端 */
+@media (max-width: 600px) {
+	/* 兼容移动端CSS */
+	.pops[type-value="panel"] {
+		width: 92%;
+		width: 92vw;
+	}
+	.pops[type-value="panel"] section.pops-panel-container {
+		padding: 10px 0px;
+	}
+	.pops[type-value="panel"] .pops-panel-content aside.pops-panel-aside {
+		width: 20%;
+	}
+	.pops[type-value="panel"]
+		section.pops-panel-container
+		.pops-panel-forms-container-item
+		> div {
+		margin: 5px 10px;
+		text-align: left;
+	}
+	.pops[type-value="panel"]
+		section.pops-panel-container
+		.pops-panel-forms-container-item
+		ul {
+		margin: 0px !important;
+	}
+	.pops[type-value="panel"] section.pops-panel-container > ul > li {
+		margin: 10px 10px;
+	}
+	.pops[type-value="panel"]
+		section.pops-panel-container
+		> ul
+		> li
+		div:nth-child(2) {
+		max-width: 55%;
+	}
+	.pops[type-value="panel"]
+		section.pops-panel-container
+		.pops-panel-select
+		select {
+		min-width: 88px !important;
+		width: -webkit-fill-available;
+		width: -moz-available;
+	}
+	.pops[type-value="panel"]
+		section.pops-panel-container
+		.pops-panel-container-header-ul
+		li {
+		font-size: 16px;
+	}
+	.pops[type-value="panel"] .pops-panel-title p[pops],
+	.pops[type-value="panel"] section.pops-panel-container > ul li,
+	.pops[type-value="panel"] aside.pops-panel-aside ul li {
+		font-size: 14px;
+	}
 }
 /* switch的CSS */
 .pops-panel-switch {

package/src/css/index.css

@@ -12,6 +12,7 @@
 	--pops-bg-opacity: 1;
 	--pops-bd-opacity: 1;
 	--pops-font-size: 16px;
+	interpolate-size: allow-keywords;
 }
 .pops-mask {
 	--pops-mask-bg-opacity: 0.4;
@@ -129,7 +130,7 @@ button.pops-header-control i:hover {
 .pops-header-controls[data-margin] button.pops-header-control {
 	margin: 0 6px;
 	display: flex;
-    align-items: center;
+	align-items: center;
 }
 .pops[type-value] .pops-header-controls {
 	display: flex;