@aloudata/aloudata-design 0.2.7 → 0.3.0-beta.1

package/lib/Empty/style/index.less

@@ -3,22 +3,67 @@
 @ald-prefix: ant;
 @ald-iconfont-css-prefix: anticon;
 
-.ant-empty {
+.ald-empty {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100%;
-  padding: 46px 0;
 
-  &-content {
-    text-align: center;
+  &.ald-empty-large {
+    .ald-empty-image {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .ald-empty-img {
+        display: block;
+        width: 264px;
+        max-width: fit-content;
+        height: auto;
+      }
+    }
+
+    .ald-empty-title {
+      margin-top: 12px;
+      color: @NL0;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .ald-empty-description {
+      margin-top: 16px;
+      color: @NL30;
+      font-size: 14px;
+      line-height: 20px;
+    }
   }
 
-  &-description {
-    color: @NL0;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 16px;
-    text-align: center;
+  &.ald-empty-small {
+    .ald-empty-image {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .ald-empty-img {
+        display: block;
+        width: 48px;
+        max-width: fit-content;
+        height: auto;
+      }
+    }
+
+    .ald-empty-title {
+      margin-top: 12px;
+      color: @NL50;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .ald-empty-description {
+      margin-top: 16px;
+      color: @NL50;
+      font-size: 14px;
+      line-height: 20px;
+    }
   }
 }

package/lib/Icon/index.d.ts

@@ -5,9 +5,9 @@ declare const Icon: (props: IIconProps) => JSX.Element;
 export default Icon;
 export type { IconFontProps };
 export { createFromIconfontCN };
-export interface IIconProps extends IconFontProps {
+export interface IIconProps extends Omit<IconFontProps, 'size'> {
     className?: string;
-    size?: number;
+    size?: number | string;
     style?: React.CSSProperties;
     color?: string;
     type: string;

package/lib/Icon/index.js

@@ -15,6 +15,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _icons = require("@ant-design/icons");
 
+var _excluded = ["className", "size", "style", "color"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -23,6 +25,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+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; }
+
 // @ts-ignore iconfont.js 没有ts类型定义
 // import iconfontJs from './iconfont/iconfont';
 var iconfontJs = require('./iconfont/iconfont');
@@ -38,7 +44,9 @@ var Icon = function Icon(props) {
       size = _props$size === void 0 ? DEFAULT_SIZE : _props$size,
       _props$style = props.style,
       style = _props$style === void 0 ? {} : _props$style,
-      color = props.color; // 添加一个前缀
+      color = props.color,
+      restProps = _objectWithoutProperties(props, _excluded); // 添加一个前缀
+
 
   var prefix = '';
   var type = "".concat(prefix).concat(props.type);
@@ -51,7 +59,7 @@ var Icon = function Icon(props) {
     width: size
   }, style);
 
-  return /*#__PURE__*/_react.default.createElement(IconFont, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(IconFont, Object.assign({}, restProps, {
     style: finalStyle,
     type: type,
     className: className

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { GroupProps } from 'antd/lib/input';
-export interface IGroupProps extends GroupProps {
+import { TSize } from '../Input';
+export interface IGroupProps extends Omit<GroupProps, 'size'> {
     /**
      * @description 是否用紧凑模式
      * @default false
@@ -8,8 +9,9 @@ export interface IGroupProps extends GroupProps {
     compact?: boolean;
     /**
      * @description Input.Group 中所有的 Input 的大小，可选 large default small
+     * @type 'mini'|'small' | 'default' | 'large';
      * @default default
      */
-    size?: 'large' | 'default' | 'small';
+    size?: TSize;
 }
 export default function Group(props: IGroupProps): JSX.Element;

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

@@ -9,10 +9,33 @@ var _react = _interopRequireDefault(require("react"));
 
 var _input = _interopRequireDefault(require("antd/lib/input"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["size"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 var AntdGroup = _input.default.Group;
 
 function Group(props) {
-  return /*#__PURE__*/_react.default.createElement(AntdGroup, Object.assign({}, props));
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var getClassName = function getClassName(groupSize) {
+    return (0, _classnames.default)('ald-input-group', {
+      'ald-input-group-large': groupSize === 'large',
+      'ald-input-group-small': groupSize === 'small',
+      'ald-input-group-mini': groupSize === 'mini',
+      'ald-input-group-middle': !['mini', 'small', 'large'].includes(groupSize)
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(AntdGroup, Object.assign({
+    className: getClassName(size)
+  }, rest));
 }

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

@@ -7,7 +7,7 @@ interface IShowCountProps {
         maxLength?: number;
     }) => string;
 }
-export declare type TSize = 'small' | 'default' | 'large';
+export declare type TSize = 'mini' | 'small' | 'default' | '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'> {

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Input = _interopRequireDefault(require("antd/lib/input/Input"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _excluded = ["size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,11 +32,22 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return 'middle';
   };
 
+  var getClassName = function getClassName(inputSize) {
+    return (0, _classnames.default)('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.default.createElement(_Input.default, Object.assign({}, rest, {
     // @ts-ignore
     ref: ref,
     size: getInputSize(size),
     bordered: true,
+    className: getClassName(size),
     addonAfter: null,
     addonBefore: null,
     suffix: null

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

@@ -1,11 +1,17 @@
 import React from 'react';
 import { PasswordProps } from 'antd/lib/input/Password';
-export interface IPasswordProps extends PasswordProps {
+import { TSize } from '../Input';
+export interface IPasswordProps extends Omit<PasswordProps, 'size'> {
     /**
      * @description 是否显示切换按钮
      * @default true
      */
     visibilityToggle?: boolean;
+    /**
+     * @description 尺寸大学
+     * @default default
+     */
+    size?: TSize;
 }
 declare const _default: React.ForwardRefExoticComponent<IPasswordProps & React.RefAttributes<any>>;
 export default _default;

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

@@ -11,16 +11,39 @@ var _Icon = _interopRequireDefault(require("../../../Icon"));
 
 var _Password = _interopRequireDefault(require("antd/lib/input/Password"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["size"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var _default = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_Password.default, Object.assign({}, props, {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var getClassName = function getClassName(inputSize) {
+    return (0, _classnames.default)('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.default.createElement(_Password.default, Object.assign({}, restProps, {
     ref: ref,
+    className: getClassName(size),
     iconRender: function iconRender(visible) {
       var type = visible ? 'eye' : 'eye_off';
       return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        type: type
+        type: type,
+        size: "1em"
       });
     }
   }));

package/lib/Input/style/index.less

@@ -1,25 +1,63 @@
+/* stylelint-disable no-descending-specificity */
 @import '../../style/index.less';
 @import '../../Icon/index.less';
 
 @ald-prefix: ant;
 
 @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;
+// size===middle
+@Input-height-middle: 32px;
+@Input-padding-middle: 5px 11px;
+@Input-fontSize-middle: 14px;
+@Input-borderRadius-middle: 6px;
+@input-prefix-marginRight-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;
+// size===mini
+@Input-height-mini: 24px;
+@Input-padding-mini: 3px 7px;
+@Input-fontSize-mini: 12px;
+@Input-borderRadius-mini: 4px;
+@input-prefix-marginRight-mini: 4px;
+//custom status
+@Input-borderColor: @NL90;
+@Input-fontColor: @NL0;
+@Input-placeholderColor: @NL80;
+@Input-prefix-color: @NL50;
+@Input-bgColor: @BG97;
+// active status
+@Input-active-borderColor: @B60;
+@Input-boxShadow-active: 0 0 0 0.5px @B60;
+// disabled status
+@Input-disabled-borderColor: @NL90;
+@Input-disabled-bgColor: @BG95;
+@Input-disabled-fontColor: @NL50;
 
-.ant-input {
-  height: 28px;
+.ant-input.ald-input {
   color: @NL0;
-  font-size: 12px;
-  border-radius: @ald-border-radius-base;
+  font-weight: 400;
+  background-color: @Input-bgColor;
+  border-color: @Input-borderColor;
+  border-radius: @Input-borderRadius-middle;
+  caret-color: @B60;
 
   &::placeholder {
-    color: @NL50;
+    color: @Input-placeholderColor;
   }
 
   &-prefix {
-    color: @NL30;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 16px;
+    color: @Input-prefix-color;
+    font-size: inherit;
   }
 
   &-suffix {
@@ -27,36 +65,28 @@
   }
 
   &:focus,
+  &:hover,
   &-focused {
-    border-color: @B40;
-    box-shadow: none;
+    border-color: @Input-active-borderColor;
+    box-shadow: @Input-boxShadow-active;
   }
 
-  &[disabled] {
-    color: @NL80;
-    background-color: @NL95;
-    border-color: @NL90;
+  &[disabled].ald-input {
+    color: @Input-disabled-fontColor;
+    background-color: @Input-disabled-bgColor;
+    border-color: @Input-disabled-borderColor;
+    box-shadow: none;
+    cursor: default;
 
     &::placeholder {
-      color: @NL80;
+      color: @Input-placeholderColor;
     }
   }
 
-  &-sm {
-    height: 24px;
-    font-size: 12px;
-    border-radius: @ald-border-radius-sm;
-  }
-
-  &-lg {
-    height: 32px;
-    font-size: 14px;
-  }
-
   &-affix-wrapper {
-    height: 28px;
-    padding: 0 12px;
-    border-radius: @ald-border-radius-base;
+    // height: 28px;
+    // padding: 0 12px;
+    // border-radius: @border-radius-base;
 
     &-hover,
     &-focused,
@@ -67,31 +97,236 @@
     .ant-input {
       height: 100%;
       border-radius: 0;
-      caret-color: @B40;
     }
   }
+
+  .ant-input {
+    font-size: inherit;
+  }
 }
 
 .ant-input-affix-wrapper.ant-input-affix-wrapper {
-  &-lg {
-    height: 32px;
-    padding: 4px 11px;
-    font-size: 14px;
+  background-color: @Input-bgColor;
+  border-color: @Input-borderColor;
+
+  &:hover,
+  &:focus,
+  &-focused {
+    border-color: @Input-active-borderColor;
+    box-shadow: @Input-boxShadow-active;
   }
 
-  &-sm {
-    height: 24px;
-    padding: 0 12px;
-    border-radius: @ald-border-radius-sm;
+  .ant-input {
+    color: @NL0;
+    background-color: @Input-bgColor;
+    border-radius: 0;
+    caret-color: @B60;
 
-    .ant-input-sm {
-      height: 22px;
+    &::placeholder {
+      color: @Input-placeholderColor;
     }
   }
 
+  .ald-input {
+    height: 1.5715em; //和行高一致
+  }
+
+  .ald-input-showCount {
+    border: none;
+    box-shadow: none;
+  }
+
+  .ant-input-prefix {
+    color: @NL50;
+  }
+
   .ant-input-suffix {
-    .anticon-close-circle.ant-input-clear-icon {
-      .ald-iconfont('\e616');
+    .ant-input-clear-icon {
+      color: @NL50;
+      font-size: inherit;
+    }
+
+    .ant-input-password-icon {
+      color: @NL50;
+    }
+  }
+}
+
+.ant-input-affix-wrapper-focused {
+  &.ant-input-password {
+    border-color: @Input-active-borderColor;
+    box-shadow: @Input-boxShadow-active;
+  }
+
+  &:hover {
+    border-color: @Input-active-borderColor;
+    box-shadow: @Input-boxShadow-active;
+  }
+}
+
+.ald-input {
+  &.ald-input-mini {
+    height: @Input-height-mini;
+    padding: @Input-padding-mini;
+    font-size: @Input-fontSize-mini;
+    border-radius: @Input-borderRadius-mini;
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-marginRight-mini;
+    }
+  }
+
+  &.ald-input-small {
+    height: @Input-height-small;
+    padding: @Input-padding-small;
+    font-size: @Input-fontSize-small;
+    border-radius: @Input-borderRadius-small;
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-marginRight-small;
+    }
+  }
+
+  &.ald-input-middle {
+    height: @Input-height-middle;
+    padding: @Input-padding-middle;
+    font-size: @Input-fontSize-middle;
+    border-radius: @Input-borderRadius-middle;
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-marginRight-middle;
+    }
+  }
+
+  &.ald-input-large {
+    height: @Input-height-large;
+    padding: @Input-padding-large;
+    font-size: @Input-fontSize-large;
+    border-radius: @Input-borderRadius-large;
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-marginRight-large;
+    }
+  }
+}
+
+.ald-input-group {
+  .ald-input {
+    margin: 0;
+  }
+}
+
+.ald-input-group-large {
+  .ald-input {
+    height: @Input-height-large;
+    padding: @Input-padding-large;
+    font-size: @Input-fontSize-large;
+
+    &.ant-input {
+      border-radius: @Input-borderRadius-large;
+    }
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-marginRight-large;
+    }
+  }
+
+  &.ant-input-group-compact {
+    .ald-input {
+      &:first-of-type {
+        border-radius: @Input-borderRadius-large 0 0 @Input-borderRadius-large;
+      }
+
+      &:last-of-type {
+        border-radius: 0 @Input-borderRadius-large @Input-borderRadius-large 0;
+      }
+    }
+  }
+}
+
+.ald-input-group-middle {
+  .ald-input {
+    height: @Input-height-middle;
+    padding: @Input-padding-middle;
+    font-size: @Input-fontSize-middle;
+    border-radius: @Input-borderRadius-middle;
+
+    &.ant-input {
+      border-radius: @Input-borderRadius-middle;
+    }
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-marginRight-middle;
+    }
+  }
+
+  &.ant-input-group-compact {
+    .ald-input {
+      &:first-of-type {
+        border-radius: @Input-borderRadius-middle 0 0 @Input-borderRadius-middle;
+      }
+
+      &:last-of-type {
+        border-radius: 0 @Input-borderRadius-middle @Input-borderRadius-middle 0;
+      }
+    }
+  }
+}
+
+.ald-input-group-small {
+  .ald-input {
+    height: @Input-height-small;
+    padding: @Input-padding-small;
+    font-size: @Input-fontSize-small;
+    border-radius: @Input-borderRadius-small;
+
+    &.ant-input {
+      border-radius: @Input-borderRadius-small;
+    }
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-marginRight-small;
+    }
+  }
+
+  &.ant-input-group-compact {
+    .ald-input {
+      &:first-of-type {
+        border-radius: @Input-borderRadius-small 0 0 @Input-borderRadius-small;
+      }
+
+      &:last-of-type {
+        border-radius: 0 @Input-borderRadius-small @Input-borderRadius-small 0;
+      }
+    }
+  }
+}
+
+.ald-input-group-mini {
+  .ald-input {
+    height: @Input-height-mini;
+    padding: @Input-padding-mini;
+    font-size: @Input-fontSize-mini;
+    border-radius: @Input-borderRadius-mini;
+
+    &.ant-input {
+      border-radius: @Input-borderRadius-mini;
+    }
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-marginRight-mini;
+    }
+  }
+
+  &.ant-input-group-compact {
+    .ald-input {
+      &:first-of-type {
+        border-radius: @Input-borderRadius-mini 0 0 @Input-borderRadius-mini;
+      }
+
+      &:last-of-type {
+        border-radius: 0 @Input-borderRadius-mini @Input-borderRadius-mini 0;
+      }
     }
   }
 }

package/lib/InputNumber/index.d.ts

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