tango-ui-cw 0.1.0 → 0.2.0

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

@@ -1,90 +1,80 @@
-.search-input {
-  width: 300px;
-  height: 40px;
-  border-radius: 8px;
-  border: 1px solid #ccc;
-  padding: 8px 12px;
-  font-size: 14px;
-  color: black;
-  outline: none;
-  transition: all 0.3s ease;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
-}
-
-.search-input:hover {
-  border-color: #888;
-}
-
-.search-input:focus {
-  border-color: #4caf50; /* Modern blue accent */
-  box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); /* Subtle glow on focus */
-}
-
-.search-input-small {
-  height: 32px;
-  font-size: 12px;
-  padding: 6px 10px;
-}
-
-.search-input-medium {
-  height: 40px;
-  font-size: 14px;
-}
-
-.search-input-large {
-  height: 48px;
-  font-size: 16px;
-  padding: 10px 14px;
-}
-
-.search-input-huge {
-  height: 56px;
-  font-size: 18px;
-  padding: 12px 16px;
-}
-
-.search-input-disabled {
-  background-color: #f5f5f5;
-  color: #999;
-  border-color: #ddd;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-.search-input-error {
-  border-color: #d93025;
-  background-color: #fef2f2;
-  color: #d93025;
-}
-
-.search-input-error:focus {
-  box-shadow: 0 0 5px rgba(217, 48, 37, 0.5);
-}
-.search-button {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-family: Arial, sans-serif;
-  border: none;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 6px;
-  transition: all 0.3s;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  -ms-border-radius: 6px;
-  -o-border-radius: 6px;
-  letter-spacing: 2px;
-  background: #4caf50;
-  color: white;
-}
-.search-button:hover {
-  transition: 0.3s;
-  -webkit-animation: btn-content 1s;
-  animation: btn-content 1s;
-  outline: 0.1em solid transparent;
-  outline-offset: 0.2em;
-  box-shadow: 0 0 5px #4caf50;
-}
+.searchContainer {
+  position: relative;
+}
+
+.searchInput {
+  width: 300px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: black;
+  outline: none;
+  transition: all 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+}
+
+.searchInput:hover {
+  border-color: #888;
+}
+
+.searchInput:focus {
+  border-color: #4caf50;
+  box-shadow: 0 0 5px rgba(0, 120, 212, 0.5);
+}
+
+.searchInput_small {
+  height: 32px;
+  font-size: 12px;
+  padding: 6px 10px;
+}
+
+.searchInput_medium {
+  height: 40px;
+  font-size: 14px;
+}
+
+.searchInput_large {
+  height: 48px;
+  font-size: 16px;
+  padding: 10px 14px;
+}
+
+.searchInput_huge {
+  height: 56px;
+  font-size: 18px;
+  padding: 12px 16px;
+}
+
+.searchInputDisabled {
+  background-color: #f5f5f5;
+  color: #999;
+  border-color: #ddd;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.searchButton {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-family: Arial, sans-serif;
+  border: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.3s;
+  letter-spacing: 2px;
+  background: #4caf50;
+  color: white;
+}
+
+.searchButton:hover {
+  transition: 0.3s;
+  animation: btn-content 1s;
+  outline: 0.1em solid transparent;
+  outline-offset: 0.2em;
+  box-shadow: 0 0 5px #4caf50;
+}

package/src/component/TSearch/index.jsx

