@douyinfe/semi-foundation 2.63.0-beta.0 → 2.63.0

package/button/button.scss

@@ -243,13 +243,12 @@ $module: #{$prefix}-button;
 
     &-disabled {
         color: $color-button_disabled_solid-text-default;
+        cursor: not-allowed;
 
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             color: $color-button_disabled-text-hover;
         }
 
-        cursor: not-allowed;
-
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_disabled-text-default;

package/cascader/cascader.scss

@@ -283,13 +283,12 @@ $module: #{$prefix}-cascader;
     &-disabled {
         cursor: not-allowed;
         user-select: none;
+        background-color: $color-cascader_input_disabled-bg-default;
 
         .#{$module}-selection {
             cursor: not-allowed;
         }
 
-        background-color: $color-cascader_input_disabled-bg-default;
-
         &:hover {
             background-color: $color-cascader_input_disabled-bg-hover;
         }
@@ -316,6 +315,7 @@ $module: #{$prefix}-cascader;
 
     .#{$module}-option-empty {
         @include font-size-regular;
+        border-radius: $radius-cascader_option_empty;
         min-width: $width-cascader_option;
         color: $color-cascader_option_empty-text-default;
         margin: 0;
@@ -425,6 +425,7 @@ $module: #{$prefix}-cascader;
         color: $color-cascader_option_main-text-default;
         position: relative;
 
+
         &:hover {
             background-color: $color-cascader_option-bg-hover;
         }

package/cascader/variables.scss

@@ -1,4 +1,5 @@
 $radius-cascader: var(--semi-border-radius-small); // 级联选择菜单圆角
+$radius-cascader_option_empty: var(--semi-border-radius-medium); // 级联选择菜单空状态圆角
 
 $color-cascader_default-border-default: transparent; // 级联选择描边颜色 - 默认
 $color-cascader_default-border-hover: transparent; // 级联选择描边颜色 - 悬浮

package/checkbox/checkbox.scss

@@ -193,12 +193,11 @@ $module: #{$prefix}-checkbox;
 
         .#{$module}-inner {
             position: relative;
+            flex-shrink: 0;
 
             &-display {
                 background: $color-checkbox_cardType_inner-bg-default;
             }
-
-            flex-shrink: 0;
         }
 
         .#{$module}-inner-pureCardType {

package/datePicker/datePicker.scss

@@ -319,6 +319,7 @@ $module-list: #{$prefix}-scrolllist;
         @include font-size-small;
         font-weight: $font-weight-bold;
         color: $color-datepicker_day-text-default;
+        border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
 
         &-item {
             width: $width-datepicker_day;
@@ -327,8 +328,6 @@ $module-list: #{$prefix}-scrolllist;
             text-align: center;
             display: inline-block;
         }
-
-        border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
     }
 
     // 月面板-月周

package/dropdown/dropdown.scss

@@ -33,11 +33,12 @@ $module: #{$prefix}-dropdown;
         padding-bottom: $spacing-dropdown_title-paddingBottom;
         padding-left: $spacing-dropdown_title-paddingLeft;
         padding-right: $spacing-dropdown_title-paddingRight;
+        @include font-size-small;
+        cursor: default;
+        
         &-withTick {
             padding-left: $spacing-dropdown_title_withTick-paddingLeft;
         }
-        @include font-size-small;
-        cursor: default;
     }
     &-item {
         padding: $spacing-dropdown_item-paddingY $spacing-dropdown_item-paddingX;

package/form/form.scss

@@ -263,15 +263,16 @@ $rating: #{$prefix}-rating;
 
 .#{$form}-vertical {
     .#{$form}-field-group {
-        .#{$field} {
-            margin-top: 0;
-            margin-bottom: 0;
-        }
         margin-top: 0;
         margin-bottom: 0;
         padding-top: $spacing-form_field_group_vertical-paddingTop;
         padding-bottom: $spacing-form_field_group_vertical-paddingBottom;
         overflow: hidden;
+        
+        .#{$field} {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
     }
 }
 

