@douyinfe/semi-ui 2.58.0-beta.0 → 2.58.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.
Files changed (73) hide show
  1. package/dist/css/semi.css +108 -29
  2. package/dist/css/semi.min.css +1 -1
  3. package/dist/umd/semi-ui.js +105 -31
  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/_base/base.css +2 -2
  8. package/lib/cjs/button/Button.d.ts +1 -1
  9. package/lib/cjs/button/Button.js +1 -0
  10. package/lib/cjs/locale/interface.d.ts +3 -0
  11. package/lib/cjs/locale/source/ar.js +3 -0
  12. package/lib/cjs/locale/source/de.js +3 -0
  13. package/lib/cjs/locale/source/en_GB.js +3 -0
  14. package/lib/cjs/locale/source/en_US.js +3 -0
  15. package/lib/cjs/locale/source/es.js +3 -0
  16. package/lib/cjs/locale/source/fr.js +3 -0
  17. package/lib/cjs/locale/source/id_ID.js +3 -0
  18. package/lib/cjs/locale/source/it.js +3 -0
  19. package/lib/cjs/locale/source/ja_JP.js +3 -0
  20. package/lib/cjs/locale/source/ko_KR.js +3 -0
  21. package/lib/cjs/locale/source/ms_MY.js +3 -0
  22. package/lib/cjs/locale/source/nl_NL.js +3 -0
  23. package/lib/cjs/locale/source/pl_PL.js +3 -0
  24. package/lib/cjs/locale/source/pt_BR.js +3 -0
  25. package/lib/cjs/locale/source/ro.js +3 -0
  26. package/lib/cjs/locale/source/ru_RU.js +3 -0
  27. package/lib/cjs/locale/source/sv_SE.js +3 -0
  28. package/lib/cjs/locale/source/th_TH.js +3 -0
  29. package/lib/cjs/locale/source/tr_TR.js +3 -0
  30. package/lib/cjs/locale/source/vi_VN.js +3 -0
  31. package/lib/cjs/locale/source/zh_CN.js +3 -0
  32. package/lib/cjs/locale/source/zh_TW.js +3 -0
  33. package/lib/cjs/slider/index.js +13 -8
  34. package/lib/cjs/tabs/TabBar.d.ts +7 -0
  35. package/lib/cjs/tabs/TabBar.js +78 -18
  36. package/lib/cjs/tabs/TabItem.js +3 -1
  37. package/lib/cjs/tabs/index.d.ts +1 -0
  38. package/lib/cjs/tabs/index.js +7 -4
  39. package/lib/cjs/tabs/interface.d.ts +7 -0
  40. package/lib/es/_base/base.css +2 -2
  41. package/lib/es/button/Button.d.ts +1 -1
  42. package/lib/es/button/Button.js +1 -0
  43. package/lib/es/locale/interface.d.ts +3 -0
  44. package/lib/es/locale/source/ar.js +3 -0
  45. package/lib/es/locale/source/de.js +3 -0
  46. package/lib/es/locale/source/en_GB.js +3 -0
  47. package/lib/es/locale/source/en_US.js +3 -0
  48. package/lib/es/locale/source/es.js +3 -0
  49. package/lib/es/locale/source/fr.js +3 -0
  50. package/lib/es/locale/source/id_ID.js +3 -0
  51. package/lib/es/locale/source/it.js +3 -0
  52. package/lib/es/locale/source/ja_JP.js +3 -0
  53. package/lib/es/locale/source/ko_KR.js +3 -0
  54. package/lib/es/locale/source/ms_MY.js +3 -0
  55. package/lib/es/locale/source/nl_NL.js +3 -0
  56. package/lib/es/locale/source/pl_PL.js +3 -0
  57. package/lib/es/locale/source/pt_BR.js +3 -0
  58. package/lib/es/locale/source/ro.js +3 -0
  59. package/lib/es/locale/source/ru_RU.js +3 -0
  60. package/lib/es/locale/source/sv_SE.js +3 -0
  61. package/lib/es/locale/source/th_TH.js +3 -0
  62. package/lib/es/locale/source/tr_TR.js +3 -0
  63. package/lib/es/locale/source/vi_VN.js +3 -0
  64. package/lib/es/locale/source/zh_CN.js +3 -0
  65. package/lib/es/locale/source/zh_TW.js +3 -0
  66. package/lib/es/slider/index.js +13 -8
  67. package/lib/es/tabs/TabBar.d.ts +7 -0
  68. package/lib/es/tabs/TabBar.js +79 -19
  69. package/lib/es/tabs/TabItem.js +3 -1
  70. package/lib/es/tabs/index.d.ts +1 -0
  71. package/lib/es/tabs/index.js +7 -4
  72. package/lib/es/tabs/interface.d.ts +7 -0
  73. package/package.json +8 -8
