@kdcloudjs/kdesign 1.7.5 → 1.7.6

package/es/form/Field.js

@@ -289,6 +289,7 @@ var Field = function Field(props) {
   }, _mapInstanceProperty(childrenArray).call(childrenArray, function (child, index) {
     var keys = mergeProps(_extends(_extends({}, generateEventHandler(handleValueValidate, validateTrigger)), {
       key: index,
+      status: typeof validateMessage !== 'undefined' ? 'error' : undefined,
       id: customizeHtmlFor ? undefined : htmlFor
     }), child);
     return child ? /*#__PURE__*/React.cloneElement(child, keys) : child;

package/es/input/ClearableLabeledInput.d.ts

@@ -22,6 +22,7 @@ interface ClearableInputProps {
     addonAfter?: React.ReactNode;
     numberMark?: React.ReactNode;
     inputCount?: React.ReactNode;
+    status?: 'error';
 }
 declare const ClearableInput: React.FC<ClearableInputProps>;
 export default ClearableInput;

package/es/input/ClearableLabeledInput.js

@@ -28,7 +28,8 @@ var ClearableInput = function ClearableInput(props) {
     focused = props.focused,
     numberMark = props.numberMark,
     inputCount = props.inputCount,
-    count = props.count;
+    count = props.count,
+    status = props.status;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMouseEnter = _useState2[0],
@@ -80,7 +81,7 @@ var ClearableInput = function ClearableInput(props) {
       className: "".concat(prefixCls, "-prefix"),
       onMouseDown: mouseDownHandle
     }, prefix) : null;
-    var inputWrapperClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _classNames2), _defineProperty({}, className, className && !addonBefore && !addonAfter));
+    var inputWrapperClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), _defineProperty({}, className, className && !addonBefore && !addonAfter));
     return /*#__PURE__*/React.createElement("span", {
       className: inputWrapperClasses,
       style: style,
@@ -95,7 +96,7 @@ var ClearableInput = function ClearableInput(props) {
     if (!addonBefore && !addonAfter && !count) {
       return originElement;
     }
-    var addonClassName = classNames("".concat(prefixCls, "-group-addon"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-borderless"), borderType === 'none'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-underline"), borderType === 'underline'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-disabled"), disabled), _classNames4));
+    var addonClassName = classNames("".concat(prefixCls, "-group-addon"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-borderless"), borderType === 'none'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-underline"), borderType === 'underline'), _defineProperty(_classNames4, "".concat(prefixCls, "-error"), status === 'error'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-disabled"), disabled), _classNames4));
     var addonBeforeNode = addonBefore ? /*#__PURE__*/React.createElement("span", {
       className: addonClassName
     }, addonBefore) : null;

package/es/input/TextArea.d.ts

@@ -14,6 +14,7 @@ export interface textAreaProps extends React.TextareaHTMLAttributes<HTMLInputEle
     style?: Record<string, unknown>;
     size?: InputSiteType;
     autoSize?: AutoSizeType | boolean;
+    status?: 'error';
 }
 export interface AutoSizeType {
     minRows?: number;

package/es/input/TextArea.js

@@ -51,7 +51,8 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     placeholder = textAreaProps.placeholder,
     style = textAreaProps.style,
     size = textAreaProps.size,
-    others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size"]);
+    status = textAreaProps.status,
+    others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size", "status"]);
   var textAreaPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // TextArea样式前缀
   devWarning(BorderTypes.indexOf(borderType) === -1, 'textarea', "cannot found textarea borderType '".concat(borderType, "'"));
   var _useMergedState = useMergedState('', {
@@ -172,7 +173,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       ref: textareaRef,
       disabled: disabled,
       style: _extends({}, textareaStyles, hadCount || !!allowClear ? otherStyles : style),
-      className: classNames("".concat(prefixCls, "-textarea"), (_classNames2 = {}, _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), _defineProperty(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _classNames2), _defineProperty({}, className, className && !allowClear && !hadCount)),
+      className: classNames("".concat(prefixCls, "-textarea"), (_classNames2 = {}, _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), _defineProperty(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _defineProperty(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2), _defineProperty({}, className, className && !allowClear && !hadCount)),
       onChange: handleChange,
       onFocus: !disabled ? handleFocus : undefined,
       onBlur: !disabled ? handleBlur : undefined,

package/es/input/input.d.ts

@@ -22,6 +22,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     value?: any;
     readonly?: 'readonly';
     count?: boolean;
+    status?: 'error';
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
 export default Input;

package/es/input/input.js

@@ -49,7 +49,8 @@ var InternalInput = function InternalInput(props, ref) {
     className = inputProps.className,
     maxLength = inputProps.maxLength,
     count = inputProps.count,
-    others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "className", "maxLength", "count"]);
+    status = inputProps.status,
+    others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "className", "maxLength", "count", "status"]);
   devWarning(InputSiteTypes.indexOf(size) === -1, 'input', "cannot found input size '".concat(size, "'"));
   devWarning(BorderTypes.indexOf(borderType) === -1, 'input', "cannot found input borderType '".concat(borderType, "'"));
   var _useMergedState = useMergedState('', {
@@ -72,7 +73,7 @@ var InternalInput = function InternalInput(props, ref) {
   var inputPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // 按钮样式前缀
   var addonBefore = others.addonBefore,
     addonAfter = others.addonAfter;
-  var inputClasses = classNames(inputPrefixCls, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), _defineProperty({}, className, className && !hasPrefixSuffix(inputProps) && !addonBefore && !addonAfter));
+  var inputClasses = classNames(inputPrefixCls, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-error"), status === 'error'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), _defineProperty({}, className, className && !hasPrefixSuffix(inputProps) && !addonBefore && !addonAfter));
   var handleFocus = function handleFocus(event) {
     setFocused(true);
     onFocus && onFocus(event);

package/es/input/style/index.css

@@ -146,10 +146,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input:not(.kd-input-disabled):hover {
+.kd-input:not(.kd-input-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input:not(.kd-input-disabled):focus {
+.kd-input:not(.kd-input-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -193,10 +193,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input-textarea:not(.kd-input-disabled):hover {
+.kd-input-textarea:not(.kd-input-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input-textarea:not(.kd-input-disabled):focus {
+.kd-input-textarea:not(.kd-input-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -300,10 +300,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input-wrapper:not(.kd-input-wrapper-disabled):hover {
+.kd-input-wrapper:not(.kd-input-wrapper-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input-wrapper:not(.kd-input-wrapper-disabled):focus {
+.kd-input-wrapper:not(.kd-input-wrapper-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -363,7 +363,7 @@ textarea {
   border-radius: 0 !important;
   padding-left: 0;
 }
-.kd-input-wrapper-focused {
+.kd-input-wrapper-focused:not(.kd-input-error) {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-wrapper-disabled {
@@ -408,10 +408,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input-wrapper-textarea:not(.kd-input-disabled):hover {
+.kd-input-wrapper-textarea:not(.kd-input-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input-wrapper-textarea:not(.kd-input-disabled):focus {
+.kd-input-wrapper-textarea:not(.kd-input-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -537,3 +537,6 @@ textarea {
 .kd-input-input-mark-inner {
   color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
 }
+.kd-input-error:not(.kd-input-disabled):not(.kd-input-wrapper-disabled):not(.kd-input-group-addon-disabled) {
+  border-color: var(--kd-c-input-color-error, var(--kd-g-color-error, #fb2323));
+}

package/es/input/style/index.less

@@ -152,7 +152,7 @@ textarea {
       .underline;
     }
 
-    &-focused {
+    &-focused:not(.@{input-prefix-cls}-error) {
       border-color: @input-border-color-focused;
     }
 
@@ -308,4 +308,8 @@ textarea {
   &-input-mark-inner {
     color: @input-placeholder-color-inner;
   }
+
+  &-error:not(.@{input-prefix-cls}-disabled):not(.@{input-prefix-cls}-wrapper-disabled):not(.@{input-prefix-cls}-group-addon-disabled) {
+    border-color: @input-error-color;
+  }
 }

package/es/input/style/mixin.less

@@ -1,8 +1,11 @@
+@import '../../style/themes/index';
 @import './token.less';
+@input-prefix-cls: ~'@{kd-prefix}-input';
 
 // 输入框默认样式Mixins
 .input(@prefix) {
   @disabled-prefix-cls: ~'@{prefix}-disabled';
+  @error-prefix-cls: ~'@{input-prefix-cls}-error';
   width: 100%;
   min-width: 0;
   border: @input-border-width-inner solid @input-border-color-disabled-inner;
@@ -29,10 +32,10 @@
     box-shadow: none;
     outline: none;
   }
-  &:not(.@{disabled-prefix-cls}):hover {
+  &:not(.@{disabled-prefix-cls}):not(.@{error-prefix-cls}):hover {
     border-color: @input-border-color-focused;
   }
-  &:not(.@{disabled-prefix-cls}):focus {
+  &:not(.@{disabled-prefix-cls}):not(.@{error-prefix-cls}):focus {
     color: @input-focus-color;
     border-color: @input-border-color-focused;
   }

package/es/input/style/token.less

@@ -21,6 +21,7 @@
 );
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
 @input-affix-color: var(~'@{input-prefix}-affix-color-text', #666);
+@input-error-color: var(~'@{input-prefix}-color-error', @color-error);
 
 // font
 @input-small-font-size-inner: var(~'@{input-prefix}-font-size-small', @font-size-small);

package/lib/form/Field.js

@@ -301,6 +301,7 @@ var Field = function Field(props) {
   }, (0, _map.default)(childrenArray).call(childrenArray, function (child, index) {
     var keys = mergeProps((0, _extends3.default)((0, _extends3.default)({}, generateEventHandler(handleValueValidate, validateTrigger)), {
       key: index,
+      status: typeof validateMessage !== 'undefined' ? 'error' : undefined,
       id: customizeHtmlFor ? undefined : htmlFor
     }), child);
     return child ? /*#__PURE__*/_react.default.cloneElement(child, keys) : child;

package/lib/input/ClearableLabeledInput.d.ts

@@ -22,6 +22,7 @@ interface ClearableInputProps {
     addonAfter?: React.ReactNode;
     numberMark?: React.ReactNode;
     inputCount?: React.ReactNode;
+    status?: 'error';
 }
 declare const ClearableInput: React.FC<ClearableInputProps>;
 export default ClearableInput;

package/lib/input/ClearableLabeledInput.js

@@ -41,7 +41,8 @@ var ClearableInput = function ClearableInput(props) {
     focused = props.focused,
     numberMark = props.numberMark,
     inputCount = props.inputCount,
-    count = props.count;
+    count = props.count,
+    status = props.status;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isMouseEnter = _useState2[0],
@@ -93,7 +94,7 @@ var ClearableInput = function ClearableInput(props) {
       className: "".concat(prefixCls, "-prefix"),
       onMouseDown: mouseDownHandle
     }, prefix) : null;
-    var inputWrapperClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _classNames2), (0, _defineProperty2.default)({}, className, className && !addonBefore && !addonAfter));
+    var inputWrapperClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !addonBefore && !addonAfter));
     return /*#__PURE__*/_react.default.createElement("span", {
       className: inputWrapperClasses,
       style: style,
@@ -108,7 +109,7 @@ var ClearableInput = function ClearableInput(props) {
     if (!addonBefore && !addonAfter && !count) {
       return originElement;
     }
-    var addonClassName = (0, _classnames.default)("".concat(prefixCls, "-group-addon"), (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-disabled"), disabled), _classNames4));
+    var addonClassName = (0, _classnames.default)("".concat(prefixCls, "-group-addon"), (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-group-addon-disabled"), disabled), _classNames4));
     var addonBeforeNode = addonBefore ? /*#__PURE__*/_react.default.createElement("span", {
       className: addonClassName
     }, addonBefore) : null;

package/lib/input/TextArea.d.ts

@@ -14,6 +14,7 @@ export interface textAreaProps extends React.TextareaHTMLAttributes<HTMLInputEle
     style?: Record<string, unknown>;
     size?: InputSiteType;
     autoSize?: AutoSizeType | boolean;
+    status?: 'error';
 }
 export interface AutoSizeType {
     minRows?: number;

package/lib/input/TextArea.js

@@ -63,7 +63,8 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     placeholder = textAreaProps.placeholder,
     style = textAreaProps.style,
     size = textAreaProps.size,
-    others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size"]);
+    status = textAreaProps.status,
+    others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size", "status"]);
   var textAreaPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // TextArea样式前缀
   (0, _devwarning.default)(_input.BorderTypes.indexOf(borderType) === -1, 'textarea', "cannot found textarea borderType '".concat(borderType, "'"));
   var _useMergedState = (0, _hooks.useMergedState)('', {
@@ -184,7 +185,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       ref: textareaRef,
       disabled: disabled,
       style: (0, _extends2.default)({}, textareaStyles, hadCount || !!allowClear ? otherStyles : style),
-      className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _classNames2), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
+      className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
       onChange: handleChange,
       onFocus: !disabled ? handleFocus : undefined,
       onBlur: !disabled ? handleBlur : undefined,

package/lib/input/input.d.ts

@@ -22,6 +22,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     value?: any;
     readonly?: 'readonly';
     count?: boolean;
+    status?: 'error';
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
 export default Input;

package/lib/input/input.js

@@ -64,7 +64,8 @@ var InternalInput = function InternalInput(props, ref) {
     className = inputProps.className,
     maxLength = inputProps.maxLength,
     count = inputProps.count,
-    others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "className", "maxLength", "count"]);
+    status = inputProps.status,
+    others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "className", "maxLength", "count", "status"]);
   (0, _devwarning.default)(InputSiteTypes.indexOf(size) === -1, 'input', "cannot found input size '".concat(size, "'"));
   (0, _devwarning.default)(BorderTypes.indexOf(borderType) === -1, 'input', "cannot found input borderType '".concat(borderType, "'"));
   var _useMergedState = (0, _hooks.useMergedState)('', {
@@ -87,7 +88,7 @@ var InternalInput = function InternalInput(props, ref) {
   var inputPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // 按钮样式前缀
   var addonBefore = others.addonBefore,
     addonAfter = others.addonAfter;
-  var inputClasses = (0, _classnames.default)(inputPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), (0, _defineProperty2.default)({}, className, className && !(0, _ClearableLabeledInput.hasPrefixSuffix)(inputProps) && !addonBefore && !addonAfter));
+  var inputClasses = (0, _classnames.default)(inputPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), (0, _defineProperty2.default)({}, className, className && !(0, _ClearableLabeledInput.hasPrefixSuffix)(inputProps) && !addonBefore && !addonAfter));
   var handleFocus = function handleFocus(event) {
     setFocused(true);
     onFocus && onFocus(event);

package/lib/input/style/index.css

@@ -146,10 +146,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input:not(.kd-input-disabled):hover {
+.kd-input:not(.kd-input-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input:not(.kd-input-disabled):focus {
+.kd-input:not(.kd-input-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -193,10 +193,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input-textarea:not(.kd-input-disabled):hover {
+.kd-input-textarea:not(.kd-input-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input-textarea:not(.kd-input-disabled):focus {
+.kd-input-textarea:not(.kd-input-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -300,10 +300,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input-wrapper:not(.kd-input-wrapper-disabled):hover {
+.kd-input-wrapper:not(.kd-input-wrapper-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input-wrapper:not(.kd-input-wrapper-disabled):focus {
+.kd-input-wrapper:not(.kd-input-wrapper-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -363,7 +363,7 @@ textarea {
   border-radius: 0 !important;
   padding-left: 0;
 }
-.kd-input-wrapper-focused {
+.kd-input-wrapper-focused:not(.kd-input-error) {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-wrapper-disabled {
@@ -408,10 +408,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input-wrapper-textarea:not(.kd-input-disabled):hover {
+.kd-input-wrapper-textarea:not(.kd-input-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input-wrapper-textarea:not(.kd-input-disabled):focus {
+.kd-input-wrapper-textarea:not(.kd-input-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -537,3 +537,6 @@ textarea {
 .kd-input-input-mark-inner {
   color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
 }
+.kd-input-error:not(.kd-input-disabled):not(.kd-input-wrapper-disabled):not(.kd-input-group-addon-disabled) {
+  border-color: var(--kd-c-input-color-error, var(--kd-g-color-error, #fb2323));
+}

package/lib/input/style/index.less

@@ -152,7 +152,7 @@ textarea {
       .underline;
     }
 
-    &-focused {
+    &-focused:not(.@{input-prefix-cls}-error) {
       border-color: @input-border-color-focused;
     }
 
@@ -308,4 +308,8 @@ textarea {
   &-input-mark-inner {
     color: @input-placeholder-color-inner;
   }
+
+  &-error:not(.@{input-prefix-cls}-disabled):not(.@{input-prefix-cls}-wrapper-disabled):not(.@{input-prefix-cls}-group-addon-disabled) {
+    border-color: @input-error-color;
+  }
 }

package/lib/input/style/mixin.less

@@ -1,8 +1,11 @@
+@import '../../style/themes/index';
 @import './token.less';
+@input-prefix-cls: ~'@{kd-prefix}-input';
 
 // 输入框默认样式Mixins
 .input(@prefix) {
   @disabled-prefix-cls: ~'@{prefix}-disabled';
+  @error-prefix-cls: ~'@{input-prefix-cls}-error';
   width: 100%;
   min-width: 0;
   border: @input-border-width-inner solid @input-border-color-disabled-inner;
@@ -29,10 +32,10 @@
     box-shadow: none;
     outline: none;
   }
-  &:not(.@{disabled-prefix-cls}):hover {
+  &:not(.@{disabled-prefix-cls}):not(.@{error-prefix-cls}):hover {
     border-color: @input-border-color-focused;
   }
-  &:not(.@{disabled-prefix-cls}):focus {
+  &:not(.@{disabled-prefix-cls}):not(.@{error-prefix-cls}):focus {
     color: @input-focus-color;
     border-color: @input-border-color-focused;
   }

package/lib/input/style/token.less

@@ -21,6 +21,7 @@
 );
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
 @input-affix-color: var(~'@{input-prefix}-affix-color-text', #666);
+@input-error-color: var(~'@{input-prefix}-color-error', @color-error);
 
 // font
 @input-small-font-size-inner: var(~'@{input-prefix}-font-size-small', @font-size-small);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [