@aloudata/aloudata-design 0.4.8-beta.9 → 0.4.9

package/dist/Select/style/index.less

@@ -14,6 +14,7 @@
     // max-height: 264px;
     overflow-y: auto;
     overflow-y: overlay;
+    border:1px solid @BG70;
   }
 }
 

package/dist/Select/style/status.less

@@ -6,7 +6,7 @@
    */
   &:hover,&.ald-select-open{
     border-color:@B40;
-    box-shadow: @shadow-drop;
+    // box-shadow: @shadow-drop;
   }
 
   /** 

package/dist/Table/style/index.less

@@ -41,7 +41,7 @@
     color: inherit;
     text-align: left;
     word-break: break-all;
-    border-bottom: 1px solid @BG70;
+    border-bottom: 1px solid @BG80;
 
     &-content {
       flex: 1;
@@ -218,6 +218,10 @@
     margin-left: 4px;
   }
 
+  .ald-table-thead {
+    border-top: 1px solid @BG70;
+  }
+
   &-column-resizable {
     overflow: overlay;
 

package/dist/Tabs/index.d.ts

@@ -39,7 +39,21 @@ export interface ITabsProps extends Omit<TabsProps, 'size'> {
     tabPosition?: 'left' | 'right' | 'top' | 'bottom';
     className?: string;
     children?: React.ReactNode;
+    /**
+     * @description header行背景颜色
+     * @default -
+     */
     headerBackgroundColor?: string;
+    /**
+     * @description tab 宽度等分,只有tabPosition 为top的时候生效
+     * @default false
+     */
+    monospace?: boolean;
+    /**
+     * @description tab 填充padding，默认false
+     * @default false
+     */
+    padding?: boolean | number;
 }
 declare function Tabs(props: ITabsProps): JSX.Element;
 declare namespace Tabs {

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "headerBackgroundColor"];
+var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "monospace", "tabPosition", "padding"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -12,12 +12,12 @@ 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, { TabsProps } from 'antd/lib/tabs';
+import React, { useMemo } from 'react'; // import AntdTabs, { TabsProps } from 'antd/lib/tabs';
 
-import { Tabs as AntdTabs } from 'antd';
 import { MoreVerticalLine } from '@aloudata/icons-react';
-import TabPane from "./TabPane";
+import { Tabs as AntdTabs } from 'antd';
 import classNames from 'classnames';
+import TabPane from "./TabPane";
 export default function Tabs(props) {
   var size = props.size,
       className = props.className,
@@ -25,15 +25,45 @@ export default function Tabs(props) {
       adaptHeight = props.adaptHeight,
       _props$style = props.style,
       style = _props$style === void 0 ? {} : _props$style,
-      headerBackgroundColor = props.headerBackgroundColor,
+      monospace = props.monospace,
+      _props$tabPosition = props.tabPosition,
+      tabPosition = _props$tabPosition === void 0 ? 'top' : _props$tabPosition,
+      _props$padding = props.padding,
+      padding = _props$padding === void 0 ? false : _props$padding,
       otherProps = _objectWithoutProperties(props, _excluded);
 
+  var headerBackgroundColor = props.headerBackgroundColor;
+
   var tabsProps = _objectSpread({}, otherProps);
 
   if (size === 'large') {
     tabsProps.size = size;
   }
 
+  var _monospace = tabPosition !== 'top' ? false : monospace;
+
+  var _padding = useMemo(function () {
+    if (tabPosition !== 'top') return 0;
+
+    if (typeof padding === 'number') {
+      return padding;
+    }
+
+    if (typeof padding === 'boolean' && padding) {
+      return 16;
+    }
+
+    return 0;
+  }, [padding, tabPosition]);
+
+  var getTabBarGutter = function getTabBarGutter() {
+    if (tabPosition === 'top' && !_monospace) {
+      return 24;
+    }
+
+    return 0;
+  };
+
   return /*#__PURE__*/React.createElement(AntdTabs, _extends({
     moreIcon: /*#__PURE__*/React.createElement("div", {
       className: "ald-tabs-more-icon"
@@ -41,13 +71,17 @@ export default function Tabs(props) {
       color: "currentColor"
     })),
     style: Object.assign(style, {
-      "--header-bg-color": headerBackgroundColor
+      '--header-bg-color': headerBackgroundColor,
+      '--tabs-padding': "".concat(_padding, "px")
     }),
-    tabBarGutter: 24,
+    tabPosition: tabPosition,
+    tabBarGutter: getTabBarGutter(),
     popupClassName: classNames(popupClassName, 'ald-tabs-dropdown'),
     className: classNames('ald-tabs', className, {
       'ald-adapt-height': adaptHeight,
-      'ald-tabs-default': size !== 'large'
+      'ald-tabs-default': size !== 'large',
+      'ald-tabs-monospace': _monospace,
+      'ald-tabs-padding': !!padding
     })
   }, tabsProps));
 }

package/dist/Tabs/style/index.less

@@ -129,12 +129,22 @@
   &.ant-tabs-bottom > .ant-tabs-nav,
   &.ant-tabs-top > div > .ant-tabs-nav,
   &.ant-tabs-bottom > div > .ant-tabs-nav {
-    margin: 0 0 16px;
+    margin-bottom: 16px;
 
     &::before {
       border-color: @BG70;
     }
   }
+
+  &.ant-tabs-left {
+    .ant-tabs-nav-list {
+      padding-right: 24px;
+    }
+
+    .ant-tabs-tab {
+      padding: 8px 0;
+    }
+  }
 }
 
 .ald-tabs-dropdown {
@@ -170,3 +180,30 @@
     }
   }
 }