@@ -1,100 +1,86 @@
-import React, { useRef } from "react";
-import PropTypes from "prop-types";
-import "./TSearch.css"; // 样式文件
-
-export default function Search(props) {
-  const {
-    size = "medium",
-    sx = {},
-    style: userStyle = {},
-    className: userClassName = "", // 允许用户自定义 className
-    onSearch,
-    value,
-    defaultValue = "",
-    disabled = false,
-    placeholder = "",
-    path = "",
-  } = props;
-
-  const inputRef = useRef(null); // 用于引用输入框的 DOM 节点
-
-  // 使用类名控制输入框的样式
-  const className = `search-input search-input-${size} ${
-    disabled ? "search-input-disabled" : ""
-  } ${userClassName}`;
-
-  // 合并 sx 和 style，确保 style 优先级更高
-  const combinedStyle = { ...sx, ...userStyle };
-
-  // 判断是否走受控模式
-  const isControlled = value !== undefined && onSearch !== undefined;
-
-  // 定义属性类型
-  Search.propTypes = {
-    size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
-    sx: PropTypes.object, // 自定义样式对象
-    style: PropTypes.object, // 用户传入的 style 属性，保证 style 属性优先级最高
-    onSearch: PropTypes.func.isRequired, // 搜索事件回调
-    className: PropTypes.string, // 添加 className PropTypes
-    value: PropTypes.string, // 输入框的值 (受控模式)
-    defaultValue: PropTypes.string, // 输入框的初始值 (非受控模式)
-    disabled: PropTypes.bool, // 是否禁用
-    placeholder: PropTypes.string, // 占位符
-    path: PropTypes.string, // 占位符
-  };
-
-  // 默认属性
-  Search.defaultProps = {
-    size: "medium",
-    sx: {},
-    style: {},
-    onSearch: () => {},
-    className: "", // 默认值为空字符串
-    value: undefined,
-    defaultValue: "",
-    disabled: false,
-    placeholder: "请输入内容",
-    path: "",
-  };
-
-  return (
-    <div
-      className="search-container"
-      style={{ position: "relative", width: 300 }}
-    >
-      <input
-        className={className}
-        style={combinedStyle}
-        ref={!isControlled ? inputRef : undefined} // 仅在非受控模式下绑定 ref
-        onKeyDown={(e) =>
-          e.key === "Enter" &&
-          onSearch(isControlled ? value : inputRef.current.value)
-        } // 回车触发 onSearch
-        value={isControlled ? value : undefined}
-        defaultValue={!isControlled ? defaultValue : undefined}
-        disabled={disabled}
-        placeholder={placeholder}
-      />
-      <button
-        className="search-button"
-        onClick={() => onSearch(isControlled ? value : inputRef.current.value)} // 点击按钮触发 onSearch
-      >
-        {path ? (
-          <img
-            src={path}
-            alt="search-logo"
-            style={{
-              width: 16,
-              height: 16,
-              marginTop: 2,
-              marginBottom: -3,
-            }}
-          />
-        ) : (
-          "搜索"
-        )}
-      </button>
-    </div>
-  );
-};
-
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import styles from "./TSearch.module.css";
+
+export default function Search(props) {
+  const {
+    size = "medium",
+    sx = {},
+    style: userStyle = {},
+    className: userClassName = "", // 允许用户自定义 className
+    onSearch,
+    value,
+    defaultValue = "",
+    disabled = false,
+    placeholder = "",
+    path = "",
+  } = props;
+
+  const inputRef = useRef(null);
+
+  const className = `${styles.searchInput} ${styles[`searchInput_${size}`]} ${
+    disabled ? styles.searchInputDisabled : ""
+  } ${userClassName}`;
+
+  const combinedStyle = { ...sx, ...userStyle };
+  const isControlled = value !== undefined && onSearch !== undefined;
+
+  return (
+    <div className={styles.searchContainer} style={{ width: 300 }}>
+      <input
+        className={className}
+        style={combinedStyle}
+        ref={!isControlled ? inputRef : undefined}
+        onKeyDown={(e) =>
+          e.key === "Enter" &&
+          onSearch(isControlled ? value : inputRef.current.value)
+        }
+        value={isControlled ? value : undefined}
+        defaultValue={!isControlled ? defaultValue : undefined}
+        disabled={disabled}
+        placeholder={placeholder}
+      />
+      <button
+        className={styles.searchButton}
+        onClick={() => onSearch(isControlled ? value : inputRef.current.value)}
+      >
+        {path ? (
+          <img
+            src={path}
+            alt="search-icon"
+            style={{ width: 16, height: 16, marginTop: 2, marginBottom: -3 }}
+          />
+        ) : (
+          "搜索"
+        )}
+      </button>
+    </div>
+  );
+};
+
+TSearch.propTypes = {
+  size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
+  sx: PropTypes.object,
+  style: PropTypes.object,
+  onSearch: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  disabled: PropTypes.bool,
+  placeholder: PropTypes.string,
+  path: PropTypes.string,
+};
+
+TSearch.defaultProps = {
+  size: "medium",
+  sx: {},
+  style: {},
+  onSearch: () => {},
+  className: "",
+  value: undefined,
+  defaultValue: "",
+  disabled: false,
+  placeholder: "请输入内容",
+  path: "",
+};
+

