@whitesev/pops 2.1.8 → 2.1.10

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/css/index.css

@@ -13,6 +13,7 @@
 	--pops-bd-opacity: 1;
 	--pops-font-size: 16px;
 	interpolate-size: allow-keywords;
+	--pops-color: #000000;
 	--pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
 	--pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));
 	--pops-box-shadow-color: rgba(0, 0, 0, 0.12);
@@ -29,6 +30,7 @@
 @media (prefers-color-scheme: dark) {
 	.pops {
 		--pops-mask-bg-opacity: 0.8;
+		--pops-color: #ffffff;
 		--pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));
 		--pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));
 		--pops-box-shadow-color: rgba(81, 81, 81, 0.12);
@@ -38,6 +40,7 @@
 	}
 }
 .pops {
+	color: var(--pops-color);
 	background-color: var(--pops-bg-color);
 	border: 1px solid var(--pops-bd-color);
 	border-radius: 4px;

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);
 		}
 	},
 	/**

package/src/utils/PopsDOMUtils.ts

@@ -2517,6 +2517,119 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 		});
 		return result;
 	}
+	/**
+	 * 颜色转换函数
+	 * @method hexToRgb hex 颜色转 rgb 颜色
+	 * @method rgbToHex rgb 颜色转 Hex 颜色
+	 * @method getDarkColor 加深颜色值
+	 * @method getLightColor 变浅颜色值
+	 */
+	calcColor() {
+		function useChangeColor() {
+			/**
+			 * hex 颜色转 rgb 颜色
+			 */
+			const hexToRgb = (
+				/**
+				 * hex 颜色值
+				 */
+				str: string
+			): any => {
+				let hexs: any = "";
+				let reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+				if (!reg.test(str)) {
+					console.warn("输入错误的hex");
+					return "";
+				}
+				str = str.replace("#", "");
+				hexs = str.match(/../g);
+				for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
+				return hexs;
+			};
+
+			/**
+			 * rgb转hex
+			 */
+			const rgbToHex = (
+				/**
+				 * 红色
+				 */
+				r: any,
+				/**
+				 * 绿色
+				 */
+				g: any,
+				/**
+				 * 蓝色
+				 */
+				b: any
+			): string => {
+				let reg = /^\d{1,3}$/;
+				if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {
+					console.warn("输入错误的rgb颜色值");
+					return "";
+				}
+				let hexs = [r.toString(16), g.toString(16), b.toString(16)];
+				for (let i = 0; i < 3; i++)
+					if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
+				return `#${hexs.join("")}`;
+			};
+
+			/** 
+			 * 获取深色
+			 */
+			const getDarkColor = (
+				/**
+				 * 颜色值字符串
+				 */
+				color: string,
+				/**
+				 * 加深的程度，限0-1之间
+				 */
+				level: number
+			): string => {
+				let reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+				if (!reg.test(color)) {
+					console.warn("输入错误的hex颜色值");
+					return "";
+				}
+				let rgb = useChangeColor().hexToRgb(color);
+				for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
+				return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
+			};
+
+			/** 
+			 * 获取颜色变浅后的颜色值
+			 */
+			const getLightColor = (
+				/**
+				 * 颜色值字符串
+				 */
+				color: string,
+				/**
+				 * 加深的程度，限0-1之间
+				 */
+				level: number
+			): string => {
+				let reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+				if (!reg.test(color)) {
+					console.warn("输入错误的hex颜色值");
+					return "";
+				}
+				let rgb = useChangeColor().hexToRgb(color);
+				for (let i = 0; i < 3; i++)
+					rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
+				return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
+			};
+			return {
+				hexToRgb,
+				rgbToHex,
+				getDarkColor,
+				getLightColor,
+			};
+		}
+		return useChangeColor();
+	}
 }
 
 const popsDOMUtils = new PopsDOMUtils();