+
+.ald-tabs-monospace {
+  .ant-tabs-nav {
+    .ant-tabs-nav-wrap {
+      .ant-tabs-nav-list {
+        width: 100%;
+
+        .ant-tabs-tab {
+          flex-grow: 1;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
+
+.ald-tabs-padding {
+  .ant-tabs-nav {
+    .ant-tabs-nav-wrap {
+      margin: 0 var(--tabs-padding);
+    }
+  }
+
+  .ant-tabs-content-holder {
+    padding: 0 var(--tabs-padding) var(--tabs-padding);
+  }
+}

package/dist/Tooltip/style/index.less

@@ -5,12 +5,18 @@
     padding: 6px 12px;
     line-height: 20px;
     background: @BG10;
-    border-radius: @border-radius-base;
+    border-radius: 4px;
     box-shadow: none;
     color:@ND0;
     font-size: 13px;
   }
 
+  .ant-tooltip-arrow {
+    &::before{
+      background-color: @BG10;
+    }
+  }
+
   .ant-tooltip-arrow-content {
     background: @BG10;
   }

package/dist/notification/demo/index.js

@@ -1,13 +1,30 @@
-import { Button, notification } from "../..";
+import { Button, notification, Space } from "../..";
 import React from 'react';
 export default (function () {
-  var notices = function notices() {
-    notification.error({
-      message: 'Notification Title'
+  var notices = function notices(type) {
+    notification[type]({
+      message: 'Notification Message',
+      description: 'description,description,description,description,description,description,description,description'
     });
   };
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    onClick: notices
-  }, "Notification error"));
+  return /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('success');
+    }
+  }, "Notification success with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('error');
+    }
+  }, "Notification error with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('warning');
+    }
+  }, "Notification warning with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('info');
+    }
+  }, "Notification info with message\u3001description"));
 });

package/dist/notification/index.d.ts

@@ -1,2 +1,10 @@
-import { notification } from 'antd';
+import type { ArgsProps } from 'antd/es/notification/interface';
+declare const notification: {
+    open: (config: ArgsProps) => void;
+    success: (config: ArgsProps) => void;
+    error: (config: ArgsProps) => void;
+    warning: (config: ArgsProps) => void;
+    info: (config: ArgsProps) => void;
+    destroy: (key?: string) => void;
+};
 export default notification;

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/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-beta.9",
+  "version": "0.4.9",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",
@@ -52,7 +52,7 @@
   "dependencies": {
     "@aloudata/icons-react": "0.1.7",
     "@aloudata/icons-svg": "0.1.7",
-    "antd": "5.2.0",
+    "antd": "^5.3.1",
     "memoize-one": "^6.0.0",
     "rc-menu": "^9.8.0",
     "react-table": "^7.8.0",