@aloudata/aloudata-design 0.4.0-beta.6 → 0.4.0-beta.8

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

@@ -10,7 +10,19 @@ interface IShowCountProps {
 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'> {
+export interface IInputProps extends Omit<InputProps, 'size' | 'id' | 'prefix' | 'allowClear' | 'disabled' | 'showCount' | 'maxLength' | 'value' | 'defaultValue' | 'onPressEnter' | 'onChange' | 'addonAfter' | 'addonBefore'> {
+    /**
+     * @description 带标签的input，设置后置标签
+     * @default -
+     * @type ReactNode
+     */
+    addonAfter?: ReactNode;
+    /**
+     * @description 带标签的input，设置前置标签
+     * @default -
+     * @type ReactNode
+     */
+    addonBefore?: ReactNode;
     /**
      * @description 输入框尺寸
      * @default default

package/lib/Input/components/Input/index.js

@@ -21,7 +21,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 
 function getSizeType(sizeType) {
-  if (['mini', 'small', 'middle', 'large'].includes(sizeType)) {
+  if (['small', 'middle', 'large'].includes(sizeType)) {
     return sizeType;
   }
 
@@ -38,8 +38,6 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ref: ref,
     bordered: true,
     className: (0, _classnames.default)('ald-input', "ald-input-".concat(getSizeType(size)), className),
-    addonAfter: null,
-    addonBefore: null,
     suffix: null
   }));
 });

package/lib/Input/components/Password/index.d.ts

@@ -1,6 +1,11 @@
 import React from 'react';
 import { PasswordProps } from 'antd/lib/input/Password';
 import { TSize } from '../Input';
+export declare const iconSizeMap: {
+    small: number;
+    middle: number;
+    large: number;
+};
 export interface IPasswordProps extends Omit<PasswordProps, 'size'> {
     /**
      * @description 是否显示切换按钮
@@ -8,7 +13,7 @@ export interface IPasswordProps extends Omit<PasswordProps, 'size'> {
      */
     visibilityToggle?: boolean;
     /**
-     * @description 尺寸大学
+     * @description 尺寸大小
      * @default default
      */
     size?: TSize;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.iconSizeMap = exports.default = void 0;
 
 require("@aloudata/icons-react/styles/index.less");
 
@@ -27,7 +27,15 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// 不同的size对应的不同的icon
+var iconSizeMap = {
+  small: 16,
+  middle: 20,
+  large: 24
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+exports.iconSizeMap = iconSizeMap;
+
 var _default = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$size = props.size,
       size = _props$size === void 0 ? 'middle' : _props$size,
@@ -39,9 +47,11 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className: (0, _classnames.default)('ald-input', "ald-input-".concat((0, _Input.getSizeType)(size)), className),
     iconRender: function iconRender(visible) {
       return visible ? /*#__PURE__*/_react.default.createElement(_EyeOnLine2.default, {
-        fill: "currentColor"
+        fill: "currentColor",
+        size: iconSizeMap[size]
       }) : /*#__PURE__*/_react.default.createElement(_EyeOffLine2.default, {
-        fill: "currentColor"
+        fill: "currentColor",
+        size: iconSizeMap[size]
       });
     }
   }));

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

@@ -56,7 +56,7 @@ export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter' | 'si
     border?: boolean;
     className?: string;
     /**
-     * @description 尺寸大学
+     * @description 尺寸大小
      * @default middle
      */
     size?: TSize;

package/lib/Input/style/index.less

@@ -7,48 +7,47 @@
 @ald-iconfont-css-prefix: anticon;
 // size===large
 @input-height-large: 36px;
-@input-padding-large: 5px 11px;
+@input-padding-large: 5px 13px;
 @input-font-size-large: 16px;
 @input-border-radius-large: 8px;
 @input-prefix-margin-right-large: 8px;
+@input-clear-icon-large: 20px;
 // size===middle
 @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;
+@input-clear-icon-middle: 16px;
 // size===small
 @input-height-small: 28px;
-@input-padding-small: 5px 7px;
+@input-padding-small: 5px 9px;
 @input-font-size-small: 12px;
-@input-border-radius-small: 4px;
+@input-border-radius-small: 6px;
 @input-prefix-margin-right-small: 4px;
