tango-ui-cw 0.1.0 → 0.2.0

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,72 +1,72 @@
1
- import React, { useState } from "react";
2
- import PropTypes from "prop-types";
3
- import "./TDatePicker.css";
4
- import { useTangoStyle } from "../CSSFab/useTangoStyle";
5
-
6
- export default function DatePicker(props) {
7
- const {
8
- sx = {},
9
- style: userStyle = {},
10
- className: userClassName = "",
11
- disabled,
12
- onChange,
13
- time,
14
- } = props;
15
-
16
- const [value, setValue] = useState("");
17
-
18
- // 格式化日期函数
19
- const formatDate = (date) => {
20
- const d = new Date(date);
21
- const year = d.getFullYear();
22
- const month = (d.getMonth() + 1).toString().padStart(2, "0");
23
- const day = d.getDate().toString().padStart(2, "0");
24
- const hours = d.getHours().toString().padStart(2, "0");
25
- const minutes = d.getMinutes().toString().padStart(2, "0");
26
- return `${year}-${month}-${day} ${hours}:${minutes}`;
27
- };
28
-
29
- const handleChange = (e) => {
30
- const val = e.target.value;
31
- setValue(val);
32
-
33
- // 如果选择了时间,格式化并调用 onChange
34
- const formattedValue = time ? formatDate(val) : val;
35
- if (onChange) onChange(formattedValue, val); // 格式化后传递给 onChange
36
- };
37
-
38
- const inputType = time ? "datetime-local" : "date";
39
- const className = `date-picker ${disabled ? "date-picker-disabled" : ""} ${userClassName}`;
40
-
41
- const sxStyle = useTangoStyle(sx);
42
- const combinedStyle = { ...sxStyle, ...userStyle };
43
-
44
- return (
45
- <input
46
- type={inputType}
47
- value={value}
48
- onChange={handleChange}
49
- className={className}
50
- style={combinedStyle}
51
- disabled={disabled}
52
- />
53
- );
54
- };
55
-
56
- DatePicker.propTypes = {
57
- sx: PropTypes.object,
58
- style: PropTypes.object,
59
- className: PropTypes.string,
60
- disabled: PropTypes.bool,
61
- onChange: PropTypes.func,
62
- time: PropTypes.bool, // 是否启用时间选择
63
- };
64
-
65
- DatePicker.defaultProps = {
66
- sx: {},
67
- style: {},
68
- className: "",
69
- disabled: false,
70
- onChange: () => {},
71
- time: false,
72
- };
1
+ import React, { useState } from "react";
2
+ import PropTypes from "prop-types";
3
+ import styles from "./TDatePicker.module.css";
4
+ import { useTangoStyle } from "../CSSFab/useTangoStyle";
5
+
6
+ export default function DatePicker(props) {
7
+ const {
8
+ sx = {},
9
+ style: userStyle = {},
10
+ className: userClassName = "",
11
+ disabled,
12
+ onChange,
13
+ time,
14
+ } = props;
15
+
16
+ const [value, setValue] = useState("");
17
+
18
+ const formatDate = (date) => {
19
+ const d = new Date(date);
20
+ const year = d.getFullYear();
21
+ const month = (d.getMonth() + 1).toString().padStart(2, "0");
22
+ const day = d.getDate().toString().padStart(2, "0");
23
+ const hours = d.getHours().toString().padStart(2, "0");
24
+ const minutes = d.getMinutes().toString().padStart(2, "0");
25
+ return `${year}-${month}-${day} ${hours}:${minutes}`;
26
+ };
27
+
28
+ const handleChange = (e) => {
29
+ const val = e.target.value;
30
+ setValue(val);
31
+ const formattedValue = time ? formatDate(val) : val;
32
+ if (onChange) onChange(formattedValue, val);
33
+ };
34
+
35
+ const inputType = time ? "datetime-local" : "date";
36
+
37
+ const className = `${styles.datePicker} ${
38
+ disabled ? styles.datePickerDisabled : ""
39
+ } ${userClassName}`;
40
+
41
+ const sxStyle = useTangoStyle(sx);
42
+ const combinedStyle = { ...sxStyle, ...userStyle };
43
+
44
+ return (
45
+ <input
46
+ type={inputType}
47
+ value={value}
48
+ onChange={handleChange}
49
+ className={className}
50
+ style={combinedStyle}
51
+ disabled={disabled}
52
+ />
53
+ );
54
+ }
55
+
56
+ DatePicker.propTypes = {
57
+ sx: PropTypes.object,
58
+ style: PropTypes.object,
59
+ className: PropTypes.string,
60
+ disabled: PropTypes.bool,
61
+ onChange: PropTypes.func,
62
+ time: PropTypes.bool,
63
+ };
64
+
65
+ DatePicker.defaultProps = {
66
+ sx: {},
67
+ style: {},
68
+ className: "",
69
+ disabled: false,
70
+ onChange: () => {},
71
+ time: false,
72
+ };
@@ -1,202 +1,203 @@
1
- .drawer-overlay {
2
- position: fixed;
3
- top: 0;
4
- left: 0;
5
- width: 100vw;
6
- height: 100vh;
7
- background-color: rgba(0, 0, 0, 0.5);
8
- z-index: 999;
9
- display: flex;
10
- justify-content: flex-end;
11
- }
12
-
13
- .drawer-container {
14
- background-color: #fff;
15
- padding: 20px;
16
- width: 320px;
17
- height:100vh;
18
- position: relative;
19
- }
20
-
21
- .drawer-header {
22
- font-size: 18px;
23
- font-weight: bold;
24
- margin-bottom: 16px;
25
- display: flex;
26
- justify-content: space-between;
27
- }
28
-
29
- .drawer-content {
30
- margin-bottom: 24px;
31
- }
32
-
33
- .drawer-footer {
34
- position: absolute;
35
- bottom: 0;
36
- right: 0; /* 确保按钮贴靠右侧 */
37
- display: flex;
38
- gap: 10px; /* 按钮间隔 */
39
- padding: 10px 20px;
40
- background-color: #fff;
41
- }
42
-
43
- .drawer-closeBtn {
44
- background-image: url('../../assets/关闭.png');
45
- width: 15px;
46
- height: 15px;
47
- background-size: 100% 100%;
48
- cursor: pointer;
49
- }
50
- /* Drawer 位置 */
51
- .drawer-right {
52
- height: 100vh;
53
- width: 320px;
54
- position: fixed;
55
- top: 0;
56
- right: 0;
57
- }
58
-
59
- .drawer-left {
60
- height: 100vh;
61
- width: 320px;
62
- position: fixed;
63
- top: 0;
64
- left: 0;
65
- }
66
-
67
- .drawer-top {
68
- height: 300px;
69
- width: 100vw;
70
- position: fixed;
71
- top: 0;
72
- left: 0;
73
- }
74
-
75
- .drawer-bottom {
76
- height: 300px;
77
- width: 100vw;
78
- position: fixed;
79
- bottom: 0;
80
- left: 0;
81
- }
82
-
83
- /* 动画 */
84
- @keyframes come-in-right {
85
- from {
86
- transform: translateX(100%);
87
- opacity: 0;
88
- }
89
- to {
90
- transform: translateX(0);
91
- opacity: 1;
92
- }
93
- }
94
-
95
- @keyframes come-out-right {
96
- from {
97
- transform: translateX(0);
98
- opacity: 1;
99
- }
100
- to {
101
- transform: translateX(100%);
102
- opacity: 0;
103
- }
104
- }
105
-
106
- @keyframes come-in-left {
107
- from {
108
- transform: translateX(-100%);
109
- opacity: 0;
110
- }
111
- to {
112
- transform: translateX(0);
113
- opacity: 1;
114
- }
115
- }
116
-
117
- @keyframes come-out-left {
118
- from {
119
- transform: translateX(0);
120
- opacity: 1;
121
- }
122
- to {
123
- transform: translateX(-100%);
124
- opacity: 0;
125
- }
126
- }
127
-
128
- @keyframes come-in-top {
129
- from {
130
- transform: translateY(-100%);
131
- opacity: 0;
132
- }
133
- to {
134
- transform: translateY(0);
135
- opacity: 1;
136
- }
137
- }
138
-
139
- @keyframes come-out-top {
140
- from {
141
- transform: translateY(0);
142
- opacity: 1;
143
- }
144
- to {
145
- transform: translateY(-100%);
146
- opacity: 0;
147
- }
148
- }
149
-
150
- @keyframes come-in-bottom {
151
- from {
152
- transform: translateY(100%);
153
- opacity: 0;
154
- }
155
- to {
156
- transform: translateY(0);
157
- opacity: 1;
158
- }
159
- }
160
-
161
- @keyframes come-out-bottom {
162
- from {
163
- transform: translateY(0);
164
- opacity: 1;
165
- }
166
- to {
167
- transform: translateY(100%);
168
- opacity: 0;
169
- }
170
- }
171
-
172
- .come-in-right {
173
- animation: come-in-right 0.3s ease-in-out;
174
- }
175
-
176
- .come-out-right {
177
- animation: come-out-right 0.3s ease-in-out;
178
- }
179
-
180
- .come-in-left {
181
- animation: come-in-left 0.3s ease-in-out;
182
- }
183
-
184
- .come-out-left {
185
- animation: come-out-left 0.3s ease-in-out;
186
- }
187
-
188
- .come-in-top {
189
- animation: come-in-top 0.3s ease-in-out;
190
- }
191
-
192
- .come-out-top {
193
- animation: come-out-top 0.3s ease-in-out;
194
- }
195
-
196
- .come-in-bottom {
197
- animation: come-in-bottom 0.3s ease-in-out;
198
- }
199
-
200
- .come-out-bottom {
201
- animation: come-out-bottom 0.3s ease-in-out;
202
- }
1
+ .drawerOverlay {
2
+ position: fixed;
3
+ top: 0;
4
+ left: 0;
5
+ width: 100vw;
6
+ height: 100vh;
7
+ background-color: rgba(0, 0, 0, 0.5);
8
+ z-index: 999;
9
+ display: flex;
10
+ justify-content: flex-end;
11
+ }
12
+
13
+ .drawerContainer {
14
+ background-color: #fff;
15
+ padding: 20px;
16
+ width: 320px;
17
+ height: 100vh;
18
+ position: relative;
19
+ }
20
+
21
+ .drawerHeader {
22
+ font-size: 18px;
23
+ font-weight: bold;
24
+ margin-bottom: 16px;
25
+ display: flex;
26
+ justify-content: space-between;
27
+ }
28
+
29
+ .drawerContent {
30
+ margin-bottom: 24px;
31
+ }
32
+
33
+ .drawerFooter {
34
+ position: absolute;
35
+ bottom: 0;
36
+ right: 0;
37
+ display: flex;
38
+ gap: 10px;
39
+ padding: 10px 20px;
40
+ background-color: #fff;
41
+ }
42
+
43
+ .drawerCloseBtn {
44
+ background-image: url('../../assets/关闭.png');
45
+ width: 15px;
46
+ height: 15px;
47
+ background-size: 100% 100%;
48
+ cursor: pointer;
49
+ }
50
+
51
+ /* 位置类 */
52
+ .drawerRight {
53
+ right: 0;
54
+ top: 0;
55
+ position: fixed;
56
+ height: 100vh;
57
+ width: 320px;
58
+ }
59
+
60
+ .drawerLeft {
61
+ left: 0;
62
+ top: 0;
63
+ position: fixed;
64
+ height: 100vh;
65
+ width: 320px;
66
+ }
67
+
68
+ .drawerTop {
69
+ top: 0;
70
+ left: 0;
71
+ position: fixed;
72
+ width: 100vw;
73
+ height: 300px;
74
+ }
75
+
76
+ .drawerBottom {
77
+ bottom: 0;
78
+ left: 0;
79
+ position: fixed;
80
+ width: 100vw;
81
+ height: 300px;
82
+ }
83
+
84
+ /* 动画类 */
85
+ @keyframes comeInRight {
86
+ from {
87
+ transform: translateX(100%);
88
+ opacity: 0;
89
+ }
90
+ to {
91
+ transform: translateX(0);
92
+ opacity: 1;
93
+ }
94
+ }
95
+
96
+ @keyframes comeOutRight {
97
+ from {
98
+ transform: translateX(0);
99
+ opacity: 1;
100
+ }
101
+ to {
102
+ transform: translateX(100%);
103
+ opacity: 0;
104
+ }
105
+ }
106
+
107
+ @keyframes comeInLeft {
108
+ from {
109
+ transform: translateX(-100%);
110
+ opacity: 0;
111
+ }
112
+ to {
113
+ transform: translateX(0);
114
+ opacity: 1;
115
+ }
116
+ }
117
+
118
+ @keyframes comeOutLeft {
119
+ from {
120
+ transform: translateX(0);
121
+ opacity: 1;
122
+ }
123
+ to {
124
+ transform: translateX(-100%);
125
+ opacity: 0;
126
+ }
127
+ }
128
+
129
+ @keyframes comeInTop {
130
+ from {
131
+ transform: translateY(-100%);
132
+ opacity: 0;
133
+ }
134
+ to {
135
+ transform: translateY(0);
136
+ opacity: 1;
137
+ }
138
+ }
139
+
140
+ @keyframes comeOutTop {
141
+ from {
142
+ transform: translateY(0);
143
+ opacity: 1;
144
+ }
145
+ to {
146
+ transform: translateY(-100%);
147
+ opacity: 0;
148
+ }
149
+ }
150
+
151
+ @keyframes comeInBottom {
152
+ from {
153
+ transform: translateY(100%);
154
+ opacity: 0;
155
+ }
156
+ to {
157
+ transform: translateY(0);
158
+ opacity: 1;
159
+ }
160
+ }
161
+
162
+ @keyframes comeOutBottom {
163
+ from {
164
+ transform: translateY(0);
165
+ opacity: 1;
166
+ }
167
+ to {
168
+ transform: translateY(100%);
169
+ opacity: 0;
170
+ }
171
+ }
172
+
173
+ .comeInRight {
174
+ animation: comeInRight 0.3s ease-in-out;
175
+ }
176
+
177
+ .comeOutRight {
178
+ animation: comeOutRight 0.3s ease-in-out;
179
+ }
180
+
181
+ .comeInLeft {
182
+ animation: comeInLeft 0.3s ease-in-out;
183
+ }
184
+
185
+ .comeOutLeft {
186
+ animation: comeOutLeft 0.3s ease-in-out;
187
+ }
188
+
189
+ .comeInTop {
190
+ animation: comeInTop 0.3s ease-in-out;
191
+ }
192
+
193
+ .comeOutTop {
194
+ animation: comeOutTop 0.3s ease-in-out;
195
+ }
196
+
197
+ .comeInBottom {
198
+ animation: comeInBottom 0.3s ease-in-out;
199
+ }
200
+
201
+ .comeOutBottom {
202
+ animation: comeOutBottom 0.3s ease-in-out;
203
+ }