@douyinfe/semi-ui 2.32.2 → 2.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/css/semi.css +184 -1
  2. package/dist/css/semi.min.css +1 -1
  3. package/dist/umd/semi-ui.js +3409 -3351
  4. package/dist/umd/semi-ui.js.map +1 -1
  5. package/dist/umd/semi-ui.min.js +1 -1
  6. package/dist/umd/semi-ui.min.js.map +1 -1
  7. package/lib/cjs/cascader/index.d.ts +2 -0
  8. package/lib/cjs/cascader/index.js +5 -1
  9. package/lib/cjs/collapse/collapse-context.d.ts +1 -0
  10. package/lib/cjs/collapse/index.d.ts +2 -0
  11. package/lib/cjs/collapse/index.js +6 -2
  12. package/lib/cjs/collapse/item.d.ts +2 -0
  13. package/lib/cjs/collapse/item.js +13 -2
  14. package/lib/cjs/datePicker/dateInput.d.ts +2 -0
  15. package/lib/cjs/datePicker/dateInput.js +10 -3
  16. package/lib/cjs/datePicker/datePicker.d.ts +3 -1
  17. package/lib/cjs/datePicker/datePicker.js +20 -7
  18. package/lib/cjs/form/baseForm.d.ts +1 -0
  19. package/lib/cjs/form/field.d.ts +1 -0
  20. package/lib/cjs/input/index.d.ts +3 -0
  21. package/lib/cjs/input/index.js +9 -5
  22. package/lib/cjs/input/textarea.d.ts +1 -0
  23. package/lib/cjs/input/textarea.js +6 -2
  24. package/lib/cjs/select/index.d.ts +2 -0
  25. package/lib/cjs/select/index.js +5 -1
  26. package/lib/cjs/timePicker/TimeInput.d.ts +3 -1
  27. package/lib/cjs/timePicker/TimeInput.js +2 -0
  28. package/lib/cjs/timePicker/TimePicker.d.ts +3 -0
  29. package/lib/cjs/timePicker/TimePicker.js +2 -0
  30. package/lib/cjs/timePicker/index.d.ts +2 -0
  31. package/lib/cjs/transfer/index.js +1 -1
  32. package/lib/cjs/treeSelect/index.d.ts +1 -0
  33. package/lib/cjs/treeSelect/index.js +5 -1
  34. package/lib/es/cascader/index.d.ts +2 -0
  35. package/lib/es/cascader/index.js +5 -1
  36. package/lib/es/collapse/collapse-context.d.ts +1 -0
  37. package/lib/es/collapse/index.d.ts +2 -0
  38. package/lib/es/collapse/index.js +6 -2
  39. package/lib/es/collapse/item.d.ts +2 -0
  40. package/lib/es/collapse/item.js +13 -2
  41. package/lib/es/datePicker/dateInput.d.ts +2 -0
  42. package/lib/es/datePicker/dateInput.js +10 -3
  43. package/lib/es/datePicker/datePicker.d.ts +3 -1
  44. package/lib/es/datePicker/datePicker.js +19 -7
  45. package/lib/es/form/baseForm.d.ts +1 -0
  46. package/lib/es/form/field.d.ts +1 -0
  47. package/lib/es/input/index.d.ts +3 -0
  48. package/lib/es/input/index.js +9 -5
  49. package/lib/es/input/textarea.d.ts +1 -0
  50. package/lib/es/input/textarea.js +6 -2
  51. package/lib/es/select/index.d.ts +2 -0
  52. package/lib/es/select/index.js +5 -1
  53. package/lib/es/timePicker/TimeInput.d.ts +3 -1
  54. package/lib/es/timePicker/TimeInput.js +2 -0
  55. package/lib/es/timePicker/TimePicker.d.ts +3 -0
  56. package/lib/es/timePicker/TimePicker.js +2 -0
  57. package/lib/es/timePicker/index.d.ts +2 -0
  58. package/lib/es/transfer/index.js +1 -1
  59. package/lib/es/treeSelect/index.d.ts +1 -0
  60. package/lib/es/treeSelect/index.js +5 -1
  61. package/package.json +8 -8
package/dist/css/semi.css CHANGED
@@ -3077,6 +3077,14 @@ body {
3077
3077
  background-color: var(--semi-color-fill-1);
3078
3078
  border: 1px transparent solid;
3079
3079
  }