-// size===mini
-@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;
+@input-clear-icon-small: 14px;
 //custom status
-@input-border-color: @NL90;
+@input-border-color: @BG60;
 @input-fontColor: @NL0;
-@input-placeholder-color: @NL80;
-@input-prefix-color: @NL50;
-@input-bg-color: @BG97;
+@input-placeholder-color: @NL50;
+@input-prefix-color: @NL40;
+@input-bg-color: @BG100;
 // active status
-@input-active-border-color: @B60;
-@input-box-shadow-active: 0 0 0 0.5px @B60;
+@input-active-border-color: @B40;
+@input-box-shadow-active: @shadow-xs;
 // disabled status
-@input-disabled-border-color: @NL90;
-@input-disabled-bg-color: @BG95;
-@input-disabled-font-color: @NL60;
+@input-disabled-border-color: @BG60;
+@input-disabled-bg-color: @BG90;
+@input-disabled-font-color: @NL40;
 
-.ant-input.ald-input {
+.ant-input.ald-input,
+.ald-input .ant-input {
   color: @NL0;
   font-weight: 400;
   background-color: @input-bg-color;
   border-color: @input-border-color;
   border-radius: @input-border-radius-middle;
+  box-shadow: @shadow-xs;
   caret-color: @B60;
 
   &::placeholder {
@@ -170,17 +169,6 @@
 }
 
 .ald-input {
-  &.ald-input-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-margin-right-mini;
-    }
-  }
-
   &.ald-input-small {
     height: @input-height-small;
     padding: @input-padding-small;
@@ -190,6 +178,10 @@
     .ant-input-prefix {
       margin-right: @input-prefix-margin-right-small;
     }
+
+    .ant-input-suffix .ant-input-clear-icon {
+      font-size: @input-clear-icon-large;
+    }
   }
 
   &.ald-input-middle {
@@ -201,6 +193,10 @@
     .ant-input-prefix {
       margin-right: @input-prefix-margin-right-middle;
     }
+
+    .ant-input-suffix .ant-input-clear-icon {
+      font-size: @input-clear-icon-middle;
+    }
   }
 
   &.ald-input-large {
@@ -212,6 +208,10 @@
     .ant-input-prefix {
       margin-right: @input-prefix-margin-right-large;
     }
+
+    .ant-input-suffix .ant-input-clear-icon {
+      font-size: @input-clear-icon-small;
+    }
   }
 }
 
@@ -307,35 +307,6 @@
   }
 }
 
-.ald-input-group-mini {
-  .ald-input {
-    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-border-radius-mini;
-    }
-
-    .ant-input-prefix {
-      margin-right: @input-prefix-margin-right-mini;
-    }
-  }
-
-  &.ant-input-group-compact {
-    .ald-input {
-      &:first-of-type {
-        border-radius: @input-border-radius-mini 0 0 @input-border-radius-mini;
-      }
-
-      &:last-of-type {
-        border-radius: 0 @input-border-radius-mini @input-border-radius-mini 0;
-      }
-    }
-  }
-}
-
 .ald-textarea-large {
   padding: 5px 11px;
   font-size: @font-size-large;
@@ -408,3 +379,112 @@ textarea.ald-input-textarea,
   font-size: 11px;
   line-height: 16px;
 }
