@aloudata/aloudata-design 0.3.1 → 0.3.4

package/README.md

@@ -221,8 +221,18 @@ api展示为表格形势，可以使用**API**标签，如：
 
 请在./public/style/common.css 中自定义修改样式
 
-## 组件开发踩过的坑(持续更新中)
-
-1. 组件未暴露className
-2. 组件未暴露ref
-3. 组件未打包出ts校验类型
+## 按需引用
+
+```js
+[
+    'import',
+    {
+      libraryName: '@aloudata/aloudata-design',
+      libraryDirectory: 'es',
+      style:(name)=>{
+        return `${name}/style/index.less`
+      },
+      camel2DashComponentName: false,
+    },
+]
+```

package/es/Breadcrumb/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BreadcrumbItemProps, BreadcrumbProps } from 'antd';
 export type { BreadcrumbItemProps, BreadcrumbProps };
 declare const Breadcrumb: {

package/es/Button/index.js

@@ -1,5 +1,7 @@
 import "antd/es/button/style";
 import _Button from "antd/es/button";
+import "@aloudata/icons-react/styles/index.less";
+import _LoadingLine from "@aloudata/icons-react/es/icons/LoadingLine";
 var _excluded = ["type", "size", "shape", "loading", "disabled", "icon", "className"];
 
 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; }
@@ -14,7 +16,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React from 'react';
 import classNames from 'classnames';
-import LoadingIcon from '../Icon/icons/Loading';
 var iconPrefixCls = 'aldicon';
 var ICON_LARGE = 16;
 var ICON_MIDDLE = 14;
