@douyinfe/semi-ui 2.0.8 → 2.1.0-beta.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 (49) hide show
  1. package/dist/css/semi.css +166 -6
  2. package/dist/css/semi.min.css +1 -1
  3. package/dist/umd/semi-ui.js +318 -172
  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/es/autoComplete/index.d.ts +0 -1
  8. package/lib/es/autoComplete/index.js +0 -1
  9. package/lib/es/button/index.d.ts +0 -1
  10. package/lib/es/button/index.js +1 -2
  11. package/lib/es/cascader/index.d.ts +1 -0
  12. package/lib/es/cascader/index.js +15 -3
  13. package/lib/es/datePicker/yearAndMonth.js +1 -1
  14. package/lib/es/form/hoc/withField.d.ts +2 -2
  15. package/lib/es/form/interface.d.ts +2 -2
  16. package/lib/es/iconButton/index.d.ts +0 -1
  17. package/lib/es/iconButton/index.js +0 -1
  18. package/lib/es/notification/index.d.ts +1 -1
  19. package/lib/es/popconfirm/index.d.ts +5 -1
  20. package/lib/es/popconfirm/index.js +10 -4
  21. package/lib/es/popover/index.d.ts +3 -1
  22. package/lib/es/popover/index.js +4 -8
  23. package/lib/es/radio/context.d.ts +1 -1
  24. package/lib/es/radio/radio.d.ts +2 -2
  25. package/lib/es/radio/radioGroup.d.ts +4 -4
  26. package/lib/es/select/index.d.ts +0 -1
  27. package/lib/es/select/index.js +16 -10
  28. package/lib/es/select/option.js +2 -2
  29. package/lib/es/select/utils.d.ts +1 -1
  30. package/lib/es/select/utils.js +10 -4
  31. package/lib/es/slider/index.js +3 -1
  32. package/lib/es/spin/index.d.ts +2 -2
  33. package/lib/es/spin/index.js +1 -1
  34. package/lib/es/tabs/TabBar.d.ts +4 -2
  35. package/lib/es/tabs/TabBar.js +12 -4
  36. package/lib/es/tabs/TabPane.d.ts +2 -1
  37. package/lib/es/tabs/TabPane.js +3 -2
  38. package/lib/es/tabs/index.d.ts +4 -2
  39. package/lib/es/tabs/index.js +83 -14
  40. package/lib/es/tabs/interface.d.ts +6 -1
  41. package/lib/es/tagInput/index.d.ts +3 -0
  42. package/lib/es/tagInput/index.js +6 -1
  43. package/lib/es/toast/index.d.ts +1 -1
  44. package/lib/es/tooltip/index.d.ts +3 -0
  45. package/lib/es/tooltip/index.js +3 -0
  46. package/lib/es/tree/interface.d.ts +2 -2
  47. package/lib/es/treeSelect/index.d.ts +2 -11
  48. package/lib/es/upload/index.d.ts +1 -0
  49. package/package.json +8 -8
package/dist/css/semi.css CHANGED
@@ -639,25 +639,99 @@ body[theme-mode=dark], body .semi-always-dark {
639
639
  padding-left: auto;
640
640
  }
641
641
 
