@aloudata/aloudata-design 0.1.0-beta1 → 0.2.0-beta.11

package/{src/index.ts → es/index.js}

@@ -5,4 +5,6 @@ export { default as Menu } from './Menu';
 export { default as Input } from './Input';
 export { default as Tabs } from './Tabs';
 export { default as Tooltip } from './Tooltip';
-export { default as Select } from './Select';
+export { default as Select } from './Select';
+export { default as Table } from './Table';
+export { default as Navigator } from './Navigator';

package/es/style/index.d.ts

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

package/es/style/index.js

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

package/{src → es}/style/themes/default/index.less

@@ -1,6 +1,6 @@
-@import './themeColor.less';
+@import './themeColor.module.less';
 @font-family:sans-serif,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol','Noto Color Emoji';
-@ald-prefix: 'ald';
+@ald-prefix: ant;
 
 
 // height rules

package/es/style/themes/default/themeColor.module.less.d.ts

@@ -0,0 +1,108 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'B10': string;
+  'B20': string;
+  'B30': string;
+  'B40': string;
+  'B50': string;
+  'B60': string;
+  'B70': string;
+  'B80': string;
+  'B90': string;
+  'B95': string;
+  'B98': string;
+  'BBG10': string;
+  'BBG15': string;
+  'BBG20': string;
+  'BBG30': string;
+  'BBG40': string;
+  'BBG50': string;
+  'BBG60': string;
+  'BBG70': string;
+  'BBG80': string;
+  'BBG90': string;
+  'BBG95': string;
+  'BBG97': string;
+  'BBG98': string;
+  'BG0': string;
+  'BG10': string;
+  'BG100': string;
+  'BG20': string;
+  'BG30': string;
+  'BG40': string;
+  'BG50': string;
+  'BG60': string;
+  'BG70': string;
+  'BG80': string;
+  'BG90': string;
+  'BG95': string;
+  'BG97': string;
+  'BLACK': string;
+  'IMAGE_HOLDER': string;
+  'MATE': string;
+  'ND0': string;
+  'ND10': string;
+  'ND20': string;
+  'ND30': string;
+  'ND40': string;
+  'ND50': string;
+  'ND60': string;
+  'ND70': string;
+  'ND80': string;
+  'ND90': string;
+  'ND95': string;
+  'ND97': string;
+  'NL0': string;
+  'NL10': string;
+  'NL20': string;
+  'NL30': string;
+  'NL40': string;
+  'NL50': string;
+  'NL60': string;
+  'NL70': string;
+  'NL80': string;
+  'NL90': string;
+  'NL95': string;
+  'NL97': string;
+  'SA10': string;
+  'SA20': string;
+  'SA30': string;
+  'SA40': string;
+  'SA50': string;
+  'SA60': string;
+  'SA70': string;
+  'SA80': string;
+  'SA90': string;
+  'SA95': string;
+  'SA98': string;
+  'SB10': string;
+  'SB20': string;
+  'SB30': string;
+  'SB40': string;
+  'SB50': string;
+  'SB60': string;
+  'SB70': string;
+  'SB80': string;
+  'SB90': string;
+  'SB95': string;
+  'SB98': string;
+  'SC10': string;
+  'SC20': string;
+  'SC30': string;
+  'SC40': string;
+  'SC50': string;
+  'SC60': string;
+  'SC70': string;
+  'SC80': string;
+  'SC90': string;
+  'SC95': string;
+  'SC98': string;
+  'SHADOW_ACTIONSHEET': string;
+  'SHADOW_CARD': string;
+  'SHADOW_NOTIFICATION': string;
+  'SHADOW_OPTION': string;
+  'WHITE': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/lib/Button/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './style';
 import type { ButtonProps as AntdButtonProps } from 'antd/lib/button';
 export declare type ButtonType = 'primary' | 'secondary' | 'danger' | 'text' | 'link';
 export declare type Size = 'small' | 'default' | 'large';

package/lib/Button/index.js

