@whitesev/pops 1.9.0 → 1.9.2

package/src/components/panel/config.ts

@@ -1,6 +1,6 @@
 import type { PopsPanelDetails } from "./indexType";
 
-export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
+export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 	return {
 		title: {
 			text: "默认标题",
@@ -31,6 +31,9 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 								className: "panel-switch",
 								text: "switch",
 								type: "switch",
+								// @ts-ignore
+								props: {},
+								disabled: false,
 								attributes: [],
 								getValue() {
 									return true;
@@ -43,6 +46,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 								className: "panel-slider",
 								text: "slider",
 								type: "slider",
+								// @ts-ignore
+								props: {},
 								attributes: [],
 								getValue() {
 									return 50;
@@ -57,6 +62,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 								className: "panel-button",
 								text: "button",
 								type: "button",
+								// @ts-ignore
+								props: {},
 								attributes: [],
 								buttonIcon: "eleme",
 								buttonIconIsLoading: true,
@@ -69,6 +76,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 							{
 								className: "panel-button",
 								text: "button",
+								// @ts-ignore
+								props: {},
 								type: "button",
 								attributes: [],
 								buttonIcon: "chromeFilled",
@@ -84,6 +93,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 								text: "button",
 								type: "button",
 								attributes: [],
+								// @ts-ignore
+								props: {},
 								buttonIcon: "upload",
 								buttonIconIsLoading: false,
 								buttonType: "info",
@@ -112,6 +123,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 						className: "panel-input",
 						text: "input",
 						type: "input",
+						// @ts-ignore
+						props: {},
 						attributes: [],
 						getValue() {
 							return "50";
@@ -125,6 +138,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 						className: "panel-input-password",
 						text: "input-password",
 						type: "input",
+						// @ts-ignore
+						props: {},
 						attributes: [],
 						getValue() {
 							return "123456";
@@ -139,6 +154,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 						className: "panel-textarea",
 						text: "textarea",
 						type: "textarea",
+						// @ts-ignore
+						props: {},
 						attributes: [],
 						getValue() {
 							return "50";
@@ -152,6 +169,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 						className: "panel-select",
 						text: "select",
 						type: "select",
+						// @ts-ignore
+						props: {},
 						attributes: [],
 						getValue() {
 							return 50;
@@ -165,14 +184,23 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 							{
 								value: "all",
 								text: "所有",
+								disable() {
+									return false;
+								},
 							},
 							{
 								value: "text",
 								text: "文本",
+								disable() {
+									return false;
+								},
 							},
 							{
 								value: "html",
 								text: "超文本",
+								disable() {
+									return false;
+								},
 							},
 						],
 					},
@@ -180,6 +208,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 						className: "panel-select-multiple",
 						type: "select-multiple",
 						text: "select-multiple",
+						// @ts-ignore
+						props: {},
 
 						attributes: [],
 						placeholder: "请至少选择一个选项",
@@ -199,22 +229,42 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 							{
 								value: "select-1",
 								text: "单选1",
+								isHTML: false,
+								disable() {
+									return false;
+								},
 							},
 							{
 								value: "select-2",
 								text: "单选2",
+								isHTML: false,
+								disable() {
+									return false;
+								},
 							},
 							{
 								value: "select-3",
 								text: "单选3",
+								isHTML: false,
+								disable() {
+									return false;
+								},
 							},
 							{
 								value: "select-4",
 								text: "单选4",
+								isHTML: false,
+								disable() {
+									return false;
+								},
 							},
 							{
 								value: "select-5",
 								text: "单选5",
+								isHTML: false,
+								disable() {
+									return false;
+								},
 							},
 						],
 					},
@@ -246,6 +296,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 												className: "panel-switch",
 												text: "switch",
 												type: "switch",
+												// @ts-ignore
+												props: {},
 												attributes: [],
 												getValue() {
 													return true;
@@ -257,6 +309,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 											{
 												className: "panel-slider",
 												text: "slider",
+												// @ts-ignore
+												props: {},
 												type: "slider",
 												attributes: [],
 												getValue() {
@@ -271,6 +325,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 											{
 												className: "panel-button",
 												text: "button",
+												// @ts-ignore
+												props: {},
 												type: "button",
 												attributes: [],
 												buttonIcon: "eleme",
@@ -285,6 +341,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 												className: "panel-button",
 												text: "button",
 												type: "button",
+												// @ts-ignore
+												props: {},
 												attributes: [],
 												buttonIcon: "chromeFilled",
 												buttonIconIsLoading: true,
@@ -297,6 +355,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 											{
 												className: "panel-button",
 												text: "button",
+												// @ts-ignore
+												props: {},
 												type: "button",
 												attributes: [],
 												buttonIcon: "upload",
@@ -324,6 +384,8 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 							{
 								className: "panel-switch",
 								text: "switch",
+								// @ts-ignore
+								props: {},
 								type: "switch",
 								attributes: [],
 								getValue() {
@@ -352,8 +414,9 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 				toClose: false,
 				toHide: false,
 			},
-			clickCallBack: void 0,
+			clickCallBack: null,
 		},
+		useShadowRoot: true,
 		class: "",
 		mobileClassName: "pops-panel-is-mobile",
 		isMobile: false,

package/src/components/panel/index.ts

@@ -11,7 +11,19 @@ import { GlobalConfig } from "../../GlobalConfig";
 
 export class PopsPanel {
 	constructor(details: PopsPanelDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "panel";
+
+		let config: Required<PopsPanelDetails> = PopsPanelConfig();
+		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+		config = popsUtils.assign(config, details);
+		if (details && Array.isArray(details.content)) {
+			config.content = details.content;
+		}
+		config = PopsHandler.handleOnly(PopsType, config);
+
+		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
 			pops.config.cssText.index,
 			pops.config.cssText.ninePalaceGridPosition,
@@ -22,16 +34,6 @@ export class PopsPanel {
 			pops.config.cssText.panelCSS,
 		]);
 
-		let config: Required<PopsPanelDetails> = PopsPanelConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-		if (details && Array.isArray(details.content)) {
-			config.content = details.content;
-		}
-		let guid = popsUtils.getRandomGUID();
-		const PopsType = "panel";
-		config = PopsHandler.handleOnly(PopsType, config);
-
 		// 先把z-index提取出来
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);
 		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);

package/src/components/prompt/config.ts

@@ -1,6 +1,6 @@
 import type { PopsPromptDetails } from "./indexType";
 
-export const PopsPromptConfig = (): Required<PopsPromptDetails> => {
+export const PopsPromptConfig = (): DeepRequired<PopsPromptDetails> => {
 	return {
 		title: {
 			text: "默认标题",
@@ -24,57 +24,48 @@ export const PopsPromptConfig = (): Required<PopsPromptDetails> => {
 			position: "flex-end",
 			ok: {
 				enable: true,
-
-				size: void 0,
-
-				icon: void 0,
+				size: void 0 as any,
+				icon: void 0 as any,
 				rightIcon: false,
 				iconIsLoading: false,
 				text: "确定",
 				type: "success",
-				callback(event) {
-					console.log(event);
-					event.close();
+				callback(detail) {
+					detail.close();
 				},
 			},
 			cancel: {
 				enable: true,
-
-				size: void 0,
-
-				icon: void 0,
+				size: void 0 as any,
+				icon: void 0 as any,
 				rightIcon: false,
 				iconIsLoading: false,
 				text: "关闭",
 				type: "default",
-				callback(event) {
-					console.log(event);
-					event.close();
+				callback(detail) {
+					detail.close();
 				},
 			},
 			other: {
 				enable: false,
-
-				size: void 0,
-
-				icon: void 0,
+				size: void 0 as any,
+				icon: void 0 as any,
 				rightIcon: false,
 				iconIsLoading: false,
 				text: "其它按钮",
 				type: "default",
-				callback(event) {
-					console.log(event);
-					event.close();
+				callback(detail) {
+					detail.close();
 				},
 			},
 			close: {
 				enable: true,
-				callback(event) {
-					console.log(event);
-					event.close();
+				callback(detail) {
+					detail.close();
 				},
 			},
 		},
+		useShadowRoot: true,
 		class: "",
 		only: false,
 		width: "350px",
@@ -88,8 +79,7 @@ export const PopsPromptConfig = (): Required<PopsPromptDetails> => {
 				toClose: false,
 				toHide: false,
 			},
-
-			clickCallBack: void 0,
+			clickCallBack: null,
 		},
 		drag: false,
 		dragLimit: true,

package/src/components/prompt/index.ts

@@ -10,7 +10,16 @@ import type { PopsPromptDetails } from "./indexType";
 
 export class PopsPrompt {
 	constructor(details: PopsPromptDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "prompt";
+
+		let config = PopsPromptConfig();
+		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+		config = popsUtils.assign(config, details);
+		config = PopsHandler.handleOnly(PopsType, config);
+
+		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
 			pops.config.cssText.index,
 			pops.config.cssText.ninePalaceGridPosition,
@@ -20,13 +29,6 @@ export class PopsPrompt {
 			pops.config.cssText.common,
 			pops.config.cssText.promptCSS,
 		]);
-		let config: Required<PopsPromptDetails> = PopsPromptConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-		let guid = popsUtils.getRandomGUID();
-		const PopsType = "prompt";
-
-		config = PopsHandler.handleOnly(PopsType, config);
 
 		// 先把z-index提取出来
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);

package/src/components/rightClickMenu/config.ts

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

package/src/components/rightClickMenu/index.ts

@@ -13,27 +13,28 @@ import type {
 
 export class PopsRightClickMenu {
 	constructor(details: PopsRightClickMenuDetails) {
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
-		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.rightClickMenu,
-		]);
+		const guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "rightClickMenu";
 
-		let config: Required<PopsRightClickMenuDetails> =
-			PopsRightClickMenuConfig();
+		let config = PopsRightClickMenuConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
+		config = PopsHandler.handleOnly(PopsType, config);
 		if (config.target == null) {
 			throw "config.target 不能为空";
 		}
 		if (details.data) {
+			// @ts-ignore
 			config.data = details.data;
 		}
-		let guid = popsUtils.getRandomGUID();
-		const PopsType = "rightClickMenu";
-		config = PopsHandler.handleOnly(PopsType, config);
+		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
+		PopsHandler.handleInit($shadowRoot, [
+			pops.config.cssText.index,
+			pops.config.cssText.anim,
+			pops.config.cssText.common,
+			pops.config.cssText.rightClickMenu,
+		]);
 
 		if (config.style != null) {
 			let cssNode = document.createElement("style");