@whitesev/pops 2.0.9 → 2.0.11

package/src/components/panel/buttonType.ts

@@ -1,6 +1,6 @@
 import type { PopsPanelCommonDetails } from "./commonType";
 import type { PopsButtonStyleType } from "../../types/button";
-import type { PopsIcon } from "../../types/icon";
+import type { PopsIconType } from "../../types/icon";
 /**
  * pops.panel的 button
  */
@@ -48,7 +48,7 @@ export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanel
 	/**
 	 * 按钮的图标，已配置的svg请看pops.config.iconSVG，或者自定义的图标svg代码
 	 */
-	buttonIcon?: PopsIcon;
+	buttonIcon?: PopsIconType;
 	/**
 	 * 按钮的图标在右边
 	 */

package/src/components/panel/config.ts

@@ -1,3 +1,4 @@
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import type { PopsPanelDetails } from "./indexType";
 
 export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
@@ -130,6 +131,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 							return "50";
 						},
 						callback(event, value) {
+							popsDOMUtils.preventEvent(event);
 							console.log("输入框内容改变：", value);
 						},
 						placeholder: "请输入内容",
@@ -145,6 +147,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 							return "123456";
 						},
 						callback(event, value) {
+							popsDOMUtils.preventEvent(event);
 							console.log("密码输入框内容改变：", value);
 						},
 						isPassword: true,
@@ -161,6 +164,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 							return "50";
 						},
 						callback(event, value) {
+							popsDOMUtils.preventEvent(event);
 							console.log("textarea输入框内容改变：", value);
 						},
 						placeholder: "请输入内容",
@@ -233,40 +237,66 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 								value: "select-1",
 								text: "单选1",
 								isHTML: false,
