@douyinfe/semi-foundation 2.57.0 → 2.58.0-beta.0

package/checkbox/checkbox.scss

@@ -188,7 +188,7 @@ $module: #{$prefix}-checkbox;
         border-radius: $radius-checkbox_cardType;
         padding: $spacing-checkbox_cardType-paddingY $spacing-checkbox_cardType-paddingX;
         background: transparent;
-        border: $width-checkbox_cardType_checked-border solid transparent;
+        border: $width-checkbox_cardType_checked-border solid $color-checkbox_cardType-border-default;
 
 
         .#{$module}-inner {

package/checkbox/variables.scss

@@ -38,6 +38,8 @@ $color-checkbox_checked-bg-disabled: var(--semi-color-primary-disabled); // 选
 $color-checkbox_checked-icon-disabled: var(--semi-color-white); // 选框禁用态对勾颜色
 $color-checkbox_primary-outline-focus: var(--semi-color-primary-light-active); // 复选框轮廓-聚焦颜色
 
+$color-checkbox_cardType-border-default: transparent; // 卡片复选框默认边框颜色
+
 $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
@@ -66,4 +68,4 @@ $font-checkbox_cardType_addon-fontWeight: $font-weight-bold; // 卡片类型复
 $font-checkbox_cardType_addon-lineHeight: 20px; // 卡片类型复选框的 addon 的文字行高
 $font-checkbox_cardType_extra-size: $font-size-regular; // 卡片类型复选框的 extra 的文字大小
 $font-checkbox_cardType_extra-fontWeight: normal; // 卡片类型复选框的 extra 的 fontWeight
-$font-checkbox_cardType_extra-lineHeight: 20px; // 卡片类型复选框的 extra 的文字行高
+$font-checkbox_cardType_extra-lineHeight: 20px; // 卡片类型复选框的 extra 的文字行高

package/lib/cjs/checkbox/checkbox.scss

@@ -188,7 +188,7 @@ $module: #{$prefix}-checkbox;
         border-radius: $radius-checkbox_cardType;
         padding: $spacing-checkbox_cardType-paddingY $spacing-checkbox_cardType-paddingX;
         background: transparent;
-        border: $width-checkbox_cardType_checked-border solid transparent;
+        border: $width-checkbox_cardType_checked-border solid $color-checkbox_cardType-border-default;
 
 
         .#{$module}-inner {

package/lib/cjs/checkbox/variables.scss

@@ -38,6 +38,8 @@ $color-checkbox_checked-bg-disabled: var(--semi-color-primary-disabled); // 选
 $color-checkbox_checked-icon-disabled: var(--semi-color-white); // 选框禁用态对勾颜色
 $color-checkbox_primary-outline-focus: var(--semi-color-primary-light-active); // 复选框轮廓-聚焦颜色
 
+$color-checkbox_cardType-border-default: transparent; // 卡片复选框默认边框颜色
+
 $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
@@ -66,4 +68,4 @@ $font-checkbox_cardType_addon-fontWeight: $font-weight-bold; // 卡片类型复
 $font-checkbox_cardType_addon-lineHeight: 20px; // 卡片类型复选框的 addon 的文字行高
 $font-checkbox_cardType_extra-size: $font-size-regular; // 卡片类型复选框的 extra 的文字大小
 $font-checkbox_cardType_extra-fontWeight: normal; // 卡片类型复选框的 extra 的 fontWeight
-$font-checkbox_cardType_extra-lineHeight: 20px; // 卡片类型复选框的 extra 的文字行高
+$font-checkbox_cardType_extra-lineHeight: 20px; // 卡片类型复选框的 extra 的文字行高

package/lib/cjs/table/rtl.scss

@@ -5,6 +5,18 @@ $module: #{$prefix}-table;
         direction: rtl;
         text-align: right;
 