@@ -103,7 +104,7 @@ function Button(props) {
     }
 
     if (loading) {
-      return /*#__PURE__*/React.createElement(LoadingIcon, {
+      return /*#__PURE__*/React.createElement(_LoadingLine, {
         spin: true,
         size: ICON_LARGE,
         className: classNames("".concat(iconPrefixCls, "-icon-left"), iconPrefixCls),

package/es/Button/style/index.less

@@ -15,12 +15,9 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      height: @height-base;
       font-weight: 500;
       font-size: 12px;
-      line-height: @height-base;
       text-shadow: none;
-      vertical-align: bottom;
     }
 
     &.ant-btn-loading::before {
@@ -28,198 +25,196 @@
     }
 
     &-primary {
-      color: @Button-primary-color;
-      background-color: @Button-primary-bgColor;
-      border-color: @Button-primary-bgColor;
+      color: @button-primary-color;
+      background-color: @button-primary-bg-color;
+      border-color: @button-primary-bg-color;
       box-shadow: none;
 
       &:focus {
         //text-shadow: @text-shadow;
-        color: @Button-primary-color;
-        background-color: @Button-primary-bgColor;
-        border-color: @Button-primary-bgColor;
+        color: @button-primary-color;
+        background-color: @button-primary-bg-color;
+        border-color: @button-primary-bg-color;
         box-shadow: none;
       }
 
       &:hover,
       &:active {
-        color: @Button-primary-color-active;
-        background-color: @Button-primary-bgColor-active;
-        border-color: @Button-primary-bgColor-active;
+        color: @button-primary-color-active;
+        background-color: @button-primary-bg-color-active;
+        border-color: @button-primary-bg-color-active;
       }
 
       &.ant-btn-loading,
       &[disabled] {
-        color: @Button-primary-color-disable;
-        background-color: @Button-primary-bgColor-disable;
-        border-color: @Button-primary-bgColor-disable;
+        color: @button-primary-color-disable;
+        background-color: @button-primary-bg-color-disable;
+        border-color: @button-primary-bg-color-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @Button-primary-color-disable;
-          background-color: @Button-primary-bgColor-disable;
-          border-color: @Button-primary-bgColor-disable;
+          color: @button-primary-color-disable;
+          background-color: @button-primary-bg-color-disable;
+          border-color: @button-primary-bg-color-disable;
         }
       }
     }
 
     &-dangerous {
-      color: @Button-dangerous-color;
-      background-color: @Button-dangerous-bgColor;
-      border-color: @Button-dangerous-bgColor;
+      color: @button-dangerous-color;
+      background-color: @button-dangerous-bg-color;
+      border-color: @button-dangerous-bg-color;
       box-shadow: unset;
 
       &:focus {
-        color: @Button-dangerous-color;
-        background-color: @Button-dangerous-bgColor;
-        border-color: @Button-dangerous-bgColor;
+        color: @button-dangerous-color;
+        background-color: @button-dangerous-bg-color;
+        border-color: @button-dangerous-bg-color;
         box-shadow: unset;
       }
 
       &:hover,
       &:active {
-        color: @Button-dangerous-color-active;
-        background-color: @Button-dangerous-bgColor-active;
-        border-color: @Button-dangerous-bgColor-active;
+        color: @button-dangerous-color-active;
+        background-color: @button-dangerous-bg-color-active;
+        border-color: @button-dangerous-bg-color-active;
       }
 
       &[disabled],
       &.ant-btn-loading {
-        color: @Button-dangerous-color-disable;
-        background-color: @Button-dangerous-bgColor-disable;
-        border-color: @Button-dangerous-bgColor-disable;
+        color: @button-dangerous-color-disable;
+        background-color: @button-dangerous-bg-color-disable;
+        border-color: @button-dangerous-bg-color-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @Button-dangerous-color-disable;
-          background-color: @Button-dangerous-bgColor-disable;
-          border-color: @Button-dangerous-bgColor-disable;
+          color: @button-dangerous-color-disable;
+          background-color: @button-dangerous-bg-color-disable;
+          border-color: @button-dangerous-bg-color-disable;
         }
       }
     }
 
     &.ant-btn-circle {
       justify-content: center;
-      min-width: @height-base;
-      height: @height-base;
       padding: 0;
       border-radius: 50%;
     }
 
     &-default,
     &-secondary {
-      color: @Button-secondary-color;
-      background-color: @Button-secondary-bgColor;
+      color: @button-secondary-color;
+      background-color: @button-secondary-bg-color;
       border: 1px solid;
-      border-color: @Button-secondary-borderColor;
+      border-color: @button-secondary-border-color;
       box-shadow: none;
 
       &:focus {
-        color: @Button-secondary-color;
+        color: @button-secondary-color;
         //text-shadow: @text-shadow;
-        background-color: @Button-secondary-bgColor;
-        border-color: @Button-secondary-borderColor;
+        background-color: @button-secondary-bg-color;
+        border-color: @button-secondary-border-color;
         box-shadow: none;
       }
 
       &:hover,
       &:active {
-        color: @Button-secondary-color-active;
-        background-color: @Button-secondary-bgColor-active;
-        border-color: @Button-secondary-borderColor-active;
+        color: @button-secondary-color-active;
+        background-color: @button-secondary-bg-color-active;
+        border-color: @button-secondary-border-color-active;
       }
 
       &[disabled],
       &.ant-btn-loading {
-        color: @Button-secondary-color-disable;
-        background-color: @Button-secondary-bgColor-disable;
-        border-color: @Button-secondary-borderColor;
+        color: @button-secondary-color-disable;
+        background-color: @button-secondary-bg-color-disable;
+        border-color: @button-secondary-border-color;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @Button-secondary-color-disable;
-          background-color: @Button-secondary-bgColor-disable;
-          border-color: @Button-secondary-borderColor;
+          color: @button-secondary-color-disable;
+          background-color: @button-secondary-bg-color-disable;
+          border-color: @button-secondary-border-color;
         }
       }
     }
 
     &-text {
-      color: @Button-text-color;
-      background-color: @Button-text-bgColor;
+      color: @button-text-color;
+      background-color: @button-text-bg-color;
       border: none;
       box-shadow: none;
 
       &:focus,
       &:active {
-        color: @Button-text-color;
-        background-color: @Button-text-bgColor;
+        color: @button-text-color;
+        background-color: @button-text-bg-color;
         box-shadow: none;
       }
 
       &:hover,
       &.ant-btn-loading {
-        color: @Button-text-color-active;
-        background-color: @Button-text-bgColor-active;
+        color: @button-text-color-active;
+        background-color: @button-text-bg-color-active;
       }
 
       &[disabled] {
-        color: @Button-text-color-disable;
-        background-color: @Button-text-bgColor-disable;
+        color: @button-text-color-disable;
+        background-color: @button-text-bg-color-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @Button-text-color-disable;
-          background-color: @Button-text-bgColor-disable;
+          color: @button-text-color-disable;
+          background-color: @button-text-bg-color-disable;
         }
       }
     }
 
     &-link {
-      color: @Button-link-color;
+      color: @button-link-color;
       font-weight: 400;
       //text-shadow: @text-shadow;
-      background-color: @Button-link-bgColor;
-      border-color: @Button-link-bgColor;
+      background-color: @button-link-bg-color;
+      border-color: @button-link-bg-color;
       box-shadow: none;
 
       &:focus {
-        color: @Button-link-color;
+        color: @button-link-color;
         font-weight: 400;
         //text-shadow: @text-shadow;
-        background-color: @Button-link-bgColor;
-        border-color: @Button-link-bgColor;
+        background-color: @button-link-bg-color;
+        border-color: @button-link-bg-color;
         box-shadow: none;
       }
 
       &:hover,
       &:active {
-        color: @Button-link-color-active;
-        background-color: @Button-link-bgColor-active;
-        border-color: @Button-link-bgColor-active;
+        color: @button-link-color-active;
+        background-color: @button-link-bg-color-active;
+        border-color: @button-link-bg-color-active;
       }
 
       &[disabled],
       &.ant-btn-loading {
-        color: @Button-link-color-disable;
-        background-color: @Button-link-bgColor-disable;
-        border-color: @Button-link-bgColor-disable;
+        color: @button-link-color-disable;
+        background-color: @button-link-bg-color-disable;
+        border-color: @button-link-bg-color-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @Button-link-color-disable;
-          background-color: @Button-link-bgColor-disable;
-          border-color: @Button-link-bgColor-disable;
+          color: @button-link-color-disable;
+          background-color: @button-link-bg-color-disable;
+          border-color: @button-link-bg-color-disable;
         }
       }
     }
