@aloudata/aloudata-design 0.3.1 → 0.3.4

package/es/Input/components/Input/index.d.ts

@@ -7,14 +7,14 @@ interface IShowCountProps {
         maxLength?: number;
     }) => string;
 }
-export declare type TSize = 'mini' | 'small' | 'default' | 'large';
+export declare type TSize = 'small' | 'middle' | 'large';
 export type { InputRef };
 declare type ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
 export interface IInputProps extends Omit<InputProps, 'size' | 'id' | 'prefix' | 'allowClear' | 'disabled' | 'showCount' | 'maxLength' | 'value' | 'defaultValue' | 'onPressEnter' | 'onChange'> {
     /**
      * @description 输入框尺寸
      * @default default
-     * @type 'small' | 'default' | 'large';
+     * @type 'mini' | 'small' | 'middle' | 'large';
      */
     size?: TSize;
     /**
@@ -63,5 +63,6 @@ export interface IInputProps extends Omit<InputProps, 'size' | 'id' | 'prefix' |
      */
     onChange?: ChangeEventHandler;
 }
+export declare function getSizeType(sizeType: TSize): TSize;
 declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<InputRef>>;
 export default Input;

package/es/Input/components/Input/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["size"];
+var _excluded = ["size", "className"];
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -7,35 +7,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import AntdInput from 'antd/lib/input/Input';
 import classnames from 'classnames';
+export function getSizeType(sizeType) {
+  if (['mini', 'small', 'middle', 'large'].includes(sizeType)) {
+    return sizeType;
+  }
+
+  return 'middle';
+}
 var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$size = props.size,
-      size = _props$size === void 0 ? 'default' : _props$size,
+      size = _props$size === void 0 ? 'middle' : _props$size,
+      className = props.className,
       rest = _objectWithoutProperties(props, _excluded);
 