+        &-align-left {
+            .#{$module}-operate-wrapper {
+                justify-content: flex-end;
+            }
+        }
+
+        &-align-right {
+            .#{$module}-operate-wrapper {
+                justify-content: flex-start;
+            }
+        }
+
         &-thead {
             & > .#{$module}-row {
                 & > .#{$module}-row-head {
@@ -98,12 +110,12 @@ $module: #{$prefix}-table;
             }
 
             &-sorter {
-                margin-left: auto;
+                margin-left: 0;
                 margin-right: $spacing-table_column_sorter-marginLeft;
             }
 
             &-filter {
-                margin-left: auto;
+                margin-left: 0;
                 margin-right: $spacing-table_column_filter-marginLeft;
             }
         }

package/lib/cjs/table/table.css

@@ -508,6 +508,12 @@
   direction: rtl;
   text-align: right;
 }
+.semi-table-wrapper-rtl .semi-table-align-left .semi-table-operate-wrapper {
+  justify-content: flex-end;
+}
+.semi-table-wrapper-rtl .semi-table-align-right .semi-table-operate-wrapper {
+  justify-content: flex-start;
+}
 .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head {
   text-align: right;
 }
@@ -563,11 +569,11 @@
   margin-left: 0;
 }
 .semi-table-wrapper-rtl .semi-table .semi-table-column-sorter {
-  margin-left: auto;
+  margin-left: 0;
   margin-right: 4px;
 }
 .semi-table-wrapper-rtl .semi-table .semi-table-column-filter {
-  margin-left: auto;
+  margin-left: 0;
   margin-right: 4px;
 }
 .semi-table-wrapper-rtl .semi-table-bordered .semi-table-container {

package/lib/cjs/tagInput/tagInput.css

@@ -207,6 +207,16 @@
 .semi-tagInput-clearBtn-invisible {
   visibility: hidden;
 }
+.semi-tagInput-inset-label {
+  margin-right: 12px;
+  font-weight: 600;
+  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;
+  color: var(--semi-color-text-2);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
 .semi-tagInput-prefix, .semi-tagInput-suffix {
   display: flex;
   justify-content: center;
@@ -227,6 +237,9 @@
 .semi-tagInput-suffix-text {
   color: var(--semi-color-text-2);
 }
+.semi-tagInput-with-prefix .semi-input {
+  padding-left: 0;
+}
 .semi-tagInput-tag-content-wrapper {
   display: flex;
   align-items: center;

package/lib/cjs/tagInput/tagInput.scss

@@ -255,6 +255,15 @@ $module: #{$prefix}-tagInput;
         }
     }
 
+    &-inset-label {
+        margin-right: $spacing-tagInput_insetLabel-marginRight;
+        font-weight: $font-tagInput_insetLabel-fontWeight;
+        @include font-size-regular;
+        color: $color-tagInput_prefix-text-default;
+        flex-shrink: 0;
+        white-space: nowrap;
+    }
+
     &-prefix,
     &-suffix {
         @include all-center;
@@ -281,6 +290,12 @@ $module: #{$prefix}-tagInput;
         }
     }
 
+    &-with-prefix {
+        .#{$prefix}-input {
+            padding-left: 0;
+        }
+    }
+
     &-tag-content-wrapper {
         display: flex;
         align-items: center;

package/lib/cjs/tagInput/variables.scss

@@ -28,7 +28,7 @@ $color-tagInput_danger-border-hover: var(--semi-color-danger-light-hover); //
 $color-tagInput_danger-bg-focus: var(--semi-color-danger-light-default); // 危险标签输入框背景颜色 - 选中
 $color-tagInput_danger-border-focus: var(--semi-color-danger); // 危险标签输入框描边颜色 - 选中
 $color-tagInput_sortable_item_over-bg: var(--semi-color-primary); // 拖拽经过的元素前竖线背景色
-
+$color-tagInput_prefix-text-default: var(--semi-color-text-2); // 标签输入框 prefix 文字颜色
 $color-tagInput_handler-icon-default: var(--semi-color-text-2); // 可拖拽的标签拖拽按钮颜色
 
 $spacing-tagInput_small-Y: 1px; // 小尺寸标签输入框标签顶部外边距
@@ -37,6 +37,7 @@ $spacing-tagInput_large-Y: 3px; // 大尺寸标签输入框标签顶部外边距
 $spacing-tagInput_wrapper_n_paddingX: $spacing-tight; //标签输入框标签容器水平内边距
 $spacing-tagInput_drag_handler-marginRight: 4px; // 拖拽handler icon的右外边距 
 $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的左内边距
+$spacing-tagInput_insetLabel-marginRight: $spacing-base-tight; // Form容器中标签输入框内嵌Label的右边距
 
 $height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
 $height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
@@ -54,3 +55,5 @@ $width-tagInput_sortable_item_over: 2px; // 拖拽经过的元素前竖线宽度
 $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
 
 $z-tagInput_drag_item_move: 2000 !default; // 标签输入框中正在拖拽元素的z-index
+
+$font-tagInput_insetLabel-fontWeight: 600; // prefix 文字字重

package/lib/es/checkbox/checkbox.scss

@@ -188,7 +188,7 @@ $module: #{$prefix}-checkbox;
         border-radius: $radius-checkbox_cardType;
         padding: $spacing-checkbox_cardType-paddingY $spacing-checkbox_cardType-paddingX;
         background: transparent;
-        border: $width-checkbox_cardType_checked-border solid transparent;
+        border: $width-checkbox_cardType_checked-border solid $color-checkbox_cardType-border-default;
 
 
         .#{$module}-inner {

package/lib/es/checkbox/variables.scss

@@ -38,6 +38,8 @@ $color-checkbox_checked-bg-disabled: var(--semi-color-primary-disabled); // 选
 $color-checkbox_checked-icon-disabled: var(--semi-color-white); // 选框禁用态对勾颜色
 $color-checkbox_primary-outline-focus: var(--semi-color-primary-light-active); // 复选框轮廓-聚焦颜色
 
+$color-checkbox_cardType-border-default: transparent; // 卡片复选框默认边框颜色
+
 $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
@@ -66,4 +68,4 @@ $font-checkbox_cardType_addon-fontWeight: $font-weight-bold; // 卡片类型复
 $font-checkbox_cardType_addon-lineHeight: 20px; // 卡片类型复选框的 addon 的文字行高
 $font-checkbox_cardType_extra-size: $font-size-regular; // 卡片类型复选框的 extra 的文字大小
 $font-checkbox_cardType_extra-fontWeight: normal; // 卡片类型复选框的 extra 的 fontWeight
-$font-checkbox_cardType_extra-lineHeight: 20px; // 卡片类型复选框的 extra 的文字行高
+$font-checkbox_cardType_extra-lineHeight: 20px; // 卡片类型复选框的 extra 的文字行高

package/lib/es/table/rtl.scss

@@ -5,6 +5,18 @@ $module: #{$prefix}-table;
         direction: rtl;
         text-align: right;
 
+        &-align-left {
+            .#{$module}-operate-wrapper {
+                justify-content: flex-end;
+            }
+        }
+
+        &-align-right {
+            .#{$module}-operate-wrapper {
+                justify-content: flex-start;
+            }
+        }
+
         &-thead {
             & > .#{$module}-row {
                 & > .#{$module}-row-head {
@@ -98,12 +110,12 @@ $module: #{$prefix}-table;
             }
 
             &-sorter {
-                margin-left: auto;
+                margin-left: 0;
                 margin-right: $spacing-table_column_sorter-marginLeft;
             }
 
             &-filter {
-                margin-left: auto;
+                margin-left: 0;
                 margin-right: $spacing-table_column_filter-marginLeft;
             }
         }

