tntd 3.1.8 → 3.1.9

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.
@@ -3,55 +3,122 @@
3
3
 
4
4
  @btn-prefix-cls: ~'@{ant-prefix}-btn';
5
5
 
6
+ @btn-ai-hover-bg: linear-gradient(128deg, #2e69ff 6.08%, #bf5fff 96.35%);
7
+ @btn-ai-center-bg: linear-gradient(128deg, #2e69ff 6.08%, #bf5fff 96.35%);
8
+ @btn-ai-step-bg1: linear-gradient(128deg, #bf5fff 15.08%, #2e69ff 105.35%);
9
+ @btn-ai-step-bg2: linear-gradient(128deg, #bf5fff 24.08%, #2e69ff 114.35%);
10
+ @btn-ai-step-bg3: linear-gradient(128deg, #bf5fff 33.08%, #2e69ff 123.35%);
11
+ @btn-ai-step-bg4: linear-gradient(128deg, #bf5fff 42.08%, #2e69ff 132.35%);
12
+ @btn-ai-step-bg5: linear-gradient(128deg, #2e69ff -39.19%, #bf5fff 51.08%, #2e69ff 141.35%);
13
+ @btn-ai-step-bg6: linear-gradient(128deg, #2e69ff -30.19%, #bf5fff 60.08%, #2e69ff 150.35%);
14
+ @btn-ai-step-bg7: linear-gradient(128deg, #2e69ff -21.19%, #bf5fff 69.08%, #2e69ff 159.35%);
15
+ @btn-ai-step-bg8: linear-gradient(128deg, #2e69ff -12.19%, #bf5fff 78.08%, #2e69ff 168.35%);
16
+ @btn-ai-step-bg9: linear-gradient(128deg, #2e69ff -3.19%, #bf5fff 87.08%, #2e69ff 177.35%);
17
+
6
18
  .tnt-btn {
7
19
  &.tnt-btn-mini {
8
20
  .button-size(@btn-height-mini; @btn-padding-mini; @btn-font-size-mini; @btn-border-radius-sm);
21
+
9
22
  &.@{btn-prefix-cls}-icon-only {
10
23
  .square(@btn-height-mini);
11
24
  padding-right: 0;
12
25
  padding-left: 0;
13
26
  }
27
+
14
28
  &.@{btn-prefix-cls}-circle {
15
29
  min-width: @btn-height-mini;
16
30
  border-radius: 50%;
17
31
  }
32
+
18
33
  &.@{btn-prefix-cls}-round {
19
34
  .button-size(@btn-circle-size-mini; 0 @btn-circle-size-mini / 2; @btn-font-size-mini; @btn-circle-size-mini);
35
+
20
36
  &.@{btn-prefix-cls}-icon-only {
21
37
  width: auto;
22
38
  }
23
39
  }
24
40
  }
41
+
25
42
  &-group-mini {
26
- & > .@{btn-prefix-cls},
27
- & > span > .@{btn-prefix-cls} {
43
+
44
+ &>.@{btn-prefix-cls},
45
+ &>span>.@{btn-prefix-cls} {
28
46
  .button-size(@btn-height-mini; @btn-padding-mini; @btn-font-size-mini; 0);
29
47
  line-height: calc(@btn-height-mini - 2px);
30
48
  }
31
- & > .@{btn-prefix-cls}.@{btn-prefix-cls}-icon-only {
49
+
50
+ &>.@{btn-prefix-cls}.@{btn-prefix-cls}-icon-only {
32
51
  .square(@btn-height-mini);
33
52
  padding-right: 0;
34
53
  padding-left: 0;
35
54
  }
36
55
  }
56
+
37
57
  &-tertiary {
38
58
  .button-variant-tertiary(@btn-default-color, @primary-color, @btn-tertiary-bg);
39
59
  }
60
+
40
61
  &-ai {
41
- .button-variant-ai(@btn-primary-color, @primary-color, @btn-ai-bg);
62
+ .button-variant-ai(@btn-primary-color, @primary-color, @btn-ai-bg, @btn-ai-hover-bg);
42
63
  }
64
+
65
+ &-ai-default {
66
+ >span {
67
+ background: linear-gradient(128deg, #BF5FFF 6.08%, #2E69FF 96.35%);
68
+ background-clip: text;
69
+ -webkit-background-clip: text;
70
+ -webkit-text-fill-color: transparent;
71
+ }
72
+
73
+ &:hover,
74
+ &:focus {
75
+ border-color: @btn-default-border;
76
+ background: linear-gradient(142deg, #F8EEFF 6.08%, #E0E9FE 96.35%);
77
+ }
78
+
79
+ &:active,
80
+ &.active {
81
+ border-color: transparent;
82
+ background: linear-gradient(142deg, #F8EEFF 6.08%, #E0E9FE 96.35%) padding-box,
83
+ linear-gradient(142deg, #BF5FFF 6.08%, #2E69FF 96.35%) border-box;
84
+ background-origin: border-box;
85
+ background-clip: padding-box, border-box;
86
+ }
87
+
88
+ .button-disabled();
89
+
90
+ // AI 按钮禁用状态的额外样式
91
+ &[disabled],
92
+ &.@{btn-prefix-cls}-disabled {
93
+ span {
94
+ color: @disabled-color;
95
+ background: transparent;
96
+ -webkit-text-fill-color: unset;
97
+ }
98
+
99
+ &:hover,
100
+ &:focus,
101
+ &:active {
102
+ background: @btn-disable-bg !important;
103
+ }
104
+ }
105
+ }
106
+
43
107
  &.@{btn-prefix-cls}-primary {
44
108
  .button-disabled(@btn-primary-color, @blue-3, @blue-3);
45
109
  }
110
+
46
111
  &.@{btn-prefix-cls}-danger {
47
112
  .button-disabled(@btn-primary-color, @red-3, @red-3);
48
113
  }
114
+
49
115
  &.@{btn-prefix-cls}-link {
50
116
  .button-disabled(@blue-3, transparent, transparent);
51
117
  padding: 0;
52
118
  }
53
- > .@{iconfont-css-prefix} + span,
54
- > span + .@{iconfont-css-prefix} {
119
+
120
+ >.@{iconfont-css-prefix}+span,
121
+ >span+.@{iconfont-css-prefix} {
55
122
  margin-left: 4px;
56
123
  }
57
124
  }
@@ -64,16 +131,12 @@
64
131
 
65
132
  &:hover,
66
133
  &:focus {
67
- .button-color(
68
- @hover-color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
69
- );
134
+ .button-color(@hover-color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `);
70
135
  }
71
136
 
72
137
  &:active,
73
138
  &.active {
74
- .button-color(
75
- @hover-color; ~`colorPalette('@{background}', 6) `; ~`colorPalette('@{background}', 6) `
76
- );
139
+ .button-color(@hover-color; ~`colorPalette('@{background}', 6) `; ~`colorPalette('@{background}', 6) `);
77
140
  }
78
141
 
79
142
  .button-disabled(@btn-disable-color; @btn-disable-bg; transparent);
@@ -88,134 +151,164 @@
88
151
  background: linear-gradient(0deg, @overlay-color 0%, @overlay-color 100%), @base-gradient;
89
152
  }
90
153
 
91
- .generate-hover-in-animation(@name; @background) {
154
+ .generate-hover-in-animation(@name; @background; @background-hover) {
92
155
  @keyframes @name {
93
156
  0% {
94
157
  background: @background;
95
158
  }
159
+
96
160
  10% {
97
- .ai-gradient-overlay(rgba(255, 255, 255, 0.02), @background);
161
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.02), @btn-ai-step-bg1);
98
162
  }
163
+
99
164
  20% {
100
- .ai-gradient-overlay(rgba(255, 255, 255, 0.04), @background);
165
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.04), @btn-ai-step-bg2);
101
166
  }
167
+
102
168
  30% {
103
- .ai-gradient-overlay(rgba(255, 255, 255, 0.06), @background);
169
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.06), @btn-ai-step-bg3);
104
170
  }
171
+
105
172
  40% {
106
- .ai-gradient-overlay(rgba(255, 255, 255, 0.08), @background);
173
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.08), @btn-ai-step-bg4);
107
174
  }
175
+
108
176
  50% {
109
- .ai-gradient-overlay(rgba(255, 255, 255, 0.1), @background);
177
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.1), @btn-ai-step-bg5);
110
178
  }
179
+
111
180
  60% {
112
- .ai-gradient-overlay(rgba(255, 255, 255, 0.12), @background);
181
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.12), @btn-ai-step-bg6);
113
182
  }
183
+
114
184
  70% {
115
- .ai-gradient-overlay(rgba(255, 255, 255, 0.14), @background);
185
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.14), @btn-ai-step-bg7);
116
186
  }
187
+
117
188
  80% {
118
- .ai-gradient-overlay(rgba(255, 255, 255, 0.16), @background);
189
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.16), @btn-ai-step-bg8);
119
190
  }
191
+
120
192
  90% {
121
- .ai-gradient-overlay(rgba(255, 255, 255, 0.18), @background);
193
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.18), @btn-ai-step-bg9);
122
194
  }
195
+
123
196
  100% {
124
- .ai-gradient-overlay(rgba(255, 255, 255, @ai-overlay-opacity), @background);
197
+ .ai-gradient-overlay(rgba(255, 255, 255, @ai-overlay-opacity), @background-hover);
125
198
  }
126
199
  }
127
200
  }
128
201
 
129
- .generate-hover-out-animation(@name; @background) {
202
+ .generate-hover-out-animation(@name; @background; @background-hover) {
130
203
  @keyframes @name {
131
204
  0% {
132
205
  .ai-gradient-overlay(rgba(255, 255, 255, @ai-overlay-opacity), @background);
133
206
  }
207
+
134
208
  10% {
135
- .ai-gradient-overlay(rgba(255, 255, 255, 0.18), @background);
209
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.18), @btn-ai-step-bg9);
136
210
  }
211
+
137
212
  20% {
138
- .ai-gradient-overlay(rgba(255, 255, 255, 0.16), @background);
213
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.16), @btn-ai-step-bg8);
139
214
  }
215
+
140
216
  30% {
141
- .ai-gradient-overlay(rgba(255, 255, 255, 0.14), @background);
217
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.14), @btn-ai-step-bg7);
142
218
  }
219
+
143
220
  40% {
144
- .ai-gradient-overlay(rgba(255, 255, 255, 0.12), @background);
221
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.12), @btn-ai-step-bg6);
145
222
  }
223
+
146
224
  50% {
147
- .ai-gradient-overlay(rgba(255, 255, 255, 0.1), @background);
225
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.1), @btn-ai-step-bg5);
148
226
  }
227
+
149
228
  60% {
150
- .ai-gradient-overlay(rgba(255, 255, 255, 0.08), @background);
229
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.08), @btn-ai-step-bg4);
151
230
  }
231
+
152
232
  70% {
153
- .ai-gradient-overlay(rgba(255, 255, 255, 0.06), @background);
233
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.06), @btn-ai-step-bg3);
154
234
  }
235
+
155
236
  80% {
156
- .ai-gradient-overlay(rgba(255, 255, 255, 0.04), @background);
237
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.04), @btn-ai-step-bg2);
157
238
  }
239
+
158
240
  90% {
159
- .ai-gradient-overlay(rgba(255, 255, 255, 0.02), @background);
241
+ .ai-gradient-overlay(rgba(255, 255, 255, 0.02), @btn-ai-step-bg1);
160
242
  }
243
+
161
244
  100% {
162
- background: @background;
245
+ background: @background-hover;
163
246
  }
164
247
  }
165
248
  }
166
249
 
167
- .generate-active-animation(@name; @background) {
250
+ .generate-active-animation(@name; @background; @background-hover) {
168
251
  @keyframes @name {
169
252
  0% {
170
253
  background: @background;
171
254
  }
255
+
172
256
  10% {
173
- .ai-gradient-overlay(rgba(0, 0, 0, 0.02), @background);
257
+ .ai-gradient-overlay(rgba(0, 0, 0, 0.02), @btn-ai-step-bg1);
174
258
  }
259
+
175
260
  20% {
176
- .ai-gradient-overlay(rgba(0, 0, 0, 0.04), @background);
261
+ .ai-gradient-overlay(rgba(0, 0, 0, 0.04), @btn-ai-step-bg2);
177
262
  }
263
+
178
264
  30% {
179
- .ai-gradient-overlay(rgba(0, 0, 0, 0.06), @background);
265
+ .ai-gradient-overlay(rgba(0, 0, 0, 0.06), @btn-ai-step-bg3);
180
266
  }
267
+
181
268
  40% {
182
- .ai-gradient-overlay(rgba(0, 0, 0, 0.08), @background);
269
+ .ai-gradient-overlay(rgba(0, 0, 0, 0.08), @btn-ai-step-bg4);
183
270
  }
271
+
184
272
  50% {
185
- .ai-gradient-overlay(rgba(0, 0, 0, 0.1), @background);
273
+ .ai-gradient-overlay(rgba(0, 0, 0, 0.1), @btn-ai-step-bg5);
186
274
  }
275
+
187
276
  60% {
188
- .ai-gradient-overlay(rgba(0, 0, 0, 0.12), @background);
277
+ .ai-gradient-overlay(rgba(0, 0, 0, 0.12), @btn-ai-step-bg6);
189
278
  }
279
+
190
280
  70% {
191
- .ai-gradient-overlay(rgba(0, 0, 0, 0.14), @background);
281
+ .ai-gradient-overlay(rgba(0, 0, 0, 0.14), @btn-ai-step-bg7);
192
282
  }
283
+
193
284
  80% {
194
- .ai-gradient-overlay(rgba(0, 0, 0, 0.16), @background);
285
+ .ai-gradient-overlay(rgba(0, 0, 0, 0.16), @btn-ai-step-bg8);
195
286
  }
287
+
196
288
  90% {
197
- .ai-gradient-overlay(rgba(0, 0, 0, 0.18), @background);
289
+ .ai-gradient-overlay(rgba(0, 0, 0, 0.18), @btn-ai-step-bg9);
198
290
  }
291
+
199
292
  100% {
200
- .ai-gradient-overlay(rgba(0, 0, 0, @ai-overlay-opacity), @background);
293
+ .ai-gradient-overlay(rgba(0, 0, 0, @ai-overlay-opacity), @background-hover);
201
294
  }
202
295
  }
203
296
  }
204
297
 
205
- .button-variant-ai(@color; @hover-color; @background) {
298
+ .button-variant-ai(@color; @hover-color; @background; @background-hover) {
206
299
  color: @color;
207
300
  background: @background;
208
301
  border: none;
209
302
  text-shadow: @btn-text-shadow;
210
303
  box-shadow: @btn-primary-shadow;
211
304
 
212
- animation: ai-hover-out @ai-animation-duration @ai-animation-easing;
213
- animation-fill-mode: both;
305
+ // animation: ai-hover-out @ai-animation-duration @ai-animation-easing;
306
+ // animation-fill-mode: both;
214
307
 
215
308
  &:hover,
216
309
  &:focus {
217
310
  color: @color;
218
- .ai-gradient-overlay(rgba(255, 255, 255, @ai-overlay-opacity), @background);
311
+ .ai-gradient-overlay(rgba(255, 255, 255, @ai-overlay-opacity), @background-hover);
219
312
  animation: ai-hover-in @ai-animation-duration @ai-animation-easing;
220
313
  animation-fill-mode: both;
221
314
  }
@@ -223,7 +316,7 @@
223
316
  &:active,
224
317
  &.active {
225
318
  color: @color;
226
- .ai-gradient-overlay(rgba(0, 0, 0, @ai-overlay-opacity), @background);
319
+ .ai-gradient-overlay(rgba(0, 0, 0, @ai-overlay-opacity), @background-hover);
227
320
  animation: ai-active-in @ai-animation-duration @ai-animation-easing;
228
321
  animation-fill-mode: both;
229
322
  }
@@ -246,7 +339,7 @@
246
339
  }
247
340
 
248
341
  // linear-gradient不支持 transition 动画,使用 animation模拟 transition 动画,目前10帧差不多可以很丝滑
249
- .generate-hover-in-animation(ai-hover-in; @background);
250
- .generate-hover-out-animation(ai-hover-out; @background);
251
- .generate-active-animation(ai-active-in; @background);
252
- }
342
+ .generate-hover-in-animation(ai-hover-in; @background; @background-hover);
343
+ .generate-hover-out-animation(ai-hover-out; @background-hover; @background);
344
+ .generate-active-animation(ai-active-in; @background-hover; @background; );
345
+ }
@@ -14,7 +14,8 @@
14
14
  border-radius: var(---, 8px);
15
15
  background: var(---, #F8F9FB);
16
16
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
17
- font-family: initial;
17
+ // font-family: initial;
18
+ font-family: inherit;
18
19
  font-weight: 400;
19
20
 
20
21
  .tntd-segmented-group {
@@ -1 +1 @@
1
- {"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/select/select.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,4DAAsD;AACtD,wDAAmD;AAEnD,4FAAmE;AACnE,4DAAmC;AACnC,mCAA4B;AAC5B,wCAAqD;AACrD,mEAAyC;AACzC,oCAAgD;AAChD,4DAAmC;AA4BnC,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAU,CAAA;AAE7B,MAAM,YAAY,GAAG,YAAY,CAAA;AAEpB,QAAA,cAAc,GAAG,IAAA,kBAAU,EACtC,CACE,EAA4F,EAC5F,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,OAAY,EAAP,KAAK,cAA1F,8FAA4F,CAAF;IAEvF,OAAA,CACH,8BAAC,gCAAc,QACZ,GAAG,EAAE;QACJ,OAAO,CACL,8BAAC,wBAAc,IAAC,aAAa,EAAC,QAAQ,EAAE,aAAa,EAAE,eAAK,CAAC,MAAM,IAChE,CAAC,MAAW,EAAE,UAAU,EAAE,EAAE;YAC3B,OAAO,CACL,8BAAC,gBAAU,oBACL,KAAK,IACT,WAAW,EAAE,IAAA,6BAAqB,EAChC,WAAW,IAAI,MAAM,CAAC,MAAM,EAC5B,UAAU,EACV,UAAU,CACX,EACD,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,YAAY,EAAE;oBAC7C,CAAC,GAAG,YAAY,UAAU,CAAC,EAAE,WAAW,KAAK,SAAS;oBACtD,CAAC,GAAG,YAAY,OAAO,CAAC,EAAE,WAAW,KAAK,MAAM;iBACjD,CAAC,EACF,GAAG,EAAE,GAAG,KAEP,QAAQ;gBACP,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBACtB,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;wBAC9B,OAAO,CACL,8BAAC,MAAM,IACL,GAAG,EAAE,IAAA,YAAG,EAAC,MAAM,EAAE,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,KAAI,OAAO,CAAC,EAC9C,KAAK,EAAE,IAAA,YAAG,EAAC,MAAM,EAAE,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,KAAI,OAAO,CAAC,EAChD,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,IAE1B,IAAA,YAAG,EAAC,MAAM,EAAE,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,KAAI,OAAO,CAAC,CACnC,CACV,CAAA;qBACF;oBAED,OAAO,CACL,8BAAC,MAAM,IAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,IAC/B,MAAM,CACA,CACV,CAAA;gBACH,CAAC,CAAC,CACK,CACd,CAAA;QACH,CAAC,CACc,CAClB,CAAA;IACH,CAAC,CACc,CAClB,CAAA;CAAA,CACiB,CAAA;AAEP,QAAA,MAAM,GAAG,IAAA,kCAAwB,EAC5C,sBAAc,EACd,sBAAW,CAAC,MAAM,CACA,CAAA;AAEpB,cAAM,CAAC,QAAQ,GAAG,gBAAU,CAAC,QAAQ,CAAA;AACrC,cAAM,CAAC,MAAM,GAAG,gBAAU,CAAC,MAAM,CAAA","sourcesContent":["import React, { ReactNode, forwardRef } from 'react'\nimport { default as AntdSelect } from 'antd/lib/select'\nimport { ConfigConsumer } from '../config-provider'\nimport type { SelectProps as AntdSelectProps } from 'antd/lib/select'\nimport LocaleReceiver from 'antd/lib/locale-provider/LocaleReceiver'\nimport classNames from 'classnames'\nimport { get } from 'lodash'\nimport { connectReadonlyComponent } from '../connect'\nimport PreviewText from '../preview-text'\nimport { capitalizeFirstLetter } from '../utils'\nimport en_US from '../locale/en_US'\nexport interface SelectProps extends AntdSelectProps {\n // 线框风格\n borderStyle?: 'outline' | 'fill'\n children?: ReactNode\n options?: Array<\n | string\n | number\n | {\n label: string\n value: string | number\n disabled?: boolean\n }\n >\n fieldNames?: {\n label?: string\n value?: string\n options?: string\n }\n readonly?: boolean\n}\n\ninterface SelectComponent\n extends React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<AntdSelect>> {\n OptGroup: typeof AntdSelect.OptGroup\n Option: typeof AntdSelect.Option\n}\n\nconst { Option } = AntdSelect\n\nconst tntPrefixCls = 'tnt-select'\n\nexport const InternalSelect = forwardRef<AntdSelect, SelectProps & { capitalize?: boolean }>(\n (\n { className, borderStyle, options, fieldNames, children, placeholder, capitalize, ...props },\n ref\n ) => (\n <ConfigConsumer>\n {() => {\n return (\n <LocaleReceiver componentName=\"Select\" defaultLocale={en_US.Select}>\n {(locale: any, localeCode) => {\n return (\n <AntdSelect\n {...props}\n placeholder={capitalizeFirstLetter(\n placeholder || locale.select,\n capitalize,\n localeCode\n )}\n className={classNames(className, tntPrefixCls, {\n [`${tntPrefixCls}-outline`]: borderStyle === 'outline',\n [`${tntPrefixCls}-fill`]: borderStyle === 'fill',\n })}\n ref={ref}\n >\n {children\n ? children\n : options?.map((option) => {\n if (typeof option === 'object') {\n return (\n <Option\n key={get(option, fieldNames?.value || 'value')}\n value={get(option, fieldNames?.value || 'value')}\n disabled={!!option.disabled}\n >\n {get(option, fieldNames?.label || 'label')}\n </Option>\n )\n }\n\n return (\n <Option key={option} value={option}>\n {option}\n </Option>\n )\n })}\n </AntdSelect>\n )\n }}\n </LocaleReceiver>\n )\n }}\n </ConfigConsumer>\n )\n) as SelectComponent\n\nexport const Select = connectReadonlyComponent(\n InternalSelect,\n PreviewText.Select\n) as SelectComponent\n\nSelect.OptGroup = AntdSelect.OptGroup\nSelect.Option = AntdSelect.Option\n"]}
1
+ {"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/select/select.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,4DAAsD;AACtD,wDAAmD;AAEnD,4FAAmE;AACnE,4DAAmC;AACnC,mCAA4B;AAC5B,wCAAqD;AACrD,mEAAyC;AACzC,oCAAgD;AAChD,4DAAmC;AA4BnC,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAU,CAAA;AAE7B,MAAM,YAAY,GAAG,YAAY,CAAA;AAEpB,QAAA,cAAc,GAAG,IAAA,kBAAU,EACtC,CACE,EAA4F,EAC5F,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,OAAY,EAAP,KAAK,cAA1F,8FAA4F,CAAF;IAEvF,OAAA,CACH,8BAAC,gCAAc,QACZ,GAAG,EAAE;QACJ,OAAO,CACL,8BAAC,wBAAc,IAAC,aAAa,EAAC,QAAQ,EAAC,aAAa,EAAE,eAAK,CAAC,MAAM,IAC/D,CAAC,MAAW,EAAE,UAAU,EAAE,EAAE;YAC3B,OAAO,CACL,8BAAC,gBAAU,oBACL,KAAK,IACT,WAAW,EAAE,IAAA,6BAAqB,EAChC,WAAW,IAAI,MAAM,CAAC,MAAM,EAC5B,UAAU,EACV,UAAU,CACX,EACD,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,YAAY,EAAE;oBAC7C,CAAC,GAAG,YAAY,UAAU,CAAC,EAAE,WAAW,KAAK,SAAS;oBACtD,CAAC,GAAG,YAAY,OAAO,CAAC,EAAE,WAAW,KAAK,MAAM;iBACjD,CAAC,EACF,GAAG,EAAE,GAAG,KAEP,QAAQ;gBACP,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBACtB,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;wBAC9B,OAAO,CACL,8BAAC,MAAM,IACL,GAAG,EAAE,IAAA,YAAG,EAAC,MAAM,EAAE,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,KAAI,OAAO,CAAC,EAC9C,KAAK,EAAE,IAAA,YAAG,EAAC,MAAM,EAAE,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,KAAI,OAAO,CAAC,EAChD,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,IAE1B,IAAA,YAAG,EAAC,MAAM,EAAE,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,KAAI,OAAO,CAAC,CACnC,CACV,CAAA;qBACF;oBAED,OAAO,CACL,8BAAC,MAAM,IAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,IAC/B,MAAM,CACA,CACV,CAAA;gBACH,CAAC,CAAC,CACK,CACd,CAAA;QACH,CAAC,CACc,CAClB,CAAA;IACH,CAAC,CACc,CAClB,CAAA;CAAA,CACiB,CAAA;AAEP,QAAA,MAAM,GAAG,IAAA,kCAAwB,EAC5C,sBAAc,EACd,sBAAW,CAAC,MAAM,CACA,CAAA;AAEpB,cAAM,CAAC,QAAQ,GAAG,gBAAU,CAAC,QAAQ,CAAA;AACrC,cAAM,CAAC,MAAM,GAAG,gBAAU,CAAC,MAAM,CAAA","sourcesContent":["import React, { ReactNode, forwardRef } from 'react'\nimport { default as AntdSelect } from 'antd/lib/select'\nimport { ConfigConsumer } from '../config-provider'\nimport type { SelectProps as AntdSelectProps } from 'antd/lib/select'\nimport LocaleReceiver from 'antd/lib/locale-provider/LocaleReceiver'\nimport classNames from 'classnames'\nimport { get } from 'lodash'\nimport { connectReadonlyComponent } from '../connect'\nimport PreviewText from '../preview-text'\nimport { capitalizeFirstLetter } from '../utils'\nimport en_US from '../locale/en_US'\nexport interface SelectProps extends AntdSelectProps {\n // 线框风格\n borderStyle?: 'outline' | 'fill'\n children?: ReactNode\n options?: Array<\n | string\n | number\n | {\n label: string\n value: string | number\n disabled?: boolean\n }\n >\n fieldNames?: {\n label?: string\n value?: string\n options?: string\n }\n readonly?: boolean\n}\n\ninterface SelectComponent\n extends React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<AntdSelect>> {\n OptGroup: typeof AntdSelect.OptGroup\n Option: typeof AntdSelect.Option\n}\n\nconst { Option } = AntdSelect\n\nconst tntPrefixCls = 'tnt-select'\n\nexport const InternalSelect = forwardRef<AntdSelect, SelectProps & { capitalize?: boolean }>(\n (\n { className, borderStyle, options, fieldNames, children, placeholder, capitalize, ...props },\n ref\n ) => (\n <ConfigConsumer>\n {() => {\n return (\n <LocaleReceiver componentName=\"Select\" defaultLocale={en_US.Select}>\n {(locale: any, localeCode) => {\n return (\n <AntdSelect\n {...props}\n placeholder={capitalizeFirstLetter(\n placeholder || locale.select,\n capitalize,\n localeCode\n )}\n className={classNames(className, tntPrefixCls, {\n [`${tntPrefixCls}-outline`]: borderStyle === 'outline',\n [`${tntPrefixCls}-fill`]: borderStyle === 'fill',\n })}\n ref={ref}\n >\n {children\n ? children\n : options?.map((option) => {\n if (typeof option === 'object') {\n return (\n <Option\n key={get(option, fieldNames?.value || 'value')}\n value={get(option, fieldNames?.value || 'value')}\n disabled={!!option.disabled}\n >\n {get(option, fieldNames?.label || 'label')}\n </Option>\n )\n }\n\n return (\n <Option key={option} value={option}>\n {option}\n </Option>\n )\n })}\n </AntdSelect>\n )\n }}\n </LocaleReceiver>\n )\n }}\n </ConfigConsumer>\n )\n) as SelectComponent\n\nexport const Select = connectReadonlyComponent(\n InternalSelect,\n PreviewText.Select\n) as SelectComponent\n\nSelect.OptGroup = AntdSelect.OptGroup\nSelect.Option = AntdSelect.Option\n"]}
@@ -41,11 +41,11 @@
41
41
  }
42
42
  }
43
43
 
44
- .tntd-checkbox-select-dropdown-wrap{
44
+ .tntd-checkbox-select-dropdown-wrap {
45
45
  border-radius: 8px;
46
46
  }
47
47
 
48
- .tntd-checkbox-select-item-tag {
48
+ .tnt-tag.tntd-checkbox-select-item-tag {
49
49
  margin-right: 4px;
50
50
  font-size: 14px;
51
51
  margin-top: 2px;
@@ -54,15 +54,16 @@
54
54
  display: flex;
55
55
  align-items: center;
56
56
  border: none;
57
- .tntd-checkbox-select-item-tag-label{
57
+
58
+ .tntd-checkbox-select-item-tag-label {
58
59
  flex: 1;
59
60
  overflow: hidden;
60
61
  }
61
62
 
62
- .anticon-close{
63
+ .anticon-close {
63
64
  color: rgba(23, 35, 61, 0.8);
64
65
  font-size: 12px !important;
65
66
  font-weight: bold;
66
67
  margin-top: 2px;
67
68
  }
68
- }
69
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tntd",
3
- "version": "3.1.8",
3
+ "version": "3.1.9",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "start": "heft start --storybook",
@@ -26,9 +26,7 @@
26
26
  @primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
27
27
  @primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
28
28
  @primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
29
- @primary-5: color(
30
- ~`colorPalette('@{primary-color}', 5) `
31
- ); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
29
+ @primary-5: color(~`colorPalette('@{primary-color}', 5) `); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
32
30
  @primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
33
31
  @primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
34
32
  @primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
@@ -161,11 +159,10 @@
161
159
  @btn-tertiary-bg: #f8f9fb;
162
160
 
163
161
  @btn-ai-bg: linear-gradient(128deg, #bf5fff 6.08%, #2e69ff 96.35%);
164
- @btn-disable-bg-ai: linear-gradient(
165
- 0deg,
162
+ @btn-ai-hover-bg: linear-gradient(128deg, #2e69ff 6.08%, #bf5fff 96.35%);
163
+ @btn-disable-bg-ai: linear-gradient(0deg,
166
164
  rgba(255, 255, 255, 0.7) 0%,
167
- rgba(255, 255, 255, 0.7) 100%
168
- ),
165
+ rgba(255, 255, 255, 0.7) 100%),
169
166
  linear-gradient(128deg, #bf5fff 6.08%, #2e69ff 96.35%);
170
167
 
171
168
  @btn-danger-color: #fff;
@@ -702,4 +699,4 @@
702
699
  @bg-color-spotilight: #17233d;
703
700
  @bg-color-spotilight-tint-50: #8b919e;
704
701
  @size-step-base: 4;
705
- @size-step-unit: 4;
702
+ @size-step-unit: 4;
@@ -27,9 +27,7 @@
27
27
  @primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
28
28
  @primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
29
29
  @primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
30
- @primary-5: color(
31
- ~`colorPalette('@{primary-color}', 5) `
32
- ); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
30
+ @primary-5: color(~`colorPalette('@{primary-color}', 5) `); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
33
31
  @primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
34
32
  @primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
35
33
  @primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
@@ -162,11 +160,10 @@
162
160
  @btn-tertiary-bg: #f8f9fb;
163
161
 
164
162
  @btn-ai-bg: linear-gradient(128deg, #bf5fff 6.08%, #2e69ff 96.35%);
165
- @btn-disable-bg-ai: linear-gradient(
166
- 0deg,
163
+ @btn-ai-hover-bg: linear-gradient(128deg, #2e69ff 6.08%, #bf5fff 96.35%);
164
+ @btn-disable-bg-ai: linear-gradient(0deg,
167
165
  rgba(255, 255, 255, 0.7) 0%,
168
- rgba(255, 255, 255, 0.7) 100%
169
- ),
166
+ rgba(255, 255, 255, 0.7) 100%),
170
167
  linear-gradient(128deg, #bf5fff 6.08%, #2e69ff 96.35%);
171
168
 
172
169
  @btn-danger-color: #fff;
@@ -704,4 +701,4 @@
704
701
  @bg-color-spotilight: #17233d;
705
702
  @bg-color-spotilight-tint-50: #8b919e;
706
703
  @size-step-base: var(--size-step-base);
707
- @size-step-unit: var(--size-step-unit);
704
+ @size-step-unit: var(--size-step-unit);
@@ -1 +0,0 @@
1
- "use strict";(Object("undefined"!=typeof self?self:this).webpackChunktntd=Object("undefined"!=typeof self?self:this).webpackChunktntd||[]).push([[930],{84930:(e,t,a)=>{a.r(t),a.d(t,{default:()=>p});var n=a(84639),o=a.n(n),l=a(53130),s=a(32767),c=a(9906),r=a(19466),d=a(52110);const u=new l.Z;let i={account:void 0,password:void 0};const p=e=>{let{visible:t,close:a,signIn:l}=e;const[p,f]=(0,n.useState)(!1),h=localStorage.getItem("accountInfo");if(h)try{i=JSON.parse(h)}catch(e){}const[m,b]=(0,n.useState)(i),{account:v,password:g}=m,k=(e,t)=>{b({...m,[e]:t.target.value})};return o().createElement(s.ZP,{title:"开发者模拟登陆",visible:t,maskClosable:!1,onOk:()=>{f(!0);const e=l&&l(m);e&&e.then&&e.then((e=>{d.Z.success("模拟登陆成功"),localStorage.setItem("accountInfo",JSON.stringify(m)),f(!1),setTimeout((()=>{const{tdToken:t,userId:n}=e||{};u.set("_td_token_",t,{path:"/"}),u.set("_uid_",n,{path:"/"}),a()}),500)})).catch((e=>{throw f(!1),e}))},onCancel:a,confirmLoading:p},o().createElement(r.Z,{labelCol:{span:5},wrapperCol:{span:18}},o().createElement(r.Z.Item,{label:"用户名:"},o().createElement(c.default,{type:"text",placeholder:"请输入用户名",value:v||void 0,onChange:e=>k("account",e)})),o().createElement(r.Z.Item,{label:"密码:"},o().createElement(c.default,{type:"text",placeholder:"请输入用户名",value:g||void 0,onChange:e=>k("password",e)}))))}}}]);