@whitesev/pops 2.2.1 → 2.2.3

package/src/components/panel/handlerComponents.ts

@@ -324,7 +324,11 @@ export const PanelHandlerComponents = () => {
 				},
 				init() {
 					this.setStatus(this.$data.value);
-					if (formConfig.disabled) {
+					let disabled =
+						typeof formConfig.disabled === "function"
+							? formConfig.disabled()
+							: formConfig.disabled;
+					if (disabled) {
 						this.disable();
 					}
 					this.setClickEvent();
@@ -1109,9 +1113,11 @@ export const PanelHandlerComponents = () => {
 				$li,
 				/*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
+					<p class="pops-panel-item-left-main-text">${
+						formConfig.text
+					}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-input pops-user-select-none">
-					<input type="${inputType}" placeholder="${formConfig.placeholder}">
+					<input type="${inputType}" placeholder="${formConfig.placeholder ?? ""}">
 				</div>
 				`
 			);
@@ -1144,7 +1150,12 @@ export const PanelHandlerComponents = () => {
 					}
 
 					this.setInputChangeEvent();
-					if (formConfig.disabled) {
+					// 是否禁用复选框
+					let disabled =
+						typeof formConfig.disabled === "function"
+							? formConfig.disabled()
+							: formConfig.disabled;
+					if (disabled) {
 						this.disable();
 					}
 					if (typeof formConfig.handlerCallBack === "function") {
@@ -1348,7 +1359,11 @@ export const PanelHandlerComponents = () => {
 				init() {
 					this.setValue(this.$data.value);
 					this.setChangeEvent();
-					if (formConfig.disabled) {
+					let disabled =
+						typeof formConfig.disabled === "function"
+							? formConfig.disabled()
+							: formConfig.disabled;
+					if (disabled) {
 						this.disable();
 					}
 				},
@@ -1450,7 +1465,11 @@ export const PanelHandlerComponents = () => {
 					this.initOption();
 					this.setChangeEvent();
 					this.setClickEvent();
-					if (formConfig.disabled) {
+					let disabled =
+						typeof formConfig.disabled === "function"
+							? formConfig.disabled()
+							: formConfig.disabled;
+					if (disabled) {
 						this.disable();
 					}
 				},

package/src/components/panel/index.ts

@@ -8,12 +8,13 @@ import { PopsPanelConfig } from "./config";
 import { PanelHandlerComponents } from "./handlerComponents";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
 
 export const PopsPanel = {
 	init(details: PopsPanelDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType = "panel";
+		const popsType: PopsType = "panel";
 
 		let config: Required<PopsPanelDetails> = PopsPanelConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -21,7 +22,7 @@ export const PopsPanel = {
 		if (details && Array.isArray(details.content)) {
 			config.content = details.content;
 		}
-		config = PopsHandler.handleOnly(PopsType, config);
+		config = PopsHandler.handleOnly(popsType, config);
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
@@ -59,32 +60,32 @@ export const PopsPanel = {
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);
 		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
 
-		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
+		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
-			PopsType,
+			popsType,
 			config
 		);
 
 		let animHTML = PopsElementHandler.getAnimHTML(
 			guid,
-			PopsType,
+			popsType,
 			config,
 			/*html*/ `
-			<div class="pops-title pops-${PopsType}-title" style="text-align: ${
+			<div class="pops-title pops-${popsType}-title" style="text-align: ${
 				config.title.position
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops class="pops-${PopsType}-title-text" class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
+					: `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-			<div class="pops-content pops-${PopsType}-content">
-				<aside class="pops-${PopsType}-aside">
-					<ul class="pops-${PopsType}-aside-top-container"></ul>
-					<ul class="pops-${PopsType}-aside-bottom-container"></ul>
+			<div class="pops-content pops-${popsType}-content">
+				<aside class="pops-${popsType}-aside">
+					<ul class="pops-${popsType}-aside-top-container"></ul>
+					<ul class="pops-${popsType}-aside-bottom-container"></ul>
 				</aside>
-				<section class="pops-${PopsType}-container">
-					<ul class="pops-${PopsType}-container-header-ul"></ul>
-					<ul class="pops-${PopsType}-container-main-ul"></ul>
+				<section class="pops-${popsType}-container">
+					<ul class="pops-${popsType}-container-header-ul"></ul>
+					<ul class="pops-${popsType}-container-main-ul"></ul>
 				</section>
 			</div>`,
 			"",
@@ -102,7 +103,7 @@ export const PopsPanel = {
 			contentElement: $content,
 			contentAsideElement: $contentAside,
 			contentSectionContainerElement: $contentSectionContainer,
-		} = PopsHandler.handleQueryElement($anim, PopsType);
+		} = PopsHandler.handleQueryElement($anim, popsType);
 		if (config.isMobile || popsUtils.isPhone()) {
 			popsDOMUtils.addClassName($pops, config.mobileClassName);
 		}
@@ -118,7 +119,7 @@ export const PopsPanel = {
 		/* 遮罩层元素 */
 		if (config.mask.enable) {
 			let { maskElement } = PopsHandler.handleMask({
-				type: PopsType,
+				type: popsType,
 				guid: guid,
 				config: config,
 				animElement: $anim,
@@ -133,7 +134,7 @@ export const PopsPanel = {
 			guid,
 			$shadowContainer,
 			$shadowRoot,
-			PopsType,
+			popsType,
 			$anim,
 			$pops,
 			$mask!,
@@ -171,7 +172,7 @@ export const PopsPanel = {
 			},
 		});
 
-		PopsHandler.handlePush(PopsType, {
+		PopsHandler.handlePush(popsType, {
 			guid: guid,
 			animElement: $anim,
 			popsElement: $pops,

package/src/components/panel/types/components-input.ts

@@ -7,10 +7,12 @@ export interface PopsPanelInputDetails
 	extends PopsPanelCommonDetails<PopsPanelInputDetails> {
 	/**
 	 * （可选）className属性
+	 * @default ""
 	 */
 	className?: string;
 	/**
 	 * （可选）自定义元素属性
+	 * @default {}
 	 */
 	attributes?:
 		| {
@@ -21,6 +23,7 @@ export interface PopsPanelInputDetails
 		  }[];
 	/**
 	 * （可选）自定义属性
+	 * @default {}
 	 */
 	props?: {
 		[K in keyof HTMLElement]?: HTMLElement[K];
@@ -31,6 +34,7 @@ export interface PopsPanelInputDetails
 	text: string;
 	/**
 	 * （可选）左边的文字下面的描述
+	 * @default ""
 	 */
 	description?: string;
 	/**
@@ -39,8 +43,9 @@ export interface PopsPanelInputDetails
 	type: "input";
 	/**
 	 * （可选）是否禁用
+	 * @default false
 	 */
-	disabled?: boolean;
+	disabled?: boolean | (() => boolean);
 	/**
 	 * 获取该项的值的回调函数
 	 */
@@ -54,14 +59,17 @@ export interface PopsPanelInputDetails
 	callback(event: InputEvent, value: string, valueAsNumber?: number): void;
 	/**
 	 * （可选）输入框内的提示
+	 * @default ""
 	 */
 	placeholder?: string;
 	/**
 	 * （可选）是否是密码框
+	 * @default false
 	 */
 	isPassword?: boolean;
 	/**
 	 * （可选）是否是数字框
+	 * @default false
 	 */
 	isNumber?: boolean;
 	/**

package/src/components/panel/types/components-select.ts

@@ -9,10 +9,12 @@ export interface PopsPanelSelectDetails<T = any>
 	extends PopsPanelCommonDetails<PopsPanelSelectDetails> {
 	/**
 	 * （可选）className属性
+	 * @default ""
 	 */
 	className?: string;
 	/**
 	 * （可选）自定义元素属性
+	 * @default {}
 	 */
 	attributes?:
 		| {
@@ -23,6 +25,7 @@ export interface PopsPanelSelectDetails<T = any>
 		  }[];
 	/**
 	 * （可选）自定义属性
+	 * @default {}
 	 */
 	props?: {
 		[K in keyof HTMLElement]?: HTMLElement[K];
@@ -33,6 +36,7 @@ export interface PopsPanelSelectDetails<T = any>
 	text: string;
 	/**
 	 * （可选）左边的文字下面的描述
+	 * @default ""
 	 */
 	description?: string;
 	/**
@@ -41,8 +45,9 @@ export interface PopsPanelSelectDetails<T = any>
 	type: "select";
 	/**
 	 * （可选）是否禁用
+	 * @default false
 	 */
-	disabled?: boolean;
+	disabled?: boolean | (() => boolean);
 	/**
 	 * 获取该项的值的回调函数
 	 */

package/src/components/panel/types/components-switch.ts

@@ -7,10 +7,12 @@ export interface PopsPanelSwitchDetails
 	extends PopsPanelCommonDetails<PopsPanelSwitchDetails> {
 	/**
 	 * （可选）className属性
+	 * @default ""
 	 */
 	className?: string;
 	/**
 	 * （可选）自定义元素属性
+	 * @default {}
 	 */
 	attributes?:
 		| {
@@ -21,6 +23,7 @@ export interface PopsPanelSwitchDetails
 		  }[];
 	/**
 	 * （可选）自定义属性
+	 * @default {}
 	 */
 	props?: {
 		[K in keyof HTMLElement]?: HTMLElement[K];
@@ -31,6 +34,7 @@ export interface PopsPanelSwitchDetails
 	text: string;
 	/**
 	 * （可选）左边的文字下面的描述
+	 * @default ""
 	 */
 	description?: string;
 	/**
@@ -39,8 +43,9 @@ export interface PopsPanelSwitchDetails
 	type: "switch";
 	/**
 	 * （可选）是否禁用
+	 * @default false
 	 */
-	disabled?: false;
+	disabled?: boolean | (() => boolean);
 	/**
 	 * 获取该项的值的回调函数
 	 */

package/src/components/panel/types/components-textarea.ts

@@ -7,10 +7,12 @@ export interface PopsPanelTextAreaDetails
 	extends PopsPanelCommonDetails<PopsPanelTextAreaDetails> {
 	/**
 	 * （可选）className属性
+	 * @default ""
 	 */
 	className?: string;
 	/**
 	 * （可选）自定义元素属性
+	 * @default {}
 	 */
 	attributes?:
 		| {
@@ -21,6 +23,7 @@ export interface PopsPanelTextAreaDetails
 		  }[];
 	/**
 	 * （可选）自定义属性
+	 * @default {}
 	 */
 	props?: {
 		[K in keyof HTMLElement]?: HTMLElement[K];
@@ -31,6 +34,7 @@ export interface PopsPanelTextAreaDetails
 	text: string;
 	/**
 	 * （可选）左边的文字下面的描述
+	 * @default ""
 	 */
 	description?: string;
 	/**
@@ -39,8 +43,9 @@ export interface PopsPanelTextAreaDetails
 	type: "textarea";
 	/**
 	 * （可选）是否禁用
+	 * @default false
 	 */
-	disabled?: boolean;
+	disabled?: boolean | (() => boolean);
 	/**
 	 * 获取该项的值的回调函数
 	 */
@@ -58,6 +63,7 @@ export interface PopsPanelTextAreaDetails
 	): void;
 	/**
 	 * 输入框内的提示
+	 * @default ""
 	 */
-	placeholder: string;
+	placeholder?: string;
 }

package/src/components/prompt/index.ts

@@ -2,6 +2,7 @@ import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -12,12 +13,12 @@ export const PopsPrompt = {
 	init(details: PopsPromptDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType = "prompt";
+		const popsType: PopsType = "prompt";
 
 		let config = PopsPromptConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
-		config = PopsHandler.handleOnly(PopsType, config);
+		config = PopsHandler.handleOnly(popsType, config);
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
@@ -55,29 +56,29 @@ export const PopsPrompt = {
 		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 headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
+		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
-			PopsType,
+			popsType,
 			config
 		);
 		let { contentPStyle } = PopsElementHandler.getContentStyle(
-			PopsType,
+			popsType,
 			config
 		);
 		let animHTML = PopsElementHandler.getAnimHTML(
 			guid,
-			PopsType,
+			popsType,
 			config,
 			/*html*/ `
-            <div class="pops-title pops-${PopsType}-title" style="text-align: ${
+            <div class="pops-title pops-${popsType}-title" style="text-align: ${
 				config.title.position
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
+					: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-            <div class="pops-content pops-${PopsType}-content" style="${contentPStyle}">${
+            <div class="pops-content pops-${popsType}-content" style="${contentPStyle}">${
 				config.content.row
 					? '<textarea name="pops-input-text" pops="" placeholder="' +
 					  config.content.placeholder +
@@ -105,7 +106,7 @@ export const PopsPrompt = {
 			btnCancelElement: $btnCancel,
 			btnOtherElement: $btnOther,
 			titleElement: $title,
-		} = PopsHandler.handleQueryElement($anim, PopsType);
+		} = PopsHandler.handleQueryElement($anim, popsType);
 		/**
 		 * 遮罩层元素
 		 */
@@ -119,7 +120,7 @@ export const PopsPrompt = {
 		if (config.mask.enable) {
 			// 启用遮罩层
 			let _handleMask_ = PopsHandler.handleMask({
-				type: PopsType,
+				type: popsType,
 				guid: guid,
 				config: config,
 				animElement: $anim,
@@ -132,7 +133,7 @@ export const PopsPrompt = {
 			guid,
 			$shadowContainer,
 			$shadowRoot,
-			PopsType,
+			popsType,
 			$anim,
 
 			$pops!,
@@ -187,7 +188,7 @@ export const PopsPrompt = {
 		if ($mask != null) {
 			$anim.after($mask);
 		}
-		PopsHandler.handlePush(PopsType, {
+		PopsHandler.handlePush(popsType, {
 			guid: guid,
 			animElement: $anim,
 

package/src/components/rightClickMenu/index.ts

@@ -11,17 +11,18 @@ import type {
 } from "./types";
 import { PopsCSS } from "../../PopsCSS";
 import { PopsIcon } from "../../PopsIcon";
+import type { PopsType } from "../../types/main";
 
 export const PopsRightClickMenu = {
 	init(details: PopsRightClickMenuDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType = "rightClickMenu";
+		const popsType: PopsType = "rightClickMenu";
 
 		let config = PopsRightClickMenuConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
-		config = PopsHandler.handleOnly(PopsType, config);
+		config = PopsHandler.handleOnly(popsType, config);
 		if (config.target == null) {
 			throw new Error("config.target 不能为空");
 		}
@@ -76,7 +77,7 @@ export const PopsRightClickMenu = {
 					return;
 				}
 				let $click = event.target as HTMLElement;
-				if ($click.closest(`.pops-${PopsType}`)) {
+				if ($click.closest(`.pops-${popsType}`)) {
 					return;
 				}
 				if (
@@ -97,7 +98,7 @@ export const PopsRightClickMenu = {
 					return;
 				}
 				let $click = event.target as HTMLElement;
-				if ($click.closest(`.pops-${PopsType}`)) {
+				if ($click.closest(`.pops-${popsType}`)) {
 					return;
 				}
 				PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
@@ -167,7 +168,7 @@ export const PopsRightClickMenu = {
 				if (config.preventDefault) {
 					popsDOMUtils.preventEvent(event);
 				}
-				PopsHandler.handleOnly(PopsType, config);
+				PopsHandler.handleOnly(popsType, config);
 				if (PopsContextMenu.rootElement) {
 					PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
 				}
@@ -178,7 +179,7 @@ export const PopsRightClickMenu = {
 				);
 				PopsContextMenu.rootElement = rootElement;
 				if (config.only) {
-					PopsHandler.handlePush(PopsType, {
+					PopsHandler.handlePush(popsType, {
 						$shadowRoot: $shadowRoot,
 						$shadowContainer: $shadowContainer,
 						guid: guid,
@@ -241,7 +242,7 @@ export const PopsRightClickMenu = {
 					);
 					element.remove();
 				}
-				if (element.classList.contains(`pops-${PopsType}-anim-show`)) {
+				if (element.classList.contains(`pops-${popsType}-anim-show`)) {
 					/* 有动画 */
 					popsDOMUtils.on(
 						element,
@@ -251,7 +252,7 @@ export const PopsRightClickMenu = {
 							capture: true,
 						}
 					);
-					element.classList.remove(`pops-${PopsType}-anim-show`);
+					element.classList.remove(`pops-${popsType}-anim-show`);
 				} else {
 					/* 无动画 */
 					element.remove();
@@ -283,7 +284,7 @@ export const PopsRightClickMenu = {
 			 */
 			getMenuContainerElement(isChildren: boolean) {
 				let $menu = popsDOMUtils.createElement("div", {
-					className: `pops-${PopsType}`,
+					className: `pops-${popsType}`,
 					innerHTML: /*html*/ `
 					<ul></ul>
 					`,
@@ -297,7 +298,7 @@ export const PopsRightClickMenu = {
 				}
 				/* 添加动画 */
 				if (config.isAnimation) {
-					popsDOMUtils.addClassName($menu, `pops-${PopsType}-anim-grid`);
+					popsDOMUtils.addClassName($menu, `pops-${popsType}-anim-grid`);
 				}
 				return $menu;
 			},
@@ -456,7 +457,7 @@ export const PopsRightClickMenu = {
 				});
 				/* 过渡动画 */
 				if (config.isAnimation) {
-					popsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-show`);
+					popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
 				}
 				return menuElement;
 			},
@@ -518,7 +519,7 @@ export const PopsRightClickMenu = {
 				popsDOMUtils.css(menuElement, { ...offset, display: "" });
 				/* 过渡动画 */
 				if (config.isAnimation) {
-					popsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-show`);
+					popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
 				}
 				return menuElement;
 			},
@@ -546,7 +547,7 @@ export const PopsRightClickMenu = {
 					if (typeof item.icon === "string" && item.icon.trim() !== "") {
 						let iconSVGHTML = PopsIcon.getIcon(item.icon) ?? item.icon;
 						let iconElement = popsDOMUtils.parseTextToDOM(
-							/*html*/ `<i class="pops-${PopsType}-icon" is-loading="${
+							/*html*/ `<i class="pops-${popsType}-icon" is-loading="${
 								item.iconIsLoading ?? false
 							}">${iconSVGHTML}</i>`
 						);
@@ -559,7 +560,7 @@ export const PopsRightClickMenu = {
 					);
 					/* 如果存在子数据，显示 */
 					if (item.item && Array.isArray(item.item)) {
-						popsDOMUtils.addClassName(menuLiElement, `pops-${PopsType}-item`);
+						popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-item`);
 					}
 					/* 鼠标|触摸 移入事件 */
 					function liElementHoverEvent() {
@@ -568,7 +569,7 @@ export const PopsRightClickMenu = {
 						).forEach((liElement) => {
 							popsDOMUtils.removeClassName(
 								liElement,
-								`pops-${PopsType}-is-visited`
+								`pops-${popsType}-is-visited`
 							);
 							if (!(liElement as any).__menuData__) {
 								return;
@@ -600,7 +601,7 @@ export const PopsRightClickMenu = {
 						}
 						popsDOMUtils.addClassName(
 							menuLiElement,
-							`pops-${PopsType}-is-visited`
+							`pops-${popsType}-is-visited`
 						);
 						if (!item.item) {
 							return;