@aloudata/aloudata-design 1.10.14 → 2.0.0-beta.10

package/dist/Avatar/component/Avatar/index.js

@@ -2,10 +2,10 @@ var _excluded = ["size", "showFullValue", "children", "src"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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 { User } from "../../../Icon";
 import InternalAvatar from 'antd/lib/avatar/avatar';
 import classNames from 'classnames';
 import * as React from 'react';
-import DefaultAvatar from "./avatar";
 var ZERO = 0;
 var Avatar = function Avatar(props) {
   var _props$size = props.size,
@@ -32,15 +32,17 @@ var Avatar = function Avatar(props) {
     return children;
   };
   var defaultSrc = React.useMemo(function () {
-    if (typeof src === 'undefined' && typeof children === 'undefined') {
-      return /*#__PURE__*/React.createElement(DefaultAvatar, null);
+    if (typeof src === 'undefined' || !src) {
+      return /*#__PURE__*/React.createElement(User, {
+        size: size
+      });
     }
     return src;
-  }, [src, children]);
-  return /*#__PURE__*/React.createElement(InternalAvatar, _extends({
+  }, [size, src]);
+  return /*#__PURE__*/React.createElement(InternalAvatar, _extends({}, restProps, {
     size: typeof size === 'number' ? size : undefined,
-    className: getSizeClass(size),
+    className: classNames(getSizeClass(size), restProps.className),
     src: defaultSrc
-  }, restProps), getChildren());
+  }), getChildren());
 };
 export default Avatar;

package/dist/Avatar/style/index.less

@@ -2,7 +2,8 @@
 
 .ald-avatar.ald-avatar {
   color: @ND0;
-  background-color: @B40;
+  background-color: #fff;
+  border: 0;
 
   &.ald-avatar-default {
     background-color: transparent;
@@ -36,3 +37,9 @@
     line-height: 24px;
   }
 }
+
+.ant-avatar-group {
+  .ald-avatar.ald-avatar {
+    border: 1px solid #fff;
+  }
+}

package/dist/Button/index.d.ts

@@ -1,12 +1,12 @@
 import type { ButtonProps as AntdButtonProps, ButtonType as AntdButtonType } from 'antd/lib/button';
 import React from 'react';
 export declare const btnPrefix = "ald-btn";
