@douyinfe/semi-foundation 2.8.2 → 2.9.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/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/form.scss

@@ -84,7 +84,6 @@ $rating: #{$prefix}-rating;
         vertical-align: middle;
         @include font-size-regular;
         flex-shrink: 0;
-        user-select: none;
 
         &-disabled {
             color: $color-form_label_disabled-text-default;

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/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; // 分割线文字字重

package/lib/cjs/form/form.css

@@ -47,7 +47,6 @@
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   flex-shrink: 0;
-  user-select: none;
 }
 .semi-form-field-label-disabled {
   color: var(--semi-color-disabled-text);

package/lib/cjs/form/form.scss

@@ -84,7 +84,6 @@ $rating: #{$prefix}-rating;
         vertical-align: middle;
         @include font-size-regular;
         flex-shrink: 0;
-        user-select: none;
 
         &-disabled {
             color: $color-form_label_disabled-text-default;

package/lib/cjs/slider/foundation.d.ts

@@ -74,7 +74,7 @@ export interface SliderAdapter extends DefaultAdapter<SliderProps, SliderState>
         current: HTMLElement;
     };
     onHandleDown: (e: any) => any;
-    onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback?: () => void, clickTrack?: boolean) => boolean | void;
+    onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback?: () => void, clickTrack?: boolean, outPutValue?: number | number[]) => boolean | void;
     setEventDefault: (e: any) => void;
     setStateVal: (state: keyof SliderState, value: any) => void;
     onHandleEnter: (position: SliderState['focusPos']) => void;
@@ -175,6 +175,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
     outPutValue: (inputValue: SliderProps['value']) => number | number[];
     handleDisabledChange: (disabled: SliderState['disabled']) => void;
     checkAndUpdateIsInRenderTreeState: () => boolean;
+    calculateOutputValue: (position: number, isMin: boolean) => undefined | number | number[];
     /**
      *
      *
@@ -195,7 +196,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
      *
      * @memberof SliderFoundation
      */
-    setHandlePos: (position: number, isMin: boolean, clickTrack?: boolean) => void;
+    setHandlePos: (position: number, isMin: boolean, clickTrack: boolean, outPutValue: number | number[]) => void;
     /**
      * Determine which slider should be moved currently
      *

package/lib/cjs/slider/foundation.js

@@ -400,6 +400,16 @@ class SliderFoundation extends _foundation.default {
     };
 
     this.checkAndUpdateIsInRenderTreeState = () => this._adapter.checkAndUpdateIsInRenderTreeState();
+
+    this.calculateOutputValue = (position, isMin) => {
+      const moveValue = this.transPosToValue(position, isMin);
+
+      if (moveValue === false) {
+        return undefined;
+      }
+
+      return this.outPutValue(moveValue);
+    };
     /**
      *
      *
@@ -515,7 +525,16 @@ class SliderFoundation extends _foundation.default {
       pagePos = pagePos - this._dragOffset;
 
       if (chooseMovePos === 'min' && dragging[0] || chooseMovePos === 'max' && dragging[1]) {
-        this._adapter.onHandleMove(pagePos, chooseMovePos === 'min');
+        const outPutValue = this.calculateOutputValue(pagePos, chooseMovePos === 'min');
+
+        if (outPutValue === undefined) {
+          return false;
+        }
+
+        this._adapter.notifyChange(outPutValue); // allow drag for controlled component, so no _isControlledComponent check
+
+
+        this._adapter.onHandleMove(pagePos, chooseMovePos === 'min', undefined, false, outPutValue);
       }
 
       return true;
@@ -622,7 +641,22 @@ class SliderFoundation extends _foundation.default {
       const mousePos = this.handleMousePos(e.pageX, e.pageY);
       const position = vertical ? mousePos.y : mousePos.x;
       const isMin = this.checkWhichHandle(position);
-      this.setHandlePos(position, isMin, true);
+      const outPutValue = this.calculateOutputValue(position, isMin);
+
+      if (outPutValue === undefined) {
+        return;
+      }
+
+      this._adapter.notifyChange(outPutValue); // check if is controlled component
+
+
+      if (this._isControlledComponent()) {
+        // only perform callback ops, skip UI update
+        return;
+      } // trigger UI state update
+
+
+      this.setHandlePos(position, isMin, true, outPutValue);
     };
     /**
      * Move the slider to the current click position
@@ -633,8 +667,9 @@ class SliderFoundation extends _foundation.default {
 
     this.setHandlePos = function (position, isMin) {
       let clickTrack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      let outPutValue = arguments.length > 3 ? arguments[3] : undefined;
 
-      _this._adapter.onHandleMove(position, isMin, () => _this._adapter.onHandleUpAfter(), clickTrack);
+      _this._adapter.onHandleMove(position, isMin, () => _this._adapter.onHandleUpAfter(), clickTrack, outPutValue);
     };
     /**
      * Determine which slider should be moved currently

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

@@ -3,6 +3,6 @@ declare const cssClasses: {
 };
 declare const strings: {
     readonly SIZE_SET: readonly ["large", "default", "small"];
-    readonly STATUS: readonly ["default", "error", "warning"];
+    readonly STATUS: readonly ["success", "default", "error", "warning"];
 };
 export { cssClasses, strings };

package/lib/cjs/tagInput/constants.js

@@ -16,6 +16,6 @@ const cssClasses = {
 exports.cssClasses = cssClasses;
 const strings = {
   SIZE_SET: ['large', 'default', 'small'],
-  STATUS: ["default", "error", "warning"]
+  STATUS: ["success", "default", "error", "warning"]
 };
 exports.strings = strings;

package/lib/cjs/tagInput/foundation.js

@@ -109,8 +109,12 @@ class TagInputFoundation extends _foundation.default {
 
       const code = e.keyCode;
 
-      if (code === _keyCode.default.ENTER && inputValue !== '') {
-        this._handleAddTags(e);
+      if (code === _keyCode.default.ENTER) {
+        e.preventDefault(); // prevent trigger submit when using in form
+
+        if (inputValue !== '') {
+          this._handleAddTags(e);
+        }
       }
 
       const {