@@ -228,112 +223,126 @@
       justify-content: center;
       width: initial;
       padding: 0;
-      vertical-align: bottom;
-
-      &.ant-btn-loading-icon {
-        vertical-align: baseline;
-      }
-      .@{ald-iconfont-css-prefix} {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0;
-      }
+      vertical-align: baseline;
     }
 
     &-large {
       min-width: auto;
-      height: @Button-height-large;
-      padding: @Button-border-padding-large;
-      font-size: @Button-text-size-large;
-      border-radius: @Button-borderRadius-large;
+      height: @button-height-large;
+      padding: @button-border-padding-large;
+      font-size: @button-text-size-large;
+      border-radius: @button-border-radius-large;
 
       &.ant-btn-icon-only {
-        min-width: @Button-height-large;
-        height: @Button-height-large;
-        border-radius: @Button-borderRadius-large;
+        min-width: @button-height-large;
+        height: @button-height-large;
+        border-radius: @button-border-radius-large;
       }
 
       &.ant-btn-circle {
-        min-width: @Button-height-large;
-        height: @Button-height-large;
+        min-width: @button-height-large;
+        height: @button-height-large;
         border-radius: 50%;
       }
 
+      .aldicon-icon-left {
+        svg {
+          vertical-align: -2px;
+        }
+      }
+
       .aldicon-icon-left + span {
-        margin-left: @Button-leftIcon-marginRight-large;
+        margin-left: @button-left-icon-margin-right-large;
       }
     }
 
     &-middle {
       min-width: auto;
-      height: @Button-height-middle;
-      padding: @Button-border-padding-middle;
-      font-size: @Button-text-size-middle;
-      border-radius: @Button-borderRadius-middle;
+      height: @button-height-middle;
+      padding: @button-border-padding-middle;
+      font-size: @button-text-size-middle;
+      border-radius: @button-border-radius-middle;
 
       &.ant-btn-icon-only {
-        min-width: @Button-height-middle;
-        height: @Button-height-middle;
-        border-radius: @Button-borderRadius-middle;
+        min-width: @button-height-middle;
+        height: @button-height-middle;
+        border-radius: @button-border-radius-middle;
       }
 
       &.ant-btn-circle {
-        min-width: @Button-height-middle;
-        height: @Button-height-middle;
+        min-width: @button-height-middle;
+        height: @button-height-middle;
         border-radius: 50%;
       }
 
+      .aldicon-icon-left {
+        svg {
+          vertical-align: -2px;
+        }
+      }
+
       .aldicon-icon-left + span {
-        margin-left: @Button-leftIcon-marginRight-middle;
+        margin-left: @button-left-icon-margin-right-middle;
       }
     }
 
     &-small {
-      height: @Button-height-small;
-      padding: @Button-border-padding-small;
-      font-size: @Button-text-size-small;
+      height: @button-height-small;
+      padding: @button-border-padding-small;
+      font-size: @button-text-size-small;
       line-height: 22px;
-      border-radius: @Button-borderRadius-small;
+      border-radius: @button-border-radius-small;
 
       &.ant-btn-icon-only {
-        min-width: @Button-height-small;
-        height: @Button-height-small;
-        border-radius: @Button-borderRadius-small;
+        min-width: @button-height-small;
+        height: @button-height-small;
+        border-radius: @button-border-radius-small;
       }
 
       &.ant-btn-circle {
-        min-width: @Button-height-small;
-        height: @Button-height-small;
+        min-width: @button-height-small;
+        height: @button-height-small;
         border-radius: 50%;
       }
 
+      .aldicon-icon-left {
+        svg {
+          vertical-align: -2px;
+        }
+      }
+
       .aldicon-icon-left + span {
-        margin-left: @Button-leftIcon-marginRight-small;
+        margin-left: @button-left-icon-margin-right-small;
       }
     }
 
     &-mini {
-      height: @Button-height-mini;
-      padding: @Button-border-padding-mini;
-      font-size: @Button-text-size-mini;
+      height: @button-height-mini;
+      padding: @button-border-padding-mini;
+      font-size: @button-text-size-mini;
       line-height: 22px;
-      border-radius: @Button-borderRadius-mini;
+      border-radius: @button-border-radius-mini;
 
       &.ant-btn-icon-only {
-        min-width: @Button-height-mini;
-        height: @Button-height-mini;
-        border-radius: @Button-borderRadius-mini;
+        min-width: @button-height-mini;
+        height: @button-height-mini;
+        border-radius: @button-border-radius-mini;
       }
 
       &.ant-btn-circle {
-        min-width: @Button-height-mini;
-        height: @Button-height-mini;
+        min-width: @button-height-mini;
+        height: @button-height-mini;
         border-radius: 50%;
       }
 
+      .aldicon-icon-left {
+        svg {
+          vertical-align: -2px;
+        }
+      }
+
       .aldicon-icon-left + span {
-        margin-left: @Button-leftIcon-marginRight-mini;
+        margin-left: @button-left-icon-margin-right-mini;
       }
     }
   }

