@aloudata/aloudata-design 0.2.6 → 0.3.0

package/es/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: @NL60;
 
-.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/es/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 };

package/es/InputNumber/index.js

@@ -0,0 +1,32 @@
+import "antd/es/input-number/style";
+import _InputNumber from "antd/es/input-number";
+var _excluded = ["className", "disabled", "size"];
+
+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; }
+
+import React from 'react';
+import classnames from 'classnames';
+export default function InputNumber(props) {
+  var className = props.className,
+      disabled = props.disabled,
+      size = props.size,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var getClassName = function getClassName() {
+    var _classnames;
+
+    return classnames(className, 'ald-inputNumber', (_classnames = {
+      'ald-inputNumber-disabled': disabled
+    }, _defineProperty(_classnames, "ald-inputNumber-large", size === 'large'), _defineProperty(_classnames, "ald-inputNumber-small", size === 'small'), _defineProperty(_classnames, "ald-inputNumber-middle", size !== 'large' && size !== 'small'), _classnames));
+  };
+
+  return /*#__PURE__*/React.createElement(_InputNumber, Object.assign({}, rest, {
+    disabled: disabled,
+    size: size,
+    className: getClassName()
+  }));
+}

package/es/InputNumber/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/es/InputNumber/style/index.js

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/es/InputNumber/style/index.less

