@whitesev/pops 1.7.4 → 1.7.6

package/src/components/panel/index.css

@@ -23,26 +23,28 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-weight: 500;
-	line-height: var(--container-title-height);
+	line-height: normal;
+	align-content: center;
 }
 .pops[type-value="panel"] .pops-panel-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="panel"] .pops-panel-btn {
-	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-content: center;
 	align-items: center;
 }
 
@@ -226,9 +228,14 @@ section.pops-panel-container
 	align-items: center;
 	position: relative;
 	font-size: 14px;
-	line-height: 20px;
+	line-height: normal;
+	align-content: center;
 	height: 32px;
 	vertical-align: middle;
+	user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
 }
 .pops-panel-switch input.pops-panel-switch__input {
 	position: absolute;
@@ -287,7 +294,8 @@ section.pops-panel-container
 section.pops-panel-container .pops-panel-slider:has(> input[type="range"]) {
 	overflow: hidden;
 	height: 25px;
-	line-height: 25px;
+	line-height: normal;
+	align-content: center;
 	display: flex;
 	align-items: center;
 }
@@ -360,6 +368,10 @@ section.pops-panel-container
 	height: 32px;
 	display: flex;
 	align-items: center;
+	user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
 }
 
 .pops-slider-width {
@@ -575,7 +587,8 @@ section.pops-panel-container
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
-	line-height: 1;
+	line-height: normal;
+	align-content: center;
 	height: 32px;
 	white-space: nowrap;
 	cursor: text;
@@ -622,7 +635,8 @@ section.pops-panel-container
 }
 .pops-panel-input .pops-panel-icon {
 	height: inherit;
-	line-height: inherit;
+	line-height: normal;
+	align-content: center;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -694,7 +708,8 @@ section.pops-panel-container
 /* select的CSS */
 .pops-panel-select select {
 	height: 32px;
-	line-height: 32px;
+	line-height: normal;
+	align-content: center;
 	min-width: 200px;
 	border: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));
 	border-radius: 5px;
@@ -751,7 +766,8 @@ section.pops-panel-container
 	padding: 4px 12px;
 	gap: 6px;
 	min-height: 32px;
-	line-height: 24px;
+	line-height: normal;
+	align-content: center;
 	border-radius: var(--el-border-radius-base);
 	background-color: var(--el-fill-color-blank);
 	transition: var(--el-transition-duration);
@@ -815,7 +831,8 @@ section.pops-panel-container
 	--color: inherit;
 	height: 1em;
 	width: 1em;
-	line-height: 1em;
+	line-height: normal;
+	align-content: center;
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -851,7 +868,8 @@ section.pops-panel-container
 	height: 24px;
 	padding: 0 9px;
 	font-size: var(--el-tag-font-size);
-	line-height: 1;
+	line-height: normal;
+	align-content: center;
 	border-width: 1px;
 	border-style: solid;
 	border-radius: var(--el-tag-border-radius);
@@ -901,6 +919,7 @@ section.pops-panel-container
 .pops-panel-select-multiple .el-select__tags-text {
 	display: block;
 	line-height: normal;
+	align-content: center;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;

package/src/components/prompt/index.css

@@ -16,31 +16,33 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-weight: 500;
-	line-height: var(--container-title-height);
-}
-.pops[type-value="prompt"] .pops-prompt-content p[pops] {
-	padding: 5px 10px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
+	line-height: normal;
+	align-content: center;
 }
 .pops[type-value="prompt"] .pops-prompt-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="prompt"] .pops-prompt-content p[pops] {
+	padding: 5px 10px;
+	color: rgb(51, 51, 51);
+	text-indent: 15px;
+}
 .pops[type-value="prompt"] .pops-prompt-btn {
-	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;
+	align-content: center;
 	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[type-value="prompt"] input[pops] {

package/src/components/rightClickMenu/index.css

@@ -30,7 +30,8 @@
 i.pops-rightClickMenu-icon {
 	height: 1em;
 	width: 1em;
-	line-height: 1em;
+	line-height: normal;
+	align-content: center;
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;

package/src/css/button.css

@@ -45,7 +45,7 @@
 	display: flex;
 	align-items: center;
 	height: var(--button-height);
-	line-height: 1;
+	line-height: normal;
 	box-sizing: border-box;
 	user-select: none;
 	-webkit-user-select: none;

package/src/css/common.css

@@ -20,5 +20,19 @@
 	border: 0;
 }
 .pops-no-border-important {
-	border: 0;
+	border: 0 !important;
+}
+.pops-user-select-none {
+	user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
+}
+.pops-line-height-center {
+	line-height: normal;
+	align-content: center;
+}
+.pops-width-fill {
+	width: -webkit-fill-available;
+	width: -moz-available;
 }

package/src/css/index.css

@@ -25,6 +25,8 @@
 	box-sizing: border-box;
 	overflow: hidden;
 	transition: all 0.35s;
+	display: flex;
+	flex-direction: column;
 }
 .pops-anim {
 	position: fixed;
@@ -51,7 +53,7 @@
 .pops i.pops-bottom-icon {
 	height: 1em;
 	width: 1em;
-	line-height: 1em;
+	line-height: normal;
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -90,9 +92,6 @@
 .pops-header-controls button.pops-header-control[type="max"],
 .pops-header-controls button.pops-header-control[type="mise"],
 .pops-header-controls button.pops-header-control[type="min"] {
-	position: relative;
-	float: right;
-	margin: 0 2px;
 	outline: 0 !important;
 	border: 0;
 	border-color: rgb(136, 136, 136, var(--pops-bd-opacity));
@@ -122,16 +121,19 @@ button.pops-header-control {
 	background: 0 0;
 	cursor: pointer;
 	position: unset;
-	line-height: 1.15;
+	line-height: normal;
 }
 button.pops-header-control i:hover {
 	color: rgb(64, 158, 255);
 }
 .pops-header-controls[data-margin] button.pops-header-control {
 	margin: 0 6px;
+	display: flex;
+    align-items: center;
 }
 .pops[type-value] .pops-header-controls {
 	display: flex;
+	gap: 6px;
 }
 
 /* 标题禁止选中文字 */

package/src/utils/PopsInstanceUtils.ts

@@ -489,6 +489,7 @@ export const PopsInstanceUtils = {
 		options: {
 			dragElement: HTMLElement;
 			limit: boolean;
+			triggerClick?: boolean;
 			extraDistance: number;
 			container?: Window | typeof globalThis | HTMLElement;
 			moveCallBack?: (
@@ -509,6 +510,7 @@ export const PopsInstanceUtils = {
 				limit: true,
 				extraDistance: 3,
 				container: PopsCore.globalThis,
+				triggerClick: true,
 			},
 			options
 		);
@@ -712,17 +714,19 @@ export const PopsInstanceUtils = {
 				}
 			}
 		});
-		/* 因为会覆盖上面的点击事件，主动触发一下 */
-		anyTouchElement.on(["tap"], function (event) {
-			event.changedPoints.forEach((item) => {
-				popsDOMUtils.trigger(
-					item.target! as HTMLElement,
-					"click",
-					void 0,
-					true
-				);
+		if (options.triggerClick) {
+			/* 因为会覆盖上面的点击事件，主动触发一下 */
+			anyTouchElement.on(["tap"], function (event) {
+				event.changedPoints.forEach((item) => {
+					popsDOMUtils.trigger(
+						item.target! as HTMLElement,
+						"click",
+						void 0,
+						true
+					);
+				});
 			});
-		});
+		}
 	},
 	/**
 	 * 排序数组