@aloudata/aloudata-design 0.4.0-beta.6 → 0.4.0-beta.8

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

@@ -3,98 +3,98 @@
 * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
 @NL0: #101828;
-@NL97: fade(@NL0, 3%);//TODO: 版本升级后，删除NL97;新版无此色号
-@NL95:#FCFCFD; 
-@NL90: #F9FAFB;
-@NL80: #F2F4F7;
-@NL70: #EAECF0;
-@NL60: #D0D5DD;
-@NL50: #98A2B3;
+@NL97: fade(@NL0, 3%); //TODO: 版本升级后，删除NL97;新版无此色号
+@NL95: #fcfcfd;
+@NL90: #f9fafb;
+@NL80: #f2f4f7;
+@NL70: #eaecf0;
+@NL60: #d0d5dd;
+@NL50: #98a2b3;
 @NL40: #667085;
 @NL30: #475467;
 @NL20: #344054;
-@NL10: #1D2939;
+@NL10: #1d2939;
 
 /**
 *中性深色背景 Neutral Dark
 * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
-@ND0: #FCFCFD;
-@ND97: fade(@ND0, 3%);//TODO: 版本升级后，删除ND97;新版无此色号
-@ND95:#101828; 
-@ND90: #1D2939;
+@ND0: #fcfcfd;
+@ND97: fade(@ND0, 3%); //TODO: 版本升级后，删除ND97;新版无此色号
+@ND95: #101828;
+@ND90: #1d2939;
 @ND80: #344054;
 @ND70: #475467;
 @ND60: #667085;
-@ND50: #98A2B3;
-@ND40: #D0D5DD;
-@ND30: #EAECF0;
-@ND20: #F2F4F7;
-@ND10: #F9FAFB;
+@ND50: #98a2b3;
+@ND40: #d0d5dd;
+@ND30: #eaecf0;
+@ND20: #f2f4f7;
+@ND10: #f9fafb;
 
 /**
 * 品牌色 Brand
 * 主色调是你的 "品牌 "颜色，用于所有互动元素，如按钮、链接、输入等。这种颜色可以定义整体感觉，并能引起人们的情感。
 **/
 @B10: #194185;
-@B20: #1849A9;
-@B30: #175CD3;
-@B40: #1570EF;
-@B50: #2E90FA;
-@B60: #53B1FD;
-@B70: #84CAFF;
-@B80: #B2DDFF;
-@B90: #D1E9FF;
-@B95: #EFF8FF;
-@B98: #F5FAFF;
+@B20: #1849a9;
+@B30: #175cd3;
+@B40: #1570ef;
+@B50: #2e90fa;
+@B60: #53b1fd;
+@B70: #84caff;
+@B80: #b2ddff;
+@B90: #d1e9ff;
+@B95: #eff8ff;
+@B98: #f5faff;
 
 /**
 * 辅助A Secondary A
 * 绿色传达了一个积极的行动，积极的趋势，或成功的确认。
 **/
-@SA10: #054F31;
-@SA20: #05603A;
-@SA30: #027A48;
+@SA10: #054f31;
+@SA20: #05603a;
+@SA30: #027a48;
 @SA40: #039855;
-@SA50: #12B76A;
-@SA60: #32D583;
-@SA70: #6CE9A6;
-@SA80: #A6F4C5;
-@SA90: #D1FADF;
-@SA95: #ECFDF3;
-@SA98: #F6FEF9;
+@SA50: #12b76a;
+@SA60: #32d583;
+@SA70: #6ce9a6;
+@SA80: #a6f4c5;
+@SA90: #d1fadf;
+@SA95: #ecfdf3;
+@SA98: #f6fef9;
 
 /**
 * 辅助B Secondary B
 * 橙色可以传达一个警示信号。这些颜色通常被用于提醒，以抓住用户的注意力。
 **/
