@douyinfe/semi-ui 2.26.0 → 2.27.0-alpha.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 (53) hide show
  1. package/dist/css/semi.css +207 -0
  2. package/dist/css/semi.min.css +1 -1
  3. package/dist/umd/semi-ui.js +292 -232
  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/datePicker/datePicker.d.ts +1 -1
  13. package/lib/cjs/form/baseForm.d.ts +1 -1
  14. package/lib/cjs/form/field.d.ts +1 -1
  15. package/lib/cjs/input/index.d.ts +1 -1
  16. package/lib/cjs/input/inputGroup.d.ts +1 -1
  17. package/lib/cjs/rating/index.d.ts +1 -1
  18. package/lib/cjs/rating/item.d.ts +1 -1
  19. package/lib/cjs/switch/index.d.ts +1 -1
  20. package/lib/cjs/table/Table.d.ts +2 -2
  21. package/lib/cjs/table/index.d.ts +1 -1
  22. package/lib/cjs/tabs/TabBar.js +17 -37
  23. package/lib/cjs/tabs/TabItem.d.ts +18 -0
  24. package/lib/cjs/tabs/TabItem.js +95 -0
  25. package/lib/cjs/tabs/index.d.ts +2 -1
  26. package/lib/cjs/tabs/index.js +3 -0
  27. package/lib/cjs/tagInput/index.d.ts +1 -1
  28. package/lib/cjs/timePicker/TimePicker.d.ts +1 -1
  29. package/lib/cjs/timePicker/index.d.ts +1 -1
  30. package/lib/es/anchor/index.d.ts +1 -1
  31. package/lib/es/autoComplete/index.d.ts +1 -1
  32. package/lib/es/button/Button.d.ts +1 -1
  33. package/lib/es/button/buttonGroup.d.ts +1 -1
  34. package/lib/es/button/index.d.ts +1 -1
  35. package/lib/es/datePicker/datePicker.d.ts +1 -1
  36. package/lib/es/form/baseForm.d.ts +1 -1
  37. package/lib/es/form/field.d.ts +1 -1
  38. package/lib/es/input/index.d.ts +1 -1
  39. package/lib/es/input/inputGroup.d.ts +1 -1
  40. package/lib/es/rating/index.d.ts +1 -1
  41. package/lib/es/rating/item.d.ts +1 -1
  42. package/lib/es/switch/index.d.ts +1 -1
  43. package/lib/es/table/Table.d.ts +2 -2
  44. package/lib/es/table/index.d.ts +1 -1
  45. package/lib/es/tabs/TabBar.js +17 -38
  46. package/lib/es/tabs/TabItem.d.ts +18 -0
  47. package/lib/es/tabs/TabItem.js +78 -0
  48. package/lib/es/tabs/index.d.ts +2 -1
  49. package/lib/es/tabs/index.js +2 -0
  50. package/lib/es/tagInput/index.d.ts +1 -1
  51. package/lib/es/timePicker/TimePicker.d.ts +1 -1
  52. package/lib/es/timePicker/index.d.ts +1 -1
  53. package/package.json +8 -8
package/dist/css/semi.css CHANGED
@@ -17380,6 +17380,66 @@ img[src=""], img:not([src]) {
17380
17380
  color: var(--semi-color-disabled-text);
17381
17381
  border-bottom: none;
17382
17382
  }