-export type ButtonType = 'primary' | 'secondary' | 'dangerous' | 'text' | 'link';
+export type ButtonType = 'primary' | 'secondary' | 'dangerous' | 'text' | 'inverse';
 export type Size = 'small' | 'middle' | 'large';
 export interface IButtonProps extends Omit<AntdButtonProps, 'type' | 'dangerous' | 'shape' | 'icon' | 'href' | 'target' | 'onClick' | 'loading'> {
     /**
      * @description 类型
-     * @type 'primary' | 'secondary' | 'dangerous' | 'text' | 'link'
+     * @type 'primary' | 'secondary' | 'dangerous' | 'text' |'inverse'
      * @default primary
      */
     type?: ButtonType;
@@ -49,9 +49,8 @@ export interface IButtonProps extends Omit<AntdButtonProps, 'type' | 'dangerous'
 export declare function getButtonType(buttonType: ButtonType): AntdButtonType;
 export declare function getDangerStatus(buttonType: ButtonType): boolean;
 export declare function getButtonSizeClass(ButtonSize: Size): string;
-export declare function getIconSize(ButtonSize: Size): number;
 export declare function getShape(ButtonShape: 'circle' | 'default'): 'circle' | 'default';
-export declare const setIcon: (iconNode: React.ReactElement, size: Size, loading: boolean | {
+export declare const setIcon: (iconNode: React.ReactElement, loading: boolean | {
     delay?: number | undefined;
 }) => React.JSX.Element;
 declare function Button(props: IButtonProps): React.JSX.Element;

package/dist/Button/index.js

@@ -15,18 +15,15 @@ import React, { useContext } from 'react';
 import { ConfigContext } from "../ConfigProvider";
 import SizeContext from "../ConfigProvider/sizeContext";
 import { LoadingLine } from "../Icon";
-var ICON_LARGE = 24;
-var ICON_MIDDLE = 20;
-var ICON_SMALL = 16;
 export var btnPrefix = 'ald-btn';
 export function getButtonType(buttonType) {
-  if (!['primary', 'secondary', 'dangerous', 'text', 'link'].includes(buttonType)) {
+  if (!['primary', 'secondary', 'dangerous', 'text', 'inverse'].includes(buttonType)) {
     return 'default';
   }
   if (buttonType === 'dangerous') {
-    return 'primary';
+    return 'default';
   }
-  if (buttonType === 'secondary') {
+  if (buttonType === 'secondary' || buttonType === 'inverse') {
     return 'default';
   }
   return buttonType;
@@ -40,35 +37,25 @@ export function getDangerStatus(buttonType) {
 export function getButtonSizeClass(ButtonSize) {
   return ['small', 'large'].includes(ButtonSize) ? "".concat(btnPrefix, "-").concat(ButtonSize) : "".concat(btnPrefix, "-middle");
 }
-export function getIconSize(ButtonSize) {
-  if (ButtonSize === 'large') {
-    return ICON_LARGE;
-  }
-  if (ButtonSize === 'small') {
-    return ICON_SMALL;
-  }
-  return ICON_MIDDLE;
-}
 export function getShape(ButtonShape) {
   if (ButtonShape === 'circle') {
     return ButtonShape;
   }
   return 'default';
 }
-export var setIcon = function setIcon(iconNode, size, loading) {
+export var setIcon = function setIcon(iconNode, loading) {
   if (iconNode) {
     var p = _objectSpread({
       className: '',
-      size: ICON_LARGE,
       fill: 'currentColor'
     }, iconNode.props);
-    p.size = getIconSize(size);
+    p.size = '1em';
     return /*#__PURE__*/React.cloneElement(iconNode, p);
   }
   if (loading) {
     return /*#__PURE__*/React.createElement(LoadingLine, {
       className: "ald-loading-spin",
-      size: getIconSize(size),
+      size: '1em',
       color: "currentColor"
     });
   }
@@ -99,7 +86,7 @@ function Button(props) {
   var size = compactSize || customSize || contentSize || 'middle';
   return /*#__PURE__*/React.createElement(AntdButton, _extends({}, rest, {
     disabled: loading ? true : disabled,
-    icon: setIcon(icon, size, loading),
+    icon: setIcon(icon, loading),
     type: getButtonType(type),
     className: classNames(btnPrefix, "".concat(btnPrefix, "-").concat(type), className, getButtonSizeClass(size), compactItemClassnames),
     danger: getDangerStatus(type),

package/dist/Button/style/size.less

@@ -2,9 +2,9 @@
   &-large {
     min-width: auto;
     height: @button-height-large;
-    padding: @button-border-padding-large;
+    padding: @button-padding-large;
     font-size: @button-text-size-large;
-    line-height: 24px;
+    line-height: @button-line-height-large;
     border-radius: @button-border-radius-large;
 
     &.ant-btn-icon-only {
@@ -22,19 +22,24 @@
       border-radius: 50%;
     }
 
-    gap: @button-left-icon-margin-right-large;
+    gap: @button-gap-large;
 
     &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
       min-width: @button-text-min-width-large;
     }
+
+    svg {
+      font-size: @button-line-height-large;
+    }
   }
 
   &-middle {
     min-width: auto;
     height: @button-height-middle;
-    padding: @button-border-padding-middle;
+    padding: @button-padding-middle;
     font-size: @button-text-size-middle;
     border-radius: @button-border-radius-middle;
+    line-height: @button-line-height-middle;
 
     &.ant-btn-icon-only {
       min-width: @button-height-middle;
@@ -51,18 +56,22 @@
       border-radius: 50%;
     }
 
-    gap: @button-left-icon-margin-right-middle;
+    gap: @button-gap-middle;
 
     &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
       min-width: @button-text-min-width-middle;
     }
+
+    svg {
+      font-size: @button-line-height-middle;
+    }
   }
 
   &-small {
     height: @button-height-small;
-    padding: @button-border-padding-small;
+    padding: @button-padding-small;
     font-size: @button-text-size-small;
-    line-height: 22px;
+    line-height: @button-line-height-small;
     border-radius: @button-border-radius-small;
 
     &.ant-btn-icon-only {
@@ -80,10 +89,14 @@
       border-radius: 50%;
     }
 
-    gap: @button-left-icon-margin-right-small;
+    gap: @button-gap-small;
 
     &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
       min-width: @button-text-min-width-small;
     }
+
+    svg {
+      font-size: @button-line-height-small;
+    }
   }
 }

package/dist/Button/style/type.less

@@ -40,7 +40,12 @@
         box-shadow: none;
       }
 
-      &:hover,
+      &:hover {
+        color: @button-primary-color-hover;
+        background-color: @button-primary-bg-color-hover;
+        border-color: @button-primary-bg-color-hover;
+      }
+
       &:active {
         color: @button-primary-color-active;
         background-color: @button-primary-bg-color-active;
@@ -78,7 +83,12 @@
         box-shadow: unset;
       }
 
-      &:hover:not(:disabled),
+      &:hover:not(:disabled) {
+        color: @button-dangerous-color-hover;
+        background-color: @button-dangerous-bg-color-hover;
+        border-color: @button-dangerous-bg-color-hover;
+      }
+
       &:active:not(:disabled) {
         color: @button-dangerous-color-active;
         background-color: @button-dangerous-bg-color-active;
@@ -125,7 +135,12 @@
         box-shadow: none;
       }
 
-      &:hover,
+      &:hover {
+        color: @button-secondary-color-hover;
+        background-color: @button-secondary-bg-color-hover;
+        border-color: @button-secondary-border-color-hover;
+      }
+
       &:active {
         color: @button-secondary-color-active;
         background-color: @button-secondary-bg-color-active;
@@ -136,7 +151,7 @@
       &.ant-btn-loading {
         color: @button-secondary-color-disable;
         background-color: @button-secondary-bg-color-disable;
-        border-color: @button-secondary-border-color;
+        border-color: @button-secondary-border-color-disable;
         cursor: default;
         opacity: 0.5;
 
@@ -145,7 +160,7 @@
         &:active {
           color: @button-secondary-color-disable;
           background-color: @button-secondary-bg-color-disable;
-          border-color: @button-secondary-border-color;
+          border-color: @button-secondary-border-color-disable;
         }
       }
     }
@@ -153,26 +168,35 @@
     &-text {
       color: @button-text-color;
       background-color: @button-text-bg-color;
-      border: none;
+      border: 1px solid;
+      border-color: @button-text-border-color;
       box-shadow: none;
 
-      &:focus,
-      &:active {
+      &:focus {
         color: @button-text-color;
         background-color: @button-text-bg-color;
+        border-color: @button-text-border-color;
         box-shadow: none;
       }
 
-      &:hover,
-      &.ant-btn-loading {
+      &:hover {
+        color: @button-text-color-hover;
+        background-color: @button-text-bg-color-hover;
+        border-color: @button-text-border-color-hover;
+      }
+
+      &:active {
         color: @button-text-color-active;
         background-color: @button-text-bg-color-active;
-        mix-blend-mode: multiply;
+        border-color: @button-text-border-color-active;
+        box-shadow: none;
       }
 
-      &[disabled] {
+      &[disabled],
+      &.ant-btn-loading {
         color: @button-text-color-disable;
         background-color: @button-text-bg-color-disable;
+        border-color: @button-text-border-color-disable;
         cursor: default;
         opacity: 0.5;
 
@@ -181,48 +205,52 @@
         &:active {
           color: @button-text-color-disable;
           background-color: @button-text-bg-color-disable;
+          border-color: @button-text-border-color-disable;
         }
       }
     }
 
-    &-link {
-      color: @button-link-color;
-      font-weight: 400;
-      //text-shadow: @text-shadow;
-      background-color: @button-link-bg-color;
-      border-color: @button-link-bg-color;
+    &-inverse {
+      color: @button-inverse-color;
+      background-color: @button-inverse-bg-color;
+      border: 1px solid;
+      border-color: @button-inverse-border-color;
       box-shadow: none;
-      padding: 0 !important;
 
       &:focus {
-        color: @button-link-color;
-        //text-shadow: @text-shadow;
-        background-color: @button-link-bg-color;
-        border-color: @button-link-bg-color;
+        color: @button-inverse-color;
+        background-color: @button-inverse-bg-color;
+        border-color: @button-inverse-border-color;
         box-shadow: none;
       }
 
-      &:hover,
+      &:hover {
+        color: @button-inverse-color-hover;
+        background-color: @button-inverse-bg-color-hover;
+        border-color: @button-inverse-border-color-hover;
+      }
+
       &:active {
-        color: @button-link-color-active;
-        background-color: @button-link-bg-color-active;
-        border-color: @button-link-bg-color-active;
+        color: @button-inverse-color-active;
+        background-color: @button-inverse-bg-color-active;
+        border-color: @button-inverse-border-color-active;
+        box-shadow: none;
       }
 
       &[disabled],
       &.ant-btn-loading {
-        color: @button-link-color-disable;
-        background-color: @button-link-bg-color-disable;
-        border-color: @button-link-bg-color-disable;
+        color: @button-inverse-color-disable;
+        background-color: @button-inverse-bg-color-disable;
+        border-color: @button-inverse-border-color-disable;
         cursor: default;
         opacity: 0.5;
 
         &:hover,
         &:focus,
         &:active {
-          color: @button-link-color-disable;
-          background-color: @button-link-bg-color-disable;
-          border-color: @button-link-bg-color-disable;
+          color: @button-inverse-color-disable;
+          background-color: @button-inverse-bg-color-disable;
+          border-color: @button-inverse-border-color-disable;
         }
       }
     }