package/form/interface.ts

@@ -87,6 +87,8 @@ export interface BaseFormApi<T extends object = any> {
     getFieldExist: <K extends keyof T>(field: K) => boolean;
     /** get formState of form */
     getFormState: () => FormState<T extends object ? T : object>;
+    /** get formProps of form */
+    getFormProps: (keys?: Array<string>) => ComponentProps;
     /** submit form manual */
     submitForm: () => void;
     /** reset form manual */

package/grid/grid.scss

@@ -4,9 +4,9 @@
 $module: #{$prefix};
 
 .#{$module}-row {
-    @include make-row();
     display: block;
     box-sizing: border-box;
+    @include make-row();
 }
 
 .#{$module}-row-flex {

package/input/input.scss

@@ -562,14 +562,13 @@ $module: #{$prefix}-input;
 
         background-color: $color-input_default-bg-default;
         color: $color-input_prefix-text-default;
+        @include font-size-regular;
+        flex-shrink: 0;
 
         &-icon,
         &-text {
             padding: $spacing-input_prepend-paddingY $spacing-input_prepend-paddingX;
         }
-
-        @include font-size-regular;
-        flex-shrink: 0;
     }
 
     &-append {
@@ -692,6 +691,8 @@ $module: #{$prefix}-input;
 
 .#{$module}-only_border{
     background: transparent;
+    border-color: $color_input-default-border-only_border-default;
+    
     &:hover{
         background: transparent;
         border-color: $color_input-default-border-only_border-hover;
@@ -699,7 +700,6 @@ $module: #{$prefix}-input;
     &:focus-within{
         background: transparent;
     }
-    border-color: $color_input-default-border-only_border-default;
 
 }
 

package/lib/cjs/button/button.scss

@@ -243,13 +243,12 @@ $module: #{$prefix}-button;
 
     &-disabled {
         color: $color-button_disabled_solid-text-default;
+        cursor: not-allowed;
 
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             color: $color-button_disabled-text-hover;
         }
 
-        cursor: not-allowed;
-
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_disabled-text-default;

package/lib/cjs/cascader/cascader.css

@@ -256,6 +256,7 @@
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  border-radius: var(--semi-border-radius-medium);
   min-width: 150px;
   color: var(--semi-color-disabled-text);
   margin: 0;

package/lib/cjs/cascader/cascader.scss

@@ -283,13 +283,12 @@ $module: #{$prefix}-cascader;
     &-disabled {
         cursor: not-allowed;
         user-select: none;
+        background-color: $color-cascader_input_disabled-bg-default;
 
         .#{$module}-selection {
             cursor: not-allowed;
         }
 
-        background-color: $color-cascader_input_disabled-bg-default;
-
         &:hover {
             background-color: $color-cascader_input_disabled-bg-hover;
         }
@@ -316,6 +315,7 @@ $module: #{$prefix}-cascader;
 
     .#{$module}-option-empty {
         @include font-size-regular;
+        border-radius: $radius-cascader_option_empty;
         min-width: $width-cascader_option;
         color: $color-cascader_option_empty-text-default;
         margin: 0;
@@ -425,6 +425,7 @@ $module: #{$prefix}-cascader;
         color: $color-cascader_option_main-text-default;
         position: relative;
 
+
         &:hover {
             background-color: $color-cascader_option-bg-hover;
         }

package/lib/cjs/cascader/variables.scss

@@ -1,4 +1,5 @@
 $radius-cascader: var(--semi-border-radius-small); // 级联选择菜单圆角
+$radius-cascader_option_empty: var(--semi-border-radius-medium); // 级联选择菜单空状态圆角
 
 $color-cascader_default-border-default: transparent; // 级联选择描边颜色 - 默认
 $color-cascader_default-border-hover: transparent; // 级联选择描边颜色 - 悬浮

package/lib/cjs/checkbox/checkbox.scss

@@ -193,12 +193,11 @@ $module: #{$prefix}-checkbox;
 
         .#{$module}-inner {
             position: relative;
+            flex-shrink: 0;
 
             &-display {
                 background: $color-checkbox_cardType_inner-bg-default;
             }
-
-            flex-shrink: 0;
         }
 
         .#{$module}-inner-pureCardType {