-  var getInputSize = function getInputSize(inputSize) {
-    if (inputSize === 'small' || inputSize === 'large') {
-      return inputSize;
-    }
-
-    return 'middle';
-  };
-
-  var getClassName = function getClassName(inputSize) {
-    return classnames('ald-input', {
-      'ald-input-small': inputSize === 'small',
-      'ald-input-large': inputSize === 'large',
-      'ald-input-mini': inputSize === 'mini',
-      'ald-input-middle': !['small', 'mini', 'large'].includes(inputSize),
-      'ald-input-showCount': props.showCount
-    });
-  };
-
   return /*#__PURE__*/React.createElement(AntdInput, Object.assign({}, rest, {
-    // @ts-ignore
     ref: ref,
-    size: getInputSize(size),
     bordered: true,
-    className: getClassName(size),
+    className: classnames('ald-input', "ald-input-".concat(getSizeType(size)), className),
     addonAfter: null,
     addonBefore: null,
     suffix: null

package/es/Input/components/Password/index.js

@@ -1,36 +1,31 @@
-var _excluded = ["size"];
+import "@aloudata/icons-react/styles/index.less";
+import _EyeOffLine from "@aloudata/icons-react/es/icons/EyeOffLine";
+import "@aloudata/icons-react/styles/index.less";
+import _EyeOnLine from "@aloudata/icons-react/es/icons/EyeOnLine";
+var _excluded = ["size", "className"];
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import React from 'react';
-import EyeOffLine from '../../../Icon/icons/EyeOffLine';
-import EyeOnLine from '../../../Icon/icons/EyeOnLine';
 import AntdPassword from 'antd/lib/input/Password';
+import { getSizeType } from '../Input';
 import classnames from 'classnames'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 export default /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$size = props.size,
-      size = _props$size === void 0 ? 'default' : _props$size,
+      size = _props$size === void 0 ? 'middle' : _props$size,
+      className = props.className,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var getClassName = function getClassName(inputSize) {
-    return classnames('ald-input', {
-      'ald-input-small': inputSize === 'small',
-      'ald-input-large': inputSize === 'large',
-      'ald-input-mini': inputSize === 'mini',
-      'ald-input-middle': !['small', 'mini', 'large'].includes(inputSize)
-    });
-  };
-
   return /*#__PURE__*/React.createElement(AntdPassword, Object.assign({}, restProps, {
     ref: ref,
-    className: getClassName(size),
+    className: classnames('ald-input', "ald-input-".concat(getSizeType(size)), className),
     iconRender: function iconRender(visible) {
-      return visible ? /*#__PURE__*/React.createElement(EyeOnLine, {
+      return visible ? /*#__PURE__*/React.createElement(_EyeOnLine, {
         fill: "currentColor"
-      }) : /*#__PURE__*/React.createElement(EyeOffLine, {
+      }) : /*#__PURE__*/React.createElement(_EyeOffLine, {
         fill: "currentColor"
       });
     }

package/es/Input/components/TextArea/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { TextAreaProps, TextAreaRef } from 'antd/lib/input/TextArea';
+import { TSize } from '../Input';
 export type { TextAreaRef };
-export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter'> {
+export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter' | 'size'> {
     /**
      * @description 可以点击清除图标删除内容
      * @default false
@@ -53,6 +54,12 @@ export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter'> {
      * @type boolean
      */
     border?: boolean;
+    className?: string;
+    /**
+     * @description 尺寸大学
+     * @default middle
+     */
+    size?: TSize;
 }
 declare const _default: React.ForwardRefExoticComponent<ITextAreaProps & React.RefAttributes<TextAreaRef>>;
 export default _default;

package/es/Input/components/TextArea/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["bordered"];
+var _excluded = ["bordered", "size", "className"];
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -6,12 +6,19 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React from 'react';
 import AntdTextArea from 'antd/lib/input/TextArea';
+import classnames from 'classnames';
+import { getSizeType } from '../Input';
 export default /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$bordered = props.bordered,
       bordered = _props$bordered === void 0 ? true : _props$bordered,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'middle' : _props$size,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
       rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/React.createElement(AntdTextArea, Object.assign({}, rest, {
+    className: classnames('ald-input-textarea', "ald-input-textarea-".concat(getSizeType(size)), className),
     ref: ref,
     bordered: bordered
   }));

package/es/Input/style/index.less

@@ -6,57 +6,57 @@
 
 @ald-iconfont-css-prefix: anticon;
 // size===large
-@Input-height-large: 36px;
-@Input-padding-large: 5px 11px;
-@Input-fontSize-large: 16px;
-@Input-borderRadius-large: 8px;
-@input-prefix-marginRight-large: 8px;
+@input-height-large: 36px;
+@input-padding-large: 5px 11px;
+@input-font-size-large: 16px;
+@input-border-radius-large: 8px;
+@input-prefix-margin-right-large: 8px;
 // size===middle
-@Input-height-middle: 32px;
-@Input-padding-middle: 5px 11px;
-@Input-fontSize-middle: 14px;
-@Input-borderRadius-middle: 6px;
-@input-prefix-marginRight-middle: 8px;
+@input-height-middle: 32px;
+@input-padding-middle: 5px 11px;
+@input-font-size-middle: 14px;
+@input-border-radius-middle: 6px;
+@input-prefix-margin-right-middle: 8px;
 // size===small
-@Input-height-small: 28px;
-@Input-padding-small: 5px 7px;
-@Input-fontSize-small: 12px;
-@Input-borderRadius-small: 4px;
-@input-prefix-marginRight-small: 4px;
+@input-height-small: 28px;
+@input-padding-small: 5px 7px;
+@input-font-size-small: 12px;
+@input-border-radius-small: 4px;
+@input-prefix-margin-right-small: 4px;
 // size===mini
-@Input-height-mini: 24px;
-@Input-padding-mini: 3px 7px;
-@Input-fontSize-mini: 12px;
-@Input-borderRadius-mini: 4px;
-@input-prefix-marginRight-mini: 4px;
+@input-height-mini: 24px;
+@input-padding-mini: 3px 7px;
+@input-font-size-mini: 12px;
+@input-border-radius-mini: 4px;
+@input-prefix-margin-right-mini: 4px;
 //custom status
-@Input-borderColor: @NL90;
-@Input-fontColor: @NL0;
-@Input-placeholderColor: @NL80;
-@Input-prefix-color: @NL50;
-@Input-bgColor: @BG97;
+@input-border-color: @NL90;
+@input-fontColor: @NL0;
+@input-placeholder-color: @NL80;
+@input-prefix-color: @NL50;
+@input-bg-color: @BG97;
 // active status
-@Input-active-borderColor: @B60;
-@Input-boxShadow-active: 0 0 0 0.5px @B60;
+@input-active-border-color: @B60;
+@input-box-shadow-active: 0 0 0 0.5px @B60;
 // disabled status
-@Input-disabled-borderColor: @NL90;
-@Input-disabled-bgColor: @BG95;
-@Input-disabled-fontColor: @NL60;
+@input-disabled-border-color: @NL90;
+@input-disabled-bg-color: @BG95;
+@input-disabled-font-color: @NL60;
 
 .ant-input.ald-input {
   color: @NL0;
   font-weight: 400;
-  background-color: @Input-bgColor;
-  border-color: @Input-borderColor;
-  border-radius: @Input-borderRadius-middle;
+  background-color: @input-bg-color;
+  border-color: @input-border-color;
+  border-radius: @input-border-radius-middle;
   caret-color: @B60;
 
   &::placeholder {
-    color: @Input-placeholderColor;
+    color: @input-placeholder-color;
   }
 
   &-prefix {
-    color: @Input-prefix-color;
+    color: @input-prefix-color;
     font-size: inherit;
   }
 
@@ -67,19 +67,19 @@
   &:focus,
   &:hover,
   &-focused {
-    border-color: @Input-active-borderColor;
-    box-shadow: @Input-boxShadow-active;
+    border-color: @input-active-border-color;
+    box-shadow: @input-box-shadow-active;
   }
 
   &[disabled].ald-input {
-    color: @Input-disabled-fontColor;
-    background-color: @Input-disabled-bgColor;
-    border-color: @Input-disabled-borderColor;
+    color: @input-disabled-font-color;
+    background-color: @input-disabled-bg-color;
+    border-color: @input-disabled-border-color;
     box-shadow: none;
     cursor: default;
 
     &::placeholder {
-      color: @Input-placeholderColor;
+      color: @input-placeholder-color;
     }
   }
 
@@ -106,24 +106,25 @@
 }
 
 .ant-input-affix-wrapper.ant-input-affix-wrapper {
-  background-color: @Input-bgColor;
-  border-color: @Input-borderColor;
+  background-color: @input-bg-color;
+  border-color: @input-border-color;
 
   &:hover,
   &:focus,
   &-focused {
-    border-color: @Input-active-borderColor;
-    box-shadow: @Input-boxShadow-active;
+    border-color: @input-active-border-color;
+    box-shadow: @input-box-shadow-active;
   }
 
   .ant-input {
     color: @NL0;
-    background-color: @Input-bgColor;
+    background-color: @input-bg-color;
     border-radius: 0;
+    box-shadow: none;
     caret-color: @B60;
 
     &::placeholder {
-      color: @Input-placeholderColor;
+      color: @input-placeholder-color;
     }
   }
 
@@ -154,58 +155,62 @@
 
 .ant-input-affix-wrapper-focused {
   &.ant-input-password {
-    border-color: @Input-active-borderColor;
-    box-shadow: @Input-boxShadow-active;
+    border-color: @input-active-border-color;
+    box-shadow: @input-box-shadow-active;
   }
 
   &:hover {
-    border-color: @Input-active-borderColor;
-    box-shadow: @Input-boxShadow-active;
+    border-color: @input-active-border-color;
+    box-shadow: @input-box-shadow-active;
+  }
+
+  .ant-input:hover {
+    box-shadow: none;
   }
 }
 
 .ald-input {
   &.ald-input-mini {
-    height: @Input-height-mini;
-    padding: @Input-padding-mini;
-    font-size: @Input-fontSize-mini;
-    border-radius: @Input-borderRadius-mini;
+    height: @input-height-mini;
+    padding: @input-padding-mini;
+    font-size: @input-font-size-mini;
+    border-radius: @input-border-radius-mini;
 
     .ant-input-prefix {
-      margin-right: @input-prefix-marginRight-mini;
+      margin-right: @input-prefix-margin-right-mini;
     }
   }
 
   &.ald-input-small {
-    height: @Input-height-small;
-    padding: @Input-padding-small;
-    font-size: @Input-fontSize-small;
-    border-radius: @Input-borderRadius-small;
+    height: @input-height-small;
+    padding: @input-padding-small;
+    font-size: @input-font-size-small;
+    border-radius: @input-border-radius-small;
 
     .ant-input-prefix {
-      margin-right: @input-prefix-marginRight-small;
+      margin-right: @input-prefix-margin-right-small;
     }
   }
 
   &.ald-input-middle {
-    height: @Input-height-middle;
-    padding: @Input-padding-middle;
-    font-size: @Input-fontSize-middle;
-    border-radius: @Input-borderRadius-middle;
+    height: @input-height-middle;
+    padding: @input-padding-middle;
+    font-size: @input-font-size-middle;
+    border-radius: @input-border-radius-middle;
 
     .ant-input-prefix {
-      margin-right: @input-prefix-marginRight-middle;
+      margin-right: @input-prefix-margin-right-middle;
     }
   }
 
   &.ald-input-large {
-    height: @Input-height-large;
-    padding: @Input-padding-large;
-    font-size: @Input-fontSize-large;
-    border-radius: @Input-borderRadius-large;
+    height: @input-height-large;
+    padding: @input-padding-large;
+    font-size: @input-font-size-large;
+    border-radius: @input-border-radius-large;
 
     .ant-input-prefix {
-      margin-right: @input-prefix-marginRight-large;
+      margin-right: @input-prefix-margin-right-large;
     }
   }
 }
@@ -218,27 +223,27 @@
 
 .ald-input-group-large {
   .ald-input {
-    height: @Input-height-large;
-    padding: @Input-padding-large;
-    font-size: @Input-fontSize-large;
+    height: @input-height-large;
+    padding: @input-padding-large;
+    font-size: @input-font-size-large;
 
     &.ant-input {
-      border-radius: @Input-borderRadius-large;
+      border-radius: @input-border-radius-large;
     }
 
     .ant-input-prefix {
-      margin-right: @input-prefix-marginRight-large;
+      margin-right: @input-prefix-margin-right-large;
     }
   }
 
   &.ant-input-group-compact {
     .ald-input {
       &:first-of-type {
-        border-radius: @Input-borderRadius-large 0 0 @Input-borderRadius-large;
+        border-radius: @input-border-radius-large 0 0 @input-border-radius-large;
       }
 
       &:last-of-type {
-        border-radius: 0 @Input-borderRadius-large @Input-borderRadius-large 0;
+        border-radius: 0 @input-border-radius-large @input-border-radius-large 0;
       }
     }
   }
@@ -246,28 +251,28 @@
 
 .ald-input-group-middle {
   .ald-input {
-    height: @Input-height-middle;
-    padding: @Input-padding-middle;
-    font-size: @Input-fontSize-middle;
-    border-radius: @Input-borderRadius-middle;
+    height: @input-height-middle;
+    padding: @input-padding-middle;
+    font-size: @input-font-size-middle;
+    border-radius: @input-border-radius-middle;
 
     &.ant-input {
-      border-radius: @Input-borderRadius-middle;
+      border-radius: @input-border-radius-middle;
     }
 
     .ant-input-prefix {
-      margin-right: @input-prefix-marginRight-middle;
+      margin-right: @input-prefix-margin-right-middle;
     }
   }
 
   &.ant-input-group-compact {
     .ald-input {
       &:first-of-type {
-        border-radius: @Input-borderRadius-middle 0 0 @Input-borderRadius-middle;
+        border-radius: @input-border-radius-middle 0 0 @input-border-radius-middle;
       }
 
       &:last-of-type {
-        border-radius: 0 @Input-borderRadius-middle @Input-borderRadius-middle 0;
+        border-radius: 0 @input-border-radius-middle @input-border-radius-middle 0;
       }
     }
   }
@@ -275,28 +280,28 @@
 
 .ald-input-group-small {
   .ald-input {
-    height: @Input-height-small;
-    padding: @Input-padding-small;
-    font-size: @Input-fontSize-small;
-    border-radius: @Input-borderRadius-small;
+    height: @input-height-small;
+    padding: @input-padding-small;
+    font-size: @input-font-size-small;
+    border-radius: @input-border-radius-small;
 
     &.ant-input {
-      border-radius: @Input-borderRadius-small;
+      border-radius: @input-border-radius-small;
     }
 
     .ant-input-prefix {
-      margin-right: @input-prefix-marginRight-small;
+      margin-right: @input-prefix-margin-right-small;
     }
   }
 
   &.ant-input-group-compact {
     .ald-input {
       &:first-of-type {
-        border-radius: @Input-borderRadius-small 0 0 @Input-borderRadius-small;
+        border-radius: @input-border-radius-small 0 0 @input-border-radius-small;
       }
 
       &:last-of-type {
-        border-radius: 0 @Input-borderRadius-small @Input-borderRadius-small 0;
+        border-radius: 0 @input-border-radius-small @input-border-radius-small 0;
       }
     }
   }
@@ -304,29 +309,102 @@
 
 .ald-input-group-mini {
   .ald-input {
-    height: @Input-height-mini;
-    padding: @Input-padding-mini;
-    font-size: @Input-fontSize-mini;
-    border-radius: @Input-borderRadius-mini;
+    height: @input-height-mini;
+    padding: @input-padding-mini;
+    font-size: @input-font-size-mini;
+    border-radius: @input-border-radius-mini;
 
     &.ant-input {
-      border-radius: @Input-borderRadius-mini;
+      border-radius: @input-border-radius-mini;
     }
 
     .ant-input-prefix {
-      margin-right: @input-prefix-marginRight-mini;
+      margin-right: @input-prefix-margin-right-mini;
     }
   }
 
   &.ant-input-group-compact {
     .ald-input {
       &:first-of-type {
-        border-radius: @Input-borderRadius-mini 0 0 @Input-borderRadius-mini;
+        border-radius: @input-border-radius-mini 0 0 @input-border-radius-mini;
       }
 
       &:last-of-type {
-        border-radius: 0 @Input-borderRadius-mini @Input-borderRadius-mini 0;
+        border-radius: 0 @input-border-radius-mini @input-border-radius-mini 0;
       }
     }
   }
 }
+
+.ald-textarea-large {
+  padding: 5px 11px;
+  font-size: @font-size-large;
+  line-height: @line-height-large;
+  border-radius: @border-radius-large;
+}
+
+.ald-textarea-middle {
+  padding: 5px 11px;
+  font-size: @font-size-middle;
+  line-height: @line-height-middle;
+  border-radius: @border-radius-middle;
+}
+
+.ald-textarea-small {
+  padding: 5px 7px;
+  font-size: @font-size-small;
+  line-height: @line-height-small;
+  border-radius: @border-radius-small;
+}
+
+textarea.ald-input-textarea-large,
+.ald-input-textarea-large .ant-input {
+  .ald-textarea-large();
+}
+
+textarea.ald-input-textarea-middle,
+.ald-input-textarea-middle .ant-input {
+  .ald-textarea-middle();
+}
+
+textarea.ald-input-textarea-small,
+.ald-input-textarea-small .ant-input {
+  .ald-textarea-small();
+}
+
+textarea.ald-input-textarea,
+.ald-input-textarea .ant-input {
+  color: @NL0;
+  background: @BG97;
+  caret-color: @B60;
+
+  &:hover,
+  &:active,
+  &:focus {
+    border-color: @B60;
+    box-shadow: none;
+  }
+
+  ::placeholder {
+    color: @NL80;
+  }
+
+  &.ant-input-disabled {
+    color: @NL60;
+    background: @BG95;
+    cursor: initial;
+
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: @NL90;
+      box-shadow: none;
+    }
+  }
+}
+
+.ant-input-textarea-show-count::after {
+  color: @NL50;
+  font-size: 11px;
+  line-height: 16px;
+}

package/es/InputNumber/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InputNumberProps } from 'antd';
 export default function InputNumber(props: InputNumberProps): JSX.Element;
 export type { InputNumberProps };