@douyinfe/semi-foundation 2.24.3 → 2.25.0-alpha.0

package/lib/es/input/foundation.js

@@ -6,70 +6,57 @@ import _noop from "lodash/noop";
 import BaseFoundation from '../base/foundation';
 import { strings } from './constants';
 import { ENTER_KEY } from './../utils/keyCode';
-
 class InputFoundation extends BaseFoundation {
-  constructor(adapter) {
-    super(Object.assign(Object.assign({}, InputFoundation.inputDefaultAdapter), adapter));
-  }
-
   static get inputDefaultAdapter() {
     return {
       notifyChange: _noop,
-      setValue: _noop // toggleAllowClear: noop,
-
+      setValue: _noop
+      // toggleAllowClear: noop,
     };
   }
 
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, InputFoundation.inputDefaultAdapter), adapter));
+  }
   init() {
     this._setInitValue();
   }
-
   destroy() {
     if (this._timer) {
       clearTimeout(this._timer);
       this._timer = null;
     }
-  } // eslint-disable-next-line
-
-
+  }
   setDisable() {}
-
   _setInitValue() {
     const {
       defaultValue,
       value
     } = this.getProps();
     let v = defaultValue;
-
     if (this._isControlledComponent()) {
       v = value;
     }
-
-    this._adapter.setValue(v); // this.checkAllowClear(v);
-
+    this._adapter.setValue(v);
+    // this.checkAllowClear(v);
   }
 
   setValue(value) {
     this._adapter.setValue(value);
   }