-@SB10: #7A2E0E;
-@SB20: #93370D;
-@SB30: #B54708;
-@SB40: #DC6803;
-@SB50: #F79009;
-@SB60: #FDB022;
-@SB70: #FEC84B;
-@SB80: #FEDF89;
-@SB90: #FEF0C7;
-@SB95: #FFFAEB;
-@SB98: #FFFCF5;
+@SB10: #7a2e0e;
+@SB20: #93370d;
+@SB30: #b54708;
+@SB40: #dc6803;
+@SB50: #f79009;
+@SB60: #fdb022;
+@SB70: #fec84b;
+@SB80: #fedf89;
+@SB90: #fef0c7;
+@SB95: #fffaeb;
+@SB98: #fffcf5;
 
 /**
 * 辅助C Secondary C
 * 红色在错误状态和 "破坏性 "行动中使用。它们传达了一种破坏性/负面消极的行动，例如将一个用户从你的团队中删除。
 **/
-@SC10: #7A271A;
+@SC10: #7a271a;
 @SC20: #912018;
-@SC30: #B42318;
-@SC40: #D92D20;
-@SC50: #F04438;
-@SC60: #F97066;
-@SC70: #FDA29B;
-@SC80: #FECDCA;
-@SC90: #FEE4E2;
-@SC95: #FEF3F2;
-@SC98: #FFFBFA;
+@SC30: #b42318;
+@SC40: #d92d20;
+@SC50: #f04438;
+@SC60: #f97066;
+@SC70: #fda29b;
+@SC80: #fecdca;
+@SC90: #fee4e2;
+@SC95: #fef3f2;
+@SC98: #fffbfa;
 
 /**
 * 背景色 Background
@@ -102,162 +102,160 @@
 **/
 @BG0: #000000;
 @BG10: #101828;
-@BG20: #1D2939;
+@BG20: #1d2939;
 @BG30: #475467;
 @BG40: #667085;
-@BG50: #98A2B3;
-@BG60: #D0D5DD;
-@BG70: #EAECF0;
-@BG80: #F2F4F7;
-@BG90: #F5F6F7;
-@BG95: #F9FAFB;
-@BG97: #FCFCFD;
-@BG100:#FFFFFF;
-
+@BG50: #98a2b3;
+@BG60: #d0d5dd;
+@BG70: #eaecf0;
+@BG80: #f2f4f7;
+@BG90: #f5f6f7;
+@BG95: #f9fafb;
+@BG97: #fcfcfd;
+@BG100: #ffffff;
 
 /***
 * 投影
 ***/
-@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);
+@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);
 @shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
 @shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 @shadow-md: 0px 4px 6px -2px rgba(16, 24, 40, 0.08), 0px 2px 4px -2px rgba(16, 24, 40, 0.03);
 @shadow-sm: 0px 1px 4px rgba(16, 24, 40, 0.06), 0px 1px 2px rgba(16, 24, 40, 0.04);
 @shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
 @shadow-body-top-left: -4px -4px 2px rgba(0, 0, 0, 0.05);
-
-// 业务颜色 
+@shadow-primary:0px 0px 0px 4px rgba(21, 111, 238, 0.12);
+// 业务颜色
 // 除了原色之外，在业务、提示和标签等组件中使用一些次要颜色也很有帮助。这些次要颜色应该少用或作为重点使用，而主要颜色应该占优先地位。
 
 /**
 * 业务A (Tertiary A)
 **/
 
-@TA10: #2B4212;
+@TA10: #2b4212;
 @TA20: #335015;
-@TA30: #3F611A;
-@TA40: #4F7A21;
-@TA50: #669F2A;
-@TA60: #86CB3C;
-@TA70: #ACDC79;
-@TA80: #CDEAAF;
-@TA90: #E6F4D7;
-@TA95: #F5FBEE;
-@TA98: #FAFDF7;
-
+@TA30: #3f611a;
+@TA40: #4f7a21;
+@TA50: #669f2a;
+@TA60: #86cb3c;
+@TA70: #acdc79;
+@TA80: #cdeaaf;
+@TA90: #e6f4d7;
+@TA95: #f5fbee;
+@TA98: #fafdf7;
 
 /**
 * 业务B (Tertiary B)
 **/
 
