@douyinfe/semi-foundation 2.22.3 → 2.23.0-alpha.2

package/lib/es/transfer/foundation.d.ts

@@ -36,7 +36,7 @@ export default class TransferFoundation<P = Record<string, any>, S = Record<stri
     _generateGroupedData(dataSource: any[]): any[];
     _generateTreeData(dataSource: any[]): any[];
     _generatePath(item: BasicResolvedDataItem): any;
-    handleInputChange(inputVal: string): void;
+    handleInputChange(inputVal: string, notify: boolean): void;
     handleAll(wantAllChecked: boolean): void;
     handleClear(): void;
     handleSelectOrRemove(item: BasicResolvedDataItem): void;

package/lib/es/transfer/foundation.js

@@ -24,7 +24,7 @@ export default class TransferFoundation extends BaseFoundation {
     return path.map(p => p.label).join(' > ');
   }
 
-  handleInputChange(inputVal) {
+  handleInputChange(inputVal, notify) {
     const {
       data
     } = this.getStates();
@@ -38,7 +38,7 @@ export default class TransferFoundation extends BaseFoundation {
 
       this._adapter.searchTree(inputVal);
 
-      this._adapter.notifySearch(inputVal);
+      notify && this._adapter.notifySearch(inputVal);
 
       this._adapter.updateInput(inputVal);
 
@@ -50,8 +50,7 @@ export default class TransferFoundation extends BaseFoundation {
     const filterFunc = typeof filter === 'function' ? item => filter(inputVal, item) : item => typeof item.label === 'string' && item.label.includes(inputVal);
     const searchData = data.filter(filterFunc);
     const searchResult = new Set(searchData.map(item => item.key));
-
-    this._adapter.notifySearch(inputVal);
+    notify && this._adapter.notifySearch(inputVal);
 
     this._adapter.updateInput(inputVal);
 

package/navigation/navigation.scss

@@ -113,6 +113,15 @@ $module: #{$prefix}-navigation;
         justify-content: flex-start;
     }
 
+    // when item has link, add the padding to link instead of item
+    &-item-has-link {
+        padding: 0;
+
+        .#{$module}-item-link {
+            padding: $spacing-navigation_item-paddingY $spacing-navigation_item-paddingX;
+        }
+    }
+
     &-item-sub {
         padding: $spacing-navigation_item_sub-padding;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.22.3",
+    "version": "2.23.0-alpha.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "8cff064f240ea2a919c3527ae9b84e66c5b7a419",
+    "gitHead": "5671959bf3521da5e2e24b0c7afaf82915f4ce81",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/table/constants.ts

@@ -60,6 +60,7 @@ const DEFAULT_CELL_MIDDLE_PADDING_BOTTOM = 12;
 const DEFAULT_CELL_SMALL_PADDING_TOP = 8;
 const DEFAULT_CELL_SMALL_PADDING_BOTTOM = 8;
 const DEFAULT_CELL_LINE_HEIGHT = 20;
+const DEFAULT_EMPTYSLOT_HEIGHT = 52;
 
 // normal size
 const DEFAULT_VIRTUALIZED_ROW_HEIGHT =
@@ -118,6 +119,7 @@ const numbers = {
     DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
     DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
     DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT,
+    DEFAULT_EMPTYSLOT_HEIGHT
 } as const;
 
 export { cssClasses, strings, numbers };

package/table/table.scss

@@ -481,7 +481,8 @@ $module: #{$prefix}-table;
     }
 
     &-placeholder {
-        position: relative;
+        position: sticky;
+        left: 0px;
         z-index: 1;
         padding: #{$spacing-table-paddingY} #{$spacing-table-paddingX};
         color: $color-table_placeholder-text-default;

package/tabs/tabs.scss

@@ -134,14 +134,55 @@ $module: #{$prefix}-tabs;
                     outline-offset: $width-tabs-outline-offset;
                 }
             }
+            & > .#{$prefix}-button-disabled{
+                color: $color-tabs_tab-pane_arrow_disabled-text-default;
+                background-color: $color-tabs_tab-pane_arrow_disabled-bg-default;
+                &:hover{
+                    color: $color-tabs_tab-pane_arrow_disabled-text-hover;
+                    background-color: $color-tabs_tab-pane_arrow_disabled-bg-hover;
+                }
+            }
         }
 
         .#{$module}-bar-arrow-start {
             margin-right: $spacing-tabs_overflow_icon-marginRight;
+            & > .#{$prefix}-button{
+                color: $color-tabs_tab-pane_arrow-text-default;
+                padding: $spacing-tabs_tab-pane_arrow;
+                border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
+                background-color: $color-tabs_tab-pane_arrow-bg-default;
+                &:hover{
+                    background-color: var(--semi-color-fill-0);
+                    color: $color-tabs_tab-pane_arrow-text-hover;
+                    border-color: $color-tabs_tab-pane_arrow-border-hover;
+                }
+                &:active{
+                    background-color: var(--semi-color-fill-1);
+                    color: $color-tabs_tab-pane_arrow-text-active;
+                    border-color: $color-tabs_tab-pane_arrow-border-active;
+                }
+            }
+
         }
 
         .#{$module}-bar-arrow-end {
             margin-left: $spacing-tabs_overflow_icon-marginLeft;
