tango-ui-cw 0.0.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tango-ui-cw",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "description": "A lightweight ui library with ClayW",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/component/CSSFab/useTangoStyle.jsx

@@ -1,182 +1,182 @@
-// 封装sx属性值
-export const useTangoStyle = (sx) => {
-  return Object.entries(sx).reduce((acc, [key, value]) => {
-    const pxValue = `${value}px`;
-
-    switch (key) {
-      case "mt":
-        acc.marginTop = typeof value === "number" ? `${value}px` : value;
-        break;
-      case "mr":
-        acc.marginRight = typeof value === "number" ? `${value}px` : value;
-        break;
-      case "mb":
-        acc.marginBottom = typeof value === "number" ? `${value}px` : value;
-        break;
-      case "ml":
-        acc.marginLeft = typeof value === "number" ? `${value}px` : value;
-        break;
-      case "m":
-        acc.margin = typeof value === "number" ? `${value}px` : value;
-        break;
-
-      case "pt":
-        acc.paddingTop = pxValue;
-        break;
-      case "pr":
-        acc.paddingRight = pxValue;
-        break;
-      case "pb":
-        acc.paddingBottom = pxValue;
-        break;
-      case "pl":
-        acc.paddingLeft = pxValue;
-        break;
-      case "p":
-        acc.padding = pxValue;
-        break;
-      case "br":
-        acc.borderRadius = typeof value === "number" ? `${value}px` : value;
-        break;
-      case "bg":
-        acc.background = value; // 直接使用传入的背景值
-        break;
-      case "c":
-        acc.color = value;
-        break;
-      case "b":
-        acc.border = value === 1 ? "1px solid red" : value; // 如果值是 1，则设置为 "1px solid red"
-        break;
-      case "center":
-        acc.position = "absolute"; // 设置绝对定位
-        acc.inset = 0; // 设置inset为0
-        acc.margin = "auto"; // 设置margin为auto，保证元素居中
-        break;
-      case "pot":
-        acc.top = pxValue;
-        break;
-      case "por":
-        acc.right = pxValue;
-        break;
-      case "pob":
-        acc.bottom = pxValue;
-        break;
-      case "pol":
-        acc.left = pxValue;
-        break;
-      case "rel":
-        acc.position = "relative"; // 设置相对定位
-        break;
-      case "ab":
-        acc.position = "absolute"; // 设置绝对定位
-        break;
-      case "fixed":
-        acc.position = "fixed"; // 设置窗口定位
-        break;
-      case "w":
-        acc.width = pxValue;
-        break;
-      case "h":
-        acc.height = pxValue;
-        break;
-      case "vw":
-        acc.width = `${value}vw`; // 将宽度值转换为 vw 单位
-        break;
-      case "vh":
-        acc.height = `${value}vh`; // 将高度值转换为 vh 单位
-        break;
-      case "presentw":
-        acc.width = `${value}%`; // 将宽度值转换为 % 单位
-        break;
-      case "presenth":
-        acc.height = `${value}%`; // 将高度值转换为 % 单位
-        break;
-      case "mw":
-        acc.minWidth = pxValue;
-        break;
-      case "mh":
-        acc.minHieght = pxValue;
-        break;
-      case "fl":
-        acc.float = "left";
-        break;
-      case "fr":
-        acc.float = "right";
-        break;
-      case "size":
-        acc.fontSize = pxValue;
-        break;
-      case "tac":
-        acc.textAlign = "center";
-        break;
-      case "z":
-        acc.zIndex = value;
-        break;
-      case "tran":
-        acc.transition = `${value}s`;
-        break;
-      case "flex":
-        acc.display = "flex";
-        break;
-      case "aic":
-        acc.alignItems = "center";
-        break;
-      case "jcc":
-        acc.justifyContent = "center";
-        break;
-      case "jc":
-        acc.justifyContent = value;
-        break;
-      case "oh":
-        acc.overflow = "hidden";
-        break;
-      case "ohauto":
-        acc.overflow = "auto";
-        break;
-      case "op":
-        acc.opacity = value;
-        break;
-      case "none":
-        acc.display = "none";
-        break;
-      case "ar":
-        acc.aspectRatio = value;
-        break;
-      case "ls":
-        acc.letterSpacing = pxValue;
-        break;
-      case "lh":
-        acc.lineHeight = pxValue;
-        break;
-      case "fwb":
-        acc.fontWeight = "bold";
-        break;
-      case "boxsizing":
-        acc.boxSizing = "border-box";
-        break;
-      case "boxshadow":
-        acc.boxShadow = value;
-        break;
-
-      case "f":
-        acc.flex = typeof value === "number" ? value : `${value}`; // 支持数字或字符串
-        break;
-      case "bColor":
-        acc.borderColor = value; // 直接使用传入的背景值
-        break;
-      case "bgSize":
-        acc.backgroundSize = value; // 直接使用传入的背景值
-        break;
-      case "bgPosition":
-        acc.backgroundPosition = value; // 直接使用传入的背景值
-        break;
-      case "bgRepeat":
-        acc.backgroundRepeat = value; // 直接使用传入的背景值
-        break;
-      default:
-        acc[key] = value; // 允许其他样式直接传入，理论上可以支持所有的CSS样式传入
-    }
-
-    return acc;
-  }, {});
-};
+// 封装sx属性值
+export const useTangoStyle = (sx) => {
+  return Object.entries(sx).reduce((acc, [key, value]) => {
+    const pxValue = `${value}px`;
+
+    switch (key) {
+      case "mt":
+        acc.marginTop = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "mr":
+        acc.marginRight = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "mb":
+        acc.marginBottom = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "ml":
+        acc.marginLeft = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "m":
+        acc.margin = typeof value === "number" ? `${value}px` : value;
+        break;
+
+      case "pt":
+        acc.paddingTop = pxValue;
+        break;
+      case "pr":
+        acc.paddingRight = pxValue;
+        break;
+      case "pb":
+        acc.paddingBottom = pxValue;
+        break;
+      case "pl":
+        acc.paddingLeft = pxValue;
+        break;
+      case "p":
+        acc.padding = pxValue;
+        break;
+      case "br":
+        acc.borderRadius = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "bg":
+        acc.background = value; // 直接使用传入的背景值
+        break;
+      case "c":
+        acc.color = value;
+        break;
+      case "b":
+        acc.border = value === 1 ? "1px solid red" : value; // 如果值是 1，则设置为 "1px solid red"
+        break;
+      case "center":
+        acc.position = "absolute"; // 设置绝对定位
+        acc.inset = 0; // 设置inset为0
+        acc.margin = "auto"; // 设置margin为auto，保证元素居中
+        break;
+      case "pot":
+        acc.top = pxValue;
+        break;
+      case "por":
+        acc.right = pxValue;
+        break;
+      case "pob":
+        acc.bottom = pxValue;
+        break;
+      case "pol":
+        acc.left = pxValue;
+        break;
+      case "rel":
+        acc.position = "relative"; // 设置相对定位
+        break;
+      case "ab":
+        acc.position = "absolute"; // 设置绝对定位
+        break;
+      case "fixed":
+        acc.position = "fixed"; // 设置窗口定位
+        break;
+      case "w":
+        acc.width = pxValue;
+        break;
+      case "h":
+        acc.height = pxValue;
+        break;
+      case "vw":
+        acc.width = `${value}vw`; // 将宽度值转换为 vw 单位
+        break;
+      case "vh":
+        acc.height = `${value}vh`; // 将高度值转换为 vh 单位
+        break;
+      case "presentw":
+        acc.width = `${value}%`; // 将宽度值转换为 % 单位
+        break;
+      case "presenth":
+        acc.height = `${value}%`; // 将高度值转换为 % 单位
+        break;
+      case "mw":
+        acc.minWidth = pxValue;
+        break;
+      case "mh":
+        acc.minHieght = pxValue;
+        break;
+      case "fl":
+        acc.float = "left";
+        break;
+      case "fr":
+        acc.float = "right";
+        break;
+      case "size":
+        acc.fontSize = pxValue;
+        break;
+      case "tac":
+        acc.textAlign = "center";
+        break;
+      case "z":
+        acc.zIndex = value;
+        break;
+      case "tran":
+        acc.transition = `${value}s`;
+        break;
+      case "flex":
+        acc.display = "flex";
+        break;
+      case "aic":
+        acc.alignItems = "center";
+        break;
+      case "jcc":
+        acc.justifyContent = "center";
+        break;
+      case "jc":
+        acc.justifyContent = value;
+        break;
+      case "oh":
+        acc.overflow = "hidden";
+        break;
+      case "ohauto":
+        acc.overflow = "auto";
+        break;
+      case "op":
+        acc.opacity = value;
+        break;
+      case "none":
+        acc.display = "none";
+        break;
+      case "ar":
+        acc.aspectRatio = value;
+        break;
+      case "ls":
+        acc.letterSpacing = pxValue;
+        break;
+      case "lh":
+        acc.lineHeight = pxValue;
+        break;
+      case "fwb":
+        acc.fontWeight = "bold";
+        break;
+      case "boxsizing":
+        acc.boxSizing = "border-box";
+        break;
+      case "boxshadow":
+        acc.boxShadow = value;
+        break;
+
+      case "f":
+        acc.flex = typeof value === "number" ? value : `${value}`; // 支持数字或字符串
+        break;
+      case "bColor":
+        acc.borderColor = value; // 直接使用传入的背景值
+        break;
+      case "bgSize":
+        acc.backgroundSize = value; // 直接使用传入的背景值
+        break;
+      case "bgPosition":
+        acc.backgroundPosition = value; // 直接使用传入的背景值
+        break;
+      case "bgRepeat":
+        acc.backgroundRepeat = value; // 直接使用传入的背景值
+        break;
+      default:
+        acc[key] = value; // 允许其他样式直接传入，理论上可以支持所有的CSS样式传入
+    }
+
+    return acc;
+  }, {});
+};

