@kdcloudjs/kdesign 1.2.2 → 1.3.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.
- package/CHANGELOG.md +47 -0
- package/dist/kdesign-complete.less +42 -81
- package/dist/kdesign.css +56 -119
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +165 -117
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +3 -3
- package/dist/kdesign.min.js +8 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/badge/style/index.css +3 -4
- package/es/badge/style/index.less +3 -4
- package/es/badge/style/token.less +1 -0
- package/es/button/style/index.css +3 -3
- package/es/button/style/token.less +3 -3
- package/es/carousel/style/index.css +11 -86
- package/es/carousel/style/index.less +3 -60
- package/es/checkbox/checkbox.js +4 -2
- package/es/checkbox/style/index.css +7 -0
- package/es/checkbox/style/index.less +7 -0
- package/es/config-provider/compDefaultProps.d.ts +1 -0
- package/es/config-provider/compDefaultProps.js +2 -1
- package/es/dropdown/style/index.css +5 -5
- package/es/form/Field.d.ts +2 -1
- package/es/form/Field.js +39 -22
- package/es/form/Form.js +7 -2
- package/es/form/hooks/useForm.js +1 -0
- package/es/form/interface.d.ts +5 -0
- package/es/input-number/inputNumber.d.ts +1 -0
- package/es/input-number/inputNumber.js +3 -2
- package/es/locale/locale.d.ts +1 -0
- package/es/locale/zh-CN.d.ts +1 -0
- package/es/locale/zh-CN.js +2 -1
- package/es/menu/subMenu.js +6 -2
- package/es/popconfirm/style/index.css +5 -5
- package/es/select/index.d.ts +2 -2
- package/es/select/interface.d.ts +7 -7
- package/es/select/select.js +12 -1
- package/es/select/style/index.css +13 -7
- package/es/select/style/index.less +14 -6
- package/es/select/style/token.less +4 -1
- package/es/style/mixins/index.less +5 -5
- package/es/tooltip/style/index.css +8 -8
- package/es/tooltip/style/index.less +2 -2
- package/lib/badge/style/index.css +3 -4
- package/lib/badge/style/index.less +3 -4
- package/lib/badge/style/token.less +1 -0
- package/lib/button/style/index.css +3 -3
- package/lib/button/style/token.less +3 -3
- package/lib/carousel/style/index.css +11 -86
- package/lib/carousel/style/index.less +3 -60
- package/lib/checkbox/checkbox.js +4 -2
- package/lib/checkbox/style/index.css +7 -0
- package/lib/checkbox/style/index.less +7 -0
- package/lib/config-provider/compDefaultProps.d.ts +1 -0
- package/lib/config-provider/compDefaultProps.js +2 -1
- package/lib/dropdown/style/index.css +5 -5
- package/lib/form/Field.d.ts +2 -1
- package/lib/form/Field.js +42 -24
- package/lib/form/Form.js +7 -2
- package/lib/form/hooks/useForm.js +1 -0
- package/lib/form/interface.d.ts +5 -0
- package/lib/input-number/inputNumber.d.ts +1 -0
- package/lib/input-number/inputNumber.js +3 -2
- package/lib/locale/locale.d.ts +1 -0
- package/lib/locale/zh-CN.d.ts +1 -0
- package/lib/locale/zh-CN.js +2 -1
- package/lib/menu/subMenu.js +6 -2
- package/lib/popconfirm/style/index.css +5 -5
- package/lib/select/index.d.ts +2 -2
- package/lib/select/interface.d.ts +7 -7
- package/lib/select/select.js +12 -1
- package/lib/select/style/index.css +13 -7
- package/lib/select/style/index.less +14 -6
- package/lib/select/style/token.less +4 -1
- package/lib/style/mixins/index.less +5 -5
- package/lib/tooltip/style/index.css +8 -8
- package/lib/tooltip/style/index.less +2 -2
- package/package.json +1 -1
package/es/badge/style/index.css
CHANGED
|
@@ -172,7 +172,6 @@
|
|
|
172
172
|
background-color: var(--kd-c-badge-color-success, var(--kd-g-color-success, #1ba854));
|
|
173
173
|
}
|
|
174
174
|
.kd-badge-status-processing {
|
|
175
|
-
position: relative;
|
|
176
175
|
background-color: var(--kd-c-badge-color-ongoing, var(--kd-g-color-ongoing, #276ff5));
|
|
177
176
|
}
|
|
178
177
|
.kd-badge-status-processing::after {
|
|
@@ -188,13 +187,13 @@
|
|
|
188
187
|
content: '';
|
|
189
188
|
}
|
|
190
189
|
.kd-badge-status-error {
|
|
191
|
-
background-color: var(--kd-c-badge-color-
|
|
190
|
+
background-color: var(--kd-c-badge-color-error, var(--kd-g-color-error, #fb2323));
|
|
192
191
|
}
|
|
193
192
|
.kd-badge-status-default {
|
|
194
|
-
background-color: var(--kd-c-badge-color-
|
|
193
|
+
background-color: var(--kd-c-badge-color-default, #d9d9d9);
|
|
195
194
|
}
|
|
196
195
|
.kd-badge-status-warning {
|
|
197
|
-
background-color: var(--kd-c-badge-color-
|
|
196
|
+
background-color: var(--kd-c-badge-color-warning, var(--kd-g-color-warning, #ff991c));
|
|
198
197
|
}
|
|
199
198
|
.kd-badge-not-a-wrapper:not(.kd-badge-status) {
|
|
200
199
|
vertical-align: middle;
|
|
@@ -74,7 +74,6 @@
|
|
|
74
74
|
background-color: @badge-color-success;
|
|
75
75
|
}
|
|
76
76
|
&-processing {
|
|
77
|
-
position: relative;
|
|
78
77
|
background-color: @badge-color-ongoing;
|
|
79
78
|
&::after {
|
|
80
79
|
position: absolute;
|
|
@@ -89,13 +88,13 @@
|
|
|
89
88
|
}
|
|
90
89
|
}
|
|
91
90
|
&-error {
|
|
92
|
-
background-color: @badge-color-
|
|
91
|
+
background-color: @badge-color-error;
|
|
93
92
|
}
|
|
94
93
|
&-default {
|
|
95
|
-
background-color: @badge-color-
|
|
94
|
+
background-color: @badge-color-default;
|
|
96
95
|
}
|
|
97
96
|
&-warning {
|
|
98
|
-
background-color: @badge-color-
|
|
97
|
+
background-color: @badge-color-warning;
|
|
99
98
|
}
|
|
100
99
|
}
|
|
101
100
|
|
|
@@ -21,3 +21,4 @@
|
|
|
21
21
|
@badge-color-ongoing: var(~'@{badge-prefix}-color-ongoing', @color-ongoing);
|
|
22
22
|
@badge-color-warning: var(~'@{badge-prefix}-color-warning', @color-warning);
|
|
23
23
|
@badge-color-error: var(~'@{badge-prefix}-color-error', @color-error);
|
|
24
|
+
@badge-color-default: var(~'@{badge-prefix}-color-default', #d9d9d9);
|
|
@@ -178,13 +178,13 @@
|
|
|
178
178
|
background-color: var(--kd-c-button-primary-color-background-active, var(--kd-g-color-theme-7, #375cca));
|
|
179
179
|
}
|
|
180
180
|
.kd-btn-primary:disabled {
|
|
181
|
-
background-color: var(--kd-c-button-primary-color-background-disabled, var(--kd-g-color-theme-
|
|
182
|
-
border-color: var(--kd-c-button-primary-color-border-disabled, var(--kd-g-color-theme-
|
|
181
|
+
background-color: var(--kd-c-button-primary-color-background-disabled, var(--kd-g-color-theme-4, #b5cfff)) !important;
|
|
182
|
+
border-color: var(--kd-c-button-primary-color-border-disabled, var(--kd-g-color-theme-4, #b5cfff)) !important;
|
|
183
183
|
}
|
|
184
184
|
.kd-btn-ghost {
|
|
185
185
|
border-color: var(--kd-c-button-ghost-color-border, var(--kd-g-color-theme-6, #5582f3));
|
|
186
186
|
background-color: var(--kd-c-button-ghost-color-background, transparent);
|
|
187
|
-
color: var(--kd-c-button-ghost-color-text, #
|
|
187
|
+
color: var(--kd-c-button-ghost-color-text, var(--kd-g-color-theme, #5582f3));
|
|
188
188
|
}
|
|
189
189
|
.kd-btn-ghost:hover:not(.kd-btn-loading) {
|
|
190
190
|
background-color: var(--kd-c-button-ghost-color-background-hover, var(--kd-g-color-theme-5, #87adff));
|
|
@@ -10,12 +10,12 @@
|
|
|
10
10
|
@btn-primary-border-color-hover: var(~'@{button-custom-prefix}-primary-color-border-hover', @color-theme-hover); // 基础hover边框颜色
|
|
11
11
|
@btn-primary-background-color-active: var(~'@{button-custom-prefix}-primary-color-background-active', @color-theme-click); // 基础active背景颜色
|
|
12
12
|
@btn-primary-border-color-active: var(~'@{button-custom-prefix}-primary-color-border-active', @color-theme); // 基础active边框颜色
|
|
13
|
-
@btn-primary-background-color-disabled: var(~'@{button-custom-prefix}-primary-color-background-disabled', @color-theme-
|
|
14
|
-
@btn-primary-border-color-disabled: var(~'@{button-custom-prefix}-primary-color-border-disabled', @color-theme-
|
|
13
|
+
@btn-primary-background-color-disabled: var(~'@{button-custom-prefix}-primary-color-background-disabled', @color-theme-4); // 基础disabled背景颜色 禁用状态
|
|
14
|
+
@btn-primary-border-color-disabled: var(~'@{button-custom-prefix}-primary-color-border-disabled', @color-theme-4); // 基础disabled边框颜色
|
|
15
15
|
|
|
16
16
|
@btn-ghost-background-color: var(~'@{button-custom-prefix}-ghost-color-background', transparent); // 幽灵背景颜色
|
|
17
17
|
@btn-ghost-border-color: var(~'@{button-custom-prefix}-ghost-color-border', @color-theme-6); //幽灵边框颜色
|
|
18
|
-
@btn-ghost-font-color: var(~'@{button-custom-prefix}-ghost-color-text',
|
|
18
|
+
@btn-ghost-font-color: var(~'@{button-custom-prefix}-ghost-color-text', @color-theme); // 幽灵按钮文字颜色
|
|
19
19
|
@btn-ghost-background-color-hover: var(~'@{button-custom-prefix}-ghost-color-background-hover', @color-theme-5); //幽灵hover背景颜色
|
|
20
20
|
@btn-ghost-border-color-hover: var(~'@{button-custom-prefix}-ghost-color-border-hover', transparent); //幽灵hover边框颜色
|
|
21
21
|
@btn-ghost-font-color-hover: var(~'@{button-custom-prefix}-ghost-color-text-hover',#ffffff); // 幽灵hover按钮文字颜色
|
|
@@ -107,89 +107,6 @@
|
|
|
107
107
|
-ms-flex: 1;
|
|
108
108
|
flex: 1;
|
|
109
109
|
}
|
|
110
|
-
.kd-carousel-slidelist {
|
|
111
|
-
list-style: none;
|
|
112
|
-
display: -webkit-box;
|
|
113
|
-
display: -ms-flexbox;
|
|
114
|
-
display: flex;
|
|
115
|
-
-webkit-box-orient: horizontal;
|
|
116
|
-
-webkit-box-direction: normal;
|
|
117
|
-
-ms-flex-direction: row;
|
|
118
|
-
flex-direction: row;
|
|
119
|
-
width: 100%;
|
|
120
|
-
}
|
|
121
|
-
.kd-carousel-slidelist-item {
|
|
122
|
-
-ms-flex-negative: 0;
|
|
123
|
-
flex-shrink: 0;
|
|
124
|
-
height: 100%;
|
|
125
|
-
width: 100%;
|
|
126
|
-
overflow: hidden;
|
|
127
|
-
border-radius: var(--kd-c-carousel-border-radius, 0px);
|
|
128
|
-
}
|
|
129
|
-
.kd-carousel-fadelist {
|
|
130
|
-
list-style: none;
|
|
131
|
-
display: -webkit-box;
|
|
132
|
-
display: -ms-flexbox;
|
|
133
|
-
display: flex;
|
|
134
|
-
-webkit-box-orient: horizontal;
|
|
135
|
-
-webkit-box-direction: normal;
|
|
136
|
-
-ms-flex-direction: row;
|
|
137
|
-
flex-direction: row;
|
|
138
|
-
-webkit-box-flex: 1;
|
|
139
|
-
-ms-flex: 1;
|
|
140
|
-
flex: 1;
|
|
141
|
-
position: relative;
|
|
142
|
-
}
|
|
143
|
-
.kd-carousel-fadelist-item {
|
|
144
|
-
opacity: 1;
|
|
145
|
-
position: relative;
|
|
146
|
-
-ms-flex-negative: 0;
|
|
147
|
-
flex-shrink: 0;
|
|
148
|
-
height: 100%;
|
|
149
|
-
width: 100%;
|
|
150
|
-
}
|
|
151
|
-
.kd-carousel-fadelist-item-animation {
|
|
152
|
-
-webkit-transition: opacity 0.3s ease;
|
|
153
|
-
transition: opacity 0.3s ease;
|
|
154
|
-
}
|
|
155
|
-
.kd-carousel-fadelist-item-none-animation {
|
|
156
|
-
-webkit-transition: none;
|
|
157
|
-
transition: none;
|
|
158
|
-
}
|
|
159
|
-
.kd-carousel-fadelist-item-not-hidden {
|
|
160
|
-
opacity: 1;
|
|
161
|
-
}
|
|
162
|
-
.kd-carousel-fadelist-item-hidden {
|
|
163
|
-
opacity: 0;
|
|
164
|
-
}
|
|
165
|
-
.kd-carousel-displaylist {
|
|
166
|
-
list-style: none;
|
|
167
|
-
display: -webkit-box;
|
|
168
|
-
display: -ms-flexbox;
|
|
169
|
-
display: flex;
|
|
170
|
-
-webkit-box-orient: horizontal;
|
|
171
|
-
-webkit-box-direction: normal;
|
|
172
|
-
-ms-flex-direction: row;
|
|
173
|
-
flex-direction: row;
|
|
174
|
-
-webkit-box-flex: 1;
|
|
175
|
-
-ms-flex: 1;
|
|
176
|
-
flex: 1;
|
|
177
|
-
position: relative;
|
|
178
|
-
}
|
|
179
|
-
.kd-carousel-displaylist-item {
|
|
180
|
-
display: block;
|
|
181
|
-
position: relative;
|
|
182
|
-
-ms-flex-negative: 0;
|
|
183
|
-
flex-shrink: 0;
|
|
184
|
-
height: 100%;
|
|
185
|
-
width: 100%;
|
|
186
|
-
}
|
|
187
|
-
.kd-carousel-displaylist-item-not-hidden {
|
|
188
|
-
display: block;
|
|
189
|
-
}
|
|
190
|
-
.kd-carousel-displaylist-item-hidden {
|
|
191
|
-
display: none;
|
|
192
|
-
}
|
|
193
110
|
.kd-carousel-list {
|
|
194
111
|
list-style: none;
|
|
195
112
|
display: -webkit-box;
|
|
@@ -199,9 +116,6 @@
|
|
|
199
116
|
-webkit-box-direction: normal;
|
|
200
117
|
-ms-flex-direction: row;
|
|
201
118
|
flex-direction: row;
|
|
202
|
-
-webkit-box-flex: 1;
|
|
203
|
-
-ms-flex: 1;
|
|
204
|
-
flex: 1;
|
|
205
119
|
position: relative;
|
|
206
120
|
}
|
|
207
121
|
.kd-carousel-list-item {
|
|
@@ -211,6 +125,9 @@
|
|
|
211
125
|
height: 100%;
|
|
212
126
|
width: 100%;
|
|
213
127
|
}
|
|
128
|
+
.kd-carousel-list-slide {
|
|
129
|
+
width: 100%;
|
|
130
|
+
}
|
|
214
131
|
.kd-carousel-list-slide .kd-carousel-list-item {
|
|
215
132
|
opacity: 1;
|
|
216
133
|
border-radius: var(--kd-c-carousel-border-radius, 0px);
|
|
@@ -229,6 +146,11 @@
|
|
|
229
146
|
.kd-carousel-list-slide .kd-carousel-list-item-hidden {
|
|
230
147
|
opacity: 0;
|
|
231
148
|
}
|
|
149
|
+
.kd-carousel-list-fade {
|
|
150
|
+
-webkit-box-flex: 1;
|
|
151
|
+
-ms-flex: 1;
|
|
152
|
+
flex: 1;
|
|
153
|
+
}
|
|
232
154
|
.kd-carousel-list-fade .kd-carousel-list-item {
|
|
233
155
|
opacity: 1;
|
|
234
156
|
}
|
|
@@ -246,6 +168,9 @@
|
|
|
246
168
|
.kd-carousel-list-fade .kd-carousel-list-item-hidden {
|
|
247
169
|
opacity: 0;
|
|
248
170
|
}
|
|
171
|
+
.kd-carousel-list-display {
|
|
172
|
+
width: 100%;
|
|
173
|
+
}
|
|
249
174
|
.kd-carousel-list-display .kd-carousel-list-item {
|
|
250
175
|
display: block;
|
|
251
176
|
}
|
|
@@ -10,71 +10,11 @@
|
|
|
10
10
|
overflow: hidden;
|
|
11
11
|
flex: 1;
|
|
12
12
|
}
|
|
13
|
-
&-slidelist {
|
|
14
|
-
list-style: none;
|
|
15
|
-
display: flex;
|
|
16
|
-
flex-direction: row;
|
|
17
|
-
width: 100%;
|
|
18
|
-
&-item {
|
|
19
|
-
flex-shrink: 0;
|
|
20
|
-
height: 100%;
|
|
21
|
-
width: 100%;
|
|
22
|
-
overflow: hidden;
|
|
23
|
-
border-radius: @carousel-boder-radius;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
&-fadelist {
|
|
27
|
-
list-style: none;
|
|
28
|
-
display: flex;
|
|
29
|
-
flex-direction: row;
|
|
30
|
-
flex: 1;
|
|
31
|
-
position: relative;
|
|
32
|
-
&-item {
|
|
33
|
-
opacity: 1;
|
|
34
|
-
position: relative;
|
|
35
|
-
flex-shrink: 0;
|
|
36
|
-
height: 100%;
|
|
37
|
-
width: 100%;
|
|
38
|
-
&-animation {
|
|
39
|
-
transition: opacity 0.3s ease;
|
|
40
|
-
}
|
|
41
|
-
&-none-animation {
|
|
42
|
-
transition: none;
|
|
43
|
-
}
|
|
44
|
-
&-not-hidden {
|
|
45
|
-
opacity: 1;
|
|
46
|
-
}
|
|
47
|
-
&-hidden {
|
|
48
|
-
opacity: 0;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
&-displaylist {
|
|
53
|
-
list-style: none;
|
|
54
|
-
display: flex;
|
|
55
|
-
flex-direction: row;
|
|
56
|
-
flex: 1;
|
|
57
|
-
position: relative;
|
|
58
|
-
&-item {
|
|
59
|
-
display: block;
|
|
60
|
-
position: relative;
|
|
61
|
-
flex-shrink: 0;
|
|
62
|
-
height: 100%;
|
|
63
|
-
width: 100%;
|
|
64
|
-
&-not-hidden {
|
|
65
|
-
display: block;
|
|
66
|
-
}
|
|
67
|
-
&-hidden {
|
|
68
|
-
display: none;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
13
|
|
|
73
14
|
&-list {
|
|
74
15
|
list-style: none;
|
|
75
16
|
display: flex;
|
|
76
17
|
flex-direction: row;
|
|
77
|
-
flex: 1;
|
|
78
18
|
position: relative;
|
|
79
19
|
|
|
80
20
|
&-item {
|
|
@@ -85,6 +25,7 @@
|
|
|
85
25
|
}
|
|
86
26
|
|
|
87
27
|
&-slide {
|
|
28
|
+
width: 100%;
|
|
88
29
|
.@{carousel-prefix-cls}-list-item {
|
|
89
30
|
opacity: 1;
|
|
90
31
|
border-radius: @carousel-boder-radius;
|
|
@@ -104,6 +45,7 @@
|
|
|
104
45
|
}
|
|
105
46
|
|
|
106
47
|
&-fade {
|
|
48
|
+
flex: 1;
|
|
107
49
|
.@{carousel-prefix-cls}-list-item {
|
|
108
50
|
opacity: 1;
|
|
109
51
|
&-animation {
|
|
@@ -122,6 +64,7 @@
|
|
|
122
64
|
}
|
|
123
65
|
|
|
124
66
|
&-display {
|
|
67
|
+
width: 100%;
|
|
125
68
|
.@{carousel-prefix-cls}-list-item {
|
|
126
69
|
display: block;
|
|
127
70
|
&-not-hidden {
|
package/es/checkbox/checkbox.js
CHANGED
|
@@ -32,7 +32,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
|
|
|
32
32
|
children = CheckboxProps.children,
|
|
33
33
|
style = CheckboxProps.style,
|
|
34
34
|
value = CheckboxProps.value,
|
|
35
|
-
indeterminate = CheckboxProps.indeterminate
|
|
35
|
+
indeterminate = CheckboxProps.indeterminate,
|
|
36
|
+
name = CheckboxProps.name;
|
|
36
37
|
|
|
37
38
|
var getChecked = function getChecked() {
|
|
38
39
|
return isBoolean(checked) ? checked : defaultChecked;
|
|
@@ -102,7 +103,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
|
|
|
102
103
|
ref: ref,
|
|
103
104
|
value: value,
|
|
104
105
|
checked: selected,
|
|
105
|
-
disabled: disabled
|
|
106
|
+
disabled: disabled,
|
|
107
|
+
name: name
|
|
106
108
|
})), children && /*#__PURE__*/React.createElement("span", {
|
|
107
109
|
className: "".concat(checkboxPrefixCls, "-children")
|
|
108
110
|
}, children), !isDefaultType() && /*#__PURE__*/React.createElement("span", {
|
|
@@ -151,6 +151,10 @@
|
|
|
151
151
|
-ms-flex-align: center;
|
|
152
152
|
align-items: center;
|
|
153
153
|
z-index: 999;
|
|
154
|
+
-webkit-user-select: none;
|
|
155
|
+
-moz-user-select: none;
|
|
156
|
+
-ms-user-select: none;
|
|
157
|
+
user-select: none;
|
|
154
158
|
}
|
|
155
159
|
.kd-checkbox-children .kd-input-underline {
|
|
156
160
|
background-color: transparent;
|
|
@@ -383,3 +387,6 @@
|
|
|
383
387
|
.kd-checkbox-default.checked .kd-checkbox-children {
|
|
384
388
|
color: var(--kd-c-checkbox-color-text-primary, #212121);
|
|
385
389
|
}
|
|
390
|
+
.kd-checkbox-default-indeterminate .kd-checkbox-children {
|
|
391
|
+
color: var(--kd-c-checkbox-color-text-primary, #212121);
|
|
392
|
+
}
|
|
@@ -38,6 +38,8 @@
|
|
|
38
38
|
justify-content: center;
|
|
39
39
|
align-items: center;
|
|
40
40
|
z-index: 999;
|
|
41
|
+
user-select: none;
|
|
42
|
+
|
|
41
43
|
.kd-input-underline {
|
|
42
44
|
background-color: transparent;
|
|
43
45
|
border-bottom: none;
|
|
@@ -249,4 +251,9 @@
|
|
|
249
251
|
color: @checkbox-font-color;
|
|
250
252
|
}
|
|
251
253
|
}
|
|
254
|
+
&-indeterminate {
|
|
255
|
+
.@{checkbox-prefix-cls}-children {
|
|
256
|
+
color: @checkbox-font-color;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
252
259
|
}
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
.kd-dropdown.arrow::before {
|
|
152
152
|
position: absolute;
|
|
153
153
|
z-index: -2;
|
|
154
|
-
background:
|
|
154
|
+
background: var(--kd-g-color-background, #fff);
|
|
155
155
|
border-style: solid;
|
|
156
156
|
border-width: var(--arrowSize);
|
|
157
157
|
-webkit-transform: rotate(45deg);
|
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
top: var(--arrowSpill);
|
|
177
177
|
-webkit-box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
|
|
178
178
|
box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
|
|
179
|
-
border-color: var(--kd-g-color-
|
|
179
|
+
border-color: var(--kd-g-color-background, #fff) transparent transparent var(--kd-g-color-background, #fff);
|
|
180
180
|
}
|
|
181
181
|
.kd-dropdown.arrow.topLeft::before,
|
|
182
182
|
.kd-dropdown.arrow.top::before,
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
bottom: var(--arrowSpill);
|
|
186
186
|
-webkit-box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
|
|
187
187
|
box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
|
|
188
|
-
border-color: transparent var(--kd-g-color-
|
|
188
|
+
border-color: transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent;
|
|
189
189
|
}
|
|
190
190
|
.kd-dropdown.arrow.leftTop::before,
|
|
191
191
|
.kd-dropdown.arrow.left::before,
|
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
right: var(--arrowSpill);
|
|
195
195
|
-webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
|
|
196
196
|
box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
|
|
197
|
-
border-color: var(--kd-g-color-
|
|
197
|
+
border-color: var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent transparent;
|
|
198
198
|
}
|
|
199
199
|
.kd-dropdown.arrow.rightTop::before,
|
|
200
200
|
.kd-dropdown.arrow.right::before,
|
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
left: var(--arrowSpill);
|
|
204
204
|
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
|
|
205
205
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
|
|
206
|
-
border-color: transparent transparent var(--kd-g-color-
|
|
206
|
+
border-color: transparent transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff);
|
|
207
207
|
}
|
|
208
208
|
.kd-dropdown-menu {
|
|
209
209
|
max-height: var(--kd-c-dropdown-menu-sizing-max-height, 336px);
|
package/es/form/Field.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { NamePath, LabelAlign, Rule } from './interface';
|
|
|
3
3
|
export interface FormItemProps {
|
|
4
4
|
children?: React.ReactNode;
|
|
5
5
|
className?: string;
|
|
6
|
-
defaultValue?:
|
|
6
|
+
defaultValue?: any;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
hidden?: boolean;
|
|
9
9
|
label?: string | number;
|
|
@@ -15,6 +15,7 @@ export interface FormItemProps {
|
|
|
15
15
|
rules?: Rule[];
|
|
16
16
|
validateTrigger?: string | string[];
|
|
17
17
|
wrapperWidth?: string | number;
|
|
18
|
+
valuePropName?: string;
|
|
18
19
|
}
|
|
19
20
|
declare const Field: React.FC<FormItemProps>;
|
|
20
21
|
export default Field;
|
package/es/form/Field.js
CHANGED
|
@@ -3,7 +3,9 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
|
3
3
|
import _typeof from "@babel/runtime-corejs3/helpers/typeof";
|
|
4
4
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
|
|
5
5
|
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
6
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
6
7
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
8
|
+
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
|
|
7
9
|
|
|
8
10
|
var __rest = this && this.__rest || function (s, e) {
|
|
9
11
|
var t = {};
|
|
@@ -30,6 +32,7 @@ import { toArray } from '../_utils/react-children';
|
|
|
30
32
|
import FieldContext from './FieldContext';
|
|
31
33
|
import { INTERNAL_HOOK_KEY } from './hooks/useForm';
|
|
32
34
|
var DEFAULT_TRIGGER = 'onChange';
|
|
35
|
+
var FormEventValuePropNames = ['value', 'checked'];
|
|
33
36
|
|
|
34
37
|
var generateEventHandler = function generateEventHandler(handler, validateTrigger) {
|
|
35
38
|
var eventHandler = {};
|
|
@@ -50,7 +53,7 @@ var generateEventHandler = function generateEventHandler(handler, validateTrigge
|
|
|
50
53
|
};
|
|
51
54
|
|
|
52
55
|
var Field = function Field(props) {
|
|
53
|
-
var _classnames,
|
|
56
|
+
var _classnames, _context2;
|
|
54
57
|
|
|
55
58
|
devwarning(! /*#__PURE__*/React.isValidElement(props.children), 'Form.Item', 'Children of Form.Item is not a valid element');
|
|
56
59
|
devwarning(!props.name, 'Form.Item', 'Form.Item must have a name');
|
|
@@ -71,7 +74,8 @@ var Field = function Field(props) {
|
|
|
71
74
|
getFieldError = fieldContext.getFieldError,
|
|
72
75
|
getInternalHooks = fieldContext.getInternalHooks,
|
|
73
76
|
vertical = fieldContext.vertical,
|
|
74
|
-
getDefaultValue = fieldContext.getDefaultValue
|
|
77
|
+
getDefaultValue = fieldContext.getDefaultValue,
|
|
78
|
+
local = fieldContext.local;
|
|
75
79
|
|
|
76
80
|
var _getInternalHooks = getInternalHooks(INTERNAL_HOOK_KEY),
|
|
77
81
|
registerField = _getInternalHooks.registerField,
|
|
@@ -92,7 +96,9 @@ var Field = function Field(props) {
|
|
|
92
96
|
rules = _props$rules === void 0 ? [] : _props$rules,
|
|
93
97
|
wrapperWidth = props.wrapperWidth,
|
|
94
98
|
validateTrigger = props.validateTrigger,
|
|
95
|
-
defaultValue = props.defaultValue
|
|
99
|
+
defaultValue = props.defaultValue,
|
|
100
|
+
_props$valuePropName = props.valuePropName,
|
|
101
|
+
valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName;
|
|
96
102
|
|
|
97
103
|
var onStoreChange = function onStoreChange(stores, _namePathList, source) {
|
|
98
104
|
var prev = stores.prev,
|
|
@@ -126,8 +132,11 @@ var Field = function Field(props) {
|
|
|
126
132
|
if (Array.isArray(rules) && !rules.some(function (rule) {
|
|
127
133
|
return Object.prototype.hasOwnProperty.call(rule, 'required');
|
|
128
134
|
}) && required) {
|
|
135
|
+
var _context;
|
|
136
|
+
|
|
129
137
|
rules.push({
|
|
130
|
-
required: true
|
|
138
|
+
required: true,
|
|
139
|
+
message: _concatInstanceProperty(_context = "".concat(local && local.requiredMessage)).call(_context, label)
|
|
131
140
|
});
|
|
132
141
|
}
|
|
133
142
|
|
|
@@ -162,10 +171,23 @@ var Field = function Field(props) {
|
|
|
162
171
|
var formItemClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field"), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _classnames), className);
|
|
163
172
|
var value = getFieldValue(name);
|
|
164
173
|
var validateMessage = getFieldError(name);
|
|
165
|
-
|
|
174
|
+
|
|
175
|
+
var getInputValueFormProp = function getInputValueFormProp(evt) {
|
|
166
176
|
var _a;
|
|
167
177
|
|
|
168
|
-
var inputValue
|
|
178
|
+
var inputValue;
|
|
179
|
+
|
|
180
|
+
if (Object.prototype.hasOwnProperty.call(evt, 'target') && _includesInstanceProperty(FormEventValuePropNames).call(FormEventValuePropNames, valuePropName)) {
|
|
181
|
+
inputValue = (_a = evt.target) === null || _a === void 0 ? void 0 : _a[valuePropName];
|
|
182
|
+
} else {
|
|
183
|
+
inputValue = evt;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
return inputValue;
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
var handleValueChange = React.useCallback(function (evt) {
|
|
190
|
+
var inputValue = getInputValueFormProp(evt);
|
|
169
191
|
dispatch({
|
|
170
192
|
type: 'updateValue',
|
|
171
193
|
namePath: name,
|
|
@@ -182,6 +204,8 @@ var Field = function Field(props) {
|
|
|
182
204
|
var trigger = _extends(_defineProperty({}, DEFAULT_TRIGGER, handleValueChange), generateEventHandler(handleValueValidate, validateTrigger));
|
|
183
205
|
|
|
184
206
|
var mergeProps = function mergeProps(fa, ch) {
|
|
207
|
+
var _extends3;
|
|
208
|
+
|
|
185
209
|
if (!ch) {
|
|
186
210
|
return {};
|
|
187
211
|
}
|
|
@@ -192,17 +216,13 @@ var Field = function Field(props) {
|
|
|
192
216
|
|
|
193
217
|
var _ch$props = ch.props,
|
|
194
218
|
chChange = _ch$props.onChange,
|
|
195
|
-
chValue = _ch$props
|
|
219
|
+
chValue = _ch$props[valuePropName],
|
|
196
220
|
chDisabled = _ch$props.disabled,
|
|
197
221
|
chDefaultValue = _ch$props.defaultValue;
|
|
198
222
|
|
|
199
223
|
var onChange = function onChange(evt) {
|
|
200
224
|
if (chValue === undefined) {
|
|
201
|
-
|
|
202
|
-
setFieldValue(evt);
|
|
203
|
-
} else {
|
|
204
|
-
setFieldValue(evt.target.value);
|
|
205
|
-
}
|
|
225
|
+
setFieldValue(getInputValueFormProp(evt));
|
|
206
226
|
}
|
|
207
227
|
|
|
208
228
|
if (typeof faChange === 'function') {
|
|
@@ -225,12 +245,10 @@ var Field = function Field(props) {
|
|
|
225
245
|
forceUpdate();
|
|
226
246
|
}
|
|
227
247
|
|
|
228
|
-
return _extends(_extends({}, rest), {
|
|
248
|
+
return _extends(_extends({}, rest), (_extends3 = {
|
|
229
249
|
onChange: onChange,
|
|
230
|
-
defaultValue: defaultValue
|
|
231
|
-
|
|
232
|
-
disabled: chDisabled || faDisabled
|
|
233
|
-
});
|
|
250
|
+
defaultValue: defaultValue
|
|
251
|
+
}, _defineProperty(_extends3, valuePropName, fieldValue), _defineProperty(_extends3, "disabled", chDisabled || faDisabled), _extends3));
|
|
234
252
|
};
|
|
235
253
|
|
|
236
254
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -243,11 +261,10 @@ var Field = function Field(props) {
|
|
|
243
261
|
}), /*#__PURE__*/React.createElement(FieldWrapper, {
|
|
244
262
|
width: wrapperWidth,
|
|
245
263
|
validateMessage: validateMessage
|
|
246
|
-
}, _mapInstanceProperty(
|
|
247
|
-
var keys = mergeProps(_extends(_extends({
|
|
248
|
-
disabled: disabled
|
|
249
|
-
|
|
250
|
-
}, trigger), {
|
|
264
|
+
}, _mapInstanceProperty(_context2 = toArray(children)).call(_context2, function (child, index) {
|
|
265
|
+
var keys = mergeProps(_extends(_extends(_defineProperty({
|
|
266
|
+
disabled: disabled
|
|
267
|
+
}, valuePropName, value), trigger), {
|
|
251
268
|
key: index
|
|
252
269
|
}), child);
|
|
253
270
|
return child ? /*#__PURE__*/React.cloneElement(child, keys) : child;
|
package/es/form/Form.js
CHANGED
|
@@ -31,9 +31,13 @@ var Form = function Form(props, ref) {
|
|
|
31
31
|
var _useContext = useContext(ConfigContext),
|
|
32
32
|
getPrefixCls = _useContext.getPrefixCls,
|
|
33
33
|
prefixCls = _useContext.prefixCls,
|
|
34
|
-
userDefaultProps = _useContext.compDefaultProps
|
|
34
|
+
userDefaultProps = _useContext.compDefaultProps,
|
|
35
|
+
globalLocale = _useContext.locale;
|
|
35
36
|
|
|
36
37
|
var formProps = getCompProps('Form', userDefaultProps, props);
|
|
38
|
+
var formLang = globalLocale.getCompLangMsg({
|
|
39
|
+
componentName: 'Form'
|
|
40
|
+
});
|
|
37
41
|
|
|
38
42
|
var children = formProps.children,
|
|
39
43
|
defaultValues = formProps.defaultValues,
|
|
@@ -85,9 +89,10 @@ var Form = function Form(props, ref) {
|
|
|
85
89
|
labelAlign: labelAlign,
|
|
86
90
|
labelWidth: labelWidth,
|
|
87
91
|
wrapperWidth: wrapperWidth,
|
|
92
|
+
local: formLang,
|
|
88
93
|
vertical: layout === 'vertical'
|
|
89
94
|
});
|
|
90
|
-
}, [formInstance, labelAlign, labelWidth, wrapperWidth, layout]);
|
|
95
|
+
}, [formInstance, labelAlign, labelWidth, wrapperWidth, layout, formLang]);
|
|
91
96
|
|
|
92
97
|
var handleSubmit = function handleSubmit(evt) {
|
|
93
98
|
evt.preventDefault();
|
package/es/form/hooks/useForm.js
CHANGED
package/es/form/interface.d.ts
CHANGED
|
@@ -25,11 +25,16 @@ export interface FormInstance<Values = any> {
|
|
|
25
25
|
submit: () => void;
|
|
26
26
|
getInternalHooks: (secret: string) => InternalHooks | null;
|
|
27
27
|
}
|
|
28
|
+
export interface InnerLocale {
|
|
29
|
+
locale: string;
|
|
30
|
+
requiredMessage: string;
|
|
31
|
+
}
|
|
28
32
|
export interface InternalFormInstance extends FormInstance {
|
|
29
33
|
labelWidth?: string | number;
|
|
30
34
|
labelAlign?: LabelAlign;
|
|
31
35
|
wrapperWidth?: string | number;
|
|
32
36
|
vertical?: boolean;
|
|
37
|
+
local?: InnerLocale;
|
|
33
38
|
getInternalHooks: (key: string) => InternalHooks | null;
|
|
34
39
|
}
|
|
35
40
|
export declare type Stores = {
|
|
@@ -21,6 +21,7 @@ export interface InputNumberProps extends InputProps {
|
|
|
21
21
|
mustInPrecisionScope?: boolean;
|
|
22
22
|
stepOption?: StepOption;
|
|
23
23
|
stepperrref?: any;
|
|
24
|
+
formatter?: (value: string | undefined) => string;
|
|
24
25
|
}
|
|
25
26
|
declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<unknown>>;
|
|
26
27
|
export default InputNumber;
|