tango-ui-cw 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.js +10 -10
  3. package/dist/index.mjs +889 -757
  4. package/package.json +1 -1
  5. package/src/component/CSSFab/useTangoStyle.jsx +182 -182
  6. package/src/component/MaterialButton/{MaterialButton.css → MaterialButton.module.css} +64 -64
  7. package/src/component/MaterialButton/index.jsx +69 -58
  8. package/src/component/MaterialInput/{MaterialInput.css → MaterialInput.module.css} +37 -33
  9. package/src/component/MaterialInput/index.jsx +34 -29
  10. package/src/component/TButton/TButton.module.css +184 -0
  11. package/src/component/TButton/index.jsx +81 -74
  12. package/src/component/TColorPicker/{TColorPicker.css → TColorPicker.module.css} +24 -24
  13. package/src/component/TColorPicker/index.jsx +107 -106
  14. package/src/component/TDate/index.jsx +146 -148
  15. package/src/component/TDatePicker/TDatePicker.module.css +12 -0
  16. package/src/component/TDatePicker/index.jsx +72 -72
  17. package/src/component/TDrawer/{TDrawer.css → TDrawer.module.css} +203 -202
  18. package/src/component/TDrawer/index.jsx +80 -74
  19. package/src/component/TInput/{TInput.css → TInput.module.css} +67 -80
  20. package/src/component/TInput/index.jsx +95 -102
  21. package/src/component/TLayout/TLayout.css +88 -88
  22. package/src/component/TLayout/index.jsx +77 -77
  23. package/src/component/TLine/TLine.module.css +52 -0
  24. package/src/component/TLine/index.jsx +48 -57
  25. package/src/component/TMark/{TMark.css → TMark.module.css} +6 -6
  26. package/src/component/TMark/index.jsx +69 -78
  27. package/src/component/TModal/{TModal.css → TModal.module.css} +109 -108
  28. package/src/component/TModal/index.jsx +75 -69
  29. package/src/component/TNotice/{TNotice.css → TNotice.module.css} +50 -52
  30. package/src/component/TNotice/index.jsx +37 -38
  31. package/src/component/TNotice/useNotice.jsx +54 -54
  32. package/src/component/TSearch/{TSearch.css → TSearch.module.css} +80 -90
  33. package/src/component/TSearch/index.jsx +86 -100
  34. package/src/component/TSpace/TSpace.module.css +43 -0
  35. package/src/component/TSpace/index.jsx +60 -60
  36. package/src/component/TTable/{TTable.css → TTable.module.css} +26 -26
  37. package/src/component/TTable/index.jsx +73 -77
  38. package/src/component/TTooltip/TTooltip.module.css +66 -0
  39. package/src/component/TTooltip/index.jsx +33 -25
  40. package/src/component/Tango/store.js +105 -105
  41. package/src/component/Tools/WaterMark/WaterMark.jsx +78 -78
  42. package/src/component/TButton/TButton.css +0 -270
  43. package/src/component/TDate/TDate.css +0 -0
  44. package/src/component/TDatePicker/TDatePicker.css +0 -13
  45. package/src/component/TLine/TLine.css +0 -54
  46. package/src/component/TSpace/TSpace.css +0 -43
  47. package/src/component/TTooltip/TTooltip.css +0 -105
