@douyinfe/semi-foundation 2.63.2-alpha.0 → 2.64.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 (95) hide show
  1. package/calendar/foundation.ts +20 -0
  2. package/colorPicker/AlphaSliderFoundation.ts +62 -0
  3. package/colorPicker/ColorChooseAreaFoundation.ts +86 -0
  4. package/colorPicker/ColorSliderFoundation.ts +61 -0
  5. package/colorPicker/DataPartFoundation.ts +113 -0
  6. package/colorPicker/colorPicker.scss +113 -0
  7. package/colorPicker/constants.ts +11 -0
  8. package/colorPicker/foundation.ts +206 -0
  9. package/colorPicker/interface.ts +51 -0
  10. package/colorPicker/utils/convert.ts +228 -0
  11. package/colorPicker/utils/round.ts +3 -0
  12. package/colorPicker/utils/split.ts +40 -0
  13. package/colorPicker/variables.scss +28 -0
  14. package/image/previewImageFoundation.ts +22 -17
  15. package/lib/cjs/calendar/foundation.js +18 -0
  16. package/lib/cjs/colorPicker/AlphaSliderFoundation.d.ts +27 -0
  17. package/lib/cjs/colorPicker/AlphaSliderFoundation.js +40 -0
  18. package/lib/cjs/colorPicker/ColorChooseAreaFoundation.d.ts +42 -0
  19. package/lib/cjs/colorPicker/ColorChooseAreaFoundation.js +62 -0
  20. package/lib/cjs/colorPicker/ColorSliderFoundation.d.ts +26 -0
  21. package/lib/cjs/colorPicker/ColorSliderFoundation.js +40 -0
  22. package/lib/cjs/colorPicker/DataPartFoundation.d.ts +28 -0
  23. package/lib/cjs/colorPicker/DataPartFoundation.js +115 -0
  24. package/lib/cjs/colorPicker/colorPicker.css +84 -0
  25. package/lib/cjs/colorPicker/colorPicker.scss +113 -0
  26. package/lib/cjs/colorPicker/constants.d.ts +4 -0
  27. package/lib/cjs/colorPicker/constants.js +11 -0
  28. package/lib/cjs/colorPicker/foundation.d.ts +66 -0
  29. package/lib/cjs/colorPicker/foundation.js +150 -0
  30. package/lib/cjs/colorPicker/interface.d.ts +40 -0
  31. package/lib/cjs/colorPicker/interface.js +5 -0
  32. package/lib/cjs/colorPicker/utils/convert.d.ts +28 -0
  33. package/lib/cjs/colorPicker/utils/convert.js +306 -0
  34. package/lib/cjs/colorPicker/utils/round.d.ts +1 -0
  35. package/lib/cjs/colorPicker/utils/round.js +12 -0
  36. package/lib/cjs/colorPicker/utils/split.d.ts +18 -0
  37. package/lib/cjs/colorPicker/utils/split.js +40 -0
  38. package/lib/cjs/colorPicker/variables.scss +28 -0
  39. package/lib/cjs/image/previewImageFoundation.js +22 -18
  40. package/lib/cjs/slider/foundation.d.ts +1 -0
  41. package/lib/cjs/slider/foundation.js +15 -0
  42. package/lib/cjs/tabs/constants.d.ts +0 -1
  43. package/lib/cjs/tabs/constants.js +1 -2
  44. package/lib/cjs/tabs/tabs.css +199 -28
  45. package/lib/cjs/tabs/tabs.scss +297 -336
  46. package/lib/cjs/tabs/variables.scss +2 -21
  47. package/lib/cjs/tooltip/foundation.js +2 -1
  48. package/lib/cjs/tree/treeUtil.d.ts +1 -1
  49. package/lib/cjs/upload/constants.d.ts +1 -1
  50. package/lib/cjs/upload/foundation.d.ts +1 -0
  51. package/lib/cjs/upload/foundation.js +30 -14
  52. package/lib/es/calendar/foundation.js +18 -0
  53. package/lib/es/colorPicker/AlphaSliderFoundation.d.ts +27 -0
  54. package/lib/es/colorPicker/AlphaSliderFoundation.js +33 -0
  55. package/lib/es/colorPicker/ColorChooseAreaFoundation.d.ts +42 -0
  56. package/lib/es/colorPicker/ColorChooseAreaFoundation.js +55 -0
  57. package/lib/es/colorPicker/ColorSliderFoundation.d.ts +26 -0
  58. package/lib/es/colorPicker/ColorSliderFoundation.js +33 -0
  59. package/lib/es/colorPicker/DataPartFoundation.d.ts +28 -0
  60. package/lib/es/colorPicker/DataPartFoundation.js +108 -0
  61. package/lib/es/colorPicker/colorPicker.css +84 -0
  62. package/lib/es/colorPicker/colorPicker.scss +113 -0
  63. package/lib/es/colorPicker/constants.d.ts +4 -0
  64. package/lib/es/colorPicker/constants.js +6 -0
  65. package/lib/es/colorPicker/foundation.d.ts +66 -0
  66. package/lib/es/colorPicker/foundation.js +143 -0
  67. package/lib/es/colorPicker/interface.d.ts +40 -0
  68. package/lib/es/colorPicker/interface.js +1 -0
  69. package/lib/es/colorPicker/utils/convert.d.ts +28 -0
  70. package/lib/es/colorPicker/utils/convert.js +277 -0
  71. package/lib/es/colorPicker/utils/round.d.ts +1 -0
  72. package/lib/es/colorPicker/utils/round.js +5 -0
  73. package/lib/es/colorPicker/utils/split.d.ts +18 -0
  74. package/lib/es/colorPicker/utils/split.js +34 -0
  75. package/lib/es/colorPicker/variables.scss +28 -0
  76. package/lib/es/image/previewImageFoundation.js +22 -18
  77. package/lib/es/slider/foundation.d.ts +1 -0
  78. package/lib/es/slider/foundation.js +15 -0
  79. package/lib/es/tabs/constants.d.ts +0 -1
  80. package/lib/es/tabs/constants.js +1 -2
  81. package/lib/es/tabs/tabs.css +199 -28
  82. package/lib/es/tabs/tabs.scss +297 -336
  83. package/lib/es/tabs/variables.scss +2 -21
  84. package/lib/es/tooltip/foundation.js +2 -1
  85. package/lib/es/tree/treeUtil.d.ts +1 -1
  86. package/lib/es/upload/constants.d.ts +1 -1
  87. package/lib/es/upload/foundation.d.ts +1 -0
  88. package/lib/es/upload/foundation.js +30 -14
  89. package/package.json +3 -3
  90. package/slider/foundation.ts +13 -0
  91. package/tabs/constants.ts +1 -2
  92. package/tabs/tabs.scss +297 -336
  93. package/tabs/variables.scss +2 -21
  94. package/tooltip/foundation.ts +1 -1
  95. package/upload/foundation.ts +19 -3