+
+.ant-input-group-wrapper {
+  &.ald-input-large {
+    .ant-input-group-addon {
+      padding: 4px 14px;
+      font-size: @input-font-size-large;
+    }
+
+    .ant-input {
+      height: @input-height-large;
+      padding: @input-padding-large;
+      font-size: @input-font-size-large;
+
+      .ant-input-prefix {
+        margin-right: @input-prefix-margin-right-large;
+      }
+
+      .ant-input-suffix .ant-input-clear-icon {
+        font-size: @input-clear-icon-small;
+      }
+    }
+
+    .ant-input:first-child,
+    .ant-input-group-addon:first-child {
+      border-radius: @input-border-radius-large 0 0 @input-border-radius-large;
+    }
+
+    .ant-input:last-child,
+    .ant-input-group-addon:last-child {
+      border-radius: 0 @input-border-radius-large @input-border-radius-large 0;
+    }
+  }
+
+  &.ald-input-middle {
+    .ant-input-group-addon {
+      padding: 4px 12px;
+      font-size: @input-font-size-middle;
+    }
+
+    .ant-input {
+      height: @input-height-middle;
+      padding: @input-padding-middle;
+      font-size: @input-font-size-middle;
+
+      .ant-input-prefix {
+        margin-right: @input-prefix-margin-right-middle;
+      }
+
+      .ant-input-suffix .ant-input-clear-icon {
+        font-size: @input-clear-icon-middle;
+      }
+    }
+
+    .ant-input:first-child,
+    .ant-input-group-addon:first-child {
+      border-radius: @input-border-radius-middle 0 0 @input-border-radius-middle;
+    }
+
+    .ant-input:last-child,
+    .ant-input-group-addon:last-child {
+      border-radius: 0 @input-border-radius-middle @input-border-radius-middle 0;
+    }
+  }
+
+  &.ald-input-small {
+    .ant-input-group-addon {
+      padding: 3px 10px;
+      font-size: @input-font-size-small;
+    }
+
+    .ant-input {
+      height: @input-height-small;
+      padding: @input-padding-small;
+      font-size: @input-font-size-small;
+
+      .ant-input-prefix {
+        margin-right: @input-prefix-margin-right-small;
+      }
+
+      .ant-input-suffix .ant-input-clear-icon {
+        font-size: @input-clear-icon-small;
+      }
+    }
+
+    .ant-input:first-child,
+    .ant-input-group-addon:first-child {
+      border-radius: @input-border-radius-small 0 0 @input-border-radius-small;
+    }
+
+    .ant-input:last-child,
+    .ant-input-group-addon:last-child {
+      border-radius: 0 @input-border-radius-small @input-border-radius-small 0;
+    }
+  }
+
+  .ant-input-group-addon {
+    background-color: @input-bg-color;
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}

package/lib/InputNumber/index.d.ts

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

package/lib/InputNumber/style/index.less

@@ -4,35 +4,39 @@
 @inputNumber-height-large: 36px;
 @inputNumber-font-size-large: 16px;
 @inputNumber-border-radius-large: 8px;
+@inputNumber-padding-large: 0 14px;
 
 @inputNumber-height-middle: 32px;
 @inputNumber-font-size-middle: 14px;
-@inputNumber-border-radius-middle: 6px;
+@inputNumber-border-radius-middle: 8px;
+@inputNumber-padding-middle: 0 12px;
 
 @inputNumber-height-small: 28px;
 @inputNumber-font-size-small: 12px;
-@inputNumber-border-radius-small: 4px;
+@inputNumber-border-radius-small: 6px;
+@inputNumber-padding-small: 0 10px;
+
 //默认
-@inputNumber-bg-color: @BG97;
-@inputNumber-border-color: @NL90;
+@inputNumber-bg-color: @BG100;
+@inputNumber-border-color: @BG60;
 @inputNumber-color: @NL0;
 @inputNumber-wrapper-bg-color: @BG95;
 //激活
-@inputNumber-active-bg-color: @BG97;
-@inputNumber-active-border-color: @B60;
+@inputNumber-active-bg-color: @BG100;
+@inputNumber-active-border-color: @B40;
 
 //disable
-@inputNumber-disabled-bg-color: @BG95;
-@inputNumber-disabled-border-color: @NL90;
-@inputNumber-disabled-color: @NL60;
+@inputNumber-disabled-bg-color: @BG90;
+@inputNumber-disabled-border-color: @BG60;
+@inputNumber-disabled-color: @NL40;
 //光标颜色
 @inputNumber-cursor-color: @B60;
 
 //前后填充
-@inputNumber-addon-bg-color: @BG95;
-@inputNumber-addon-color: @NL30;
-@inputNumber-addon-border-color: @NL90;
-@inputNumber-addon-disable-color: @NL60;
+@inputNumber-addon-bg-color: @BG100;
+@inputNumber-addon-color: @NL40;
+@inputNumber-addon-border-color: @BG60;
+@inputNumber-addon-disable-color: @NL40;
 
 .ald-inputNumber {
   &.ant-input-number {
@@ -57,30 +61,51 @@
     .ant-input-number-handler-wrap {
       overflow: hidden;
 
+      &:hover .ant-input-number-handler {
+        height: 50%;
+      }
+
       .ant-input-number-handler {
-        background-color: @BG95;
+        background-color: @BG100;
 
         .ant-input-number-handler-up-inner,
         .ant-input-number-handler-down-inner {
-          color: @NL50;
+          color: @NL40;
         }
 
         &:hover,
         &:active {
-          background-color: @NL95;
+          background-color: @BG100;
 
           .ant-input-number-handler-up-inner,
           .ant-input-number-handler-down-inner {
-            color: @B60;
+            color: @NL40;
           }
         }
       }
+
+      .ant-input-number-handler-down {
+        border-top: 0;
+      }
+
+      .ant-input-number-handler-up:hover {
+        height: 50% !important; // antd中就是 !important写法，这里做覆盖
+        background: @BG80;
+      }
+
+      .ant-input-number-handler-down:hover {
+        height: 50% !important; // 这里的!important同上
+        background: @BG80;
+      }
     }
 
     &.ald-inputNumber-large {
       height: @inputNumber-height-large;
       font-size: @inputNumber-font-size-large;
-      border-radius: @inputNumber-border-radius-large;
+
+      .ant-input-number-input {
+        padding: @inputNumber-padding-large;
+      }
 
       .ant-input-number-handler-wrap {
         border-radius: 0 @inputNumber-border-radius-large @inputNumber-border-radius-large 0;
@@ -90,7 +115,10 @@
     &.ald-inputNumber-middle {
       height: @inputNumber-height-middle;
       font-size: @inputNumber-font-size-middle;
-      border-radius: @inputNumber-border-radius-middle;
+
+      .ant-input-number-input {
+        padding: @inputNumber-padding-middle;
+      }
 
       .ant-input-number-handler-wrap {
         border-radius: 0 @inputNumber-border-radius-middle @inputNumber-border-radius-middle 0;
@@ -100,10 +128,13 @@
     &.ald-inputNumber-small {
       height: @inputNumber-height-small;
       font-size: @inputNumber-font-size-small;
-      border-radius: @inputNumber-border-radius-small;
+
+      .ant-input-number-input {
+        padding: @inputNumber-padding-small;
+      }
 
       .ant-input-number-handler-wrap {
-        border-radius: 0 @inputNumber-border-radius-small @inputNumber-border-radius-small 0;
+        border-radius: 0 @inputNumber-border-radius-small+1 @inputNumber-border-radius-small+1 0;
       }
     }
 
@@ -122,7 +153,7 @@
     &-focused {
       background-color: @inputNumber-active-bg-color;
       border-color: @inputNumber-active-border-color;
-      box-shadow: 0 0 0 0.5px @inputNumber-active-border-color;
+      box-shadow: @shadow-primary;
     }
   }
 
@@ -139,6 +170,9 @@
       border-radius: @inputNumber-border-radius-large;
 
       .ant-input-number-group-addon {
+        height: @inputNumber-height-large;
+        padding: 0 14px;
+
         &:first-child {
           border-radius: @inputNumber-border-radius-large 0 0 @inputNumber-border-radius-large;
         }
@@ -146,6 +180,10 @@
         &:last-child {
           border-radius: 0 @inputNumber-border-radius-large @inputNumber-border-radius-large 0;
         }
+
+        & + .ant-input-number {
+          border-radius: 0;
+        }
       }
     }
 
@@ -154,6 +192,9 @@
       border-radius: @inputNumber-border-radius-middle;
 
       .ant-input-number-group-addon {
+        height: @inputNumber-height-middle;
+        padding: 0 12px;
+
         &:first-child {
           border-radius: @inputNumber-border-radius-middle 0 0 @inputNumber-border-radius-middle;
         }
@@ -169,6 +210,9 @@
       border-radius: @inputNumber-border-radius-small;
 
       .ant-input-number-group-addon {
+        height: @inputNumber-height-small;
+        padding: 0 10px;
+
         &:first-child {
           border-radius: @inputNumber-border-radius-small 0 0 @inputNumber-border-radius-small;
         }
@@ -208,10 +252,6 @@
         z-index: 2;
         margin: 0;
         padding: 0;
-
-        .ant-input-number-handler-wrap {
-          border-radius: 0;
-        }
       }
     }