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

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

package/es/Breadcrumb/style/index.less

@@ -1,6 +1,6 @@
 @import '../../style/index.less';
 
-.ald-breadcrumb {
+.ald-breadcrumb.ant-breadcrumb li {
   color: @NL50;
   font-weight: 600;
   font-size: 24px;
@@ -18,10 +18,18 @@
     margin: 0;
   }
 
-  & > span {
+  a {
     color: @NL50;
 
-    &:last-child {
+    &:hover {
+      color: @NL0;
+    }
+  }
+
+  &:last-child {
+    color: @NL0;
+
+    a {
       color: @NL0;
     }
   }

package/es/Button/index.js

@@ -1,6 +1,6 @@
 import "antd/es/button/style";
 import _Button from "antd/es/button";
-var _excluded = ["type", "size", "shape", "icon", "className"];
+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,6 +14,7 @@ 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;
@@ -29,6 +30,9 @@ function Button(props) {
       size = _props$size === void 0 ? 'default' : _props$size,
       _props$shape = props.shape,
       shape = _props$shape === void 0 ? 'default' : _props$shape,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
+      disabled = props.disabled,
       icon = props.icon,
       className = props.className,
       rest = _objectWithoutProperties(props, _excluded);
@@ -89,7 +93,8 @@ function Button(props) {
     if (iconNode) {
       var p = _objectSpread({
         className: '',
-        size: ICON_LARGE
+        size: ICON_LARGE,
+        fill: 'currentColor'
       }, iconNode.props);
 
       p.className = classNames("".concat(iconPrefixCls, "-icon-left"), p.className, iconPrefixCls);
@@ -97,10 +102,20 @@ function Button(props) {
       return /*#__PURE__*/React.cloneElement(iconNode, p);
     }
 
+    if (loading) {
+      return /*#__PURE__*/React.createElement(LoadingIcon, {
+        spin: true,
+        size: ICON_LARGE,
+        className: classNames("".concat(iconPrefixCls, "-icon-left"), iconPrefixCls),
+        fill: "currentColor"
+      });
+    }
+
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   };
 
   return /*#__PURE__*/React.createElement(_Button, Object.assign({}, rest, {
+    disabled: loading ? true : disabled,
     icon: setIcon(icon),
     type: getButtonType(type),
     className: classNames(prefix, "".concat(prefix, "-").concat(type), className, getButtonSizeClass(size)),

package/es/Button/style/index.less

@@ -16,25 +16,11 @@
       align-items: center;
       justify-content: center;
       height: @height-base;
-      padding: @Button-padding;
       font-weight: 500;
       font-size: 12px;
       line-height: @height-base;
       text-shadow: none;
-      // border: none;
-      .@{ald-iconfont-css-prefix} {
-        + span {
-          margin-left: 4px;
-        }
-
-        &-icon-left {
-          margin-left: -4px;
-        }
-
-        &-icon-right {
-          margin-right: -4px;
-        }
-      }
+      vertical-align: bottom;
     }
 
     &.ant-btn-loading::before {
@@ -116,9 +102,16 @@
       }
     }
 
+    &.ant-btn-circle {
+      justify-content: center;
+      min-width: @height-base;
+      height: @height-base;
+      padding: 0;
+      border-radius: 50%;
+    }
+
     &-default,
     &-secondary {
-      padding: @Button-border-padding;
       color: @Button-secondary-color;
       background-color: @Button-secondary-bgColor;
       border: 1px solid;
@@ -163,14 +156,14 @@
       border: none;
       box-shadow: none;
 
-      &:focus {
+      &:focus,
+      &:active {
         color: @Button-text-color;
         background-color: @Button-text-bgColor;
         box-shadow: none;
       }
 
       &:hover,
-      &:active,
       &.ant-btn-loading {
         color: @Button-text-color-active;
         background-color: @Button-text-bgColor-active;
@@ -233,8 +226,7 @@
 
     &.ant-btn-icon-only {
       justify-content: center;
-      width: @height-base;
-      height: @height-base;
+      width: initial;
       padding: 0;
       vertical-align: bottom;
 
@@ -245,94 +237,104 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-left: 0;
+        margin: 0;
       }
     }
 
-    &-circle {
-      justify-content: center;
-      width: @height-base;
-      min-width: auto;
-      padding: 0;
-      border-radius: 50%;
-    }
-
     &-large {
       min-width: auto;
       height: @Button-height-large;
+      padding: @Button-border-padding-large;
       font-size: @Button-text-size-large;
       border-radius: @Button-borderRadius-large;
 
       &.ant-btn-icon-only {
-        width: @Button-height-large;
-        min-width: auto;
+        min-width: @Button-height-large;
         height: @Button-height-large;
         border-radius: @Button-borderRadius-large;
       }
 
       &.ant-btn-circle {
-        width: @Button-height-large;
+        min-width: @Button-height-large;
         height: @Button-height-large;
         border-radius: 50%;
       }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-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;
 
       &.ant-btn-icon-only {
-        width: @Button-height-middle;
-        min-width: auto;
+        min-width: @Button-height-middle;
         height: @Button-height-middle;
         border-radius: @Button-borderRadius-middle;
       }
 
       &.ant-btn-circle {
-        width: @Button-height-middle;
+        min-width: @Button-height-middle;
         height: @Button-height-middle;
         border-radius: 50%;
       }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-middle;
+      }
     }
 
     &-small {
       height: @Button-height-small;
+      padding: @Button-border-padding-small;
       font-size: @Button-text-size-small;
       line-height: 22px;
       border-radius: @Button-borderRadius-small;
 
       &.ant-btn-icon-only {
-        width: @Button-height-small;
+        min-width: @Button-height-small;
         height: @Button-height-small;
         border-radius: @Button-borderRadius-small;
       }
 
       &.ant-btn-circle {
-        width: @Button-height-small;
+        min-width: @Button-height-small;
         height: @Button-height-small;
         border-radius: 50%;
       }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-small;
+      }
     }
 
     &-mini {
       height: @Button-height-mini;
+      padding: @Button-border-padding-mini;
       font-size: @Button-text-size-mini;
       line-height: 22px;
       border-radius: @Button-borderRadius-mini;
 
       &.ant-btn-icon-only {
-        width: @Button-height-mini;
+        min-width: @Button-height-mini;
         height: @Button-height-mini;
         border-radius: @Button-borderRadius-mini;
       }
 
       &.ant-btn-circle {
-        width: @Button-height-mini;
+        min-width: @Button-height-mini;
         height: @Button-height-mini;
         border-radius: 50%;
       }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-mini;
+      }
     }
   }
 }

package/es/Button/style/variables.less

@@ -2,24 +2,31 @@
 @ald-iconfont-css-prefix: aldicon;
 
 @Button-padding: 0 12px;
-@Button-border-padding: 0 11px;
 
 /** 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-middle: 32px;
 @Button-text-size-middle: 14px;
 @Button-borderRadius-middle: 6px;
+@Button-border-padding-middle: 0 11px;
+@Button-leftIcon-marginRight-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-mini: 24px;
 @Button-text-size-mini: 12px;
 @Button-borderRadius-mini: 4px;
+@Button-border-padding-mini: 0 7px;
+@Button-leftIcon-marginRight-mini: 4px;
 
 /****  type控制  ****/
 @Button-primary-bgColor: @B60;
@@ -45,7 +52,7 @@
 @Button-secondary-borderColor: @NL90;
 @Button-secondary-borderColor-active: @B60;
 
-@Button-text-bgColor: @BG100;
+@Button-text-bgColor: transparent;
 @Button-text-bgColor-active: @NL97;
 @Button-text-bgColor-disable: @BG100;
 @Button-text-color: @NL30;

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/Checkbox/index.d.ts

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

package/es/Checkbox/style/index.less

@@ -1,6 +1,19 @@
 @import '../../style/index.less';
 
 .ald-checkbox {
+  height: 20px;
+  color: @NL0;
+  font-size: 14px;
+  line-height: 20px;
+
+  .ant-checkbox-wrapper {
+    height: 20px;
+    color: @NL0;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
   .ant-checkbox-inner {
     width: 16px;
     height: 16px;
@@ -39,6 +52,7 @@
     cursor: default;
 
     & + span {
+      color: @NL0;
       cursor: default;
     }
 
@@ -72,6 +86,11 @@
       }
     }
   }
+
+  .ant-checkbox + span {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
 }
 
 .ant-checkbox-group.ald-checkbox,

package/es/Drawer/index.d.ts

@@ -0,0 +1,4 @@
+import { Drawer } from 'antd';
+import { DrawerProps } from 'antd/lib/drawer';
+export { DrawerProps };
+export default Drawer;

package/es/Drawer/index.js

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

package/es/Dropdown/Button.js

@@ -9,7 +9,7 @@ import Button from '../Button';
 import '../Button/style'; // eslint-disable-next-line import/no-cycle
 
 import Dropdown from './index';
-import Icon from '../Icon';
+import ArrowsDownLine from '../Icon/icons/ArrowsDownLine';
 export default function DropdownButton(props) {
   var children = props.children,
       overlay = props.overlay,
@@ -27,7 +27,7 @@ export default function DropdownButton(props) {
     visible: visible,
     disabled: disabled,
     onVisibleChange: onVisibleChange
-  }, /*#__PURE__*/React.createElement(Button, Object.assign({}, buttonProps), children, /*#__PURE__*/React.createElement(Icon, {
-    type: "expand_more1"
+  }, /*#__PURE__*/React.createElement(Button, Object.assign({}, buttonProps), children, /*#__PURE__*/React.createElement(ArrowsDownLine, {
+    fill: "currentColor"
   })));
 }

package/es/Empty/image/Authority.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/es/Empty/image/Dataspace.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/es/Empty/image/Search.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/es/Empty/image/Simple.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/es/Empty/image/Worksheet.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/es/Empty/image/empty.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/es/Form/style/index.less

@@ -1 +1,9 @@
 @import '../../style/index.less';
+
+.ant-form {
+  .ant-form-item {
+    .ant-select.ald-select {
+      width: 100%;
+    }
+  }
+}

package/es/Icon/antdIconfont.d.ts

@@ -0,0 +1,4 @@
+import { IconFontProps } from '@ant-design/icons/lib/components/IconFont';
+import { createFromIconfontCN } from '@ant-design/icons';
+export type { IconFontProps };
+export { createFromIconfontCN };

package/es/Icon/antdIconfont.js

@@ -0,0 +1,2 @@
+import { createFromIconfontCN } from '@ant-design/icons';
+export { createFromIconfontCN };

package/es/Icon/components/Icon.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+interface IBaseIconProps {
+    className?: string;
+    type?: string;
+    size?: number | string;
+    color?: string;
+    style?: React.CSSProperties;
+}
+declare global {
+    interface IIconParkIconAttributes<T> extends IBaseIconProps, React.HTMLAttributes<T> {
+        'icon-id'?: string;
+        name?: string;
+        size?: string;
+        type?: string;
+        width?: string;
+        height?: string;
+        color?: string;
+        stroke?: string;
+        fill?: string;
+        rtl?: boolean;
+        spin?: boolean;
+        className?: string;
+        style?: React.CSSProperties;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'iconpark-icon': React.DetailedHTMLProps<IIconParkIconAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+export { IBaseIconProps };
+export default function Icon(props: IBaseIconProps): JSX.Element;

package/es/Icon/components/Icon.js

@@ -0,0 +1,27 @@
+var _excluded = ["type", "size", "className", "color"];
+
+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 Icon(props) {
+  var type = props.type,
+      _props$size = props.size,
+      size = _props$size === void 0 ? '1em' : _props$size,
+      _props$className = props.className,
+      className = _props$className === void 0 ? 'ald-icon' : _props$className,
+      _props$color = props.color,
+      color = _props$color === void 0 ? 'currentColor' : _props$color,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement("iconpark-icon", Object.assign({
+    name: type,
+    // @ts-ignore react里web-component 只能使用class
+    class: classnames('ald-icon', className),
+    size: String(size),
+    color: color,
+    fill: color
+  }, rest));
+}

package/es/Icon/components/createFromScripts.d.ts

@@ -0,0 +1 @@
+export declare function createFromScripts(scriptUrl: string[] | string, index?: number): void;

package/es/Icon/components/createFromScripts.js

@@ -0,0 +1,35 @@
+var FIRST_INDEX = 0;
+var customCache = new Set();
+
+function isValidCustomScriptUrl(scriptUrl) {
+  return Boolean(typeof scriptUrl === 'string' && scriptUrl.length && !customCache.has(scriptUrl));
+}
+
+export function createFromScripts(scriptUrl) {
+  var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FIRST_INDEX;
+  var scriptUrls = Array.isArray(scriptUrl) ? scriptUrl : [scriptUrl]; // index 表示即将创建的脚本的索引，当所有的脚本链接都创建之后，函数不再往下执行
+
+  if (index >= scriptUrls.length) {
+    return;
+  }
+
+  var currentScriptUrl = scriptUrls[index];
+
+  if (isValidCustomScriptUrl(currentScriptUrl)) {
+    var script = document.createElement('script');
+    script.setAttribute('src', currentScriptUrl);
+    script.setAttribute('data-namespace', currentScriptUrl);
+    customCache.add(currentScriptUrl);
+    document.body.appendChild(script);
+
+    if (scriptUrls.length > index + 1) {
+      script.onload = function () {
+        createFromScripts(scriptUrls, index + 1);
+      };
+
+      script.onerror = function () {
+        createFromScripts(scriptUrls, index + 1);
+      };
+    }
+  }
+}

package/es/Icon/iconSvgs/arrows_right_sm.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.16252 6.5876C9.39033 6.81541 9.39033 7.18475 9.16252 7.41256L5.66252 10.9126C5.43471 11.1404 5.06537 11.1404 4.83756 10.9126C4.60976 10.6848 4.60976 10.3154 4.83756 10.0876L7.92508 7.00008L4.83756 3.91256C4.60976 3.68475 4.60976 3.31541 4.83756 3.0876C5.06537 2.8598 5.43471 2.8598 5.66252 3.0876L9.16252 6.5876Z" fill="#001A33" fill-opacity="0.5"/>
+</svg>

package/es/Icon/icons/AddLine.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    size?: string | number;
+    width?: string | number;
+    height?: string | number;
+    spin?: boolean;
+    rtl?: boolean;
+    color?: string;
+    fill?: string;
+    stroke?: string;
+}
+export default function AddLine(props: IconProps): JSX.Element;
+export {};