assui 3.2.103 → 3.2.105
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.
- package/es/base-button/demo/index.less +6 -0
- package/es/base-button/style/index.css +29 -21
- package/es/base-button/style/index.less +29 -22
- package/es/complex-val-select/index.d.ts +0 -1
- package/es/complex-val-select/index.js +1 -15
- package/lib/base-button/demo/index.less +6 -0
- package/lib/base-button/style/index.css +29 -21
- package/lib/base-button/style/index.less +29 -22
- package/lib/complex-val-select/index.d.ts +0 -1
- package/lib/complex-val-select/index.js +1 -15
- package/package.json +2 -2
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.base-btn {
|
|
2
2
|
display: inline-flex;
|
|
3
|
-
|
|
3
|
+
font-size: 14px;
|
|
4
|
+
gap: 8px;
|
|
4
5
|
align-items: center;
|
|
5
6
|
height: 32px;
|
|
6
7
|
padding: 0 16px;
|
|
@@ -18,8 +19,10 @@
|
|
|
18
19
|
padding: 0 8px;
|
|
19
20
|
font-size: 12px;
|
|
20
21
|
line-height: 20px;
|
|
22
|
+
gap: 4px;
|
|
21
23
|
}
|
|
22
24
|
.base-btn-large {
|
|
25
|
+
gap: 12px;
|
|
23
26
|
height: 40px;
|
|
24
27
|
padding: 0 24px;
|
|
25
28
|
font-size: 16px;
|
|
@@ -32,15 +35,19 @@
|
|
|
32
35
|
display: flex;
|
|
33
36
|
justify-content: center;
|
|
34
37
|
width: 100%;
|
|
38
|
+
height: 40px;
|
|
39
|
+
font-size: 16px;
|
|
40
|
+
line-height: 24px;
|
|
35
41
|
}
|
|
36
42
|
.base-btn-loading {
|
|
37
43
|
opacity: 0.8;
|
|
38
44
|
}
|
|
39
45
|
.base-btn-default {
|
|
40
46
|
--font-color: #121212;
|
|
41
|
-
--border-color: #
|
|
47
|
+
--border-color: #d9d9d9;
|
|
42
48
|
--hover-bg-color: #f2f2f2;
|
|
43
49
|
--active-bg-color: #e6e6e6;
|
|
50
|
+
--disabled-border-color: #d9d9d9;
|
|
44
51
|
color: #121212;
|
|
45
52
|
}
|
|
46
53
|
.base-btn-default:hover {
|
|
@@ -53,6 +60,8 @@
|
|
|
53
60
|
--theme-color: #dc4946;
|
|
54
61
|
--hover-color: #e7807e;
|
|
55
62
|
--active-color: #c6423f;
|
|
63
|
+
--hover-text-color: var(--hover-color);
|
|
64
|
+
--active-text-color: var(--active-color);
|
|
56
65
|
color: #fff;
|
|
57
66
|
background: var(--theme-color);
|
|
58
67
|
}
|
|
@@ -68,6 +77,8 @@
|
|
|
68
77
|
--theme-color: #47a92a;
|
|
69
78
|
--hover-color: #7ec36a;
|
|
70
79
|
--active-color: #409826;
|
|
80
|
+
--hover-text-color: var(--hover-color);
|
|
81
|
+
--active-text-color: var(--active-color);
|
|
71
82
|
}
|
|
72
83
|
.base-btn-success:hover {
|
|
73
84
|
background-color: var(--hover-color);
|
|
@@ -79,6 +90,8 @@
|
|
|
79
90
|
--theme-color: #121212;
|
|
80
91
|
--hover-color: #595959;
|
|
81
92
|
--active-color: #333;
|
|
93
|
+
--hover-text-color: var(--hover-color);
|
|
94
|
+
--active-text-color: var(--active-color);
|
|
82
95
|
color: #fff;
|
|
83
96
|
background: var(--theme-color);
|
|
84
97
|
}
|
|
@@ -90,11 +103,13 @@
|
|
|
90
103
|
}
|
|
91
104
|
.base-btn-gray {
|
|
92
105
|
--font-color: #121212;
|
|
93
|
-
--border-color: #
|
|
106
|
+
--border-color: #d9d9d9;
|
|
94
107
|
--hover-color: #f7f7f7;
|
|
95
108
|
--active-color: #e6e6e6;
|
|
96
109
|
--hover-bg-color: #f7f7f7;
|
|
97
110
|
--active-bg-color: #e6e6e6;
|
|
111
|
+
--hover-text-color: var(--font-color);
|
|
112
|
+
--active-text-color: var(--font-color);
|
|
98
113
|
color: var(--font-color);
|
|
99
114
|
background: #f2f2f2;
|
|
100
115
|
border: none;
|
|
@@ -111,10 +126,12 @@
|
|
|
111
126
|
border: 1px solid var(--theme-color, var(--border-color));
|
|
112
127
|
}
|
|
113
128
|
.base-btn-variant-outlined:hover {
|
|
129
|
+
color: var(--hover-text-color, var(--font-color));
|
|
114
130
|
background-color: var(--hover-bg-color, #fff);
|
|
115
131
|
border-color: var(--hover-color, var(--border-color));
|
|
116
132
|
}
|
|
117
133
|
.base-btn-variant-outlined:active {
|
|
134
|
+
color: var(--active-text-color, var(--font-color));
|
|
118
135
|
background-color: var(--active-bg-color, #fff);
|
|
119
136
|
border-color: var(--active-color, var(--border-color));
|
|
120
137
|
}
|
|
@@ -124,29 +141,18 @@
|
|
|
124
141
|
.base-btn-variant-outlined .base-btn-loading-icon .base-btn-loading-icon-mask {
|
|
125
142
|
background-color: #fff;
|
|
126
143
|
}
|
|
127
|
-
.base-btn-variant-outlined.base-btn-disabled {
|
|
128
|
-
color: #bfbfbf;
|
|
129
|
-
background-color: #e6e6e6;
|
|
130
|
-
border-color: #e6e6e6;
|
|
131
|
-
}
|
|
132
|
-
.base-btn-variant-outlined.base-btn-disabled:hover {
|
|
133
|
-
background-color: #e6e6e6;
|
|
134
|
-
border-color: #e6e6e6;
|
|
135
|
-
}
|
|
136
|
-
.base-btn-variant-outlined.base-btn-disabled:active {
|
|
137
|
-
background-color: #e6e6e6;
|
|
138
|
-
border-color: #e6e6e6;
|
|
139
|
-
}
|
|
140
144
|
.base-btn-variant-dashed {
|
|
141
145
|
color: var(--theme-color, var(--font-color));
|
|
142
146
|
background-color: #fff;
|
|
143
147
|
border: 1px dashed var(--theme-color, var(--border-color));
|
|
144
148
|
}
|
|
145
149
|
.base-btn-variant-dashed:hover {
|
|
150
|
+
color: var(--hover-text-color, var(--font-color));
|
|
146
151
|
background-color: var(--hover-bg-color, #fff);
|
|
147
152
|
border-color: var(--hover-color, var(--border-color));
|
|
148
153
|
}
|
|
149
154
|
.base-btn-variant-dashed:active {
|
|
155
|
+
color: var(--active-text-color, var(--font-color));
|
|
150
156
|
background-color: var(--active-bg-color, #fff);
|
|
151
157
|
border-color: var(--active-color, var(--border-color));
|
|
152
158
|
}
|
|
@@ -172,16 +178,18 @@
|
|
|
172
178
|
background-color: #fff;
|
|
173
179
|
}
|
|
174
180
|
.base-btn-disabled {
|
|
175
|
-
color: #bfbfbf;
|
|
176
|
-
background-color: #
|
|
177
|
-
border-color: #
|
|
181
|
+
color: #bfbfbf !important;
|
|
182
|
+
background-color: #f2f2f2 !important;
|
|
183
|
+
border-color: var(--disabled-border-color, #f2f2f2) !important;
|
|
178
184
|
cursor: not-allowed;
|
|
179
185
|
}
|
|
180
186
|
.base-btn-disabled:hover {
|
|
181
|
-
|
|
187
|
+
color: #bfbfbf !important;
|
|
188
|
+
background-color: #f2f2f2 !important;
|
|
182
189
|
}
|
|
183
190
|
.base-btn-disabled:active {
|
|
184
|
-
|
|
191
|
+
color: #bfbfbf !important;
|
|
192
|
+
background-color: #f2f2f2 !important;
|
|
185
193
|
}
|
|
186
194
|
@keyframes loading {
|
|
187
195
|
0% {
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
.@{base-button-name} {
|
|
6
6
|
display: inline-flex;
|
|
7
|
-
|
|
7
|
+
font-size: @font-size-base;
|
|
8
|
+
gap: 8px;
|
|
8
9
|
align-items: center;
|
|
9
10
|
height: 32px;
|
|
10
11
|
padding: 0 16px;
|
|
@@ -21,9 +22,11 @@
|
|
|
21
22
|
padding: 0 8px;
|
|
22
23
|
font-size: @font-size-sm;
|
|
23
24
|
line-height: 20px;
|
|
25
|
+
gap: 4px;
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
&-large {
|
|
29
|
+
gap: 12px;
|
|
27
30
|
height: 40px;
|
|
28
31
|
padding: 0 24px;
|
|
29
32
|
font-size: @font-size_16;
|
|
@@ -38,6 +41,9 @@
|
|
|
38
41
|
display: flex;
|
|
39
42
|
justify-content: center;
|
|
40
43
|
width: 100%;
|
|
44
|
+
height: 40px;
|
|
45
|
+
font-size: @font-size_16;
|
|
46
|
+
line-height: 24px;
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
&-loading {
|
|
@@ -46,9 +52,10 @@
|
|
|
46
52
|
|
|
47
53
|
&-default {
|
|
48
54
|
--font-color: @color_121212;
|
|
49
|
-
--border-color: @
|
|
55
|
+
--border-color: @color_d9d9d9;
|
|
50
56
|
--hover-bg-color: @color_f2f2f2;
|
|
51
57
|
--active-bg-color: @color_e6e6e6;
|
|
58
|
+
--disabled-border-color: @color_d9d9d9;
|
|
52
59
|
color: @color_121212;
|
|
53
60
|
&:hover {
|
|
54
61
|
background-color:@color_f2f2f2;
|
|
@@ -62,6 +69,8 @@
|
|
|
62
69
|
--theme-color: @color_dc4946;
|
|
63
70
|
--hover-color: @color_e7807e;
|
|
64
71
|
--active-color: @color_c6423f;
|
|
72
|
+
--hover-text-color: var(--hover-color);
|
|
73
|
+
--active-text-color: var(--active-color);
|
|
65
74
|
color: @white;
|
|
66
75
|
background: var(--theme-color);
|
|
67
76
|
&:hover {
|
|
@@ -78,6 +87,8 @@
|
|
|
78
87
|
--theme-color: @color_47a92a;
|
|
79
88
|
--hover-color: @color_7ec36a;
|
|
80
89
|
--active-color: @color_409826;
|
|
90
|
+
--hover-text-color: var(--hover-color);
|
|
91
|
+
--active-text-color: var(--active-color);
|
|
81
92
|
&:hover {
|
|
82
93
|
background-color: var(--hover-color);
|
|
83
94
|
}
|
|
@@ -90,6 +101,8 @@
|
|
|
90
101
|
--theme-color: @color_121212;
|
|
91
102
|
--hover-color: @color_595959;
|
|
92
103
|
--active-color: @color_333;
|
|
104
|
+
--hover-text-color: var(--hover-color);
|
|
105
|
+
--active-text-color: var(--active-color);
|
|
93
106
|
color: @white;
|
|
94
107
|
background: var(--theme-color);
|
|
95
108
|
&:hover {
|
|
@@ -102,11 +115,13 @@
|
|
|
102
115
|
|
|
103
116
|
&-gray {
|
|
104
117
|
--font-color: @color_121212;
|
|
105
|
-
--border-color: @
|
|
118
|
+
--border-color: @color_d9d9d9;
|
|
106
119
|
--hover-color: @color_f7f7f7;
|
|
107
120
|
--active-color: @color_e6e6e6;
|
|
108
121
|
--hover-bg-color: @color_f7f7f7;
|
|
109
122
|
--active-bg-color: @color_e6e6e6;
|
|
123
|
+
--hover-text-color: var(--font-color);
|
|
124
|
+
--active-text-color: var(--font-color);
|
|
110
125
|
color: var(--font-color);
|
|
111
126
|
background: @color_f2f2f2;
|
|
112
127
|
border: none;
|
|
@@ -123,10 +138,12 @@
|
|
|
123
138
|
background-color: @white;
|
|
124
139
|
border: 1px solid var(--theme-color, var(--border-color));
|
|
125
140
|
&:hover {
|
|
141
|
+
color: var(--hover-text-color, var(--font-color));
|
|
126
142
|
background-color: var(--hover-bg-color, @white);
|
|
127
143
|
border-color: var(--hover-color, var(--border-color));
|
|
128
144
|
}
|
|
129
145
|
&:active {
|
|
146
|
+
color: var(--active-text-color, var(--font-color));
|
|
130
147
|
background-color: var(--active-bg-color, @white);
|
|
131
148
|
border-color: var(--active-color, var(--border-color));
|
|
132
149
|
}
|
|
@@ -136,20 +153,6 @@
|
|
|
136
153
|
background-color: @white;
|
|
137
154
|
}
|
|
138
155
|
}
|
|
139
|
-
|
|
140
|
-
&.@{base-button-name}-disabled {
|
|
141
|
-
color: @color_bfbfbf;
|
|
142
|
-
background-color: @color_e6e6e6;
|
|
143
|
-
border-color: @color_e6e6e6;
|
|
144
|
-
&:hover {
|
|
145
|
-
background-color: @color_e6e6e6;
|
|
146
|
-
border-color: @color_e6e6e6;
|
|
147
|
-
}
|
|
148
|
-
&:active {
|
|
149
|
-
background-color: @color_e6e6e6;
|
|
150
|
-
border-color: @color_e6e6e6;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
156
|
}
|
|
154
157
|
|
|
155
158
|
&-variant-dashed {
|
|
@@ -157,10 +160,12 @@
|
|
|
157
160
|
background-color: @white;
|
|
158
161
|
border: 1px dashed var(--theme-color, var(--border-color));
|
|
159
162
|
&:hover {
|
|
163
|
+
color: var(--hover-text-color, var(--font-color));
|
|
160
164
|
background-color: var(--hover-bg-color, @white);
|
|
161
165
|
border-color: var(--hover-color, var(--border-color));
|
|
162
166
|
}
|
|
163
167
|
&:active {
|
|
168
|
+
color: var(--active-text-color, var(--font-color));
|
|
164
169
|
background-color: var(--active-bg-color, @white);
|
|
165
170
|
border-color: var(--active-color, var(--border-color));
|
|
166
171
|
}
|
|
@@ -193,15 +198,17 @@
|
|
|
193
198
|
}
|
|
194
199
|
|
|
195
200
|
&-disabled {
|
|
196
|
-
color: @color_bfbfbf;
|
|
197
|
-
background-color: @
|
|
198
|
-
border-color: @
|
|
201
|
+
color: @color_bfbfbf !important;
|
|
202
|
+
background-color: @color_f2f2f2 !important;
|
|
203
|
+
border-color: var(--disabled-border-color, @color_f2f2f2) !important;
|
|
199
204
|
cursor: not-allowed;
|
|
200
205
|
&:hover {
|
|
201
|
-
|
|
206
|
+
color: @color_bfbfbf !important;
|
|
207
|
+
background-color: @color_f2f2f2 !important;
|
|
202
208
|
}
|
|
203
209
|
&:active {
|
|
204
|
-
|
|
210
|
+
color: @color_bfbfbf !important;
|
|
211
|
+
background-color: @color_f2f2f2 !important;
|
|
205
212
|
}
|
|
206
213
|
}
|
|
207
214
|
|
|
@@ -14,7 +14,6 @@ export interface ComplexValSelectProps<T> extends Omit<SelectProps, 'value' | 'o
|
|
|
14
14
|
value?: T;
|
|
15
15
|
onChange?: (val: T, opt?: ComplexValSelectOptionType[]) => void;
|
|
16
16
|
options?: ComplexValSelectOptionType[];
|
|
17
|
-
maxLength?: number;
|
|
18
17
|
}
|
|
19
18
|
declare const ComplexValSelect: React.ForwardRefExoticComponent<ComplexValSelectProps<ComplexValSelectValueType> & React.RefAttributes<unknown>>;
|
|
20
19
|
export default ComplexValSelect;
|
|
@@ -77,7 +77,6 @@ var ComplexValSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
77
77
|
value = _a[0],
|
|
78
78
|
setValue = _a[1];
|
|
79
79
|
var options = props.options,
|
|
80
|
-
maxLength = props.maxLength,
|
|
81
80
|
onSelect = props.onSelect;
|
|
82
81
|
var selectRef = React.useRef(null);
|
|
83
82
|
React.useImperativeHandle(ref, function () {
|
|
@@ -86,19 +85,6 @@ var ComplexValSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
86
85
|
// 判断是否需要将optionValue转为JSON字符串
|
|
87
86
|
var isReferenceTypeVal = isReferenceTypeOption(options);
|
|
88
87
|
var finalOptions = isReferenceTypeVal ? _formatOptions(options) : options;
|
|
89
|
-
var disabledOptions = React.useMemo(function () {
|
|
90
|
-
if ((value === null || value === void 0 ? void 0 : value.length) === maxLength) {
|
|
91
|
-
return finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions.map(function (item) {
|
|
92
|
-
if (value.includes(item.value)) {
|
|
93
|
-
return item;
|
|
94
|
-
}
|
|
95
|
-
return __assign(__assign({}, item), {
|
|
96
|
-
disabled: true
|
|
97
|
-
});
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
return finalOptions;
|
|
101
|
-
}, [finalOptions, value, maxLength]);
|
|
102
88
|
var handleChange = function handleChange(val) {
|
|
103
89
|
var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
|
|
104
90
|
setValue(nextVal, options);
|
|
@@ -115,7 +101,7 @@ var ComplexValSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
115
101
|
className: classNames('complex-val-select', props === null || props === void 0 ? void 0 : props.className),
|
|
116
102
|
suffixIcon: /*#__PURE__*/React.createElement(ArrowDownOutlined, null),
|
|
117
103
|
value: value && isReferenceTypeVal ? JSON.stringify(value) : value,
|
|
118
|
-
options:
|
|
104
|
+
options: finalOptions,
|
|
119
105
|
onChange: handleChange,
|
|
120
106
|
onSelect: handleSelect
|
|
121
107
|
}, omit(props, ['value', 'onChange', 'options', 'onSelect', 'className'])));
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.base-btn {
|
|
2
2
|
display: inline-flex;
|
|
3
|
-
|
|
3
|
+
font-size: 14px;
|
|
4
|
+
gap: 8px;
|
|
4
5
|
align-items: center;
|
|
5
6
|
height: 32px;
|
|
6
7
|
padding: 0 16px;
|
|
@@ -18,8 +19,10 @@
|
|
|
18
19
|
padding: 0 8px;
|
|
19
20
|
font-size: 12px;
|
|
20
21
|
line-height: 20px;
|
|
22
|
+
gap: 4px;
|
|
21
23
|
}
|
|
22
24
|
.base-btn-large {
|
|
25
|
+
gap: 12px;
|
|
23
26
|
height: 40px;
|
|
24
27
|
padding: 0 24px;
|
|
25
28
|
font-size: 16px;
|
|
@@ -32,15 +35,19 @@
|
|
|
32
35
|
display: flex;
|
|
33
36
|
justify-content: center;
|
|
34
37
|
width: 100%;
|
|
38
|
+
height: 40px;
|
|
39
|
+
font-size: 16px;
|
|
40
|
+
line-height: 24px;
|
|
35
41
|
}
|
|
36
42
|
.base-btn-loading {
|
|
37
43
|
opacity: 0.8;
|
|
38
44
|
}
|
|
39
45
|
.base-btn-default {
|
|
40
46
|
--font-color: #121212;
|
|
41
|
-
--border-color: #
|
|
47
|
+
--border-color: #d9d9d9;
|
|
42
48
|
--hover-bg-color: #f2f2f2;
|
|
43
49
|
--active-bg-color: #e6e6e6;
|
|
50
|
+
--disabled-border-color: #d9d9d9;
|
|
44
51
|
color: #121212;
|
|
45
52
|
}
|
|
46
53
|
.base-btn-default:hover {
|
|
@@ -53,6 +60,8 @@
|
|
|
53
60
|
--theme-color: #dc4946;
|
|
54
61
|
--hover-color: #e7807e;
|
|
55
62
|
--active-color: #c6423f;
|
|
63
|
+
--hover-text-color: var(--hover-color);
|
|
64
|
+
--active-text-color: var(--active-color);
|
|
56
65
|
color: #fff;
|
|
57
66
|
background: var(--theme-color);
|
|
58
67
|
}
|
|
@@ -68,6 +77,8 @@
|
|
|
68
77
|
--theme-color: #47a92a;
|
|
69
78
|
--hover-color: #7ec36a;
|
|
70
79
|
--active-color: #409826;
|
|
80
|
+
--hover-text-color: var(--hover-color);
|
|
81
|
+
--active-text-color: var(--active-color);
|
|
71
82
|
}
|
|
72
83
|
.base-btn-success:hover {
|
|
73
84
|
background-color: var(--hover-color);
|
|
@@ -79,6 +90,8 @@
|
|
|
79
90
|
--theme-color: #121212;
|
|
80
91
|
--hover-color: #595959;
|
|
81
92
|
--active-color: #333;
|
|
93
|
+
--hover-text-color: var(--hover-color);
|
|
94
|
+
--active-text-color: var(--active-color);
|
|
82
95
|
color: #fff;
|
|
83
96
|
background: var(--theme-color);
|
|
84
97
|
}
|
|
@@ -90,11 +103,13 @@
|
|
|
90
103
|
}
|
|
91
104
|
.base-btn-gray {
|
|
92
105
|
--font-color: #121212;
|
|
93
|
-
--border-color: #
|
|
106
|
+
--border-color: #d9d9d9;
|
|
94
107
|
--hover-color: #f7f7f7;
|
|
95
108
|
--active-color: #e6e6e6;
|
|
96
109
|
--hover-bg-color: #f7f7f7;
|
|
97
110
|
--active-bg-color: #e6e6e6;
|
|
111
|
+
--hover-text-color: var(--font-color);
|
|
112
|
+
--active-text-color: var(--font-color);
|
|
98
113
|
color: var(--font-color);
|
|
99
114
|
background: #f2f2f2;
|
|
100
115
|
border: none;
|
|
@@ -111,10 +126,12 @@
|
|
|
111
126
|
border: 1px solid var(--theme-color, var(--border-color));
|
|
112
127
|
}
|
|
113
128
|
.base-btn-variant-outlined:hover {
|
|
129
|
+
color: var(--hover-text-color, var(--font-color));
|
|
114
130
|
background-color: var(--hover-bg-color, #fff);
|
|
115
131
|
border-color: var(--hover-color, var(--border-color));
|
|
116
132
|
}
|
|
117
133
|
.base-btn-variant-outlined:active {
|
|
134
|
+
color: var(--active-text-color, var(--font-color));
|
|
118
135
|
background-color: var(--active-bg-color, #fff);
|
|
119
136
|
border-color: var(--active-color, var(--border-color));
|
|
120
137
|
}
|
|
@@ -124,29 +141,18 @@
|
|
|
124
141
|
.base-btn-variant-outlined .base-btn-loading-icon .base-btn-loading-icon-mask {
|
|
125
142
|
background-color: #fff;
|
|
126
143
|
}
|
|
127
|
-
.base-btn-variant-outlined.base-btn-disabled {
|
|
128
|
-
color: #bfbfbf;
|
|
129
|
-
background-color: #e6e6e6;
|
|
130
|
-
border-color: #e6e6e6;
|
|
131
|
-
}
|
|
132
|
-
.base-btn-variant-outlined.base-btn-disabled:hover {
|
|
133
|
-
background-color: #e6e6e6;
|
|
134
|
-
border-color: #e6e6e6;
|
|
135
|
-
}
|
|
136
|
-
.base-btn-variant-outlined.base-btn-disabled:active {
|
|
137
|
-
background-color: #e6e6e6;
|
|
138
|
-
border-color: #e6e6e6;
|
|
139
|
-
}
|
|
140
144
|
.base-btn-variant-dashed {
|
|
141
145
|
color: var(--theme-color, var(--font-color));
|
|
142
146
|
background-color: #fff;
|
|
143
147
|
border: 1px dashed var(--theme-color, var(--border-color));
|
|
144
148
|
}
|
|
145
149
|
.base-btn-variant-dashed:hover {
|
|
150
|
+
color: var(--hover-text-color, var(--font-color));
|
|
146
151
|
background-color: var(--hover-bg-color, #fff);
|
|
147
152
|
border-color: var(--hover-color, var(--border-color));
|
|
148
153
|
}
|
|
149
154
|
.base-btn-variant-dashed:active {
|
|
155
|
+
color: var(--active-text-color, var(--font-color));
|
|
150
156
|
background-color: var(--active-bg-color, #fff);
|
|
151
157
|
border-color: var(--active-color, var(--border-color));
|
|
152
158
|
}
|
|
@@ -172,16 +178,18 @@
|
|
|
172
178
|
background-color: #fff;
|
|
173
179
|
}
|
|
174
180
|
.base-btn-disabled {
|
|
175
|
-
color: #bfbfbf;
|
|
176
|
-
background-color: #
|
|
177
|
-
border-color: #
|
|
181
|
+
color: #bfbfbf !important;
|
|
182
|
+
background-color: #f2f2f2 !important;
|
|
183
|
+
border-color: var(--disabled-border-color, #f2f2f2) !important;
|
|
178
184
|
cursor: not-allowed;
|
|
179
185
|
}
|
|
180
186
|
.base-btn-disabled:hover {
|
|
181
|
-
|
|
187
|
+
color: #bfbfbf !important;
|
|
188
|
+
background-color: #f2f2f2 !important;
|
|
182
189
|
}
|
|
183
190
|
.base-btn-disabled:active {
|
|
184
|
-
|
|
191
|
+
color: #bfbfbf !important;
|
|
192
|
+
background-color: #f2f2f2 !important;
|
|
185
193
|
}
|
|
186
194
|
@keyframes loading {
|
|
187
195
|
0% {
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
.@{base-button-name} {
|
|
6
6
|
display: inline-flex;
|
|
7
|
-
|
|
7
|
+
font-size: @font-size-base;
|
|
8
|
+
gap: 8px;
|
|
8
9
|
align-items: center;
|
|
9
10
|
height: 32px;
|
|
10
11
|
padding: 0 16px;
|
|
@@ -21,9 +22,11 @@
|
|
|
21
22
|
padding: 0 8px;
|
|
22
23
|
font-size: @font-size-sm;
|
|
23
24
|
line-height: 20px;
|
|
25
|
+
gap: 4px;
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
&-large {
|
|
29
|
+
gap: 12px;
|
|
27
30
|
height: 40px;
|
|
28
31
|
padding: 0 24px;
|
|
29
32
|
font-size: @font-size_16;
|
|
@@ -38,6 +41,9 @@
|
|
|
38
41
|
display: flex;
|
|
39
42
|
justify-content: center;
|
|
40
43
|
width: 100%;
|
|
44
|
+
height: 40px;
|
|
45
|
+
font-size: @font-size_16;
|
|
46
|
+
line-height: 24px;
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
&-loading {
|
|
@@ -46,9 +52,10 @@
|
|
|
46
52
|
|
|
47
53
|
&-default {
|
|
48
54
|
--font-color: @color_121212;
|
|
49
|
-
--border-color: @
|
|
55
|
+
--border-color: @color_d9d9d9;
|
|
50
56
|
--hover-bg-color: @color_f2f2f2;
|
|
51
57
|
--active-bg-color: @color_e6e6e6;
|
|
58
|
+
--disabled-border-color: @color_d9d9d9;
|
|
52
59
|
color: @color_121212;
|
|
53
60
|
&:hover {
|
|
54
61
|
background-color:@color_f2f2f2;
|
|
@@ -62,6 +69,8 @@
|
|
|
62
69
|
--theme-color: @color_dc4946;
|
|
63
70
|
--hover-color: @color_e7807e;
|
|
64
71
|
--active-color: @color_c6423f;
|
|
72
|
+
--hover-text-color: var(--hover-color);
|
|
73
|
+
--active-text-color: var(--active-color);
|
|
65
74
|
color: @white;
|
|
66
75
|
background: var(--theme-color);
|
|
67
76
|
&:hover {
|
|
@@ -78,6 +87,8 @@
|
|
|
78
87
|
--theme-color: @color_47a92a;
|
|
79
88
|
--hover-color: @color_7ec36a;
|
|
80
89
|
--active-color: @color_409826;
|
|
90
|
+
--hover-text-color: var(--hover-color);
|
|
91
|
+
--active-text-color: var(--active-color);
|
|
81
92
|
&:hover {
|
|
82
93
|
background-color: var(--hover-color);
|
|
83
94
|
}
|
|
@@ -90,6 +101,8 @@
|
|
|
90
101
|
--theme-color: @color_121212;
|
|
91
102
|
--hover-color: @color_595959;
|
|
92
103
|
--active-color: @color_333;
|
|
104
|
+
--hover-text-color: var(--hover-color);
|
|
105
|
+
--active-text-color: var(--active-color);
|
|
93
106
|
color: @white;
|
|
94
107
|
background: var(--theme-color);
|
|
95
108
|
&:hover {
|
|
@@ -102,11 +115,13 @@
|
|
|
102
115
|
|
|
103
116
|
&-gray {
|
|
104
117
|
--font-color: @color_121212;
|
|
105
|
-
--border-color: @
|
|
118
|
+
--border-color: @color_d9d9d9;
|
|
106
119
|
--hover-color: @color_f7f7f7;
|
|
107
120
|
--active-color: @color_e6e6e6;
|
|
108
121
|
--hover-bg-color: @color_f7f7f7;
|
|
109
122
|
--active-bg-color: @color_e6e6e6;
|
|
123
|
+
--hover-text-color: var(--font-color);
|
|
124
|
+
--active-text-color: var(--font-color);
|
|
110
125
|
color: var(--font-color);
|
|
111
126
|
background: @color_f2f2f2;
|
|
112
127
|
border: none;
|
|
@@ -123,10 +138,12 @@
|
|
|
123
138
|
background-color: @white;
|
|
124
139
|
border: 1px solid var(--theme-color, var(--border-color));
|
|
125
140
|
&:hover {
|
|
141
|
+
color: var(--hover-text-color, var(--font-color));
|
|
126
142
|
background-color: var(--hover-bg-color, @white);
|
|
127
143
|
border-color: var(--hover-color, var(--border-color));
|
|
128
144
|
}
|
|
129
145
|
&:active {
|
|
146
|
+
color: var(--active-text-color, var(--font-color));
|
|
130
147
|
background-color: var(--active-bg-color, @white);
|
|
131
148
|
border-color: var(--active-color, var(--border-color));
|
|
132
149
|
}
|
|
@@ -136,20 +153,6 @@
|
|
|
136
153
|
background-color: @white;
|
|
137
154
|
}
|
|
138
155
|
}
|
|
139
|
-
|
|
140
|
-
&.@{base-button-name}-disabled {
|
|
141
|
-
color: @color_bfbfbf;
|
|
142
|
-
background-color: @color_e6e6e6;
|
|
143
|
-
border-color: @color_e6e6e6;
|
|
144
|
-
&:hover {
|
|
145
|
-
background-color: @color_e6e6e6;
|
|
146
|
-
border-color: @color_e6e6e6;
|
|
147
|
-
}
|
|
148
|
-
&:active {
|
|
149
|
-
background-color: @color_e6e6e6;
|
|
150
|
-
border-color: @color_e6e6e6;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
156
|
}
|
|
154
157
|
|
|
155
158
|
&-variant-dashed {
|
|
@@ -157,10 +160,12 @@
|
|
|
157
160
|
background-color: @white;
|
|
158
161
|
border: 1px dashed var(--theme-color, var(--border-color));
|
|
159
162
|
&:hover {
|
|
163
|
+
color: var(--hover-text-color, var(--font-color));
|
|
160
164
|
background-color: var(--hover-bg-color, @white);
|
|
161
165
|
border-color: var(--hover-color, var(--border-color));
|
|
162
166
|
}
|
|
163
167
|
&:active {
|
|
168
|
+
color: var(--active-text-color, var(--font-color));
|
|
164
169
|
background-color: var(--active-bg-color, @white);
|
|
165
170
|
border-color: var(--active-color, var(--border-color));
|
|
166
171
|
}
|
|
@@ -193,15 +198,17 @@
|
|
|
193
198
|
}
|
|
194
199
|
|
|
195
200
|
&-disabled {
|
|
196
|
-
color: @color_bfbfbf;
|
|
197
|
-
background-color: @
|
|
198
|
-
border-color: @
|
|
201
|
+
color: @color_bfbfbf !important;
|
|
202
|
+
background-color: @color_f2f2f2 !important;
|
|
203
|
+
border-color: var(--disabled-border-color, @color_f2f2f2) !important;
|
|
199
204
|
cursor: not-allowed;
|
|
200
205
|
&:hover {
|
|
201
|
-
|
|
206
|
+
color: @color_bfbfbf !important;
|
|
207
|
+
background-color: @color_f2f2f2 !important;
|
|
202
208
|
}
|
|
203
209
|
&:active {
|
|
204
|
-
|
|
210
|
+
color: @color_bfbfbf !important;
|
|
211
|
+
background-color: @color_f2f2f2 !important;
|
|
205
212
|
}
|
|
206
213
|
}
|
|
207
214
|
|
|
@@ -14,7 +14,6 @@ export interface ComplexValSelectProps<T> extends Omit<SelectProps, 'value' | 'o
|
|
|
14
14
|
value?: T;
|
|
15
15
|
onChange?: (val: T, opt?: ComplexValSelectOptionType[]) => void;
|
|
16
16
|
options?: ComplexValSelectOptionType[];
|
|
17
|
-
maxLength?: number;
|
|
18
17
|
}
|
|
19
18
|
declare const ComplexValSelect: React.ForwardRefExoticComponent<ComplexValSelectProps<ComplexValSelectValueType> & React.RefAttributes<unknown>>;
|
|
20
19
|
export default ComplexValSelect;
|
|
@@ -120,7 +120,6 @@ var ComplexValSelect = React.forwardRef(function (props, ref) {
|
|
|
120
120
|
value = _a[0],
|
|
121
121
|
setValue = _a[1];
|
|
122
122
|
var options = props.options,
|
|
123
|
-
maxLength = props.maxLength,
|
|
124
123
|
onSelect = props.onSelect;
|
|
125
124
|
var selectRef = React.useRef(null);
|
|
126
125
|
React.useImperativeHandle(ref, function () {
|
|
@@ -129,19 +128,6 @@ var ComplexValSelect = React.forwardRef(function (props, ref) {
|
|
|
129
128
|
// 判断是否需要将optionValue转为JSON字符串
|
|
130
129
|
var isReferenceTypeVal = (0, exports.isReferenceTypeOption)(options);
|
|
131
130
|
var finalOptions = isReferenceTypeVal ? _formatOptions(options) : options;
|
|
132
|
-
var disabledOptions = React.useMemo(function () {
|
|
133
|
-
if ((value === null || value === void 0 ? void 0 : value.length) === maxLength) {
|
|
134
|
-
return finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions.map(function (item) {
|
|
135
|
-
if (value.includes(item.value)) {
|
|
136
|
-
return item;
|
|
137
|
-
}
|
|
138
|
-
return __assign(__assign({}, item), {
|
|
139
|
-
disabled: true
|
|
140
|
-
});
|
|
141
|
-
});
|
|
142
|
-
}
|
|
143
|
-
return finalOptions;
|
|
144
|
-
}, [finalOptions, value, maxLength]);
|
|
145
131
|
var handleChange = function handleChange(val) {
|
|
146
132
|
var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
|
|
147
133
|
setValue(nextVal, options);
|
|
@@ -158,7 +144,7 @@ var ComplexValSelect = React.forwardRef(function (props, ref) {
|
|
|
158
144
|
className: (0, classnames_1["default"])('complex-val-select', props === null || props === void 0 ? void 0 : props.className),
|
|
159
145
|
suffixIcon: React.createElement(ArrowDownOutlined_1["default"], null),
|
|
160
146
|
value: value && isReferenceTypeVal ? JSON.stringify(value) : value,
|
|
161
|
-
options:
|
|
147
|
+
options: finalOptions,
|
|
162
148
|
onChange: handleChange,
|
|
163
149
|
onSelect: handleSelect
|
|
164
150
|
}, (0, omit_1["default"])(props, ['value', 'onChange', 'options', 'onSelect', 'className'])));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "assui",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.105",
|
|
4
4
|
"description": "react ui library",
|
|
5
5
|
"author": "jason <usochen@gmail.com>",
|
|
6
6
|
"main": "./lib/index.js",
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"node": ">=10.0.0"
|
|
88
88
|
},
|
|
89
89
|
"license": "MIT",
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "339f0ad113cd267b75bf7ae54131dd66e0034a28"
|
|
91
91
|
}
|