@whitesev/pops 1.6.0 → 1.6.1

package/src/components/panel/selectMultipleType.ts

@@ -1,5 +1,27 @@
+import type { PopsAlertDetails } from "../alert/indexType";
 import type { PopsPanelCommonDetails } from "./commonType";
 
+export interface PopsPanelSelectMultipleDataOption<T> {
+	/**
+	 * 真正的值
+	 */
+	value: T;
+	/**
+	 * 显示的文字
+	 */
+	text: string;
+	/**
+	 * 显示的文字是否是html
+	 */
+	isHTML?: boolean;
+	/**
+	 * （可选）是否禁用项
+	 * 触发条件：
+	 * + 点击select元素
+	 * + select元素触发change事件
+	 */
+	disable?(value: T): boolean;
+}
 /**
  * pops.panel的 select
  */
@@ -33,10 +55,18 @@ export interface PopsPanelSelectMultipleDetails<T = any>
 	 * （可选）是否禁用
 	 */
 	disabled?: boolean | ((value: T) => boolean);
+	/**
+	 * 提示文字
+	 */
+	placeholder?: string | (() => string);
 	/**
 	 * 获取该项的值的回调函数
 	 */
 	getValue(): T[];
+	/**
+	 * 弹出的下拉列表弹窗的配置
+	 */
+	selectConfirmDialogDetails?: Partial<PopsAlertDetails>;
 	/**
 	 * 选择器的值改变触发的回调函数
 	 * @param event 事件
@@ -44,21 +74,19 @@ export interface PopsPanelSelectMultipleDetails<T = any>
 	 * @param isSelectedText 当前选中的文本
 	 */
 	callback?(
-		event: PointerEvent | TouchEvent,
 		/** 当前已选中的信息 */
 		isSelectedInfo: {
 			/** 值 */
 			value: T;
 			/** 显示的文字 */
 			text: string;
-			/** 选中的元素 */
-			$option: HTMLOptionElement;
 		}[]
 	): void;
 	/**
-	 * 点击select元素触发该回调
+	 * 点击某个项的元素触发该回调
 	 * @param event 点击事件
-	 * @param selectElement 当前的select元素
+	 * @param selectElement 当前的选中的元素
+	 * @returns 如果返回boolean为false，则不会触发默认的点击事件
 	 */
 	clickCallBack?(
 		event: PointerEvent | MouseEvent,
@@ -68,28 +96,27 @@ export interface PopsPanelSelectMultipleDetails<T = any>
 			value: T;
 			/** 显示的文字 */
 			text: string;
-			/** 选中的元素 */
-			$option: HTMLOptionElement;
 		}[]
-	): void;
+	): void | boolean;
+	/**
+	 * 点击标签tag的关闭图标触发该回调
+	 * 如果返回boolean类型且为false，则阻止默认的事件
+	 */
+	closeIconClickCallBack?: (
+		event: PointerEvent | MouseEvent,
+		data: {
+			/** 标签元素 */
+			$tag: HTMLElement;
+			/** 关闭图标元素 */
+			$closeIcon: HTMLElement;
+			/** 值 */
+			value: T;
+			/** 显示的文字 */
+			text: string;
+		}
+	) => void | boolean;
 	/**
 	 * 选择器内的数据组
 	 */
-	data: {
-		/**
-		 * 真正的值
-		 */
-		value: T;
-		/**
-		 * 显示的文字
-		 */
-		text: string;
-		/**
-		 * （可选）是否禁用项
-		 * 触发条件：
-		 * + 点击select元素
-		 * + select元素触发change事件
-		 */
-		disable?(value: T): boolean;
-	}[];
+	data: PopsPanelSelectMultipleDataOption<T>[];
 }

package/src/components/prompt/config.ts

