@whitesev/pops 2.1.9 → 2.1.10

package/dist/types/src/Pops.d.ts

@@ -141,6 +141,12 @@ declare class Pops {
             before(element: HTMLElement | Element | string, content: HTMLElement | string): void;
             after(element: HTMLElement | Element | string, content: HTMLElement | string): void;
             getKeyFrames(sheet: CSSStyleSheet): {};
+            calcColor(): {
+                hexToRgb: (str: string) => any;
+                rgbToHex: (r: any, g: any, b: any) => string;
+                getDarkColor: (color: string, level: number) => string;
+                getLightColor: (color: string, level: number) => string;
+            };
             on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], callback: (this: HTMLElement, event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
             on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], callback: (this: HTMLElement, event: T) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
             on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;

package/dist/types/src/utils/PopsDOMUtils.d.ts

@@ -729,6 +729,19 @@ declare class PopsDOMUtils extends PopsDOMUtilsEvent {
      * @returns
      */
     getKeyFrames(sheet: CSSStyleSheet): {};
+    /**
+     * 颜色转换函数
+     * @method hexToRgb hex 颜色转 rgb 颜色
+     * @method rgbToHex rgb 颜色转 Hex 颜色
+     * @method getDarkColor 加深颜色值
+     * @method getLightColor 变浅颜色值
+     */
+    calcColor(): {
+        hexToRgb: (str: string) => any;
+        rgbToHex: (r: any, g: any, b: any) => string;
+        getDarkColor: (color: string, level: number) => string;
+        getLightColor: (color: string, level: number) => string;
+    };
 }
 declare const popsDOMUtils: PopsDOMUtils;
 export { popsDOMUtils };

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/pops",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "type": "module",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",

package/src/components/rightClickMenu/index.css

@@ -1,7 +1,10 @@
 .pops-rightClickMenu {
-	--right-context-menu-shadow-color: #cacaca;
-	--right-context-menu-row-visited-color: #dfdfdf;
-	--right-context-menu-row-hover-color: #dfdfdf;
+	--pops-right-context-color: #000000;
+	--pops-right-context-bg-color: #ffffff;
+	--pops-right-context-z-index: 10000;
+	--pops-right-context-menu-shadow-color: #cacaca;
+	--pops-right-context-menu-row-visited-color: #dfdfdf;
+	--pops-right-context-menu-row-hover-color: #dfdfdf;
 }
 .pops-rightClickMenu * {
 	-webkit-box-sizing: border-box;
@@ -13,13 +16,14 @@
 }
 .pops-rightClickMenu {
 	position: fixed;
-	z-index: 10000;
+	z-index: var(--pops-right-context-z-index);
 	text-align: center;
 	border-radius: 3px;
 	font-size: 16px;
 	font-weight: 500;
-	background: #fff;
-	box-shadow: 0px 1px 6px 1px var(--right-context-menu-shadow-color);
+	color: var(--pops-right-context-color);
+	background-color: var(--pops-right-context-bg-color);
+	box-shadow: 0px 1px 6px 1px var(--pops-right-context-menu-shadow-color);
 }
 .pops-rightClickMenu-anim-grid {
 	display: grid;
@@ -30,7 +34,7 @@
 	grid-template-rows: 1fr;
 }
 .pops-rightClickMenu-is-visited {
-	background: var(--right-context-menu-row-visited-color);
+	background: var(--pops-right-context-menu-row-visited-color);
 }
 i.pops-rightClickMenu-icon {
 	height: 1em;
@@ -50,7 +54,7 @@ i.pops-rightClickMenu-icon[is-loading="true"] {
 	animation: rotating 2s linear infinite;
 }
 .pops-rightClickMenu li:hover {
-	background: var(--right-context-menu-row-hover-color);
+	background: var(--pops-right-context-menu-row-hover-color);
 	cursor: pointer;
 }
 .pops-rightClickMenu ul {
@@ -79,6 +83,6 @@ i.pops-rightClickMenu-icon[is-loading="true"] {
 
 @media (prefers-color-scheme: dark) {
 	.pops-rightClickMenu {
-		--right-context-menu-shadow-color: #3c3c3c;
+		--pops-right-context-menu-shadow-color: #3c3c3c;
 	}
 }

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/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();