@whitesev/pops 2.1.7 → 2.1.9

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

@@ -47,9 +47,13 @@ export interface PopsPanelSelectMultipleDetails<T = any>
 	/**
 	 * （可选）自定义元素属性
 	 */
-	attributes?: {
-		[key: string]: any;
-	};
+	attributes?:
+		| {
+				[key: string]: any;
+		  }
+		| {
+				[key: string]: any;
+		  }[];
 	/**
 	 * （可选）自定义属性
 	 */

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

@@ -13,9 +13,13 @@ export interface PopsPanelSliderDetails
 	/**
 	 * 自定义元素属性
 	 */
-	attributes?: {
-		[key: string]: any;
-	};
+	attributes?:
+		| {
+				[key: string]: any;
+		  }
+		| {
+				[key: string]: any;
+		  }[];
 	/**
 	 * 自定义属性
 	 */

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

@@ -12,9 +12,13 @@ export interface PopsPanelSwitchDetails
 	/**
 	 * （可选）自定义元素属性
 	 */
-	attributes?: {
-		[key: string]: any;
-	};
+	attributes?:
+		| {
+				[key: string]: any;
+		  }
+		| {
+				[key: string]: any;
+		  }[];
 	/**
 	 * （可选）自定义属性
 	 */

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

@@ -12,9 +12,13 @@ export interface PopsPanelTextAreaDetails
 	/**
 	 * （可选）自定义元素属性
 	 */
-	attributes?: {
-		[key: string]: any;
-	};
+	attributes?:
+		| {
+				[key: string]: any;
+		  }
+		| {
+				[key: string]: any;
+		  }[];
 	/**
 	 * （可选）自定义属性
 	 */

package/src/components/panel/types/index.ts

