@whitesev/pops 2.2.2 → 2.2.4

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

@@ -1,4 +1,4 @@
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";

package/src/components/rightClickMenu/index.ts

@@ -1,5 +1,5 @@
 import { OriginPrototype } from "../../PopsCore";
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";

package/src/components/searchSuggestion/index.ts

@@ -2,11 +2,12 @@ import { PopsHandler } from "../../handler/PopsHandler";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { searchSuggestionConfig as PopsSearchSuggestionConfig } from "./config";
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import type { PopsSearchSuggestionDetails } from "./types/index";
 import { PopsCSS } from "../../PopsCSS";
 import type { PopsType } from "../../types/main";
+import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
 
 export const PopsSearchSuggestion = {
 	init(details: PopsSearchSuggestionDetails) {
@@ -209,14 +210,17 @@ export const PopsSearchSuggestion = {
 			 * @param index 当前项的下标
 			 */
 			getSearchItemLiElement(data: any, index: number) {
-				return popsDOMUtils.createElement("li", {
-					className: `pops-${popsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
+				let $li = popsDOMUtils.createElement("li", {
+					className: `pops-${popsType}-search-suggestion-hint-item`,
 					"data-index": index,
 					"data-value": SearchSuggestion.getItemDataValue(data),
 					innerHTML: `${config.getItemHTML(data)}${
 						config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""
 					}`,
 				});
+				popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexCenter);
+				popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexYCenter);
+				return $li;
 			},
 			/**
 			 * 获取data-value值

package/src/components/tooltip/index.ts

@@ -1,4 +1,4 @@
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
 import type { PopsType } from "../../types/main";

package/src/config/CommonCSSClassName.ts

@@ -0,0 +1,17 @@
+/**
+ * 通用的CSS类名
+ */
+export const PopsCommonCSSClassName = {
+	flexCenter: "pops-flex-items-center",
+	flexYCenter: "pops-flex-y-center",
+	flexXCenter: "pops-flex-x-center",
+	hide: "pops-hide",
+	hideImportant: "pops-hide-important",
+	noBorder: "pops-no-border",
+	noBorderImportant: "pops-no-border-important",
+	userSelectNone: "pops-user-select-none",
+	lineHeightCenter: "pops-line-height-center",
+	widthFill: "pops-width-fill",
+	textIsDisabled: "pops-text-is-disabled",
+	textIsDisabledImportant: "pops-text-is-disabled-important",
+};

package/src/{GlobalConfig.ts → config/GlobalConfig.ts}

@@ -1,4 +1,4 @@
-import type { PopsCommonConfig, PopsDragConfig } from "./types/components";
+import type { PopsCommonConfig, PopsDragConfig } from "../types/components";
 
 type EnterReturnType<T> = null | T | (() => T);
 

package/src/css/common.css

@@ -36,3 +36,17 @@
 	width: -webkit-fill-available;
 	width: -moz-available;
 }
+.pops-text-is-disabled {
+	--pops-text-is-disabled-color: #a8abb2;
+	color: var(--pops-text-is-disabled-color);
+	--pops-panel-forms-container-item-left-desc-text-color: var(
+		--pops-text-is-disabled-color
+	);
+}
+.pops-text-is-disabled-important {
+	--pops-text-is-disabled-color: #a8abb2;
+	color: var(--pops-text-is-disabled-color) !important;
+	--pops-panel-forms-container-item-left-desc-text-color: var(
+		--pops-text-is-disabled-color
+	) !important;
+}

package/src/utils/PopsDOMUtils.ts

@@ -11,6 +11,7 @@ import { SymbolEvents } from "./PopsDOMUtilsEventsConfig";
 import { OriginPrototype, PopsCore } from "../PopsCore";
 import { popsUtils } from "./PopsUtils";
 import { PopsSafeUtils } from "./PopsSafeUtils";
+import { PopsCommonCSSClassName } from "../config/CommonCSSClassName";
 
 class PopsDOMUtilsEvent {
 	/**
@@ -1783,7 +1784,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 	 * @param element 目标元素
 	 * @param className className属性
 	 */
-	addClassName(element: HTMLElement, className: string) {
+	addClassName(element: Element | undefined | null, className: string) {
+		if (element == null) {
+			return;
+		}
 		if (typeof className !== "string") {
 			return;
 		}
@@ -1797,7 +1801,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 	 * @param element 目标元素
 	 * @param className className属性
 	 */
-	removeClassName(element: HTMLElement, className: string) {
+	removeClassName(element: Element | undefined | null, className: string) {
+		if (element == null) {
+			return;
+		}
 		if (typeof className !== "string") {
 			return;
 		}
@@ -1811,7 +1818,13 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 	 * @param element 目标元素
 	 * @param className className属性
 	 */
-	containsClassName(element: HTMLElement, className: string): boolean {
+	containsClassName(
+		element: HTMLElement | undefined | null,
+		className: string
+	): boolean {
+		if (element == null) {
+			return false;
+		}
 		if (typeof className !== "string") {
 			return false;
 		}
@@ -2226,9 +2239,9 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 			return;
 		}
 		if (isImportant) {
-			ele.classList.add("pops-hide-important");
+			popsDOMUtils.addClassName(ele, PopsCommonCSSClassName.hideImportant);
 		} else {
-			ele.classList.add("pops-hide");
+			popsDOMUtils.addClassName(ele, PopsCommonCSSClassName.hide);
 		}
 	}
 	/**
@@ -2239,8 +2252,8 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 		if (ele == null) {
 			return;
 		}
-		ele.classList.remove("pops-hide-important");
-		ele.classList.remove("pops-hide");
+		popsDOMUtils.removeClassName(ele, PopsCommonCSSClassName.hide);
+		popsDOMUtils.removeClassName(ele, PopsCommonCSSClassName.hideImportant);
 	}
 	/**
 	 * 将字符串转为Element元素
@@ -2575,7 +2588,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 				return `#${hexs.join("")}`;
 			};
 
-			/** 
+			/**
 			 * 获取深色
 			 */
 			const getDarkColor = (
@@ -2598,7 +2611,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 				return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
 			};
 
-			/** 
+			/**
 			 * 获取颜色变浅后的颜色值
 			 */
 			const getLightColor = (