@@ -0,0 +1,102 @@
+import type { PopsPromptDetails } from "./indexType";
+
+export const PopsPromptConfig: Required<PopsPromptDetails> = {
+	title: {
+		text: "默认标题",
+		position: "left",
+		html: false,
+		style: "",
+	},
+	content: {
+		text: "",
+		select: false,
+		password: false,
+		row: false,
+		focus: true,
+		placeholder: "默认提示",
+		style: "",
+	},
+	btn: {
+		merge: false,
+		mergeReverse: false,
+		reverse: false,
+		position: "flex-end",
+		ok: {
+			enable: true,
+
+			size: void 0,
+
+			icon: void 0,
+			rightIcon: false,
+			iconIsLoading: false,
+			text: "确定",
+			type: "success",
+			callback(event) {
+				console.log(event);
+				event.close();
+			},
+		},
+		cancel: {
+			enable: true,
+
+			size: void 0,
+
+			icon: void 0,
+			rightIcon: false,
+			iconIsLoading: false,
+			text: "关闭",
+			type: "default",
+			callback(event) {
+				console.log(event);
+				event.close();
+			},
+		},
+		other: {
+			enable: false,
+
+			size: void 0,
+
+			icon: void 0,
+			rightIcon: false,
+			iconIsLoading: false,
+			text: "其它按钮",
+			type: "default",
+			callback(event) {
+				console.log(event);
+				event.close();
+			},
+		},
+		close: {
+			enable: true,
+			callback(event) {
+				console.log(event);
+				event.close();
+			},
+		},
+	},
+	class: "",
+	only: false,
+	width: "350px",
+	height: "200px",
+	position: "center",
+	animation: "pops-anim-fadein-zoom",
+	zIndex: 10000,
+	mask: {
+		enable: false,
+		clickEvent: {
+			toClose: false,
+			toHide: false,
+		},
+
+		clickCallBack: void 0,
+	},
+	drag: false,
+	dragLimit: true,
+	dragExtraDistance: 3,
+	dragMoveCallBack() {},
+	dragEndCallBack() {},
+	forbiddenScroll: false,
+
+	style: null,
+	beforeAppendToPageCallBack() {},
+};

package/src/components/prompt/index.ts

@@ -4,6 +4,7 @@ import { pops } from "../../Pops";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
+import { PopsPromptConfig } from "./config";
 import type { PopsPromptDetails } from "./indexType";
 
 export class PopsPrompt {
@@ -18,106 +19,7 @@ export class PopsPrompt {
 			pops.config.cssText.common,
 			pops.config.cssText.promptCSS,
 		]);
-		let config: Required<PopsPromptDetails> = {
-			title: {
-				text: "默认标题",
-				position: "left",
-				html: false,
-				style: "",
-			},
-			content: {
-				text: "",
-				select: false,
-				password: false,
-				row: false,
-				focus: true,
-				placeholder: "默认提示",
-				style: "",
-			},
-			btn: {
-				merge: false,
-				mergeReverse: false,
-				reverse: false,
-				position: "flex-end",
-				ok: {
-					enable: true,
-
-					size: void 0,
-
-					icon: void 0,
-					rightIcon: false,
-					iconIsLoading: false,
-					text: "确定",
-					type: "success",
-					callback(event) {
-						console.log(event);
-						event.close();
-					},
-				},
-				cancel: {
-					enable: true,
-
-					size: void 0,
-
-					icon: void 0,
-					rightIcon: false,
-					iconIsLoading: false,
-					text: "关闭",
-					type: "default",
-					callback(event) {
-						console.log(event);
-						event.close();
-					},
-				},
-				other: {
-					enable: false,
-
-					size: void 0,
-
-					icon: void 0,
-					rightIcon: false,
-					iconIsLoading: false,
-					text: "其它按钮",
-					type: "default",
-					callback(event) {
-						console.log(event);
-						event.close();
-					},
-				},
-				close: {
-					enable: true,
-					callback(event) {
-						console.log(event);
-						event.close();
-					},
-				},
-			},
-			class: "",
-			only: false,
-			width: "350px",
-			height: "200px",
-			position: "center",
-			animation: "pops-anim-fadein-zoom",
-			zIndex: 10000,
-			mask: {
-				enable: false,
-				clickEvent: {
-					toClose: false,
-					toHide: false,
-				},
-
-				clickCallBack: void 0,
-			},
-			drag: false,
-			dragLimit: true,
-			dragExtraDistance: 3,
-			dragMoveCallBack() {},
-			dragEndCallBack() {},
-			forbiddenScroll: false,
-
-			style: null,
-			beforeAppendToPageCallBack() {},
-		};
+		let config: Required<PopsPromptDetails> = PopsPromptConfig;
 		config = popsUtils.assign(config, details);
 		let guid = popsUtils.getRandomGUID();
 		const PopsType = "prompt";

package/src/components/rightClickMenu/config.ts