-@TB10: #134E48;
-@TB20: #125D56;
-@TB30: #0F7569;
-@TB40: #0E9384;
-@TB50: #15B79E;
-@TB60: #2ED2B7;
-@TB70: #5EE9CF;
-@TB80: #99F6E0;
-@TB90: #CCFBEF;
-@TB95: #F0FDF9;
-@TB98: #F6FEFC;
+@TB10: #134e48;
+@TB20: #125d56;
+@TB30: #0f7569;
+@TB40: #0e9384;
+@TB50: #15b79e;
+@TB60: #2ed2b7;
+@TB70: #5ee9cf;
+@TB80: #99f6e0;
+@TB90: #ccfbef;
+@TB95: #f0fdf9;
+@TB98: #f6fefc;
 
 /**
 * 业务C (Tertiary C)
 **/
 
 @TC10: #013743;
-@TC20: #024D5E;
-@TC30: #036E86;
-@TC40: #0386A4;
-@TC50: #049BBD;
-@TC60: #05AED4;
-@TC70: #72C0DD;
-@TC80: #A1D2E6;
-@TC90: #C5E2EE;
-@TC95: #E4F0F6;
-@TC98: #F1F8FB;
+@TC20: #024d5e;
+@TC30: #036e86;
+@TC40: #0386a4;
+@TC50: #049bbd;
+@TC60: #05aed4;
+@TC70: #72c0dd;
+@TC80: #a1d2e6;
+@TC90: #c5e2ee;
+@TC95: #e4f0f6;
+@TC98: #f1f8fb;
 
 /**
 * 业务D (Tertiary D)
 **/
 
-@TD10: #2D3282;
-@TD20: #2D31A5;
-@TD30: #3537CC;
-@TD40: #444CE7;
-@TD50: #6071F3;
-@TD60: #7F98F9;
-@TD70: #A3BBFD;
-@TD80: #C7D7FE;
-@TD90: #E0EAFF;
-@TD95: #EEF4FF;
-@TD98: #F5F8FF;
+@TD10: #2d3282;
+@TD20: #2d31a5;
+@TD30: #3537cc;
+@TD40: #444ce7;
+@TD50: #6071f3;
+@TD60: #7f98f9;
+@TD70: #a3bbfd;
+@TD80: #c7d7fe;
+@TD90: #e0eaff;
+@TD95: #eef4ff;
+@TD98: #f5f8ff;
 
 /**
 * 业务E (Tertiary E)
 **/
 
-@TE10: #271B47;
+@TE10: #271b47;
 @TE20: #382765;
-@TE30: #4F378F;
-@TE40: #6144AF;
-@TE50: #704ECB;
-@TE60: #7E58E3;
-@TE70: #A08AE8;
-@TE80: #BCAFEE;
-@TE90: #D4CDF4;
-@TE95: #EAE7F9;
-@TE98: #F5F3FC;
+@TE30: #4f378f;
+@TE40: #6144af;
+@TE50: #704ecb;
+@TE60: #7e58e3;
+@TE70: #a08ae8;
+@TE80: #bcafee;
+@TE90: #d4cdf4;
+@TE95: #eae7f9;
+@TE98: #f5f3fc;
 
 /**
 * 业务F (Tertiary F)
 **/
 
-@TF10: #6E1876;
+@TF10: #6e1876;
 @TF20: #821890;
-@TF30: #9F1AB0;
-@TF40: #BA24D5;
-@TF50: #D444F1;
-@TF60: #E477FA;
-@TF70: #EDAAFC;
-@TF80: #F6D0FE;
-@TF90: #FBE8FF;
-@TF95: #FDF4FF;
-@TF98: #FEFAFF;
+@TF30: #9f1ab0;
+@TF40: #ba24d5;
+@TF50: #d444f1;
+@TF60: #e477fa;
+@TF70: #edaafc;
+@TF80: #f6d0fe;
+@TF90: #fbe8ff;
+@TF95: #fdf4ff;
+@TF98: #fefaff;
 
 /**
 * 业务G (Tertiary G)
 **/
 
 @TG10: #851651;
