@douyinfe/semi-foundation 2.8.2 → 2.9.0

package/lib/cjs/transfer/transfer.css

@@ -103,7 +103,7 @@
 .semi-transfer-left-empty {
   height: 36px;
 }
-.semi-transfer-left .semi-spin {
+.semi-transfer-left > .semi-spin {
   width: 100%;
   flex-grow: 1;
 }

package/lib/cjs/transfer/transfer.scss

@@ -115,7 +115,7 @@ $module: #{$prefix}-transfer;
         &-empty {
             height: $height-transfer_left_empty;
         }
-        .#{$prefix}-spin {
+        >.#{$prefix}-spin {
             width: 100%;
             flex-grow: 1;
         }

package/lib/es/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/es/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/es/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/es/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/es/cascader/constants.js

@@ -5,7 +5,7 @@ const 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/es/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/es/divider/constants.js

@@ -0,0 +1,8 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: "".concat(BASE_CLASS_PREFIX)
+};
+const strings = {
+  LAYOUT: ['vertical', 'horizontal']
+};
+export { cssClasses, strings };

package/lib/es/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/es/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/es/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/es/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/es/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/es/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/es/slider/foundation.js

@@ -385,6 +385,16 @@ export default class SliderFoundation extends BaseFoundation {
     };
 
     this.checkAndUpdateIsInRenderTreeState = () => this._adapter.checkAndUpdateIsInRenderTreeState();
+
+    this.calculateOutputValue = (position, isMin) => {
+      const moveValue = this.transPosToValue(position, isMin);
+
+      if (moveValue === false) {
+        return undefined;
+      }
+
+      return this.outPutValue(moveValue);
+    };
     /**
      *
      *
@@ -500,7 +510,16 @@ export default class SliderFoundation extends BaseFoundation {
       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;
@@ -607,7 +626,22 @@ export default class SliderFoundation extends BaseFoundation {
       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
@@ -618,8 +652,9 @@ export default class SliderFoundation extends BaseFoundation {
 
     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/es/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/es/tagInput/constants.js

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

package/lib/es/tagInput/foundation.js

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

package/lib/es/transfer/transfer.css

@@ -103,7 +103,7 @@
 .semi-transfer-left-empty {
   height: 36px;
 }
-.semi-transfer-left .semi-spin {
+.semi-transfer-left > .semi-spin {
   width: 100%;
   flex-grow: 1;
 }

package/lib/es/transfer/transfer.scss

@@ -115,7 +115,7 @@ $module: #{$prefix}-transfer;
         &-empty {
             height: $height-transfer_left_empty;
         }
-        .#{$prefix}-spin {
+        >.#{$prefix}-spin {
             width: 100%;
             flex-grow: 1;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.8.2",
+    "version": "2.9.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.8.2",
+        "@douyinfe/semi-animation": "2.9.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "436e0a2bd28a1d641c26cd9a35269e05abe205cd",
+    "gitHead": "22b74e58077b068daa6b35bc8b32f47a064734a3",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/slider/foundation.ts

@@ -83,7 +83,7 @@ export interface SliderAdapter extends DefaultAdapter<SliderProps, SliderState>{
     getMinHandleEl: () => { current: HTMLElement };
     getMaxHandleEl: () => { 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;
@@ -406,6 +406,14 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
 
     checkAndUpdateIsInRenderTreeState = () => this._adapter.checkAndUpdateIsInRenderTreeState();
 
+    calculateOutputValue = (position: number, isMin: boolean): undefined | number | number[] => {
+        const moveValue = this.transPosToValue(position, isMin);
+        if (moveValue === false) {
+            return undefined;
+        }
+        return this.outPutValue(moveValue);
+    }
+
     /**
      *
      *
@@ -487,7 +495,16 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         let pagePos = vertical ? mousePos.y : mousePos.x;
         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;
     };
@@ -565,7 +582,22 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         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);
     };
 
     /**
@@ -573,8 +605,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
      *
      * @memberof SliderFoundation
      */
-    setHandlePos = (position: number, isMin: boolean, clickTrack = false) => {
-        this._adapter.onHandleMove(position, isMin, () => this._adapter.onHandleUpAfter(), clickTrack);
+    setHandlePos = (position: number, isMin: boolean, clickTrack = false, outPutValue: number | number[]) => {
+        this._adapter.onHandleMove(position, isMin, () => this._adapter.onHandleUpAfter(), clickTrack, outPutValue);
     };
 
     /**

package/tagInput/constants.ts

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

package/tagInput/foundation.ts

@@ -83,8 +83,11 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
             tagsArray
         } = this._adapter.getStates();
         const code = e.keyCode;
-        if (code === keyCode.ENTER && inputValue !== '') {
-            this._handleAddTags(e);
+        if (code === keyCode.ENTER) {
+            e.preventDefault(); // prevent trigger submit when using in form
+            if (inputValue !== '') {
+                this._handleAddTags(e);
+            }
         }
         const { length } = tagsArray;
         if (code === keyCode.BACKSPACE && inputValue === '' && length > 0) {

package/transfer/transfer.scss

@@ -115,7 +115,7 @@ $module: #{$prefix}-transfer;
         &-empty {
             height: $height-transfer_left_empty;
         }
-        .#{$prefix}-spin {
+        >.#{$prefix}-spin {
             width: 100%;
             flex-grow: 1;
         }