@whitesev/pops 1.5.5 → 1.5.8

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

@@ -10,9 +10,9 @@ export interface PopsFolderDataConfig {
     /**
      * 文件大小，如果是文件夹的话，为0
      */
-    fileSize: number;
+    fileSize: number | string;
     /**
-     * 文件类型，如果是文件夹，为空
+     * 文件类型，如果是文件夹，填入空字符串
      */
     fileType: string;
     /**
@@ -34,11 +34,11 @@ export interface PopsFolderDataConfig {
     /**
      * 点击事件
      */
-    clickEvent: (event: MouseEvent | PointerEvent, config: PopsFolderDataConfig) => Promise<{
+    clickEvent?: (event: MouseEvent | PointerEvent, config: PopsFolderDataConfig) => Promise<{
         autoDownload: boolean;
         url: string;
         mode: "a" | "aBlank" | "iframe" | "open" | "openBlank";
-    }> | null;
+    } | null | undefined | void | PopsFolderDataConfig[]> | null | undefined | void | PopsFolderDataConfig[];
 }
 /**
  * pops.folder
@@ -59,7 +59,7 @@ export interface PopsFolderDetails extends PopsTitleConfig, PopsDragConfig, Pops
         /**
          * 触发排序的回调，如果返回true，则中止内部的排序
          */
-        callback: (targert: HTMLElement, event: PointerEvent | MouseEvent, sortName: "fileName" | "fileSize" | "latestTime", sortDesc: boolean) => boolean;
+        callback?: (targert: HTMLElement, event: PointerEvent | MouseEvent, sortName: "fileName" | "fileSize" | "latestTime", sortDesc: boolean) => boolean | undefined | void;
     };
     /**
      * 文件夹信息

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

@@ -19,12 +19,19 @@ export interface PopsPromptDetails extends PopsTitleConfig, PopsDragConfig, Pops
         password?: boolean;
         /**
          * 是否支持多行输入
+         * @default false
          */
         row?: boolean;
         /**
          * 是否自动获取焦点
+         * @default true
          */
         focus?: boolean;
+        /**
+         * 是否自动选择输入框的所有文字
+         * @default false
+         */
+        select?: boolean;
         /**
          * 输入框内的提示文字
          */

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

@@ -22,10 +22,12 @@ export interface PopsTitleConfig {
 		text?: string;
 		/**
 		 * 文字的位置
+		 * @default "left"
 		 */
 		position?: PopsTextAlign;
 		/**
 		 * 文字是否是html
+		 * @default false
 		 */
 		html?: boolean;
 		/**
@@ -46,6 +48,7 @@ export interface PopsContentConfig {
 		text?: string;
 		/**
 		 * 文字是否是html
+		 * @default false
 		 */
 		html?: boolean;
 		/**
@@ -60,7 +63,8 @@ export interface PopsContentConfig {
 export interface PopsButtonConfig {
 	btn?: {
 		/**
-		 * 按钮的位置，默认left
+		 * 按钮的位置
+		 * @default "flex-end"
 		 */
 		position?: PopsJustifyContent;
 		/**
@@ -76,14 +80,17 @@ export interface PopsMoreButtonConfig<T = {}> {
 	btn?: PopsButtonConfig["btn"] & {
 		/**
 		 * 是否合并按钮
+		 * @default false
 		 */
 		merge?: boolean;
 		/**
 		 * 是否对合并的按钮逆反
+		 * @default false
 		 */
 		mergeReverse?: boolean;
 		/**
 		 * 是否逆反
+		 * @default false
 		 */
 		reverse?: boolean;
 		/**
@@ -106,14 +113,17 @@ export interface PopsMoreButtonConfig<T = {}> {
 export interface PopsDragConfig {
 	/**
 	 *  是否可以按钮标题栏进行拖拽，默认false
+	 * @default false
 	 */
 	drag?: boolean;
 	/**
 	 * 是否限制拖拽在浏览器窗口内移动，默认true
+	 * @default true
 	 */
 	dragLimit?: boolean;
 	/**
 	 * 当启用dragLimit时，该参数为弹窗在窗口中的距离边际的距离，默认为3(px)
+	 * @default 3
 	 */
 	dragExtraDistance?: number;
 	/**
@@ -149,26 +159,32 @@ export interface PopsCommonConfig {
 	class?: string;
 	/**
 	 * 是否是唯一的，默认false
+	 * @default false
 	 */
 	only?: boolean;
 	/**
 	 *  宽度，默认350px
+	 * @default 350
 	 */
 	width: string;
 	/**
 	 *  高度，默认200px
+	 * @default 200
 	 */
 	height: string;
 	/**
 	 * 位置，默认center
+	 * @default "center"
 	 */
 	position?: PopsPosition;
 	/**
 	 * 动画，默认pops-anim-fadein-zoom
+	 * @default "pops-anim-fadein-zoom"
 	 */
 	animation?: PopsAnimation;
 	/**
 	 * z-index显示层级，默认10000
+	 * @default 10000
 	 */
 	zIndex?: number | (() => number);
 	/**
@@ -179,6 +195,7 @@ export interface PopsCommonConfig {
 	 * 是否禁用页面滚动，默认false
 	 *
 	 * 暂时不会生效
+	 * @default false
 	 */
 	forbiddenScroll?: boolean;
 	/**

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

@@ -17,4 +17,6 @@ export interface PopsLayerCommonConfig extends PopsLayerConfig {
 	$shadowContainer: HTMLDivElement;
 	/** shadow容器的shandowRoot */
 	$shadowRoot: ShadowRoot;
+	/** 移除实例前的回调函数 */
+	beforeRemoveCallBack?: (layerCommonConfig: PopsLayerCommonConfig) => void;
 }

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