-@TG20: #9E155E;
-@TG30: #C01573;
-@TG40: #DC2590;
-@TG50: #EE46BC;
-@TG60: #F570C7;
-@TG70: #F9A7DF;
-@TG80: #FCCEEE;
-@TG90: #FCE7F6;
-@TG95: #FDF2FA;
-@TG98: #FEF6FB;
+@TG20: #9e155e;
+@TG30: #c01573;
+@TG40: #dc2590;
+@TG50: #ee46bc;
+@TG60: #f570c7;
+@TG70: #f9a7df;
+@TG80: #fcceee;
+@TG90: #fce7f6;
+@TG95: #fdf2fa;
+@TG98: #fef6fb;
 
 /**
 * 业务H (Tertiary H)
 **/
 
-@TH10: #713B11;
-@TH20: #85490D;
-@TH30: #A15B06;
-@TH40: #CA8403;
-@TH50: #EAA907;
-@TH60: #FAC414;
-@TH70: #FDE272;
-@TH80: #FEEE94;
-@TH90: #FDF7C3;
-@TH95: #FEFBE8;
-@TH98: #FEFDF0;
-
+@TH10: #713b11;
+@TH20: #85490d;
+@TH30: #a15b06;
+@TH40: #ca8403;
+@TH50: #eaa907;
+@TH60: #fac414;
+@TH70: #fde272;
+@TH80: #feee94;
+@TH90: #fdf7c3;
+@TH95: #fefbe8;
+@TH98: #fefdf0;
 
 // 用css module的能力，将less变量输出给js，供js文件中使用
 :export {
@@ -343,7 +341,7 @@
   BG97: @BG97;
   BG100: @BG100;
   SHADOW_L: @shadow-L;
-  SHADOW_BODY_TOP_LEFT:@shadow-body-top-left;
+  SHADOW_BODY_TOP_LEFT: @shadow-body-top-left;
   SHADOW_XS: @shadow-xs;
   SHADOW_SM: @shadow-sm;
   SHADOW_MD: @shadow-md;
@@ -359,7 +357,7 @@
   TA80: @TA80;
   TA90: @TA90;
   TA95: @TA95;
-  TA98: @TA98; 
+  TA98: @TA98;
 
   TB10: @TB10;
   TB20: @TB20;
@@ -371,7 +369,7 @@
   TB80: @TB80;
   TB90: @TB90;
   TB95: @TB95;
-  TB98: @TB98; 
+  TB98: @TB98;
 
   TC10: @TC10;
   TC20: @TC20;
@@ -383,7 +381,7 @@
   TC80: @TC80;
   TC90: @TC90;
   TC95: @TC95;
-  TC98: @TC98; 
+  TC98: @TC98;
 
   TD10: @TD10;
   TD20: @TD20;
@@ -395,7 +393,7 @@
   TD80: @TD80;
   TD90: @TD90;
   TD95: @TD95;
-  TD98: @TD98; 
+  TD98: @TD98;
 
   TE10: @TE10;
   TE20: @TE20;
@@ -407,7 +405,7 @@
   TE80: @TE80;
   TE90: @TE90;
   TE95: @TE95;
-  TE98: @TE98; 
+  TE98: @TE98;
 
   TF10: @TF10;
   TF20: @TF20;
@@ -419,7 +417,7 @@
   TF80: @TF80;
   TF90: @TF90;
   TF95: @TF95;
-  TF98: @TF98; 
+  TF98: @TF98;
 
   TG10: @TG10;
   TG20: @TG20;
@@ -431,7 +429,7 @@
   TG80: @TG80;
   TG90: @TG90;
   TG95: @TG95;
-  TG98: @TG98; 
+  TG98: @TG98;
 
   TH10: @TH10;
   TH20: @TH20;
@@ -443,5 +441,5 @@
   TH80: @TH80;
   TH90: @TH90;
   TH95: @TH95;
-  TH98: @TH98; 
-}
+  TH98: @TH98;
+}