package/lib/cjs/datePicker/datePicker.scss

@@ -319,6 +319,7 @@ $module-list: #{$prefix}-scrolllist;
         @include font-size-small;
         font-weight: $font-weight-bold;
         color: $color-datepicker_day-text-default;
+        border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
 
         &-item {
             width: $width-datepicker_day;
@@ -327,8 +328,6 @@ $module-list: #{$prefix}-scrolllist;
             text-align: center;
             display: inline-block;
         }
-
-        border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
     }
 
     // 月面板-月周

package/lib/cjs/dropdown/dropdown.scss

@@ -33,11 +33,12 @@ $module: #{$prefix}-dropdown;
         padding-bottom: $spacing-dropdown_title-paddingBottom;
         padding-left: $spacing-dropdown_title-paddingLeft;
         padding-right: $spacing-dropdown_title-paddingRight;
+        @include font-size-small;
+        cursor: default;
+        
         &-withTick {
             padding-left: $spacing-dropdown_title_withTick-paddingLeft;
         }
-        @include font-size-small;
-        cursor: default;
     }
     &-item {
         padding: $spacing-dropdown_item-paddingY $spacing-dropdown_item-paddingX;

package/lib/cjs/form/form.scss

@@ -263,15 +263,16 @@ $rating: #{$prefix}-rating;
 
 .#{$form}-vertical {
     .#{$form}-field-group {
-        .#{$field} {
-            margin-top: 0;
-            margin-bottom: 0;
-        }
         margin-top: 0;
         margin-bottom: 0;
         padding-top: $spacing-form_field_group_vertical-paddingTop;
         padding-bottom: $spacing-form_field_group_vertical-paddingBottom;
         overflow: hidden;
+        
+        .#{$field} {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
     }
 }
 

package/lib/cjs/form/interface.d.ts

@@ -58,6 +58,8 @@ export interface BaseFormApi<T extends object = any> {
     getFieldExist: <K extends keyof T>(field: K) => boolean;
     /** get formState of form */
     getFormState: () => FormState<T extends object ? T : object>;
+    /** get formProps of form */
+    getFormProps: (keys?: Array<string>) => ComponentProps;
     /** submit form manual */
     submitForm: () => void;
     /** reset form manual */

package/lib/cjs/grid/grid.css

@@ -2,13 +2,13 @@
 /* sizing */
 /* spacing */
 .semi-row {
+  display: block;
+  box-sizing: border-box;
   position: relative;
   height: auto;
   margin-right: 0;
   margin-left: 0;
   zoom: 1;
-  display: block;
-  box-sizing: border-box;
 }
 .semi-row::before, .semi-row::after {
   display: table;

package/lib/cjs/grid/grid.scss

@@ -4,9 +4,9 @@
 $module: #{$prefix};
 
 .#{$module}-row {
-    @include make-row();
     display: block;
     box-sizing: border-box;
+    @include make-row();
 }
 
 .#{$module}-row-flex {

package/lib/cjs/input/input.scss

@@ -562,14 +562,13 @@ $module: #{$prefix}-input;
 
         background-color: $color-input_default-bg-default;
         color: $color-input_prefix-text-default;
+        @include font-size-regular;
+        flex-shrink: 0;
 
         &-icon,
         &-text {
             padding: $spacing-input_prepend-paddingY $spacing-input_prepend-paddingX;
         }
-
-        @include font-size-regular;
-        flex-shrink: 0;
     }
 
     &-append {
@@ -692,6 +691,8 @@ $module: #{$prefix}-input;
 
 .#{$module}-only_border{
     background: transparent;
+    border-color: $color_input-default-border-only_border-default;
+    
     &:hover{
         background: transparent;
         border-color: $color_input-default-border-only_border-hover;
@@ -699,7 +700,6 @@ $module: #{$prefix}-input;
     &:focus-within{
         background: transparent;
     }
-    border-color: $color_input-default-border-only_border-default;
 
 }
 

package/lib/cjs/navigation/navigation.css

@@ -401,11 +401,13 @@
   font-weight: 600;
   background-color: var(--semi-color-primary-light-default);
   color: var(--semi-color-text-0);
-  background-color: transparent;
 }
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
   color: var(--semi-color-primary);
 }
