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,33 +1,37 @@
1
- .materialInput .inputWrapper {
2
- position: relative;
3
- margin: 10px 0;
4
- width: 100%;
5
- }
6
-
7
- .materialInputField {
8
- width: 100%;
9
- padding: 16px 8px 8px 8px;
10
- font-size: 16px;
11
- border: none;
12
- border-bottom: 1px solid grey;
13
- background: transparent;
14
- outline: none;
15
- }
16
-
17
- .materialLabel {
18
- position: absolute;
19
- left: 8px;
20
- top: 16px;
21
- font-size: 16px;
22
- color: grey;
23
- transition: all 0.2s ease;
24
- pointer-events: none;
25
- }
26
-
27
- /* label 上浮时 */
28
- .filled ~ .materialLabel,
29
- .float {
30
- top: 2px;
31
- font-size: 12px;
32
- color: #45a047;
33
- }
1
+ .materialInput {
2
+ width: 100%;
3
+ }
4
+
5
+ .inputWrapper {
6
+ position: relative;
7
+ margin: 10px 0;
8
+ width: 100%;
9
+ }
10
+
11
+ .materialInputField {
12
+ width: 100%;
13
+ padding: 16px 8px 8px 8px;
14
+ font-size: 16px;
15
+ border: none;
16
+ border-bottom: 1px solid grey;
17
+ background: transparent;
18
+ outline: none;
19
+ }
20
+
21
+ .materialLabel {
22
+ position: absolute;
23
+ left: 8px;
24
+ top: 16px;
25
+ font-size: 16px;
26
+ color: grey;
27
+ transition: all 0.2s ease;
28
+ pointer-events: none;
29
+ }
30
+
31
+ /* 上浮状态样式 */
32
+ .filled ~ .materialLabel,
33
+ .float {
34
+ top: 2px;
35
+ font-size: 12px;
36
+ color: #45a047;
37
+ }
@@ -1,29 +1,34 @@
1
- // Material风格Input
2
- import { useState } from "react";
3
- import './MaterialInput.css';
4
-
5
- export default function FloatInput({ label, type = "text" }) {
6
- const [focused, setFocused] = useState(false);
7
- const [value, setValue] = useState("");
8
-
9
- const isFloating = focused || value;
10
-
11
- return (
12
- <div className="materialInput">
13
- <div className="inputWrapper">
14
- <input
15
- type={type}
16
- className={`materialInputField ${isFloating ? "filled" : ""}`}
17
- onFocus={() => setFocused(true)}
18
- onBlur={() => setFocused(false)}
19
- onChange={(e) => setValue(e.target.value)}
20
- value={value}
21
- />
22
- <label className={`materialLabel ${isFloating ? "float" : ""}`}>
23
- {label}
24
- </label>
25
- </div>
26
- </div>
27
- );
28
- }
29
-
1
+ // Material风格Input
2
+ import { useState } from "react";
3
+ import styles from "./MaterialInput.module.css";
4
+
5
+ export default function FloatInput({ label, type = "text" }) {
6
+ const [focused, setFocused] = useState(false);
7
+ const [value, setValue] = useState("");
8
+
9
+ const isFloating = focused || value;
10
+
11
+ return (
12
+ <div className={styles.materialInput}>
13
+ <div className={styles.inputWrapper}>
14
+ <input
15
+ type={type}
16
+ className={`${styles.materialInputField} ${
17
+ isFloating ? styles.filled : ""
18
+ }`}
19
+ onFocus={() => setFocused(true)}
20
+ onBlur={() => setFocused(false)}
21
+ onChange={(e) => setValue(e.target.value)}
22
+ value={value}
23
+ />
24
+ <label
25
+ className={`${styles.materialLabel} ${
26
+ isFloating ? styles.float : ""
27
+ }`}
28
+ >
29
+ {label}
30
+ </label>
31
+ </div>
32
+ </div>
33
+ );
34
+ }
@@ -0,0 +1,184 @@
1
+ /* TButton.module.css */
2
+
3
+ .btn {
4
+ font-family: Arial, sans-serif;
5
+ border: none;
6
+ cursor: pointer;
7
+ padding: 8px 16px;
8
+ border-radius: 8px;
9
+ transition: all 0.3s;
10
+ letter-spacing: 2px;
11
+ }
12
+
13
+ .btn:hover {
14
+ transition: 0.5s;
15
+ animation: btn-content 1s;
16
+ outline: 0.1em solid transparent;
17
+ outline-offset: 0.2em;
18
+ }
19
+
20
+ .btn-default {
21
+ background-color: rgb(213, 213, 213);
22
+ color: #000;
23
+ }
24
+
25
+ .btn-default:hover {
26
+ box-shadow: 0 0 0.4em 0 rgb(213, 213, 213);
27
+ }
28
+
29
+ .btn-transparent {
30
+ background-color: transparent;
31
+ color: black;
32
+ }
33
+
34
+ .btn-transparent:hover {
35
+ box-shadow: 0 0 0.4em 0 rgb(213, 213, 213);
36
+ }
37
+
38
+ .btn-danger {
39
+ background-color: #dc3545;
40
+ color: #fff;
41
+ }
42
+
43
+ .btn-danger:hover {
44
+ box-shadow: 0 0 0.4em 0 #dc3545;
45
+ }
46
+
47
+ .btn-success {
48
+ background-color: #4caf50;
49
+ color: #fff;
50
+ }
51
+
52
+ .btn-success:hover {
53
+ box-shadow: 0 0 0.4em 0 #4caf50;
54
+ }
55
+
56
+ .btn-outline {
57
+ background-color: transparent;
58
+ border-width: 1px;
59
+ border-color: #000;
60
+ }
61
+
62
+ .btn-default.btn-outline {
63
+ color: #000;
64
+ border: 1px solid #d5d5d5;
65
+ }
66
+
67
+ .btn-default.btn-outline:hover {
68
+ box-shadow: 0 0 0.4em 0 #d5d5d5;
69
+ }
70
+
71
+ .btn-success.btn-outline {
72
+ color: #28a745;
73
+ border: 1px solid #28a745;
74
+ }
75
+
76
+ .btn-success.btn-outline:hover {
77
+ box-shadow: 0 0 0.4em 0 #28a745;
78
+ }
79
+
80
+ .btn-danger.btn-outline {
81
+ color: #dc3545;
82
+ border: 1px solid #dc3545;
83
+ }
84
+
85
+ .btn-danger.btn-outline:hover {
86
+ box-shadow: 0 0 0.4em 0 #dc3545;
87
+ }
88
+
89
+ .btn-transparent.btn-outline {
90
+ color: black;
91
+ border: 1px solid #6c757d;
92
+ }
93
+
94
+ .btn-transparent.btn-outline:hover {
95
+ box-shadow: 0 0 0.4em 0 #6c757d;
96
+ }
97
+
98
+ .btn-Neumorphism {
99
+ background: #e0e0e0;
100
+ box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
101
+ color: white;
102
+ }
103
+
104
+ .btn-Neumorphism:hover {
105
+ box-shadow: inset 4px 4px 8px rgba(190, 190, 190, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.8), 4px 4px 8px rgba(190, 190, 190, 0.6), -4px -4px 8px rgba(255, 255, 255, 0.8);
106
+ transform: translateY(-2px);
107
+ }
108
+
109
+ .btn-Neumorphism:active {
110
+ box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
111
+ transform: translateY(1px);
112
+ }
113
+
114
+ .btn-success.btn-Neumorphism {
115
+ background-color: #28a745;
116
+ box-shadow: inset 4px 4px 8px rgba(20, 90, 37, 0.6), inset -4px -4px 8px rgba(50, 200, 100, 0.8), 4px 4px 8px rgba(20, 90, 37, 0.3), -4px -4px 8px rgba(50, 200, 100, 0.5);
117
+ }
118
+
119
+ .btn-success.btn-Neumorphism:hover {
120
+ box-shadow: inset 3px 3px 6px rgba(20, 90, 37, 0.8), inset -3px -3px 6px rgba(50, 200, 100, 0.9), 3px 3px 6px rgba(20, 90, 37, 0.5), -3px -3px 6px rgba(50, 200, 100, 0.7);
121
+ }
122
+
123
+ .btn-success.btn-Neumorphism:active {
124
+ box-shadow: inset 4px 4px 8px rgba(20, 90, 37, 0.9), inset -4px -4px 8px rgba(50, 200, 100, 1);
125
+ }
126
+
127
+ .btn-transparent.btn-Neumorphism {
128
+ background-color: transparent;
129
+ color: white;
130
+ border: 1px solid rgba(0, 0, 0, 0.1);
131
+ box-shadow: 4px 4px 8px rgba(190, 190, 190, 0.6), -4px -4px 8px rgba(255, 255, 255, 0.8);
132
+ }
133
+
134
+ .btn-transparent.btn-Neumorphism:hover {
135
+ box-shadow: inset 4px 4px 8px rgba(190, 190, 190, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.8), 0 0 0.4em rgba(213, 213, 213, 0.8);
136
+ }
137
+
138
+ .btn-transparent.btn-Neumorphism:active {
139
+ box-shadow: inset 6px 6px 12px rgba(190, 190, 190, 0.8), inset -6px -6px 12px rgba(255, 255, 255, 1);
140
+ }
141
+
142
+ .btn-danger.btn-Neumorphism {
143
+ background-color: #dc3545;
144
+ box-shadow: 4px 4px 8px rgba(145, 40, 50, 0.6), -4px -4px 8px rgba(255, 102, 112, 0.8);
145
+ }
146
+
147
+ .btn-danger.btn-Neumorphism:hover {
148
+ box-shadow: inset 4px 4px 8px rgba(145, 40, 50, 0.6), inset -4px -4px 8px rgba(255, 102, 112, 0.8), 0 0 0.4em rgba(220, 53, 69, 0.8);
149
+ }
150
+
151
+ .btn-danger.btn-Neumorphism:active {
152
+ box-shadow: inset 6px 6px 12px rgba(145, 40, 50, 0.8), inset -6px -6px 12px rgba(255, 102, 112, 1);
153
+ }
154
+
155
+ .btn-small {
156
+ font-size: 12px;
157
+ padding: 4px 8px;
158
+ }
159
+
160
+ .btn-medium {
161
+ font-size: 14px;
162
+ padding: 8px 16px;
163
+ }
164
+
165
+ .btn-large {
166
+ font-size: 16px;
167
+ padding: 12px 20px;
168
+ }
169
+
170
+ .btn-huge {
171
+ font-size: 25px;
172
+ padding: 18px 45px;
173
+ }
174
+
175
+ .btn-disabled {
176
+ background-color: #e0e0e0;
177
+ color: #a0a0a0;
178
+ cursor: not-allowed;
179
+ }
180
+
181
+ .btn-disabled:hover {
182
+ transition: 0s;
183
+ box-shadow: none;
184
+ }
@@ -1,74 +1,81 @@
1
- // 封装的button组件
2
- import React from "react";
3
- import PropTypes from "prop-types";
4
- import "./TButton.css"; // 引入样式文件
5
- import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useFastStyle 函数
6
-
7
- export default function Button(props) {
8
- // 接收属性参数,调整按钮样式
9
- const {
10
- type = "default",
11
- size = "medium",
12
- sx = {},
13
- style: userStyle = {},
14
- className: userClassName = "", // 允许用户自定义 className
15
- onClick,
16
- children,
17
- disabled,
18
- outline,
19
- Neumorphism,
20
- } = props;
21
-
22
- // 使用类名控制按钮的样式:按钮类型,按钮尺寸,按钮是否禁用
23
- const className = `btn btn-${type} btn-${size} ${
24
- disabled ? "btn-disabled" : ""
25
- } ${outline ? "btn-outline" : ""} ${
26
- Neumorphism ? "btn-Neumorphism" : ""
27
- } ${userClassName}`; // 合并用户传入的 className
28
-
29
- // 用于接收sx属性设置的属性样式
30
- const sxStyle = useTangoStyle(sx);
31
-
32
- // 合并 sx 和 style,确保 style 优先级更高
33
- const combinedStyle = { ...sxStyle, ...userStyle };
34
-
35
- // 定义属性类型
36
- Button.propTypes = {
37
- type: PropTypes.oneOf(["default", "transparent", "danger", "success"]), // 按钮类型:默认、透明、警告、成功
38
- size: PropTypes.oneOf(["small", "medium", "large", "huge"]), // 按钮大小
39
- sx: PropTypes.object, // 自定义样式对象
40
- style: PropTypes.object, // 用户传入的 style 属性,保证style属性优先级最高
41
- onClick: PropTypes.func, // 点击事件
42
- className: PropTypes.string, // 添加 className PropTypes
43
- children: PropTypes.node.isRequired, // 按钮内容
44
- disabled: PropTypes.bool, // 是否禁用
45
- outline: PropTypes.bool, // 是否为轮廓按钮
46
- Neumorphism: PropTypes.bool, // 是否为新拟态风格按钮
47
- };
48
-
49
- // 默认属性
50
- Button.defaultProps = {
51
- type: "default",
52
- size: "medium",
53
- sx: {},
54
- style: {},
55
- onClick: () => {},
56
- className: "", // 默认值为空字符串
57
- disabled: false,
58
- outline: false,
59
- Neumorphism: false,
60
- };
61
-
62
- return (
63
- <button
64
- className={className}
65
- style={combinedStyle} // 应用解析后的内联样式
66
- onClick={onClick}
67
- disabled={disabled}
68
- outline={outline}
69
- Neumorphism={Neumorphism}
70
- >
71
- {children}
72
- </button>
73
- );
74
- };
1
+ // 封装的button组件
2
+ import React from "react";
3
+ import PropTypes from "prop-types";
4
+ import styles from './TButton.module.css' // 引入样式文件
5
+ import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useFastStyle 函数
6
+
7
+ export default function Button(props) {
8
+ // 接收属性参数,调整按钮样式
9
+ const {
10
+ type = "default",
11
+ size = "medium",
12
+ sx = {},
13
+ style: userStyle = {},
14
+ className: userClassName = "", // 允许用户自定义 className
15
+ onClick,
16
+ children,
17
+ disabled,
18
+ outline,
19
+ Neumorphism,
20
+ } = props;
21
+
22
+ // 使用类名控制按钮的样式:按钮类型,按钮尺寸,按钮是否禁用
23
+ const className = [
24
+ styles.btn,
25
+ styles[`btn-${type}`],
26
+ styles[`btn-${size}`],
27
+ disabled ? styles['btn-disabled'] : '',
28
+ outline ? styles['btn-outline'] : '',
29
+ Neumorphism ? styles['btn-Neumorphism'] : '',
30
+ userClassName // 用户传入的 className 保持字符串形式
31
+ ]
32
+ .filter(Boolean) // 过滤掉空值
33
+ .join(" ");
34
+ // 合并用户传入的 className
35
+
36
+ // 用于接收sx属性设置的属性样式
37
+ const sxStyle = useTangoStyle(sx);
38
+
39
+ // 合并 sx style,确保 style 优先级更高
40
+ const combinedStyle = { ...sxStyle, ...userStyle };
41
+
42
+ // 定义属性类型
43
+ TButton.propTypes = {
44
+ type: PropTypes.oneOf(["default", "transparent", "danger", "success"]), // 按钮类型:默认、透明、警告、成功
45
+ size: PropTypes.oneOf(["small", "medium", "large", "huge"]), // 按钮大小
46
+ sx: PropTypes.object, // 自定义样式对象
47
+ style: PropTypes.object, // 用户传入的 style 属性,保证style属性优先级最高
48
+ onClick: PropTypes.func, // 点击事件
49
+ className: PropTypes.string, // 添加 className PropTypes
50
+ children: PropTypes.node.isRequired, // 按钮内容
51
+ disabled: PropTypes.bool, // 是否禁用
52
+ outline: PropTypes.bool, // 是否为轮廓按钮
53
+ Neumorphism: PropTypes.bool, // 是否为新拟态风格按钮
54
+ };
55
+
56
+ // 默认属性
57
+ TButton.defaultProps = {
58
+ type: "default",
59
+ size: "medium",
60
+ sx: {},
61
+ style: {},
62
+ onClick: () => {},
63
+ className: "", // 默认值为空字符串
64
+ disabled: false,
65
+ outline: false,
66
+ Neumorphism: false,
67
+ };
68
+
69
+ return (
70
+ <button
71
+ className={className}
72
+ style={combinedStyle} // 应用解析后的内联样式
73
+ onClick={onClick}
74
+ disabled={disabled}
75
+ outline={outline}
76
+ Neumorphism={Neumorphism}
77
+ >
78
+ {children}
79
+ </button>
80
+ );
81
+ };
@@ -1,24 +1,24 @@
1
- .color-picker {
2
- width: 35px;
3
- height: 35px;
4
- /* border-radius:10px; */
5
- padding: 0px 1px;
6
- background: white;
7
- }
8
-
9
- .color-picker-disabled {
10
- cursor: not-allowed;
11
- }
12
-
13
- .color-picker-wrapper {
14
- display: flex;
15
- align-items: center;
16
- gap: 10px;
17
- }
18
-
19
- .color-text {
20
- display: flex;
21
- flex-direction: column;
22
- font-size: 12px;
23
- color: #555;
24
- }
1
+ .colorPicker {
2
+ width: 35px;
3
+ height: 35px;
4
+ padding: 0px 1px;
5
+ background: white;
6
+ }
7
+
8
+ .colorPickerDisabled {
9
+ cursor: not-allowed;
10
+ }
11
+
12
+ .colorPickerWrapper {
13
+ display: flex;
14
+ align-items: center;
15
+ gap: 10px;
16
+ }
17
+
18
+ .colorText {
19
+ display: flex;
20
+ flex-direction: column;
21
+ font-size: 12px;
22
+ color: #555;
23
+ }
24
+