3080
+ .semi-cascader:focus {
3081
+ border: 1px solid var(--semi-color-focus-border);
3082
+ background-color: var(--semi-color-fill-0);
3083
+ outline: 0;
3084
+ }
3085
+ .semi-cascader:active {
3086
+ background-color: var(--semi-color-fill-2);
3087
+ }
3080
3088
  .semi-cascader-small {
3081
3089
  min-height: 24px;
3082
3090
  line-height: 24px;
@@ -3094,10 +3102,13 @@ body {
3094
3102
  border: 1px solid var(--semi-color-focus-border);
3095
3103
  outline: 0;
3096
3104
  }
3097
- .semi-cascader-focus:hover, .semi-cascader-focus:active {
3105
+ .semi-cascader-focus:hover {
3098
3106
  background-color: var(--semi-color-fill-0);
3099
3107
  border: 1px solid var(--semi-color-focus-border);
3100
3108
  }
3109
+ .semi-cascader-focus:active {
3110
+ background-color: var(--semi-color-fill-2);
3111
+ }
3101
3112
  .semi-cascader-warning {
3102
3113
  background-color: var(--semi-color-warning-light-default);
3103
3114
  border-color: var(--semi-color-warning-light-default);
@@ -3458,6 +3469,29 @@ body {
3458
3469
  padding-right: 64px;
3459
3470
  }
3460
3471
 
3472
+ .semi-cascader-borderless:not(:focus-within):not(:hover) {
3473
+ background-color: transparent;
3474
+ border-color: transparent;
3475
+ }
3476
+ .semi-cascader-borderless:not(:focus-within):not(:hover) .semi-cascader-arrow {
3477
+ opacity: 0;
3478
+ }
3479
+ .semi-cascader-borderless:focus-within:not(:active) {
3480
+ background-color: transparent;
3481
+ }
3482
+ .semi-cascader-borderless.semi-cascader-error:not(:focus-within) {
3483
+ border-color: var(--semi-color-danger);
3484
+ }
3485
+ .semi-cascader-borderless.semi-cascader-warning:not(:focus-within) {
3486
+ border-color: var(--semi-color-warning);
3487
+ }
3488
+ .semi-cascader-borderless.semi-cascader-error:focus-within {
3489
+ border-color: var(--semi-color-danger);
3490
+ }
3491
+ .semi-cascader-borderless.semi-cascader-warning:focus-within {
3492
+ border-color: var(--semi-color-warning);
3493
+ }
3494
+
3461
3495
  .semi-rtl .semi-cascader,
3462
3496
  .semi-portal-rtl .semi-cascader {
3463
3497
  direction: rtl;
@@ -5021,6 +5055,51 @@ body {
5021
5055
  min-height: 168px;
5022
5056
  }
5023
5057
 
5058
+ .semi-datepicker-borderless:not(:focus-within):not(:hover) {
5059
+ background-color: transparent;
5060
+ border-color: transparent;
5061
+ }
5062
+ .semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-input-suffix, .semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-datepicker-range-input-suffix {
5063
+ opacity: 0;
5064
+ }
5065
+ .semi-datepicker-borderless:focus-within:not(:active) {
5066
+ background-color: transparent;
5067
+ }
5068
+ .semi-datepicker-borderless.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active {
5069
+ border-color: transparent;
5070
+ }
5071
+ .semi-datepicker-borderless.semi-datepicker-range-input-error:hover {
5072
+ background-color: var(--semi-color-danger-light-default);
5073
+ }
5074
+ .semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
5075
+ background-color: var(--semi-color-danger-light-default);
5076
+ }
5077
+ .semi-datepicker-borderless.semi-datepicker-range-input-error:not(:focus-within) {
5078
+ border-width: 1px;
5079
+ border-color: var(--semi-color-danger);
5080
+ }
5081
+ .semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
5082
+ border-width: 1px;
5083
+ border-color: var(--semi-color-danger);
5084
+ }
5085
+ .semi-datepicker-borderless.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active {
5086
+ border-color: transparent;
5087
+ }
5088
+ .semi-datepicker-borderless.semi-datepicker-range-input-warning:hover {
5089
+ background-color: var(--semi-color-warning-light-default);
5090
+ }
5091
+ .semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
5092
+ background-color: var(--semi-color-warning-light-default);
5093
+ }
5094
+ .semi-datepicker-borderless.semi-datepicker-range-input-warning:not(:focus-within) {
5095
+ border-width: 1px;
5096
+ border-color: var(--semi-color-warning);
5097
+ }
5098
+ .semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
5099
+ border-width: 1px;
5100
+ border-color: var(--semi-color-warning);
5101
+ }
5102
+
5024
5103
  .semi-rtl,
