@douyinfe/semi-ui 2.32.1-alpha.2 → 2.33.0-beta.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 (113) hide show
  1. package/dist/css/semi.css +187 -26
  2. package/dist/css/semi.min.css +1 -1
  3. package/dist/umd/semi-ui.js +10874 -5562
  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/anchor/index.d.ts +1 -1
  8. package/lib/cjs/autoComplete/index.d.ts +1 -1
  9. package/lib/cjs/button/Button.d.ts +1 -1
  10. package/lib/cjs/button/buttonGroup.d.ts +1 -1
  11. package/lib/cjs/button/index.d.ts +1 -1
  12. package/lib/cjs/cascader/index.d.ts +2 -0
  13. package/lib/cjs/cascader/index.js +5 -1
  14. package/lib/cjs/collapse/collapse-context.d.ts +1 -0
  15. package/lib/cjs/collapse/index.d.ts +2 -0
  16. package/lib/cjs/collapse/index.js +6 -2
  17. package/lib/cjs/collapse/item.d.ts +2 -0
  18. package/lib/cjs/collapse/item.js +13 -2
  19. package/lib/cjs/datePicker/dateInput.d.ts +3 -1
  20. package/lib/cjs/datePicker/dateInput.js +10 -3
  21. package/lib/cjs/datePicker/datePicker.d.ts +5 -3
  22. package/lib/cjs/datePicker/datePicker.js +20 -7
  23. package/lib/cjs/datePicker/monthsGrid.d.ts +1 -1
  24. package/lib/cjs/datePicker/yearAndMonth.d.ts +1 -1
  25. package/lib/cjs/form/baseForm.d.ts +2 -1
  26. package/lib/cjs/form/field.d.ts +2 -1
  27. package/lib/cjs/iconButton/index.d.ts +1 -0
  28. package/lib/cjs/iconButton/index.js +1 -0
  29. package/lib/cjs/input/index.d.ts +4 -1
  30. package/lib/cjs/input/index.js +9 -5
  31. package/lib/cjs/input/inputGroup.d.ts +1 -1
  32. package/lib/cjs/input/textarea.d.ts +1 -0
  33. package/lib/cjs/input/textarea.js +6 -2
  34. package/lib/cjs/modal/confirm.d.ts +17 -17
  35. package/lib/cjs/navigation/Footer.d.ts +1 -0
  36. package/lib/cjs/navigation/Footer.js +2 -1
  37. package/lib/cjs/navigation/Header.d.ts +1 -0
  38. package/lib/cjs/navigation/Header.js +2 -1
  39. package/lib/cjs/navigation/index.js +2 -2
  40. package/lib/cjs/rating/index.d.ts +1 -1
  41. package/lib/cjs/rating/item.d.ts +1 -1
  42. package/lib/cjs/select/index.d.ts +2 -0
  43. package/lib/cjs/select/index.js +5 -1
  44. package/lib/cjs/switch/index.d.ts +1 -1
  45. package/lib/cjs/table/Column.d.ts +1 -0
  46. package/lib/cjs/table/Column.js +2 -1
  47. package/lib/cjs/table/Table.d.ts +2 -2
  48. package/lib/cjs/table/getColumns.js +1 -1
  49. package/lib/cjs/table/index.d.ts +1 -1
  50. package/lib/cjs/tagInput/index.d.ts +1 -1
  51. package/lib/cjs/timePicker/TimeInput.d.ts +3 -1
  52. package/lib/cjs/timePicker/TimeInput.js +2 -0
  53. package/lib/cjs/timePicker/TimePicker.d.ts +4 -1
  54. package/lib/cjs/timePicker/TimePicker.js +2 -0
  55. package/lib/cjs/timePicker/index.d.ts +3 -1
  56. package/lib/cjs/tooltip/index.js +1 -1
  57. package/lib/cjs/treeSelect/index.d.ts +1 -0
  58. package/lib/cjs/treeSelect/index.js +5 -1
  59. package/lib/cjs/typography/title.d.ts +1 -0
  60. package/lib/es/anchor/index.d.ts +1 -1
  61. package/lib/es/autoComplete/index.d.ts +1 -1
  62. package/lib/es/button/Button.d.ts +1 -1
  63. package/lib/es/button/buttonGroup.d.ts +1 -1
  64. package/lib/es/button/index.d.ts +1 -1
  65. package/lib/es/cascader/index.d.ts +2 -0
  66. package/lib/es/cascader/index.js +5 -1
  67. package/lib/es/collapse/collapse-context.d.ts +1 -0
  68. package/lib/es/collapse/index.d.ts +2 -0
  69. package/lib/es/collapse/index.js +6 -2
  70. package/lib/es/collapse/item.d.ts +2 -0
  71. package/lib/es/collapse/item.js +13 -2
  72. package/lib/es/datePicker/dateInput.d.ts +3 -1
  73. package/lib/es/datePicker/dateInput.js +10 -3
  74. package/lib/es/datePicker/datePicker.d.ts +5 -3
  75. package/lib/es/datePicker/datePicker.js +19 -7
  76. package/lib/es/datePicker/monthsGrid.d.ts +1 -1
  77. package/lib/es/datePicker/yearAndMonth.d.ts +1 -1
  78. package/lib/es/form/baseForm.d.ts +2 -1
  79. package/lib/es/form/field.d.ts +2 -1
  80. package/lib/es/iconButton/index.d.ts +1 -0
  81. package/lib/es/iconButton/index.js +1 -0
  82. package/lib/es/input/index.d.ts +4 -1
  83. package/lib/es/input/index.js +9 -5
  84. package/lib/es/input/inputGroup.d.ts +1 -1
  85. package/lib/es/input/textarea.d.ts +1 -0
  86. package/lib/es/input/textarea.js +6 -2
  87. package/lib/es/modal/confirm.d.ts +17 -17
  88. package/lib/es/navigation/Footer.d.ts +1 -0
  89. package/lib/es/navigation/Footer.js +2 -1
  90. package/lib/es/navigation/Header.d.ts +1 -0
  91. package/lib/es/navigation/Header.js +2 -1
  92. package/lib/es/navigation/index.js +2 -2
  93. package/lib/es/rating/index.d.ts +1 -1
  94. package/lib/es/rating/item.d.ts +1 -1
  95. package/lib/es/select/index.d.ts +2 -0
  96. package/lib/es/select/index.js +5 -1
  97. package/lib/es/switch/index.d.ts +1 -1
  98. package/lib/es/table/Column.d.ts +1 -0
  99. package/lib/es/table/Column.js +2 -1
  100. package/lib/es/table/Table.d.ts +2 -2
  101. package/lib/es/table/getColumns.js +1 -1
  102. package/lib/es/table/index.d.ts +1 -1
  103. package/lib/es/tagInput/index.d.ts +1 -1
  104. package/lib/es/timePicker/TimeInput.d.ts +3 -1
  105. package/lib/es/timePicker/TimeInput.js +2 -0
  106. package/lib/es/timePicker/TimePicker.d.ts +4 -1
  107. package/lib/es/timePicker/TimePicker.js +2 -0
  108. package/lib/es/timePicker/index.d.ts +3 -1
  109. package/lib/es/tooltip/index.js +1 -1
  110. package/lib/es/treeSelect/index.d.ts +1 -0
  111. package/lib/es/treeSelect/index.js +5 -1
  112. package/lib/es/typography/title.d.ts +1 -0
  113. 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;
