@douyinfe/semi-foundation 2.8.0 → 2.9.0-beta.0

package/avatar/avatar.scss

@@ -24,12 +24,7 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
     }
 
     &-content {
-        position: absolute;
         user-select: none;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        transform-origin: center;
     }
 
     &-extra-extra-small {
@@ -38,7 +33,7 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
 
         .#{$module}-content {
             transform-origin: center;
-            transform: scale(.8) translate(-62.5%, -62.5%);
+            transform: scale(0.8);
         }
 
         .#{$module}-label {
@@ -53,7 +48,7 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
 
         .#{$module}-content {
             transform-origin: center;
-            transform: scale(.8) translate(-62.5%, -62.5%);
+            transform: scale(0.8);
         }
 
         .#{$module}-label {

package/avatar/rtl.scss

@@ -4,22 +4,16 @@ $module: #{$prefix}-avatar;
 .#{$prefix}-portal-rtl {
     .#{$module} {
         direction: rtl;
-        
-        &-content {
-            left: auto;
-            right: 50%;
-            transform: translate(50%, -50%);
-        }
 
         &-extra-extra-small {
             .#{$module}-content {
-                transform: scale(.8) translate(62.5%, -62.5%);
+                transform: scale(0.8);
             }
         }
 
         &-extra-small {
             .#{$module}-content {
-                transform: scale(.8) translate(62.5%, -62.5%);
+                transform: scale(0.8);
             }
         }
 

package/cascader/constants.ts