package/lib/cjs/tabs/tabs.css CHANGED
@@ -109,6 +109,66 @@
109
109
  color: var(--semi-color-disabled-text);
110
110
  border-bottom: none;
111
111
  }
112
+ .semi-tabs-tab-single.semi-tabs-tab {
113
+ font-size: 14px;
114
+ line-height: 20px;
115
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
116
+ cursor: pointer;
117
+ box-sizing: border-box;
118
+ position: relative;
119
+ display: inline-block;
120
+ font-weight: 400;
121
+ color: var(--semi-color-text-2);
122
+ user-select: none;
123
+ }
124
+ .semi-tabs-tab-single.semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
125
+ position: relative;
126
+ margin-right: 8px;
127
+ top: 3px;
128
+ color: var(--semi-color-text-2);
129
+ transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
130
+ }
131
+ .semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close {
132
+ margin-right: 0;
133
+ font-size: 14px;
134
+ color: var(--semi-color-text-2);
135
+ margin-left: 10px;
136
+ cursor: pointer;
137
+ }
138
+ .semi-tabs-tab-single.semi-tabs-tab:hover {
139
+ color: var(--semi-color-text-0);
140
+ }
141
+ .semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
142
+ color: var(--semi-color-text-0);
143
+ }
144
+ .semi-tabs-tab-single.semi-tabs-tab:active {
145
+ color: var(--semi-color-text-0);
146
+ }
147
+ .semi-tabs-tab-single.semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
148
+ color: var(--semi-color-text-0);
149
+ }
150
+ .semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
151
+ cursor: default;
152
+ font-weight: 600;
153
+ color: var(--semi-color-text-0);
154
+ }
155
+ .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
156
+ color: var(--semi-color-primary);
157
+ }
158
+ .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close {
159
+ color: var(--semi-color-text-2);
160
+ }
161
+ .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover {
162
+ color: var(--semi-color-text-1);
163
+ }
164
+ .semi-tabs-tab-single.semi-tabs-tab-disabled {
165
+ cursor: not-allowed;
166
+ color: var(--semi-color-disabled-text);
167
+ }
168
+ .semi-tabs-tab-single.semi-tabs-tab-disabled:hover {
169
+ color: var(--semi-color-disabled-text);
170
+ border-bottom: none;
171
+ }
112
172
  .semi-tabs-bar-collapse,