+.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected {
+  background-color: transparent;
+}
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected.semi-navigation-sub-title-disabled {
   background-color: transparent;
   color: var(--semi-color-primary-disabled);

package/lib/cjs/navigation/navigation.scss

@@ -438,7 +438,9 @@ $module: #{$prefix}-navigation;
                 &-selected {
                     font-weight: $font-navigation_sub_selected-fontWeight;
                     @include item-selected;
-                    background-color: $color-navigation_itemL1-bg-default;
+                    & {
+                        background-color: $color-navigation_itemL1-bg-default;
+                    }
 
                     &.#{$module}-sub-title-disabled {
                         @include item-disabled-selected;

package/lib/cjs/popconfirm/popconfirm.scss

@@ -46,10 +46,11 @@ $module: #{$prefix}-popconfirm;
     }
 
     &-body {
+        color: $color-popconfirm_body-text;
+
         &-withIcon {
             margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
         }
-        color: $color-popconfirm_body-text;
 
         & > p {
             margin: $spacing-popconfirm_body_p-margin;

package/lib/cjs/radio/radio.scss

@@ -13,17 +13,16 @@ $inner-width: $width-icon-medium;
     column-gap: $spacing-radio_addon-paddingLeft;
     transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
     border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
-
-    &.#{$module}-vertical {
-        display: block;
-    }
-
     min-height: $height-radio_inner_min;
     min-width: $width-radio_inner;
     cursor: pointer;
     vertical-align: bottom;
     text-align: left;
 
+    &.#{$module}-vertical {
+        display: block;
+    }
+
     input[type="checkbox"],
     input[type="radio"] {
         position: absolute;
@@ -114,10 +113,11 @@ $inner-width: $width-icon-medium;
         border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
         .#{$module}-inner {
+            flex-shrink: 0;
+
             &-display {
                 background: $color-radio_card-bg-default;
             }
-            flex-shrink: 0;
         }
 
         .#{$module}-addon {

package/lib/cjs/select/select.scss

@@ -185,12 +185,11 @@ $overflowList: #{$prefix}-overflow-list;
         }
 
         .#{$prefix}-tag {
+            @include select-tag-margin;
 
             &:nth-of-type(1) {
                 margin-left: 0;
             }
-
-            @include select-tag-margin;
         }
 
         .#{$prefix}-tag-group {

package/lib/cjs/steps/bacisSteps.scss

@@ -5,6 +5,9 @@ $basicType: #{$module}-basic;
 .#{$basicType} {
 
     &.#{$module}-horizontal {
+        display: flex;
+        flex-flow: row nowrap;
+
         &.#{$module}-hasline {
             .#{$item}-title {
 
@@ -21,9 +24,6 @@ $basicType: #{$module}-basic;
             }
         }
 
-        display: flex;
-        flex-flow: row nowrap;
-
         .#{$item} {
             padding-left: $spacing-steps_basic_item-paddingLeft;
 

package/lib/cjs/switch/switch.scss

@@ -116,11 +116,6 @@ $module: #{$prefix}-switch;
     }
 
     &-native-control {
-
-        &[type="checkbox"] {
-            width: inherit;
-            height: inherit;
-        }
         width: 100%;
         height: 100%;
         opacity: 0;
@@ -130,6 +125,11 @@ $module: #{$prefix}-switch;
         position: absolute;
         top: 0;
         left: 0;
+
+        &[type="checkbox"] {
+            width: inherit;
+            height: inherit;
+        }
     }
 
     &-checked-text,

