@whitesev/pops 1.5.6 → 1.5.9

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/panel/indexType.d.ts

@@ -9,8 +9,9 @@ import type { PopsPanelButtonDetails } from "./buttonType";
 import type { PopsPanelDeepMenuDetails } from "./deepMenuType";
 import type { PopsPanelOwnDetails } from "./ownType";
 import type { PopsHeaderCloseButtonDetails } from "../../types/button";
+import { PopsPanelSelectMultipleDetails } from "./selectMultipleType";
 /** panel的各种类型的配置项 */
-export type PopsPanelFormsTotalDetails = PopsPanelSwitchDetails | PopsPanelSliderDetails | PopsPanelInputDetails | PopsPanelTextAreaDetails | PopsPanelSelectDetails<any> | PopsPanelButtonDetails | PopsPanelDeepMenuDetails | PopsPanelOwnDetails;
+export type PopsPanelFormsTotalDetails = PopsPanelSwitchDetails | PopsPanelSliderDetails | PopsPanelInputDetails | PopsPanelTextAreaDetails | PopsPanelSelectDetails<any> | PopsPanelSelectMultipleDetails<any> | PopsPanelButtonDetails | PopsPanelDeepMenuDetails | PopsPanelOwnDetails;
 /**
  * pops.panel的content配置信息
  */

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

