@douyinfe/semi-foundation 2.56.0-beta.0 → 2.56.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.
@@ -12,13 +12,13 @@ $icon: #{$module}-with-icon;
12
12
  margin-right: 1px;
13
13
 
14
14
  &-first {
15
- border-top-left-radius: var(--semi-border-radius-small);
16
- border-bottom-left-radius: var(--semi-border-radius-small);
15
+ border-top-left-radius: $radius-splitButtonGroup_first_topLeft;
16
+ border-bottom-left-radius: $radius-splitButtonGroup_first_bottomLeft;
17
17
  }
18
18
 
19
19
  &-last {
20
- border-top-right-radius: var(--semi-border-radius-small);
21
- border-bottom-right-radius: var(--semi-border-radius-small);
20
+ border-top-right-radius: $radius-splitButtonGroup_last_topRight;
21
+ border-bottom-right-radius: $radius-splitButtonGroup_last_bottomRight;
22
22
  margin-right: unset;
23
23
  }
24
24
  }
@@ -160,3 +160,9 @@ $width-button-border: $border-thickness; // 按钮描边宽度
160
160
  $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
161
161
  $radius-button_group: $radius-button; // 按钮组圆角大小
162
162
  $width-button-outline: 2px; // 按钮轮廓宽度
163
+
164
+
165
+ $radius-splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
166
+ $radius-splitButtonGroup_first_bottomLeft:var(--semi-border-radius-small); // split button 左下圆角
167
+ $radius-splitButtonGroup_last_topRight:var(--semi-border-radius-small); // split button 右上圆角
168
+ $radius-splitButtonGroup_last_bottomRight:var(--semi-border-radius-small); // split button 右下圆角
@@ -391,7 +391,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
391
391
  cacheValue = this._getCacheValue(keyEntities);
392
392
  }
393
393
 
