@whitesev/pops 2.1.7 → 2.1.8

package/src/components/panel/index.css

@@ -81,6 +81,9 @@ aside.pops-panel-aside {
 	background: var(--aside-bg-color);
 	border-right: 1px solid var(--aside-bg-color);
 	font-size: 0.9em;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
 aside.pops-panel-aside {
 	user-select: none;
@@ -134,7 +137,7 @@ aside.pops-panel-aside ul li {
 	justify-content: flex-start;
 }
 aside.pops-panel-aside .pops-is-visited,
-aside.pops-panel-aside ul li:hover {
+aside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {
 	color: var(--aside-hover-color);
 	background: var(--aside-hover-bg-color);
 }
@@ -197,9 +200,9 @@ section.pops-panel-container .pops-panel-item-left-text {
 }
 
 /* 左侧的主文字 */
-section.pops-panel-container .pops-panel-item-left-main-text {
-	/*line-height: 2;*/
-}
+/*section.pops-panel-container .pops-panel-item-left-main-text {
+	
+}*/
 /* 左侧的描述文字 */
 section.pops-panel-container .pops-panel-item-left-desc-text {
 	font-size: var(--pops-panel-forms-container-item-left-desc-text-size);
@@ -316,6 +319,25 @@ section.pops-panel-container
 	}
 }
 /* switch的CSS */
+.pops-panel-switch {
+	--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));
+	--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));
+	--panel-switch-circle-color: #dcdfe6;
+	--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+	--panel-switch-checked-circle-color: #409eff;
+	--panel-switch-checked-core-bd-color: rgb(
+		64,
+		158,
+		255,
+		var(--pops-bd-opacity)
+	);
+	--panel-switch-checked-core-bg-color: rgb(
+		64,
+		158,
+		255,
+		var(--pops-bg-opacity)
+	);
+}
 .pops-panel-switch {
 	display: inline-flex;
 	flex-direction: row-reverse;
@@ -353,11 +375,11 @@ section.pops-panel-container
 	align-items: center;
 	min-width: 40px;
 	height: 20px;
-	border: 1px solid rgb(220, 223, 230, var(--pops-bd-opacity));
+	border: 1px solid var(--panel-switch-core-bd-color);
 	outline: 0;
 	border-radius: 10px;
 	box-sizing: border-box;
-	background: rgb(220, 223, 230, var(--pops-bg-opacity));
+	background: var(--panel-switch-core-bg-color);
 	cursor: pointer;
 	transition: border-color 0.3s, background-color 0.3s;
 }
@@ -368,19 +390,19 @@ section.pops-panel-container
 	transition: all 0.3s;
 	width: 16px;
 	height: 16px;
-	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	color: rgb(220, 223, 230);
+	background-color: var(--panel-switch-circle-bg-color);
+	color: var(--panel-switch-circle-color);
 }
 .pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {
-	border-color: rgb(64, 158, 255, var(--pops-bd-opacity));
-	background-color: rgb(64, 158, 255, var(--pops-bg-opacity));
+	border-color: var(--panel-switch-checked-core-bd-color);
+	background-color: var(--panel-switch-checked-core-bg-color);
 }
 .pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {
 	left: calc(100% - 17px);
-	color: rgb(64, 158, 255);
+	color: var(--panel-switch-checked-circle-color);
 }
 /* switch的CSS */
 
@@ -1140,6 +1162,28 @@ section.pops-panel-container
 		fill: #f2f2f2;
 	}
 
+	/* switch的CSS */
+	.pops-panel-switch {
+		--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));
+		--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));
+		--panel-switch-circle-color: #dcdfe6;
+		--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+		--panel-switch-checked-circle-color: #409eff;
+		--panel-switch-checked-core-bd-color: rgb(
+			64,
+			158,
+			255,
+			var(--pops-bd-opacity)
+		);
+		--panel-switch-checked-core-bg-color: rgb(
+			64,
+			158,
+			255,
+			var(--pops-bg-opacity)
+		);
+	}
+
+	/* select-multiple的CSS*/
 	.pops-panel-select-multiple {
 		--el-fill-color-blank: #141414;
 		--el-border-color: #4c4d4f;
@@ -1153,7 +1197,12 @@ section.pops-panel-container
 		--el-color-primary: #409eff;
 		--el-color-white: #ffffff;
 	}
+	/* select-multiple的CSS*/
 	.pops-panel-select-multiple .el-tag {
 		--el-color-info-light-9: #202121;
 	}
+	/* slider的CSS */
+	.pops-slider {
+		--pops-slider-border-color-light: #414243;
+	}
 }

package/src/components/panel/index.ts

@@ -54,15 +54,16 @@ export const PopsPanel = {
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops 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></ul>
+					<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-panel-container-header-ul"></ul>
-					<ul></ul>
+					<ul class="pops-${PopsType}-container-header-ul"></ul>
+					<ul class="pops-${PopsType}-container-main-ul"></ul>
 				</section>
 			</div>`,
 			"",

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

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

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

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

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

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

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

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

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

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

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

@@ -54,7 +54,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