@whitesev/pops 1.7.4 → 1.7.6

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

@@ -162,6 +162,7 @@ declare class Pops {
             drag(moveElement: HTMLElement, options: {
                 dragElement: HTMLElement;
                 limit: boolean;
+                triggerClick?: boolean;
                 extraDistance: number;
                 container?: Window | typeof globalThis | HTMLElement;
                 moveCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;

package/dist/types/src/utils/PopsInstanceUtils.d.ts

@@ -92,6 +92,7 @@ export declare const PopsInstanceUtils: {
     drag(moveElement: HTMLElement, options: {
         dragElement: HTMLElement;
         limit: boolean;
+        triggerClick?: boolean;
         extraDistance: number;
         container?: Window | typeof globalThis | HTMLElement;
         moveCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;

package/package.json

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

package/src/components/alert/index.css

@@ -16,30 +16,32 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-weight: 500;
-	line-height: var(--container-title-height);
-}
-.pops[type-value="alert"] .pops-alert-content p[pops] {
-	padding: 5px 10px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
+	line-height: normal;
 }
 .pops[type-value="alert"] .pops-alert-content {
 	width: 100%;
-	height: calc(
+	/*height: calc(
 		100% - var(--container-title-height) - var(--container-bottom-btn-height)
-	);
+	);*/
+	flex: 1;
 	overflow: auto;
 	word-break: break-word;
 }
+.pops[type-value="alert"] .pops-alert-content p[pops] {
+	padding: 5px 10px;
+	color: rgb(51, 51, 51);
+	text-indent: 15px;
+}
 .pops[type-value="alert"] .pops-alert-btn {
-	position: absolute;
-	bottom: 0;
+	/*position: absolute;
+	bottom: 0;*/
 	display: flex;
 	padding: 10px 10px 10px 10px;
 	width: 100%;
 	height: var(--container-bottom-btn-height);
+	max-height: var(--container-bottom-btn-height);
+	line-height: normal;
 	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
 	text-align: right;
-	line-height: var(--container-bottom-btn-height);
 	align-items: center;
 }

package/src/components/confirm/index.css

@@ -16,30 +16,32 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-weight: 500;
-	line-height: var(--container-title-height);
-}
-.pops[type-value="confirm"] .pops-confirm-content p[pops] {
-	padding: 5px 10px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
+	line-height: normal;
 }
 .pops[type-value="confirm"] .pops-confirm-content {
 	width: 100%;
-	height: calc(
+	/*height: calc(
 		100% - var(--container-title-height) - var(--container-bottom-btn-height)
-	);
+	);*/
+	flex: 1;
 	overflow: auto;
 	word-break: break-word;
 }
+.pops[type-value="confirm"] .pops-confirm-content p[pops] {
+	padding: 5px 10px;
+	color: rgb(51, 51, 51);
+	text-indent: 15px;
+}
 .pops[type-value="confirm"] .pops-confirm-btn {
-	position: absolute;
-	bottom: 0;
+	/*position: absolute;
+	bottom: 0;*/
 	display: flex;
 	padding: 10px 10px 10px 10px;
 	width: 100%;
 	height: var(--container-bottom-btn-height);
+	max-height: var(--container-bottom-btn-height);
+	line-height: normal;
 	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
 	text-align: right;
-	line-height: var(--container-bottom-btn-height);
 	align-items: center;
 }

package/src/components/drawer/config.ts

@@ -7,20 +7,16 @@ export const PopsDrawerConfig = (): Required<PopsDrawerDetails> => {
 			position: "center",
 			text: "默认标题",
 			html: false,
-			style: "height: 60px;line-height: 60px;",
 		},
 		content: {
 			text: "默认内容",
 			html: false,
-			style: "overflow: auto;padding: 0px 10px;",
 		},
 		btn: {
 			position: "flex-end",
 			ok: {
 				enable: true,
-
 				size: void 0,
-
 				icon: void 0,
 				rightIcon: false,
 				iconIsLoading: false,

package/src/components/drawer/index.css

@@ -13,7 +13,18 @@
 	align-items: center;
 	justify-content: space-between;
 }
+.pops[type-value] .pops-drawer-title p[pops] {
+	line-height: normal;
+	align-content: center;
+}
 
+.pops-drawer-content {
+	flex: 1;
+}
+.pops[type-value="drawer"] .pops-drawer-btn {
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
 .pops[type-value="drawer"][direction="top"] {
 	width: 100%;
 	left: 0;
@@ -38,10 +49,3 @@
 	bottom: 0;
 	right: 0;
 }
-.pops-drawer-content {
-	height: 100%;
-}
-.pops[type-value="drawer"] .pops-drawer-btn {
-	padding-top: 10px;
-	padding-bottom: 10px;
-}

package/src/components/folder/index.css

@@ -16,7 +16,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-weight: 500;
-	line-height: var(--container-title-height);
+	line-height: normal;
 }
 .pops[type-value="folder"] .pops-folder-content p[pops] {
 	padding: 5px 10px;
@@ -25,22 +25,24 @@
 }
 .pops[type-value="folder"] .pops-folder-content {
 	width: 100%;
-	height: calc(
+	/*height: calc(
 		100% - var(--container-title-height) - var(--container-bottom-btn-height)
-	);
+	);*/
+	flex: 1;
 	overflow: auto;
 	word-break: break-word;
 }
 .pops[type-value="folder"] .pops-folder-btn {
-	position: absolute;
-	bottom: 0;
+	/*position: absolute;
+	bottom: 0;*/
 	display: flex;
 	padding: 10px 10px 10px 10px;
 	width: 100%;
 	height: var(--container-bottom-btn-height);
+	max-height: var(--container-bottom-btn-height);
+	line-height: normal;
 	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
 	text-align: right;
-	line-height: var(--container-bottom-btn-height);
 	align-items: center;
 }
 .pops-folder-list .cursor-p {
@@ -79,11 +81,13 @@ table.pops-folder-list-table__body {
 	user-select: none;
 }
 .pops-folder-list table tr {
-	line-height: 1;
+	line-height: normal;
+	align-content: center;
 }
 .pops-folder-list-table__header-row {
 	height: 50px;
-	line-height: 50px;
+	line-height: normal;
+	align-content: center;
 	color: rgb(129, 137, 153);
 	text-align: left;
 	font-size: 12px;
@@ -96,7 +100,8 @@ table.pops-folder-list-table__body {
 }
 .pops-folder-list-table__body-row {
 	height: 50px;
-	line-height: 50px;
+	line-height: normal;
+	align-content: center;
 	color: #03081a;
 	font-size: 12px;
 }
@@ -115,7 +120,8 @@ table.pops-folder-list-table__body {
 .pops-folder-list .list-name-text {
 	display: inline-block;
 	padding-left: 12px;
-	line-height: 40px;
+	line-height: normal;
+	align-content: center;
 	max-width: 176px;
 }
 .pops-folder-list-file-name > div {
@@ -204,7 +210,8 @@ table.pops-folder-list-table__body {
 	height: 32px;
 }
 .pops-folder-list .pops-folder-list-file-icon {
-	line-height: 1;
+	line-height: normal;
+	align-content: center;
 	position: relative;
 	vertical-align: middle;
 }
@@ -265,7 +272,8 @@ table.pops-folder-list-table__body {
 .pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {
 	font-size: 12px;
 	color: #333;
-	line-height: 20px;
+	line-height: normal;
+	align-content: center;
 	font-weight: 700;
 	display: inline-block;
 	max-width: 140px;

package/src/components/iframe/config.ts

@@ -28,7 +28,7 @@ export const PopsIframeConfig = (): Required<PopsIframeDetails> => {
 		},
 		animation: "pops-anim-fadein-zoom",
 		position: "center",
-		drag: false,
+		drag: true,
 		dragLimit: true,
 		dragExtraDistance: 3,
 		dragMoveCallBack() {},

package/src/components/iframe/index.css

@@ -1,5 +1,6 @@
 .pops[type-value="iframe"] {
 	--container-title-height: 55px;
+	transition: width 0.35s ease, height 0.35s ease;
 }
 .pops[type-value] .pops-iframe-title {
 	display: flex;
@@ -19,19 +20,21 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-weight: 500;
-	line-height: var(--container-title-height);
-}
-.pops[type-value="iframe"] .pops-iframe-content p[pops] {
-	padding: 5px 10px;
-	color: #333;
-	text-indent: 15px;
+	line-height: normal;
+	align-content: center;
 }
 .pops[type-value="iframe"] .pops-iframe-content {
 	width: 100%;
-	height: calc(100% - var(--container-title-height));
+	/*height: calc(100% - var(--container-title-height));*/
+	flex: 1;
 	overflow: hidden;
 	word-break: break-word;
 }
+.pops[type-value="iframe"] .pops-iframe-content p[pops] {
+	padding: 5px 10px;
+	color: #333;
+	text-indent: 15px;
+}
 .pops-loading {
 	position: absolute;
 	top: 40px;
@@ -56,22 +59,30 @@
 	animation: pops-anim-wait-rotate 1.2s linear infinite;
 }
 .pops[type-value="iframe"].pops[type-module="min"] {
-	top: unset !important;
 	bottom: 0;
 	max-width: 200px;
 	max-height: 53px;
-	transform: none;
+	position: unset;
 }
 .pops[type-value="iframe"].pops[type-module="min"]
 	.pops-header-control[type="min"] {
 	display: none;
 }
-.pops[type-value="iframe"].pops[type-module="max"] {
+.pops[type-value="iframe"].pops-iframe-unset-top {
 	top: unset !important;
+}
+.pops[type-value="iframe"].pops-iframe-unset-left {
 	left: unset !important;
+}
+.pops[type-value="iframe"].pops-iframe-unset-transform {
+	transform: none !important;
+}
+.pops[type-value="iframe"].pops-iframe-unset-transition {
+	transition: none !important;
+}
+.pops[type-value="iframe"].pops[type-module="max"] {
 	width: 100% !important;
 	height: 100% !important;
-	transform: none;
 }
 .pops[type-value="iframe"] iframe[pops] {
 	width: calc(100% - 4px);
@@ -88,3 +99,7 @@
 	background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));
 	animation: iframeLoadingChange 2s forwards;
 }
+
+.pops-anim:has(.pops[type-value="iframe"].pops[type-module="min"]) {
+	position: unset;
+}

package/src/components/iframe/index.ts

@@ -1,3 +1,4 @@
+import { PopsCore } from "../../Core";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
@@ -20,7 +21,6 @@ export class PopsIframe {
 			pops.config.cssText.common,
 			pops.config.cssText.iframeCSS,
 		]);
-
 		let config: Required<PopsIframeDetails> = PopsIframeConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
@@ -98,6 +98,16 @@ export class PopsIframe {
 			headerMaxBtnElement,
 			headerMiseBtnElement,
 		} = PopsHandler.handleQueryElement($anim, PopsType);
+		let $iframeContainer = PopsCore.document.querySelector<HTMLDivElement>(
+			".pops-iframe-container"
+		);
+		if (!$iframeContainer) {
+			$iframeContainer = PopsCore.document.createElement("div");
+			$iframeContainer.className = "pops-iframe-container";
+			$iframeContainer.style.cssText =
+				"display: flex;position: fixed;bottom: 0px;flex-flow: wrap-reverse;user-select: none;-webkit-user-select: none;-ms-user-select: none;-moz-user-select: none;";
+			popsDOMUtils.appendBody($iframeContainer);
+		}
 		/**
 		 * 遮罩层元素
 		 */
@@ -145,9 +155,7 @@ export class PopsIframe {
 		popsDOMUtils.on($iframe, "load", () => {
 			/* iframe加载中... */
 			loadingElement?.remove();
-
 			$contentLoading!.style.animation = "iframeLoadingChange_85 0.3s forwards";
-
 			popsDOMUtils.on(
 				$contentLoading,
 				popsDOMUtils.getAnimationEndNameList(),
@@ -159,12 +167,11 @@ export class PopsIframe {
 
 			if (config.title!.text!.trim() === "" && $iframe!.contentDocument) {
 				/* 同域名下的才可以获取网页标题 */
-
 				$title!.querySelector<HTMLElement>("p")!.innerText =
 					$iframe!.contentDocument.title;
 			}
 
-			config.loadEndCallBack(eventDetails as any);
+			config.loadEndCallBack(eventDetails);
 		});
 		/* 创建到页面中 */
 
@@ -173,7 +180,7 @@ export class PopsIframe {
 			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
 		}
 
-		popsDOMUtils.appendBody($shadowContainer);
+		$iframeContainer.appendChild($shadowContainer);
 		if ($mask != null) {
 			$anim.after($mask);
 		}
@@ -187,46 +194,33 @@ export class PopsIframe {
 				endCallBack: config.dragEndCallBack,
 			});
 		}
-		let normalLeft = "";
+		const TYPE_MODULE = "type-module";
 		/* 最小化按钮点击事件 */
-
+		let origin_left = "";
+		let origin_top = "";
+		let origin_is_max = false;
 		popsDOMUtils.on<PointerEvent | MouseEvent>(
 			headerMinBtnElement,
 			"click",
 			(event) => {
-				/**
-				 * 所有最小化的iframe数组
-				 */
-				let allMinElementList: HTMLElement[] = [];
-
-				pops.config.layer.iframe.forEach((item) => {
-					if (
-						item.animElement != $anim &&
-						item.popsElement.getAttribute("type-module") === "min"
-					) {
-						allMinElementList.push(item.popsElement);
-					}
-				});
-				let maxLeftValue = allMinElementList.length
-					? allMinElementList.length * 205
-					: 0;
-
-				$pops!.style.transitionDuration = "";
-
-				normalLeft = $pops!.style.left;
-
-				$pops!.style.left = maxLeftValue + "px";
-
-				$pops!.setAttribute("type-module", "min");
-
-				$anim!
-					.querySelector<HTMLDivElement>(".pops-header-controls")
-					?.setAttribute("type", "max");
-
-				config.btn.min.callback(eventDetails, event);
-			},
-			{
-				capture: true,
+				event.preventDefault();
+				event.stopPropagation();
+				origin_left = $pops.style.left;
+				origin_top = $pops.style.top;
+				$pops.classList.add("pops-iframe-unset-top");
+				$pops.classList.add("pops-iframe-unset-left");
+				$pops.classList.add("pops-iframe-unset-transform");
+				$pops.style.transitionDuration = "";
+
+				$pops.setAttribute(TYPE_MODULE, "min");
+				headerControlsElement.setAttribute("type", "min");
+				// 隐藏放大图标
+				headerMaxBtnElement.style.setProperty("display", "none");
+				// 显示复位图标
+				headerMiseBtnElement.style.setProperty("display", "");
+				if (typeof config?.btn?.min?.callback === "function") {
+					config.btn.min.callback(eventDetails, event);
+				}
 			}
 		);
 		/* 最大化按钮点击事件 */
@@ -234,75 +228,69 @@ export class PopsIframe {
 			headerMaxBtnElement,
 			"click",
 			(event) => {
-				$pops!.style.transitionDuration = "";
-
-				normalLeft = $pops!.style.left;
-
-				$pops!.removeAttribute("type-module");
-
-				$pops!.setAttribute("type-module", "max");
-
-				headerControlsElement!.setAttribute("type", "max");
-
-				headerMaxBtnElement!.style.setProperty("display", "none");
-
-				headerMiseBtnElement!.style.setProperty("display", "");
-
-				config.btn.max.callback(eventDetails, event);
-			},
-			{
-				capture: true,
+				event.preventDefault();
+				event.stopPropagation();
+				if ($pops.getAttribute(TYPE_MODULE) !== "min") {
+					origin_left = $pops.style.left;
+					origin_top = $pops.style.top;
+				}
+				origin_is_max = true;
+				$pops.style.transitionDuration = "";
+				$pops.style.transform = "";
+				$pops.removeAttribute(TYPE_MODULE);
+				$pops.classList.add("pops-iframe-unset-transition");
+				$pops.classList.add("pops-iframe-unset-left");
+				$pops.classList.add("pops-iframe-unset-top");
+				$pops.classList.add("pops-iframe-unset-transform");
+				$pops.classList.remove("pops-iframe-unset-transition");
+				$pops.setAttribute(TYPE_MODULE, "max");
+				headerControlsElement.setAttribute("type", "max");
+				// 隐藏放大图标
+				headerMaxBtnElement.style.setProperty("display", "none");
+				// 显示复位图标
+				headerMiseBtnElement.style.setProperty("display", "");
+				if (typeof config?.btn?.max?.callback === "function") {
+					config.btn.max.callback(eventDetails, event);
+				}
 			}
 		);
 		/* 先隐藏窗口化按钮 */
 		headerMiseBtnElement?.style?.setProperty("display", "none");
-		/* 窗口化按钮点击事件 */
+		/* 复位按钮点击事件 */
 		popsDOMUtils.on<MouseEvent | PointerEvent>(
 			headerMiseBtnElement,
 			"click",
 			(event) => {
-				$pops!.style.transitionDuration = "";
-
-				$pops!.style.left = normalLeft;
-
-				headerControlsElement!.removeAttribute("type");
-
-				$pops!.removeAttribute("type-module");
-				/**
-				 * 所有最小化的iframe数组
-				 */
-				let allMinElementList: HTMLElement[] = [];
-				pops.config.layer.iframe.forEach((item) => {
-					if (
-						item.animElement != $anim &&
-						$pops!.getAttribute("type-module") === "min"
-					) {
-						allMinElementList.push(item.popsElement);
-					}
-				});
-				allMinElementList.sort(
-					PopsInstanceUtils.sortElementListByProperty<HTMLElement, number>(
-						(obj) => {
-							return parseInt(getComputedStyle(obj).left);
-						},
-						(obj) => {
-							return parseInt(getComputedStyle(obj).left);
-						},
-						false
-					)
-				);
-				allMinElementList.forEach((item, index) => {
-					item.style.left = index * 205 + "px";
-				});
-
-				headerMiseBtnElement!.style.setProperty("display", "none");
-
-				headerMaxBtnElement!.style.setProperty("display", "");
-
-				config.btn.mise.callback(eventDetails, event);
-			},
-			{
-				capture: true,
+				event.preventDefault();
+				event.stopPropagation();
+				if (origin_is_max && $pops.getAttribute(TYPE_MODULE) === "min") {
+					$pops.classList.add("pops-iframe-unset-transition");
+					$pops.classList.add("pops-iframe-unset-left");
+					$pops.classList.add("pops-iframe-unset-top");
+					$pops.classList.add("pops-iframe-unset-transform");
+					$pops.classList.remove("pops-iframe-unset-transition");
+					$pops.setAttribute(TYPE_MODULE, "max");
+					headerControlsElement.setAttribute("type", "max");
+				} else {
+					origin_is_max = false;
+					$pops.style.left = origin_left;
+					$pops.style.top = origin_top;
+					$pops.style.transitionDuration = "";
+					$pops.style.transform = "";
+					headerControlsElement.removeAttribute("type");
+					$pops.removeAttribute(TYPE_MODULE);
+					$pops.classList.remove("pops-iframe-unset-top");
+					$pops.classList.remove("pops-iframe-unset-left");
+					$pops.classList.remove("pops-iframe-unset-transform");
+
+					// 显示放大图标
+					headerMaxBtnElement.style.setProperty("display", "");
+					// 隐藏复位图标
+					headerMiseBtnElement.style.setProperty("display", "none");
+				}
+				if (typeof config?.btn?.mise?.callback === "function") {
+					config.btn.mise.callback(eventDetails, event);
+				}
 			}
 		);
 		/* 关闭按钮点击事件 */
@@ -315,38 +303,9 @@ export class PopsIframe {
 					guid,
 					false
 				);
-				setTimeout(() => {
-					let allIsMinElementList: HTMLElement[] = [];
-					pops.config.layer.iframe.forEach((item) => {
-						if (
-							item.animElement != $anim &&
-							$pops!.getAttribute("type-module") === "min"
-						) {
-							allIsMinElementList.push(item.popsElement);
-						}
-					});
-
-					allIsMinElementList.sort(
-						PopsInstanceUtils.sortElementListByProperty(
-							(obj) => {
-								return parseInt(getComputedStyle(obj).left);
-							},
-							(obj) => {
-								return parseInt(getComputedStyle(obj).left);
-							},
-							false
-						)
-					);
-
-					allIsMinElementList.forEach((item, index) => {
-						item.style.left = index * 205 + "px";
-					});
-				}, 1000 * 0.3);
-
-				config.btn.close.callback(eventDetails, event);
-			},
-			{
-				capture: true,
+				if (typeof config?.btn?.close?.callback === "function") {
+					config.btn.close.callback(eventDetails, event);
+				}
 			}
 		);
 

package/src/components/loading/index.css

@@ -48,7 +48,8 @@
 	overflow: hidden;
 	width: auto;
 	font-size: inherit;
-	line-height: 2em;
+	line-height: normal;
+	align-content: center;
 }
 .pops[type-value="loading"] .pops-loading-content p[pops] {
 	display: inline-block;