package/lib/es/table/table.css

@@ -508,6 +508,12 @@
   direction: rtl;
   text-align: right;
 }
+.semi-table-wrapper-rtl .semi-table-align-left .semi-table-operate-wrapper {
+  justify-content: flex-end;
+}
+.semi-table-wrapper-rtl .semi-table-align-right .semi-table-operate-wrapper {
+  justify-content: flex-start;
+}
 .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head {
   text-align: right;
 }
@@ -563,11 +569,11 @@
   margin-left: 0;
 }
 .semi-table-wrapper-rtl .semi-table .semi-table-column-sorter {
-  margin-left: auto;
+  margin-left: 0;
   margin-right: 4px;
 }
 .semi-table-wrapper-rtl .semi-table .semi-table-column-filter {
-  margin-left: auto;
+  margin-left: 0;
   margin-right: 4px;
 }
 .semi-table-wrapper-rtl .semi-table-bordered .semi-table-container {

package/lib/es/tagInput/tagInput.css

@@ -207,6 +207,16 @@
 .semi-tagInput-clearBtn-invisible {
   visibility: hidden;
 }
+.semi-tagInput-inset-label {
+  margin-right: 12px;
+  font-weight: 600;
+  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;
+  color: var(--semi-color-text-2);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
 .semi-tagInput-prefix, .semi-tagInput-suffix {
   display: flex;
   justify-content: center;
@@ -227,6 +237,9 @@
 .semi-tagInput-suffix-text {
   color: var(--semi-color-text-2);
 }
+.semi-tagInput-with-prefix .semi-input {
+  padding-left: 0;
+}
 .semi-tagInput-tag-content-wrapper {
   display: flex;
   align-items: center;

package/lib/es/tagInput/tagInput.scss

@@ -255,6 +255,15 @@ $module: #{$prefix}-tagInput;
         }
     }
 
+    &-inset-label {
+        margin-right: $spacing-tagInput_insetLabel-marginRight;
+        font-weight: $font-tagInput_insetLabel-fontWeight;
+        @include font-size-regular;
+        color: $color-tagInput_prefix-text-default;
+        flex-shrink: 0;
+        white-space: nowrap;
+    }
+
     &-prefix,
     &-suffix {
         @include all-center;
@@ -281,6 +290,12 @@ $module: #{$prefix}-tagInput;
         }
     }
 
+    &-with-prefix {
+        .#{$prefix}-input {
+            padding-left: 0;
+        }
+    }
+
     &-tag-content-wrapper {
         display: flex;
         align-items: center;

package/lib/es/tagInput/variables.scss

@@ -28,7 +28,7 @@ $color-tagInput_danger-border-hover: var(--semi-color-danger-light-hover); //
 $color-tagInput_danger-bg-focus: var(--semi-color-danger-light-default); // 危险标签输入框背景颜色 - 选中
 $color-tagInput_danger-border-focus: var(--semi-color-danger); // 危险标签输入框描边颜色 - 选中
 $color-tagInput_sortable_item_over-bg: var(--semi-color-primary); // 拖拽经过的元素前竖线背景色
-
+$color-tagInput_prefix-text-default: var(--semi-color-text-2); // 标签输入框 prefix 文字颜色
 $color-tagInput_handler-icon-default: var(--semi-color-text-2); // 可拖拽的标签拖拽按钮颜色
 
 $spacing-tagInput_small-Y: 1px; // 小尺寸标签输入框标签顶部外边距
@@ -37,6 +37,7 @@ $spacing-tagInput_large-Y: 3px; // 大尺寸标签输入框标签顶部外边距
 $spacing-tagInput_wrapper_n_paddingX: $spacing-tight; //标签输入框标签容器水平内边距
 $spacing-tagInput_drag_handler-marginRight: 4px; // 拖拽handler icon的右外边距 
 $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的左内边距
+$spacing-tagInput_insetLabel-marginRight: $spacing-base-tight; // Form容器中标签输入框内嵌Label的右边距
 
 $height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
 $height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
@@ -54,3 +55,5 @@ $width-tagInput_sortable_item_over: 2px; // 拖拽经过的元素前竖线宽度
 $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
 
 $z-tagInput_drag_item_move: 2000 !default; // 标签输入框中正在拖拽元素的z-index
+
+$font-tagInput_insetLabel-fontWeight: 600; // prefix 文字字重

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.57.0",
+    "version": "2.58.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.57.0",
+        "@douyinfe/semi-animation": "2.58.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "57571d206421c8044245b6eaf70b49cce034f939",
+    "gitHead": "bd0c5bf8924d1e971746ba88f83c2c8857d307f7",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/table/rtl.scss

@@ -5,6 +5,18 @@ $module: #{$prefix}-table;
         direction: rtl;
         text-align: right;
 
+        &-align-left {
+            .#{$module}-operate-wrapper {
+                justify-content: flex-end;
+            }
+        }
+
+        &-align-right {
+            .#{$module}-operate-wrapper {
+                justify-content: flex-start;
+            }
+        }
+
         &-thead {
             & > .#{$module}-row {
                 & > .#{$module}-row-head {
@@ -98,12 +110,12 @@ $module: #{$prefix}-table;
             }
 
             &-sorter {
-                margin-left: auto;
+                margin-left: 0;
                 margin-right: $spacing-table_column_sorter-marginLeft;
             }
 
             &-filter {
-                margin-left: auto;
+                margin-left: 0;
                 margin-right: $spacing-table_column_filter-marginLeft;
             }
         }