package/src/component/MaterialButton/{MaterialButton.css → MaterialButton.module.css}

@@ -1,64 +1,64 @@
-.material-btn {
-  position: relative;
-  overflow: hidden;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: Arial, sans-serif;
-  font-weight: 500;
-  color: white;
-  background-color: #4caf50;
-  transition: background-color 0.3s ease;
-  user-select: none;
-  outline: none;
-  padding: 10px 20px;
-}
-
-.material-btn:hover:not(.material-btn-disabled) {
-  background-color: #45a047;
-}
-
-.material-btn:active:not(.material-btn-disabled) {
-  background-color: #388e3c;
-}
-
-/* 不同大小 */
-.material-btn-small {
-  font-size: 12px;
-  padding: 6px 12px;
-}
-
-.material-btn-medium {
-  font-size: 14px;
-  padding: 10px 20px;
-}
-
-.material-btn-large {
-  font-size: 18px;
-  padding: 14px 28px;
-}
-
-/* 禁用 */
-.material-btn-disabled {
-  background-color: #e0e0e0;
-  color: #a0a0a0;
-  cursor: not-allowed;
-}
-
-/* 波纹效果 */
-.ripple {
-  position: absolute;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.6);
-  transform: scale(0);
-  animation: ripple-effect 600ms linear;
-  pointer-events: none;
-  z-index: 0;
-}
-
-@keyframes ripple-effect {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
+.materialBtn {
+  position: relative;
+  overflow: hidden;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: Arial, sans-serif;
+  font-weight: 500;
+  color: white;
+  background-color: #4caf50;
+  transition: background-color 0.3s ease;
+  user-select: none;
+  outline: none;
+  padding: 10px 20px;
+}
+
+.materialBtn:hover:not(.materialBtnDisabled) {
+  background-color: #45a047;
+}
+
+.materialBtn:active:not(.materialBtnDisabled) {
+  background-color: #388e3c;
+}
+
+/* 不同大小 */
+.materialBtnSmall {
+  font-size: 12px;
+  padding: 6px 12px;
+}
+
+.materialBtnMedium {
+  font-size: 14px;
+  padding: 10px 20px;
+}
+
+.materialBtnLarge {
+  font-size: 18px;
+  padding: 14px 28px;
+}
+
+/* 禁用 */
+.materialBtnDisabled {
+  background-color: #e0e0e0;
+  color: #a0a0a0;
+  cursor: not-allowed;
+}
+
+/* 波纹效果 */
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.6);
+  transform: scale(0);
+  animation: ripple-effect 600ms linear;
+  pointer-events: none;
+  z-index: 0;
+}
+
+@keyframes ripple-effect {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}