113
173
  .semi-tabs-bar-collapse .semi-tabs-bar-overflow-list {
114
174
  display: flex;
@@ -192,8 +252,6 @@
192
252
  transform: scale(var(--semi-transform_scale-none));
193
253
  }
194
254
  .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab {
195
- font-size: 14px;
196
- line-height: 20px;
197
255
  padding: 16px 4px 14px 4px;
198
256
  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);
199
257
  border-bottom: 2px solid transparent;
@@ -215,13 +273,9 @@
215
273
  margin-right: 24px;
216
274
  }
217
275
  .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-small {
218
- font-size: 14px;
219
- line-height: 20px;
220
276
  padding: 8px 4px 6px 4px;
221
277
  }
222
278
  .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-medium {
223
- font-size: 14px;
224
- line-height: 20px;
225
279
  padding: 12px 4px 10px 4px;
226
280
  }
227
281
  .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active:hover {
@@ -349,17 +403,13 @@
349
403
  .semi-tabs-bar-button .semi-tabs-tab {
350
404
  padding: 8px 12px;
351
405
  border-radius: var(--semi-border-radius-small);
352
- background-color: transparent;
353
406
  color: var(--semi-color-text-2);
354
- font-size: 14px;
355
- line-height: 20px;
356
407
  border: none;
357
408
  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);
358
409
  transform: scale(var(--semi-transform_scale-none));
359
410
  }
360
411
  .semi-tabs-bar-button .semi-tabs-tab:hover {
361
412
  border: none;
362
- color: var(--semi-color-text-0);
363
413
  background-color: var(--semi-color-fill-0);
364
414
  }
365
415
  .semi-tabs-bar-button .semi-tabs-tab:focus-visible {
@@ -367,7 +417,6 @@
367
417
  outline-offset: -2px;
368
418
  }
369
419
  .semi-tabs-bar-button .semi-tabs-tab:active {
370
- color: var(--semi-color-text-0);
371
420
  background-color: var(--semi-color-fill-1);
372
421
  }
373
422
  .semi-tabs-bar-button .semi-tabs-tab-active, .semi-tabs-bar-button .semi-tabs-tab-active:hover {
@@ -375,23 +424,6 @@
375
424
  border: none;
376
425
  background-color: var(--semi-color-primary-light-default);
377
426
  }
378
- .semi-tabs-bar-slash .semi-tabs-tab {
379
- padding: 12px 4px;
380
- font-size: 14px;
381
- line-height: 20px;
382
- }
383
- .semi-tabs-bar-slash .semi-tabs-tab:nth-of-type(1) {
384
- padding-left: 0;
385
- }
386
- .semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type) {
387
- margin-right: 16px;
388
- }
389
- .semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type):after {
390
- content: "/";
391
- font-size: 14px;
392
- margin-left: 16px;
393
- color: var(--semi-color-text-2);
394
- }
395
427
  .semi-tabs-content {
396
428
  width: 100%;
397
429
  padding: 5px 0;
@@ -467,6 +499,145 @@
467
499
  animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
468
500
  animation-fill-mode: forwards;
469
501
  }