@@ -1,90 +1,80 @@
1
- .search-input {
2
- width: 300px;
3
- height: 40px;
4
- border-radius: 8px;
5
- border: 1px solid #ccc;
6
- padding: 8px 12px;
7
- font-size: 14px;
8
- color: black;
9
- outline: none;
10
- transition: all 0.3s ease;
11
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
12
- background-color: #fff;
13
- }
14
-
15
- .search-input:hover {
16
- border-color: #888;
17
- }
18
-
19
- .search-input:focus {
20
- border-color: #4caf50; /* Modern blue accent */
21
- box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); /* Subtle glow on focus */
22
- }
23
-
24
- .search-input-small {
25
- height: 32px;
26
- font-size: 12px;
27
- padding: 6px 10px;
28
- }
29
-
30
- .search-input-medium {
31
- height: 40px;
32
- font-size: 14px;
33
- }
34
-
35
- .search-input-large {
36
- height: 48px;
37
- font-size: 16px;
38
- padding: 10px 14px;
39
- }
40
-
41
- .search-input-huge {
42
- height: 56px;
43
- font-size: 18px;
44
- padding: 12px 16px;
45
- }
46
-
47
- .search-input-disabled {
48
- background-color: #f5f5f5;
49
- color: #999;
50
- border-color: #ddd;
51
- cursor: not-allowed;
52
- box-shadow: none;
53
- }
54
-
55
- .search-input-error {
56
- border-color: #d93025;
57
- background-color: #fef2f2;
58
- color: #d93025;
59
- }
60
-
61
- .search-input-error:focus {
62
- box-shadow: 0 0 5px rgba(217, 48, 37, 0.5);
63
- }
64
- .search-button {
65
- position: absolute;
66
- right: 10px;
67
- top: 50%;
68
- transform: translateY(-50%);
69
- font-family: Arial, sans-serif;
70
- border: none;
71
- cursor: pointer;
72
- padding: 4px 8px;
73
- border-radius: 6px;
74
- transition: all 0.3s;
75
- -webkit-border-radius: 6px;
76
- -moz-border-radius: 6px;
77
- -ms-border-radius: 6px;
78
- -o-border-radius: 6px;
79
- letter-spacing: 2px;
80
- background: #4caf50;
81
- color: white;
82
- }
83
- .search-button:hover {
84
- transition: 0.3s;
85
- -webkit-animation: btn-content 1s;
86
- animation: btn-content 1s;
87
- outline: 0.1em solid transparent;
88
- outline-offset: 0.2em;
89
- box-shadow: 0 0 5px #4caf50;
90
- }
1
+ .searchContainer {
2
+ position: relative;
3
+ }
4
+
5
+ .searchInput {
6
+ width: 300px;
7
+ border-radius: 8px;
8
+ border: 1px solid #ccc;
9
+ padding: 8px 12px;
10
+ font-size: 14px;
11
+ color: black;
12
+ outline: none;
13
+ transition: all 0.3s ease;
14
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
15
+ background-color: #fff;
16
+ }
17
+
18
+ .searchInput:hover {
19
+ border-color: #888;
20
+ }
21
+
22
+ .searchInput:focus {
23
+ border-color: #4caf50;
24
+ box-shadow: 0 0 5px rgba(0, 120, 212, 0.5);
25
+ }
26
+
27
+ .searchInput_small {
28
+ height: 32px;
29
+ font-size: 12px;
30
+ padding: 6px 10px;
31
+ }
32
+
33
+ .searchInput_medium {
34
+ height: 40px;
35
+ font-size: 14px;
36
+ }
37
+
38
+ .searchInput_large {
39
+ height: 48px;
40
+ font-size: 16px;
41
+ padding: 10px 14px;
42
+ }
43
+
44
+ .searchInput_huge {
45
+ height: 56px;
46
+ font-size: 18px;
47
+ padding: 12px 16px;
48
+ }
49
+
50
+ .searchInputDisabled {
51
+ background-color: #f5f5f5;
52
+ color: #999;
53
+ border-color: #ddd;
54
+ cursor: not-allowed;
55
+ box-shadow: none;
56
+ }
57
+
58
+ .searchButton {
59
+ position: absolute;
60
+ right: 10px;
61
+ top: 50%;
62
+ transform: translateY(-50%);
63
+ font-family: Arial, sans-serif;
64
+ border: none;
65
+ cursor: pointer;
66
+ padding: 4px 8px;
67
+ border-radius: 6px;
68
+ transition: all 0.3s;
69
+ letter-spacing: 2px;
70
+ background: #4caf50;
71
+ color: white;
72
+ }
73
+
74
+ .searchButton:hover {
75
+ transition: 0.3s;
76
+ animation: btn-content 1s;
77
+ outline: 0.1em solid transparent;
78
+ outline-offset: 0.2em;
79
+ box-shadow: 0 0 5px #4caf50;
80
+ }
@@ -1,100 +1,86 @@
1
- import React, { useRef } from "react";
2
- import PropTypes from "prop-types";
3
- import "./TSearch.css"; // 样式文件
4
-
5
- export default function Search(props) {
6
- const {
7
- size = "medium",
8
- sx = {},
9
- style: userStyle = {},
10
- className: userClassName = "", // 允许用户自定义 className
11
- onSearch,
12
- value,
13
- defaultValue = "",
14
- disabled = false,
15
- placeholder = "",
16
- path = "",
17
- } = props;
18
-
19
- const inputRef = useRef(null); // 用于引用输入框的 DOM 节点
20
-
21
- // 使用类名控制输入框的样式
22
- const className = `search-input search-input-${size} ${
23
- disabled ? "search-input-disabled" : ""
24
- } ${userClassName}`;
25
-
26
- // 合并 sx style,确保 style 优先级更高
27
- const combinedStyle = { ...sx, ...userStyle };
28
-
29
- // 判断是否走受控模式
30
- const isControlled = value !== undefined && onSearch !== undefined;
31
-
32
- // 定义属性类型
33
- Search.propTypes = {
34
- size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
35
- sx: PropTypes.object, // 自定义样式对象
36
- style: PropTypes.object, // 用户传入的 style 属性,保证 style 属性优先级最高
37
- onSearch: PropTypes.func.isRequired, // 搜索事件回调
38
- className: PropTypes.string, // 添加 className PropTypes
39
- value: PropTypes.string, // 输入框的值 (受控模式)
40
- defaultValue: PropTypes.string, // 输入框的初始值 (非受控模式)
41
- disabled: PropTypes.bool, // 是否禁用
42
- placeholder: PropTypes.string, // 占位符
43
- path: PropTypes.string, // 占位符
44
- };
45
-
46
- // 默认属性
47
- Search.defaultProps = {
48
- size: "medium",
49
- sx: {},
50
- style: {},
51
- onSearch: () => {},
52
- className: "", // 默认值为空字符串
53
- value: undefined,
54
- defaultValue: "",
55
- disabled: false,
56
- placeholder: "请输入内容",
57
- path: "",
58
- };
59
-
60
- return (
61
- <div
62
- className="search-container"
63
- style={{ position: "relative", width: 300 }}
64
- >
65
- <input
66
- className={className}
67
- style={combinedStyle}
68
- ref={!isControlled ? inputRef : undefined} // 仅在非受控模式下绑定 ref
69
- onKeyDown={(e) =>
70
- e.key === "Enter" &&
71
- onSearch(isControlled ? value : inputRef.current.value)
72
- } // 回车触发 onSearch
73
- value={isControlled ? value : undefined}
74
- defaultValue={!isControlled ? defaultValue : undefined}
75
- disabled={disabled}
76
- placeholder={placeholder}
77
- />
78
- <button
79
- className="search-button"
80
- onClick={() => onSearch(isControlled ? value : inputRef.current.value)} // 点击按钮触发 onSearch
81
- >
82
- {path ? (
83
- <img
84
- src={path}
85
- alt="search-logo"
86
- style={{
87
- width: 16,
88
- height: 16,
89
- marginTop: 2,
90
- marginBottom: -3,
91
- }}
92
- />
93
- ) : (
94
- "搜索"
95
- )}
96
- </button>
97
- </div>
98
- );
99
- };
100
-
1
+ import React, { useRef } from "react";
2
+ import PropTypes from "prop-types";
3
+ import styles from "./TSearch.module.css";
4
+
5
+ export default function Search(props) {
6
+ const {
7
+ size = "medium",
8
+ sx = {},
9
+ style: userStyle = {},
10
+ className: userClassName = "", // 允许用户自定义 className
11
+ onSearch,
12
+ value,
13
+ defaultValue = "",
14
+ disabled = false,
15
+ placeholder = "",
16
+ path = "",
17
+ } = props;
18
+
19
+ const inputRef = useRef(null);
20
+
21
+ const className = `${styles.searchInput} ${styles[`searchInput_${size}`]} ${
22
+ disabled ? styles.searchInputDisabled : ""
23
+ } ${userClassName}`;
24
+
25
+ const combinedStyle = { ...sx, ...userStyle };
26
+ const isControlled = value !== undefined && onSearch !== undefined;
27
+
28
+ return (
29
+ <div className={styles.searchContainer} style={{ width: 300 }}>
30
+ <input
31
+ className={className}
32
+ style={combinedStyle}
33
+ ref={!isControlled ? inputRef : undefined}
34
+ onKeyDown={(e) =>
35
+ e.key === "Enter" &&
36
+ onSearch(isControlled ? value : inputRef.current.value)
37
+ }
38
+ value={isControlled ? value : undefined}
39
+ defaultValue={!isControlled ? defaultValue : undefined}
40
+ disabled={disabled}
41
+ placeholder={placeholder}
42
+ />
43
+ <button
44
+ className={styles.searchButton}
45
+ onClick={() => onSearch(isControlled ? value : inputRef.current.value)}
46
+ >
47
+ {path ? (
48
+ <img
49
+ src={path}
50
+ alt="search-icon"
51
+ style={{ width: 16, height: 16, marginTop: 2, marginBottom: -3 }}
52
+ />
53
+ ) : (
54
+ "搜索"
55
+ )}
56
+ </button>
57
+ </div>
58
+ );
59
+ };
60
+
61
+ TSearch.propTypes = {
62
+ size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
63
+ sx: PropTypes.object,
64
+ style: PropTypes.object,
65
+ onSearch: PropTypes.func.isRequired,
66
+ className: PropTypes.string,
67
+ value: PropTypes.string,
68
+ defaultValue: PropTypes.string,
69
+ disabled: PropTypes.bool,
70
+ placeholder: PropTypes.string,
71
+ path: PropTypes.string,
72
+ };
73
+
74
+ TSearch.defaultProps = {
75
+ size: "medium",
76
+ sx: {},
77
+ style: {},
78
+ onSearch: () => {},
79
+ className: "",
80
+ value: undefined,
81
+ defaultValue: "",
82
+ disabled: false,
83
+ placeholder: "请输入内容",
84
+ path: "",
85
+ };
86
+
@@ -0,0 +1,43 @@
1
+ .space,
2
+ .space_default {
3
+ width: auto;
4
+ height: auto;
5
+ }
6
+
7
+ .space_inline {
8
+ display: inline-block;
9
+ }
10
+
11
+ .space_fixed {
12
+ position: fixed;
13
+ }
14
+
15
+ .space_absolute {
16
+ position: absolute;
17
+ }
18
+
19
+ .space_relative {
20
+ position: relative;
21
+ }
22
+
23
+ .space_circle {
24
+ border-radius: 50%;
25
+ }
26
+
27
+ .space_triangle {
28
+ width: 0;
29
+ height: 0;
30
+ border-left: 50px solid transparent;
31
+ border-right: 50px solid transparent;
32
+ border-bottom: 100px solid #4caf50;
33
+ }
34
+
35
+ .space_halfCircle {
36
+ width: 100px;
37
+ height: 50px;
38
+ background: #4caf50;
39
+ border-top-left-radius: 100px;
40
+ border-top-right-radius: 100px;
41
+ border-bottom-left-radius: 0;
42
+ border-bottom-right-radius: 0;
43
+ }
@@ -1,60 +1,60 @@
1
- import React from "react";
2
- import PropTypes from "prop-types";
3
- import "./TSpace.css"; // 引入样式文件
4
- import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useTStyle 函数
5
-
6
- const Space = React.forwardRef((props, ref) => {
7
- const {
8
- sx = {},
9
- style: userStyle = {},
10
- className: userClassName = "",
11
- onClick,
12
- children,
13
- type = "default",
14
- } = props;
15
-
16
- const className = `space space-${type} ${userClassName}`;
17
- const sxStyle = useTangoStyle(sx); // 用于接收 sx 属性设置的样式
18
- const combinedStyle = { ...sxStyle, ...userStyle }; // 合并 sx 和 style
19
-
20
- return (
21
- <div
22
- ref={ref}
23
- style={combinedStyle}
24
- onClick={onClick}
25
- className={className}
26
- >
27
- {children}
28
- </div>
29
- );
30
- });
31
-
32
- // 定义 PropTypes
33
- Space.propTypes = {
34
- type: PropTypes.oneOf([
35
- "default",
36
- "inline",
37
- "circle",
38
- "triangle",
39
- "halfCircle",
40
- "fixed",
41
- "absolute",
42
- "relative",
43
- ]),
44
- sx: PropTypes.object,
45
- style: PropTypes.object,
46
- onClick: PropTypes.func,
47
- className: PropTypes.string,
48
- children: PropTypes.node.isRequired,
49
- };
50
-
51
- // 默认属性
52
- Space.defaultProps = {
53
- type: "default",
54
- sx: {},
55
- style: {},
56
- onClick: () => {},
57
- className: "",
58
- };
59
-
60
- export { Space }; // 使用命名导出
1
+ import React from "react";
2
+ import PropTypes from "prop-types";
3
+ import styles from "./TSpace.module.css";
4
+ import { useTangoStyle } from "../CSSFab/useTangoStyle";
5
+
6
+ const Space = React.forwardRef((props, ref) => {
7
+ const {
8
+ sx = {},
9
+ style: userStyle = {},
10
+ className: userClassName = "",
11
+ onClick,
12
+ children,
13
+ type = "default",
14
+ } = props;
15
+
16
+ const className = `${styles.space} ${styles[`space_${type}`] || ""} ${userClassName}`;
17
+ const sxStyle = useTangoStyle(sx);
18
+ const combinedStyle = { ...sxStyle, ...userStyle };
19
+
20
+ return (
21
+ <div
22
+ ref={ref}
23
+ style={combinedStyle}
24
+ onClick={onClick}
25
+ className={className}
26
+ >
27
+ {children}
28
+ </div>
29
+ );
30
+ });
31
+
32
+ // 定义 PropTypes
33
+ Space.propTypes = {
34
+ type: PropTypes.oneOf([
35
+ "default",
36
+ "inline",
37
+ "circle",
38
+ "triangle",
39
+ "halfCircle",
40
+ "fixed",
41
+ "absolute",
42
+ "relative",
43
+ ]),
44
+ sx: PropTypes.object,
45
+ style: PropTypes.object,
46
+ onClick: PropTypes.func,
47
+ className: PropTypes.string,
48
+ children: PropTypes.node.isRequired,
49
+ };
50
+
51
+ // 默认属性
52
+ Space.defaultProps = {
53
+ type: "default",
54
+ sx: {},
55
+ style: {},
56
+ onClick: () => {},
57
+ className: "",
58
+ };
59
+
60
+ export { Space }; // 使用命名导出
@@ -1,26 +1,26 @@
1
- .custom-table-wrapper {
2
- overflow-x: auto;
3
- }
4
-
5
- .custom-table {
6
- width: 100%;
7
- border-collapse: collapse;
8
- font-size: 14px;
9
- color: #333;
10
- }
11
-
12
- .custom-table thead {
13
- background-color: #4caf50;
14
- color: white;
15
- }
16
-
17
- .custom-table th,
18
- .custom-table td {
19
- border: 1px solid #ddd;
20
- padding: 10px;
21
- text-align: left;
22
- }
23
-
24
- .custom-table tbody tr:hover {
25
- background-color: #f1f1f1;
26
- }
1
+ .wrapper {
2
+ overflow-x: auto;
3
+ }
4
+
5
+ .table {
6
+ width: 100%;
7
+ border-collapse: collapse;
8
+ font-size: 14px;
9
+ color: #333;
10
+ }
11
+
12
+ .thead {
13
+ background-color: #4caf50;
14
+ color: white;
15
+ }
16
+
17
+ .table th,
18
+ .table td {
19
+ border: 1px solid #ddd;
20
+ padding: 10px;
21
+ text-align: left;
22
+ }
23
+
24
+ .table tbody tr:hover {
25
+ background-color: #f1f1f1;
26
+ }