@aloudata/aloudata-design 0.2.0-beta.1 → 0.2.0-beta.12

package/es/Table/style/index.less

@@ -1,31 +1,66 @@
 @import '../../style/index.less';
 
-@ald-prefix:ant;
-@ald-iconfont-css-prefix:anticon;
-@table-row-height:40px;
-.@{ald-prefix}-blockTable {
+@ald-prefix: ant;
+@ald-iconfont-css-prefix: anticon;
+@table-row-height: 40px;
+
+.ant-block-table {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  user-select: none;
+
+  &-table-wrap {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  &-cell {
+    flex-grow: 1;
+    height: @table-row-height;
+    padding: 0 12px;
+    overflow: hidden;
+    color: @NL0;
+    line-height: @table-row-height;
+    white-space: nowrap;
+    text-align: left;
+    text-overflow: ellipsis;
+    border-bottom: 1px solid @NL95;
+  }
+
+  &-row {
+    max-width: 100%;
+  }
+
   &-thead {
-    .@{ald-prefix}-blockTable-cell {
+    .ant-block-table-cell {
       position: relative;
       color: @NL50;
+
+      &-sorting {
+        color: @B40;
+      }
       // border: 1px solid red;
 
-      .@{ald-prefix}-blockTable-dragBar {
+      .ant-block-table-bar {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        z-index: 1;
         display: inline-block;
-        background: blue;
         width: 1px;
         height: 12px;
-        position: absolute;
-        top: 50%;
-        left: 0;
+        background: blue;
+        background-color: @NL95;
         transform: translateY(-50%);
-        z-index: 1;
         touch-action: none;
-        background-color: @NL95;
       }
 
-      &:first-child {
-        .@{ald-prefix}-blockTable-dragBar {
+      &:last-child {
+        .ant-block-table-bar {
           display: none;
         }
       }
@@ -33,13 +68,14 @@
   }
 
   &-tbody {
+    flex: 1;
     overflow: hidden;
 
-    &-scroll {
-      overflow-y: scroll;
-      overflow-y: overlay;
+    .ant-empty {
+      padding-top: 80px;
     }
-    .@{ald-prefix}-blockTable-row {
+
+    .ant-block-table-row {
       &:hover {
         background-color: @NL97;
       }
@@ -53,59 +89,87 @@
       }
 
       &:last-of-type {
-        .@{ald-prefix}-blockTable-cell {
+        .ant-block-table-cell {
           border-bottom: 1px solid transparent;
         }
       }
     }
   }
 
-  &-row {
-    max-width: 100%;
-  }
-
-  &-cell {
-    padding: 0 12px;
-    height: @table-row-height;
-    line-height: @table-row-height;
-    border-bottom: 1px solid @NL95;
-    text-align: left;
-    color: @NL0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    flex-grow: 1;
-  }
-
   &-loading {
-    text-align: center;
-    line-height: @table-row-height;
     color: @NL80;
+    line-height: @table-row-height;
+    text-align: center;
   }
 
   &-header {
     display: flex;
-    justify-content: space-between;
-    padding: 0 10px;
     align-items: center;
+    justify-content: space-between;
     margin-bottom: 24px;
+    padding: 0 10px;
 
     &-left {
+      color: @NL0;
       font-weight: 500;
       font-size: 14px;
-      color: @NL0;
     }
 
     &-right {
       display: flex;
-      height: 28px;
       align-items: center;
-      font-size: 14px;
+      justify-content: flex-end;
+      height: 28px;
       color: @NL0;
+      font-size: 14px;
     }
   }
 
   &-list {
     overflow: overlay !important;
+
+    &::-webkit-scrollbar-thumb {
+      background: @NL90;
+      background-clip: padding-box;
+      border: 3px solid transparent;
+      border-radius: 6px;
+    }
+
+    &::-webkit-scrollbar {
+      width: 12px;
+      height: 12px;
+      min-height: 12px;
+      background-color: transparent;
+    }
+  }
+
+  &-sortIcon {
+    margin-top: -2px;
+    margin-left: 4px;
+  }
+
+  &-column-resizable {
+    overflow: overlay;
+
+    .ant-block-table-thead,
+    .ant-block-table-tbody {
+      .ant-block-table-row {
+        .ant-block-table {
+          &-cell {
+            flex: none;
+          }
+
+          &-thead {
+            &::-webkit-scrollbar {
+              display: none;
+            }
+          }
+
+          &-tbody {
+            overflow: initial;
+          }
+        }
+      }
+    }
   }
 }

package/es/Tabs/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './style';
+export declare type TabsSize = 'default' | 'large';
 export interface ITabsProps {
     /**
      * @description 大小

package/es/Tabs/index.js

@@ -1,3 +1,5 @@
+import "antd/es/tabs/style";
+import _Tabs from "antd/es/tabs";
 var _excluded = ["size", "className", "adaptHeight"];
 
 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; }
@@ -10,12 +12,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 AntdTabs from 'antd/lib/tabs';
+import React from 'react'; // import AntdTabs, { TabsProps } from 'antd/lib/tabs';
+
 import Icon from '../Icon';
 import TabPane from './TabPane';
 import classNames from 'classnames';
-import './style';
 export default function Tabs(props) {
   var size = props.size,
       className = props.className,
@@ -28,7 +29,7 @@ export default function Tabs(props) {
     tabsProps.size = size;
   }
 
-  return /*#__PURE__*/React.createElement(AntdTabs, _objectSpread({
+  return /*#__PURE__*/React.createElement(_Tabs, _objectSpread({
     moreIcon: /*#__PURE__*/React.createElement(Icon, {
       type: "more_vert",
       size: 18

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

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

package/es/Tabs/style/index.js

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

package/es/Tooltip/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './style';
 export declare type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
 export interface ITooltipProps {
     /**

package/es/Tooltip/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import AntdTooltip from 'antd/lib/tooltip';
 import classNames from 'classnames';
-import './style';
 export default function Tooltip(props) {
   var children = props.children,
       title = props.title,

package/es/index.d.ts

@@ -1,10 +1,20 @@
 /// <reference path="../typings.d.ts" />
 export { default as Button } from './Button';
+export type { IButtonProps as ButtonProps, Size, ButtonType } from './Button';
 export { default as Dropdown } from './Dropdown';
+export type { ActionType, IDropdownProps as DropdownProps, PlacementType } from './Dropdown';
+export { MenuClickEventHandler } from 'rc-menu/lib/interface';
 export { default as Menu } from './Menu';
+export type { IMenuProps as MenuProps } from './Menu';
 export { default as Input } from './Input';
+export type { IInputProps as InputProps, TSize, InputRef, TextAreaRef } from './Input';
 export { default as Tabs } from './Tabs';
+export type { ITabsProps as TabsProps, TabsSize } from './Tabs';
 export { default as Tooltip } from './Tooltip';
+export type { ITooltipProps as TooltipProps, ActionType as TooltipActionType } from './Tooltip';
 export { default as Select } from './Select';
+export type { ISelectProps as SelectProps, IOption } from './Select/interface';
 export { default as Table } from './Table';
+export type { ISort, TSortOrder, ITableProps, IColumn } from './Table/interface';
 export { default as Navigator } from './Navigator';
+export type { INavigatorProps as NavigatorProps, IMenuItem as NavigatorMenu } from './Navigator';

package/es/style/index.d.ts

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

package/es/style/index.js

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

package/es/style/themes/default/index.less

@@ -1,6 +1,6 @@
 @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/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"));

package/lib/Button/style/index.less

@@ -2,9 +2,9 @@
 
 @ald-prefix:ant;
 @ald-iconfont-css-prefix:anticon;
-.@{ald-prefix}-btn {
 
-  &.@{ald-prefix}-btn {
+.ant-btn {
+  &.ant-btn {
     // &-loading::before{
     //   // display: none !important;
     // }
@@ -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,12 +248,15 @@
     &-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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './style';
 interface IEmptyProps {
     description?: string;
     children?: React.ReactNode;

package/lib/Empty/index.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _usePrefixCls = _interopRequireDefault(require("../_utils/hooks/usePrefixCls"));
 
-require("./style");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // @ts-nocheck

package/lib/Empty/style/index.less

@@ -2,7 +2,8 @@
 
 @ald-prefix:ant;
 @ald-iconfont-css-prefix:anticon;
-.@{ald-prefix}-empty {
+
+.ant-empty {
   display: flex;
   align-items: center;
   justify-content: center;

package/lib/Icon/iconfont/demo_index.html

@@ -56,6 +56,18 @@
       <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>
@@ -201,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=1647397705406') format('woff'),
-       url('iconfont.ttf?t=1647397705406') 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>
@@ -229,6 +241,24 @@
       <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">
@@ -445,6 +475,22 @@
       <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>