ph-utils 1.0.0 → 1.1.0

package/lib/browser.d.ts

@@ -192,6 +192,17 @@ declare function isVisible(el: HTMLElement, parent?: HTMLElement | null | undefi
  * @returns {boolean} 如果设备是移动设备，则返回true；否则返回false。
  */
 declare function isMobile(): boolean;
+type ClsxValue = string | number | boolean | undefined | null | ClsxValue[] | Record<string, boolean | string | number | undefined | null>;
+/**
+ * 条件化类名拼接工具，支持任意嵌套的字符串、数组、对象参数。
+ * - 字符串/数字：直接拼接
+ * - 数组：递归处理每个元素
+ * - 对象：值为真时拼接键名
+ * - falsy 值（false、null、undefined、0、""）：跳过
+ * @param args - 任意数量的类名参数
+ * @returns 拼接后的类名字符串
+ */
+declare function clsx(...args: ClsxValue[]): string;
 /**
  * 格式化类名，支持数组和对象两种形式。
  * - 数组形式：数组中的每个元素代表一个类名，非空元素将被添加到结果字符串中。
@@ -200,6 +211,18 @@ declare function isMobile(): boolean;
  * @returns 格式化后的类名字符串
  */
 declare function formatClass(classObj: (boolean | string | undefined | null)[] | Record<string, boolean | string | undefined | null> | string): string;
+type StyxBaseValue = string | boolean | undefined | null;
+type StyxValue = StyxBaseValue | StyxBaseValue[] | Record<string, StyxBaseValue | number>;
+/**
+ * 条件化样式拼接工具，支持任意嵌套的字符串、数组、对象参数。
+ * - 字符串：直接拼接（自动补 `;`）
+ * - 数组：递归处理每个元素
+ * - 对象：拼接为 `key:value;` 格式
+ * - falsy 值（false、null、undefined、0、""）：跳过
+ * @param args - 任意数量的样式参数
+ * @returns 拼接后的样式字符串
+ */
+declare function styx(...args: StyxValue[]): string;
 /**
  * 将样式对象格式化为 CSS 样式字符串。
  * @param styleObj - 样式对象，可以是字符串数组或键值对对象。
@@ -413,4 +436,4 @@ declare function debounce<R extends unknown[], T>(fn: (...args: R) => T, interva
   cancel: () => void;
 };
 //#endregion
-export { $, $$, $one, addClass, applyColorTheme, applyTheme, attr, calcuteCursorPosition, clear, copy, create, debounce, elem, formJson, formatClass, formatStyle, get, getAttr, getColorTheme, getSystemTheme, getTheme, hasClass, html, initColorTheme, initTheme, isMobile, isVisible, iterate, off, on, parent, query, queryHideNodeSize, remove, removeClass, replaceClass, set, shouldEventNext, text, throttle, toggleClass, toggleColorTheme, toggleTheme, transition };
+export { $, $$, $one, addClass, applyColorTheme, applyTheme, attr, calcuteCursorPosition, clear, clsx, copy, create, debounce, elem, formJson, formatClass, formatStyle, get, getAttr, getColorTheme, getSystemTheme, getTheme, hasClass, html, initColorTheme, initTheme, isMobile, isVisible, iterate, off, on, parent, query, queryHideNodeSize, remove, removeClass, replaceClass, set, shouldEventNext, styx, text, throttle, toggleClass, toggleColorTheme, toggleTheme, transition };

package/lib/browser.js

@@ -314,6 +314,30 @@ function isMobile() {
 	return isMobile || screenWidth <= 800 || screenHeight <= 600;
 }
 /**
+* 条件化类名拼接工具，支持任意嵌套的字符串、数组、对象参数。
+* - 字符串/数字：直接拼接
+* - 数组：递归处理每个元素
+* - 对象：值为真时拼接键名
+* - falsy 值（false、null、undefined、0、""）：跳过
+* @param args - 任意数量的类名参数
+* @returns 拼接后的类名字符串
+*/
+function clsx(...args) {
+	let classes = "";
+	for (let i = 0, len = args.length; i < len; i++) {
+		const arg = args[i];
+		if (!arg) continue;
+		if (typeof arg === "string" || typeof arg === "number") classes += arg + " ";
+		else if (Array.isArray(arg)) {
+			const inner = clsx(...arg);
+			if (inner) classes += inner + " ";
+		} else if (typeof arg === "object") {
+			for (const key in arg) if (arg[key]) classes += key + " ";
+		}
+	}
+	return classes.trim();
+}
+/**
 * 格式化类名，支持数组和对象两种形式。
 * - 数组形式：数组中的每个元素代表一个类名，非空元素将被添加到结果字符串中。
 * - 对象形式：对象的键代表类名，值为真（非空、非undefined、非null）时，键将被添加到结果字符串中。
@@ -321,14 +345,32 @@ function isMobile() {
 * @returns 格式化后的类名字符串
 */
 function formatClass(classObj) {
-	let classes = "";
-	if (Array.isArray(classObj)) for (let i = 0, len = classObj.length; i < len; i++) {
-		const item = classObj[i];
-		if (item) classes += `${item} `;
+	return clsx(classObj);
+}
+/**
+* 条件化样式拼接工具，支持任意嵌套的字符串、数组、对象参数。
+* - 字符串：直接拼接（自动补 `;`）
+* - 数组：递归处理每个元素
+* - 对象：拼接为 `key:value;` 格式
+* - falsy 值（false、null、undefined、0、""）：跳过
+* @param args - 任意数量的样式参数
+* @returns 拼接后的样式字符串
+*/
+function styx(...args) {
+	let styleStr = "";
+	for (let i = 0, len = args.length; i < len; i++) {
+		const arg = args[i];
+		if (!arg) continue;
+		if (typeof arg === "string") styleStr += arg.endsWith(";") ? arg : arg + ";";
+		else if (Array.isArray(arg)) {
+			const inner = styx(...arg);
+			if (inner) styleStr += inner;
+		} else if (typeof arg === "object") for (const key in arg) {
+			const value = arg[key];
+			if (value || value === 0) styleStr += `${key}:${value};`;
+		}
 	}
-	else if (typeof classObj === "string") classes = classObj;
-	else for (const key in classObj) if (classObj[key]) classes += `${key} `;
-	return classes.trim();
+	return styleStr;
 }
 /**
 * 将样式对象格式化为 CSS 样式字符串。
@@ -336,17 +378,7 @@ function formatClass(classObj) {
 * @returns 格式化后的 CSS 样式字符串。
 */
 function formatStyle(styleObj) {
-	let styleStr = "";
-	if (Array.isArray(styleObj)) for (let i = 0, len = styleObj.length; i < len; i++) {
-		const item = styleObj[i];
-		if (item) styleStr += `${item};`;
-	}
-	else if (typeof styleObj === "string") styleStr = styleObj;
-	else for (const key in styleObj) {
-		const value = styleObj[key];
-		if (value) styleStr += `${key}:${value};`;
-	}
-	return styleStr;
+	return styx(styleObj);
 }
 function toggleCssProperty(el, properties, method = "set") {
 	for (let i = 0, len = properties.length; i < len; i++) {
@@ -855,4 +887,4 @@ function debounce(fn, interval = 500) {
 	return debounced;
 }
 //#endregion
-export { $, $$, $one, addClass, applyColorTheme, applyTheme, attr, calcuteCursorPosition, clear, copy, create, debounce, elem, formJson, formatClass, formatStyle, get, getAttr, getColorTheme, getSystemTheme, getTheme, hasClass, html, initColorTheme, initTheme, isMobile, isVisible, iterate, off, on, parent, query, queryHideNodeSize, remove, removeClass, replaceClass, set, shouldEventNext, text, throttle, toggleClass, toggleColorTheme, toggleTheme, transition };
+export { $, $$, $one, addClass, applyColorTheme, applyTheme, attr, calcuteCursorPosition, clear, clsx, copy, create, debounce, elem, formJson, formatClass, formatStyle, get, getAttr, getColorTheme, getSystemTheme, getTheme, hasClass, html, initColorTheme, initTheme, isMobile, isVisible, iterate, off, on, parent, query, queryHideNodeSize, remove, removeClass, replaceClass, set, shouldEventNext, styx, text, throttle, toggleClass, toggleColorTheme, toggleTheme, transition };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ph-utils",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "js 开发工具集，前后端都可以使用(commonjs和es module)",
   "keywords": [
     "date",