502
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab {
503
+ font-size: 14px;
504
+ padding: 16px 4px 14px 4px;
505
+ 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);
506
+ border-bottom: 2px solid transparent;
507
+ }
508
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:nth-of-type(1) {
509
+ padding-left: 0;
510
+ }
511
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:hover {
512
+ border-bottom: 2px solid var(--semi-color-fill-0);
513
+ }
514
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:focus-visible {
515
+ outline: 2px solid var(--semi-color-primary-light-active);
516
+ outline-offset: -1px;
517
+ }
518
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:active {
519
+ border-bottom: 2px solid var(--semi-color-fill-1);
520
+ }
521
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small {
522
+ font-size: 14px;
523
+ padding: 8px 4px 6px 4px;
524
+ }
525
+ .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium {
526
+ font-size: 14px;
527
+ padding: 12px 4px 10px 4px;
528
+ }
529
+ .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 {
530
+ border-bottom: 2px solid var(--semi-color-primary);
531
+ }
532
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab {
533
+ padding: 12px;
534
+ border-left: 2px solid transparent;
535
+ 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);
536
+ }
537
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:hover {
538
+ border-left: 2px solid var(--semi-color-fill-0);
539
+ background-color: var(--semi-color-fill-0);
540
+ }
541
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:focus-visible {
542
+ outline: 2px solid var(--semi-color-primary-light-active);
543
+ outline-offset: -2px;
544
+ }
545
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:active {
546
+ border-left: 2px solid var(--semi-color-fill-1);
547
+ background-color: var(--semi-color-fill-1);
548
+ }
549
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-small {
550
+ padding: 6px;
551
+ }
552
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-medium {
553
+ padding: 10px;
554
+ }
555
+ .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active {
556
+ background-color: var(--semi-color-primary-light-default);
557
+ }
558
+ .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 {
559
+ border-left: 2px solid var(--semi-color-primary);
560
+ background-color: var(--semi-color-primary-light-default);
561
+ }
562
+ .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab {
563
+ border: 1px solid transparent;
564
+ border-bottom: none;
565
+ border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
566
+ }
567
+ .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab:hover {
568
+ border-bottom: none;
569
+ }
570
+ .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 {
571
+ padding: 8px 12px 7px 12px;
572
+ border: 1px solid var(--semi-color-border);
573
+ border-bottom: 1px solid var(--semi-color-bg-1);
574
+ background: transparent;
575
+ }
576
+ .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab {
577
+ border: 1px solid transparent;
578
+ border-right: none;
579
+ border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
580
+ }
581
+ .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab:hover {
582
+ border-right: none;
583
+ }
584
+ .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:after {
585
+ content: " ";
586
+ width: 1px;
587
+ position: absolute;
588
+ right: -1px;
589
+ top: 0;
590
+ bottom: 0;
591
+ background: var(--semi-color-bg-1);
592
+ }
593
+ .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 {
594
+ padding: 8px 12px;
595
+ border: 1px solid var(--semi-color-border);
596
+ border-right: none;
597
+ background: transparent;
598
+ }
599
+ .semi-tabs-tab-card.semi-tabs-tab {
600
+ padding: 8px 12px;
601
+ 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);
602
+ transform: scale(var(--semi-transform_scale-none));
603
+ }
604
+ .semi-tabs-tab-card.semi-tabs-tab:hover {
605
+ background: var(--semi-color-fill-0);
606
+ }
607
+ .semi-tabs-tab-card.semi-tabs-tab:focus-visible {
608
+ outline: 2px solid var(--semi-color-primary-light-active);
609
+ outline-offset: -2px;
610
+ }
611
+ .semi-tabs-tab-card.semi-tabs-tab:active {
612
+ background: var(--semi-color-fill-1);
613
+ }
614
+ .semi-tabs-tab-button {
615
+ border: none;
616
+ }
617
+ .semi-tabs-tab-button.semi-tabs-tab {
618
+ padding: 8px 12px;
619
+ border-radius: var(--semi-border-radius-small);
620
+ color: var(--semi-color-text-2);
621
+ border: none;
622
+ 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);
623
+ transform: scale(var(--semi-transform_scale-none));
624
+ }
625
+ .semi-tabs-tab-button.semi-tabs-tab:hover {
626
+ border: none;
627
+ background-color: var(--semi-color-fill-0);
628
+ }
629
+ .semi-tabs-tab-button.semi-tabs-tab:focus-visible {
630
+ outline: 2px solid var(--semi-color-primary-light-active);
631
+ outline-offset: -2px;
632
+ }
633
+ .semi-tabs-tab-button.semi-tabs-tab:active {
634
+ background-color: var(--semi-color-fill-1);
635
+ }
636
+ .semi-tabs-tab-button.semi-tabs-tab-active, .semi-tabs-tab-button.semi-tabs-tab-active:hover {
637
+ color: var(--semi-color-primary);
638
+ border: none;
639
+ background-color: var(--semi-color-primary-light-default);
640
+ }
470
641
 
471
642
  .semi-rtl .semi-tabs,
472
643
  .semi-portal-rtl .semi-tabs {