package/es/Button/style/variables.less

@@ -1,67 +1,67 @@
 @ald-prefix: ald;
 @ald-iconfont-css-prefix: aldicon;
 
-@Button-padding: 0 12px;
+@button-padding: 0 12px;
 
 /** size控制 **/
-@Button-height-large: 36px;
-@Button-text-size-large: 16px;
-@Button-borderRadius-large: 8px;
-@Button-border-padding-large: 0 11px;
-@Button-leftIcon-marginRight-large: 8px;
+@button-height-large: 36px;
+@button-text-size-large: 16px;
+@button-border-radius-large: 8px;
+@button-border-padding-large: 0 11px;
+@button-left-icon-margin-right-large: 8px;
 
-@Button-height-middle: 32px;
-@Button-text-size-middle: 14px;
-@Button-borderRadius-middle: 6px;
-@Button-border-padding-middle: 0 11px;
-@Button-leftIcon-marginRight-middle: 8px;
+@button-height-middle: 32px;
+@button-text-size-middle: 14px;
+@button-border-radius-middle: 6px;
+@button-border-padding-middle: 0 11px;
+@button-left-icon-margin-right-middle: 8px;
 
-@Button-height-small: 28px;
-@Button-text-size-small: 12px;
-@Button-borderRadius-small: 4px;
-@Button-border-padding-small: 0 7px;
-@Button-leftIcon-marginRight-small: 4px;
+@button-height-small: 28px;
+@button-text-size-small: 12px;
+@button-border-radius-small: 4px;
+@button-border-padding-small: 0 7px;
+@button-left-icon-margin-right-small: 4px;
 