package/src/component/TSpace/TSpace.module.css

@@ -0,0 +1,43 @@
+.space,
+.space_default {
+  width: auto;
+  height: auto;
+}
+
+.space_inline {
+  display: inline-block;
+}
+
+.space_fixed {
+  position: fixed;
+}
+
+.space_absolute {
+  position: absolute;
+}
+
+.space_relative {
+  position: relative;
+}
+
+.space_circle {
+  border-radius: 50%;
+}
+
+.space_triangle {
+  width: 0;
+  height: 0;
+  border-left: 50px solid transparent;
+  border-right: 50px solid transparent;
+  border-bottom: 100px solid #4caf50;
+}
+
+.space_halfCircle {
+  width: 100px;
+  height: 50px;
+  background: #4caf50;
+  border-top-left-radius: 100px;
+  border-top-right-radius: 100px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}

package/src/component/TSpace/index.jsx

@@ -1,60 +1,60 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./TSpace.css"; // 引入样式文件
-import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useTStyle 函数
-
-const Space = React.forwardRef((props, ref) => {
-  const {
-    sx = {},
-    style: userStyle = {},
-    className: userClassName = "",
-    onClick,
-    children,
-    type = "default",
-  } = props;
-
-  const className = `space space-${type} ${userClassName}`;
-  const sxStyle = useTangoStyle(sx); // 用于接收 sx 属性设置的样式
-  const combinedStyle = { ...sxStyle, ...userStyle }; // 合并 sx 和 style
-
-  return (
-    <div
-      ref={ref}
-      style={combinedStyle}
-      onClick={onClick}
-      className={className}
-    >
-      {children}
-    </div>
-  );
-});
-
-// 定义 PropTypes
-Space.propTypes = {
-  type: PropTypes.oneOf([
-    "default",
-    "inline",
-    "circle",
-    "triangle",
-    "halfCircle",
-    "fixed",
-    "absolute",
-    "relative",
-  ]),
-  sx: PropTypes.object,
-  style: PropTypes.object,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};
-
-// 默认属性
-Space.defaultProps = {
-  type: "default",
-  sx: {},
-  style: {},
-  onClick: () => {},
-  className: "",
-};
-
-export { Space };  // 使用命名导出
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./TSpace.module.css";
+import { useTangoStyle } from "../CSSFab/useTangoStyle";
+
+const Space = React.forwardRef((props, ref) => {
+  const {
+    sx = {},
+    style: userStyle = {},
+    className: userClassName = "",
+    onClick,
+    children,
+    type = "default",
+  } = props;
+
+  const className = `${styles.space} ${styles[`space_${type}`] || ""} ${userClassName}`;
+  const sxStyle = useTangoStyle(sx);
+  const combinedStyle = { ...sxStyle, ...userStyle };
+  
+  return (
+    <div
+      ref={ref}
+      style={combinedStyle}
+      onClick={onClick}
+      className={className}
+    >
+      {children}
+    </div>
+  );
+});
+
+// 定义 PropTypes
+Space.propTypes = {
+  type: PropTypes.oneOf([
+    "default",
+    "inline",
+    "circle",
+    "triangle",
+    "halfCircle",
+    "fixed",
+    "absolute",
+    "relative",
+  ]),
+  sx: PropTypes.object,
+  style: PropTypes.object,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+// 默认属性
+Space.defaultProps = {
+  type: "default",
+  sx: {},
+  style: {},
+  onClick: () => {},
+  className: "",
+};
+
+export { Space };  // 使用命名导出

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

@@ -1,26 +1,26 @@
-.custom-table-wrapper {
-  overflow-x: auto;
-}
-
-.custom-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-  color: #333;
-}
-
-.custom-table thead {
-  background-color: #4caf50;
-  color: white;
-}
-
-.custom-table th,
-.custom-table td {
-  border: 1px solid #ddd;
-  padding: 10px;
-  text-align: left;
-}
-
-.custom-table tbody tr:hover {
-  background-color: #f1f1f1;
-}
+.wrapper {
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  color: #333;
+}
+
+.thead {
+  background-color: #4caf50;
+  color: white;
+}
+
+.table th,
+.table td {
+  border: 1px solid #ddd;
+  padding: 10px;
+  text-align: left;
+}
+
+.table tbody tr:hover {
+  background-color: #f1f1f1;
+}