+            & > .#{$prefix}-button{
+                color: $color-tabs_tab-pane_arrow-text-default;
+                padding: $spacing-tabs_tab-pane_arrow;
+                border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
+                background-color: $color-tabs_tab-pane_arrow-bg-default;
+                &:hover{
+                    background-color: var(--semi-color-fill-0);
+                    color: $color-tabs_tab-pane_arrow-text-hover;
+                    border-color: $color-tabs_tab-pane_arrow-border-hover;
+                }
+                &:active{
+                    background-color: var(--semi-color-fill-1);
+                    color: $color-tabs_tab-pane_arrow-text-active;
+                    border-color: $color-tabs_tab-pane_arrow-border-active;
+                }
+            }
         }
     }
 
@@ -160,13 +201,13 @@ $module: #{$prefix}-tabs;
     &-bar-line {
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
-            transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
+            transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的 color的transition
             transform:scale($transform_scale-tabs_tab_line-item);
 
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
                 transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
-                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的border-color 的 transition
+                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }

package/tabs/variables.scss

@@ -48,6 +48,23 @@ $color-tabs_tab-outline-focus: var(--semi-color-primary-light-active); // 页签
 
 $color-tabs_tab-pane-text-default: var(--semi-color-text-0); // 标签页内容文本颜色 - 默认
 
+$color-tabs_tab-pane_arrow-text-default: var(--semi-color-primary); // 滚动折叠箭头颜色 - 默认
+$color-tabs_tab-pane_arrow-border-default: transparent; // 滚动折叠箭头边框颜色 - 默认
+$color-tabs_tab-pane_arrow-bg-default:transparent; // 滚动折叠箭头背景色 - 默认
+
+$color-tabs_tab-pane_arrow-text-hover: var(--semi-color-primary); // 滚动折叠箭头颜色 - 悬浮
+$color-tabs_tab-pane_arrow-border-hover: transparent; // 滚动折叠箭头边框颜色 - 悬浮
+$color-tabs_tab-pane_arrow-bg-hover: var(--semi-color-fill-0); // 滚动折叠箭头背景色 - 悬浮
+
+$color-tabs_tab-pane_arrow-text-active: var(--semi-color-primary); // 滚动折叠箭头颜色 - 按下
+$color-tabs_tab-pane_arrow-border-active: transparent; // 滚动折叠箭头边框颜色 - 按下
+$color-tabs_tab-pane_arrow-bg-active: var(--semi-color-fill-1); // 滚动折叠箭头背景色 - 按下
+
+$color-tabs_tab-pane_arrow_disabled-bg-default: transparent;
+$color-tabs_tab-pane_arrow_disabled-bg-hover:  transparent;
+$color-tabs_tab-pane_arrow_disabled-text-default: var(--semi-color-disabled-text);
+$color-tabs_tab-pane_arrow_disabled-text-hover:  var(--semi-color-disabled-text);
+
 $font-tabs_tab-fontWeight: $font-weight-regular; // 页签文本字重 - 默认
 $font-tabs_tab_active-fontWeight: $font-weight-bold; // 页签文本字重 - 选中
 
@@ -60,6 +77,7 @@ $width-tabs_bar_card-border: $border-thickness-control; // 卡片式页签底部
 $width-tabs-outline: 2px; // 聚焦轮廓宽度
 $width-tabs-outline-offset: -2px; // 聚焦轮廓偏移宽度
 $width-tabs_bar_line-outline-offset: -1px; // 线条式页签聚焦轮廓偏移宽度
+$width-tabs_tab-pane_arrow-border:0px; // 滚动折叠箭头边框宽度
 
 $height-tabs_bar_extra_large: 50px; // 大尺寸页签高度
 $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺寸页签文字行高
@@ -67,6 +85,7 @@ $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺
 $height-tabs_bar_extra_small: 36px; // 小尺寸页签高度
 $font-tabs_bar_extra_small-lineHeight: $height-tabs_bar_extra_small; // 小尺寸页签文字行高
 
+$spacing-tabs_tab-pane_arrow: 8px; //滚动折叠箭头内边距
 $spacing-tabs_bar_extra-paddingY: 0px; // 附加操作垂直内边距
 $spacing-tabs_bar_extra-paddingX: 5px; // 附加操作水平内边距
 $spacing-tabs_tab_icon-marginRight: $spacing-tight; // 附加操作垂直内边距
@@ -119,3 +138,4 @@ $spacing-tabs_bar_button_tab-paddingX: $spacing-base-tight; // 按钮式页签
 $radius-tabs_tab_card: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0; // 卡片式页签四向圆角
 $radius-tabs_tab_card_left: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); // 垂直卡片式页签四向圆角
 $radius-tabs_tab_button: var(--semi-border-radius-small); // 按钮式页签圆角
+

package/tooltip/constants.ts

@@ -39,6 +39,7 @@ const numbers = {
     MOUSE_ENTER_DELAY: 50,
     MOUSE_LEAVE_DELAY: 50,
     SPACING: 8, // Values are consistent with spacing-tight in scss
+    MARGIN: 0,
 } as const;
 
 export { cssClasses, strings, numbers };