5025
5104
  .semi-portal-rtl {
5026
5105
  /*
@@ -11993,6 +12072,20 @@ img[src=""], img:not([src]) {
11993
12072
  margin-bottom: 0;
11994
12073
  }
11995
12074
 
12075
+ .semi-input-borderless:not(:focus-within):not(:hover) {
12076
+ background-color: transparent;
12077
+ border-color: transparent;
12078
+ }
12079
+ .semi-input-borderless:focus-within:not(:active) {
12080
+ background-color: transparent;
12081
+ }
12082
+ .semi-input-borderless.semi-input-wrapper-error:not(:focus-within) {
12083
+ border-color: var(--semi-color-danger);
12084
+ }
12085
+ .semi-input-borderless.semi-input-wrapper-warning:not(:focus-within) {
12086
+ border-color: var(--semi-color-warning);
12087
+ }
12088
+
11996
12089
  .semi-rtl .semi-input-wrapper,
11997
12090
  .semi-portal-rtl .semi-input-wrapper {
11998
12091
  direction: rtl;
@@ -12144,6 +12237,10 @@ img[src=""], img:not([src]) {
12144
12237
  height: 22px;
12145
12238
  }
12146
12239
 
12240
+ .semi-input-number:not(:focus-within):not(:hover) .semi-input-borderless + .semi-input-number-suffix-btns {
12241
+ opacity: 0;
12242
+ }
12243
+
12147
12244
  .semi-rtl .semi-input-number,
12148
12245
  .semi-portal-rtl .semi-input-number {
12149
12246
  direction: rtl;
@@ -14923,6 +15020,9 @@ img[src=""], img:not([src]) {
14923
15020
  background-color: var(--semi-color-fill-0);
14924
15021
  outline: 0;
14925
15022
  }
15023
+ .semi-select:active {
15024
+ background-color: var(--semi-color-fill-2);
15025
+ }
14926
15026
  .semi-select-small {
14927
15027
  height: 24px;
14928
15028
  line-height: 24px;
@@ -15263,6 +15363,29 @@ img[src=""], img:not([src]) {
15263
15363
  height: 20px;
15264
15364
  }
15265
15365
 
15366
+ .semi-select-borderless:not(:focus-within):not(:hover) {
15367
+ background-color: transparent;
15368
+ border-color: transparent;
15369
+ }
15370
+ .semi-select-borderless:not(:focus-within):not(:hover) .semi-select-arrow {
15371
+ opacity: 0;
15372
+ }
15373
+ .semi-select-borderless:focus-within:not(:active) {
15374
+ background-color: transparent;
15375
+ }
15376
+ .semi-select-borderless.semi-select-error:not(:focus-within) {
15377
+ border-color: var(--semi-color-danger);
15378
+ }
15379
+ .semi-select-borderless.semi-select-warning:not(:focus-within) {
15380
+ border-color: var(--semi-color-warning);
15381
+ }
15382
+ .semi-select-borderless.semi-select-error:focus-within {
15383
+ border-color: var(--semi-color-danger);
15384
+ }
15385
+ .semi-select-borderless.semi-select-warning:focus-within {
15386
+ border-color: var(--semi-color-warning);
15387
+ }
15388
+
15266
15389
  .semi-rtl .semi-select,
15267
15390
  .semi-portal-rtl .semi-select {
15268
15391
  direction: rtl;
@@ -18876,6 +18999,10 @@ img[src=""], img:not([src]) {
18876
18999
  cursor: pointer;
18877
19000
  }
18878
19001
 
19002
+ .semi-timepicker .semi-input-borderless:not(:focus-within):not(:hover) .semi-input-suffix {
19003
+ opacity: 0;
19004
+ }
19005
+
18879
19006
  .semi-rtl .semi-timepicker,
18880
19007
  .semi-portal-rtl .semi-timepicker {
18881
19008
  direction: rtl;
@@ -20095,14 +20222,27 @@ img[src=""], img:not([src]) {
20095
20222
  background-color: var(--semi-color-fill-1);
20096
20223
  border: 1px solid transparent;
20097
20224
  }
20225
+ .semi-tree-select:focus {
20226
+ border: 1px solid var(--semi-color-focus-border);
20227
+ background-color: var(--semi-color-fill-0);
20228
+ outline: 0;
20229
+ }
20230
+ .semi-tree-select:active {
20231
+ background-color: var(--semi-color-fill-2);
20232
+ }
20098
20233
  .semi-tree-select-focus {
20234
+ background-color: var(--semi-color-fill-0);
20099
20235
  border: 1px solid var(--semi-color-focus-border);
20100
20236
  outline: 0;
20101
20237
  }
20102
20238
  .semi-tree-select-focus:hover {
20239
+ background-color: var(--semi-color-fill-0);
20103
20240
  border: 1px solid var(--semi-color-focus-border);
20104
20241
  outline: 0;
20105
20242
  }
20243
+ .semi-tree-select-focus:active {
20244
+ background-color: var(--semi-color-fill-2);
20245
+ }
20106
20246
  .semi-tree-select-warning {
20107
20247
  background-color: var(--semi-color-warning-light-default);
20108
20248
  border-color: var(--semi-color-warning-light-default);
@@ -20352,6 +20492,29 @@ img[src=""], img:not([src]) {
20352
20492
  border-bottom: 1px var(--semi-color-fill-0) solid;
20353
20493
  }
20354
20494
 
20495
+ .semi-tree-select-borderless:not(:focus-within):not(:hover) {
20496
+ background-color: transparent;
20497
+ border-color: transparent;
20498
+ }
20499
+ .semi-tree-select-borderless:not(:focus-within):not(:hover) .semi-tree-select-arrow {
20500
+ opacity: 0;
20501
+ }
20502
+ .semi-tree-select-borderless:focus-within:not(:active) {
20503
+ background-color: transparent;
20504
+ }
20505
+ .semi-tree-select-borderless.semi-tree-select-error:not(:focus-within) {
20506
+ border-color: var(--semi-color-danger);
20507
+ }
20508
+ .semi-tree-select-borderless.semi-tree-select-warning:not(:focus-within) {
20509
+ border-color: var(--semi-color-warning);
20510
+ }
20511
+ .semi-tree-select-borderless.semi-tree-select-error:focus-within {
20512
+ border-color: var(--semi-color-danger);
20513
+ }
20514
+ .semi-tree-select-borderless.semi-tree-select-warning:focus-within {
20515
+ border-color: var(--semi-color-warning);
20516
+ }
20517
+
20355
20518
  .semi-rtl .semi-tree-select,
20356
20519
  .semi-portal-rtl .semi-tree-select {
20357
20520
  direction: rtl;
@@ -21505,6 +21668,26 @@ p.semi-typography-extended,
21505
21668
  color: var(--semi-color-danger);
21506
21669
  }
21507
21670
 
21671
+ .semi-input-textarea-borderless:not(:focus-within):not(:hover) {
21672
+ background-color: transparent;
21673
+ border-color: transparent;
21674
+ }
21675
+ .semi-input-textarea-borderless:focus-within:not(:active) {
21676
+ background-color: transparent;
21677
+ }
21678
+ .semi-input-textarea-borderless.semi-input-textarea-wrapper-error:not(:focus-within) {
21679
+ border-color: var(--semi-color-danger);
21680
+ }
21681
+ .semi-input-textarea-borderless.semi-input-textarea-wrapper-warning:not(:focus-within) {
21682
+ border-color: var(--semi-color-warning);
21683
+ }
21684
+ .semi-input-textarea-borderless.semi-input-textarea-wrapper-error .semi-input-textarea-counter {
21685
+ color: var(--semi-color-danger);
21686
+ }
21687
+ .semi-input-textarea-borderless.semi-input-textarea-wrapper-warning .semi-input-textarea-counter {
21688
+ color: var(--semi-color-warning);
21689
+ }
21690
+
21508
21691
  .semi-rtl .semi-input-wrapper,
21509
21692
  .semi-portal-rtl .semi-input-wrapper {
21510
21693
  direction: rtl;