@whitesev/pops 2.1.5 → 2.1.7

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

@@ -21070,7 +21070,20 @@ declare class Pops {
     };
     /**
      * 搜索建议
+     *
+     * 注意：调用后需要主动调用.init()和.setAllEvent()进行初始化
      * @param details 配置
+     * @example
+     * let $input = document.querySelector("#input");
+     * let searchSuggestion = pops.searchSuggestion({
+     *     target: $input,
+     *     inputTarget: $input,
+     *     getItemHTML: function (item) {
+     *         return item.value;
+     *     }
+     * });
+     * searchSuggestion.init();
+     * searchSuggestion.setAllEvent();
      */
     searchSuggestion: <T = any>(details: PopsSearchSuggestionDetails<T>) => {
         selfDocument: ShadowRoot | Document | (ShadowRoot | Document)[];

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

@@ -16,7 +16,8 @@ export type PopsButtonStyleType =
 	| "success"
 	| "info"
 	| "warning"
-	| "danger";
+	| "danger"
+	| "violet";
 
 /**
  * 按钮大小
@@ -118,48 +119,16 @@ export interface PopsButtonDetails<T = {}> {
 /**
  * 按钮配置（匹配任意类型）
  */
-export interface PopsButtonDetailsAnyType<T = {}> {
-	/**
-	 * 是否启用按钮
-	 */
-	enable: boolean;
-	/**
-	 * 图标按钮，如果名字为内置的，则使用内置的，否则为自定义的svg
-	 */
-	icon: PopsIconType;
-	/**
-	 * 图标按钮是否放在右边
-	 */
-	rightIcon: boolean;
-	/**
-	 * 图标按钮是否是旋转360°
-	 * @default false
-	 */
-	iconIsLoading: boolean;
-	/**
-	 * 按钮尺寸大小
-	 * @default ""
-	 */
-	size: PopsButtonSize;
+export type PopsButtonDetailsAnyType<T = {}> = Omit<
+	PopsButtonDetails<T>,
+	"type"
+> & {
 	/**
 	 * 按钮样式类型
+	 * @default "default"
 	 */
 	type: string;
-	/**
-	 * 按钮文字
-	 * @default ""
-	 */
-	text: string;
-	/**
-	 * 按钮点击的回调
-	 *
-	 * 如果传入该值，那么将不会自动关闭弹窗
-	 */
-	callback(
-		eventDetails: PopsHandlerEventDetails & T,
-		event: PointerEvent | MouseEvent
-	): void;
-}
+};
 
 /** prompt的点击回调 */
 export interface PopsPromptButtonDetails extends PopsButtonDetails {

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/pops",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "type": "module",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",
@@ -42,7 +42,8 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-typescript": "12.1.4",
+    "rollup": "^4.44.2",
     "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.1",
+		version: "2025.7.7",
 		cssText: PopsCSS,
 		/** icon图标的svg代码 */
 		iconSVG: PopsIcon.$data,
@@ -183,7 +183,20 @@ class Pops {
 
 	/**
 	 * 搜索建议
+	 *
+	 * 注意：调用后需要主动调用.init()和.setAllEvent()进行初始化
 	 * @param details 配置
+	 * @example
+	 * let $input = document.querySelector("#input");
+	 * let searchSuggestion = pops.searchSuggestion({
+	 *     target: $input,
+	 *     inputTarget: $input,
+	 *     getItemHTML: function (item) {
+	 *         return item.value;
+	 *     }
+	 * });
+	 * searchSuggestion.init();
+	 * searchSuggestion.setAllEvent();
 	 */
 	searchSuggestion = <T = any>(details: PopsSearchSuggestionDetails<T>) => {
 		let popsSearchSuggestion = PopsSearchSuggestion.init(details);

package/src/components/alert/index.css

@@ -1,47 +0,0 @@
-.pops[type-value] .pops-alert-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.pops[type-value="alert"] .pops-alert-title {
-	width: 100%;
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="alert"] .pops-alert-title p[pops] {
-	width: 100%;
-	overflow: hidden;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-weight: 500;
-	line-height: normal;
-}
-.pops[type-value="alert"] .pops-alert-content {
-	width: 100%;
-	/*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;*/
-	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;
-	align-items: center;
-}

package/src/components/alert/index.ts

@@ -48,14 +48,14 @@ export const PopsAlert = {
 			PopsType,
 			config,
 			/*html*/ `
-			<div class="pops-alert-title" style="text-align: ${
+			<div class="pops-title pops-${PopsType}-title" style="text-align: ${
 				config.title.position
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
 					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-			<div class="pops-alert-content" style="${contentStyle}">${
+			<div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
 					: `<p pops style="${contentPStyle}">${config.content.text}</p>`

package/src/components/confirm/index.css

@@ -1,47 +0,0 @@
-.pops[type-value] .pops-confirm-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.pops[type-value="confirm"] .pops-confirm-title {
-	width: 100%;
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="confirm"] .pops-confirm-title p[pops] {
-	width: 100%;
-	overflow: hidden;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-weight: 500;
-	line-height: normal;
-}
-.pops[type-value="confirm"] .pops-confirm-content {
-	width: 100%;
-	/*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;*/
-	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;
-	align-items: center;
-}

package/src/components/confirm/index.ts

@@ -48,14 +48,14 @@ export const PopsConfirm = {
 			PopsType,
 			config,
 			/*html*/ `
-            <div class="pops-confirm-title" style="text-align: ${
-							config.title.position
-						};${headerStyle}">${
+            <div class="pops-title pops-${PopsType}-title" style="text-align: ${
+				config.title.position
+			};${headerStyle}">${
 				config.title.html
 					? config.title.text
 					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-                        <div class="pops-confirm-content" style="${contentStyle}">${
+                        <div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
 					: `<p pops style="${contentPStyle}">${config.content.text}</p>`

package/src/components/drawer/index.css

@@ -8,24 +8,7 @@
 	overflow: hidden;
 	transition: all 0.3s;
 }
-.pops[type-value] .pops-drawer-title {
-	display: flex;
-	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;
-	overflow: auto;
-}
-.pops[type-value="drawer"] .pops-drawer-btn {
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
 .pops[type-value="drawer"][direction="top"] {
 	width: 100%;
 	left: 0;

package/src/components/drawer/index.ts

@@ -49,15 +49,14 @@ export const PopsDrawer = {
 			/*html*/ `
             ${
 							config.title.enable
-								? /*html*/ `
-            <div class="pops-${PopsType}-title" style="${headerStyle}">${
+								? /*html*/ `<div class="pops-title pops-${PopsType}-title" style="${headerStyle}">${
 										config.title.html
 											? config.title.text
 											: /*html*/ `<p pops style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`
 								  }${headerBtnHTML}</div>`
 								: ""
 						}
-            <div class="pops-${PopsType}-content" style="${contentStyle}">${
+            <div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
 					: `<p pops style="${contentPStyle}">${config.content.text}</p>`

package/src/components/folder/config.ts

@@ -27,16 +27,30 @@ export const PopsFolderConfig = (): DeepRequired<PopsFolderDetails> => {
 				clickEvent() {
 					return [
 						{
-							fileName: "内部-测试文件.zip",
-							fileSize: 1025000,
-							fileType: "zip",
-							createTime: 1702038410440,
-							latestTime: 1702039602126,
-							isFolder: false,
-							index: 1,
+							fileName: "测试文件夹2222",
+							fileSize: 0,
+							fileType: "",
+							createTime: 0,
+							latestTime: 0,
+							isFolder: true,
+							index: 0,
+							// @ts-ignore
 							clickEvent() {
-								console.log("下载文件：", this.fileName);
-								return "https://update.greasyfork.org/scripts/456485/pops.js";
+								return [
+									{
+										fileName: "内部-测试文件.zip",
+										fileSize: 1025000,
+										fileType: "zip",
+										createTime: 1702038410440,
+										latestTime: 1702039602126,
+										isFolder: false,
+										index: 1,
+										clickEvent() {
+											console.log("下载文件：", this.fileName);
+											return "https://update.greasyfork.org/scripts/456485/pops.js";
+										},
+									},
+								];
 							},
 						},
 					];

package/src/components/folder/index.css

@@ -1,49 +1,21 @@
-.pops[type-value] .pops-folder-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.pops[type-value="folder"] .pops-folder-title {
-	width: 100%;
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="folder"] .pops-folder-title p[pops] {
-	width: 100%;
-	overflow: hidden;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-weight: 500;
-	line-height: normal;
-}
-.pops[type-value="folder"] .pops-folder-content p[pops] {
-	padding: 5px 10px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-}
-.pops[type-value="folder"] .pops-folder-content {
-	width: 100%;
-	/*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;*/
-	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;
-	align-items: center;
+.pops-folder-list {
+	--folder-arrow-fill-color: #d4d7de;
+	--folder-arrow-active-fill-color: #06a7ff;
+	--header-breadcrumb-text-color: #06a7ff;
+	--header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);
+	--header-breadcrumb-all-files-first-text-color: var(
+		--header-breadcrumb-text-color
+	);
+	--header-breadcrumb-all-files-last-text-color: #999999;
+	--table-header-row-text-color: #818999;
+	--table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));
+	--table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));
+	--table-body-row-text-color: #05082c;
+	--table-body-row-file-name-text-color: #05082c;
+	--table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));
+	--table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));
+	--table-body-row-file-name-hover-text-color: #06a7ff;
+	--table-body-row-content-text-color: #818999;
 }
 .pops-folder-list .cursor-p {
 	cursor: pointer;
@@ -52,7 +24,7 @@
 	background: 0 0;
 	text-decoration: none;
 	-webkit-tap-highlight-color: transparent;
-	color: #05082c;
+	color: var(--header-breadcrumb-text-color);
 }
 table.pops-folder-list-table__body,
 table.pops-folder-list-table__header {
@@ -88,11 +60,9 @@ table.pops-folder-list-table__body {
 	height: 50px;
 	line-height: normal;
 	align-content: center;
-	color: rgb(129, 137, 153);
+	color: var(--table-header-row-text-color);
 	text-align: left;
 	font-size: 12px;
-}
-.pops-folder-list-table__header-row {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -102,19 +72,22 @@ table.pops-folder-list-table__body {
 	height: 50px;
 	line-height: normal;
 	align-content: center;
-	color: #03081a;
+	color: var(--table-body-row-text-color);
 	font-size: 12px;
 }
 .pops-folder-list-table__body-row:hover {
-	background: rgb(245, 246, 247, var(--pops-bg-opacity));
+	background-color: var(--table-body-row-hover-bg-color);
+	border-color: var(--table-body-row-hover-bd-color);
+	border: 0;
+	outline: none;
 }
 .pops-folder-list table th {
 	border: 0;
-	border-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));
+	border-bottom: 1px solid var(--table-body-th-text-color);
 }
 .pops-folder-list table td {
 	border: 0;
-	border-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));
+	border-bottom: 1px solid var(--table-body-td-text-color);
 	position: relative;
 }
 .pops-folder-list .list-name-text {
@@ -187,9 +160,12 @@ table.pops-folder-list-table__body {
 	display: none;
 }
 
-.pops-folder-list-file-name-title-text:hover {
+.pops-folder-list .pops-folder-list-file-name-title-text {
+	color: var(--table-body-row-file-name-text-color);
+}
+.pops-folder-list .pops-folder-list-file-name-title-text:hover {
 	text-decoration: none;
-	color: rgb(6, 167, 255);
+	color: var(--table-body-row-file-name-hover-text-color);
 }
 .pops-folder-list .text-ellip {
 	overflow: hidden;
@@ -197,7 +173,7 @@ table.pops-folder-list-table__body {
 	text-overflow: ellipsis;
 }
 .pops-folder-list .content {
-	color: rgb(129, 137, 153);
+	color: var(--table-body-row-content-text-color);
 	position: relative;
 	width: 100%;
 	text-align: left;
@@ -251,10 +227,10 @@ table.pops-folder-list-table__body {
 .pops-folder-list .pops-folder-icon-arrow {
 	width: 10px;
 	height: 10px;
-	fill: rgb(212, 215, 222);
+	fill: var(--folder-arrow-fill-color);
 }
 .pops-folder-list .pops-folder-icon-active {
-	fill: rgb(6, 167, 255);
+	fill: var(--folder-arrow-active-fill-color);
 }
 .pops-folder-list .pops-folder-file-list-breadcrumb {
 	padding: 4px 20px;
@@ -281,7 +257,7 @@ table.pops-folder-list-table__body {
 }
 .pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {
 	font-size: 12px;
-	color: #333;
+	color: var(--header-breadcrumb-all-files-text-color);
 	line-height: normal;
 	align-content: center;
 	font-weight: 700;
@@ -293,11 +269,11 @@ table.pops-folder-list-table__body {
 	word-wrap: normal;
 }
 .pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {
-	color: rgb(153, 153, 153);
+	color: var(--header-breadcrumb-all-files-last-text-color);
 }
 .pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {
 	font-size: 14px;
-	color: rgb(18, 22, 26);
+	color: var(--header-breadcrumb-all-files-first-text-color);
 }
 .pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {
 	width: 16px;
@@ -307,3 +283,32 @@ table.pops-folder-list-table__body {
 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)
 		55% 50%/6px 9px no-repeat;
 }
+
+@media (prefers-color-scheme: dark) {
+	.pops[type-value="folder"] {
+		--pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));
+		--pops-bottom-btn-controls-border-color: rgb(
+			73,
+			83,
+			102,
+			var(--pops-bg-opacity)
+		);
+	}
+	.pops-folder-list {
+		--header-breadcrumb-text-color: #06a7ff;
+		--header-breadcrumb-all-files-text-color: var(
+			--header-breadcrumb-text-color
+		);
+		--header-breadcrumb-all-files-first-text-color: var(
+			--header-breadcrumb-text-color
+		);
+		--header-breadcrumb-all-files-last-text-color: #818999;
+		--table-body-row-text-color: #f7f8fa;
+		--table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));
+		--table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));
+		--table-body-td-text-color: #495366;
+		--table-body-row-hover-bd-color: #1f2022;
+		--table-body-row-hover-bg-color: #1f2022;
+		--table-body-row-file-name-text-color: #f7f8fa;
+	}
+}

package/src/components/folder/index.ts

@@ -122,14 +122,14 @@ export const PopsFolder = {
 			PopsType,
 			config,
 			/*html*/ `
-            <div class="pops-folder-title" style="text-align: ${
-							config.title.position
-						};${headerStyle}">${
+            <div class="pops-title pops-${PopsType}-title" style="text-align: ${
+				config.title.position
+			};${headerStyle}">${
 				config.title.html
 					? config.title.text
 					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-			<div class="pops-folder-content ${
+			<div class="pops-content pops-${PopsType}-content ${
 				popsUtils.isPhone() ? "pops-mobile-folder-content" : ""
 			}">
                 <div class="pops-folder-list">

package/src/components/iframe/index.css

@@ -2,38 +2,8 @@
 	--container-title-height: 55px;
 	transition: width 0.35s ease, height 0.35s ease;
 }
-.pops[type-value] .pops-iframe-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.pops[type-value="iframe"] .pops-iframe-title {
-	width: calc(100% - 0px);
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="iframe"] .pops-iframe-title p[pops] {
-	width: 100%;
-	overflow: hidden;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-weight: 500;
-	line-height: normal;
-	align-content: center;
-}
-.pops[type-value="iframe"] .pops-iframe-content {
-	width: 100%;
-	/*height: calc(100% - var(--container-title-height));*/
-	flex: 1;
+.pops[type-value="iframe"] .pops-content {
 	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;
@@ -85,8 +55,8 @@
 	height: 100% !important;
 }
 .pops[type-value="iframe"] iframe[pops] {
-	width: calc(100% - 4px);
-	height: calc(100% - 4px);
+	width: 100%;
+	height: 100%;
 	border: 0;
 }
 .pops-iframe-content-global-loading {

package/src/components/iframe/index.ts

@@ -58,15 +58,15 @@ export const PopsIframe = {
 			PopsType,
 			config,
 			/*html*/ `
-            <div class="pops-iframe-title" style="text-align: ${
-							config.title.position
-						};${headerStyle}">${
+            <div class="pops-title pops-${PopsType}-title" style="text-align: ${
+				config.title.position
+			};${headerStyle}">${
 				config.title.html
 					? titleText
 					: `<p pops style="${headerPStyle}">${titleText}</p>`
 			}${headerBtnHTML}</div>
-			<div class="pops-iframe-content">
-                <div class="pops-iframe-content-global-loading"></div>
+			<div class="pops-content pops-${PopsType}-content">
+                <div class="pops-${PopsType}-content-global-loading"></div>
                 <iframe src="${config.url}" pops ${
 				config.sandbox
 					? "sandbox='allow-forms allow-same-origin allow-scripts'"