642
- .semi-autocomplete {
642
+ .semi-select-option {
643
+ font-size: 14px;
644
+ line-height: 20px;
645
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
646
+ word-break: break-all;
647
+ padding-left: 12px;
648
+ padding-right: 12px;
649
+ padding-top: 8px;
650
+ padding-bottom: 8px;
651
+ color: var(--semi-color-text-0);
652
+ position: relative;
653
+ display: flex;
654
+ flex-wrap: nowrap;
655
+ align-items: center;
656
+ cursor: pointer;
657
+ box-sizing: border-box;
658
+ }
659
+ .semi-select-option-icon {
660
+ width: 12px;
661
+ color: transparent;
662
+ visibility: hidden;
663
+ margin-right: 8px;
664
+ display: flex;
665
+ justify-content: center;
666
+ align-content: center;
667
+ }
668
+ .semi-select-option-text {
669
+ display: flex;
670
+ flex-wrap: wrap;
671
+ white-space: pre;
672
+ }
673
+ .semi-select-option-keyword {
674
+ color: var(--semi-color-primary);
675
+ background-color: inherit;
676
+ font-weight: 600;
677
+ }
678
+ .semi-select-option:active {
679
+ background-color: var(--semi-color-fill-1);
680
+ }
681
+ .semi-select-option-empty {
682
+ cursor: not-allowed;
683
+ color: var(--semi-color-disabled-text);
684
+ justify-content: center;
685
+ }
686
+ .semi-select-option-empty:hover {
687
+ background-color: inherit;
688
+ }
689
+ .semi-select-option-empty:active {
690
+ background-color: inherit;
691
+ }
692
+ .semi-select-option-disabled {
693
+ color: var(--semi-color-disabled-text);
694
+ cursor: not-allowed;
695
+ }
696
+ .semi-select-option-disabled:hover {
697
+ background-color: var(--semi-color-fill-0);
698
+ }
699
+ .semi-select-option-selected {
700
+ font-weight: 600;
701
+ }
702
+ .semi-select-option-selected .semi-select-option-icon {
703
+ visibility: visible;
704
+ color: var(--semi-color-text-2);
705
+ }
706
+ .semi-select-option-focused {
707
+ background-color: var(--semi-color-fill-0);
708
+ }
709
+ .semi-select-option:first-of-type {
710
+ margin-top: 4px;
711
+ }
712
+ .semi-select-option:last-of-type {
713
+ margin-bottom: 4px;
714
+ }
715
+
716
+ .semi-select {
643
717
  cursor: text;
644
718
  display: inline-flex;
645
719
  vertical-align: middle;
646
720
  box-sizing: border-box;
647
721
  }
648
- .semi-autocomplete-option-list {
722
+ .semi-select-option-list {
649
723
  overflow-x: hidden;
650
724
  overflow-y: auto;
651
725
  }
652
- .semi-autocomplete-option-list-chosen .semi-autocomplete-option-icon {
726
+ .semi-select-option-list-chosen .semi-select-option-icon {
653
727
  display: flex;
654
728
  }
655
- .semi-autocomplete-loading-wrapper {
729
+ .semi-select-loading-wrapper {
656
730
  padding-top: 8px;
657
731
  padding-bottom: 8px;
658
732
  cursor: not-allowed;
659
733
  }
660
- .semi-autocomplete-loading-wrapper .semi-spin {
734
+ .semi-select-loading-wrapper .semi-spin {
661
735
  width: 100%;
662
736
  }
663
737
 
@@ -14196,6 +14270,80 @@ body[theme-mode=dark], body .semi-always-dark {
14196
14270
  padding-left: 18px;
14197
14271
  }
14198
14272
 
14273
+ .semi-select-option {
14274
+ font-size: 14px;
14275
+ line-height: 20px;
14276
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
14277
+ word-break: break-all;
14278
+ padding-left: 12px;
14279
+ padding-right: 12px;
14280
+ padding-top: 8px;
14281
+ padding-bottom: 8px;
14282
+ color: var(--semi-color-text-0);
14283
+ position: relative;
14284
+ display: flex;
14285
+ flex-wrap: nowrap;
14286
+ align-items: center;
14287
+ cursor: pointer;
14288
+ box-sizing: border-box;
14289
+ }
14290
+ .semi-select-option-icon {
14291
+ width: 12px;
14292
+ color: transparent;
14293
+ visibility: hidden;
14294
+ margin-right: 8px;
14295
+ display: flex;
14296
+ justify-content: center;
14297
+ align-content: center;
14298
+ }
14299
+ .semi-select-option-text {
14300
+ display: flex;
14301
+ flex-wrap: wrap;
14302
+ white-space: pre;
14303
+ }
14304
+ .semi-select-option-keyword {
14305
+ color: var(--semi-color-primary);
14306
+ background-color: inherit;
14307
+ font-weight: 600;
14308
+ }
14309
+ .semi-select-option:active {
14310
+ background-color: var(--semi-color-fill-1);
14311
+ }
14312
+ .semi-select-option-empty {
14313
+ cursor: not-allowed;
14314
+ color: var(--semi-color-disabled-text);
14315
+ justify-content: center;
14316
+ }
14317
+ .semi-select-option-empty:hover {
14318
+ background-color: inherit;
14319
+ }
14320
+ .semi-select-option-empty:active {
14321
+ background-color: inherit;
14322
+ }
14323
+ .semi-select-option-disabled {
14324
+ color: var(--semi-color-disabled-text);
14325
+ cursor: not-allowed;
14326
+ }
14327
+ .semi-select-option-disabled:hover {
14328
+ background-color: var(--semi-color-fill-0);
14329
+ }
14330
+ .semi-select-option-selected {
14331
+ font-weight: 600;
14332
+ }
14333
+ .semi-select-option-selected .semi-select-option-icon {
14334
+ visibility: visible;
14335
+ color: var(--semi-color-text-2);
14336
+ }
14337
+ .semi-select-option-focused {
14338
+ background-color: var(--semi-color-fill-0);
14339
+ }
14340
+ .semi-select-option:first-of-type {
14341
+ margin-top: 4px;
14342
+ }
14343
+ .semi-select-option:last-of-type {
14344
+ margin-bottom: 4px;
14345
+ }
14346
+
14199
14347
  .semi-select {
14200
14348
  box-sizing: border-box;
14201
14349
  border-radius: var(--semi-border-radius-small);
@@ -16475,6 +16623,13 @@ body[theme-mode=dark], body .semi-always-dark {
16475
16623
  top: 3px;
16476
16624
  color: var(--semi-color-text-2);
16477
16625
  }
16626
+ .semi-tabs-bar .semi-tabs-tab .semi-icon-close {
16627
+ margin-right: 0;
16628
+ font-size: 14px;
16629
+ color: var(--semi-color-text-2);
16630
+ margin-left: 10px;
16631
+ cursor: pointer;
16632
+ }
16478
16633
  .semi-tabs-bar .semi-tabs-tab:hover {
16479
16634
  color: var(--semi-color-text-0);
16480
16635
  }
@@ -16488,7 +16643,6 @@ body[theme-mode=dark], body .semi-always-dark {
16488
16643
  color: var(--semi-color-text-0);
16489
16644
  }
16490
16645
  .semi-tabs-bar .semi-tabs-tab-active, .semi-tabs-bar .semi-tabs-tab-active:hover {
16491
- color: var(--semi-color-text-0);
16492
16646
  cursor: default;
16493
16647
  font-weight: 600;
16494
16648
  color: var(--semi-color-text-0);
@@ -16496,6 +16650,12 @@ body[theme-mode=dark], body .semi-always-dark {
16496
16650
  .semi-tabs-bar .semi-tabs-tab-active .semi-icon, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon {
16497
16651
  color: var(--semi-color-primary);
16498
16652
  }
16653
+ .semi-tabs-bar .semi-tabs-tab-active .semi-icon-close, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon-close {
16654
+ color: var(--semi-color-text-2);
16655
+ }
16656
+ .semi-tabs-bar .semi-tabs-tab-active .semi-icon-close:hover {
16657
+ color: var(--semi-color-text-1);
16658
+ }
16499
16659
  .semi-tabs-bar .semi-tabs-tab-disabled {
16500
16660
  cursor: not-allowed;
16501
16661
  color: var(--semi-color-disabled-text);