@@ -0,0 +1,89 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+/**
+ * pops.panel的 select
+ */
+export interface PopsPanelSelectMultipleDetails<T = any> extends PopsPanelCommonDetails {
+    /**
+     * （可选）className属性
+     */
+    className?: string;
+    /**
+     * （可选）自定义元素属性
+     */
+    attributes?: any;
+    /**
+     * （可选）自定义属性
+     */
+    props?: HTMLElement;
+    /**
+     * 显示在左边的文字
+     */
+    text: string;
+    /**
+     * （可选）左边的文字下面的描述
+     */
+    description?: string;
+    /**
+     * 类型
+     */
+    type: "select-multiple";
+    /**
+     * （可选）是否禁用
+     */
+    disabled?: boolean | ((value: T) => boolean);
+    /**
+     * 获取该项的值的回调函数
+     */
+    getValue(): T[];
+    /**
+     * 选择器的值改变触发的回调函数
+     * @param event 事件
+     * @param isSelectedValue 当前选中的值，也就是元素属性上的__value__
+     * @param isSelectedText 当前选中的文本
+     */
+    callback?(event: PointerEvent | TouchEvent, 
+    /** 当前已选中的信息 */
+    isSelectedInfo: {
+        /** 值 */
+        value: T;
+        /** 显示的文字 */
+        text: string;
+        /** 选中的元素 */
+        $option: HTMLOptionElement;
+    }[]): void;
+    /**
+     * 点击select元素触发该回调
+     * @param event 点击事件
+     * @param selectElement 当前的select元素
+     */
+    clickCallBack?(event: PointerEvent | MouseEvent, 
+    /** 当前已选中的信息 */
+    isSelectedInfo: {
+        /** 值 */
+        value: T;
+        /** 显示的文字 */
+        text: string;
+        /** 选中的元素 */
+        $option: HTMLOptionElement;
+    }[]): void;
+    /**
+     * 选择器内的数据组
+     */
+    data: {
+        /**
+         * 真正的值
+         */
+        value: T;
+        /**
+         * 显示的文字
+         */
+        text: string;
+        /**
+         * （可选）是否禁用项
+         * 触发条件：
+         * + 点击select元素
+         * + select元素触发change事件
+         */
+        disable?(value: T): 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

@@ -25,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.6",
+  "version": "1.5.9",
   "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.14",
+		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/panel/index.css

@@ -715,6 +715,12 @@ section.pops-panel-container
 }
 /* select的CSS */
 
+/* select-multiple的CSS */
+.pops-panel-select-multiple select {
+	height: auto;
+}
+/* select-multiple的CSS */
+
 /* deepMenu的css */
 .pops-panel-deepMenu-nav-item {
 	cursor: pointer;

package/src/components/panel/index.ts

@@ -21,6 +21,7 @@ import type { PopsPanelSelectDetails } from "./selectType";
 import type { PopsPanelSliderDetails } from "./sliderType";
 import type { PopsPanelSwitchDetails } from "./switchType";
 import type { PopsPanelTextAreaDetails } from "./textareaType";
+import { PopsPanelSelectMultipleDetails } from "./selectMultipleType";
 
 export class PopsPanel {
 	constructor(details: PopsPanelDetails) {
@@ -608,9 +609,9 @@ export class PopsPanel {
 				/* 左边底部的描述的文字 */
 				let leftDescriptionText = "";
 				if (Boolean(formConfig.description)) {
-					leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+					leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
 				}
-				liElement.innerHTML = `
+				liElement.innerHTML = /*html*/ `
 				<div class="pops-panel-item-left-text">
 					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
 					${leftDescriptionText}
@@ -1714,7 +1715,6 @@ export class PopsPanel {
 			 * 获取中间容器的元素<li>
 			 * type ==> select
 			 * @param formConfig
-			 * @returns
 			 */
 			getSectionContainerItem_select(formConfig: PopsPanelSelectDetails<any>) {
 				let liElement = document.createElement("li");
@@ -1727,9 +1727,9 @@ export class PopsPanel {
 				/* 左边底部的描述的文字 */
 				let leftDescriptionText = "";
 				if (Boolean(formConfig.description)) {
-					leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+					leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
 				}
-				liElement.innerHTML = `
+				liElement.innerHTML = /*html*/ `
 				<div class="pops-panel-item-left-text">
 					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
 				${leftDescriptionText}
@@ -1841,14 +1841,208 @@ export class PopsPanel {
 				};
 
 				PopsPanelSelect.init();
-				(liElement as any)["data-select"] = PopsPanelSelect;
+				Reflect.set(liElement, "data-select", PopsPanelSelect);
+				return liElement;
+			},
+			/**
+			 * 获取中间容器的元素<li>
+			 * type ==> select-multiple
+			 * @param formConfig
+			 */
+			getSectionContainerItem_select_multiple(
+				formConfig: PopsPanelSelectMultipleDetails<any>
+			) {
+				let liElement = document.createElement("li");
+				Reflect.set(liElement, "__formConfig__", formConfig);
+				if (formConfig.className) {
+					liElement.className = formConfig.className;
+				}
+				this.addElementAttributes(liElement, formConfig.attributes);
+				this.setElementProps(liElement, formConfig.props);
+				/* 左边底部的描述的文字 */
+				let leftDescriptionText = "";
+				if (Boolean(formConfig.description)) {
+					leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+				}
+				liElement.innerHTML = /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+				${leftDescriptionText}
+				</div>
+				<div class="pops-panel-select-multiple pops-panel-select">
+					<select multiple="true"></select>
+				</div>
+				`;
+
+				const PopsPanelSelectMultiple = {
+					[Symbol.toStringTag]: "PopsPanelSelectMultiple",
+					$ele: {
+						panelSelect: liElement.querySelector<HTMLDivElement>(
+							".pops-panel-select-multiple"
+						)!,
+						select: liElement.querySelector<HTMLSelectElement>(
+							".pops-panel-select-multiple select"
+						)!,
+					},
+					$eleKey: {
+						disable: "__disable__",
+						value: "__value__",
+					},
+					$data: {
+						defaultValue: formConfig.getValue(),
+					},
+					init() {
+						this.initOption();
+						this.setChangeEvent();
+						this.setClickEvent();
+						if (formConfig.disabled) {
+							this.disable();
+						}
+					},
+					/** 禁用 */
+					disable() {
+						this.$ele.select.setAttribute("disabled", "true");
+						this.$ele.panelSelect.classList.add("pops-panel-select-disable");
+					},
+					/** 取消禁用 */
+					notDisable() {
+						this.$ele.select.removeAttribute("disabled");
+						this.$ele.panelSelect.classList.remove("pops-panel-select-disable");
+					},
+					/** 判断是否禁用 */
+					isDisabled() {
+						return (
+							this.$ele.select.hasAttribute("disabled") ||
+							this.$ele.panelSelect.classList.contains(
+								"pops-panel-select-disable"
+							)
+						);
+					},
+					/** 初始化配置 */
+					initOption() {
+						formConfig.data.forEach((dataItem) => {
+							// 初始化默认选中
+							let optionElement = document.createElement("option");
+							this.setNodeValue(
+								optionElement,
+								this.$eleKey.value,
+								dataItem.value
+							);
+							this.setNodeValue(
+								optionElement,
+								this.$eleKey.disable,
+								dataItem.disable
+							);
+							if (dataItem.value === this.$data.defaultValue) {
+								optionElement.setAttribute("selected", "true");
+							}
+							optionElement.innerText = dataItem.text;
+							this.$ele.select.appendChild(optionElement);
+						});
+					},
+					/**
+					 * 给option元素设置属性
+					 * @param $ele
+					 * @param key
+					 * @param value
+					 */
+					setNodeValue($ele: HTMLElement, key: string, value: any) {
+						Reflect.set($ele, key, value);
+					},
+					/**
+					 * 获取option元素上设置的属性
+					 * @param $ele
+					 * @param value
+					 * @param key
+					 */
+					getNodeValue($ele: HTMLElement, key: string) {
+						return Reflect.get($ele, key);
+					},
+					/** 检测所有option并设置禁用状态 */
+					setSelectOptionsDisableStatus() {
+						if (this.$ele.select.options && this.$ele.select.options.length) {
+							Array.from(this.$ele.select.options).forEach((optionItem) => {
+								this.setOptionDisableStatus(optionItem);
+							});
+						}
+					},
+					/** 设置禁用状态 */
+					setOptionDisableStatus(optionElement: HTMLOptionElement) {
+						let disable = false;
+						let optionDisableAttr = this.getNodeValue(
+							optionElement,
+							this.$eleKey.disable
+						);
+						if (optionDisableAttr === "function") {
+							let value = this.getNodeValue(optionElement, this.$eleKey.value);
+							disable = Boolean(optionDisableAttr(value));
+						}
+						if (disable) {
+							optionElement.setAttribute("disabled", "true");
+						} else {
+							optionElement.removeAttribute("disabled");
+						}
+					},
+					/** 获取option上的信息 */
+					getSelectOptionInfo($option: HTMLOptionElement) {
+						let optionValue = this.getNodeValue($option, this.$eleKey.value);
+						let optionText = $option.innerText || $option.textContent!;
+						return {
+							value: optionValue,
+							text: optionText,
+							$option: $option,
+						};
+					},
+					/** 获取选中信息 */
+					getSelectInfoList($select: HTMLSelectElement) {
+						let selectedInfo: {
+							value: any;
+							text: string;
+							$option: HTMLOptionElement;
+						}[] = [];
+						Array.from($select.selectedOptions).forEach(($selectedOption) => {
+							selectedInfo.push(this.getSelectOptionInfo($selectedOption));
+						});
+						return selectedInfo;
+					},
+					/**
+					 * 监听选择内容改变
+					 */
+					setChangeEvent() {
+						popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
+							this.setSelectOptionsDisableStatus();
+							if (typeof formConfig.callback === "function") {
+								formConfig.callback(
+									event as any,
+									this.getSelectInfoList(this.$ele.select)
+								);
+							}
+						});
+					},
+					/**
+					 * 监听点击事件
+					 */
+					setClickEvent() {
+						popsDOMUtils.on(this.$ele.select, "click", void 0, (event) => {
+							this.setSelectOptionsDisableStatus();
+							if (typeof formConfig.clickCallBack === "function") {
+								formConfig.clickCallBack(
+									event,
+									this.getSelectInfoList(this.$ele.select)
+								);
+							}
+						});
+					},
+				};
+
+				PopsPanelSelectMultiple.init();
+				Reflect.set(liElement, "data-select", PopsPanelSelectMultiple);
 				return liElement;
 			},
 			/**
 			 * 获取中间容器的元素<li>
 			 * type ==> button
 			 * @param formConfig
-			 * @returns
 			 */
 			getSectionContainerItem_button(formConfig: PopsPanelButtonDetails) {
 				let liElement = document.createElement("li");
@@ -2259,6 +2453,10 @@ export class PopsPanel {
 					return this.getSectionContainerItem_select(
 						formConfig as PopsPanelSelectDetails
 					);
+				} else if (formType === "select-multiple") {
+					return this.getSectionContainerItem_select_multiple(
+						formConfig as PopsPanelSelectMultipleDetails
+					);
 				} else if (formType === "button") {
 					return this.getSectionContainerItem_button(
 						formConfig as PopsPanelButtonDetails

package/src/components/panel/indexType.ts

@@ -13,6 +13,7 @@ import type { PopsPanelButtonDetails } from "./buttonType";
 import type { PopsPanelDeepMenuDetails } from "./deepMenuType";
 import type { PopsPanelOwnDetails } from "./ownType";
 import type { PopsHeaderCloseButtonDetails } from "../../types/button";
+import { PopsPanelSelectMultipleDetails } from "./selectMultipleType";
 
 /** panel的各种类型的配置项 */
 export type PopsPanelFormsTotalDetails =
@@ -21,6 +22,7 @@ export type PopsPanelFormsTotalDetails =
 	| PopsPanelInputDetails
 	| PopsPanelTextAreaDetails
 	| PopsPanelSelectDetails<any>
+	| PopsPanelSelectMultipleDetails<any>
 	| PopsPanelButtonDetails
 	| PopsPanelDeepMenuDetails
 	| PopsPanelOwnDetails;

package/src/components/panel/selectMultipleType.ts

@@ -0,0 +1,95 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+
+/**
+ * pops.panel的 select
+ */
+export interface PopsPanelSelectMultipleDetails<T = any>
+	extends PopsPanelCommonDetails {
+	/**
+	 * （可选）className属性
+	 */
+	className?: string;
+	/**
+	 * （可选）自定义元素属性
+	 */
+	attributes?: any;
+	/**
+	 * （可选）自定义属性
+	 */
+	props?: HTMLElement;
+	/**
+	 * 显示在左边的文字
+	 */
+	text: string;
+	/**
+	 * （可选）左边的文字下面的描述
+	 */
+	description?: string;
+	/**
+	 * 类型
+	 */
+	type: "select-multiple";
+	/**
+	 * （可选）是否禁用
+	 */
+	disabled?: boolean | ((value: T) => boolean);
+	/**
+	 * 获取该项的值的回调函数
+	 */
+	getValue(): T[];
+	/**
+	 * 选择器的值改变触发的回调函数
+	 * @param event 事件
+	 * @param isSelectedValue 当前选中的值，也就是元素属性上的__value__
+	 * @param isSelectedText 当前选中的文本
+	 */
+	callback?(
+		event: PointerEvent | TouchEvent,
+		/** 当前已选中的信息 */
+		isSelectedInfo: {
+			/** 值 */
+			value: T;
+			/** 显示的文字 */
+			text: string;
+			/** 选中的元素 */
+			$option: HTMLOptionElement;
+		}[]
+	): void;
+	/**
+	 * 点击select元素触发该回调
+	 * @param event 点击事件
+	 * @param selectElement 当前的select元素
+	 */
+	clickCallBack?(
+		event: PointerEvent | MouseEvent,
+		/** 当前已选中的信息 */
+		isSelectedInfo: {
+			/** 值 */
+			value: T;
+			/** 显示的文字 */
+			text: string;
+			/** 选中的元素 */
+			$option: HTMLOptionElement;
+		}[]
+	): void;
+	/**
+	 * 选择器内的数据组
+	 */
+	data: {
+		/**
+		 * 真正的值
+		 */
+		value: T;
+		/**
+		 * 显示的文字
+		 */
+		text: string;
+		/**
+		 * （可选）是否禁用项
+		 * 触发条件：
+		 * + 点击select元素
+		 * + select元素触发change事件
+		 */
+		disable?(value: T): boolean;
+	}[];
+}