@aloudata/aloudata-design 0.4.8 → 0.4.9

package/dist/notification/index.js

@@ -1,2 +1,149 @@
-import { notification } from 'antd';
+var _excluded = ["icon", "className", "style", "closeIcon"],
+    _excluded2 = ["icon", "className", "style", "closeIcon"],
+    _excluded3 = ["icon", "className", "style", "closeIcon"],
+    _excluded4 = ["icon", "className", "style", "closeIcon"];
+
+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; }
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { AlertTriangleDuotone, CancelCircleDuotone, CheckCircleDuotone, CloseMLine, InfoCircleLine } from '@aloudata/icons-react';
+import { notification as AntdNotification } from 'antd';
+import classnames from 'classnames';
+import React from 'react';
+import theme from "../style/themes/default/themeColor.module.less";
+var iconMap = {
+  info: /*#__PURE__*/React.createElement(InfoCircleLine, {
+    fill: theme.B40,
+    size: 20
+  }),
+  success: /*#__PURE__*/React.createElement(CheckCircleDuotone, {
+    fill: [theme.SA40, theme.ND0],
+    theme: "multi-color",
+    size: 20
+  }),
+  error: /*#__PURE__*/React.createElement(CancelCircleDuotone, {
+    fill: [theme.SC40, theme.ND0],
+    size: 20,
+    theme: "multi-color"
+  }),
+  warning: /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
+    fill: [theme.SB40, theme.ND0],
+    theme: "multi-color",
+    size: 20
+  })
+};
+var closeX = /*#__PURE__*/React.createElement(CloseMLine, {
+  size: 20,
+  fill: theme.NL40
+});
+
+var getSDefaultStyle = function getSDefaultStyle(type) {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    padding: '16px 24px',
+    background: theme.SC95,
+    border: '1px solid',
+    borderRadius: '4px',
+    boxShadow: theme.SHADOW_LG
+  }, type === 'error' && {
+    background: theme.SC95,
+    borderColor: theme.SC60
+  }), type === 'success' && {
+    background: theme.SA95,
+    borderColor: theme.SA60
+  }), type === 'warning' && {
+    background: theme.SB95,
+    borderColor: theme.SB60
+  }), type === 'info' && {
+    background: theme.B95,
+    borderColor: theme.B60
+  });
+};
+
+var notification = {
+  open: function open(config) {
+    return AntdNotification.open(config);
+  },
+  success: function success(config) {
+    var _config$icon = config.icon,
+        icon = _config$icon === void 0 ? iconMap.success : _config$icon,
+        _config$className = config.className,
+        className = _config$className === void 0 ? classnames('ald-notification-notice', config.className) : _config$className,
+        _config$style = config.style,
+        style = _config$style === void 0 ? Object.assign(getSDefaultStyle('success'), config.style) : _config$style,
+        _config$closeIcon = config.closeIcon,
+        closeIcon = _config$closeIcon === void 0 ? closeX : _config$closeIcon,
+        rest = _objectWithoutProperties(config, _excluded);
+
+    return AntdNotification.success(_objectSpread({
+      icon: icon,
+      style: style,
+      className: className,
+      closeIcon: closeIcon
+    }, rest));
+  },
+  error: function error(config) {
+    var _config$icon2 = config.icon,
+        icon = _config$icon2 === void 0 ? iconMap.error : _config$icon2,
+        _config$className2 = config.className,
+        className = _config$className2 === void 0 ? classnames('ald-notification-notice', config.className) : _config$className2,
+        _config$style2 = config.style,
+        style = _config$style2 === void 0 ? Object.assign(getSDefaultStyle('error'), config.style) : _config$style2,
+        _config$closeIcon2 = config.closeIcon,
+        closeIcon = _config$closeIcon2 === void 0 ? closeX : _config$closeIcon2,
+        rest = _objectWithoutProperties(config, _excluded2);
+
+    return AntdNotification.error(_objectSpread({
+      icon: icon,
+      style: style,
+      className: className,
+      closeIcon: closeIcon
+    }, rest));
+  },
+  warning: function warning(config) {
+    var _config$icon3 = config.icon,
+        icon = _config$icon3 === void 0 ? iconMap.warning : _config$icon3,
+        _config$className3 = config.className,
+        className = _config$className3 === void 0 ? classnames('ald-notification-notice', config.className) : _config$className3,
+        _config$style3 = config.style,
+        style = _config$style3 === void 0 ? Object.assign(getSDefaultStyle('warning'), config.style) : _config$style3,
+        _config$closeIcon3 = config.closeIcon,
+        closeIcon = _config$closeIcon3 === void 0 ? closeX : _config$closeIcon3,
+        rest = _objectWithoutProperties(config, _excluded3);
+
+    return AntdNotification.warning(_objectSpread({
+      icon: icon,
+      style: style,
+      className: className,
+      closeIcon: closeIcon
+    }, rest));
+  },
+  info: function info(config) {
+    var _config$icon4 = config.icon,
+        icon = _config$icon4 === void 0 ? iconMap.info : _config$icon4,
+        _config$className4 = config.className,
+        className = _config$className4 === void 0 ? classnames('ald-notification-notice', config.className) : _config$className4,
+        _config$style4 = config.style,
+        style = _config$style4 === void 0 ? Object.assign(getSDefaultStyle('info'), config.style) : _config$style4,
+        _config$closeIcon4 = config.closeIcon,
+        closeIcon = _config$closeIcon4 === void 0 ? closeX : _config$closeIcon4,
+        rest = _objectWithoutProperties(config, _excluded4);
+
+    return AntdNotification.info(_objectSpread({
+      icon: icon,
+      style: style,
+      className: className,
+      closeIcon: closeIcon
+    }, rest));
+  },
+  destroy: function destroy(key) {
+    return AntdNotification.destroy(key);
+  }
+};
 export default notification;