package/dist/css/semi.css CHANGED
@@ -166,7 +166,7 @@ body, body .semi-always-light, :host, :host .semi-always-light {
166
166
  --semi-yellow-9: 83,72,0;
167
167
  }
168
168
 
169
- body[theme-mode=dark], body .semi-always-dark, :host-context(body[theme-mode=dark]), :host .semi-always-dark {
169
+ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
170
170
  --semi-red-0: 108,9,11;
171
171
  --semi-red-1: 144,17,16;
172
172
  --semi-red-2: 180,32,25;
@@ -441,7 +441,7 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
441
441
  --semi-color-data-19: rgba(188, 198, 255, 1);
442
442
  }
443
443
 
444
- body[theme-mode=dark], body .semi-always-dark, :host-context(body[theme-mode=dark]), :host .semi-always-dark {
444
+ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
445
445
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
446
446
  -webkit-font-smoothing: antialiased;
447
447
  --semi-color-white: rgba(228, 231, 245, 1);
@@ -1967,6 +1967,10 @@ body, :host {
1967
1967
  .semi-button-danger-disabled {
1968
1968
  background-color: var(--semi-color-disabled-bg);
1969
1969
  }
1970
+ .semi-button-danger-disabled.semi-button-outline {
1971
+ background-color: transparent;
1972
+ border: 1px solid var(--semi-color-border);
1973
+ }
1970
1974
  .semi-button-danger-disabled.semi-button-light {
1971
1975
  background-color: var(--semi-color-fill-0);
1972
1976
  }
@@ -1976,7 +1980,11 @@ body, :host {
1976
1980
  .semi-button-danger:active {
1977
1981
  background-color: var(--semi-color-danger-active);
1978
1982
  }
1979
- .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
1983
+ .semi-button-danger.semi-button-outline {
1984
+ background-color: transparent;
1985
+ border: 1px solid var(--semi-color-danger);
1986
+ }
1987
+ .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-outline, .semi-button-danger.semi-button-borderless {
1980
1988
  color: var(--semi-color-danger);
1981
1989
  }
1982
1990
  .semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
@@ -1991,6 +1999,10 @@ body, :host {
1991
1999
  .semi-button-warning-disabled {
1992
2000
  background-color: var(--semi-color-disabled-bg);
1993
2001
  }
2002
+ .semi-button-warning-disabled.semi-button-outline {
2003
+ background-color: transparent;
2004
+ border: 1px solid var(--semi-color-border);
2005
+ }
1994
2006
  .semi-button-warning-disabled.semi-button-light {
1995
2007
  background-color: var(--semi-color-fill-0);
1996
2008
  }
@@ -2000,7 +2012,11 @@ body, :host {
2000
2012
  .semi-button-warning:active {
2001
2013
  background-color: var(--semi-color-warning-active);
2002
2014
  }
2003
- .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
2015
+ .semi-button-warning.semi-button-outline {
2016
+ background-color: transparent;
2017
+ border: 1px solid var(--semi-color-warning);
2018
+ }
2019
+ .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-outline, .semi-button-warning.semi-button-borderless {
2004
2020
  color: var(--semi-color-warning);
2005
2021
  }
2006
2022
  .semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
@@ -2015,6 +2031,10 @@ body, :host {
2015
2031
  .semi-button-tertiary-disabled {
2016
2032
  background-color: var(--semi-color-disabled-bg);
2017
2033
  }
2034
+ .semi-button-tertiary-disabled.semi-button-outline {
2035
+ background-color: transparent;
2036
+ border: 1px solid var(--semi-color-border);
2037
+ }
2018
2038
  .semi-button-tertiary-disabled.semi-button-light {
2019
2039
  background-color: var(--semi-color-fill-0);
2020
2040
  }
@@ -2024,7 +2044,11 @@ body, :host {
2024
2044
  .semi-button-tertiary:active {
2025
2045
  background-color: var(--semi-color-tertiary-active);
2026
2046
  }
2027
- .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-borderless {
2047
+ .semi-button-tertiary.semi-button-outline {
2048
+ background-color: transparent;
2049
+ border: 1px solid var(--semi-color-border);
2050
+ }
2051
+ .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-outline, .semi-button-tertiary.semi-button-borderless {
2028
2052
  color: var(--semi-color-text-1);
2029
2053
  }
2030
2054
  .semi-button-primary {
@@ -2039,13 +2063,21 @@ body, :host {
2039
2063
  .semi-button-primary-disabled.semi-button-light {
2040
2064
  background: var(--semi-color-fill-0);
2041
2065
  }
2042
- .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
2066
+ .semi-button-primary-disabled.semi-button-outline {
2067
+ background-color: transparent;
2068
+ border: 1px solid var(--semi-color-border);
2069
+ }
2070
+ .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
2043
2071
  background-color: var(--semi-color-primary-hover);
2044
2072
  }
2045
- .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):active {
2073
+ .semi-button-primary.semi-button-outline {
2074
+ background-color: transparent;
2075
+ border: 1px solid var(--semi-color-border);
2076
+ }
2077
+ .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active {
2046
2078
  background-color: var(--semi-color-primary-active);
2047
2079
  }
2048
- .semi-button-primary.semi-button-light, .semi-button-primary.semi-button-borderless {
2080
+ .semi-button-primary.semi-button-light, .semi-button-primary.semi-button-outline, .semi-button-primary.semi-button-borderless {
2049
2081
  color: var(--semi-color-primary);
2050
2082
  }
2051
2083
  .semi-button-secondary {
@@ -2058,16 +2090,24 @@ body, :host {
2058
2090
  .semi-button-secondary-disabled {
2059
2091
  background-color: var(--semi-color-disabled-bg);
2060
2092
  }
2093
+ .semi-button-secondary-disabled.semi-button-outline {
2094
+ background-color: transparent;
2095
+ border: 1px solid var(--semi-color-border);
2096
+ }
2061
2097
  .semi-button-secondary-disabled.semi-button-light {
2062
2098
  background-color: var(--semi-color-fill-0);
2063
2099
  }
2100
+ .semi-button-secondary.semi-button-outline {
2101
+ background-color: transparent;
2102
+ border: 1px solid var(--semi-color-border);
2103
+ }
2064
2104
  .semi-button-secondary:hover {
2065
2105
  background-color: var(--semi-color-secondary-hover);
2066
2106
  }
2067
2107
  .semi-button-secondary:active {
2068
2108
  background-color: var(--semi-color-secondary-active);
2069
2109
  }
2070
- .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-borderless {
2110
+ .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-outline, .semi-button-secondary.semi-button-borderless {
2071
2111
  color: var(--semi-color-secondary);
2072
2112
  }
2073
2113
  .semi-button-disabled {
@@ -2094,6 +2134,15 @@ body, :host {
2094
2134
  background-color: var(--semi-color-fill-1);
2095
2135
  border: 0 transparent solid;
2096
2136
  }
2137
+ .semi-button-outline {
2138
+ background-color: transparent;
2139
+ }
2140
+ .semi-button-outline:not(.semi-button-disabled):hover {
2141
+ background-color: var(--semi-color-fill-0);
2142
+ }
2143
+ .semi-button-outline:not(.semi-button-disabled):active {
2144
+ background-color: var(--semi-color-fill-1);
2145
+ }
2097
2146
  .semi-button-light {
2098
2147
  background-color: var(--semi-color-fill-0);
2099
2148
  border: 0 transparent solid;
@@ -18025,6 +18074,33 @@ img[src=""], img:not([src]) {
18025
18074
  .semi-tabs-bar-extra {
18026
18075
  padding: 0px 5px;
18027
18076
  }
18077
+ .semi-tabs-bar-more-trigger {
18078
+ display: inline-block;
18079
+ cursor: pointer;
18080
+ color: var(--semi-color-text-2);
18081
+ }
18082
+ .semi-tabs-bar-more-trigger-content {
18083
+ display: flex;
18084
+ align-content: center;
18085
+ }
18086
+ .semi-tabs-bar-more-trigger-content-icon:not(:not(.semi-tabs-bar-more-trigger-content-icon)) {
18087
+ margin-top: 0px;
18088
+ margin-bottom: 0px;
18089
+ margin-left: 8px;
18090
+ margin-right: 8px;
18091
+ flex-shrink: 0;
18092
+ display: flex;
18093
+ align-items: center;
18094
+ }
18095
+ .semi-tabs-bar-more-trigger-line {
18096
+ padding: 16px 4px 14px 4px;
18097
+ }
18098
+ .semi-tabs-bar-more-trigger-card {
18099
+ padding: 8px 12px;
18100
+ }
18101
+ .semi-tabs-bar-more-trigger-button {
18102
+ padding: 8px 12px;
18103
+ }
18028
18104
  .semi-tabs-bar .semi-tabs-tab {
18029
18105
  font-size: 14px;
18030
18106
  line-height: 20px;
@@ -18477,6 +18553,7 @@ img[src=""], img:not([src]) {
18477
18553
  animation-fill-mode: forwards;
18478
18554
  }
18479
18555
  .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab {
18556
+ font-size: 14px;
18480
18557
  padding: 16px 4px 14px 4px;
18481
18558
  transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
18482
18559
  border-bottom: 2px solid transparent;
@@ -18495,9 +18572,11 @@ img[src=""], img:not([src]) {
18495
18572
  border-bottom: 2px solid var(--semi-color-fill-1);
18496
18573
  }
18497
18574
  .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small {
18575
+ font-size: 14px;
18498
18576
  padding: 8px 4px 6px 4px;
18499
18577
  }
18500
18578
  .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium {
18579
+ font-size: 14px;
18501
18580
  padding: 12px 4px 10px 4px;
18502
18581
  }
18503
18582
  .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active:hover {
@@ -20558,64 +20637,64 @@ img[src=""], img:not([src]) {
20558
20637
  .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:hover, .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:active {
20559
20638
  background-color: transparent;
20560
20639
  }
20561
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-1 {
20640
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-1 {
20562
20641
  padding-left: 8px;
20563
20642
  }
20564
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-2 {
20643
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-2 {
20565
20644
  padding-left: 28px;
20566
20645
  }
20567
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-3 {
20646
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-3 {
20568
20647
  padding-left: 48px;
20569
20648
  }
20570
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-4 {
20649
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-4 {
20571
20650
  padding-left: 68px;
20572
20651
  }
20573
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-5 {
20652
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-5 {
20574
20653
  padding-left: 88px;
20575
20654
  }
20576
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-6 {
20655
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-6 {
20577
20656
  padding-left: 108px;
20578
20657
  }
20579
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-7 {
20658
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-7 {
20580
20659
  padding-left: 128px;
20581
20660
  }
20582
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-8 {
20661
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-8 {
20583
20662
  padding-left: 148px;
20584
20663
  }
20585
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-9 {
20664
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-9 {
20586
20665
  padding-left: 168px;
20587
20666
  }
20588
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-10 {
20667
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-10 {
20589
20668
  padding-left: 188px;
20590
20669
  }
20591
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-11 {
20670
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-11 {
20592
20671
  padding-left: 208px;
20593
20672
  }
20594
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-12 {
20673
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-12 {
20595
20674
  padding-left: 228px;
20596
20675
  }
20597
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-13 {
20676
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-13 {
20598
20677
  padding-left: 248px;
20599
20678
  }
20600
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-14 {
20679
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-14 {
20601
20680
  padding-left: 268px;
20602
20681
  }
20603
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-15 {
20682
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-15 {
20604
20683
  padding-left: 288px;
20605
20684
  }
20606
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-16 {
20685
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-16 {
20607
20686
  padding-left: 308px;
20608
20687
  }
20609
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-17 {
20688
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-17 {
20610
20689
  padding-left: 328px;
20611
20690
  }
20612
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-18 {
20691
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-18 {
20613
20692
  padding-left: 348px;
20614
20693
  }
20615
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-19 {
20694
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-19 {
20616
20695
  padding-left: 368px;
20617
20696
  }
20618
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-20 {
20697
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-20 {
20619
20698
  padding-left: 388px;
20620
20699
  }
20621
20700
  .semi-tree-option-list .semi-tree-option-empty:hover, .semi-tree-option-list .semi-tree-option-empty:active {