17383
+ .semi-tabs-tab-single.semi-tabs-tab {
17384
+ font-size: 14px;
17385
+ line-height: 20px;
17386
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
17387
+ cursor: pointer;
17388
+ box-sizing: border-box;
17389
+ position: relative;
17390
+ display: inline-block;
17391
+ font-weight: 400;
17392
+ color: var(--semi-color-text-2);
17393
+ user-select: none;
17394
+ }
17395
+ .semi-tabs-tab-single.semi-tabs-tab .semi-icon {
17396
+ position: relative;
17397
+ margin-right: 8px;
17398
+ top: 3px;
17399
+ color: var(--semi-color-text-2);
17400
+ transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
17401
+ }
17402
+ .semi-tabs-tab-single.semi-tabs-tab .semi-icon-close {
17403
+ margin-right: 0;
17404
+ font-size: 14px;
17405
+ color: var(--semi-color-text-2);
17406
+ margin-left: 10px;
17407
+ cursor: pointer;
17408
+ }
17409
+ .semi-tabs-tab-single.semi-tabs-tab:hover {
17410
+ color: var(--semi-color-text-0);
17411
+ }
17412
+ .semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon {
17413
+ color: var(--semi-color-text-0);
17414
+ }
17415
+ .semi-tabs-tab-single.semi-tabs-tab:active {
17416
+ color: var(--semi-color-text-0);
17417
+ }
17418
+ .semi-tabs-tab-single.semi-tabs-tab:active .semi-icon {
17419
+ color: var(--semi-color-text-0);
17420
+ }
17421
+ .semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
17422
+ cursor: default;
17423
+ font-weight: 600;
17424
+ color: var(--semi-color-text-0);
17425
+ }
17426
+ .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon {
17427
+ color: var(--semi-color-primary);
17428
+ }
17429
+ .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon-close {
17430
+ color: var(--semi-color-text-2);
17431
+ }
17432
+ .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon-close:hover {
17433
+ color: var(--semi-color-text-1);
17434
+ }
17435
+ .semi-tabs-tab-single.semi-tabs-tab-disabled {
17436
+ cursor: not-allowed;
17437
+ color: var(--semi-color-disabled-text);
17438
+ }
17439
+ .semi-tabs-tab-single.semi-tabs-tab-disabled:hover {
17440
+ color: var(--semi-color-disabled-text);
17441
+ border-bottom: none;
17442
+ }
17383
17443
  .semi-tabs-bar-collapse,
