@douyinfe/semi-foundation 2.30.2 → 2.31.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 (35) hide show
  1. package/cascader/cascader.scss +8 -0
  2. package/cascader/foundation.ts +11 -3
  3. package/cascader/variables.scss +3 -1
  4. package/lib/cjs/cascader/cascader.css +6 -0
  5. package/lib/cjs/cascader/cascader.scss +8 -0
  6. package/lib/cjs/cascader/foundation.js +10 -2
  7. package/lib/cjs/cascader/variables.scss +3 -1
  8. package/lib/cjs/table/rtl.scss +33 -2
  9. package/lib/cjs/table/table.css +50 -51
  10. package/lib/cjs/table/table.scss +8 -0
  11. package/lib/cjs/table/utils.d.ts +2 -0
  12. package/lib/cjs/table/utils.js +18 -0
  13. package/lib/cjs/tag/tag.css +10 -0
  14. package/lib/cjs/tag/tag.scss +13 -3
  15. package/lib/cjs/tooltip/foundation.d.ts +2 -0
  16. package/lib/cjs/tooltip/foundation.js +10 -1
  17. package/lib/es/cascader/cascader.css +6 -0
  18. package/lib/es/cascader/cascader.scss +8 -0
  19. package/lib/es/cascader/foundation.js +10 -2
  20. package/lib/es/cascader/variables.scss +3 -1
  21. package/lib/es/table/rtl.scss +33 -2
  22. package/lib/es/table/table.css +50 -51
  23. package/lib/es/table/table.scss +8 -0
  24. package/lib/es/table/utils.d.ts +2 -0
  25. package/lib/es/table/utils.js +16 -0
  26. package/lib/es/tag/tag.css +10 -0
  27. package/lib/es/tag/tag.scss +13 -3
  28. package/lib/es/tooltip/foundation.d.ts +2 -0
  29. package/lib/es/tooltip/foundation.js +10 -1
  30. package/package.json +2 -2
  31. package/table/rtl.scss +33 -2
  32. package/table/table.scss +8 -0
  33. package/table/utils.ts +14 -0
  34. package/tag/tag.scss +13 -3
  35. package/tooltip/foundation.ts +15 -7
package/cascader/cascader.scss CHANGED
@@ -324,6 +324,14 @@ $module: #{$prefix}-cascader;
324
324
  align-items: center;
325
325
  position: relative;
326
326
 
327
+ &-small {
328
+ height: $height-cascader_selection_wrapper_small;
329
+ }
330
+
331
+ &-large {
332
+ height: $height-cascader_selection_wrapper_large;
333
+ }
334
+
327
335
  .#{$prefix}-input-wrapper {
328
336
  position: absolute;
329
337
  top: 0;
package/cascader/foundation.ts CHANGED
@@ -441,7 +441,11 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
441
441
  if (filterable && !multiple) {
442
442
  const displayText = this.renderDisplayText(selectedKey, keyEntities);
443
443
  updateStates.inputPlaceHolder = displayText;
444
- updateStates.inputValue = displayText;
444
+ /*
445
+ * displayText should not be assign to inputValue,
446
+ * cause inputValue should only change by user enter
447
+ */
448
+ // updateStates.inputValue = displayText;
445
449
  }
446
450
  /**
447
451
  * If selectedKeys does not meet the update conditions,
@@ -472,7 +476,11 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
472
476
  if (filterable && !multiple) {
473
477
  const displayText = this._defaultRenderText(valuePath);
474
478
  updateStates.inputPlaceHolder = displayText;
475
- updateStates.inputValue = displayText;
479
+ /*
480
+ * displayText should not be assign to inputValue,
481
+ * cause inputValue should only change by user enter
482
+ */
483
+ // updateStates.inputValue = displayText;
476
484
  }
477
485
  keyEntities[key] = optionNotExist as BasicEntity;
478
486
  // Fix: 1155, if the data is loaded asynchronously to update treeData, the emptying operation should not be done when entering the updateSelectedKey method
@@ -553,7 +561,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
553
561
  }
554
562
 
555
563
 
556
- updateSearching = (isSearching:boolean)=>{
564
+ updateSearching = (isSearching: boolean)=>{
557
565
  this._adapter.updateStates({ isSearching: false });
558
566
  }
559
567
 
package/cascader/variables.scss CHANGED
@@ -96,7 +96,9 @@ $height-cascader_option_list: 180px; // 级联选择菜单高度
96
96
  $height-cascader_selection_tagInput_wrapper_small: 22px; //级联选择多选搜索时搜索框最小高度 - 小尺寸
97
97
  $height-cascader_selection_tagInput_wrapper_default: 30px; //级联选择多选搜索时搜索框最小高度 - 默认尺寸
98
98
  $height-cascader_selection_tagInput_wrapper_large: 38px; //级联选择多选搜索时搜索框最小高度 - 大尺寸
99
- $height-cascader_selection_wrapper: 30px;
99
+ $height-cascader_selection_wrapper_small: 22px; //级联选择单选搜索时搜索框高度 - 小尺寸
100
+ $height-cascader_selection_wrapper: 30px; // 级联选择单选搜索时搜索框高度 - 默认尺寸
101
+ $height-cascader_selection_wrapper_large: 38px; //级联选择单选搜索时搜索框高度 - 大尺寸
100
102
 
101
103
  $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距
102
104
  $spacing-cascader_icon-marginX: $spacing-tight; // 级联选择 prefix/suffix 图标水平内间距
package/lib/cjs/cascader/cascader.css CHANGED
@@ -263,6 +263,12 @@
263
263
  align-items: center;
264
264
  position: relative;
265
265
  }