@@ -13857,17 +13954,9 @@ img[src=""], img:not([src]) {
13857
13954
  padding: 24px 24px 24px 20px;
13858
13955
  position: relative;
13859
13956
  }
13860
- .semi-popconfirm-inner .semi-popconfirm-btn-close {
13861
- position: absolute;
13862
- right: 0;
13863
- top: 0;
13864
- margin-top: 24px;
13865
- margin-right: 24px;
13866
- }
13867
13957
  .semi-popconfirm-header {
13868
13958
  display: flex;
13869
13959
  justify-content: flex-start;
13870
- margin-right: 68px;
13871
13960
  }
13872
13961
  .semi-popconfirm-header-title {
13873
13962
  font-size: 16px;
@@ -13887,6 +13976,7 @@ img[src=""], img:not([src]) {
13887
13976
  }
13888
13977
  .semi-popconfirm-header-body {
13889
13978
  display: inline-flex;
13979
+ flex-grow: 1;
13890
13980
  flex-direction: column;
13891
13981
  }
13892
13982
  .semi-popconfirm-body {
@@ -13912,10 +14002,6 @@ img[src=""], img:not([src]) {
13912
14002
  .semi-popover-with-arrow .semi-popconfirm-inner {
13913
14003
  padding: 12px 12px 12px 8px;
13914
14004
  }
13915
- .semi-popover-with-arrow .semi-popconfirm-inner .semi-popconfirm-btn-close {
13916
- margin-top: 12px;
13917
- margin-right: 12px;
13918
- }
13919
14005
 
13920
14006
  .semi-popconfirm-rtl {
13921
14007
  direction: rtl;
@@ -13923,15 +14009,8 @@ img[src=""], img:not([src]) {
13923
14009
  .semi-popconfirm-rtl .semi-popconfirm-inner {
13924
14010
  padding: 24px 20px 24px 24px;
13925
14011
  }
13926
- .semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
13927
- right: auto;
13928
- left: 0;
13929
- margin-right: 0;
13930
- margin-left: 24px;
13931
- }
13932
14012
  .semi-popconfirm-rtl .semi-popconfirm-header {
13933
14013
  margin-right: 0;
13934
- margin-left: 68px;
13935
14014
  }
13936
14015
  .semi-popconfirm-rtl .semi-popconfirm-header-icon {
13937
14016
  margin-right: 0;
@@ -13951,10 +14030,6 @@ img[src=""], img:not([src]) {
13951
14030
  .semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner {
13952
14031
  padding: 12px 8px 12px 12px;
13953
14032
  }
13954
- .semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
13955
- margin-right: 0;
13956
- margin-left: 12px;
13957
- }
13958
14033
 
13959
14034
  @keyframes semi-popover-zoomIn {
13960
14035
  from {
@@ -14945,6 +15020,9 @@ img[src=""], img:not([src]) {
14945
15020
  background-color: var(--semi-color-fill-0);
14946
15021
  outline: 0;
14947
15022
  }
15023
+ .semi-select:active {
15024
+ background-color: var(--semi-color-fill-2);
15025
+ }
14948
15026
  .semi-select-small {
14949
15027
  height: 24px;
14950
15028
  line-height: 24px;
@@ -15285,6 +15363,29 @@ img[src=""], img:not([src]) {
15285
15363
  height: 20px;
15286
15364
  }
15287
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
+
15288
15389
  .semi-rtl .semi-select,
15289
15390
  .semi-portal-rtl .semi-select {
15290
15391
  direction: rtl;
@@ -18889,6 +18990,10 @@ img[src=""], img:not([src]) {
18889
18990
  cursor: pointer;
18890
18991
  }
18891
18992
 
18993
+ .semi-timepicker .semi-input-borderless:not(:focus-within):not(:hover) .semi-input-suffix {
18994
+ opacity: 0;
18995
+ }
18996
+
18892
18997
  .semi-rtl .semi-timepicker,
18893
18998
  .semi-portal-rtl .semi-timepicker {
18894
18999
  direction: rtl;
@@ -20108,14 +20213,27 @@ img[src=""], img:not([src]) {
20108
20213
  background-color: var(--semi-color-fill-1);
20109
20214
  border: 1px solid transparent;
20110
20215
  }
20216
+ .semi-tree-select:focus {
20217
+ border: 1px solid var(--semi-color-focus-border);
20218
+ background-color: var(--semi-color-fill-0);
20219
+ outline: 0;
20220
+ }
20221
+ .semi-tree-select:active {
20222
+ background-color: var(--semi-color-fill-2);
20223
+ }
20111
20224
  .semi-tree-select-focus {
20225
+ background-color: var(--semi-color-fill-0);
20112
20226
  border: 1px solid var(--semi-color-focus-border);
20113
20227
  outline: 0;
20114
20228
  }
20115
20229
  .semi-tree-select-focus:hover {
20230
+ background-color: var(--semi-color-fill-0);
20116
20231
  border: 1px solid var(--semi-color-focus-border);
20117
20232
  outline: 0;
20118
20233
  }
20234
+ .semi-tree-select-focus:active {
20235
+ background-color: var(--semi-color-fill-2);
20236
+ }
20119
20237
  .semi-tree-select-warning {
20120
20238
  background-color: var(--semi-color-warning-light-default);
20121
20239
  border-color: var(--semi-color-warning-light-default);
@@ -20365,6 +20483,29 @@ img[src=""], img:not([src]) {
20365
20483
  border-bottom: 1px var(--semi-color-fill-0) solid;
20366
20484
  }
20367
20485
 
20486
+ .semi-tree-select-borderless:not(:focus-within):not(:hover) {
20487
+ background-color: transparent;
20488
+ border-color: transparent;
20489
+ }
20490
+ .semi-tree-select-borderless:not(:focus-within):not(:hover) .semi-tree-select-arrow {
20491
+ opacity: 0;
20492
+ }
20493
+ .semi-tree-select-borderless:focus-within:not(:active) {
20494
+ background-color: transparent;
20495
+ }
20496
+ .semi-tree-select-borderless.semi-tree-select-error:not(:focus-within) {
20497
+ border-color: var(--semi-color-danger);
20498
+ }
20499
+ .semi-tree-select-borderless.semi-tree-select-warning:not(:focus-within) {
20500
+ border-color: var(--semi-color-warning);
20501
+ }
20502
+ .semi-tree-select-borderless.semi-tree-select-error:focus-within {
20503
+ border-color: var(--semi-color-danger);
20504
+ }
20505
+ .semi-tree-select-borderless.semi-tree-select-warning:focus-within {
20506
+ border-color: var(--semi-color-warning);
20507
+ }
20508
+
20368
20509
  .semi-rtl .semi-tree-select,
20369
20510
  .semi-portal-rtl .semi-tree-select {
20370
20511
  direction: rtl;
@@ -20522,7 +20663,7 @@ img[src=""], img:not([src]) {
20522
20663
  }
20523
20664
  .semi-typography-action-copy {
20524
20665
  display: inline-flex;
20525
- vertical-align: text-bottom;
20666
+ vertical-align: middle;
20526
20667
  padding: 0;
20527
20668
  margin-left: 4px;
20528
20669
  }
@@ -20536,7 +20677,7 @@ img[src=""], img:not([src]) {
20536
20677
  color: var(--semi-color-text-2);
20537
20678
  }
20538
20679
  .semi-typography-action-copied .semi-icon {
20539
- vertical-align: text-bottom;
20680
+ vertical-align: middle;
20540
20681
  color: var(--semi-color-success);
20541
20682
  }
20542
20683
  .semi-typography-paragraph {
@@ -21518,6 +21659,26 @@ p.semi-typography-extended,
21518
21659
  color: var(--semi-color-danger);
21519
21660
  }
21520
21661
 
21662
+ .semi-input-textarea-borderless:not(:focus-within):not(:hover) {
21663
+ background-color: transparent;
21664
+ border-color: transparent;
21665
+ }
21666
+ .semi-input-textarea-borderless:focus-within:not(:active) {
21667
+ background-color: transparent;
21668
+ }
21669
+ .semi-input-textarea-borderless.semi-input-textarea-wrapper-error:not(:focus-within) {
21670
+ border-color: var(--semi-color-danger);
21671
+ }
21672
+ .semi-input-textarea-borderless.semi-input-textarea-wrapper-warning:not(:focus-within) {
21673
+ border-color: var(--semi-color-warning);
21674
+ }
21675
+ .semi-input-textarea-borderless.semi-input-textarea-wrapper-error .semi-input-textarea-counter {
21676
+ color: var(--semi-color-danger);
21677
+ }
21678
+ .semi-input-textarea-borderless.semi-input-textarea-wrapper-warning .semi-input-textarea-counter {
21679
+ color: var(--semi-color-warning);
21680
+ }
21681
+
21521
21682
  .semi-rtl .semi-input-wrapper,
21522
21683
  .semi-portal-rtl .semi-input-wrapper {
21523
21684
  direction: rtl;