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

package/lib/Table/style/index.less

@@ -1,10 +1,9 @@
 @import '../../style/index.less';
 
-@ald-prefix: ant;
 @ald-iconfont-css-prefix: anticon;
-@table-row-height: 40px;
+@table-row-height: 48px;
 
-.ant-block-table {
+.ald-table {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -25,9 +24,7 @@
   &-cell {
     flex-grow: 1;
     height: unset;
-    padding: 12px;
     color: @NL0;
-    line-height: 16px;
     text-align: left;
     word-break: break-all;
     border-bottom: 1px solid @NL95;
@@ -39,10 +36,10 @@
 
   &-row {
     max-width: 100%;
-    height: 40px;
+    height: 48px;
 
     &-ellipsis {
-      .ant-block-table-cell {
+      .ald-table-cell {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -51,15 +48,24 @@
   }
 
   &-thead {
-    .ant-block-table-cell {
+    .ald-table-row {
+      height: 48px;
+    }
+
+    .ald-table-cell {
       position: relative;
+      padding: 14px 24px;
       color: @NL50;
+      line-height: 20px;
+      background-color: @BG97;
 
-      &-sorting {
-        color: @B40;
+      .ald-table-cell-content {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
 
-      .ant-block-table-bar {
+      .ald-table-bar {
         position: absolute;
         top: 50%;
         right: -12px;
@@ -80,7 +86,7 @@
       }
 
       &:last-child {
-        .ant-block-table-bar {
+        .ald-table-bar {
           display: none;
         }
       }
@@ -91,31 +97,48 @@
     flex: 1;
     overflow: hidden;
 
-    .ant-empty {
+    .ald-empty {
       display: flex;
       justify-content: center;
-      padding-top: 80px;
     }
 
-    .ant-block-table-row {
+    .ald-table-row {
+      height: 68px;
+
+      .ald-table-cell {
+        padding: 24px;
+        line-height: 20px;
+      }
+
       &:hover {
         background-color: @NL97;
       }
 
       &-selected {
-        background-color: @BBG97;
+        background-color: @B98;
 
         &:hover {
-          background-color: @BBG97;
+          background-color: @B98;
         }
       }
     }
   }
 
   &-loading {
+    height: 48px;
     color: @NL80;
     line-height: @table-row-height;
     text-align: center;
+
+    &-icon {
+      margin-right: 4px;
+    }
+  }
+
+  &-init-loading {
+    .ald-table-loading {
+      padding-top: 84px;
+    }
   }
 
   &-header {
@@ -175,10 +198,10 @@
   &-column-resizable {
     overflow: overlay;
 
-    .ant-block-table-thead,
-    .ant-block-table-tbody {
-      .ant-block-table-row {
-        .ant-block-table {
+    .ald-table-thead,
+    .ald-table-tbody {
+      .ald-table-row {
+        .ald-table {
           &-cell {
             flex: none;
           }

package/lib/Tabs/style/index.less

@@ -1,39 +1,71 @@
 @import '../../style/index.less';
 
+//status- default
+@Tabs-color: @NL30;
+@Tabs-fontWeight: 400;
+//active
+@Tabs-color-active: @B60;
+@Tabs-fontWeight-active: 600;
+
+//middle - default
+@Tabs-fontSize: 14px;
+@Tabs-lineHeight: 20px;
+@Tabs-ink-link-bar-height: 2px;
+//large
+@Tabs-fontSize-large: 16px;
+@Tabs-lineHeight-large: 24px;
+@Tabs-ink-link-bar-height-large: 3px;
+// @Tabs-
 .ant-tabs.ald-tabs {
   &.ant-tabs {
     color: @NL30;
   }
 
   .ant-tabs-tab {
-    font-size: 14px;
-    line-height: 20px;
+    padding: 8px 0;
+    color: @Tabs-color;
+    font-weight: @Tabs-fontWeight;
+    font-size: @Tabs-fontSize;
+    line-height: @Tabs-lineHeight;
 
     &:hover {
       color: inherit;
     }
 
     &.ant-tabs-tab-active {
-      font-weight: 500;
+      font-weight: @Tabs-fontWeight-active;
     }
   }
 
   .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: @Tabs-color-active;
+    font-weight: @Tabs-fontWeight-active;
     text-shadow: none;
   }
 
+  .ant-tabs-ink-bar {
+    height: @Tabs-ink-link-bar-height;
+    background: @Tabs-color-active;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+  }
+
   /* large size */
   &.ant-tabs-large {
     .ant-tabs-tab {
-      font-size: 16px;
-      line-height: 24px;
+      font-size: @Tabs-fontSize-large;
+      line-height: @Tabs-lineHeight-large;
+    }
+
+    .ant-tabs-ink-bar {
+      height: @Tabs-ink-link-bar-height-large;
     }
   }
 
   &.ald-tabs-default {
     .ant-tabs-tab {
-      font-size: 14px;
-      line-height: 20px;
+      font-size: @Tabs-fontSize;
+      line-height: @Tabs-lineHeight;
     }
   }
 

package/lib/Tooltip/style/index.less

@@ -3,6 +3,7 @@
 .ald-tooltip-overlay {
   .ant-tooltip-inner {
     padding: 6px 12px;
+    line-height: 20px;
     background: @BG10;
     border-radius: @border-radius-base;
     box-shadow: none;

package/lib/index.d.ts

@@ -12,12 +12,12 @@ 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 type { SelectProps } from './Select';
 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';
+export type { INavigatorProps as NavigatorProps, IMenuItem as NavigatorMenu, ISelectedMenuInfo as SelectedMenuInfo, } from './Navigator';
 export { default as Alert } from './Alert';
 export type { AlertProps } from './Alert';
 export { default as Col } from './Col';
@@ -56,3 +56,15 @@ export { default as Radio } from './Radio';
 export type { RadioProps, RadioChangeEvent, RadioGroupProps } from './Radio';
 export { default as Checkbox } from './Checkbox';
 export type { CheckboxProps, CheckboxOptionType } from './Checkbox';
+export { default as Modal } from './Modal';
+export type { ModalProps, ModalFuncProps } from './Modal';
+export { default as Popover } from './Popover';
+export type { PopoverProps } from './Popover';
+export type { InputNumberProps } from './InputNumber';
+export { default as InputNumber } from './InputNumber';
+export { default as Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb';
+export { default as Empty } from './Empty';
+export type { IEmptyProps as EmptyProps } from './Empty';
+export { default as Avatar } from './Avatar';
+export type { IAvatarProps as AvatarProps } from './Avatar';

package/lib/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "Alert", {
     return _Alert.default;
   }
 });
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar.default;
+  }
+});
+Object.defineProperty(exports, "Breadcrumb", {
+  enumerable: true,
+  get: function get() {
+    return _Breadcrumb.default;
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function get() {
@@ -51,6 +63,12 @@ Object.defineProperty(exports, "Dropdown", {
     return _Dropdown.default;
   }
 });
+Object.defineProperty(exports, "Empty", {
+  enumerable: true,
+  get: function get() {
+    return _Empty.default;
+  }
+});
 Object.defineProperty(exports, "Form", {
   enumerable: true,
   get: function get() {
@@ -63,6 +81,12 @@ Object.defineProperty(exports, "Input", {
     return _Input.default;
   }
 });
+Object.defineProperty(exports, "InputNumber", {
+  enumerable: true,
+  get: function get() {
+    return _InputNumber.default;
+  }
+});
 Object.defineProperty(exports, "Layout", {
   enumerable: true,
   get: function get() {
@@ -81,6 +105,12 @@ Object.defineProperty(exports, "Message", {
     return _Message.default;
   }
 });
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.default;
+  }
+});
 Object.defineProperty(exports, "Navigator", {
   enumerable: true,
   get: function get() {
@@ -93,6 +123,12 @@ Object.defineProperty(exports, "Notification", {
     return _Notification.default;
   }
 });
+Object.defineProperty(exports, "Popover", {
+  enumerable: true,
+  get: function get() {
+    return _Popover.default;
+  }
+});
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function get() {
@@ -236,4 +272,16 @@ var _Radio = _interopRequireDefault(require("./Radio"));
 
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 
+var _Modal = _interopRequireDefault(require("./Modal"));
+
+var _Popover = _interopRequireDefault(require("./Popover"));
+
+var _InputNumber = _interopRequireDefault(require("./InputNumber"));
+
+var _Breadcrumb = _interopRequireDefault(require("./Breadcrumb"));
+
+var _Empty = _interopRequireDefault(require("./Empty"));
+
+var _Avatar = _interopRequireDefault(require("./Avatar"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/style/index.less

@@ -1,3 +1,4 @@
 @root-entry-name: default;
 @import './mixins/index.less';
-@import './themes/default/index.less';
+@import './themes/default/index.less';
+@import './mixins/index.less';

package/lib/style/mixins/index.less

@@ -0,0 +1,8 @@
+// 1. 字体样式
+.textStyle(@color: @NL50, @font-size: 14px, @line-height: 20px, @font-weight: normal, @font-style: normal) {
+  color: @color;
+  font-weight: @font-weight;
+  font-size: @font-size;
+  font-style: @font-style;
+  line-height: @line-height;
+}

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

@@ -1,5 +1,5 @@
 @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';
+@font-family:Inter, -apple-system, PingFang SC, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
 @ald-prefix: ant;
 
 

package/lib/style/themes/default/themeColor.module.less

@@ -2,7 +2,7 @@
 *中性浅色背景 Neutral Light
 * 主要用于文字颜色
 **/
-@NL0: #121212;
+@NL0: #001A33;
 @NL97: fade(@NL0, 3%);
 @NL95: fade(@NL0, 5%);
 @NL90: fade(@NL0, 10%);
@@ -36,101 +36,84 @@
 * 品牌色 Brand
 * 用作主操作强调、文字链、品牌传递
 **/
-@B10: #00127B;
-@B20: #1029BC;
-@B30: #2944D7;
-@B40: #435CF0;
-@B50: #6077FF;
-@B60: #7F92FF;
-@B70: #9FADFF;
-@B80: #BDC9FF;
-@B90: #DFE3FE;
-@B95: #EFF1FF;
-@B98: #F8F9FF;
+@B10: #001252;
+@B20: #071E6A;
+@B30: #0F2B7F;
+@B40: #0F38A6;
+@B50: #1945B3;
+@B60: #1552DF;
+@B70: #5588F6;
+@B80: #79A5FE;
+@B90: #ABC8FE;
+@B95: #D4E4FF;
+@B98: #EFF5FF;
 
 /**
 * 辅助A Secondary A
 * 表达完成、成功
 **/
-@SA10: #00270F;
-@SA20: #024F20;
-@SA30: #007830;
-@SA40: #059F41;
-@SA50: #08C552;
-@SA60: #1BDE6D;
-@SA70: #35F886;
-@SA80: #70FFAB;
-@SA90: #B8FFD5;
-@SA95: #DBFFEA;
-@SA98: #EFFFF5;
+@SA10: #003331;
+@SA20: #00493F;
+@SA30: #015844;
+@SA40: #026E4A;
+@SA50: #03834C;
+@SA60: #05994A;
+@SA70: #35C168;
+@SA80: #5EE080;
+@SA90: #96F4A5;
+@SA95: #C9F9CC;
+@SA98: #F0FFF0;
 
 /**
 * 辅助B Secondary B
 * 表达提醒、警告
 **/
-@SB10: #261600;
-@SB20: #542B00;
-@SB30: #7E4100;
-@SB40: #A85700;
-@SB50: #D26E00;
-@SB60: #F48500;
-@SB70: #FFA000;
-@SB80: #FFBF5B;
-@SB90: #FFDEB0;
-@SB95: #FFF0D9;
-@SB98: #FFF8EE;
+@SB10: #472800;
+@SB20: #7A4C07;
+@SB30: #93610D;
+@SB40: #B77F14;
+@SB50: #DB9F1D;
+@SB60: #FFC229;
+@SB70: #FFD55E;
+@SB80: #FFE17E;
+@SB90: #FFEEA9;
+@SB95: #FFF7D4;
+@SB98: #FFFCEB;
 
 /**
 * 辅助C Secondary C
 * 表达错误、失败
 **/
-@SC10: #550005;
-@SC20: #AF0001;
-@SC30: #EC0011;
-@SC40: #FF0033;
-@SC50: #FF2755;
-@SC60: #FF5B78;
-@SC70: #FF879A;
-@SC80: #FFAFBB;
-@SC90: #FFD7DE;
-@SC95: #FFEBEE;
-@SC98: #FFF6F7;
+@SC10: #4D000B;
+@SC20: #76070F;
+@SC30: #8F0C0C;
+@SC40: #B11E13;
+@SC50: #D4361B;
+@SC60: #F75426;
+@SC70: #FA895B;
+@SC80: #FCAB7C;
+@SC90: #FECDA8;
+@SC95: #FEE9D3;
+@SC98: #FFF8F0;
 
 /**
 * 背景色 Background
 * 主要用于背景色
 **/
 @BG0: #121212;
-@BG10: #2A2A2A;
-@BG20: #414141;
-@BG30: #595959;
-@BG40: #717171;
-@BG50: #88888B;
-@BG60: #A0A0A0;
-@BG70: #B7B7B7;
-@BG80: #D0D0D0;
-@BG90: #E7E8E8;
-@BG95: #F3F3F3;
-@BG97: #F8F8F8;
+@BG10: #0F1524;
+@BG20: #1F2B47;
+@BG30: #314168;
+@BG40: #455987;
+@BG50: #5C71A3;
+@BG60: #7A8DB8;
+@BG70: #9CA9C9;
+@BG80: #BDC6DB;
+@BG90: #E7EBF3;
+@BG95: #F5F6FA;
+@BG97: #FBFCFE;
 @BG100: #FFFFFF;
 
-/**
-* 品牌背景 Brand Background
-* 品牌色衍生灰调背景
-**/
-@BBG10: #061B3B;
-@BBG15: #112645;
-@BBG20: #203555;
-@BBG30: #3B4F6E;
-@BBG40: #536788;
-@BBG50: #6C82A3;
-@BBG60: #869BBB;
-@BBG70: #A0B5D5;
-@BBG80: #BACDEE;
-@BBG90: #D7E7FE;
-@BBG95: #EBF3FF;
-@BBG97: #F3F8FF;
-@BBG98: #F7F8FF;
 
 /***
 * 黑白
@@ -147,10 +130,7 @@
 /***
 * 投影
 ***/
-@shadow-option: 0 1px 1px rgba(0, 0, 0, 0.12);
-@shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 1px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.08);
-@shadow-actionsheet: 0 3px 5px rgba(0, 0, 0, 0.1), 0 1px 18px rgba(0, 0, 0, 0.06), 0 6px 10px rgba(0, 0, 0, 0.08);
-@shadow-notification: 0 11px 15px rgba(0, 0, 0, 0.1), 0 9px 46px rgba(0, 0, 0, 0.08), 0 24px 38px rgba(0, 0, 0, 0.04);
+@shadow-L:0px 11px 15px rgba(0, 26, 51, 0.1), 0px 9px 46px rgba(0, 26, 51, 0.05), 0px 24px 38px rgba(0, 26, 51, 0.03);
 
 // 用css module的能力，将less变量输出给js，供js文件中使用
 :export {
@@ -235,25 +215,9 @@
   BG95: @BG95;
   BG97: @BG97;
   BG100: @BG100;
-  BBG10: @BBG10;
-  BBG15: @BBG15;
-  BBG20: @BBG20;
-  BBG30: @BBG30;
-  BBG40: @BBG40;
-  BBG50: @BBG50;
-  BBG60: @BBG60;
-  BBG70: @BBG70;
-  BBG80: @BBG80;
-  BBG90: @BBG90;
-  BBG95: @BBG95;
-  BBG97: @BBG97;
-  BBG98: @BBG98;
   WHITE: @white;
   BLACK: @black;
   IMAGE_HOLDER: @imageholder;
   MATE: @mate;
-  SHADOW_OPTION: @shadow-option;
-  SHADOW_CARD: @shadow-card;
-  SHADOW_ACTIONSHEET: @shadow-actionsheet;
-  SHADOW_NOTIFICATION: @shadow-notification;
+  SHADOW_L: @shadow-L;
 }

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

@@ -12,19 +12,6 @@ interface CssExports {
   '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;
@@ -98,10 +85,7 @@ interface CssExports {
   'SC90': string;
   'SC95': string;
   'SC98': string;
-  'SHADOW_ACTIONSHEET': string;
-  'SHADOW_CARD': string;
-  'SHADOW_NOTIFICATION': string;
-  'SHADOW_OPTION': string;
+  'SHADOW_L': string;
   'WHITE': string;
 }
 export const cssExports: CssExports;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.2.5",
+  "version": "0.3.0-beta.1",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "antd": "^4.18.6",
+    "antd": "^4.19.6",
     "classnames": "^2.3.1",
     "lodash": "^4.17.21",
     "rc-input": "^0.0.1-alpha.6",
@@ -61,6 +61,7 @@
     "rc-overflow": "^1.2.3",
     "rc-resize-observer": "^1.2.0",
     "rc-trigger": "^5.2.10",
+    "rc-util": "^5.21.5",
     "rc-virtual-list": "^3.4.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-table": "^7.7.0",

package/es/Select/BaseSelect.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { ISelectProps as SelectProps } from './interface';
-export declare const Select: (props: SelectProps, ref: React.MutableRefObject<HTMLDivElement>) => JSX.Element;
-declare const _default: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;