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,106 +1,107 @@
1
- // 封装的 ColorPicker 组件
2
- import React, { useState } from "react";
3
- import PropTypes from "prop-types";
4
- import "./TColorPicker.css";
5
- import { useTangoStyle } from "../CSSFab/useTangoStyle";
6
-
7
- export default function ColorPicker(props) {
8
- const {
9
- sx = {},
10
- style: userStyle = {},
11
- className: userClassName = "",
12
- disabled,
13
- onChange,
14
- showText
15
- } = props;
16
-
17
- const [color, setColor] = useState("#4caf50");
18
-
19
- const handleChange = (e) => {
20
- const value = e.target.value;
21
- setColor(value);
22
- if (onChange) onChange(value);
23
- };
24
-
25
- const className = `color-picker ${disabled ? "color-picker-disabled" : ""} ${userClassName}`;
26
-
27
- const sxStyle = useTangoStyle(sx);
28
- const combinedStyle = { ...sxStyle, ...userStyle };
29
-
30
- ColorPicker.propTypes = {
31
- sx: PropTypes.object,
32
- style: PropTypes.object,
33
- className: PropTypes.string,
34
- disabled: PropTypes.bool,
35
- onChange: PropTypes.func,
36
- showText: PropTypes.bool,
37
- };
38
-
39
- ColorPicker.defaultProps = {
40
- sx: {},
41
- style: {},
42
- className: "",
43
- disabled: false,
44
- onChange: () => {},
45
- showText: false,
46
- };
47
-
48
- const hexToRgb = (hex) => {
49
- const r = parseInt(hex.slice(1, 3), 16);
50
- const g = parseInt(hex.slice(3, 5), 16);
51
- const b = parseInt(hex.slice(5, 7), 16);
52
- return `rgb(${r}, ${g}, ${b})`;
53
- };
54
-
55
- const hexToHsl = (hex) => {
56
- let r = parseInt(hex.slice(1, 3), 16) / 255;
57
- let g = parseInt(hex.slice(3, 5), 16) / 255;
58
- let b = parseInt(hex.slice(5, 7), 16) / 255;
59
- let max = Math.max(r, g, b),
60
- min = Math.min(r, g, b);
61
- let h, s, l = (max + min) / 2;
62
-
63
- if (max === min) {
64
- h = s = 0; // achromatic
65
- } else {
66
- let d = max - min;
67
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
68
- switch (max) {
69
- case r:
70
- h = ((g - b) / d + (g < b ? 6 : 0));
71
- break;
72
- case g:
73
- h = ((b - r) / d + 2);
74
- break;
75
- case b:
76
- h = ((r - g) / d + 4);
77
- break;
78
- }
79
- h /= 6;
80
- }
81
-
82
- return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
83
- };
84
-
85
-
86
- return (
87
- <div className="color-picker-wrapper" style={combinedStyle}>
88
- <input
89
- type="color"
90
- value={color}
91
- onChange={handleChange}
92
- className={className}
93
- disabled={disabled}
94
- />
95
- {showText && (
96
- <div className="color-text">
97
- <div>{color.toUpperCase()}</div>
98
- <div>{hexToRgb(color)}</div>
99
- <div>{hexToHsl(color)}</div>
100
- </div>
101
- )}
102
- </div>
103
- );
104
-
105
- };
106
-
1
+ // 封装的 ColorPicker 组件
2
+ import React, { useState } from "react";
3
+ import PropTypes from "prop-types";
4
+ import styles from "./TColorPicker.module.css";
5
+ import { useTangoStyle } from "../CSSFab/useTangoStyle";
6
+
7
+ export default function ColorPicker(props) {
8
+ const {
9
+ sx = {},
10
+ style: userStyle = {},
11
+ className: userClassName = "",
12
+ disabled,
13
+ onChange,
14
+ showText
15
+ } = props;
16
+
17
+ const [color, setColor] = useState("#4caf50");
18
+
19
+ const handleChange = (e) => {
20
+ const value = e.target.value;
21
+ setColor(value);
22
+ if (onChange) onChange(value);
23
+ };
24
+
25
+ const className = `${styles.colorPicker} ${
26
+ disabled ? styles.colorPickerDisabled : ""
27
+ } ${userClassName}`;
28
+
29
+ const sxStyle = useTangoStyle(sx);
30
+ const combinedStyle = { ...sxStyle, ...userStyle };
31
+
32
+ const hexToRgb = (hex) => {
33
+ const r = parseInt(hex.slice(1, 3), 16);
34
+ const g = parseInt(hex.slice(3, 5), 16);
35
+ const b = parseInt(hex.slice(5, 7), 16);
36
+ return `rgb(${r}, ${g}, ${b})`;
37
+ };
38
+
39
+ const hexToHsl = (hex) => {
40
+ let r = parseInt(hex.slice(1, 3), 16) / 255;
41
+ let g = parseInt(hex.slice(3, 5), 16) / 255;
42
+ let b = parseInt(hex.slice(5, 7), 16) / 255;
43
+ let max = Math.max(r, g, b),
44
+ min = Math.min(r, g, b);
45
+ let h, s, l = (max + min) / 2;
46
+
47
+ if (max === min) {
48
+ h = s = 0;
49
+ } else {
50
+ let d = max - min;
51
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
52
+ switch (max) {
53
+ case r:
54
+ h = (g - b) / d + (g < b ? 6 : 0);
55
+ break;
56
+ case g:
57
+ h = (b - r) / d + 2;
58
+ break;
59
+ case b:
60
+ h = (r - g) / d + 4;
61
+ break;
62
+ }
63
+ h /= 6;
64
+ }
65
+
66
+ return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(
67
+ l * 100
68
+ )}%)`;
69
+ };
70
+
71
+ return (
72
+ <div className={styles.colorPickerWrapper} style={combinedStyle}>
73
+ <input
74
+ type="color"
75
+ value={color}
76
+ onChange={handleChange}
77
+ className={className}
78
+ disabled={disabled}
79
+ />
80
+ {showText && (
81
+ <div className={styles.colorText}>
82
+ <div>{color.toUpperCase()}</div>
83
+ <div>{hexToRgb(color)}</div>
84
+ <div>{hexToHsl(color)}</div>
85
+ </div>
86
+ )}
87
+ </div>
88
+ );
89
+ };
90
+
91
+ ColorPicker.propTypes = {
92
+ sx: PropTypes.object,
93
+ style: PropTypes.object,
94
+ className: PropTypes.string,
95
+ disabled: PropTypes.bool,
96
+ onChange: PropTypes.func,
97
+ showText: PropTypes.bool,
98
+ };
99
+
100
+ ColorPicker.defaultProps = {
101
+ sx: {},
102
+ style: {},
103
+ className: "",
104
+ disabled: false,
105
+ onChange: () => {},
106
+ showText: false,
107
+ };
@@ -1,148 +1,146 @@
1
- import React from "react";
2
- import PropTypes from "prop-types";
3
- import "./TDate.css";
4
- import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useFastStyle 函数
5
-
6
- export default function Date(props) {
7
- const { type = "default", single = false, sx = {}, style: userStyle = {}, en = false } = props|| {};
8
-
9
- // 用于接收 sx 属性设置的样式
10
- const sxStyle = useTangoStyle(sx);
11
-
12
- // 合并 sx 和 style,确保 style 优先级更高
13
- const combinedStyle = { ...sxStyle, ...userStyle };
14
-
15
- Date.propTypes = {
16
- type: PropTypes.oneOf([
17
- "line",
18
- "full",
19
- "full-line",
20
- "year-week",
21
- "year-week-line",
22
- "week-time",
23
- "no-s",
24
- "no-s-line",
25
- "us-full",
26
- "us-full-line",
27
- ]),
28
- single: PropTypes.bool, // 控制显示“周”或“星期”
29
- sx: PropTypes.object, // 自定义样式对象
30
- style: PropTypes.object, // 用户传入的 style 属性
31
- en: PropTypes.bool, // 控制英文格式
32
- };
33
-
34
- Date.defaultProps = {
35
- type: "default", // 默认无 type 的格式
36
- single: false, // 默认显示 "星期"
37
- sx: {},
38
- style: {},
39
- en: false, // 默认不使用英文
40
- };
41
-
42
- // 各类时间格式
43
- const formatDate = (type) => {
44
- const date = new Date();
45
- let locale = en ? "en-US" : "zh-CN";
46
- let formattedWeekday = date.toLocaleString(locale, { weekday: "long" });
47
-
48
- // 如果 single 为 true,替换 "星期" "周",英文模式不需要转换
49
- if (!en && single) {
50
- formattedWeekday = formattedWeekday.replace("星期", "周");
51
- }
52
-
53
- switch (type) {
54
- case "line":
55
- return date.toLocaleDateString(locale, {
56
- year: "numeric",
57
- month: "2-digit",
58
- day: "2-digit",
59
- }).replaceAll("/", "-");
60
- case "full":
61
- return `${date.toLocaleDateString(locale, {
62
- year: "numeric",
63
- month: "2-digit",
64
- day: "2-digit",
65
- })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
66
- hour: "2-digit",
67
- minute: "2-digit",
68
- second: "2-digit",
69
- })}`;
70
- case "full-line":
71
- return `${date.toLocaleDateString(locale, {
72
- year: "numeric",
73
- month: "2-digit",
74
- day: "2-digit",
75
- }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
76
- hour: "2-digit",
77
- minute: "2-digit",
78
- second: "2-digit",
79
- })}`;
80
- case "year-week":
81
- return `${date.toLocaleDateString(locale, {
82
- year: "numeric",
83
- month: "2-digit",
84
- day: "2-digit",
85
- })} ${formattedWeekday}`;
86
- case "year-week-line":
87
- return `${date.toLocaleDateString(locale, {
88
- year: "numeric",
89
- month: "2-digit",
90
- day: "2-digit",
91
- }).replaceAll("/", "-")} ${formattedWeekday}`;
92
- case "week-time":
93
- return `${formattedWeekday} ${date.toLocaleTimeString(locale, {
94
- hour: "2-digit",
95
- minute: "2-digit",
96
- second: "2-digit",
97
- })}`;
98
- case "no-s":
99
- return `${date.toLocaleDateString(locale, {
100
- year: "numeric",
101
- month: "2-digit",
102
- day: "2-digit",
103
- })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
104
- hour: "2-digit",
105
- minute: "2-digit",
106
- })}`;
107
- case "no-s-line":
108
- return `${date.toLocaleDateString(locale, {
109
- year: "numeric",
110
- month: "2-digit",
111
- day: "2-digit",
112
- }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
113
- hour: "2-digit",
114
- minute: "2-digit",
115
- })}`;
116
- case "us-full":
117
- return `${date.toLocaleDateString("en-US", {
118
- year: "numeric",
119
- month: "2-digit",
120
- day: "2-digit",
121
- })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
122
- hour: "2-digit",
123
- minute: "2-digit",
124
- second: "2-digit",
125
- })}`;
126
- case "us-full-line":
127
- return `${date.toLocaleDateString("en-US", {
128
- year: "numeric",
129
- month: "2-digit",
130
- day: "2-digit",
131
- }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
132
- hour: "2-digit",
133
- minute: "2-digit",
134
- second: "2-digit",
135
- })}`;
136
- default:
137
- // 默认格式 年/月/日
138
- return date.toLocaleDateString(locale, {
139
- year: "numeric",
140
- month: "2-digit",
141
- day: "2-digit",
142
- });
143
- }
144
- };
145
-
146
- return <div style={combinedStyle}>{formatDate(type)}</div>;
147
- };
148
-
1
+ import React from "react";
2
+ import PropTypes from "prop-types";
3
+ import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useFastStyle 函数
4
+
5
+ export default function Date(props) {
6
+ const { type = "default", single = false, sx = {}, style: userStyle = {}, en = false } = props|| {};
7
+ // 用于接收 sx 属性设置的样式
8
+ const sxStyle = useTangoStyle(sx);
9
+
10
+ // 合并 sx 和 style,确保 style 优先级更高
11
+ const combinedStyle = { ...sxStyle, ...userStyle };
12
+
13
+ Date.propTypes = {
14
+ type: PropTypes.oneOf([
15
+ "line",
16
+ "full",
17
+ "full-line",
18
+ "year-week",
19
+ "year-week-line",
20
+ "week-time",
21
+ "no-s",
22
+ "no-s-line",
23
+ "us-full",
24
+ "us-full-line",
25
+ ]),
26
+ single: PropTypes.bool, // 控制显示“周”或“星期”
27
+ sx: PropTypes.object, // 自定义样式对象
28
+ style: PropTypes.object, // 用户传入的 style 属性
29
+ en: PropTypes.bool, // 控制英文格式
30
+ };
31
+
32
+ Date.defaultProps = {
33
+ type: "default", // 默认无 type 的格式
34
+ single: false, // 默认显示 "星期"
35
+ sx: {},
36
+ style: {},
37
+ en: false, // 默认不使用英文
38
+ };
39
+
40
+ // 各类时间格式
41
+ const formatDate = (type) => {
42
+ const date = new Date();
43
+ let locale = en ? "en-US" : "zh-CN";
44
+ let formattedWeekday = date.toLocaleString(locale, { weekday: "long" });
45
+
46
+ // 如果 single true,替换 "星期" "",英文模式不需要转换
47
+ if (!en && single) {
48
+ formattedWeekday = formattedWeekday.replace("星期", "周");
49
+ }
50
+
51
+ switch (type) {
52
+ case "line":
53
+ return date.toLocaleDateString(locale, {
54
+ year: "numeric",
55
+ month: "2-digit",
56
+ day: "2-digit",
57
+ }).replaceAll("/", "-");
58
+ case "full":
59
+ return `${date.toLocaleDateString(locale, {
60
+ year: "numeric",
61
+ month: "2-digit",
62
+ day: "2-digit",
63
+ })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
64
+ hour: "2-digit",
65
+ minute: "2-digit",
66
+ second: "2-digit",
67
+ })}`;
68
+ case "full-line":
69
+ return `${date.toLocaleDateString(locale, {
70
+ year: "numeric",
71
+ month: "2-digit",
72
+ day: "2-digit",
73
+ }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
74
+ hour: "2-digit",
75
+ minute: "2-digit",
76
+ second: "2-digit",
77
+ })}`;
78
+ case "year-week":
79
+ return `${date.toLocaleDateString(locale, {
80
+ year: "numeric",
81
+ month: "2-digit",
82
+ day: "2-digit",
83
+ })} ${formattedWeekday}`;
84
+ case "year-week-line":
85
+ return `${date.toLocaleDateString(locale, {
86
+ year: "numeric",
87
+ month: "2-digit",
88
+ day: "2-digit",
89
+ }).replaceAll("/", "-")} ${formattedWeekday}`;
90
+ case "week-time":
91
+ return `${formattedWeekday} ${date.toLocaleTimeString(locale, {
92
+ hour: "2-digit",
93
+ minute: "2-digit",
94
+ second: "2-digit",
95
+ })}`;
96
+ case "no-s":
97
+ return `${date.toLocaleDateString(locale, {
98
+ year: "numeric",
99
+ month: "2-digit",
100
+ day: "2-digit",
101
+ })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
102
+ hour: "2-digit",
103
+ minute: "2-digit",
104
+ })}`;
105
+ case "no-s-line":
106
+ return `${date.toLocaleDateString(locale, {
107
+ year: "numeric",
108
+ month: "2-digit",
109
+ day: "2-digit",
110
+ }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
111
+ hour: "2-digit",
112
+ minute: "2-digit",
113
+ })}`;
114
+ case "us-full":
115
+ return `${date.toLocaleDateString("en-US", {
116
+ year: "numeric",
117
+ month: "2-digit",
118
+ day: "2-digit",
119
+ })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
120
+ hour: "2-digit",
121
+ minute: "2-digit",
122
+ second: "2-digit",
123
+ })}`;
124
+ case "us-full-line":
125
+ return `${date.toLocaleDateString("en-US", {
126
+ year: "numeric",
127
+ month: "2-digit",
128
+ day: "2-digit",
129
+ }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
130
+ hour: "2-digit",
131
+ minute: "2-digit",
132
+ second: "2-digit",
133
+ })}`;
134
+ default:
135
+ // 默认格式 年/月/日
136
+ return date.toLocaleDateString(locale, {
137
+ year: "numeric",
138
+ month: "2-digit",
139
+ day: "2-digit",
140
+ });
141
+ }
142
+ };
143
+
144
+ return <div style={combinedStyle}>{formatDate(type)}</div>;
145
+ };
146
+
@@ -0,0 +1,12 @@
1
+ .datePicker {
2
+ padding: 6px 8px;
3
+ font-size: 14px;
4
+ border: 1px solid #ccc;
5
+ border-radius: 6px;
6
+ outline: none;
7
+ }
8
+
9
+ .datePickerDisabled {
10
+ background-color: #f0f0f0;
11
+ color: #999;
12
+ }