-@Button-height-mini: 24px;
-@Button-text-size-mini: 12px;
-@Button-borderRadius-mini: 4px;
-@Button-border-padding-mini: 0 7px;
-@Button-leftIcon-marginRight-mini: 4px;
+@button-height-mini: 24px;
+@button-text-size-mini: 12px;
+@button-border-radius-mini: 4px;
+@button-border-padding-mini: 0 7px;
+@button-left-icon-margin-right-mini: 4px;
 
 /****  type控制  ****/
-@Button-primary-bgColor: @B60;
-@Button-primary-bgColor-active: @B50;
-@Button-primary-bgColor-disable: @B90;
-@Button-primary-color: @ND0;
-@Button-primary-color-active: @ND0;
-@Button-primary-color-disable: @ND0;
+@button-primary-bg-color: @B60;
+@button-primary-bg-color-active: @B50;
+@button-primary-bg-color-disable: @B90;
+@button-primary-color: @ND0;
+@button-primary-color-active: @ND0;
+@button-primary-color-disable: @ND0;
 
-@Button-dangerous-bgColor: @SC60;
-@Button-dangerous-bgColor-active: @SC50;
-@Button-dangerous-bgColor-disable: @SC90;
-@Button-dangerous-color: @ND0;
-@Button-dangerous-color-active: @ND0;
-@Button-dangerous-color-disable: @ND0;
+@button-dangerous-bg-color: @SC60;
+@button-dangerous-bg-color-active: @SC50;
+@button-dangerous-bg-color-disable: @SC90;
+@button-dangerous-color: @ND0;
+@button-dangerous-color-active: @ND0;
+@button-dangerous-color-disable: @ND0;
 
-@Button-secondary-bgColor: @BG97;
-@Button-secondary-bgColor-active: @BG95;
-@Button-secondary-bgColor-disable: @BG97;
-@Button-secondary-color: @NL30;
-@Button-secondary-color-active: @B60;
-@Button-secondary-color-disable: @NL80;
-@Button-secondary-borderColor: @NL90;
-@Button-secondary-borderColor-active: @B60;
+@button-secondary-bg-color: @BG97;
+@button-secondary-bg-color-active: @BG95;
+@button-secondary-bg-color-disable: @BG97;
+@button-secondary-color: @NL30;
+@button-secondary-color-active: @B60;
+@button-secondary-color-disable: @NL80;
+@button-secondary-border-color: @NL90;
+@button-secondary-border-color-active: @B60;
 
-@Button-text-bgColor: transparent;
-@Button-text-bgColor-active: @NL97;
-@Button-text-bgColor-disable: @BG100;
-@Button-text-color: @NL30;
-@Button-text-color-active: @B60;
-@Button-text-color-disable: @NL80;
+@button-text-bg-color: transparent;
+@button-text-bg-color-active: @NL97;
+@button-text-bg-color-disable: transparent;
+@button-text-color: @NL30;
+@button-text-color-active: @B60;
+@button-text-color-disable: @NL80;
 
-@Button-link-bgColor: @BG100;
-@Button-link-bgColor-active: @BG100;
-@Button-link-bgColor-disable: @BG100;
-@Button-link-color: @B60;
-@Button-link-color-active: @B50;
-@Button-link-color-disable: @B90;
+@button-link-bg-color: transparent;
+@button-link-bg-color-active: transparent;
+@button-link-bg-color-disable: transparent;
+@button-link-color: @B60;
+@button-link-color-active: @B50;
+@button-link-color-disable: @B90;

package/es/Card/index.d.ts

@@ -0,0 +1,3 @@
+import { Card } from 'antd';
+export { CardProps } from 'antd/lib/card';
+export default Card;

package/es/Card/index.js

@@ -0,0 +1,3 @@
+import "antd/es/card/style";
+import _Card from "antd/es/card";
+export default _Card;

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

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

package/es/Card/style/index.js

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

package/es/Card/style/index.less

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

package/es/Checkbox/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CheckboxProps } from 'antd';
 import { CheckboxGroupProps } from 'antd/lib/checkbox';
 export type { CheckboxValueType, CheckboxOptionType } from 'antd/es/checkbox/Group';