@@ -48,7 +48,7 @@ export type PopsType = keyof PopsTypeDetails;
 export type PopsMode = PopsType | "tooltip" | "rightClickMenu";
 
 /** 存储实例的类型 9个 */
-export type PopsLayerMode = PopsType | "tooltip";
+export type PopsLayerMode = PopsType | "tooltip" | "rightClickMenu";
 
 /** pops弹窗支持动画元素的配置 */
 export interface PopsSupportAnim {

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

@@ -4,15 +4,18 @@
 export interface PopsMaskDetails {
 	/**
 	 * 是否启用遮罩层，默认false
+	 * @default false
 	 */
 	enable?: boolean;
 	clickEvent?: {
 		/**
 		 * 点击遮罩层是否触发关闭事件
+		 * @default false
 		 */
 		toClose?: boolean;
 		/**
 		 * 点击遮罩层是否触发隐藏事件
+		 * @default false
 		 */
 		toHide?: boolean;
 	};
@@ -22,7 +25,7 @@ export interface PopsMaskDetails {
 	 * @param config 配置信息
 	 */
 	clickCallBack?: (
-		originalRun: (originalRun: Function) => void,
+		originalRun: () => void,
 		config:
 			| PopsAlertDetails
 			| PopsDrawerDetails

package/package.json

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

package/src/Pops.ts

@@ -80,7 +80,7 @@ class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2024.9.11",
+		version: "2024.9.16",
 		cssText: {
 			/** 主CSS */
 			index: indexCSS,
@@ -163,6 +163,7 @@ class Pops {
 			drawer: [],
 			folder: [],
 			panel: [],
+			rightClickMenu: [],
 		} as any as {
 			[key in PopsLayerMode]: PopsLayerCommonConfig[];
 		},

package/src/components/folder/index.ts

@@ -778,7 +778,9 @@ export class PopsFolder {
 					if (typeof _config_.clickEvent === "function") {
 						let downloadInfo = await _config_.clickEvent(event, _config_)!;
 						if (
+							downloadInfo != null &&
 							typeof downloadInfo === "object" &&
+							!Array.isArray(downloadInfo) &&
 							typeof downloadInfo.url === "string" &&
 							downloadInfo.url.trim() !== ""
 						) {
@@ -851,7 +853,6 @@ export class PopsFolder {
 			sortName: "fileName" | "fileSize" | "latestTime" = "fileName",
 			isDesc = false
 		) {
-			console.log(folderDataConfigList, sortName, isDesc);
 			if (sortName === "fileName") {
 				// 如果是以文件名排序，文件夹优先放前面
 				let onlyFolderDataConfigList = folderDataConfigList.filter((value) => {

package/src/components/folder/indexType.ts

@@ -16,9 +16,9 @@ export interface PopsFolderDataConfig {
 	/**
 	 * 文件大小，如果是文件夹的话，为0
 	 */
-	fileSize: number;
+	fileSize: number | string;
 	/**
-	 * 文件类型，如果是文件夹，为空
+	 * 文件类型，如果是文件夹，填入空字符串
 	 */
 	fileType: string;
 	/**
@@ -40,14 +40,25 @@ export interface PopsFolderDataConfig {
 	/**
 	 * 点击事件
 	 */
-	clickEvent: (
+	clickEvent?: (
 		event: MouseEvent | PointerEvent,
 		config: PopsFolderDataConfig
-	) => Promise<{
-		autoDownload: boolean;
-		url: string;
-		mode: "a" | "aBlank" | "iframe" | "open" | "openBlank";
-	}> | null;
+	) =>
+		| Promise<
+				| {
+						autoDownload: boolean;
+						url: string;
+						mode: "a" | "aBlank" | "iframe" | "open" | "openBlank";
+				  }
+				| null
+				| undefined
+				| void
+				| PopsFolderDataConfig[]
+		  >
+		| null
+		| undefined
+		| void
+		| PopsFolderDataConfig[];
 }
 
 /**
@@ -73,12 +84,12 @@ export interface PopsFolderDetails
 		/**
 		 * 触发排序的回调，如果返回true，则中止内部的排序
 		 */
-		callback: (
+		callback?: (
 			targert: HTMLElement,
 			event: PointerEvent | MouseEvent,
 			sortName: "fileName" | "fileSize" | "latestTime",
 			sortDesc: boolean
-		) => boolean;
+		) => boolean | undefined | void;
 	};
 	/**
 	 * 文件夹信息

package/src/components/prompt/index.ts

@@ -27,6 +27,7 @@ export class PopsPrompt {
 			},
 			content: {
 				text: "",
+				select: false,
 				password: false,
 				row: false,
 				focus: true,
@@ -288,9 +289,12 @@ export class PopsPrompt {
 		}
 		/* 设置自动获取焦点 */
 		if (config.content.focus) {
-			$input?.focus();
+			$input.focus();
+		}
+		/* 设置自动选中所有文字 */
+		if (config.content.select) {
+			$input.select();
 		}
-
 		return PopsHandler.handleResultDetails(eventDetails);
 	}
 }

package/src/components/prompt/indexType.ts

@@ -29,12 +29,19 @@ export interface PopsPromptDetails
 		password?: boolean;
 		/**
 		 * 是否支持多行输入
+		 * @default false
 		 */
 		row?: boolean;
 		/**
 		 * 是否自动获取焦点
+		 * @default true
 		 */
 		focus?: boolean;
+		/**
+		 * 是否自动选择输入框的所有文字
+		 * @default false
+		 */
+		select?: boolean;
 		/**
 		 * 输入框内的提示文字
 		 */

package/src/components/rightClickMenu/index.ts

@@ -255,13 +255,24 @@ export class PopsRightClickMenu {
 				if (config.preventDefault) {
 					popsDOMUtils.preventEvent(event);
 				}
+				PopsHandler.handleOnly(PopsType, config);
 				if (PopsContextMenu.rootElement) {
 					PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
 				}
-				PopsContextMenu.rootElement = PopsContextMenu.showMenu(
-					event,
-					config.data
-				);
+				let rootElement = PopsContextMenu.showMenu(event, config.data);
+				PopsContextMenu.rootElement = rootElement;
+				if (config.only) {
+					PopsHandler.handlePush(PopsType, {
+						$shadowRoot: $shadowRoot,
+						$shadowContainer: $shadowContainer,
+						guid: guid,
+						animElement: rootElement as HTMLDivElement,
+						popsElement: rootElement as HTMLDivElement,
+						beforeRemoveCallBack(layerCommonConfig) {
+							PopsContextMenu.closeAllMenu(layerCommonConfig.popsElement);
+						},
+					});
+				}
 			},
 			/**
 			 * 添加contextmenu事件
@@ -337,6 +348,9 @@ export class PopsRightClickMenu {
 			 * @param rootElement
 			 */
 			closeAllMenu(rootElement: HTMLElement) {
+				if (rootElement == null) {
+					return;
+				}
 				if ((rootElement as any)?.["__menuData__"]?.root) {
 					rootElement = (rootElement as any)?.["__menuData__"]?.root;
 				}
@@ -725,7 +739,9 @@ export class PopsRightClickMenu {
 			},
 		};
 
+		// 添加右键菜单事件
 		PopsContextMenu.addContextMenuEvent(config.target, config.targetSelector!);
+		// 添加全局点击检测
 		PopsContextMenu.addWindowCheckClickListener();
 
 		return {

package/src/handler/PopsHandler.ts

@@ -631,11 +631,10 @@ export const PopsHandler = {
 				type === "tooltip" ||
 				type === "rightClickMenu"
 			) {
-				PopsInstanceUtils.removeInstance(
-					[(pops.config.layer as any)[type]],
-					"",
-					true
-				);
+				let layer = pops.config.layer[type as keyof typeof pops.config.layer];
+				if (layer) {
+					PopsInstanceUtils.removeInstance([layer], "", true);
+				}
 			} else {
 				PopsInstanceUtils.removeInstance(
 					[
@@ -662,7 +661,7 @@ export const PopsHandler = {
 					);
 					return maxZIndex;
 				};
-			}else{
+			} else {
 				const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(
 					PopsHandler.handleZIndex(config.zIndex) + 100
 				);

package/src/types/components.d.ts

@@ -22,10 +22,12 @@ export interface PopsTitleConfig {
 		text?: string;
 		/**
 		 * 文字的位置
+		 * @default "left"
 		 */
 		position?: PopsTextAlign;
 		/**
 		 * 文字是否是html
+		 * @default false
 		 */
 		html?: boolean;
 		/**
@@ -46,6 +48,7 @@ export interface PopsContentConfig {
 		text?: string;
 		/**
 		 * 文字是否是html
+		 * @default false
 		 */
 		html?: boolean;
 		/**
@@ -60,7 +63,8 @@ export interface PopsContentConfig {
 export interface PopsButtonConfig {
 	btn?: {
 		/**
-		 * 按钮的位置，默认left
+		 * 按钮的位置
+		 * @default "flex-end"
 		 */
 		position?: PopsJustifyContent;
 		/**
@@ -76,14 +80,17 @@ export interface PopsMoreButtonConfig<T = {}> {
 	btn?: PopsButtonConfig["btn"] & {
 		/**
 		 * 是否合并按钮
+		 * @default false
 		 */
 		merge?: boolean;
 		/**
 		 * 是否对合并的按钮逆反
+		 * @default false
 		 */
 		mergeReverse?: boolean;
 		/**
 		 * 是否逆反
+		 * @default false
 		 */
 		reverse?: boolean;
 		/**
@@ -106,14 +113,17 @@ export interface PopsMoreButtonConfig<T = {}> {
 export interface PopsDragConfig {
 	/**
 	 *  是否可以按钮标题栏进行拖拽，默认false
+	 * @default false
 	 */
 	drag?: boolean;
 	/**
 	 * 是否限制拖拽在浏览器窗口内移动，默认true
+	 * @default true
 	 */
 	dragLimit?: boolean;
 	/**
 	 * 当启用dragLimit时，该参数为弹窗在窗口中的距离边际的距离，默认为3(px)
+	 * @default 3
 	 */
 	dragExtraDistance?: number;
 	/**
@@ -149,26 +159,32 @@ export interface PopsCommonConfig {
 	class?: string;
 	/**
 	 * 是否是唯一的，默认false
+	 * @default false
 	 */
 	only?: boolean;
 	/**
 	 *  宽度，默认350px
+	 * @default 350
 	 */
 	width: string;
 	/**
 	 *  高度，默认200px
+	 * @default 200
 	 */
 	height: string;
 	/**
 	 * 位置，默认center
+	 * @default "center"
 	 */
 	position?: PopsPosition;
 	/**
 	 * 动画，默认pops-anim-fadein-zoom
+	 * @default "pops-anim-fadein-zoom"
 	 */
 	animation?: PopsAnimation;
 	/**
 	 * z-index显示层级，默认10000
+	 * @default 10000
 	 */
 	zIndex?: number | (() => number);
 	/**
@@ -179,6 +195,7 @@ export interface PopsCommonConfig {
 	 * 是否禁用页面滚动，默认false
 	 *
 	 * 暂时不会生效
+	 * @default false
 	 */
 	forbiddenScroll?: boolean;
 	/**

package/src/types/layer.d.ts

@@ -17,4 +17,6 @@ export interface PopsLayerCommonConfig extends PopsLayerConfig {
 	$shadowContainer: HTMLDivElement;
 	/** shadow容器的shandowRoot */
 	$shadowRoot: ShadowRoot;
+	/** 移除实例前的回调函数 */
+	beforeRemoveCallBack?: (layerCommonConfig: PopsLayerCommonConfig) => void;
 }

package/src/types/main.d.ts

@@ -48,7 +48,7 @@ export type PopsType = keyof PopsTypeDetails;
 export type PopsMode = PopsType | "tooltip" | "rightClickMenu";
 
 /** 存储实例的类型 9个 */
-export type PopsLayerMode = PopsType | "tooltip";
+export type PopsLayerMode = PopsType | "tooltip" | "rightClickMenu";
 
 /** pops弹窗支持动画元素的配置 */
 export interface PopsSupportAnim {

package/src/types/mask.d.ts

@@ -4,15 +4,18 @@
 export interface PopsMaskDetails {
 	/**
 	 * 是否启用遮罩层，默认false
+	 * @default false
 	 */
 	enable?: boolean;
 	clickEvent?: {
 		/**
 		 * 点击遮罩层是否触发关闭事件
+		 * @default false
 		 */
 		toClose?: boolean;
 		/**
 		 * 点击遮罩层是否触发隐藏事件
+		 * @default false
 		 */
 		toHide?: boolean;
 	};
@@ -22,7 +25,7 @@ export interface PopsMaskDetails {
 	 * @param config 配置信息
 	 */
 	clickCallBack?: (
-		originalRun: (originalRun: Function) => void,
+		originalRun: () => void,
 		config:
 			| PopsAlertDetails
 			| PopsDrawerDetails

package/src/utils/PopsInstanceUtils.ts

@@ -84,17 +84,27 @@ export const PopsInstanceUtils = {
 		guid: string,
 		isAll = false
 	) {
-		function removeItem(item: PopsLayerCommonConfig) {
-			item?.animElement?.remove();
-			item?.popsElement?.remove();
-			item?.maskElement?.remove();
-			item?.$shadowContainer?.remove();
+		/**
+		 * 移除元素实例
+		 * @param layerCommonConfig
+		 */
+		function removeItem(layerCommonConfig: PopsLayerCommonConfig) {
+			if (typeof layerCommonConfig.beforeRemoveCallBack === "function") {
+				// 调用移除签的回调
+				layerCommonConfig.beforeRemoveCallBack(layerCommonConfig);
+			}
+			layerCommonConfig?.animElement?.remove();
+			layerCommonConfig?.popsElement?.remove();
+			layerCommonConfig?.maskElement?.remove();
+			layerCommonConfig?.$shadowContainer?.remove();
 		}
 		// [ layer[], layer[],...]
 		moreLayerConfigList.forEach((layerConfigList) => {
 			//  layer[]
 			layerConfigList.forEach((layerConfigItem, index) => {
+				// 移除全部或者guid相同
 				if (isAll || layerConfigItem["guid"] === guid) {
+					// 判断是否有动画
 					if (
 						pops.config.animation.hasOwnProperty(
 							layerConfigItem.animElement.getAttribute("anim") as string