@@ -51,37 +51,52 @@ export interface PopsPanelContentConfig {
 	 */
 	id: string;
 	/**
-	 * 元素的className
+	 * （可选）元素的className，值为空的话就不设置
+	 * @default ""
 	 */
 	className?: string | string[];
 	/**
 	 * 左侧的标题，可以是html格式
 	 */
-	title: string;
+	title: string | (() => string);
 	/**
-	 * （可选）中间顶部的标题
+	 * （可选）中间顶部的标题，如果为空，则使用title的值代替
+	 * @default title
 	 */
-	headerTitle?: string;
+	headerTitle?: string | (() => string);
 	/**
-	 * （可选）内容高度是否自动适应（与headerTitle的高度有关）
+	 * （可选）是否是默认的，指打开弹窗的先显示出来的内容，默认为首位第一个项，如果多个配置都设置了isDefault的值为true，那么只有第一个值生效
+	 * @default false
 	 */
-	autoAdaptionContentHeight?: string;
+	isDefault?: boolean | (() => boolean);
 	/**
-	 * （可选）是否是默认的，指打开弹窗的先显示出来的内容
+	 * （可选）是否是位于底部的
+	 *
+	 * 自上而下排序
+	 * @default false
 	 */
-	isDefault?: boolean | (() => boolean);
+	isBottom?: boolean | (() => boolean);
+	/**
+	 * （可选）是否禁用左侧项的hover的CSS样式
+	 */
+	disableAsideItemHoverCSS?: boolean | (() => boolean);
 	/**
 	 * （可选）是否自动滚动到默认的项
+	 * @default false
 	 */
 	scrollToDefaultView?: boolean;
 	/**
-	 * （可选）自定义元素属性
+	 * （可选）自定义元素属性.setAttribute、.getAttribute
 	 */
-	attributes?: {
-		[key: string]: any;
-	};
+	attributes?:
+		| {
+				[key: string]: any;
+		  }
+		| {
+				[key: string]: any;
+		  }[];
 	/**
-	 * （可选）自定义属性
+	 * （可选）自定义元素内部的属性值
 	 */
 	props?: {
 		[K in keyof HTMLElement]?: HTMLElement[K];
@@ -90,25 +105,40 @@ export interface PopsPanelContentConfig {
 	 * 子配置
 	 */
 	forms: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+	/**
+	 * 左侧容器的点击回调（点击后第一个触发该回调）
+	 * @returns
+	 * + false 阻止默认行为
+	 */
+	clickFirstCallback?: (
+		event: MouseEvent | PointerEvent,
+		rightHeaderElement: HTMLUListElement,
+		rightContainerElement: HTMLUListElement
+	) => void | boolean | Promise<void | boolean>;
 	/**
 	 * 左侧容器的点击回调
+	 * @returns
+	 * + false 阻止默认进入菜单详情
 	 */
-	callback?: (
+	clickCallback?: (
 		event: MouseEvent | PointerEvent,
 		rightHeaderElement: HTMLUListElement,
 		rightContainerElement: HTMLUListElement
-	) => void;
+	) => void | boolean | Promise<void | boolean>;
 	/**
-	 * 左侧容器添加到panel后的回调
-	 * @param rightHeaderElement
-	 * @param rightContainerElement
+	 * 左侧项添加到panel后的回调
 	 */
-	afterRender?: (data: {
-		/** 容器配置 */
-		asideConfig: PopsPanelContentConfig;
-		/** 左侧容器的元素 */
-		$asideLiElement: HTMLLIElement;
-	}) => void;
+	afterRender?: (
+		/**
+		 * 配置
+		 */
+		data: {
+			/** 容器配置 */
+			asideConfig: PopsPanelContentConfig;
+			/** 左侧容器的元素 */
+			$asideLiElement: HTMLLIElement;
+		}
+	) => void;
 }
 
 /**
@@ -123,16 +153,18 @@ export interface PopsPanelDetails
 	 */
 	content: PopsPanelContentConfig[];
 	/**
-	 * 按钮配置
+	 * 右上角的按钮配置
 	 */
 	btn?: {
 		/**
-		 * 右上角的关闭按钮
+		 * 关闭按钮
 		 */
 		close?: PopsHeaderCloseButtonDetails;
 	};
 	/**
-	 * 移动端适配的的className，默认为pops-panel-is-mobile
+	 * 移动端适配的的className
+	 *
+	 * @default "pops-panel-is-mobile"
 	 */
 	mobileClassName?: string;
 	/**

package/src/components/prompt/index.ts

@@ -21,13 +21,34 @@ export const PopsPrompt = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			PopsCSS.index,
-			PopsCSS.ninePalaceGridPosition,
-			PopsCSS.scrollbar,
-			PopsCSS.button,
-			PopsCSS.anim,
-			PopsCSS.common,
-			PopsCSS.promptCSS,
+			{
+				name: "index",
+				css: PopsCSS.index,
+			},
+			{
+				name: "ninePalaceGridPosition",
+				css: PopsCSS.ninePalaceGridPosition,
+			},
+			{
+				name: "scrollbar",
+				css: PopsCSS.scrollbar,
+			},
+			{
+				name: "button",
+				css: PopsCSS.button,
+			},
+			{
+				name: "anim",
+				css: PopsCSS.anim,
+			},
+			{
+				name: "common",
+				css: PopsCSS.common,
+			},
+			{
+				name: "promptCSS",
+				css: PopsCSS.promptCSS,
+			},
 		]);
 
 		// 先把z-index提取出来
@@ -54,7 +75,7 @@ export const PopsPrompt = {
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops 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}">${
 				config.content.row

package/src/components/rightClickMenu/index.ts

@@ -31,10 +31,22 @@ export const PopsRightClickMenu = {
 		}
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			PopsCSS.index,
-			PopsCSS.anim,
-			PopsCSS.common,
-			PopsCSS.rightClickMenu,
+			{
+				name: "index",
+				css: PopsCSS.index,
+			},
+			{
+				name: "anim",
+				css: PopsCSS.anim,
+			},
+			{
+				name: "common",
+				css: PopsCSS.common,
+			},
+			{
+				name: "rightClickMenu",
+				css: PopsCSS.rightClickMenu,
+			},
 		]);
 
 		if (config.style != null) {

package/src/components/searchSuggestion/index.ts

@@ -29,9 +29,18 @@ export const PopsSearchSuggestion = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			PopsCSS.index,
-			PopsCSS.anim,
-			PopsCSS.common,
+			{
+				name: "index",
+				css: PopsCSS.index,
+			},
+			{
+				name: "anim",
+				css: PopsCSS.anim,
+			},
+			{
+				name: "common",
+				css: PopsCSS.common,
+			},
 		]);
 
 		if (config.style != null) {

package/src/components/tooltip/index.ts

@@ -613,10 +613,22 @@ export const PopsTooltip = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			PopsCSS.index,
-			PopsCSS.anim,
-			PopsCSS.common,
-			PopsCSS.tooltipCSS,
+			{
+				name: "index",
+				css: PopsCSS.index,
+			},
+			{
+				name: "anim",
+				css: PopsCSS.anim,
+			},
+			{
+				name: "common",
+				css: PopsCSS.common,
+			},
+			{
+				name: "tooltipCSS",
+				css: PopsCSS.tooltipCSS,
+			},
 		]);
 
 		let toolTip = new ToolTip(config, guid, {

package/src/handler/PopsHandler.ts

@@ -44,32 +44,63 @@ export const PopsHandler = {
 	},
 	/**
 	 * 处理初始化
-	 * @param $shadowRoot 所在的shadowRoot
-	 * @param cssText 添加进ShadowRoot的CSS
+	 * @param $styleParent style元素的父元素
+	 * @param css 添加进ShadowRoot的CSS
 	 */
 	handleInit(
-		$shadowRoot?: ShadowRoot | HTMLElement,
-		cssText?: string | string[]
+		$styleParent?: ShadowRoot | HTMLElement,
+		css?:
+			| string
+			| string[]
+			| {
+					name?: string;
+					css: string;
+			  }[]
 	) {
 		PopsAnimation.init();
 		if (!arguments.length) {
 			return;
 		}
-		if (Array.isArray(cssText)) {
-			for (let index = 0; index < cssText.length; index++) {
-				this.handleInit($shadowRoot, cssText[index]);
+		if ($styleParent == null) {
+			return;
+		}
+		if (css == null) {
+			return;
+		}
+
+		if (typeof css === "string") {
+			if (css.trim() === "") {
+				return;
 			}
+			css = [
+				{
+					css: css,
+				},
+			];
 		} else {
+			css = css.map((item) => {
+				if (typeof item === "string") {
+					return {
+						css: item,
+					};
+				} else {
+					return item;
+				}
+			});
+		}
+		for (const cssItem of css) {
 			let $css = popsDOMUtils.createElement(
 				"style",
-				{
-					innerHTML: cssText,
-				},
+				{},
 				{
 					"data-type": "PopsHandler.handleInit",
 				}
 			);
-			$shadowRoot!.appendChild($css);
+			$css.textContent = cssItem.css;
+			if (typeof cssItem.name === "string") {
+				$css.setAttribute("data-name", cssItem.name);
+			}
+			$styleParent.appendChild($css);
 		}
 	},
 	/**