package/lib/cjs/table/table.scss

@@ -66,12 +66,12 @@ $module: #{$prefix}-table;
 
     &-header {
         overflow: hidden;
+        scrollbar-base-color: transparent;
 
         &::-webkit-scrollbar {
             background-color: transparent;
             border-bottom: $width-table_header_border $border-table_base-borderStyle $color-table_th-border-default;
         }
-        scrollbar-base-color: transparent;
 
         &-sticky {
             position: sticky;

package/lib/cjs/tabs/tabs.scss

@@ -326,13 +326,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                 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
-                
+                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
+
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
 
-                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
-
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }
@@ -694,13 +693,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                 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
+                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
                 
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
 
-                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
-
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }

package/lib/cjs/tag/tag.scss

@@ -159,14 +159,13 @@ $types: "ghost", "solid", "light";
 
 .#{$module}-group {
     display: block;
+    height: auto;
 
     .#{$module} {
         margin-bottom: $spacing-tag_group-marginBottom;
         margin-right: $spacing-tag_group-marginRight;
     }
 
-    height: auto;
-
     &-max.#{$module}-group-small {
         height: ($height-tag_small + 2);
     }

package/lib/cjs/timePicker/utils/index.js

@@ -25,6 +25,7 @@ const parseToDate = function (input) {
   } else if (typeof input === 'number') {
     return new Date((0, _toNumber2.default)(input));
   } else if (typeof input === 'string') {
+    if (input === '') return undefined;
     let curDate = new Date();
     // console.log(input, formatToken);
     curDate = (0, _dateFns.parse)(input, formatToken, curDate, {

package/lib/cjs/tree/tree.scss

@@ -211,11 +211,12 @@ $module: #{$prefix}-tree;
 
         &-drag-over.#{$module}-option-draggable,
         &-drag-over.#{$module}-option-fullLabel-draggable {
+            border: $width-tree_option_draggable-border solid $color-tree_option_draggable_insert-border-default;
+
             .#{$module}-option-label {
                 border-top: 0;
                 border-bottom: 0;
             }
-            border: $width-tree_option_draggable-border solid $color-tree_option_draggable_insert-border-default;
 
             // selected solid background will overlap with drag over border-bottom
             // add an extra border to complement
@@ -397,11 +398,12 @@ $module: #{$prefix}-tree;
         &-spin-icon {
             display: flex;
             line-height: 0; // make the spin icon in the center
+            color: $color-tree_option_loading-icon-default;
+
             & svg {
                 width: $width-tree_spinIcon;
                 height: $width-tree_spinIcon;
             }
-            color: $color-tree_option_loading-icon-default;
         }
 
         &-selected {

package/lib/cjs/upload/upload.css

@@ -206,7 +206,7 @@
   width: 24px;
   flex-shrink: 0;
 }
-.semi-upload-file-card-icon-loading, .semi-upload-file-card-icon-error {
+.semi-upload-file-card-icon-loading, .semi-upload-file-card-icon-error.semi-icon {
   font-size: 11px;
   margin-right: 2px;
 }

package/lib/cjs/upload/upload.scss

@@ -109,6 +109,7 @@ $module: #{$prefix}-upload;
         &-title {
             @include font-size-small;
             color: $color-upload_assist-text;
+            margin-bottom: $spacing-upload_title-marginBottom;
 
             &-choosen {
                 margin-right: $spacing-upload_title_choosen-marginRight;
@@ -118,8 +119,6 @@ $module: #{$prefix}-upload;
                 cursor: pointer;
                 color: $color-upload_clear-text;
             }
-
-            margin-bottom: $spacing-upload_title-marginBottom;
         }
     }
 
@@ -247,7 +246,7 @@ $module: #{$prefix}-upload;
 
         &-icon {
             &-loading,
-            &-error {
+            &-error.#{$prefix}-icon {
                 font-size: $width-upload_file_card-icon;
                 margin-right: $spacing-upload_file_card_icon-marginRight;
             }