-								disable() {
-									return false;
+								disable(value, allSelectedInfo) {
+									return (
+										allSelectedInfo.findIndex((it) =>
+											["select-5"].includes(it.value)
+										) !== -1
+									);
 								},
 							},
 							{
 								value: "select-2",
 								text: "单选2",
 								isHTML: false,
-								disable() {
-									return false;
+								disable(value, allSelectedInfo) {
+									return (
+										allSelectedInfo.findIndex((it) =>
+											["select-5"].includes(it.value)
+										) !== -1
+									);
 								},
 							},
 							{
 								value: "select-3",
 								text: "单选3",
 								isHTML: false,
-								disable() {
-									return false;
+								disable(value, allSelectedInfo) {
+									return (
+										allSelectedInfo.findIndex((it) =>
+											["select-2", "select-5"].includes(it.value)
+										) !== -1
+									);
 								},
 							},
 							{
 								value: "select-4",
 								text: "单选4",
 								isHTML: false,
-								disable() {
-									return false;
+								disable(value, allSelectedInfo) {
+									return (
+										allSelectedInfo.findIndex((it) =>
+											["select-3", "select-5"].includes(it.value)
+										) !== -1
+									);
 								},
 							},
 							{
 								value: "select-5",
-								text: "单选5",
+								text(value, allSelectedInfo) {
+									return allSelectedInfo.findIndex((it) =>
+										["select-4"].includes(it.value)
+									) !== -1
+										? "单选5-禁用"
+										: "单选5";
+								},
 								isHTML: false,
-								disable() {
-									return false;
+								disable(value, allSelectedInfo) {
+									return (
+										allSelectedInfo.findIndex((it) =>
+											["select-4"].includes(it.value)
+										) !== -1
+									);
 								},
 							},
 						],

package/src/components/panel/index.css

@@ -1076,3 +1076,36 @@ section.pops-panel-container
 	height: inherit;
 }
 /* deepMenu的css */
+
+/* <code> */
+.pops[type-value="panel"] code {
+	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+	font-size: 0.85em;
+	color: #000;
+	background-color: #f0f0f0;
+	border-radius: 3px;
+	border: 0;
+	padding: 0.2em 0;
+	white-space: normal;
+	background: #f5f5f5;
+	text-wrap: wrap;
+	text-align: left;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.4;
+	-moz-tab-size: 8;
+	-o-tab-size: 8;
+	tab-size: 8;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	direction: ltr;
+}
+
+.pops[type-value="panel"] code::before,
+.pops[type-value="panel"] code::after {
+	letter-spacing: -0.2em;
+	content: "\00a0";
+}

package/src/components/panel/index.ts

@@ -1,6 +1,5 @@
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -8,6 +7,7 @@ import type { PopsPanelDetails } from "./indexType";
 import { PopsPanelConfig } from "./config";
 import { PanelHandleContentDetails } from "./PanelHandleContentDetails";
 import { GlobalConfig } from "../../GlobalConfig";
+import { PopsCSS } from "../../PopsCSS";
 
 export const PopsPanel = {
 	init(details: PopsPanelDetails) {
@@ -25,13 +25,13 @@ export const PopsPanel = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.button,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.panelCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.button,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.panelCSS,
 		]);
 
 		// 先把z-index提取出来
@@ -81,7 +81,7 @@ export const PopsPanel = {
 			contentAsideElement: $contentAside,
 			contentSectionContainerElement: $contentSectionContainer,
 		} = PopsHandler.handleQueryElement($anim, PopsType);
-		if (config.isMobile || pops.isPhone()) {
+		if (config.isMobile || popsUtils.isPhone()) {
 			popsDOMUtils.addClassName($pops, config.mobileClassName);
 		}
 		/**

package/src/components/panel/selectMultipleType.ts

@@ -9,9 +9,17 @@ export interface PopsPanelSelectMultipleDataOption<T> {
 	/**
 	 * 显示的文字
 	 */
-	text: string;
+	text:
+		| string
+		| ((
+				/** 当前的值 */
+				value: T,
+				/** 所有选中的配置信息 */
+				allSelectedInfo: PopsPanelSelectMultipleDataOption<T>[]
+		  ) => string);
 	/**
 	 * 显示的文字是否是html
+	 * @default false
 	 */
 	isHTML?: boolean;
 	/**
@@ -19,8 +27,13 @@ export interface PopsPanelSelectMultipleDataOption<T> {
 	 * 触发条件：
 	 * + 点击select元素
 	 * + select元素触发change事件
+	 * @param value 当前的值
+	 * @param allSelectedInfo 所有选中的配置信息
 	 */
-	disable?(value: T): boolean;
+	disable?(
+		value: T,
+		allSelectedInfo: PopsPanelSelectMultipleDataOption<T>[]
+	): boolean;
 }
 /**
  * pops.panel的 select
@@ -79,12 +92,7 @@ export interface PopsPanelSelectMultipleDetails<T = any>
 	 */
 	callback?(
 		/** 当前已选中的信息 */
-		isSelectedInfo: {
-			/** 值 */
-			value: T;
-			/** 显示的文字 */
-			text: string;
-		}[]
+		isSelectedInfo: PopsPanelSelectMultipleDataOption<any>[]
 	): void;
 	/**
 	 * 点击某个项的元素触发该回调
@@ -95,12 +103,7 @@ export interface PopsPanelSelectMultipleDetails<T = any>
 	clickCallBack?(
 		event: PointerEvent | MouseEvent,
 		/** 当前已选中的信息 */
-		isSelectedInfo: {
-			/** 值 */
-			value: T;
-			/** 显示的文字 */
-			text: string;
-		}[]
+		isSelectedInfo: PopsPanelSelectMultipleDataOption<any>[]
 	): void | boolean;
 	/**
 	 * 点击标签tag的关闭图标触发该回调
@@ -116,7 +119,7 @@ export interface PopsPanelSelectMultipleDetails<T = any>
 			/** 值 */
 			value: T;
 			/** 显示的文字 */
-			text: string;
+			text: PopsPanelSelectMultipleDataOption<T>["text"];
 		}
 	) => void | boolean;
 	/**

package/src/components/prompt/index.ts

@@ -1,7 +1,7 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -21,13 +21,13 @@ export const PopsPrompt = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.button,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.promptCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.button,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.promptCSS,
 		]);
 
 		// 先把z-index提取出来

package/src/components/rightClickMenu/config.ts

@@ -1,4 +1,4 @@
-import { pops } from "../../Pops";
+import { PopsIcon } from "../../PopsIcon";
 import type { PopsRightClickMenuDetails } from "./indexType";
 
 export const rightClickMenuConfig =
@@ -8,7 +8,7 @@ export const rightClickMenuConfig =
 			targetSelector: null,
 			data: [
 				{
-					icon: pops.config.iconSVG.search,
+					icon: PopsIcon.getIcon("search")!,
 					iconIsLoading: false,
 					text: "搜索",
 					item: [],
@@ -21,7 +21,7 @@ export const rightClickMenuConfig =
 					},
 				},
 				{
-					icon: pops.config.iconSVG.documentCopy,
+					icon: PopsIcon.getIcon("documentCopy")!,
 					iconIsLoading: false,
 					text: "复制",
 					item: [],
@@ -34,7 +34,7 @@ export const rightClickMenuConfig =
 					},
 				},
 				{
-					icon: pops.config.iconSVG.delete,
+					icon: PopsIcon.getIcon("delete")!,
 					text: "删除",
 					iconIsLoading: false,
 					item: [],
@@ -47,7 +47,7 @@ export const rightClickMenuConfig =
 					},
 				},
 				{
-					icon: pops.config.iconSVG.loading,
+					icon: PopsIcon.getIcon("loading")!,
 					iconIsLoading: true,
 					text: "加载",
 					item: [],
@@ -61,7 +61,7 @@ export const rightClickMenuConfig =
 					},
 				},
 				{
-					icon: pops.config.iconSVG.elemePlus,
+					icon: PopsIcon.getIcon("elemePlus")!,
 					iconIsLoading: true,
 					text: "饿了么",
 					callback(clickEvent, contextMenuEvent, liElement) {
@@ -99,7 +99,7 @@ export const rightClickMenuConfig =
 							},
 							item: [
 								{
-									icon: pops.config.iconSVG.view,
+									icon: PopsIcon.getIcon("view")!,
 									iconIsLoading: false,
 									text: "查看",
 									item: [],

package/src/components/rightClickMenu/index.ts

@@ -1,16 +1,16 @@
 import { OriginPrototype } from "../../Core";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { rightClickMenuConfig as PopsRightClickMenuConfig } from "./config";
-import type { PopsIcon } from "../../types/icon";
 import type {
 	PopsRightClickMenuDataDetails,
 	PopsRightClickMenuDetails,
 } from "./indexType";
+import { PopsCSS } from "../../PopsCSS";
+import { PopsIcon } from "../../PopsIcon";
 
 export const PopsRightClickMenu = {
 	init(details: PopsRightClickMenuDetails) {
@@ -31,10 +31,10 @@ export const PopsRightClickMenu = {
 		}
 		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,
+			PopsCSS.index,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.rightClickMenu,
 		]);
 
 		if (config.style != null) {
@@ -441,12 +441,11 @@ export const PopsRightClickMenu = {
 				let menuULElement = menuElement.querySelector<HTMLUListElement>("ul")!;
 				_config_.forEach((item) => {
 					let menuLiElement =
-						popsUtils.parseTextToDOM<HTMLLIElement>(`<li></li>`);
+						popsDOMUtils.parseTextToDOM<HTMLLIElement>(`<li></li>`);
 					/* 判断有无图标，有就添加进去 */
 					if (typeof item.icon === "string" && item.icon.trim() !== "") {
-						let iconSVGHTML =
-							pops.config.iconSVG[item.icon as PopsIcon] ?? item.icon;
-						let iconElement = popsUtils.parseTextToDOM(
+						let iconSVGHTML = PopsIcon.getIcon(item.icon) ?? item.icon;
+						let iconElement = popsDOMUtils.parseTextToDOM(
 							/*html*/ `<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`
 						);
 						menuLiElement.appendChild(iconElement);

package/src/components/rightClickMenu/indexType.ts

@@ -1,5 +1,5 @@
 import type { PopsCommonConfig } from "../../types/components";
-import type { PopsIcon } from "../../types/icon";
+import type { PopsIconType } from "../../types/icon";
 
 /**
  * pops.rightClickMenu的右键菜单配置
@@ -8,7 +8,7 @@ export interface PopsRightClickMenuDataDetails {
 	/**
 	 * svg图标
 	 */
-	icon: PopsIcon | string;
+	icon: PopsIconType | string;
 	/**
 	 * 图标是否旋转
 	 */

package/src/components/searchSuggestion/index.ts

@@ -1,11 +1,11 @@
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { searchSuggestionConfig as PopsSearchSuggestionConfig } from "./config";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import type { PopsSearchSuggestionDetails } from "./indexType";
+import { PopsCSS } from "../../PopsCSS";
 
 export const PopsSearchSuggestion = {
 	init(details: PopsSearchSuggestionDetails) {
@@ -29,9 +29,9 @@ export const PopsSearchSuggestion = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
+			PopsCSS.index,
+			PopsCSS.anim,
+			PopsCSS.common,
 		]);
 
 		if (config.style != null) {
@@ -655,7 +655,7 @@ export const PopsSearchSuggestion = {
 				this.$data.isEmpty = true;
 				this.clearAllSearchItemLi();
 				this.$el.$hintULContainer.appendChild(
-					popsUtils.parseTextToDOM(config.toSearhNotResultHTML)
+					popsDOMUtils.parseTextToDOM(config.toSearhNotResultHTML)
 				);
 				if (config.toHideWithNotResult) {
 					this.hide();

package/src/components/tooltip/index.ts

@@ -1,6 +1,6 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -613,10 +613,10 @@ export const PopsTooltip = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.tooltipCSS,
+			PopsCSS.index,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.tooltipCSS,
 		]);
 
 		let toolTip = new ToolTip(config, guid, {

package/src/handler/PopsElementHandler.ts

@@ -1,8 +1,7 @@
 import type { PopsAlertDetails } from "../components/alert/indexType";
 import type { PopsConfirmDetails } from "../components/confirm/indexType";
 import type { PopsIframeDetails } from "../components/iframe/indexType";
-import { pops } from "../Pops";
-import type { PopsIcon } from "../types/icon";
+import type { PopsIconType } from "../types/icon";
 import type {
 	PopsSupportAnim,
 	PopsSupportBottomBtn,
@@ -13,7 +12,8 @@ import type {
 	PopsTypeSupportContent,
 	PopsTypeSupportHeaderTitle,
 } from "../types/main";
-import { popsUtils } from "../utils/PopsUtils";
+import { PopsIcon } from "../PopsIcon";
+import { popsDOMUtils } from "../utils/PopsDOMUtils";
 
 export const PopsElementHandler = {
 	/**
@@ -101,9 +101,7 @@ export const PopsElementHandler = {
 				item = item.toLowerCase();
 				topRightButtonHTML += /*html*/ `
                 <button class="pops-header-control" type="${item}">
-                    <i class="pops-icon">${
-											(pops.config.iconSVG as any)[item]
-										}</i>
+                    <i class="pops-icon">${PopsIcon.getIcon(item)}</i>
                 </button>`;
 			});
 			resultHTML = /*html*/ `
@@ -113,7 +111,7 @@ export const PopsElementHandler = {
 				closeHTML = /*html*/ `
                 <div class="pops-header-controls">
                     <button class="pops-header-control" type="close" data-header>
-                    	<i class="pops-icon">${pops.config.iconSVG["close"]}</i>
+                    	<i class="pops-icon">${PopsIcon.getIcon("close")}</i>
                     </button>
                 </div>`;
 			}
@@ -168,12 +166,12 @@ export const PopsElementHandler = {
 				okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
 			}
 			let okIconHTML = "";
-			let okIcon = __config_confirm.btn.ok!.icon! as PopsIcon | string;
+			let okIcon = __config_confirm.btn.ok!.icon! as PopsIconType | string;
 			if (okIcon !== "") {
 				// 判断图标是否是svg库内的
 				let iconHTML = "";
-				if (okIcon in pops.config.iconSVG) {
-					iconHTML = pops.config.iconSVG[okIcon as PopsIcon];
+				if (PopsIcon.hasIcon(okIcon)) {
+					iconHTML = PopsIcon.getIcon(okIcon)!;
 				} else {
 					iconHTML = okIcon;
 				}
@@ -202,12 +200,14 @@ export const PopsElementHandler = {
 					"pops-button-" + __config_confirm.btn.cancel.size;
 			}
 			let cancelIconHTML = "";
-			let cancelIcon = __config_confirm.btn.cancel!.icon as PopsIcon | string;
+			let cancelIcon = __config_confirm.btn.cancel!.icon as
+				| PopsIconType
+				| string;
 			if (cancelIcon !== "") {
 				let iconHTML = "";
 				// 判断图标是否是svg库内的
-				if (cancelIcon in pops.config.iconSVG) {
-					iconHTML = pops.config.iconSVG[cancelIcon as PopsIcon];
+				if (PopsIcon.hasIcon(cancelIcon)) {
+					iconHTML = PopsIcon.getIcon(cancelIcon)!;
 				} else {
 					iconHTML = cancelIcon;
 				}
@@ -236,12 +236,12 @@ export const PopsElementHandler = {
 					"pops-button-" + __config_confirm.btn.other.size;
 			}
 			let otherIconHTML = "";
-			let otherIcon = __config_confirm.btn.other!.icon as PopsIcon | string;
+			let otherIcon = __config_confirm.btn.other!.icon as PopsIconType | string;
 			if (otherIcon !== "") {
 				let iconHTML = "";
 				// 判断图标是否是svg库内的
-				if (otherIcon in pops.config.iconSVG) {
-					iconHTML = pops.config.iconSVG[otherIcon as PopsIcon];
+				if (PopsIcon.hasIcon(otherIcon)) {
+					iconHTML = PopsIcon.getIcon(otherIcon)!;
 				} else {
 					otherIcon;
 				}
@@ -315,6 +315,6 @@ export const PopsElementHandler = {
 	 * @param html
 	 */
 	parseElement<T extends HTMLElement>(html: string): T {
-		return popsUtils.parseTextToDOM(html);
+		return popsDOMUtils.parseTextToDOM(html);
 	},
 };