17384
17444
  .semi-tabs-bar-collapse .semi-tabs-bar-overflow-list {
17385
17445
  display: flex;
@@ -17710,6 +17770,153 @@ img[src=""], img:not([src]) {
17710
17770
  animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
17711
17771
  animation-fill-mode: forwards;
17712
17772
  }
17773
+ .semi-tabs-tab-line.semi-tabs-tab-top {
17774
+ border-bottom: 1px solid var(--semi-color-border);
17775
+ transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
17776
+ transform: scale(var(--semi-transform_scale-none));
17777
+ }
17778
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab {
17779
+ padding: 16px 4px 14px 4px;
17780
+ 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);
17781
+ border-bottom: 2px solid transparent;
17782
+ }
17783
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:nth-of-type(1) {
17784
+ padding-left: 0;
17785
+ }
17786
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:hover {
17787
+ border-bottom: 2px solid var(--semi-color-fill-0);
17788
+ }
17789
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:focus-visible {
17790
+ outline: 2px solid var(--semi-color-primary-light-active);
17791
+ outline-offset: -1px;
17792
+ }
17793
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:active {
17794
+ border-bottom: 2px solid var(--semi-color-fill-1);
17795
+ }
17796
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small {
17797
+ padding: 8px 4px 6px 4px;
17798
+ }
17799
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium {
17800
+ padding: 12px 4px 10px 4px;
17801
+ }
17802
+ .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 {
17803
+ border-bottom: 2px solid var(--semi-color-primary);
17804
+ }
17805
+ .semi-tabs-tab-line.semi-tabs-tab-left {
17806
+ border-right: 1px solid var(--semi-color-border);
17807
+ }
17808
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab {
17809
+ padding: 12px;
17810
+ border-left: 2px solid transparent;
17811
+ transition: background-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);
17812
+ }
17813
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:hover {
17814
+ border-left: 2px solid var(--semi-color-fill-0);
17815
+ background-color: var(--semi-color-fill-0);
17816
+ }
17817
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:focus-visible {
17818
+ outline: 2px solid var(--semi-color-primary-light-active);
17819
+ outline-offset: -2px;
17820
+ }
17821
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:active {
17822
+ border-left: 2px solid var(--semi-color-fill-1);
17823
+ background-color: var(--semi-color-fill-1);
17824
+ }
17825
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-small {
17826
+ padding: 6px;
17827
+ }
17828
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-medium {
17829
+ padding: 10px;
17830
+ }
17831
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active {
17832
+ background-color: var(--semi-color-primary-light-default);
17833
+ }
17834
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active:hover {
17835
+ border-left: 2px solid var(--semi-color-primary);
17836
+ background-color: var(--semi-color-primary-light-default);
17837
+ }
17838
+ .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab {
17839
+ border: 1px solid transparent;
17840
+ border-bottom: none;
17841
+ border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
17842
+ }
17843
+ .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab:hover {
17844
+ border-bottom: none;
17845
+ }
17846
+ .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active:hover {
17847
+ padding: 8px 12px 7px 12px;
17848
+ border: 1px solid var(--semi-color-border);
17849
+ border-bottom: 1px solid var(--semi-color-bg-1);
17850
+ background: transparent;
17851
+ }
17852
+ .semi-tabs-tab-card.semi-tabs-tab-left {
17853
+ border-right: 1px solid var(--semi-color-border);
17854
+ }
17855
+ .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab {
17856
+ border: 1px solid transparent;
17857
+ border-right: none;
17858
+ border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
17859
+ }
17860
+ .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab:hover {
17861
+ border-right: none;
17862
+ }
17863
+ .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:after {
17864
+ content: " ";
17865
+ width: 1px;
17866
+ position: absolute;
17867
+ right: -1px;
17868
+ top: 0;
17869
+ bottom: 0;
17870
+ background: var(--semi-color-bg-1);
17871
+ }
17872
+ .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:hover {
17873
+ padding: 8px 12px;
17874
+ border: 1px solid var(--semi-color-border);
17875
+ border-right: none;
17876
+ background: transparent;
17877
+ }
17878
+ .semi-tabs-tab-card.semi-tabs-tab {
17879
+ padding: 8px 12px;
17880
+ transition: background-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);
17881
+ transform: scale(var(--semi-transform_scale-none));
17882
+ }
17883
+ .semi-tabs-tab-card.semi-tabs-tab:hover {
17884
+ background: var(--semi-color-fill-0);
17885
+ }
17886
+ .semi-tabs-tab-card.semi-tabs-tab:focus-visible {
17887
+ outline: 2px solid var(--semi-color-primary-light-active);
17888
+ outline-offset: -2px;
17889
+ }
17890
+ .semi-tabs-tab-card.semi-tabs-tab:active {
17891
+ background: var(--semi-color-fill-1);
17892
+ }
17893
+ .semi-tabs-tab-button {
17894
+ border: none;
17895
+ }
17896
+ .semi-tabs-tab-button.semi-tabs-tab {
17897
+ padding: 8px 12px;
17898
+ border-radius: var(--semi-border-radius-small);
17899
+ color: var(--semi-color-text-2);
17900
+ border: none;
17901
+ transition: background-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);
17902
+ transform: scale(var(--semi-transform_scale-none));
17903
+ }
17904
+ .semi-tabs-tab-button.semi-tabs-tab:hover {
17905
+ border: none;
17906
+ background-color: var(--semi-color-fill-0);
17907
+ }
17908
+ .semi-tabs-tab-button.semi-tabs-tab:focus-visible {
17909
+ outline: 2px solid var(--semi-color-primary-light-active);
17910
+ outline-offset: -2px;
17911
+ }
17912
+ .semi-tabs-tab-button.semi-tabs-tab:active {
17913
+ background-color: var(--semi-color-fill-1);
17914
+ }
17915
+ .semi-tabs-tab-button.semi-tabs-tab-active, .semi-tabs-tab-button.semi-tabs-tab-active:hover {
17916
+ color: var(--semi-color-primary);
17917
+ border: none;
17918
+ background-color: var(--semi-color-primary-light-default);
17919
+ }
17713
17920
 
17714
17921
  .semi-rtl .semi-tabs,
17715
17922
  .semi-portal-rtl .semi-tabs {