266
+ .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-small {
267
+ height: 22px;
268
+ }
269
+ .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-large {
270
+ height: 38px;
271
+ }
266
272
  .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper {
267
273
  position: absolute;
268
274
  top: 0;
package/lib/cjs/cascader/cascader.scss CHANGED
@@ -324,6 +324,14 @@ $module: #{$prefix}-cascader;
324
324
  align-items: center;
325
325
  position: relative;
326
326
 
327
+ &-small {
328
+ height: $height-cascader_selection_wrapper_small;
329
+ }
330
+
331
+ &-large {
332
+ height: $height-cascader_selection_wrapper_large;
333
+ }
334
+
327
335
  .#{$prefix}-input-wrapper {
328
336
  position: absolute;
329
337
  top: 0;
package/lib/cjs/cascader/foundation.js CHANGED
@@ -305,7 +305,11 @@ class CascaderFoundation extends _foundation.default {
305
305
  if (filterable && !multiple) {
306
306
  const displayText = this.renderDisplayText(selectedKey, keyEntities);
307
307
  updateStates.inputPlaceHolder = displayText;
308
- updateStates.inputValue = displayText;
308
+ /*
309
+ * displayText should not be assign to inputValue,
310
+ * cause inputValue should only change by user enter
311
+ */
312
+ // updateStates.inputValue = displayText;
309
313
  }
310
314
  /**
311
315
  * If selectedKeys does not meet the update conditions,
@@ -339,7 +343,11 @@ class CascaderFoundation extends _foundation.default {
339
343
  const displayText = this._defaultRenderText(valuePath);
340
344
 
341
345
  updateStates.inputPlaceHolder = displayText;
342
- updateStates.inputValue = displayText;
346
+ /*
347
+ * displayText should not be assign to inputValue,
348
+ * cause inputValue should only change by user enter
349
+ */
350
+ // updateStates.inputValue = displayText;
343
351
  }
344
352
 
345
353
  keyEntities[key] = optionNotExist; // Fix: 1155, if the data is loaded asynchronously to update treeData, the emptying operation should not be done when entering the updateSelectedKey method
package/lib/cjs/cascader/variables.scss CHANGED
@@ -96,7 +96,9 @@ $height-cascader_option_list: 180px; // 级联选择菜单高度
96
96
  $height-cascader_selection_tagInput_wrapper_small: 22px; //级联选择多选搜索时搜索框最小高度 - 小尺寸
97
97
  $height-cascader_selection_tagInput_wrapper_default: 30px; //级联选择多选搜索时搜索框最小高度 - 默认尺寸
98
98
  $height-cascader_selection_tagInput_wrapper_large: 38px; //级联选择多选搜索时搜索框最小高度 - 大尺寸
99
- $height-cascader_selection_wrapper: 30px;
99
+ $height-cascader_selection_wrapper_small: 22px; //级联选择单选搜索时搜索框高度 - 小尺寸
100
+ $height-cascader_selection_wrapper: 30px; // 级联选择单选搜索时搜索框高度 - 默认尺寸
101
+ $height-cascader_selection_wrapper_large: 38px; //级联选择单选搜索时搜索框高度 - 大尺寸
100
102
 
101
103
  $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距
102
104
  $spacing-cascader_icon-marginX: $spacing-tight; // 级联选择 prefix/suffix 图标水平内间距
package/lib/cjs/table/rtl.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  $module: #{$prefix}-table;
2
2
 
3
- .#{$prefix}-rtl,
4
- .#{$prefix}-portal-rtl {
3
+ .#{$module}-wrapper-rtl {
5
4
  .#{$module} {
6
5
  direction: rtl;
7
6
  text-align: right;
@@ -148,6 +147,34 @@ $module: #{$prefix}-table;
148
147
  }
149
148
  }
150
149
  }
150
+
151
+ &-scroll {
152
+ &-position {
153
+ &-left {
154
+ .#{$module}-tbody,
155
+ .#{$module}-thead {
156
+ & > .#{$module}-row > .#{$module}-cell-fixed-left-last {
157
+ box-shadow: $shadow-table_right;
158
+ }
159
+ & > .#{$module}-row > .#{$module}-cell-fixed-right-first {
160
+ box-shadow: none;
161
+ }
162
+ }
163
+ }
164
+
165
+ &-right {
166
+ .#{$module}-tbody,
167
+ .#{$module}-thead {
168
+ & > .#{$module}-row > .#{$module}-cell-fixed-left-last {
169
+ box-shadow: none;
170
+ }
171
+ & > .#{$module}-row > .#{$module}-cell-fixed-right-first {
172
+ box-shadow: $shadow-table_left;
173
+ }
174
+ }
175
+ }
176
+ }
177
+ }
151
178
  }
152
179
 
153
180
  .#{$module}-expand-icon {
@@ -155,4 +182,8 @@ $module: #{$prefix}-table;
155
182
  margin-left: $spacing-table_expand_icon-marginRight;
156
183
  transform: scaleX(-1) translateY(2px);
157
184
  }
185
+
186
+ .#{$prefix}-spin {
187
+ direction: rtl;
188
+ }
158
189
  }
package/lib/cjs/table/table.css CHANGED
@@ -55,6 +55,12 @@
55
55
  .semi-table-wrapper[data-column-fixed=true] {
56
56
  z-index: 1;
57
57
  }
58
+ .semi-table-wrapper-ltr {
59
+ direction: ltr;
60
+ }
61
+ .semi-table-wrapper-ltr .semi-spin {
62
+ direction: ltr;
63
+ }
58
64
  .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
59
65
  padding-top: 12px;
60
66
  padding-bottom: 12px;
@@ -462,115 +468,90 @@
462
468
  transform: rotate(0deg);
463
469
  }
464
470
 