package/tagInput/tagInput.scss

@@ -255,6 +255,15 @@ $module: #{$prefix}-tagInput;
         }
     }
 
+    &-inset-label {
+        margin-right: $spacing-tagInput_insetLabel-marginRight;
+        font-weight: $font-tagInput_insetLabel-fontWeight;
+        @include font-size-regular;
+        color: $color-tagInput_prefix-text-default;
+        flex-shrink: 0;
+        white-space: nowrap;
+    }
+
     &-prefix,
     &-suffix {
         @include all-center;
@@ -281,6 +290,12 @@ $module: #{$prefix}-tagInput;
         }
     }
 
+    &-with-prefix {
+        .#{$prefix}-input {
+            padding-left: 0;
+        }
+    }
+
     &-tag-content-wrapper {
         display: flex;
         align-items: center;

package/tagInput/variables.scss

@@ -28,7 +28,7 @@ $color-tagInput_danger-border-hover: var(--semi-color-danger-light-hover); //
 $color-tagInput_danger-bg-focus: var(--semi-color-danger-light-default); // 危险标签输入框背景颜色 - 选中
 $color-tagInput_danger-border-focus: var(--semi-color-danger); // 危险标签输入框描边颜色 - 选中
 $color-tagInput_sortable_item_over-bg: var(--semi-color-primary); // 拖拽经过的元素前竖线背景色
-
+$color-tagInput_prefix-text-default: var(--semi-color-text-2); // 标签输入框 prefix 文字颜色
 $color-tagInput_handler-icon-default: var(--semi-color-text-2); // 可拖拽的标签拖拽按钮颜色
 
 $spacing-tagInput_small-Y: 1px; // 小尺寸标签输入框标签顶部外边距
@@ -37,6 +37,7 @@ $spacing-tagInput_large-Y: 3px; // 大尺寸标签输入框标签顶部外边距
 $spacing-tagInput_wrapper_n_paddingX: $spacing-tight; //标签输入框标签容器水平内边距
 $spacing-tagInput_drag_handler-marginRight: 4px; // 拖拽handler icon的右外边距 
 $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的左内边距
+$spacing-tagInput_insetLabel-marginRight: $spacing-base-tight; // Form容器中标签输入框内嵌Label的右边距
 
 $height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
 $height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
@@ -54,3 +55,5 @@ $width-tagInput_sortable_item_over: 2px; // 拖拽经过的元素前竖线宽度
 $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
 
 $z-tagInput_drag_item_move: 2000 !default; // 标签输入框中正在拖拽元素的z-index
+
+$font-tagInput_insetLabel-fontWeight: 600; // prefix 文字字重