@whitesev/pops 1.5.2 → 1.5.4

package/dist/types/src/components/rightClickMenu/indexType.d.ts

@@ -62,7 +62,7 @@ export interface PopsRightClickMenuDetails {
     /**
      * 弹窗的显示层级，默认10000
      */
-    zIndex?: number;
+    zIndex?: number | (() => number);
     /**
      * 是否阻止默认contextmenu事件
      */

package/dist/types/src/components/searchSuggestion/indexType.d.ts

@@ -71,7 +71,7 @@ export interface PopsSearchSuggestionDetails<T = any> {
     /**
      * 层级，默认10000
      */
-    zIndex?: 10000;
+    zIndex?: number | (() => number);
     /**
      * 搜索中的提示
      */

package/dist/types/src/components/tooltip/indexType.d.ts

@@ -39,7 +39,7 @@ export interface PopsToolTipDetails {
     /**
      * z-index，默认10000
      */
-    zIndex?: number;
+    zIndex?: number | (() => number);
     /**
      * 是否唯一，默认false
      */

package/dist/types/src/handler/PopsElementHandler.d.ts

@@ -14,8 +14,9 @@ export declare const PopsElementHandler: {
      * @param config
      * @param html
      * @param bottomBtnHTML
+     * @param zIndex
      */
-    getAnimHTML(guid: string, type: PopsTypeSupportAnim, config: PopsSupportAnim[keyof PopsSupportAnim], html?: string, bottomBtnHTML?: string): string;
+    getAnimHTML(guid: string, type: PopsTypeSupportAnim, config: PopsSupportAnim[keyof PopsSupportAnim], html: string | undefined, bottomBtnHTML: string | undefined, zIndex: number): string;
     /**
      * 获取顶部按钮层HTML
      * @param type

package/dist/types/src/handler/PopsHandler.d.ts

@@ -207,6 +207,11 @@ export declare const PopsHandler: {
         type: any;
         text: string;
     }, event: MouseEvent | PointerEvent) => void): void;
+    /**
+     * 把配置的z-index配置转为数字
+     * @param zIndex
+     */
+    handleZIndex(zIndex: number | (() => number)): number;
     /**
      * 处理config.only
      * @param type 当前弹窗类型

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

@@ -170,7 +170,7 @@ export interface PopsCommonConfig {
 	/**
 	 * z-index显示层级，默认10000
 	 */
-	zIndex?: number;
+	zIndex?: number | (() => number);
 	/**
 	 * 遮罩层
 	 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -45,6 +45,7 @@
     "typescript": "^5.4.5"
   },
   "scripts": {
-    "build": "rollup --config"
+    "build": "rollup --config",
+    "build:all": "rollup --config"
   }
 }

package/src/Pops.ts

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

package/src/components/alert/index.ts

@@ -83,7 +83,9 @@ export class PopsAlert {
 		const PopsType: PopsMode = "alert";
 		config = PopsHandler.handleOnly(PopsType, config);
 
-		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+		// 先把z-index提取出来
+		let zIndex = PopsHandler.handleZIndex(config.zIndex);
+		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
 		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
@@ -98,7 +100,7 @@ export class PopsAlert {
 			guid,
 			PopsType,
 			config,
-			`
+			/*html*/ `
 			<div 
 				class="pops-alert-title"
 				style="text-align: ${config.title.position};
@@ -118,7 +120,8 @@ export class PopsAlert {
 				}
 			</div>
 			${bottomBtnHTML}`,
-			bottomBtnHTML
+			bottomBtnHTML,
+			zIndex
 		);
 		/**
 		 * 弹窗的主元素，包括动画层

package/src/components/confirm/index.ts

@@ -117,7 +117,9 @@ export class PopsConfirm {
 
 		config = PopsHandler.handleOnly(PopsType, config);
 
-		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+		// 先把z-index提取出来
+		let zIndex = PopsHandler.handleZIndex(config.zIndex);
+		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
 
 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
 		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
@@ -133,7 +135,7 @@ export class PopsConfirm {
 			guid,
 			PopsType,
 			config,
-			`
+			/*html*/ `
             <div class="pops-confirm-title" style="text-align: ${
 							config.title.position
 						};${headerStyle}">
@@ -154,7 +156,8 @@ export class PopsConfirm {
                         </div>
                         ${bottomBtnHTML}
             `,
-			bottomBtnHTML
+			bottomBtnHTML,
+			zIndex
 		);
 		/**
 		 * 弹窗的主元素，包括动画层

package/src/components/drawer/index.ts

@@ -112,7 +112,9 @@ export class PopsDrawer {
 
 		config = PopsHandler.handleOnly(PopsType, config);
 
-		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+		// 先把z-index提取出来
+		let zIndex = PopsHandler.handleZIndex(config.zIndex);
+		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
 
 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
 		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
@@ -128,7 +130,7 @@ export class PopsDrawer {
 			guid,
 			PopsType,
 			config,
-			`
+			/*html*/ `
             ${
 							config.title.enable
 								? `
@@ -159,7 +161,8 @@ export class PopsDrawer {
 
             ${bottomBtnHTML}
             `,
-			bottomBtnHTML
+			bottomBtnHTML,
+			zIndex
 		);
 		/**
 		 * 弹窗的主元素，包括动画层

package/src/components/folder/index.ts

@@ -217,7 +217,10 @@ export class PopsFolder {
 
 		config = PopsHandler.handleOnly(PopsType, config);
 
-		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+		// 先把z-index提取出来
+		let zIndex = PopsHandler.handleZIndex(config.zIndex);
+		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
+
 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
 		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
 			PopsType,
@@ -348,7 +351,8 @@ export class PopsFolder {
             </div>
             ${bottomBtnHTML}
             `,
-			bottomBtnHTML
+			bottomBtnHTML,
+			zIndex
 		);
 		/**
 		 * 弹窗的主元素，包括动画层
@@ -448,11 +452,13 @@ export class PopsFolder {
 		 * @param fileName
 		 * @param latestTime
 		 * @param [fileSize="-"]
+		 * @param isFolder
 		 */
 		function createFolderRowElement(
 			fileName: string,
-			latestTime = "-",
-			fileSize = "-"
+			latestTime: string | number = "-",
+			fileSize: string | number = "-",
+			isFolder: boolean = false
 		) {
 			let origin_fileName = fileName;
 			let origin_latestTime = latestTime;
@@ -467,7 +473,7 @@ export class PopsFolder {
 			let fileFormatSize = popsDOMUtils.createElement("td");
 			let fileType = "";
 			let fileIcon = Folder_ICON.folder;
-			if (arguments.length === 1) {
+			if (isFolder) {
 				/* 文件夹 */
 				latestTime = "";
 				fileSize = "";
@@ -523,6 +529,7 @@ export class PopsFolder {
 				fileName: origin_fileName,
 				latestTime: origin_latestTime,
 				fileSize: origin_fileSize,
+				isFolder: isFolder,
 			};
 
 			(fileNameElement as any)["__value__"] = __value__;
@@ -547,8 +554,9 @@ export class PopsFolder {
 		 */
 		function createMobileFolderRowElement(
 			fileName: string,
-			latestTime = "-",
-			fileSize = "-"
+			latestTime: number | string = "-",
+			fileSize: number | string = "-",
+			isFolder: boolean = false
 		) {
 			let origin_fileName = fileName;
 			let origin_latestTime = latestTime;
@@ -559,7 +567,7 @@ export class PopsFolder {
 			let fileNameElement = popsDOMUtils.createElement("td");
 			let fileType = "";
 			let fileIcon = Folder_ICON.folder;
-			if (arguments.length === 1) {
+			if (isFolder) {
 				/* 文件夹 */
 				latestTime = "";
 				fileSize = "";
@@ -603,6 +611,7 @@ export class PopsFolder {
 				fileName: origin_fileName,
 				latestTime: origin_latestTime,
 				fileSize: origin_fileSize,
+				isFolder: isFolder,
 			};
 
 			(fileNameElement as any)["__value__"] = __value__;
@@ -833,34 +842,43 @@ export class PopsFolder {
 		}
 		/**
 		 * 对配置进行排序
-		 * @param _config_
+		 * @param folderDataConfigList
 		 * @param sortName 比较的属性，默认fileName
 		 * @param isDesc 是否降序，默认false（升序）
 		 */
 		function sortFolderConfig(
-			_config_: PopsFolderDataConfig[],
+			folderDataConfigList: PopsFolderDataConfig[],
 			sortName: "fileName" | "fileSize" | "latestTime" = "fileName",
 			isDesc = false
 		) {
-			_config_.sort((a, b) => {
-				let beforeVal = a[sortName];
-				let afterVal = b[sortName];
-				if (sortName === "fileName") {
-					/* 文件名，进行字符串转换 */
-					beforeVal = beforeVal.toString();
-					afterVal = afterVal.toString();
-				} else if (sortName === "fileSize") {
-					/* 文件大小，进行Float转换 */
-
-					beforeVal = parseFloat(beforeVal as string);
-
-					afterVal = parseFloat(afterVal as string);
-				} else if (sortName === "latestTime") {
-					/* 文件时间 */
-					beforeVal = new Date(beforeVal).getTime();
-					afterVal = new Date(afterVal).getTime();
-				}
-				if (typeof beforeVal === "string" && typeof afterVal === "string") {
+			console.log(folderDataConfigList, sortName, isDesc);
+			if (sortName === "fileName") {
+				// 如果是以文件名排序，文件夹优先放前面
+				let onlyFolderDataConfigList = folderDataConfigList.filter((value) => {
+					return value.isFolder;
+				});
+				let onlyFileDataConfigList = folderDataConfigList.filter((value) => {
+					return !value.isFolder;
+				});
+				// 文件夹排序
+				onlyFolderDataConfigList.sort((leftConfig, rightConfig) => {
+					let beforeVal = leftConfig[sortName].toString();
+					let afterVal = rightConfig[sortName].toString();
+					let compareVal = beforeVal.localeCompare(afterVal);
+					if (isDesc) {
+						/* 降序 */
+						if (compareVal > 0) {
+							compareVal = -1;
+						} else if (compareVal < 0) {
+							compareVal = 1;
+						}
+					}
+					return compareVal;
+				});
+				// 文件名排序
+				onlyFileDataConfigList.sort((leftConfig, rightConfig) => {
+					let beforeVal = leftConfig[sortName].toString();
+					let afterVal = rightConfig[sortName].toString();
 					let compareVal = beforeVal.localeCompare(afterVal);
 					if (isDesc) {
 						/* 降序 */
@@ -871,7 +889,27 @@ export class PopsFolder {
 						}
 					}
 					return compareVal;
+				});
+				if (isDesc) {
+					// 降序，文件夹在下面
+					return [...onlyFileDataConfigList, ...onlyFolderDataConfigList];
 				} else {
+					// 升序，文件夹在上面
+					return [...onlyFolderDataConfigList, ...onlyFileDataConfigList];
+				}
+			} else {
+				folderDataConfigList.sort((beforeConfig, afterConfig) => {
+					let beforeVal = beforeConfig[sortName];
+					let afterVal = afterConfig[sortName];
+					if (sortName === "fileSize") {
+						/* 文件大小，进行Float转换 */
+						beforeVal = parseFloat(beforeVal.toString());
+						afterVal = parseFloat(afterVal.toString());
+					} else if (sortName === "latestTime") {
+						/* 文件时间 */
+						beforeVal = new Date(beforeVal).getTime();
+						afterVal = new Date(afterVal).getTime();
+					}
 					if (beforeVal > afterVal) {
 						if (isDesc) {
 							/* 降序 */
@@ -889,9 +927,9 @@ export class PopsFolder {
 					} else {
 						return 0;
 					}
-				}
-			});
-			return _config_;
+				});
+				return folderDataConfigList;
+			}
 		}
 		/**
 		 * 添加元素
@@ -902,8 +940,8 @@ export class PopsFolder {
 			_config_.forEach((item) => {
 				if (item["isFolder"]) {
 					let { folderELement, fileNameElement } = pops.isPhone()
-						? createMobileFolderRowElement(item["fileName"])
-						: createFolderRowElement(item["fileName"]);
+						? createMobileFolderRowElement(item["fileName"], "", "", true)
+						: createFolderRowElement(item["fileName"], "", "", true);
 
 					popsDOMUtils.on<MouseEvent | PointerEvent>(
 						fileNameElement,
@@ -918,13 +956,15 @@ export class PopsFolder {
 					let { folderELement, fileNameElement } = pops.isPhone()
 						? createMobileFolderRowElement(
 								item["fileName"],
-								(item as any)["latestTime"],
-								(item as any)["fileSize"]
+								item.latestTime,
+								item.fileSize,
+								false
 						  )
 						: createFolderRowElement(
 								item["fileName"],
-								(item as any)["latestTime"],
-								(item as any)["fileSize"]
+								item.latestTime,
+								item.fileSize,
+								false
 						  );
 					setFileClickEvent(fileNameElement, item);
 
@@ -990,7 +1030,6 @@ export class PopsFolder {
 		 * @param {PointerEvent} target
 		 * @param {HTMLElement} event
 		 * @param {string} sortName
-		 * @returns
 		 */
 		function arrowSortClickEvent(
 			target: HTMLDivElement,
@@ -1029,7 +1068,7 @@ export class PopsFolder {
 				childrenList.push(__value__);
 			});
 			let sortedConfigList = sortFolderConfig(
-				childrenList as any,
+				childrenList,
 				config.sort.name,
 				config.sort.isDesc
 			);

package/src/components/iframe/index.ts

@@ -87,12 +87,11 @@ export class PopsIframe {
 			config.animation != null && (config as any).animation != ""
 				? "position:absolute;"
 				: "";
-		let maskHTML = PopsElementHandler.getMaskHTML(
-			guid,
 
-			config.zIndex,
-			maskExtraStyle
-		);
+		// 先把z-index提取出来
+		let zIndex = PopsHandler.handleZIndex(config.zIndex);
+		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex, maskExtraStyle);
+
 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
 		let iframeLoadingHTML = '<div class="pops-loading"></div>';
 		let titleText =
@@ -105,7 +104,7 @@ export class PopsIframe {
 			guid,
 			PopsType,
 			config,
-			`
+			/*html*/ `
             <div 
                 class="pops-iframe-title"
                 style="text-align: ${config.title.position};${headerStyle}"
@@ -131,7 +130,8 @@ export class PopsIframe {
                 </div>
                 ${config.loading.enable ? iframeLoadingHTML : ""}
             `,
-			""
+			"",
+			zIndex
 		);
 		/**
 		 * 弹窗的主元素，包括动画层
@@ -362,7 +362,11 @@ export class PopsIframe {
 			headerCloseBtnElement,
 			"click",
 			(event) => {
-				PopsInstanceUtils.removeInstance([pops.config.layer.iframe], guid, false);
+				PopsInstanceUtils.removeInstance(
+					[pops.config.layer.iframe],
+					guid,
+					false
+				);
 				setTimeout(() => {
 					let allIsMinElementList: HTMLElement[] = [];
 					pops.config.layer.iframe.forEach((item) => {

package/src/components/loading/index.ts

@@ -37,7 +37,11 @@ export class PopsLoading {
 		const PopsType = "loading";
 
 		config = PopsHandler.handleOnly(PopsType, config);
-		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+
+		// 先把z-index提取出来
+		let zIndex = PopsHandler.handleZIndex(config.zIndex);
+		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
+
 		let { contentPStyle } = PopsElementHandler.getContentStyle(
 			"loading",
 			config
@@ -46,7 +50,7 @@ export class PopsLoading {
 			guid,
 			PopsType,
 			config,
-			`
+			/*html*/ `
             <div class="pops-loading-content">
                 ${
 									config.addIndexCSS
@@ -64,7 +68,8 @@ export class PopsLoading {
             <p pops style="${contentPStyle}">${config.content.text}</p>
             </div>
             `,
-			""
+			"",
+			zIndex
 		);
 
 		/**

package/src/components/panel/index.ts

@@ -346,7 +346,11 @@ export class PopsPanel {
 		let guid = popsUtils.getRandomGUID();
 		const PopsType = "panel";
 		config = PopsHandler.handleOnly(PopsType, config);
-		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+
+		// 先把z-index提取出来
+		let zIndex = PopsHandler.handleZIndex(config.zIndex);
+		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
+
 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
 			PopsType,
@@ -357,7 +361,7 @@ export class PopsPanel {
 			guid,
 			PopsType,
 			config,
-			`
+			/*html*/ `
 			<div 
 				class="pops-${PopsType}-title"
 				style="text-align: ${config.title.position};
@@ -378,7 +382,8 @@ export class PopsPanel {
 					<ul></ul>
 				</section>
 			</div>`,
-			""
+			"",
+			zIndex
 		);
 		/**
 		 * 弹窗的主元素，包括动画层

package/src/components/prompt/index.ts

@@ -123,7 +123,9 @@ export class PopsPrompt {
 
 		config = PopsHandler.handleOnly(PopsType, config);
 
-		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+		// 先把z-index提取出来
+		let zIndex = PopsHandler.handleZIndex(config.zIndex);
+		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
 
 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
 		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
@@ -139,7 +141,7 @@ export class PopsPrompt {
 			guid,
 			PopsType,
 			config,
-			`
+			/*html*/ `
             <div class="pops-prompt-title" style="text-align: ${
 							config.title.position
 						};${headerStyle}">
@@ -163,9 +165,10 @@ export class PopsPrompt {
 								  '">'
 						}
             </div>
-        ${bottomBtnHTML}
+        	${bottomBtnHTML}
             `,
-			bottomBtnHTML
+			bottomBtnHTML,
+			zIndex
 		);
 		/**
 		 * 弹窗的主元素，包括动画层

package/src/components/rightClickMenu/index.ts

@@ -355,7 +355,7 @@ export class PopsRightClickMenu {
 			 * @param isChildren 是否是rightClickMenu的某一项的子菜单
 			 */
 			getMenuContainerElement(zIndex: number, isChildren: boolean) {
-				let menuElement = popsUtils.parseTextToDOM(`
+				let menuElement = popsUtils.parseTextToDOM(/*html*/ `
 				<div class="pops-${PopsType}" ${isChildren ? 'is-children="true"' : ""}>
 				<style type="text/css" data-from="pops-${PopsType}">
 				.pops-${PopsType} *{
@@ -443,6 +443,12 @@ export class PopsRightClickMenu {
 				}
 				return menuElement;
 			},
+			/**
+			 * 动态获取配的z-index
+			 */
+			getMenuZIndex() {
+				return PopsHandler.handleZIndex(config.zIndex);
+			},
 			/**
 			 * 获取left、top偏移
 			 * @param menuElement 菜单元素
@@ -483,7 +489,10 @@ export class PopsRightClickMenu {
 				menuEvent: PointerEvent,
 				_config_: PopsRightClickMenuDataDetails[]
 			) {
-				let menuElement = this.getMenuContainerElement(config.zIndex, false);
+				let menuElement = this.getMenuContainerElement(
+					this.getMenuZIndex(),
+					false
+				);
 				(menuElement as any)["__menuData__"] = {
 					child: [],
 				};
@@ -539,7 +548,10 @@ export class PopsRightClickMenu {
 				rootElement: HTMLDivElement,
 				targetLiElement: HTMLLIElement
 			) {
-				let menuElement = this.getMenuContainerElement(config.zIndex, true);
+				let menuElement = this.getMenuContainerElement(
+					this.getMenuZIndex(),
+					true
+				);
 				(menuElement as any)["__menuData__"] = {
 					parent: targetLiElement,
 					root: rootElement,

package/src/components/rightClickMenu/indexType.ts

@@ -68,7 +68,7 @@ export interface PopsRightClickMenuDetails {
 	/**
 	 * 弹窗的显示层级，默认10000
 	 */
-	zIndex?: number;
+	zIndex?: number | (() => number);
 	/**
 	 * 是否阻止默认contextmenu事件
 	 */

package/src/components/searchSuggestion/index.ts

@@ -144,7 +144,7 @@ export class PopsSearchSuggestion {
 							}
 							ul.pops-${PopsType}-search-suggestion-hint{
 								position: ${config.isAbsolute ? "absolute" : "fixed"};
-								z-index: ${config.zIndex};
+								z-index: ${PopsHandler.handleZIndex(config.zIndex)};
 								width: 0;
 								left: 0;
 								max-height: ${config.maxHeight};

package/src/components/searchSuggestion/indexType.ts

@@ -75,7 +75,7 @@ export interface PopsSearchSuggestionDetails<T = any> {
 	/**
 	 * 层级，默认10000
 	 */
-	zIndex?: 10000;
+	zIndex?: number | (() => number);
 	/**
 	 * 搜索中的提示
 	 */

package/src/components/tooltip/index.ts

@@ -69,7 +69,9 @@ export class PopsTooltip {
 			}
 			_toolTipElement_.setAttribute("data-guid", guid);
 
-			_toolTipElement_.style.zIndex = config.zIndex.toString();
+			_toolTipElement_.style.zIndex = PopsHandler.handleZIndex(
+				config.zIndex
+			).toString();
 			_toolTipElement_.innerHTML = `<div style="text-align: center;">${getContent()}</div>`;
 			/* 箭头元素 */
 			let _toolTipArrowHTML_ = '<div class="pops-tip-arrow"></div>';

package/src/components/tooltip/indexType.ts

@@ -40,7 +40,7 @@ export interface PopsToolTipDetails {
 	/**
 	 * z-index，默认10000
 	 */
-	zIndex?: number;
+	zIndex?: number | (() => number);
 	/**
 	 * 是否唯一，默认false
 	 */