@@ -11,8 +11,6 @@ var _button = _interopRequireDefault(require("antd/es/button"));
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./style");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _usePrefixCls = _interopRequireDefault(require("../_utils/hooks/usePrefixCls"));
@@ -39,7 +37,7 @@ function Button(props) {
   var prefix = (0, _usePrefixCls.default)('btn');
 
   var _props$type = props.type,
-      type = _props$type === void 0 ? 'primary' : _props$type,
+      type = _props$type === void 0 ? 'secondary' : _props$type,
       _props$size = props.size,
       size = _props$size === void 0 ? 'default' : _props$size,
       _props$shape = props.shape,
@@ -50,7 +48,7 @@ function Button(props) {
 
   function getButtonType(buttonType) {
     if (!['primary', 'secondary', 'danger', 'text', 'link'].includes(buttonType)) {
-      return 'primary';
+      return 'default';
     }
 
     if (buttonType === 'danger') {

package/lib/Button/style/index.less

@@ -1,10 +1,10 @@
-@import '../../style/index.less'; 
+@import '../../style/index.less';
 
 @ald-prefix:ant;
 @ald-iconfont-css-prefix:anticon;
-.@{ald-prefix}-btn {
 
-  &.@{ald-prefix}-btn {
+.ant-btn {
+  &.ant-btn {
     // &-loading::before{
     //   // display: none !important;
     // }
@@ -15,13 +15,13 @@
     &-text,
     &-link {
       font-size: 12px;
-      height: 28px;
+      height: @height-base;
       padding: 0 12px;
       display: inline-flex;
-      line-height: 1;
+      line-height: @height-base;
       align-items: center;
       font-weight: 500;
-      justify-content: space-between;
+      justify-content: center;
       .@{ald-iconfont-css-prefix} {
         + span {
           margin-left: 4px;
@@ -43,10 +43,11 @@
       box-shadow: none;
       border-radius: @border-radius-base;
       text-shadow: @text-shadow;
+
       &:hover,
       &:focus,
       &:active,
-      &.@{ald-prefix}-btn-loading {
+      &.ant-btn-loading {
         background-color: @B20;
         border-color: @B20;
         color: @ND0;
@@ -66,7 +67,8 @@
         }
       }
     }
-    &-dangerous.@{ald-prefix}-btn-primary {
+
+    &-dangerous.ant-btn-primary {
       background-color: @SC40;
       border-color: @SC40;
       color: @ND0;
@@ -78,9 +80,10 @@
         border-color: @SC20;
         color: @ND0;
       }
+
       &:focus,
       &:active,
-      &.@{ald-prefix}-btn-loading {
+      &.ant-btn-loading {
         background-color: @SC20;
         border-color: @SC20;
         color: @ND0;
@@ -112,7 +115,7 @@
       &:hover,
       &:focus,
       &:active,
-      &.@{ald-prefix}-btn-loading {
+      &.ant-btn-loading {
         background-color: @NL97;
         border-color: @NL90;
         color: @NL30;
@@ -140,10 +143,11 @@
       box-shadow: none;
       border-radius: @border-radius-base;
       text-shadow: @text-shadow;
+
       &:hover,
       &:focus,
       &:active,
-      &.@{ald-prefix}-btn-loading {
+      &.ant-btn-loading {
         background-color: @NL97;
         // border-color: @NL97;
         color: @NL30;
@@ -172,10 +176,11 @@
       box-shadow: none;
       border-radius: @border-radius-base;
       text-shadow: @text-shadow;
+
       &:hover,
       &:focus,
       &:active,
-      &.@{ald-prefix}-btn-loading {
+      &.ant-btn-loading {
         background-color: @BG100;
         border-color: @BG100;
         color: @B20;
@@ -202,7 +207,8 @@
       vertical-align: bottom;
       height: @height-base;
       width: @height-base;
-      &.@{ald-prefix}-btn-loading-icon {
+
+      &.ant-btn-loading-icon {
         vertical-align: baseline;
       }
       .@{ald-iconfont-css-prefix} {
@@ -225,12 +231,14 @@
       height: 32px;
       font-size: 14px;
       min-width: auto;
-      &.@{ald-prefix}-btn-icon-only {
+
+      &.ant-btn-icon-only {
         height: 32px;
         width: 32px;
         min-width: auto;
       }
-      &.@{ald-prefix}-btn-circle {
+
+      &.ant-btn-circle {
         width: 32px;
         height: 32px;
         border-radius: 50%;
@@ -240,16 +248,19 @@
     &-sm {
       height: 24px;
       border-radius: @border-radius-sm;
-      &.@{ald-prefix}-btn-icon-only {
+      line-height: 22px;
+
+      &.ant-btn-icon-only {
         height: 24px;
         width: 24px;
         border-radius: @border-radius-sm;
       }
-      &.@{ald-prefix}-btn-circle {
+
+      &.ant-btn-circle {
         width: 32px;
         height: 32px;
         border-radius: 50%;
       }
     }
   }
-}
+}

package/lib/Dropdown/Button.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { ButtonType, Size } from '../Button';
-import './style';
+import '../Button/style';
 export declare type ActionType = 'hover' | 'click' | 'contextMenu';
 export interface IDropdownButton {
     /**

package/lib/Dropdown/Button.js

@@ -9,12 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
+require("../Button/style");
+
 var _index = _interopRequireDefault(require("./index"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-require("./style");
-
 var _excluded = ["children", "overlay", "placement", "trigger", "visible", "disabled", "onVisibleChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Dropdown/index.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import DropdownButton from './Button';
-import './style';
 export declare type ActionType = 'hover' | 'click' | 'contextMenu';
+export declare type PlacementType = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
 export interface IDropdownProps {
     /**
      * @description 关闭后是否销毁Dropdown

package/lib/Dropdown/index.js

@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Button = _interopRequireDefault(require("./Button"));
 
-require("./style");
-
 var _excluded = ["children", "visible"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Dropdown/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/dropdown/style';
 import '../../style';
 import './index.less';

package/lib/Dropdown/style/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("antd/lib/dropdown/style");
+
 require("../../style");
 
 require("./index.less");

package/lib/Empty/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IEmptyProps {
+    description?: string;
+    children?: React.ReactNode;
+}
+declare const _default: ({ description, children }: IEmptyProps) => JSX.Element;
+export default _default;

package/lib/Empty/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _usePrefixCls = _interopRequireDefault(require("../_utils/hooks/usePrefixCls"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @ts-nocheck
+var _default = function _default(_ref) {
+  var description = _ref.description,
+      children = _ref.children;
+  var prefixCls = (0, _usePrefixCls.default)('empty');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "75",
+    height: "79",
+    viewBox: "0 0 75 79",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M37.4999 78.9999C58.2106 78.9999 74.9999 62.2106 74.9999 41.4999C74.9999\n           20.7893 58.2106 4 37.4999 4C16.7893 4 0 20.7893 0 41.4999C0 62.2106 16.7893 78.9999 37.4999 78.9999Z",
+    fill: "#EBF3FF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M58.9999 25.5H16C14.6193 25.5 13.5 26.5414 13.5 27.8261V76.6738C13.5\n          77.9585 14.6193 78.9999 16 78.9999H58.9999C60.3806 78.9999 61.4999\n          77.9585 61.4999 76.6738V27.8261C61.4999 26.5414 60.3806 25.5 58.9999 25.5Z",
+    fill: "white"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M32.5 33H19.5C18.6716 33 18 33.6716 18 34.5C18 35.3284 18.6716 36 19.5\n           36H32.5C33.3284 36 34 35.3284 34 34.5C34 33.6716 33.3284 33 32.5 33Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M41.5 39.5H19.5C18.6716 39.5 18 40.1716 18 41C18 41.8284 18.6716 42.5\n          19.5 42.5H41.5C42.3284 42.5 43 41.8284 43 41C43 40.1716 42.3284 39.5 41.5 39.5Z",
+    fill: "#F3F8FF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M32.5 46.5H19.5C18.6716 46.5 18 47.1716 18 48C18 48.8284 18.6716 49.5\n          19.5 49.5H32.5C33.3284 49.5 34 48.8284 34 48C34 47.1716 33.3284 46.5 32.5 46.5Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M41.5 53H19.5C18.6716 53 18 53.6716 18 54.5C18 55.3284 18.6716 56 19.5\n          56H41.5C42.3284 56 43 55.3284 43 54.5C43 53.6716 42.3284 53 41.5 53Z",
+    fill: "#F3F8FF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M32.5 60H19.5C18.6716 60 18 60.6716 18 61.5C18 62.3284 18.6716 63 19.5\n           63H32.5C33.3284 63 34 62.3284 34 61.5C34 60.6716 33.3284 60 32.5 60Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M41.5 66.5H19.5C18.6716 66.5 18 67.1716 18 68C18 68.8284 18.6716 69.5\n           19.5 69.5H41.5C42.3284 69.5 43 68.8284 43 68C43 67.1716 42.3284 66.5 41.5 66.5Z",
+    fill: "#F3F8FF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M58.9998 0H15.9999C14.6192 0 13.4999 1.11929 13.4999 2.5V17.5C13.4999\n           18.8807 14.6192 20 15.9999 20H58.9998C60.3805 20 61.4998 18.8807 61.4998\n            17.5V2.5C61.4998 1.11929 60.3805 0 58.9998 0Z",
+    fill: "#A0B5D5"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M32.5 5.49902H19.5C18.6716 5.49902 18 6.1706 18 6.99902C18 7.82745\n          18.6716 8.49902 19.5 8.49902H32.5C33.3284 8.49902 34 7.82745 34 6.99902C34 6.1706 33.3284 5.49902 32.5 5.49902Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M41.5 12H19.5C18.6716 12 18 12.6716 18 13.5C18 14.3284 18.6716 15\n           19.5 15H41.5C42.3284 15 43 14.3284 43 13.5C43 12.6716 42.3284 12 41.5 12Z",
+    fill: "white"
+  })), description && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-description")
+  }, description), children && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-footer")
+  }, children)));
+};
+
+exports.default = _default;

package/lib/Empty/style/index.d.ts

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

package/lib/Empty/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.less");

package/lib/Empty/style/index.less

@@ -0,0 +1,24 @@
+@import '../../style/index.less';
+
+@ald-prefix:ant;
+@ald-iconfont-css-prefix:anticon;
+
+.ant-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 46px 0;
+  height: 100%;
+
+  &-content {
+    text-align: center;
+  }
+
+  &-description {
+    font-size: 12px;
+    font-weight: 500;
+    color: @NL0;
+    text-align: center;
+    line-height: 16px;
+  }
+}

package/lib/Icon/iconfont/demo_index.html

@@ -56,6 +56,30 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">sort_descending</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">sort_ascending</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63d;</span>
+                <div class="name">more_vert</div>
+                <div class="code-name">&amp;#xe63d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">check</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe616;</span>
                 <div class="name">cancel</div>
@@ -189,9 +213,9 @@
 >@font-face {
   font-family: 'iconfont';
   src: 
-       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-       url('iconfont.woff?t=1646214023180') format('woff'),
-       url('iconfont.ttf?t=1646214023180') format('truetype');
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+       url('iconfont.woff?t=1648447992265') format('woff'),
+       url('iconfont.ttf?t=1648447992265') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -217,6 +241,42 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont sort_descending"></span>
+            <div class="name">
+              sort_descending
+            </div>
+            <div class="code-name">.sort_descending
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont sort_ascending"></span>
+            <div class="name">
+              sort_ascending
+            </div>
+            <div class="code-name">.sort_ascending
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont more_vert"></span>
+            <div class="name">
+              more_vert
+            </div>
+            <div class="code-name">.more_vert
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont check"></span>
+            <div class="name">
+              check
+            </div>
+            <div class="code-name">.check
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont cancel"></span>
             <div class="name">
@@ -415,6 +475,38 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#sort_descending"></use>
+                </svg>
+                <div class="name">sort_descending</div>
+                <div class="code-name">#sort_descending</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#sort_ascending"></use>
+                </svg>
+                <div class="name">sort_ascending</div>
+                <div class="code-name">#sort_ascending</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#more_vert"></use>
+                </svg>
+                <div class="name">more_vert</div>
+                <div class="code-name">#more_vert</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#check"></use>
+                </svg>
+                <div class="name">check</div>
+                <div class="code-name">#check</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#cancel"></use>