package/src/component/MaterialButton/index.jsx

@@ -1,58 +1,69 @@
-import React, { useRef } from "react";
-import "./MaterialButton.css"
-import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 继续导入
-
-export default function MaterialButton({
-  size = "medium",
-  sx = {},
-  style = {},
-  className = "",
-  onClick,
-  children,
-  disabled = false,
-  ...rest
-}) {
-  const buttonRef = useRef(null);
-
-  const sxStyle = useTangoStyle(sx);  // 用你的自定义hook解析sx样式
-  const combinedStyle = { ...sxStyle, ...style }; // style优先
-
-  function handleRipple(e) {
-    if (disabled) return;
-
-    const button = buttonRef.current;
-    const circle = document.createElement("span");
-    const diameter = Math.max(button.clientWidth, button.clientHeight);
-    const radius = diameter / 2;
-
-    circle.classList.add("ripple");
-    circle.style.width = circle.style.height = `${diameter}px`;
-    circle.style.left = `${e.clientX - button.getBoundingClientRect().left - radius}px`;
-    circle.style.top = `${e.clientY - button.getBoundingClientRect().top - radius}px`;
-
-    const ripple = button.querySelector(".ripple");
-    if (ripple) ripple.remove();
-
-    button.appendChild(circle);
-  }
-
-  const sizeClass = `material-btn-${size}`;
-  const combinedClassName = `material-btn ${sizeClass} ${className} ${disabled ? "material-btn-disabled" : ""}`;
-
-  return (
-    <button
-      ref={buttonRef}
-      className={combinedClassName}
-      style={combinedStyle}
-      onClick={(e) => {
-        handleRipple(e);
-        onClick && onClick(e);
-      }}
-      disabled={disabled}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-}
-
+import React, { useRef } from "react";
+import styles from "./MaterialButton.module.css"; // 使用模块化 CSS
+import { useTangoStyle } from "../CSSFab/useTangoStyle";
+
+export default function MaterialButton({
+  size = "medium",
+  sx = {},
+  style = {},
+  className = "",
+  onClick,
+  children,
+  disabled = false,
+  ...rest
+}) {
+   const buttonRef = useRef(null);
+
+  const sxStyle = useTangoStyle(sx);
+  const combinedStyle = { ...sxStyle, ...style };
+
+  function handleRipple(e) {
+    if (disabled) return;
+
+    const button = buttonRef.current;
+    const circle = document.createElement("span");
+    const diameter = Math.max(button.clientWidth, button.clientHeight);
+    const radius = diameter / 2;
+
+    circle.classList.add(styles.ripple); // 模块化样式
+    circle.style.width = circle.style.height = `${diameter}px`;
+    circle.style.left = `${e.clientX - button.getBoundingClientRect().left - radius}px`;
+    circle.style.top = `${e.clientY - button.getBoundingClientRect().top - radius}px`;
+
+    const oldRipple = button.querySelector(`.${styles.ripple}`);
+    if (oldRipple) oldRipple.remove();
+
+    button.appendChild(circle);
+  }
+
+  const sizeClass = styles[`materialBtn${capitalize(size)}`]; // 动态大小样式
+  const combinedClassName = [
+    styles.materialBtn,
+    sizeClass,
+    disabled ? styles.materialBtnDisabled : "",
+    className, // 用户自定义 className（外部样式）
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <button
+      ref={buttonRef}
+      className={combinedClassName}
+      style={combinedStyle}
+      onClick={(e) => {
+        handleRipple(e);
+        onClick?.(e);
+      }}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
+
+// 辅助函数：首字母大写
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}