@@ -0,0 +1,224 @@
+/* stylelint-disable no-descending-specificity */
+@import '../../style/index.less';
+
+@InputNumber-height-large: 36px;
+@InputNumber-fontSize-large: 16px;
+@InputNumber-borderRadius-large: 8px;
+
+@InputNumber-height-middle: 32px;
+@InputNumber-fontSize-middle: 14px;
+@InputNumber-borderRadius-middle: 6px;
+
+@InputNumber-height-small: 28px;
+@InputNumber-fontSize-small: 12px;
+@InputNumber-borderRadius-small: 4px;
+//默认
+@InputNumber-bgColor: @BG97;
+@InputNumber-borderColor: @NL90;
+@InputNumber-color: @NL0;
+@InputNumber-wrapper-bgColor: @BG95;
+//激活
+@InputNumber-active-bgColor: @BG97;
+@InputNumber-active-borderColor: @B60;
+
+//disable
+@InputNumber-disabled-bgColor: @BG95;
+@InputNumber-disabled-borderColor: @NL90;
+@InputNumber-disabled-color: @NL60;
+//光标颜色
+@InputNumber-cursor-color: @B60;
+
+//前后填充
+@InputNumber-addon-bgColor: @BG95;
+@InputNumber-addon-color: @NL30;
+@InputNumber-addon-borderColor: @NL90;
+@InputNumber-addon-disable-color: @NL60;
+
+.ald-inputNumber {
+  &.ant-input-number {
+    height: @InputNumber-height-middle;
+    // overflow: hidden;
+    color: @InputNumber-color;
+    font-size: @InputNumber-fontSize-middle;
+    background-color: @InputNumber-bgColor;
+    border-color: @InputNumber-borderColor;
+    border-radius: @InputNumber-borderRadius-middle;
+    box-shadow: none;
+
+    .ant-input-number-input-wrap {
+      height: 100%;
+
+      .ant-input-number-input {
+        height: 100%;
+        caret-color: @InputNumber-cursor-color;
+      }
+    }
+
+    .ant-input-number-handler-wrap {
+      overflow: hidden;
+
+      .ant-input-number-handler {
+        background-color: @BG95;
+
+        .ant-input-number-handler-up-inner,
+        .ant-input-number-handler-down-inner {
+          color: @NL50;
+        }
+
+        &:hover,
+        &:active {
+          background-color: @NL95;
+
+          .ant-input-number-handler-up-inner,
+          .ant-input-number-handler-down-inner {
+            color: @B60;
+          }
+        }
+      }
+    }
+
+    &.ald-inputNumber-large {
+      height: @InputNumber-height-large;
+      font-size: @InputNumber-fontSize-large;
+      border-radius: @InputNumber-borderRadius-large;
+
+      .ant-input-number-handler-wrap {
+        border-radius: 0 @InputNumber-borderRadius-large @InputNumber-borderRadius-large 0;
+      }
+    }
+
+    &.ald-inputNumber-middle {
+      height: @InputNumber-height-middle;
+      font-size: @InputNumber-fontSize-middle;
+      border-radius: @InputNumber-borderRadius-middle;
+
+      .ant-input-number-handler-wrap {
+        border-radius: 0 @InputNumber-borderRadius-middle @InputNumber-borderRadius-middle 0;
+      }
+    }
+
+    &.ald-inputNumber-small {
+      height: @InputNumber-height-small;
+      font-size: @InputNumber-fontSize-small;
+      border-radius: @InputNumber-borderRadius-small;
+
+      .ant-input-number-handler-wrap {
+        border-radius: 0 @InputNumber-borderRadius-small @InputNumber-borderRadius-small 0;
+      }
+    }
+
+    &-disabled {
+      color: @InputNumber-disabled-color;
+      background-color: @InputNumber-disabled-bgColor;
+      border-color: @InputNumber-disabled-borderColor;
+      cursor: initial;
+
+      .ant-input-number-input-wrap .ant-input-number-input {
+        cursor: initial;
+      }
+    }
+
+    &:hover:not(.ald-inputNumber-disabled),
+    &-focused {
+      background-color: @InputNumber-active-bgColor;
+      border-color: @InputNumber-active-borderColor;
+      box-shadow: 0 0 0 0.5px @InputNumber-active-borderColor;
+    }
+  }
+
+  &.ant-input-number-group-wrapper {
+    // height: @InputNumber-height-middle;
+    // overflow: hidden;
+    color: @InputNumber-color;
+    // background-color: @InputNumber-wrapper-bgColor;
+    border-color: @InputNumber-borderColor;
+    box-shadow: none;
+
+    &.ald-inputNumber-large {
+      font-size: @InputNumber-fontSize-large;
+      border-radius: @InputNumber-borderRadius-large;
+
+      .ant-input-number-group-addon {
+        &:first-child {
+          border-radius: @InputNumber-borderRadius-large 0 0 @InputNumber-borderRadius-large;
+        }
+
+        &:last-child {
+          border-radius: 0 @InputNumber-borderRadius-large @InputNumber-borderRadius-large 0;
+        }
+      }
+    }
+
+    &.ald-inputNumber-middle {
+      font-size: @InputNumber-fontSize-middle;
+      border-radius: @InputNumber-borderRadius-middle;
+
+      .ant-input-number-group-addon {
+        &:first-child {
+          border-radius: @InputNumber-borderRadius-middle 0 0 @InputNumber-borderRadius-middle;
+        }
+
+        &:last-child {
+          border-radius: 0 @InputNumber-borderRadius-middle @InputNumber-borderRadius-middle 0;
+        }
+      }
+    }
+
+    &.ald-inputNumber-small {
+      font-size: @InputNumber-fontSize-small;
+      border-radius: @InputNumber-borderRadius-small;
+
+      .ant-input-number-group-addon {
+        &:first-child {
+          border-radius: @InputNumber-borderRadius-small 0 0 @InputNumber-borderRadius-small;
+        }
+
+        &:last-child {
+          border-radius: 0 @InputNumber-borderRadius-small @InputNumber-borderRadius-small 0;
+        }
+      }
+    }
+
+    .ant-input-number-wrapper {
+      height: 100%;
+      // overflow: hidden;
+      font-size: inherit;
+
+      .ant-input-number-group-addon {
+        // overflow: hidden;
+        color: @InputNumber-addon-color;
+        font-size: inherit;
+        background-color: @InputNumber-addon-bgColor;
+        // border-radius: @InputNumber-borderRadius-middle;
+        border-color: @InputNumber-addon-borderColor;
+
+        &:first-child {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+
+        &:last-child {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+
+      .ald-inputNumber {
+        position: relative;
+        z-index: 2;
+        margin: 0;
+        padding: 0;
+
+        .ant-input-number-handler-wrap {
+          border-radius: 0;
+        }
+      }
+    }
+
+    &.ald-inputNumber-disabled {
+      .ant-input-number-wrapper .ant-input-number-group-addon {
+        color: @InputNumber-addon-disable-color;
+      }
+    }
+  }
+}

package/es/Menu/Divider.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-export interface IMenuDividerProps {
+import { MenuDividerProps } from 'antd/lib/menu/MenuDivider';
+export interface IMenuDividerProps extends MenuDividerProps {
 }
 export default function Menu(props: IMenuDividerProps): JSX.Element;

package/es/Menu/MenuItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { MenuItemProps } from 'antd/lib/menu/MenuItem';
 import { MenuClickEventHandler } from 'rc-menu/lib/interface';
-export interface IMenuItemProps {
+export interface IMenuItemProps extends MenuItemProps {
     /**
      * @description 唯一标志
      * @type string | number

package/es/Menu/SubMenu.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export interface ISubMenuProps {
+import { SubMenuProps } from 'antd/es/menu/SubMenu';
+export interface ISubMenuProps extends SubMenuProps {
     /**
      * @description 唯一标志
      * @type string | number

package/es/Menu/SubMenu.js

@@ -13,7 +13,7 @@ export default function SubMenu(props) {
   var popupClassName = props.popupClassName,
       otherProps = _objectWithoutProperties(props, _excluded);
 
-  var OFFSET_WIDTH = 4;
+  var OFFSET_WIDTH = 8;
   var OFFSET_HEIGHT = 0;
   return /*#__PURE__*/React.createElement(AntdSubMenu, Object.assign({
     popupClassName: classNames(popupClassName, 'ald-submenu'),

package/es/Menu/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { MenuProps } from 'antd';
 import MenuItem from './MenuItem';
 import type { MenuClickEventHandler } from 'rc-menu/lib/interface';
-export interface IMenuProps {
+export interface IMenuProps extends MenuProps {
     /**
      * @description 点击 MenuItem 调用此函数
      * @type Function