package/dist/notification/style/index.less

@@ -1 +1,29 @@
 @import '../../style/index.less';
+
+.ald-notification-notice.ant-notification-notice {
+  .ant-notification-notice-icon {
+    top: 18px;
+  }
+
+  .ant-notification-notice-message {
+    margin-inline-start: 28px;
+    padding-inline-end: 28px;
+    margin-bottom: 4px;
+  }
+
+  .ant-notification-notice-description {
+    margin-inline-start: 28px;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 20px;
+    color: @NL40;
+  }
+
+  .ant-notification-notice-close {
+    top: 17px;
+
+    &:hover{
+      background:none;
+    }
+  }
+}

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

@@ -1,36 +1,36 @@
 @import './themeColor.module.less';
-@font-family:Inter, -apple-system, PingFang SC, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
+/* stylelint-disable-next-line at-rule-no-unknown */
+@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;
 
-
 // base 不分大小写情况
 @border-radius-base: 8px;
-@line-height-base:20px;
-@font-size-base:14px;
+@line-height-base: 20px;
+@font-size-base: 14px;
 
 // large
-@font-size-large:16px;
-@line-height-large:24px;
-@padding-top-large:6px;
-@padding-bottom-large:6px;
-@padding-left-large:12px;
-@padding-right-large:12px;
-@border-radius-large:8px;
+@font-size-large: 16px;
+@line-height-large: 24px;
+@padding-top-large: 6px;
+@padding-bottom-large: 6px;
+@padding-left-large: 12px;
+@padding-right-large: 12px;
+@border-radius-large: 6px;
 
 // middle
-@font-size-middle:14px;
-@line-height-middle:20px;
-@padding-top-middle:6px;
-@padding-bottom-middle:6px;
-@padding-left-middle:12px;
-@padding-right-middle:12px;
-@border-radius-middle:6px;
+@font-size-middle: 13px;
+@line-height-middle: 20px;
+@padding-top-middle: 6px;
+@padding-bottom-middle: 6px;
+@padding-left-middle: 12px;
+@padding-right-middle: 12px;
+@border-radius-middle: 4px;
 
 // small
-@font-size-small:12px;
-@line-height-small:16px;
-@padding-top-small:6px;
-@padding-bottom-small:6px;
-@padding-left-small:8px;
-@padding-right-small:8px;
-@border-radius-small:4px;
+@font-size-small: 12px;
+@line-height-small: 16px;
+@padding-top-small: 6px;
+@padding-bottom-small: 6px;
+@padding-left-small: 8px;
+@padding-right-small: 8px;
+@border-radius-small: 4px;

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

@@ -45,7 +45,7 @@
 @B70: #84caff;
 @B80: #b2ddff;
 @B90: #d1e9ff;
-@B95: #eff8ff;
+@B95: #ebf6ff;
 @B98: #f5faff;
 
 /**
@@ -101,14 +101,14 @@
 * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
 @BG0: #000000;
-@BG10: #101828;
+@BG10: #101825;
 @BG20: #1d2939;
 @BG30: #475467;
 @BG40: #667085;
 @BG50: #98a2b3;
-@BG60: #d0d5dd;
-@BG70: #eaecf0;
-@BG80: #f2f4f7;
+@BG60: #d3d7de;
+@BG70: #e3e5ea;
+@BG80: #eff2f5;
 @BG90: #f5f6f7;
 @BG95: #f9fafb;
 @BG97: #fcfcfd;
@@ -125,8 +125,8 @@
 @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 0 0 4px rgba(21, 111, 238, 0.12);
-@shadow-drop:0px 0 0 4px #1570EF1F;
+@shadow-primary:0 0 0 4px rgba(21, 111, 238, 0.12);
+@shadow-drop:0 0 0 4px #1570EF1F;
 // 业务颜色
 // 除了原色之外，在业务、提示和标签等组件中使用一些次要颜色也很有帮助。这些次要颜色应该少用或作为重点使用，而主要颜色应该占优先地位。
 
@@ -202,8 +202,8 @@
 @TE20: #382765;
 @TE30: #4f378f;
 @TE40: #6144af;
-@TE50: #704ecb;
-@TE60: #7e58e3;
+@TE50: #9d76ed;
+@TE60: #b692f6;
 @TE70: #a08ae8;
 @TE80: #bcafee;
 @TE90: #d4cdf4;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",
@@ -50,9 +50,9 @@
     ]
   },
   "dependencies": {
-    "@aloudata/icons-react": "0.1.5",
-    "@aloudata/icons-svg": "0.1.5",
-    "antd": "5.2.0",
+    "@aloudata/icons-react": "0.1.7",
+    "@aloudata/icons-svg": "0.1.7",
+    "antd": "^5.3.1",
     "memoize-one": "^6.0.0",
     "rc-menu": "^9.8.0",
     "react-table": "^7.8.0",