465
- .semi-rtl .semi-table,
466
- .semi-portal-rtl .semi-table {
471
+ .semi-table-wrapper-rtl .semi-table {
467
472
  direction: rtl;
468
473
  text-align: right;
469
474
  }
470
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head,
471
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head {
475
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head {
472
476
  text-align: right;
473
477
  }
474
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last,
475
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last {
478
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last {
476
479
  border-right: 0;
477
480
  border-left: 1px solid var(--semi-color-border);
478
481
  }
479
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing,
480
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing {
482
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing {
481
483
  border-left: 2px solid var(--semi-color-primary);
482
484
  }
483
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first,
484
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first {
485
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first {
485
486
  border-left: 0;
486
487
  border-right: 1px solid var(--semi-color-border);
487
488
  }
488
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing,
489
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing {
489
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing {
490
490
  border-left: 2px solid var(--semi-color-primary);
491
491
  }
492
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar],
493
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] {
492
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] {
494
493
  box-shadow: none;
495
494
  border-right: transparent;
496
495
  }
497
- .semi-rtl .semi-table-thead > .semi-table-row .resizing,
498
- .semi-portal-rtl .semi-table-thead > .semi-table-row .resizing {
496
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row .resizing {
499
497
  border-left: 2px solid var(--semi-color-primary);
500
498
  }
501
- .semi-rtl .semi-table-thead > .semi-table-row .react-resizable-handle,
502
- .semi-portal-rtl .semi-table-thead > .semi-table-row .react-resizable-handle {
499
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row .react-resizable-handle {
503
500
  right: auto;
504
501
  left: -1px;
505
502
  }
506
- .semi-rtl .semi-table-tbody,
507
- .semi-portal-rtl .semi-table-tbody {
503
+ .semi-table-wrapper-rtl .semi-table-tbody {
508
504
  display: table-row-group;
509
505
  }
510
- .semi-rtl .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing,
511
- .semi-portal-rtl .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
506
+ .semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
512
507
  border-right: 0;
513
508
  border-left: 2px solid var(--semi-color-primary);
514
509
  }
515
- .semi-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last,
516
- .semi-portal-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last {
510
+ .semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last {
517
511
  border-right: 0;
518
512
  border-left: 1px solid var(--semi-color-border);
519
513
  }
520
- .semi-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first,
521
- .semi-portal-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first {
514
+ .semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first {
522
515
  border-left: 0;
523
516
  border-right: 1px solid var(--semi-color-border);
524
517
  }
525
- .semi-rtl .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon,
526
- .semi-portal-rtl .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon {
518
+ .semi-table-wrapper-rtl .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon {
527
519
  left: auto;
528
520
  right: 0;
529
521
  }
530
- .semi-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon,
531
- .semi-portal-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon {
522
+ .semi-table-wrapper-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon {
532
523
  transform: scaleX(-1) translateY(2px);
533
524
  }
534
- .semi-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child,
535
- .semi-portal-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child {
525
+ .semi-table-wrapper-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child {
536
526
  margin-right: auto;
537
527
  margin-left: 0;
538
528
  }
539
- .semi-rtl .semi-table .semi-table-column-sorter,
540
- .semi-portal-rtl .semi-table .semi-table-column-sorter {
529
+ .semi-table-wrapper-rtl .semi-table .semi-table-column-sorter {
541
530
  margin-left: auto;
542
531
  margin-right: 4px;
543
532
  }
544
- .semi-rtl .semi-table .semi-table-column-filter,
545
- .semi-portal-rtl .semi-table .semi-table-column-filter {
533
+ .semi-table-wrapper-rtl .semi-table .semi-table-column-filter {
546
534
  margin-left: auto;
547
535
  margin-right: 4px;
548
536
  }
549
- .semi-rtl .semi-table-bordered .semi-table-container,
550
- .semi-portal-rtl .semi-table-bordered .semi-table-container {
537
+ .semi-table-wrapper-rtl .semi-table-bordered .semi-table-container {
551
538
  border-left: 0;
552
539
  border-right: 1px solid var(--semi-color-border);
553
540
  }
554
- .semi-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
555
- .semi-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell,
556
- .semi-portal-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
557
- .semi-portal-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
541
+ .semi-table-wrapper-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
542
+ .semi-table-wrapper-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
558
543
  border-right: 0;
559
544
  border-left: 1px solid var(--semi-color-border);
560
545
  }
561
- .semi-rtl .semi-table-bordered .semi-table-placeholder,
562
- .semi-portal-rtl .semi-table-bordered .semi-table-placeholder {
546
+ .semi-table-wrapper-rtl .semi-table-bordered .semi-table-placeholder {
563
547
  border-left: 1px solid var(--semi-color-border);
564
548
  border-right: 0;
565
549
  }
566
- .semi-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar,
567
- .semi-portal-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar {
550
+ .semi-table-wrapper-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar {
568
551
  border-right: 0;
569
552
  border-left: 1px solid var(--semi-color-border);
570
553
  }
571
- .semi-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner,
572
- .semi-portal-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner,
573
- .semi-portal-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner {
554
+ .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner {
574
555
  left: auto;
575
556
  right: 0;
576
557
  margin-right: -16px;
@@ -578,9 +559,27 @@
578
559
  padding-right: 16px;
579
560
  padding-left: 16px;
580
561
  }
581
- .semi-rtl .semi-table-expand-icon,
582
- .semi-portal-rtl .semi-table-expand-icon {
562
+ .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last,
563
+ .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last {
564
+ box-shadow: 3px 0 0 0 var(--semi-color-shadow);
565
+ }
566
+ .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first,
567
+ .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first {
568
+ box-shadow: none;
569
+ }
570
+ .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last,
571
+ .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last {
572
+ box-shadow: none;
573
+ }
574
+ .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first,
575
+ .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first {
576
+ box-shadow: -3px 0 0 0 var(--semi-color-shadow);
577
+ }
578
+ .semi-table-wrapper-rtl .semi-table-expand-icon {
583
579
  margin-right: auto;
584
580
  margin-left: 8px;
585
581
  transform: scaleX(-1) translateY(2px);
582
+ }
583
+ .semi-table-wrapper-rtl .semi-spin {
584
+ direction: rtl;
586
585
  }
package/lib/cjs/table/table.scss CHANGED
@@ -28,6 +28,14 @@ $module: #{$prefix}-table;
28
28
  &[data-column-fixed='true'] {
29
29
  z-index: 1;
30
30
  }
31
+
32
+ &-ltr {
33
+ direction: ltr;
34
+
35
+ .#{$prefix}-spin {
36
+ direction: ltr;
37
+ }
38
+ }
31
39
  }
32
40
 
33
41
  &-middle {
package/lib/cjs/table/utils.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { strings } from './constants';
1
2
  export declare function cloneDeep(value: any, customizer?: (v: any) => any): any;
2
3
  export declare function equalWith(value: any, other: any, customizer?: (...args: any[]) => boolean): boolean;
3
4
  export declare function getColumnKey(column: any, keyPropNames: any[]): any;
@@ -100,3 +101,4 @@ export declare function isTreeTable({ dataSource, childrenRecordName }: {
100
101
  dataSource: Record<string, any>;
101
102
  childrenRecordName?: string;
102
103
  }): boolean;
104
+ export declare function getRTLAlign(align: typeof strings.ALIGNS[number], direction?: 'ltr' | 'rtl'): typeof strings.ALIGNS[number];
package/lib/cjs/table/utils.js CHANGED
@@ -18,6 +18,7 @@ exports.getColumnByLevelIndex = getColumnByLevelIndex;
18
18
  exports.getColumnKey = getColumnKey;
19
19
  exports.getColumnsByLevel = getColumnsByLevel;
20
20
  exports.getDefaultVirtualizedRowConfig = getDefaultVirtualizedRowConfig;
21
+ exports.getRTLAlign = getRTLAlign;
21
22
  exports.getRecord = getRecord;
22
23
  exports.getRecordChildren = getRecordChildren;
23
24
  exports.getRecordKey = getRecordKey;
@@ -615,4 +616,21 @@ function isTreeTable(_ref2) {
615
616
  }
616
617
 
617
618
  return flag;
619
+ }
620
+
621
+ function getRTLAlign(align, direction) {
622
+ if (direction === 'rtl') {
623
+ switch (align) {
624
+ case 'left':
625
+ return 'right';
626
+
627
+ case 'right':
628
+ return 'left';
629
+
630
+ default:
631
+ return align;
632
+ }
633
+ }
634
+
635
+ return align;
618
636
  }
package/lib/cjs/tag/tag.css CHANGED
@@ -46,10 +46,20 @@
46
46
  }
47
47
  .semi-tag-content {
48
48
  flex: 1;
49
+ }
50
+ .semi-tag-content-ellipsis {
49
51
  overflow: hidden;
50
52
  white-space: nowrap;
51
53
  text-overflow: ellipsis;
52
54
  }
55
+ .semi-tag-content-center {
56
+ display: flex;
57
+ display: flex;
58
+ justify-content: center;
59
+ align-items: center;
60
+ height: 100%;
61
+ min-width: 0;
62
+ }
53
63
  .semi-tag-close {
54
64
  display: flex;
55
65
  justify-content: center;
package/lib/cjs/tag/tag.scss CHANGED
@@ -53,9 +53,19 @@ $types: "ghost", "solid", "light";
53
53
 
54
54
  &-content {
55
55
  flex: 1;
56
- overflow: hidden;
57
- white-space: nowrap;
58
- text-overflow: ellipsis;
56
+
57
+ &-ellipsis {
58
+ overflow: hidden;
59
+ white-space: nowrap;
60
+ text-overflow: ellipsis;
61
+ }
62
+
63
+ &-center {
64
+ display: flex;
65
+ @include all-center;
66
+ height: 100%;
67
+ min-width: 0;
68
+ }
59
69
  }
60
70
 
61
71
  &-close {
package/lib/cjs/tooltip/foundation.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
16
16
  unregisterScrollHandler(): void;
17
17
  insertPortal(...args: any[]): void;
18
18
  removePortal(...args: any[]): void;
19
+ setDisplayNone: (displayNone: boolean, cb?: () => void) => void;
19
20
  getEventName(): {
20
21
  mouseEnter: string;
21
22
  mouseLeave: string;
@@ -65,6 +66,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
65
66
  _bindResizeEvent(): void;
66
67
  unBindResizeEvent(): void;
67
68
  removePortal: () => void;
69
+ setDisplayNone: (displayNone: boolean, cb?: () => void) => void;
68
70
  _adjustPos(position?: string, isVertical?: boolean, adjustType?: string, concatPos?: any): string;
69
71
  _reversePos(position?: string, isVertical?: boolean): string;
70
72
  _expandPos(position: string, concatPos: string): string;
package/lib/cjs/tooltip/foundation.js CHANGED
@@ -41,6 +41,10 @@ class Tooltip extends _foundation.default {
41
41
  this._adapter.removePortal();
42
42
  };
43
43
 
44
+ this.setDisplayNone = (displayNone, cb) => {
45
+ this._adapter.setDisplayNone(displayNone, cb);
46
+ };
47
+
44
48
  this.onResize = () => {
45
49
  // this.log('resize');
46
50
  // rePosition when window resize
@@ -66,9 +70,14 @@ class Tooltip extends _foundation.default {
66
70
  const trigger = this.getProp('trigger');
67
71
  const clickTriggerToHide = this.getProp('clickTriggerToHide');
68
72
  const {
69
- visible
73
+ visible,
74
+ displayNone
70
75
  } = this.getStates();
71
76
 
77
+ if (displayNone) {
78
+ this.setDisplayNone(false);
79
+ }
80
+
72
81
  if (visible) {
73
82
  return;
74
83
  }
package/lib/es/cascader/cascader.css CHANGED
@@ -263,6 +263,12 @@
263
263
  align-items: center;
264
264
  position: relative;
265
265
  }
266
+ .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-small {
267
+ height: 22px;
268
+ }
269
+ .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-large {
270
+ height: 38px;
271
+ }
266
272
  .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper {
267
273
  position: absolute;
268
274
  top: 0;
package/lib/es/cascader/cascader.scss CHANGED
@@ -324,6 +324,14 @@ $module: #{$prefix}-cascader;
324
324
  align-items: center;
325
325
  position: relative;
326
326
 
327
+ &-small {
328
+ height: $height-cascader_selection_wrapper_small;
329
+ }
330
+
331
+ &-large {
332
+ height: $height-cascader_selection_wrapper_large;
333
+ }
334
+
327
335
  .#{$prefix}-input-wrapper {
328
336
  position: absolute;
329
337
  top: 0;
package/lib/es/cascader/foundation.js CHANGED
@@ -281,7 +281,11 @@ export default class CascaderFoundation extends BaseFoundation {
281
281
  if (filterable && !multiple) {
282
282
  const displayText = this.renderDisplayText(selectedKey, keyEntities);
283
283
  updateStates.inputPlaceHolder = displayText;
284
- updateStates.inputValue = displayText;
284
+ /*
285
+ * displayText should not be assign to inputValue,
286
+ * cause inputValue should only change by user enter
287
+ */
288
+ // updateStates.inputValue = displayText;
285
289
  }
286
290
  /**
287
291
  * If selectedKeys does not meet the update conditions,
@@ -315,7 +319,11 @@ export default class CascaderFoundation extends BaseFoundation {
315
319
  const displayText = this._defaultRenderText(valuePath);
316
320
 
317
321
  updateStates.inputPlaceHolder = displayText;
318
- updateStates.inputValue = displayText;
322
+ /*
323
+ * displayText should not be assign to inputValue,
324
+ * cause inputValue should only change by user enter
325
+ */
326
+ // updateStates.inputValue = displayText;
319
327
  }
320
328
 
321
329
  keyEntities[key] = optionNotExist; // Fix: 1155, if the data is loaded asynchronously to update treeData, the emptying operation should not be done when entering the updateSelectedKey method
package/lib/es/cascader/variables.scss CHANGED
@@ -96,7 +96,9 @@ $height-cascader_option_list: 180px; // 级联选择菜单高度
96
96
  $height-cascader_selection_tagInput_wrapper_small: 22px; //级联选择多选搜索时搜索框最小高度 - 小尺寸
97
97
  $height-cascader_selection_tagInput_wrapper_default: 30px; //级联选择多选搜索时搜索框最小高度 - 默认尺寸
98
98
  $height-cascader_selection_tagInput_wrapper_large: 38px; //级联选择多选搜索时搜索框最小高度 - 大尺寸
99
- $height-cascader_selection_wrapper: 30px;
99
+ $height-cascader_selection_wrapper_small: 22px; //级联选择单选搜索时搜索框高度 - 小尺寸
100
+ $height-cascader_selection_wrapper: 30px; // 级联选择单选搜索时搜索框高度 - 默认尺寸
101
+ $height-cascader_selection_wrapper_large: 38px; //级联选择单选搜索时搜索框高度 - 大尺寸
100
102
 
101
103
  $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距
102
104
  $spacing-cascader_icon-marginX: $spacing-tight; // 级联选择 prefix/suffix 图标水平内间距
package/lib/es/table/rtl.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  $module: #{$prefix}-table;
2
2
 
3
- .#{$prefix}-rtl,
4
- .#{$prefix}-portal-rtl {
3
+ .#{$module}-wrapper-rtl {
5
4
  .#{$module} {
6
5
  direction: rtl;
7
6
  text-align: right;
@@ -148,6 +147,34 @@ $module: #{$prefix}-table;
148
147
  }
149
148
  }
150
149
  }
150
+
151
+ &-scroll {
152
+ &-position {
153
+ &-left {
154
+ .#{$module}-tbody,
155
+ .#{$module}-thead {
156
+ & > .#{$module}-row > .#{$module}-cell-fixed-left-last {
157
+ box-shadow: $shadow-table_right;
158
+ }
159
+ & > .#{$module}-row > .#{$module}-cell-fixed-right-first {
160
+ box-shadow: none;
161
+ }
162
+ }
163
+ }
164
+
165
+ &-right {
166
+ .#{$module}-tbody,
167
+ .#{$module}-thead {
168
+ & > .#{$module}-row > .#{$module}-cell-fixed-left-last {
169
+ box-shadow: none;
170
+ }
171
+ & > .#{$module}-row > .#{$module}-cell-fixed-right-first {
172
+ box-shadow: $shadow-table_left;
173
+ }
174
+ }
175
+ }
176
+ }
177
+ }
151
178
  }
152
179
 
153
180
  .#{$module}-expand-icon {
@@ -155,4 +182,8 @@ $module: #{$prefix}-table;
155
182
  margin-left: $spacing-table_expand_icon-marginRight;
156
183
  transform: scaleX(-1) translateY(2px);
157
184
  }
185
+
186
+ .#{$prefix}-spin {
187
+ direction: rtl;
188
+ }
158
189
  }
package/lib/es/table/table.css CHANGED
@@ -55,6 +55,12 @@
55
55
  .semi-table-wrapper[data-column-fixed=true] {
56
56
  z-index: 1;
57
57
  }
58
+ .semi-table-wrapper-ltr {
59
+ direction: ltr;
60
+ }
61
+ .semi-table-wrapper-ltr .semi-spin {
62
+ direction: ltr;
63
+ }
58
64
  .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
59
65
  padding-top: 12px;
60
66
  padding-bottom: 12px;
@@ -462,115 +468,90 @@
462
468
  transform: rotate(0deg);
463
469
  }
464
470
 
465
- .semi-rtl .semi-table,
466
- .semi-portal-rtl .semi-table {
471
+ .semi-table-wrapper-rtl .semi-table {
467
472
  direction: rtl;
468
473
  text-align: right;
469
474
  }
470
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head,
471
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head {
475
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head {
472
476
  text-align: right;
473
477
  }
474
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last,
475
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last {
478
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last {
476
479
  border-right: 0;
477
480
  border-left: 1px solid var(--semi-color-border);
478
481
  }
479
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing,
480
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing {
482
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing {
481
483
  border-left: 2px solid var(--semi-color-primary);
482
484
  }
483
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first,
484
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first {
485
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first {
485
486
  border-left: 0;
486
487
  border-right: 1px solid var(--semi-color-border);
487
488
  }
488
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing,
489
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing {
489
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing {
490
490
  border-left: 2px solid var(--semi-color-primary);
491
491
  }
492
- .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar],
493
- .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] {
492
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] {
494
493
  box-shadow: none;
495
494
  border-right: transparent;
496
495
  }
497
- .semi-rtl .semi-table-thead > .semi-table-row .resizing,
498
- .semi-portal-rtl .semi-table-thead > .semi-table-row .resizing {
496
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row .resizing {
499
497
  border-left: 2px solid var(--semi-color-primary);
500
498
  }
501
- .semi-rtl .semi-table-thead > .semi-table-row .react-resizable-handle,
502
- .semi-portal-rtl .semi-table-thead > .semi-table-row .react-resizable-handle {
499
+ .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row .react-resizable-handle {
503
500
  right: auto;
504
501
  left: -1px;
505
502
  }
506
- .semi-rtl .semi-table-tbody,
507
- .semi-portal-rtl .semi-table-tbody {
503
+ .semi-table-wrapper-rtl .semi-table-tbody {
508
504
  display: table-row-group;
509
505
  }
510
- .semi-rtl .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing,
511
- .semi-portal-rtl .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
506
+ .semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
512
507
  border-right: 0;
513
508
  border-left: 2px solid var(--semi-color-primary);
514
509
  }
515
- .semi-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last,
516
- .semi-portal-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last {
510
+ .semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last {
517
511
  border-right: 0;
518
512
  border-left: 1px solid var(--semi-color-border);
519
513
  }
520
- .semi-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first,
521
- .semi-portal-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first {
514
+ .semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first {
522
515
  border-left: 0;
523
516
  border-right: 1px solid var(--semi-color-border);
524
517
  }
525
- .semi-rtl .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon,
526
- .semi-portal-rtl .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon {
518
+ .semi-table-wrapper-rtl .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon {
527
519
  left: auto;
528
520
  right: 0;
529
521
  }
530
- .semi-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon,
531
- .semi-portal-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon {
522
+ .semi-table-wrapper-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon {
532
523
  transform: scaleX(-1) translateY(2px);
533
524
  }
534
- .semi-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child,
535
- .semi-portal-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child {
525
+ .semi-table-wrapper-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child {
536
526
  margin-right: auto;
537
527
  margin-left: 0;
538
528
  }
539
- .semi-rtl .semi-table .semi-table-column-sorter,
540
- .semi-portal-rtl .semi-table .semi-table-column-sorter {
529
+ .semi-table-wrapper-rtl .semi-table .semi-table-column-sorter {
541
530
  margin-left: auto;
542
531
  margin-right: 4px;
543
532
  }
544
- .semi-rtl .semi-table .semi-table-column-filter,
545
- .semi-portal-rtl .semi-table .semi-table-column-filter {
533
+ .semi-table-wrapper-rtl .semi-table .semi-table-column-filter {
546
534
  margin-left: auto;
547
535
  margin-right: 4px;
548
536
  }
549
- .semi-rtl .semi-table-bordered .semi-table-container,
550
- .semi-portal-rtl .semi-table-bordered .semi-table-container {
537
+ .semi-table-wrapper-rtl .semi-table-bordered .semi-table-container {
551
538
  border-left: 0;
552
539
  border-right: 1px solid var(--semi-color-border);
553
540
  }
554
- .semi-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
555
- .semi-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell,
556
- .semi-portal-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
557
- .semi-portal-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
541
+ .semi-table-wrapper-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
542
+ .semi-table-wrapper-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
558
543
  border-right: 0;
559
544
  border-left: 1px solid var(--semi-color-border);
560
545
  }
561
- .semi-rtl .semi-table-bordered .semi-table-placeholder,
562
- .semi-portal-rtl .semi-table-bordered .semi-table-placeholder {
546
+ .semi-table-wrapper-rtl .semi-table-bordered .semi-table-placeholder {
563
547
  border-left: 1px solid var(--semi-color-border);
564
548
  border-right: 0;
565
549
  }
566
- .semi-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar,
567
- .semi-portal-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar {
550
+ .semi-table-wrapper-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar {
568
551
  border-right: 0;
569
552
  border-left: 1px solid var(--semi-color-border);
570
553
  }
571
- .semi-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner,
572
- .semi-portal-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner,
573
- .semi-portal-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner {
554
+ .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner {
574
555
  left: auto;
575
556
  right: 0;
576
557
  margin-right: -16px;
@@ -578,9 +559,27 @@
578
559
  padding-right: 16px;
579
560
  padding-left: 16px;
580
561
  }
581
- .semi-rtl .semi-table-expand-icon,
582
- .semi-portal-rtl .semi-table-expand-icon {
562
+ .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last,
563
+ .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last {
564
+ box-shadow: 3px 0 0 0 var(--semi-color-shadow);
565
+ }
566
+ .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first,
567
+ .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first {
568
+ box-shadow: none;
569
+ }
570
+ .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last,
571
+ .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last {
572
+ box-shadow: none;
573
+ }
574
+ .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first,
575
+ .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first {
576
+ box-shadow: -3px 0 0 0 var(--semi-color-shadow);
577
+ }
578
+ .semi-table-wrapper-rtl .semi-table-expand-icon {
583
579
  margin-right: auto;
584
580
  margin-left: 8px;
585
581
  transform: scaleX(-1) translateY(2px);
582
+ }
583
+ .semi-table-wrapper-rtl .semi-spin {
584
+ direction: rtl;
586
585
  }
package/lib/es/table/table.scss CHANGED
@@ -28,6 +28,14 @@ $module: #{$prefix}-table;
28
28
  &[data-column-fixed='true'] {
29
29
  z-index: 1;
30
30
  }
31
+
32
+ &-ltr {
33
+ direction: ltr;
34
+
35
+ .#{$prefix}-spin {
36
+ direction: ltr;
37
+ }
38
+ }
31
39
  }
32
40
 
33
41
  &-middle {
package/lib/es/table/utils.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { strings } from './constants';
1
2
  export declare function cloneDeep(value: any, customizer?: (v: any) => any): any;
2
3
  export declare function equalWith(value: any, other: any, customizer?: (...args: any[]) => boolean): boolean;
3
4
  export declare function getColumnKey(column: any, keyPropNames: any[]): any;
@@ -100,3 +101,4 @@ export declare function isTreeTable({ dataSource, childrenRecordName }: {
100
101
  dataSource: Record<string, any>;
101
102
  childrenRecordName?: string;
102
103
  }): boolean;
104
+ export declare function getRTLAlign(align: typeof strings.ALIGNS[number], direction?: 'ltr' | 'rtl'): typeof strings.ALIGNS[number];
package/lib/es/table/utils.js CHANGED
@@ -531,4 +531,20 @@ export function isTreeTable(_ref2) {
531
531
  }
532
532
 
533
533
  return flag;
534
+ }
535
+ export function getRTLAlign(align, direction) {
536
+ if (direction === 'rtl') {
537
+ switch (align) {
538
+ case 'left':
539
+ return 'right';
540
+
541
+ case 'right':
542
+ return 'left';
543
+
544
+ default:
545
+ return align;
546
+ }
547
+ }
548
+
549
+ return align;
534
550
  }
package/lib/es/tag/tag.css CHANGED
@@ -46,10 +46,20 @@
46
46
  }
47
47
  .semi-tag-content {
48
48
  flex: 1;
49
+ }
50
+ .semi-tag-content-ellipsis {
49
51
  overflow: hidden;
50
52
  white-space: nowrap;
51
53
  text-overflow: ellipsis;
52
54
  }
55
+ .semi-tag-content-center {
56
+ display: flex;
57
+ display: flex;
58
+ justify-content: center;
59
+ align-items: center;
60
+ height: 100%;
61
+ min-width: 0;
62
+ }
53
63
  .semi-tag-close {
54
64
  display: flex;
55
65
  justify-content: center;
package/lib/es/tag/tag.scss CHANGED
@@ -53,9 +53,19 @@ $types: "ghost", "solid", "light";
53
53
 
54
54
  &-content {
55
55
  flex: 1;
56
- overflow: hidden;
57
- white-space: nowrap;
58
- text-overflow: ellipsis;
56
+
57
+ &-ellipsis {
58
+ overflow: hidden;
59
+ white-space: nowrap;
60
+ text-overflow: ellipsis;
61
+ }
62
+
63
+ &-center {
64
+ display: flex;
65
+ @include all-center;
66
+ height: 100%;
67
+ min-width: 0;
68
+ }
59
69
  }
60
70
 
61
71
  &-close {
package/lib/es/tooltip/foundation.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
16
16
  unregisterScrollHandler(): void;
17
17
  insertPortal(...args: any[]): void;
18
18
  removePortal(...args: any[]): void;
19
+ setDisplayNone: (displayNone: boolean, cb?: () => void) => void;
19
20
  getEventName(): {
20
21
  mouseEnter: string;
21
22
  mouseLeave: string;
@@ -65,6 +66,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
65
66
  _bindResizeEvent(): void;
66
67
  unBindResizeEvent(): void;
67
68
  removePortal: () => void;
69
+ setDisplayNone: (displayNone: boolean, cb?: () => void) => void;
68
70
  _adjustPos(position?: string, isVertical?: boolean, adjustType?: string, concatPos?: any): string;
69
71
  _reversePos(position?: string, isVertical?: boolean): string;
70
72
  _expandPos(position: string, concatPos: string): string;
package/lib/es/tooltip/foundation.js CHANGED
@@ -27,6 +27,10 @@ export default class Tooltip extends BaseFoundation {
27
27
  this._adapter.removePortal();
28
28
  };
29
29
 
30
+ this.setDisplayNone = (displayNone, cb) => {
31
+ this._adapter.setDisplayNone(displayNone, cb);
32
+ };
33
+
30
34
  this.onResize = () => {
31
35
  // this.log('resize');
32
36
  // rePosition when window resize
@@ -52,9 +56,14 @@ export default class Tooltip extends BaseFoundation {
52
56
  const trigger = this.getProp('trigger');
53
57
  const clickTriggerToHide = this.getProp('clickTriggerToHide');
54
58
  const {
55
- visible
59
+ visible,
60
+ displayNone
56
61
  } = this.getStates();
57
62
 
63
+ if (displayNone) {
64
+ this.setDisplayNone(false);
65
+ }
66
+
58
67
  if (visible) {
59
68
  return;
60
69
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.30.2",
3
+ "version": "2.31.0-beta.0",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
23
23
  "*.scss",
24
24
  "*.css"
25
25
  ],
26
- "gitHead": "1cd39aa790995b2770f09a95ef89f1e9948b845b",
26
+ "gitHead": "8b378259f169ca3bfb9af17118e962d717efa685",
27
27
  "devDependencies": {
28
28
  "@babel/plugin-transform-runtime": "^7.15.8",
29
29
  "@babel/preset-env": "^7.15.8",
package/table/rtl.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  $module: #{$prefix}-table;
2
2
 
3
- .#{$prefix}-rtl,
4
- .#{$prefix}-portal-rtl {
3
+ .#{$module}-wrapper-rtl {
5
4
  .#{$module} {
6
5
  direction: rtl;
7
6
  text-align: right;
@@ -148,6 +147,34 @@ $module: #{$prefix}-table;
148
147
  }
149
148
  }
150
149
  }
150
+
151
+ &-scroll {
152
+ &-position {
153
+ &-left {
154
+ .#{$module}-tbody,
155
+ .#{$module}-thead {
156
+ & > .#{$module}-row > .#{$module}-cell-fixed-left-last {
157
+ box-shadow: $shadow-table_right;
158
+ }
159
+ & > .#{$module}-row > .#{$module}-cell-fixed-right-first {
160
+ box-shadow: none;
161
+ }
162
+ }
163
+ }
164
+
165
+ &-right {
166
+ .#{$module}-tbody,
167
+ .#{$module}-thead {
168
+ & > .#{$module}-row > .#{$module}-cell-fixed-left-last {
169
+ box-shadow: none;
170
+ }
171
+ & > .#{$module}-row > .#{$module}-cell-fixed-right-first {
172
+ box-shadow: $shadow-table_left;
173
+ }
174
+ }
175
+ }
176
+ }
177
+ }
151
178
  }
152
179
 
153
180
  .#{$module}-expand-icon {
@@ -155,4 +182,8 @@ $module: #{$prefix}-table;
155
182
  margin-left: $spacing-table_expand_icon-marginRight;
156
183
  transform: scaleX(-1) translateY(2px);
157
184
  }
185
+
186
+ .#{$prefix}-spin {
187
+ direction: rtl;
188
+ }
158
189
  }
package/table/table.scss CHANGED
@@ -28,6 +28,14 @@ $module: #{$prefix}-table;
28
28
  &[data-column-fixed='true'] {
29
29
  z-index: 1;
30
30
  }
31
+
32
+ &-ltr {
33
+ direction: ltr;
34
+
35
+ .#{$prefix}-spin {
36
+ direction: ltr;
37
+ }
38
+ }
31
39
  }
32
40
 
33
41
  &-middle {
package/table/utils.ts CHANGED
@@ -502,4 +502,18 @@ export function isTreeTable({ dataSource, childrenRecordName = 'children' }: { d
502
502
  }
503
503
  }
504
504
  return flag;
505
+ }
506
+
507
+ export function getRTLAlign(align: typeof strings.ALIGNS[number], direction?: 'ltr' | 'rtl'): typeof strings.ALIGNS[number] {
508
+ if (direction === 'rtl') {
509
+ switch (align) {
510
+ case 'left':
511
+ return 'right';
512
+ case 'right':
513
+ return 'left';
514
+ default:
515
+ return align;
516
+ }
517
+ }
518
+ return align;
505
519
  }
package/tag/tag.scss CHANGED
@@ -53,9 +53,19 @@ $types: "ghost", "solid", "light";
53
53
 
54
54
  &-content {
55
55
  flex: 1;
56
- overflow: hidden;
57
- white-space: nowrap;
58
- text-overflow: ellipsis;
56
+
57
+ &-ellipsis {
58
+ overflow: hidden;
59
+ white-space: nowrap;
60
+ text-overflow: ellipsis;
61
+ }
62
+
63
+ &-center {
64
+ display: flex;
65
+ @include all-center;
66
+ height: 100%;
67
+ min-width: 0;
68
+ }
59
69
  }
60
70
 
61
71
  &-close {
package/tooltip/foundation.ts CHANGED
@@ -38,6 +38,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
38
38
  unregisterScrollHandler(): void;
39
39
  insertPortal(...args: any[]): void;
40
40
  removePortal(...args: any[]): void;
41
+ setDisplayNone: (displayNone: boolean, cb?: () => void) => void;
41
42
  getEventName(): {
42
43
  mouseEnter: string;
43
44
  mouseLeave: string;
@@ -138,6 +139,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
138
139
  this._adapter.removePortal();
139
140
  }
140
141
 
142
+ setDisplayNone: (displayNone: boolean, cb?: () => void) => void = (displayNone, cb) => {
143
+ this._adapter.setDisplayNone(displayNone, cb);
144
+ }
145
+
141
146
  _adjustPos(position = '', isVertical = false, adjustType = 'reverse', concatPos?: any) {
142
147
  switch (adjustType) {
143
148
  case 'reverse':
@@ -266,7 +271,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
266
271
  this.calcPosition();
267
272
  };
268
273
 
269
- _shouldShow() {
274
+ _shouldShow() {
270
275
  const visible = this.getProp('visible');
271
276
  if (visible) {
272
277
  this.show();
@@ -294,7 +299,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
294
299
  const content = this.getProp('content');
295
300
  const trigger = this.getProp('trigger');
296
301
  const clickTriggerToHide = this.getProp('clickTriggerToHide');
297
- const { visible } = this.getStates();
302
+ const { visible, displayNone } = this.getStates();
303
+ if (displayNone) {
304
+ this.setDisplayNone(false);
305
+ }
298
306
  if (visible) {
299
307
  return ;
300
308
  }
@@ -679,19 +687,19 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
679
687
  return rowSpace < size && reverseSpace > size;
680
688
  }
681
689
 
682
- isOverFlow(rowSpace: number, reverseSpace: number, size: number){
690
+ isOverFlow(rowSpace: number, reverseSpace: number, size: number) {
683
691
  // 原空间且反向空间都不足
684
692
  // The original space and the reverse space are not enough
685
693
  return rowSpace < size && reverseSpace < size;
686
694
  }
687
695
 
688
- isHalfOverFlow(posSpace: number, negSpace: number, size: number){
696
+ isHalfOverFlow(posSpace: number, negSpace: number, size: number) {
689
697
  // 正半空间或者负半空间不足，即表示有遮挡，需要偏移
690
698
  // Insufficient positive half space or negative half space means that there is occlusion and needs to be offset
691
699
  return posSpace < size || negSpace < size;
692
700
  }
693
701
 
694
- isHalfAllEnough(posSpace: number, negSpace: number, size: number){
702
+ isHalfAllEnough(posSpace: number, negSpace: number, size: number) {
695
703
  // 正半空间和负半空间都足够，即表示可以从 topLeft/topRight 变成 top
696
704
  // Both positive and negative half-spaces are sufficient, which means you can change from topLeft/topRight to top
697
705
  return posSpace >= size || negSpace >= size;
@@ -1003,7 +1011,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
1003
1011
 
1004
1012
  // 判断溢出 Judgment overflow
1005
1013
  // 上下方向 top and bottom
1006
- if (this.isTB(position)){
1014
+ if (this.isTB(position)) {
1007
1015
  isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow;
1008
1016
  // Related PR: https://github.com/DouyinFE/semi-design/pull/1297
1009
1017
  // If clientRight or restClientRight less than 0, means that the left and right parts of the trigger are blocked
@@ -1015,7 +1023,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
1015
1023
  }
1016
1024
  }
1017
1025
  // 左右方向 left and right
1018
- if (this.isLR(position)){
1026
+ if (this.isLR(position)) {
1019
1027
  isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow;
1020
1028
  // If clientTop or restClientTop less than 0, means that the top and bottom parts of the trigger are blocked
1021
1029
  // Then the display of the wrapper will also be affected, make height overflow to offset the wrapper