package/lib/Avatar/component/Avatar/index.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { AvatarProps as antdAvatarProps } from 'antd/es/avatar/avatar';
+import Group from 'antd/es/avatar/group';
+export type { GroupProps } from 'antd/es/avatar/group';
+declare type TSize = 'large' | 'middle' | 'small' | number;
+export interface IAvatarProps extends Omit<antdAvatarProps, 'size'> {
+    /**
+     * @description 指定头像的形状
+     * @type 'circle' |'square'
+     * @default circle
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * @description 字符类型距离左右两侧边界单位像素
+     * @type number
+     * @default 4
+     */
+    gap?: number;
+    /**
+     * @description 图片头像的资源地址或者图片元素
+     * @type string | ReactNode
+     * @default -
+     */
+    src?: React.ReactNode;
+    /**
+     * @description 设置图片类头像响应式资源地址
+     * @type string
+     * @default -
+     */
+    srcSet?: string;
+    /**
+     * @description 图片是否允许拖动
+     * @type boolean ｜ 'true' | 'false'
+     * @default -
+     */
+    draggable?: boolean;
+    /**
+     * @description 设置头像的自定义图标
+     * @type ReactNode
+     * @default   -
+     */
+    icon?: React.ReactNode;
+    /**
+     * @description 图像无法显示时的替代文本
+     * @type string
+     * @default -
+     */
+    alt?: string;
+    /**
+     * @description CORS属性设置
+     * @type '' | 'anonymous' | 'use-credentials'
+     * @default -
+     */
+    crossOrigin?: '' | 'anonymous' | 'use-credentials';
+    /**
+     * @description 点击事件
+     * @type (e?: React.MouseEvent<HTMLElement>) => void
+     * @default    -
+     */
+    onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * @description 图片加载失败的事件，返回false会关闭组件默认的fallback行为
+     * @type () => boolean
+     * @default -
+     */
+    onError?: () => boolean;
+    /**
+     * @description 头像的大小，可以显示的设置数字或者预设的大小值
+     * @type 'large' | 'middle' | 'small' | number
+     * @default middle
+     */
+    size?: TSize;
+    /**
+     * @description 是否展示完整的children内容，如果children为string则默认截取第一个单词作为头像展示
+     * @type boolean
+     * @default false
+     */
+    showFullValue?: boolean;
+}
+interface ICompoundedComponent extends React.ForwardRefExoticComponent<IAvatarProps & React.RefAttributes<HTMLElement>> {
+    Group: typeof Group;
+}
+declare const _default: ICompoundedComponent;
+export default _default;

package/lib/Avatar/component/Avatar/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _avatar = _interopRequireDefault(require("antd/es/avatar/avatar"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["size", "showFullValue", "children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+var ZERO = 0;
+
+var Avatar = function Avatar(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'middle' : _props$size,
+      _props$showFullValue = props.showFullValue,
+      showFullValue = _props$showFullValue === void 0 ? false : _props$showFullValue,
+      children = props.children,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var getSizeClass = function getSizeClass(avatarSize) {
+    if (['large', 'small', 'mini'].includes("".concat(avatarSize))) {
+      return (0, _classnames.default)('ald-avatar', "ald-avatar-".concat(avatarSize));
+    }
+
+    return (0, _classnames.default)('ald-avatar', 'ald-avatar-middle');
+  };
+
+  var getChildren = function getChildren() {
+    if (!showFullValue && typeof children === 'string') {
+      return children[ZERO].toLocaleUpperCase();
+    }
+
+    return children;
+  };
+
+  return /*#__PURE__*/React.createElement(_avatar.default, Object.assign({
+    size: typeof size === 'number' ? size : undefined,
+    className: getSizeClass(size)
+  }, restProps), getChildren());
+};
+
+var _default = Avatar;
+exports.default = _default;

package/lib/Avatar/index.d.ts

@@ -1,15 +1,3 @@
-import * as React from 'react';
-import { AvatarProps as antdAvatarProps } from 'antd/es/avatar/avatar';
-import Group from 'antd/es/avatar/group';
-export type { GroupProps } from 'antd/es/avatar/group';
-declare type TSize = 'large' | 'middle' | 'small' | 'mini' | number;
-interface IAvatarProps extends Omit<antdAvatarProps, 'size'> {
-    size?: TSize;
-}
+import Avatar, { IAvatarProps } from './component/Avatar';
 export type { IAvatarProps };
-interface ICompoundedComponent extends React.ForwardRefExoticComponent<IAvatarProps & React.RefAttributes<HTMLElement>> {
-    Group: typeof Group;
-}
-declare const Avatar: ICompoundedComponent;
-export { Group };
 export default Avatar;