-
   handleChange(value, e) {
     const {
       maxLength,
       minLength,
       getValueLength
     } = this._adapter.getProps();
-
     let nextValue = value;
-
     if (maxLength && _isFunction(getValueLength)) {
       nextValue = this.handleVisibleMaxLength(value);
     }
-
     if (minLength && _isFunction(getValueLength)) {
       this.handleVisibleMinLength(nextValue);
     }
-
     if (this._isControlledComponent()) {
       /**
        * If it is a controlled component, directly notify the caller of the modified value.
@@ -79,9 +66,8 @@ class InputFoundation extends BaseFoundation {
       this._adapter.notifyChange(nextValue, e);
     } else {
       this._adapter.setValue(nextValue);
-
-      this._adapter.notifyChange(nextValue, e); // this.checkAllowClear(value);
-
+      this._adapter.notifyChange(nextValue, e);
+      // this.checkAllowClear(value);
     }
   }
   /**
@@ -89,21 +75,16 @@ class InputFoundation extends BaseFoundation {
    * Controlled mode is not checked
    * @param {String} value
    */
-
-
   handleVisibleMinLength(value) {
     const {
       minLength,
       getValueLength
     } = this._adapter.getProps();
-
     const {
       minLength: stateMinLength
     } = this._adapter.getStates();
-
     if (_isNumber(minLength) && minLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
       const valueLength = getValueLength(value);
-
       if (valueLength < minLength) {
         const newMinLength = value.length + (minLength - valueLength);
         newMinLength !== stateMinLength && this._adapter.setMinLength(newMinLength);
@@ -117,19 +98,14 @@ class InputFoundation extends BaseFoundation {
    * Controlled mode is not checked
    * @param {String} value
    */
-
-
   handleVisibleMaxLength(value) {
     const {
       maxLength,
       getValueLength
     } = this._adapter.getProps();
-
     if (_isNumber(maxLength) && maxLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
       const valueLength = getValueLength(value);
-
       if (valueLength > maxLength) {
-        // eslint-disable-next-line max-len
         console.warn('[Semi Input] The input character is truncated because the input length exceeds the maximum length limit');
         const truncatedValue = this.handleTruncateValue(value, maxLength);
         return truncatedValue;
@@ -144,36 +120,29 @@ class InputFoundation extends BaseFoundation {
    * @param {Number} maxLength
    * @returns {String}
    */
-
-
   handleTruncateValue(value, maxLength) {
     const {
       getValueLength
     } = this._adapter.getProps();
-
     if (_isFunction(getValueLength)) {
       let truncatedValue = '';
-
       for (let i = 1, len = value.length; i <= len; i++) {
         const currentValue = value.slice(0, i);
-
         if (getValueLength(currentValue) > maxLength) {
           return truncatedValue;
         } else {
           truncatedValue = currentValue;
         }
       }
-
       return truncatedValue;
     } else {
       return value.slice(0, maxLength);
     }
   }
-
   handleClear(e) {
     let eventObj = e;
-    const value = ''; // let input = this._adapter.getInput();
-
+    const value = '';
+    // let input = this._adapter.getInput();
     if (this._isControlledComponent('value')) {
       this._adapter.setState({
         isFocus: false
@@ -184,18 +153,12 @@ class InputFoundation extends BaseFoundation {
         isFocus: false
       });
     }
-
     if (!eventObj || typeof eventObj !== 'object') {
       eventObj = {};
     }
-
     _set(eventObj, strings.CLEARBTN_CLICKED_EVENT_FLAG, true); // this is useful for DateInput
-
-
     this._adapter.notifyChange(value, eventObj);
-
     this._adapter.notifyClear(eventObj);
-
     if (eventObj) {
       // When input is in popover and popover needs to judge clickOutSide, such as TreeSelect
       // If the click event bubbles up, it will mistakenly trigger clickOutSide's judgment.
@@ -208,29 +171,22 @@ class InputFoundation extends BaseFoundation {
    * trigger when click input wrapper
    * @param {Event} e
    */
-
-
   handleClick(e) {
     const {
       disabled
     } = this._adapter.getProps();
-
     const {
       isFocus
     } = this._adapter.getStates();
-
     if (disabled || isFocus) {
       return;
-    } // do not handle bubbling up events
-
-
+    }
+    // do not handle bubbling up events
     if (this._adapter.isEventTarget(e)) {
       this._adapter.focusInput();
-
       this._adapter.toggleFocusing(true);
     }
   }
-
   handleModeChange(mode) {
     if (mode === 'password') {
       this._adapter.setEyeClosed(true);
@@ -238,106 +194,79 @@ class InputFoundation extends BaseFoundation {
       this._adapter.setEyeClosed(false);
     }
   }
-
   handleClickEye(e) {
     const eyeClosed = this._adapter.getState('eyeClosed');
-
     this._adapter.focusInput();
-
     this._adapter.toggleFocusing(true);
-
     this._adapter.setEyeClosed(!eyeClosed);
   }
-
   handleInputType(type) {
     const mode = this._adapter.getProp('mode');
-
     const eyeClosed = this._adapter.getState('eyeClosed');
-
     if (mode === 'password') {
       return eyeClosed ? 'password' : 'text';
     }
-
     return type;
   }
-
   handleMouseDown(e) {
     e.preventDefault();
   }
-
   handleMouseUp(e) {
     e.preventDefault();
   }
-
   handleBlur(e) {
     const {
       value
     } = this.getStates();
-
     this._adapter.toggleFocusing(false);
-
     this._adapter.notifyBlur(value, e);
   }
-
   handleFocus(e) {
     const {
       value
     } = this.getStates();
-
-    this._adapter.toggleFocusing(true); // this.checkAllowClear(this.getState('value'), true);
-
-
+    this._adapter.toggleFocusing(true);
+    // this.checkAllowClear(this.getState('value'), true);
     this._adapter.notifyFocus(value, e);
   }
-
   handleInput(e) {
     this._adapter.notifyInput(e);
   }
-
   handleKeyDown(e) {
     this._adapter.notifyKeyDown(e);
   }
-
   handleKeyUp(e) {
     this._adapter.notifyKeyUp(e);
   }
-
   handleKeyPress(e) {
     this._adapter.notifyKeyPress(e);
-
     if (e.key === ENTER_KEY) {
       this._adapter.notifyEnterPress(e);
     }
   }
-
   isAllowClear() {
     const {
       value,
       isFocus,
       isHovering
     } = this._adapter.getStates();
-
     const {
       showClear,
-      disabled
+      disabled,
+      showClearIgnoreDisabled
     } = this._adapter.getProps();
-
-    const allowClear = value && showClear && !disabled && (isFocus || isHovering);
+    const allowClear = value && showClear && (!disabled || showClearIgnoreDisabled) && (isFocus || isHovering);
     return allowClear;
   }
-
   handleClickPrefixOrSuffix(e) {
     const {
       disabled
     } = this._adapter.getProps();
-
     const {
       isFocus
     } = this._adapter.getStates();
-
     if (!disabled && !isFocus) {
       this._adapter.focusInput();
-
       this._adapter.toggleFocusing(true);
     }
   }
@@ -345,8 +274,6 @@ class InputFoundation extends BaseFoundation {
    * Blocking mousedown events prevents input from losing focus
    * @param {Event} e
    */
-
-
   handlePreventMouseDown(e) {
     if (e && _isFunction(e.preventDefault)) {
       e.preventDefault();
@@ -355,8 +282,6 @@ class InputFoundation extends BaseFoundation {
   /**
    * A11y: simulate password button click
    */
-
-
   handleModeEnterPress(e) {
     // trigger by Enter or Space key
     if (['Enter', ' '].includes(e === null || e === void 0 ? void 0 : e.key)) {
@@ -364,7 +289,5 @@ class InputFoundation extends BaseFoundation {
       this.handleClickEye(e);
     }
   }
-
 }
-
 export default InputFoundation;

package/lib/es/input/input.css

@@ -179,7 +179,6 @@
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input:not(:last-child) {
   border-right-style: none;
-  border-radius: 0;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend, .semi-input-wrapper.semi-input-wrapper__with-append {
   display: inline-flex;
@@ -345,6 +344,9 @@
 .semi-input[type=password]::-ms-reveal, .semi-input[type=password]::-ms-clear {
   display: none;
 }
+.semi-input[type=search]::-webkit-search-cancel-button {
+  display: none;
+}
 .semi-input::placeholder {
   color: var(--semi-color-text-2);
 }
@@ -451,26 +453,31 @@
   flex-wrap: wrap;
 }
 .semi-input-group .semi-select,
+.semi-input-group .semi-tagInput,
 .semi-input-group .semi-cascader,
 .semi-input-group .semi-tree-select, .semi-input-group > .semi-input-wrapper {
   border-radius: 0;
 }
 .semi-input-group .semi-select:first-child,
+.semi-input-group .semi-tagInput:first-child,
 .semi-input-group .semi-cascader:first-child,
 .semi-input-group .semi-tree-select:first-child, .semi-input-group > .semi-input-wrapper:first-child {
   border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
 }
 .semi-input-group .semi-select:last-child,
+.semi-input-group .semi-tagInput:last-child,
 .semi-input-group .semi-cascader:last-child,
 .semi-input-group .semi-tree-select:last-child, .semi-input-group > .semi-input-wrapper:last-child {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
 }
 .semi-input-group .semi-select:not(:last-child),
+.semi-input-group .semi-tagInput:not(:last-child),
 .semi-input-group .semi-cascader:not(:last-child),
 .semi-input-group .semi-tree-select:not(:last-child), .semi-input-group > .semi-input-wrapper:not(:last-child) {
   position: relative;
 }
 .semi-input-group .semi-select:not(:last-child)::after,
+.semi-input-group .semi-tagInput:not(:last-child)::after,
 .semi-input-group .semi-cascader:not(:last-child)::after,
 .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
   content: "";
@@ -481,13 +488,18 @@
   top: 1px;
   bottom: 1px;
 }
+.semi-input-group .semi-select {
+  overflow-y: visible;
+}
 .semi-input-group .semi-input-number,
 .semi-input-group .semi-datepicker,
+.semi-input-group .semi-timepicker,
 .semi-input-group .semi-autocomplete {
   border-radius: 0;
 }
 .semi-input-group .semi-input-number .semi-datepicker-range-input,
 .semi-input-group .semi-datepicker .semi-datepicker-range-input,
+.semi-input-group .semi-timepicker .semi-datepicker-range-input,
 .semi-input-group .semi-autocomplete .semi-datepicker-range-input {
   border-radius: 0;
 }
@@ -495,6 +507,8 @@
 .semi-input-group .semi-input-number:first-child .semi-datepicker-range-input,
 .semi-input-group .semi-datepicker:first-child .semi-input-wrapper,
 .semi-input-group .semi-datepicker:first-child .semi-datepicker-range-input,
+.semi-input-group .semi-timepicker:first-child .semi-input-wrapper,
+.semi-input-group .semi-timepicker:first-child .semi-datepicker-range-input,
 .semi-input-group .semi-autocomplete:first-child .semi-input-wrapper,
 .semi-input-group .semi-autocomplete:first-child .semi-datepicker-range-input {
   border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
@@ -503,17 +517,21 @@
 .semi-input-group .semi-input-number:last-child .semi-datepicker-range-input,
 .semi-input-group .semi-datepicker:last-child .semi-input-wrapper,
 .semi-input-group .semi-datepicker:last-child .semi-datepicker-range-input,
+.semi-input-group .semi-timepicker:last-child .semi-input-wrapper,
+.semi-input-group .semi-timepicker:last-child .semi-datepicker-range-input,
 .semi-input-group .semi-autocomplete:last-child .semi-input-wrapper,
 .semi-input-group .semi-autocomplete:last-child .semi-datepicker-range-input {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
 }
 .semi-input-group .semi-input-number:not(:last-child),
 .semi-input-group .semi-datepicker:not(:last-child),
+.semi-input-group .semi-timepicker:not(:last-child),
 .semi-input-group .semi-autocomplete:not(:last-child) {
   position: relative;
 }
 .semi-input-group .semi-input-number:not(:last-child)::after,
 .semi-input-group .semi-datepicker:not(:last-child)::after,
+.semi-input-group .semi-timepicker:not(:last-child)::after,
 .semi-input-group .semi-autocomplete:not(:last-child)::after {
   content: "";
   background-color: var(--semi-color-border);
@@ -535,6 +553,32 @@
   margin-bottom: 0;
 }
 
+.semi-input-only_border {
+  background: transparent;
+  border-color: var(--semi-color-border);
+}
+.semi-input-only_border:hover {
+  background: transparent;
+  border-color: var(--semi-color-border);
+}
+.semi-input-only_border:focus-within {
+  background: transparent;
+}
+
+.semi-input-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-input-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-input-borderless.semi-input-wrapper-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-input-borderless.semi-input-wrapper-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-input-wrapper,
 .semi-portal-rtl .semi-input-wrapper {
   direction: rtl;

package/lib/es/input/input.scss

@@ -30,6 +30,7 @@ $module: #{$prefix}-input;
     transform: scale($transform_scale-input);
 }
 
+
 .#{$module}-wrapper {
     display: inline-block;
     position: relative;
@@ -84,7 +85,7 @@ $module: #{$prefix}-input;
         border: $color-input_default-border-focus solid $width-input_wrapper_focus-border;
 
         &:hover {
-            background-color: $color-input_default-bg-focus;
+            background-color: $color-input_default-bg-focus-hover;
             border-color: $color-input_default-border-focus;
         }
 
@@ -224,7 +225,6 @@ $module: #{$prefix}-input;
 
             &:not(:last-child) {
                 border-right-style: none;
-                border-radius: 0;
             }
         }
     }
@@ -461,6 +461,9 @@ $module: #{$prefix}-input;
     &[type="password"]::-ms-clear {
         display: none;
     }
+    &[type="search"]::-webkit-search-cancel-button {
+        display: none;
+    }
 
     &::placeholder {
         color: $color-input_placeholder-text-default;
@@ -514,7 +517,7 @@ $module: #{$prefix}-input;
         &-text {
             margin: 0 $spacing-base-tight;
             color: $color-input_prefix-text-default;
-            font-weight: 600;
+            font-weight: $font-weight-bold;
             white-space: nowrap;
         }
 
@@ -593,6 +596,7 @@ $module: #{$prefix}-input;
 
         // select与autocomplete的border-radius都是基于select
         .#{$prefix}-select,
+        .#{$prefix}-tagInput,
         .#{$prefix}-cascader,
         .#{$prefix}-tree-select,
         & > .#{$module}-wrapper {
@@ -622,8 +626,13 @@ $module: #{$prefix}-input;
             }
         }
 
+        .#{$prefix}-select{
+            overflow-y: visible;
+        }
+        
         .#{$prefix}-input-number,
         .#{$prefix}-datepicker,
+        .#{$prefix}-timepicker,
         .#{$prefix}-autocomplete {
             border-radius: 0;
 
@@ -681,4 +690,40 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}-only_border{
+    background: transparent;
+    &:hover{
+        background: transparent;
+        border-color: $color_input-default-border-only_border-hover;
+    }
+    &:focus-within{
+        background: transparent;
+    }
+    border-color: $color_input-default-border-only_border-default;
+
+}
+
+.#{$module}-borderless{
+
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+
+    &.#{$module}-wrapper-error:not(:focus-within){
+        border-color: $color-input_danger-border-focus;
+    }
+
+    &.#{$module}-wrapper-warning:not(:focus-within){
+        border-color: $color-input_warning-border-focus;
+    }
+
+
+}
+
 @import "./rtl.scss";

package/lib/es/input/textarea.css

@@ -151,6 +151,26 @@
   color: var(--semi-color-danger);
 }
 
+.semi-input-textarea-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-input-textarea-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-error .semi-input-textarea-counter {
+  color: var(--semi-color-danger);
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning .semi-input-textarea-counter {
+  color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-input-wrapper,
 .semi-portal-rtl .semi-input-wrapper {
   direction: rtl;

package/lib/es/input/textarea.scss

@@ -195,4 +195,38 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}-textarea-borderless{
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    &.#{$module}-textarea-wrapper-error:not(:focus-within){
+        border-color: $color-input_danger-border-focus;
+    }
+
+
+
+    &.#{$module}-textarea-wrapper-warning:not(:focus-within){
+        border-color: $color-input_warning-border-focus;
+    }
+
+    &.#{$module}-textarea-wrapper-error{
+            .#{$module}-textarea-counter{
+                color: $color-input_danger-border-focus;
+            }
+    }
+
+    &.#{$module}-textarea-wrapper-warning{
+        .#{$module}-textarea-counter{
+            color: $color-input_warning-border-focus;
+        }
+    }
+
+}
+
 @import "./rtl.scss";

package/lib/es/input/textareaFoundation.d.ts

@@ -55,7 +55,7 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
     handleFocus(e: any): void;
     handleBlur(e: any): void;
     handleKeyDown(e: any): void;
-    resizeTextarea: (cb?: any) => void;
+    resizeTextarea: () => void;
     handleMouseEnter(e: any): void;
     handleMouseLeave(e: any): void;
     isAllowClear(): boolean;