@@ -7,7 +7,7 @@ const cssClasses = {
 
 const strings = {
     SIZE_SET: ['small', 'large', 'default'],
-    VALIDATE_STATUS: ['default', 'error', 'warning'] as const,
+    VALIDATE_STATUS: ['success', 'default', 'error', 'warning'] as const,
     IS_KEY: 'isKey',
     IS_VALUE: 'isValue',
     SHOW_NEXT_BY_CLICK: 'click',

package/datePicker/variables.scss

@@ -45,7 +45,7 @@ $spacing-datepicker_footer_cancel_button-marginRight: 12px; // 确认选择 foot
 $spacing-datepicker_footer_confirm_button-marginRight: 8px; // 确认选择 footer 确认按钮右外边距
 $spacing-datepicker_navigation-paddingY: $spacing-base-tight; // 年月切换 header 垂直内边距
 $spacing-datepicker_navigation-paddingX: $spacing-base; // 年月切换 header 水平内边距
-$spacing-datepicker_month-padding: $spacing-base; 
+$spacing-datepicker_month-padding: $spacing-base;
 $spacing-datepicker_switch_datetime-paddingTop: $spacing-base; // 日期时间切换顶部内边距
 $spacing-datepicker_switch_datetime-paddingBottom: $spacing-base; // 日期时间切换底部内边距
 $spacing-datepicker_switch_text-paddingLeft: $spacing-tight; // 日期时间切换左侧内边距
@@ -176,7 +176,7 @@ $fontSize-datepicker_insetInput_compact-fontSize: 12px;
 $spacing-datepicker_switch_compact-padding: 6px;
 $spacing-datepicker_day_compact-margin: ($width-datepicker_day_compact - $width-datepicker_day_main_compact) / 2;
 $spacing-datepicker_weeks_compact-padding: 10px;
-$spacing-datepicker_weeks_compact-paddingTop: $spacing-tight - 2;
+$spacing-datepicker_weeks_compact-paddingTop: $spacing-tight - 2px;
 $spacing-datepicker_weekday_compact-paddingLeft: 10px;
 $spacing-datepicker_weekday_compact-paddingRight: 10px;
 $spacing-datepicker_weekday_compact-paddingBottom: $spacing-tight;

package/divider/constants.ts

@@ -0,0 +1,16 @@
+import {
+    BASE_CLASS_PREFIX
+} from '../base/constants';
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX }`,
+} as const;
+
+const strings = {
+    LAYOUT: ['vertical', 'horizontal']
+} as const;
+
+export {
+    cssClasses,
+    strings
+};

package/divider/divider.scss

@@ -0,0 +1,80 @@
+@import './variables.scss';
+
+$module: #{$prefix}-divider;
+
+.#{$module} {
+    margin: $spacing-divider_horizontal-marginTop $spacing-divider_horizontal-marginRight $spacing-divider_horizontal-marginBottom $spacing-divider_horizontal-marginLeft;
+    border-bottom: $width-divider-border solid  $color-divider_border-color;
+    color: $color-divider_text-default;
+    box-sizing: border-box;
+
+    &-dashed {
+        border-bottom-style: dashed;
+    }
+
+    &-horizontal {
+        width: 100%;
+        display: flex;
+    }
+
+    &-vertical {
+        border-bottom: 0;
+        display: inline-block;
+        margin: $spacing-divider_vertical-marginTop $spacing-divider_vertical-marginRight $spacing-divider_vertical-marginBottom $spacing-divider_vertical-marginLeft;
+        border-left: $width-divider-border solid  $color-divider_border-color;
+        height: $height-divider_vertical;
+        vertical-align: middle;
+    }
+
+    &-with-text {
+        display: flex;
+        border-bottom: 0;
+        white-space: nowrap;
+        align-items: center;
+
+        .#{$module}_inner-text {
+            font-weight: $font-divider_text-weight;
+            padding: $spacing-divider_inner-text-paddingTop $spacing-divider_inner-text-paddingRight $spacing-divider_inner-text-paddingBottom $spacing-divider_inner-text-paddingLeft;
+            display: inline-block;
+        }
+
+
+        &::before,
+        &::after {
+            content: "";
+            width: 50%;
+            border-bottom: $width-divider-border solid  $color-divider_border-color;
+        }
+
+        &-left {
+            &::before {
+                width: $width-divider_inner_text_left_line;
+            }
+
+            &::after {
+                flex: 1;
+            }
+        }
+
+        &-right {
+            &::before {
+              flex: 1;
+            }
+
+            &::after {
+                width: $width-divider_inner_text_right_line;
+            }
+        }
+    }
+}
+
+.#{$module}-dashed {
+    &::before,
+    &::after {
+        border-bottom: $width-divider-border dashed  $color-divider_border-color;
+    }
+}
+
+.#{$module}-vertical.#{$module}-dashed {
+    border-left: $width-divider-border dashed  $color-divider_border-color;
+}

package/divider/variables.scss

@@ -0,0 +1,25 @@
+$spacing-divider_horizontal-marginLeft: 0px; // 水平模式左间距
+$spacing-divider_horizontal-marginRight: 0px; // 水平模式右间距
+$spacing-divider_horizontal-marginTop: 1px;  // 水平模式上间距
+$spacing-divider_horizontal-marginBottom: 1px; // 水平模式下间距
+$spacing-divider_vertical-marginLeft: 1px; //垂直模式左间距
+$spacing-divider_vertical-marginRight: 1px; //垂直模式右间距
+$spacing-divider_vertical-marginTop: 0px; //垂直模式上间距
+$spacing-divider_vertical-marginBottom: 0px; //垂直模式下间距
+$spacing-divider_inner_text-paddingLeft: 8px; //内容为纯文字时内容左间距
+$spacing-divider_inner_text-paddingRight: 8px; //内容为纯文字时内容右间距
+$spacing-divider_inner_text-paddingTop: 0px; //内容为纯文字时内容上间距
+$spacing-divider_inner_text-paddingBottom: 0px; //内容为纯文字时内容下间距
+
+
+$width-divider_inner_text_left_line: 40px; //左对齐文字时左间距宽度
+$width-divider_inner_text_right_line: 40px; //右对齐文字时右间距宽度
+$width-divider-border: 1px; // 分割线宽度
+$height-divider_vertical: 20px;// 垂直分割线高度
+
+$color-divider_border-color: var(--semi-color-border); // 分割线颜色
+$color-divider_text-default: var(--semi-color-text-0); // 标题颜色
+
+
+
+$font-divider_text-weight: $font-weight-bold; // 分割线文字字重

package/form/variables.scss

@@ -1,24 +1,24 @@
-$spacing-form_label-paddingTop: ($height-control-default - 20) / 2; // 水平布局表单标题顶部内边距
-$spacing-form_label_small-paddingTop: ($height-control-default - 24) / 2; // 水平布局 小尺寸表单标题顶部内边距
+$spacing-form_label-paddingTop: ($height-control-default - 20px) / 2; // 水平布局表单标题顶部内边距
+$spacing-form_label_small-paddingTop: ($height-control-default - 24px) / 2; // 水平布局 小尺寸表单标题顶部内边距
 
 $spacing-form_field_horizontal-paddingRight: $spacing-base; // 水平布局表单标题右侧内边距
-$spacing-form_field_group_horizontal-paddingRight: $spacing-base; // 水平布局表单组标题右侧内边距 
+$spacing-form_field_group_horizontal-paddingRight: $spacing-base; // 水平布局表单组标题右侧内边距
 
 $spacing-form_field_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单顶部内边距
 $spacing-form_field_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单底部内边距
 
-$spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单组顶部内边距 
-$spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距 
-$spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距 
-$spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距 
-$spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距 
-
-$spacing-form_label-paddingRight: $spacing-base; // 表单标题右侧内边距 
-$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单标题底部外边距 
-$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单标题图标左侧内边距 
-$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单标题必填标志左侧内边距 
-$spacing-form_label_posLeft-marginRight: 0; // 水平布局表单标题右侧外边距 
-$spacing-form_label_posLeft-marginBottom: 0; // 水平布局表单标题底部外边距 
+$spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单组顶部内边距
+$spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
+$spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
+$spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
+$spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距
+
+$spacing-form_label-paddingRight: $spacing-base; // 表单标题右侧内边距
+$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单标题底部外边距
+$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单标题图标左侧内边距
+$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单标题必填标志左侧内边距
+$spacing-form_label_posLeft-marginRight: 0; // 水平布局表单标题右侧外边距
+$spacing-form_label_posLeft-marginBottom: 0; // 水平布局表单标题底部外边距
 $spacing-form_label_posTop-paddingTop: $spacing-extra-tight; // 垂直布局表单标题顶部内边距
 $spacing-form_label_posTop-paddingBottom: $spacing-extra-tight; // 垂直布局表单标题底部内边距
 $spacing-form_label_extra_posMid-marginTop: $spacing-extra-tight; // 表单额外信息辅助文字顶部外边距 - 居中
@@ -41,4 +41,4 @@ $color-form_alertIcon-icon-default: var(--semi-color-warning); // 警告表单
 $color-form_message_error-text-default: var(--semi-color-danger); // 错误表单项图标颜色
 $color-form_section-text-default: var(--semi-color-text-0); // 表单分组标题文字颜色
 $color-form_section-border-default: var(--semi-color-border); // 表单分组描边颜色
-$width-form_section-border: $border-thickness-control; // 表单分组描边宽度
+$width-form_section-border: $border-thickness-control; // 表单分组描边宽度

package/input/variables.scss

@@ -56,9 +56,9 @@ $color-input_counter_danger-text-default: var(--semi-color-danger); // 多行文
 
 $color-input_group-border-default: var(--semi-color-border); // 输入框组合分割线颜色
 
-$height-input_large: $height-control-large - 2; // 输入框高度 & 行高 - 大尺寸
-$height-input_small: $height-control-small - 2; // 输入框高度 & 行高 - 小尺寸
-$height-input_default: $height-control-default - 2; // 输入框高度 & 行高 - 默认尺寸
+$height-input_large: $height-control-large - 2px; // 输入框高度 & 行高 - 大尺寸
+$height-input_small: $height-control-small - 2px; // 输入框高度 & 行高 - 小尺寸
+$height-input_default: $height-control-default - 2px; // 输入框高度 & 行高 - 默认尺寸
 $height-input_wrapper_large: $height-control-large;
 $height-input_wrapper_small: $height-control-small;
 $height-input_wrapper_default: $height-control-default;
@@ -72,7 +72,7 @@ $motion-scale_size-inactive: 1;
 
 $width-input_append-border: $border-thickness-control; // 后置标签描边宽度
 $width-input_prepend-border: $border-thickness-control; // 前置标签描边宽度
-$width-input_group_pseudo-border: $border-thickness-control; 
+$width-input_group_pseudo-border: $border-thickness-control;
 $width-input_wrapper-border: $border-thickness-control-focus; // 输入框描边宽度
 $width-input_wrapper_focus-border: $border-thickness-control-focus; // 输入框描边宽度 - 选中态
 

package/lib/cjs/avatar/avatar.css

@@ -20,12 +20,7 @@
   font-weight: 600;
 }
 .semi-avatar-content {
-  position: absolute;
   user-select: none;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  transform-origin: center;
 }
 .semi-avatar-extra-extra-small {
   width: 20px;
@@ -33,7 +28,7 @@
 }
 .semi-avatar-extra-extra-small .semi-avatar-content {
   transform-origin: center;
-  transform: scale(0.8) translate(-62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-avatar-extra-extra-small .semi-avatar-label {
   font-size: 10px;
@@ -45,7 +40,7 @@
 }
 .semi-avatar-extra-small .semi-avatar-content {
   transform-origin: center;
-  transform: scale(0.8) translate(-62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-avatar-extra-small .semi-avatar-label {
   font-size: 10px;
@@ -369,19 +364,13 @@
 .semi-portal-rtl .semi-avatar {
   direction: rtl;
 }
-.semi-rtl .semi-avatar-content,
-.semi-portal-rtl .semi-avatar-content {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, -50%);
-}
 .semi-rtl .semi-avatar-extra-extra-small .semi-avatar-content,
 .semi-portal-rtl .semi-avatar-extra-extra-small .semi-avatar-content {
-  transform: scale(0.8) translate(62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-rtl .semi-avatar-extra-small .semi-avatar-content,
 .semi-portal-rtl .semi-avatar-extra-small .semi-avatar-content {
-  transform: scale(0.8) translate(62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-rtl .semi-avatar-hover,
 .semi-portal-rtl .semi-avatar-hover {

package/lib/cjs/avatar/avatar.scss

@@ -24,12 +24,7 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
     }
 
     &-content {
-        position: absolute;
         user-select: none;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        transform-origin: center;
     }
 
     &-extra-extra-small {
@@ -38,7 +33,7 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
 
         .#{$module}-content {
             transform-origin: center;
-            transform: scale(.8) translate(-62.5%, -62.5%);
+            transform: scale(0.8);
         }
 
         .#{$module}-label {
@@ -53,7 +48,7 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
 
         .#{$module}-content {
             transform-origin: center;
-            transform: scale(.8) translate(-62.5%, -62.5%);
+            transform: scale(0.8);
         }
 
         .#{$module}-label {

package/lib/cjs/avatar/rtl.scss

@@ -4,22 +4,16 @@ $module: #{$prefix}-avatar;
 .#{$prefix}-portal-rtl {
     .#{$module} {
         direction: rtl;
-        
-        &-content {
-            left: auto;
-            right: 50%;
-            transform: translate(50%, -50%);
-        }
 
         &-extra-extra-small {
             .#{$module}-content {
-                transform: scale(.8) translate(62.5%, -62.5%);
+                transform: scale(0.8);
             }
         }
 
         &-extra-small {
             .#{$module}-content {
-                transform: scale(.8) translate(62.5%, -62.5%);
+                transform: scale(0.8);
             }
         }
 

package/lib/cjs/cascader/constants.d.ts

@@ -4,7 +4,7 @@ declare const cssClasses: {
 };
 declare const strings: {
     readonly SIZE_SET: readonly ["small", "large", "default"];
-    readonly VALIDATE_STATUS: readonly ["default", "error", "warning"];
+    readonly VALIDATE_STATUS: readonly ["success", "default", "error", "warning"];
     readonly IS_KEY: "isKey";
     readonly IS_VALUE: "isValue";
     readonly SHOW_NEXT_BY_CLICK: "click";

package/lib/cjs/cascader/constants.js

@@ -17,7 +17,7 @@ const cssClasses = {
 exports.cssClasses = cssClasses;
 const strings = {
   SIZE_SET: ['small', 'large', 'default'],
-  VALIDATE_STATUS: ['default', 'error', 'warning'],
+  VALIDATE_STATUS: ['success', 'default', 'error', 'warning'],
   IS_KEY: 'isKey',
   IS_VALUE: 'isValue',
   SHOW_NEXT_BY_CLICK: 'click',

package/lib/cjs/datePicker/variables.scss

@@ -45,7 +45,7 @@ $spacing-datepicker_footer_cancel_button-marginRight: 12px; // 确认选择 foot
 $spacing-datepicker_footer_confirm_button-marginRight: 8px; // 确认选择 footer 确认按钮右外边距
 $spacing-datepicker_navigation-paddingY: $spacing-base-tight; // 年月切换 header 垂直内边距
 $spacing-datepicker_navigation-paddingX: $spacing-base; // 年月切换 header 水平内边距
-$spacing-datepicker_month-padding: $spacing-base; 
+$spacing-datepicker_month-padding: $spacing-base;
 $spacing-datepicker_switch_datetime-paddingTop: $spacing-base; // 日期时间切换顶部内边距
 $spacing-datepicker_switch_datetime-paddingBottom: $spacing-base; // 日期时间切换底部内边距
 $spacing-datepicker_switch_text-paddingLeft: $spacing-tight; // 日期时间切换左侧内边距
@@ -176,7 +176,7 @@ $fontSize-datepicker_insetInput_compact-fontSize: 12px;
 $spacing-datepicker_switch_compact-padding: 6px;
 $spacing-datepicker_day_compact-margin: ($width-datepicker_day_compact - $width-datepicker_day_main_compact) / 2;
 $spacing-datepicker_weeks_compact-padding: 10px;
-$spacing-datepicker_weeks_compact-paddingTop: $spacing-tight - 2;
+$spacing-datepicker_weeks_compact-paddingTop: $spacing-tight - 2px;
 $spacing-datepicker_weekday_compact-paddingLeft: 10px;
 $spacing-datepicker_weekday_compact-paddingRight: 10px;
 $spacing-datepicker_weekday_compact-paddingBottom: $spacing-tight;

package/lib/cjs/divider/constants.d.ts

@@ -0,0 +1,7 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi";
+};
+declare const strings: {
+    readonly LAYOUT: readonly ["vertical", "horizontal"];
+};
+export { cssClasses, strings };

package/lib/cjs/divider/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX)
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  LAYOUT: ['vertical', 'horizontal']
+};
+exports.strings = strings;

package/lib/cjs/divider/divider.css

@@ -0,0 +1,60 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-divider {
+  margin: 1px 0px 1px 0px;
+  border-bottom: 1px solid var(--semi-color-border);
+  color: var(--semi-color-text-0);
+  box-sizing: border-box;
+}
+.semi-divider-dashed {
+  border-bottom-style: dashed;
+}
+.semi-divider-horizontal {
+  width: 100%;
+  display: flex;
+}
+.semi-divider-vertical {
+  border-bottom: 0;
+  display: inline-block;
+  margin: 0px 1px 0px 1px;
+  border-left: 1px solid var(--semi-color-border);
+  height: 20px;
+  vertical-align: middle;
+}
+.semi-divider-with-text {
+  display: flex;
+  border-bottom: 0;
+  white-space: nowrap;
+  align-items: center;
+}
+.semi-divider-with-text .semi-divider_inner-text {
+  font-weight: 600;
+  padding: 0px 8px 0px 8px;
+  display: inline-block;
+}
+.semi-divider-with-text::before, .semi-divider-with-text::after {
+  content: "";
+  width: 50%;
+  border-bottom: 1px solid var(--semi-color-border);
+}
+.semi-divider-with-text-left::before {
+  width: 40px;
+}
+.semi-divider-with-text-left::after {
+  flex: 1;
+}
+.semi-divider-with-text-right::before {
+  flex: 1;
+}
+.semi-divider-with-text-right::after {
+  width: 40px;
+}
+
+.semi-divider-dashed::before, .semi-divider-dashed::after {
+  border-bottom: 1px dashed var(--semi-color-border);
+}
+
+.semi-divider-vertical.semi-divider-dashed {
+  border-left: 1px dashed var(--semi-color-border);
+}

package/lib/cjs/divider/divider.scss

@@ -0,0 +1,80 @@
+@import './variables.scss';
+
+$module: #{$prefix}-divider;
+
+.#{$module} {
+    margin: $spacing-divider_horizontal-marginTop $spacing-divider_horizontal-marginRight $spacing-divider_horizontal-marginBottom $spacing-divider_horizontal-marginLeft;
+    border-bottom: $width-divider-border solid  $color-divider_border-color;
+    color: $color-divider_text-default;
+    box-sizing: border-box;
+
+    &-dashed {
+        border-bottom-style: dashed;
+    }
+
+    &-horizontal {
+        width: 100%;
+        display: flex;
+    }
+
+    &-vertical {
+        border-bottom: 0;
+        display: inline-block;
+        margin: $spacing-divider_vertical-marginTop $spacing-divider_vertical-marginRight $spacing-divider_vertical-marginBottom $spacing-divider_vertical-marginLeft;
+        border-left: $width-divider-border solid  $color-divider_border-color;
+        height: $height-divider_vertical;
+        vertical-align: middle;
+    }
+
+    &-with-text {
+        display: flex;
+        border-bottom: 0;
+        white-space: nowrap;
+        align-items: center;
+
+        .#{$module}_inner-text {
+            font-weight: $font-divider_text-weight;
+            padding: $spacing-divider_inner-text-paddingTop $spacing-divider_inner-text-paddingRight $spacing-divider_inner-text-paddingBottom $spacing-divider_inner-text-paddingLeft;
+            display: inline-block;
+        }
+
+
+        &::before,
+        &::after {
+            content: "";
+            width: 50%;
+            border-bottom: $width-divider-border solid  $color-divider_border-color;
+        }
+
+        &-left {
+            &::before {
+                width: $width-divider_inner_text_left_line;
+            }
+
+            &::after {
+                flex: 1;
+            }
+        }
+
+        &-right {
+            &::before {
+              flex: 1;
+            }
+
+            &::after {
+                width: $width-divider_inner_text_right_line;
+            }
+        }
+    }
+}
+
+.#{$module}-dashed {
+    &::before,
+    &::after {
+        border-bottom: $width-divider-border dashed  $color-divider_border-color;
+    }
+}
+
+.#{$module}-vertical.#{$module}-dashed {
+    border-left: $width-divider-border dashed  $color-divider_border-color;
+}

package/lib/cjs/divider/variables.scss

@@ -0,0 +1,25 @@
+$spacing-divider_horizontal-marginLeft: 0px; // 水平模式左间距
+$spacing-divider_horizontal-marginRight: 0px; // 水平模式右间距
+$spacing-divider_horizontal-marginTop: 1px;  // 水平模式上间距
+$spacing-divider_horizontal-marginBottom: 1px; // 水平模式下间距
+$spacing-divider_vertical-marginLeft: 1px; //垂直模式左间距
+$spacing-divider_vertical-marginRight: 1px; //垂直模式右间距
+$spacing-divider_vertical-marginTop: 0px; //垂直模式上间距
+$spacing-divider_vertical-marginBottom: 0px; //垂直模式下间距
+$spacing-divider_inner_text-paddingLeft: 8px; //内容为纯文字时内容左间距
+$spacing-divider_inner_text-paddingRight: 8px; //内容为纯文字时内容右间距
+$spacing-divider_inner_text-paddingTop: 0px; //内容为纯文字时内容上间距
+$spacing-divider_inner_text-paddingBottom: 0px; //内容为纯文字时内容下间距
+
+
+$width-divider_inner_text_left_line: 40px; //左对齐文字时左间距宽度
+$width-divider_inner_text_right_line: 40px; //右对齐文字时右间距宽度
+$width-divider-border: 1px; // 分割线宽度
+$height-divider_vertical: 20px;// 垂直分割线高度
+
+$color-divider_border-color: var(--semi-color-border); // 分割线颜色
+$color-divider_text-default: var(--semi-color-text-0); // 标题颜色
+
+
+
+$font-divider_text-weight: $font-weight-bold; // 分割线文字字重