@@ -0,0 +1,122 @@
+import { pops } from "../../Pops";
+import type { PopsRightClickMenuDetails } from "./indexType";
+
+export const rightClickMenuConfig = () => {
+	let config: Required<PopsRightClickMenuDetails> = {
+		target: document.documentElement,
+		targetSelector: null,
+		data: [
+			{
+				icon: pops.config.iconSVG.search,
+				iconIsLoading: false,
+				text: "搜索",
+				callback(clickEvent, contextMenuEvent, liElement) {
+					console.log("点击：" + this.text, [
+						clickEvent,
+						contextMenuEvent,
+						liElement,
+					]);
+				},
+			},
+			{
+				icon: pops.config.iconSVG.documentCopy,
+				iconIsLoading: false,
+				text: "复制",
+				callback(clickEvent, contextMenuEvent, liElement) {
+					console.log("点击：" + this.text, [
+						clickEvent,
+						contextMenuEvent,
+						liElement,
+					]);
+				},
+			},
+			{
+				icon: pops.config.iconSVG.delete,
+				text: "删除",
+				iconIsLoading: false,
+				callback(clickEvent, contextMenuEvent, liElement) {
+					console.log("点击：" + this.text, [
+						clickEvent,
+						contextMenuEvent,
+						liElement,
+					]);
+				},
+			},
+			{
+				icon: pops.config.iconSVG.loading,
+				iconIsLoading: true,
+				text: "加载",
+				callback(clickEvent, contextMenuEvent, liElement) {
+					console.log("点击：" + this.text, [
+						clickEvent,
+						contextMenuEvent,
+						liElement,
+					]);
+					return false;
+				},
+			},
+			{
+				icon: pops.config.iconSVG.elemePlus,
+				iconIsLoading: true,
+				text: "饿了么",
+				callback(clickEvent, contextMenuEvent, liElement) {
+					console.log("点击：" + this.text, [
+						clickEvent,
+						contextMenuEvent,
+						liElement,
+					]);
+					return false;
+				},
+				item: [
+					{
+						icon: "",
+						iconIsLoading: false,
+						text: "处理文件",
+						callback(clickEvent, contextMenuEvent, liElement) {
+							console.log("点击：" + this.text, [
+								clickEvent,
+								contextMenuEvent,
+								liElement,
+							]);
+						},
+					},
+					{
+						icon: "",
+						iconIsLoading: false,
+						text: "其它处理",
+						callback(clickEvent, contextMenuEvent, liElement) {
+							console.log("点击：" + this.text, [
+								clickEvent,
+								contextMenuEvent,
+								liElement,
+							]);
+						},
+						item: [
+							{
+								icon: pops.config.iconSVG.view,
+								iconIsLoading: false,
+								text: "查看",
+								callback(clickEvent, contextMenuEvent, liElement) {
+									console.log("点击：" + this.text, [
+										clickEvent,
+										contextMenuEvent,
+										liElement,
+									]);
+								},
+							},
+						],
+					},
+				],
+			},
+		],
+		className: "",
+		isAnimation: true,
+		only: false,
+		zIndex: 10000,
+		preventDefault: true,
+		style: null,
+		beforeAppendToPageCallBack() {},
+	};
+
+	return config;
+};

package/src/components/rightClickMenu/index.css

@@ -0,0 +1,78 @@
+.pops-rightClickMenu * {
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	-webkit-tap-highlight-color: transparent;
+	scrollbar-width: thin;
+}
+.pops-rightClickMenu {
+	position: fixed;
+	z-index: 111430;
+	text-align: center;
+	border-radius: 3px;
+	font-size: 16px;
+	font-weight: 500;
+	background: #fff;
+	box-shadow: 0px 1px 6px 1px #cacaca;
+}
+.pops-rightClickMenu-anim-grid {
+	display: grid;
+	transition: 0.3s;
+	grid-template-rows: 0fr;
+}
+.pops-rightClickMenu-anim-show {
+	grid-template-rows: 1fr;
+}
+.pops-rightClickMenu-is-visited {
+	background: #dfdfdf;
+}
+i.pops-rightClickMenu-icon {
+	height: 1em;
+	width: 1em;
+	line-height: 1em;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	fill: currentColor;
+	color: inherit;
+	font-size: inherit;
+	margin-right: 6px;
+}
+i.pops-rightClickMenu-icon[is-loading="true"] {
+	animation: rotating 2s linear infinite;
+}
+.pops-rightClickMenu li:hover {
+	background: #dfdfdf;
+	cursor: pointer;
+}
+.pops-rightClickMenu ul {
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: center;
+	overflow: hidden;
+}
+.pops-rightClickMenu ul li {
+	padding: 5px 10px;
+	margin: 2.5px 5px;
+	border-radius: 3px;
+	display: flex;
+	width: -webkit-fill-available;
+	width: -moz-available;
+	text-align: left;
+	user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	align-items: center;
+}
+.pops-rightClickMenu ul li:first-child {
+	margin-top: 5px;
+}
+.pops-rightClickMenu ul li:last-child {
+	margin-bottom: 5px;
+}