394
- const selectedValue = !this._isControlledComponent() ? cacheValue : value;
394
+ const selectedValue = !this._isControlledComponent() ? cacheValue : (isUndefined(value) ? [] : value);
395
395
  if (isValid(selectedValue)) {
396
396
  this.updateSelectedKey(selectedValue, keyEntities);
397
397
  } else {
@@ -402,8 +402,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
402
402
  // call when props.value change
403
403
  handleValueChange(value: BasicValue) {
404
404
  const { keyEntities } = this.getStates();
405
- const { multiple } = this.getProps();
406
- !multiple && this.updateSelectedKey(value, keyEntities);
405
+ this.updateSelectedKey(value, keyEntities);
407
406
  }
408
407
 
409
408
  /**
@@ -12,13 +12,13 @@ $icon: #{$module}-with-icon;
12
12
  margin-right: 1px;
13
13
 
14
14
  &-first {
15
- border-top-left-radius: var(--semi-border-radius-small);
16
- border-bottom-left-radius: var(--semi-border-radius-small);
15
+ border-top-left-radius: $radius-splitButtonGroup_first_topLeft;
16
+ border-bottom-left-radius: $radius-splitButtonGroup_first_bottomLeft;
17
17
  }
18
18
 
19
19
  &-last {
20
- border-top-right-radius: var(--semi-border-radius-small);
21
- border-bottom-right-radius: var(--semi-border-radius-small);
20
+ border-top-right-radius: $radius-splitButtonGroup_last_topRight;
21
+ border-bottom-right-radius: $radius-splitButtonGroup_last_bottomRight;
22
22
  margin-right: unset;
23
23
  }
24
24
  }
@@ -160,3 +160,9 @@ $width-button-border: $border-thickness; // 按钮描边宽度
160
160
  $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
161
161
  $radius-button_group: $radius-button; // 按钮组圆角大小
162
162
  $width-button-outline: 2px; // 按钮轮廓宽度
163
+
164
+
165
+ $radius-splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
166
+ $radius-splitButtonGroup_first_bottomLeft:var(--semi-border-radius-small); // split button 左下圆角
167
+ $radius-splitButtonGroup_last_topRight:var(--semi-border-radius-small); // split button 右上圆角
168
+ $radius-splitButtonGroup_last_bottomRight:var(--semi-border-radius-small); // split button 右下圆角
@@ -188,7 +188,7 @@ class CascaderFoundation extends _foundation.default {
188
188
  } else if (!(0, _isEmpty2.default)(keyEntities)) {
189
189
  cacheValue = this._getCacheValue(keyEntities);
190
190
  }
191
- const selectedValue = !this._isControlledComponent() ? cacheValue : value;
191
+ const selectedValue = !this._isControlledComponent() ? cacheValue : (0, _isUndefined2.default)(value) ? [] : value;
192
192
  if ((0, _util.isValid)(selectedValue)) {
193
193
  this.updateSelectedKey(selectedValue, keyEntities);
194
194
  } else {
@@ -202,10 +202,7 @@ class CascaderFoundation extends _foundation.default {
202
202
  const {
203
203
  keyEntities
204
204
  } = this.getStates();
205
- const {
206
- multiple
207
- } = this.getProps();
208
- !multiple && this.updateSelectedKey(value, keyEntities);
205
+ this.updateSelectedKey(value, keyEntities);
209
206
  }
210
207
  /**
211
208
  * When single selection, the clear objects of
@@ -378,18 +378,21 @@
378
378
  overflow: hidden;
379
379
  position: relative;
380
380
  }
381
+ .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper {
382
+ height: 24px;
383
+ line-height: 24px;
384
+ }
385
+ .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper .semi-input-default {
386
+ height: 24px;
387
+ }
381
388
  .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper {
382
389
  position: absolute;
383
390
  top: 0;
384
391
  left: 0;
385
392
  height: 100%;
386
393
  }
387
- .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper {
388
- height: 24px;
389
- line-height: 24px;
390
- }
391
- .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper .semi-input-default {
392
- height: 24px;
394
+ .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper .semi-input-default {
395
+ height: 100%;
393
396
  }
394
397
  .semi-select-multiple.semi-select-filterable .semi-input-wrapper {
395
398
  height: 100%;
@@ -405,19 +408,19 @@
405
408
  padding-right: 0;
406
409
  }
407
410
 
408
- .semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large {
411
+ .semi-select-multiple.semi-select-filterable.semi-select-large .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper-large {
409
412
  height: 24px;
410
413
  line-height: 24px;
411
414
  }
412
- .semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large .semi-input-large {
415
+ .semi-select-multiple.semi-select-filterable.semi-select-large .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper-large .semi-input-large {
413
416
  height: 24px;
414
417
  }
415
418
 
416
- .semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper {
419
+ .semi-select-multiple.semi-select-filterable.semi-select-small .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper {
417
420
  height: 20px;
418
421
  line-height: 20px;
419
422
  }
420
- .semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper .semi-input-small {
423
+ .semi-select-multiple.semi-select-filterable.semi-select-small .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper .semi-input-small {
421
424
  height: 20px;
422
425
  }
423
426
 
@@ -392,22 +392,29 @@ $overflowList: #{$prefix}-overflow-list;
392
392
  height: 100%;
393
393
  overflow: hidden;
394
394
  position: relative;
395
+
396
+ &:not(.#{$module}-content-wrapper-empty) {
397
+ .#{$prefix}-input-wrapper {
398
+ height: $height-select_multiple_input_default;
399
+ line-height: $height-select_multiple_input_default;
400
+ .#{$prefix}-input-default {
401
+ height: $height-select_multiple_input_default;
402
+ }
403
+ }
404
+ }
405
+
395
406
  &-empty {
396
407
  .#{$prefix}-input-wrapper {
397
408
  position: absolute;
398
409
  top: 0;
399
410
  left: 0;
400
411
  height: 100%;
412
+ .#{$prefix}-input-default {
413
+ height: 100%;
414
+ }
401
415
  // width: 100%; // no need to set width here, will calcuate inline style by js
402
416
  }
403
417
  }
404
- .#{$prefix}-input-wrapper {
405
- height: $height-select_multiple_input_default;
406
- line-height: $height-select_multiple_input_default;
407
- .#{$prefix}-input-default {
408
- height: $height-select_multiple_input_default;
409
- }
410
- }
411
418
  }
412
419
  .#{$prefix}-input-wrapper {
413
420
  // position: absolute;
@@ -430,20 +437,29 @@ $overflowList: #{$prefix}-overflow-list;
430
437
  }
431
438
 
432
439
  .#{$multiple}.#{$filterable}.#{$module}-large {
433
- .#{$prefix}-input-wrapper-large {
434
- height: $height-select_multiple_input_large;
435
- line-height: $height-select_multiple_input_large;
436
- .#{$prefix}-input-large {
437
- height: $height-select_multiple_input_large
440
+ .#{$module}-content-wrapper {
441
+ &:not(.#{$module}-content-wrapper-empty) {
442
+ .#{$prefix}-input-wrapper-large {
443
+ height: $height-select_multiple_input_large;
444
+ line-height: $height-select_multiple_input_large;
445
+ .#{$prefix}-input-large {
446
+ height: $height-select_multiple_input_large
447
+ }
448
+ }
438
449
  }
439
450
  }
440
451
  }
452
+
441
453
  .#{$multiple}.#{$filterable}.#{$module}-small {
442
- .#{$prefix}-input-wrapper {
443
- height: $height-select_multiple_input_small;
444
- line-height: $height-select_multiple_input_small;
445
- .#{$prefix}-input-small {
446
- height: $height-select_multiple_input_small;
454
+ .#{$module}-content-wrapper {
455
+ &:not(.#{$module}-content-wrapper-empty) {
456
+ .#{$prefix}-input-wrapper {
457
+ height: $height-select_multiple_input_small;
458
+ line-height: $height-select_multiple_input_small;
459
+ .#{$prefix}-input-small {
460
+ height: $height-select_multiple_input_small;
461
+ }
462
+ }
447
463
  }
448
464
  }
449
465
  }
@@ -12,13 +12,13 @@ $icon: #{$module}-with-icon;
12
12
  margin-right: 1px;
13
13
 
14
14
  &-first {
15
- border-top-left-radius: var(--semi-border-radius-small);
16
- border-bottom-left-radius: var(--semi-border-radius-small);
15
+ border-top-left-radius: $radius-splitButtonGroup_first_topLeft;
16
+ border-bottom-left-radius: $radius-splitButtonGroup_first_bottomLeft;
17
17
  }
18
18
 
19
19
  &-last {
20
- border-top-right-radius: var(--semi-border-radius-small);
21
- border-bottom-right-radius: var(--semi-border-radius-small);
20
+ border-top-right-radius: $radius-splitButtonGroup_last_topRight;
21
+ border-bottom-right-radius: $radius-splitButtonGroup_last_bottomRight;
22
22
  margin-right: unset;
23
23
  }
24
24
  }
@@ -160,3 +160,9 @@ $width-button-border: $border-thickness; // 按钮描边宽度
160
160
  $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
161
161
  $radius-button_group: $radius-button; // 按钮组圆角大小
162
162
  $width-button-outline: 2px; // 按钮轮廓宽度
163
+
164
+
165
+ $radius-splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
166
+ $radius-splitButtonGroup_first_bottomLeft:var(--semi-border-radius-small); // split button 左下圆角
167
+ $radius-splitButtonGroup_last_topRight:var(--semi-border-radius-small); // split button 右上圆角
168
+ $radius-splitButtonGroup_last_bottomRight:var(--semi-border-radius-small); // split button 右下圆角
@@ -181,7 +181,7 @@ export default class CascaderFoundation extends BaseFoundation {
181
181
  } else if (!_isEmpty(keyEntities)) {
182
182
  cacheValue = this._getCacheValue(keyEntities);
183
183
  }
184
- const selectedValue = !this._isControlledComponent() ? cacheValue : value;
184
+ const selectedValue = !this._isControlledComponent() ? cacheValue : _isUndefined(value) ? [] : value;
185
185
  if (isValid(selectedValue)) {
186
186
  this.updateSelectedKey(selectedValue, keyEntities);
187
187
  } else {
@@ -195,10 +195,7 @@ export default class CascaderFoundation extends BaseFoundation {
195
195
  const {
196
196
  keyEntities
197
197
  } = this.getStates();
198
- const {
199
- multiple
200
- } = this.getProps();
201
- !multiple && this.updateSelectedKey(value, keyEntities);
198
+ this.updateSelectedKey(value, keyEntities);
202
199
  }
203
200
  /**
204
201
  * When single selection, the clear objects of
@@ -378,18 +378,21 @@
378
378
  overflow: hidden;
379
379
  position: relative;
380
380
  }
381
+ .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper {
382
+ height: 24px;
383
+ line-height: 24px;
384
+ }
385
+ .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper .semi-input-default {
386
+ height: 24px;
387
+ }
381
388
  .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper {
382
389
  position: absolute;
383
390
  top: 0;
384
391
  left: 0;
385
392
  height: 100%;
386
393
  }
387
- .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper {
388
- height: 24px;
389
- line-height: 24px;
390
- }
391
- .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper .semi-input-default {
392
- height: 24px;
394
+ .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper .semi-input-default {
395
+ height: 100%;
393
396
  }
394
397
  .semi-select-multiple.semi-select-filterable .semi-input-wrapper {
395
398
  height: 100%;
@@ -405,19 +408,19 @@
405
408
  padding-right: 0;
406
409
  }
407
410
 
408
- .semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large {
411
+ .semi-select-multiple.semi-select-filterable.semi-select-large .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper-large {
409
412
  height: 24px;
410
413
  line-height: 24px;
411
414
  }
412
- .semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large .semi-input-large {
415
+ .semi-select-multiple.semi-select-filterable.semi-select-large .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper-large .semi-input-large {
413
416
  height: 24px;
414
417
  }
415
418
 
416
- .semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper {
419
+ .semi-select-multiple.semi-select-filterable.semi-select-small .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper {
417
420
  height: 20px;
418
421
  line-height: 20px;
419
422
  }
420
- .semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper .semi-input-small {
423
+ .semi-select-multiple.semi-select-filterable.semi-select-small .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper .semi-input-small {
421
424
  height: 20px;
422
425
  }
423
426
 
@@ -392,22 +392,29 @@ $overflowList: #{$prefix}-overflow-list;
392
392
  height: 100%;
393
393
  overflow: hidden;
394
394
  position: relative;
395
+
396
+ &:not(.#{$module}-content-wrapper-empty) {
397
+ .#{$prefix}-input-wrapper {
398
+ height: $height-select_multiple_input_default;
399
+ line-height: $height-select_multiple_input_default;
400
+ .#{$prefix}-input-default {
401
+ height: $height-select_multiple_input_default;
402
+ }
403
+ }
404
+ }
405
+
395
406
  &-empty {
396
407
  .#{$prefix}-input-wrapper {
397
408
  position: absolute;
398
409
  top: 0;
399
410
  left: 0;
400
411
  height: 100%;
412
+ .#{$prefix}-input-default {
413
+ height: 100%;
414
+ }
401
415
  // width: 100%; // no need to set width here, will calcuate inline style by js
402
416
  }
403
417
  }
404
- .#{$prefix}-input-wrapper {
405
- height: $height-select_multiple_input_default;
406
- line-height: $height-select_multiple_input_default;
407
- .#{$prefix}-input-default {
408
- height: $height-select_multiple_input_default;
409
- }
410
- }
411
418
  }
412
419
  .#{$prefix}-input-wrapper {
413
420
  // position: absolute;
@@ -430,20 +437,29 @@ $overflowList: #{$prefix}-overflow-list;
430
437
  }
431
438
 
432
439
  .#{$multiple}.#{$filterable}.#{$module}-large {
433
- .#{$prefix}-input-wrapper-large {
434
- height: $height-select_multiple_input_large;
435
- line-height: $height-select_multiple_input_large;
436
- .#{$prefix}-input-large {
437
- height: $height-select_multiple_input_large
440
+ .#{$module}-content-wrapper {
441
+ &:not(.#{$module}-content-wrapper-empty) {
442
+ .#{$prefix}-input-wrapper-large {
443
+ height: $height-select_multiple_input_large;
444
+ line-height: $height-select_multiple_input_large;
445
+ .#{$prefix}-input-large {
446
+ height: $height-select_multiple_input_large
447
+ }
448
+ }
438
449
  }
439
450
  }
440
451
  }
452
+
441
453
  .#{$multiple}.#{$filterable}.#{$module}-small {
442
- .#{$prefix}-input-wrapper {
443
- height: $height-select_multiple_input_small;
444
- line-height: $height-select_multiple_input_small;
445
- .#{$prefix}-input-small {
446
- height: $height-select_multiple_input_small;
454
+ .#{$module}-content-wrapper {
455
+ &:not(.#{$module}-content-wrapper-empty) {
456
+ .#{$prefix}-input-wrapper {
457
+ height: $height-select_multiple_input_small;
458
+ line-height: $height-select_multiple_input_small;
459
+ .#{$prefix}-input-small {
460
+ height: $height-select_multiple_input_small;
461
+ }
462
+ }
447
463
  }
448
464
  }
449
465
  }
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.56.0-beta.0",
3
+ "version": "2.56.1",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "build:lib": "node ./scripts/compileLib.js",
7
7
  "prepublishOnly": "npm run build:lib"
8
8
  },
9
9
  "dependencies": {
10
- "@douyinfe/semi-animation": "2.56.0-beta.0",
10
+ "@douyinfe/semi-animation": "2.56.1",
11
11
  "async-validator": "^3.5.0",
12
12
  "classnames": "^2.2.6",
13
13
  "date-fns": "^2.29.3",
@@ -24,7 +24,7 @@
24
24
  "*.scss",
25
25
  "*.css"
26
26
  ],
27
- "gitHead": "ae4502e3075a19370e9f4ed32fbfb1292acd06c2",
27
+ "gitHead": "b227a323467c2ad1c429a748a82591b6fe38091f",
28
28
  "devDependencies": {
29
29
  "@babel/plugin-transform-runtime": "^7.15.8",
30
30
  "@babel/preset-env": "^7.15.8",
@@ -392,22 +392,29 @@ $overflowList: #{$prefix}-overflow-list;
392
392
  height: 100%;
393
393
  overflow: hidden;
394
394
  position: relative;
395
+
396
+ &:not(.#{$module}-content-wrapper-empty) {
397
+ .#{$prefix}-input-wrapper {
398
+ height: $height-select_multiple_input_default;
399
+ line-height: $height-select_multiple_input_default;
400
+ .#{$prefix}-input-default {
401
+ height: $height-select_multiple_input_default;
402
+ }
403
+ }
404
+ }
405
+
395
406
  &-empty {
396
407
  .#{$prefix}-input-wrapper {
397
408
  position: absolute;
398
409
  top: 0;
399
410
  left: 0;
400
411
  height: 100%;
412
+ .#{$prefix}-input-default {
413
+ height: 100%;
414
+ }
401
415
  // width: 100%; // no need to set width here, will calcuate inline style by js
402
416
  }
403
417
  }
404
- .#{$prefix}-input-wrapper {
405
- height: $height-select_multiple_input_default;
406
- line-height: $height-select_multiple_input_default;
407
- .#{$prefix}-input-default {
408
- height: $height-select_multiple_input_default;
409
- }
410
- }
411
418
  }
412
419
  .#{$prefix}-input-wrapper {
413
420
  // position: absolute;
@@ -430,20 +437,29 @@ $overflowList: #{$prefix}-overflow-list;
430
437
  }
431
438
 
432
439
  .#{$multiple}.#{$filterable}.#{$module}-large {
433
- .#{$prefix}-input-wrapper-large {
434
- height: $height-select_multiple_input_large;
435
- line-height: $height-select_multiple_input_large;
436
- .#{$prefix}-input-large {
437
- height: $height-select_multiple_input_large
440
+ .#{$module}-content-wrapper {
441
+ &:not(.#{$module}-content-wrapper-empty) {
442
+ .#{$prefix}-input-wrapper-large {
443
+ height: $height-select_multiple_input_large;
444
+ line-height: $height-select_multiple_input_large;
445
+ .#{$prefix}-input-large {
446
+ height: $height-select_multiple_input_large
447
+ }
448
+ }
438
449
  }
439
450
  }
440
451
  }
452
+
441
453
  .#{$multiple}.#{$filterable}.#{$module}-small {
442
- .#{$prefix}-input-wrapper {
443
- height: $height-select_multiple_input_small;
444
- line-height: $height-select_multiple_input_small;
445
- .#{$prefix}-input-small {
446
- height: $height-select_multiple_input_small;
454
+ .#{$module}-content-wrapper {
455
+ &:not(.#{$module}-content-wrapper-empty) {
456
+ .#{$prefix}-input-wrapper {
457
+ height: $height-select_multiple_input_small;
458
+ line-height: $height-select_multiple_input_small;
459
+ .#{$prefix}-input-small {
460
+ height: $height-select_multiple_input_small;
461
+ }
462
+ }
447
463
  }
448
464
  }
449
465
  }