@aloudata/aloudata-design 0.4.8-beta.1 → 0.4.8-beta.11

package/dist/Select/style/single.less

@@ -1,6 +1,6 @@
 .ald-single-option-list{
   color: @NL0;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 20px;
 
   .ald-single-option{
@@ -8,6 +8,8 @@
     display: flex;
     align-items: center;
     margin-left: 0;
+    height: 36px;
+    box-sizing: border-box;
 
     &:hover{
       background-color: @BG90;
@@ -23,5 +25,14 @@
     .ald-single-option-text{
       white-space: nowrap;
     }
+
+    &.ald-single-option-disabled{
+      opacity: 0.5;
+
+      &:hover{
+        background: none;
+        cursor: default;
+      }
+    }
   }
 }

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

@@ -63,8 +63,10 @@
   &-thead {
     flex: 1;
     overflow: hidden;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 600;
+    background-color: @BG80;
+    mix-blend-mode: multiply;
 
     .ald-table-row {
       min-width: 9999px; // 防止拖动时的闪动
@@ -76,7 +78,6 @@
       padding: 6px 16px;
       color: @NL0;
       line-height: 20px;
-      background-color: @BG80;
       height: 100%;
 
       .ald-table-cell-content {
@@ -92,7 +93,7 @@
         z-index: 1;
         display: inline-block;
         width: 12px;
-        height: 14px;
+        height: 1em;
         transform: translateY(-50%);
         touch-action: none;
 
@@ -101,6 +102,7 @@
           width: 1px;
           height: 100%;
           background-color: @BG70;
+          mix-blend-mode: multiply;
           content: '';
         }
       }
@@ -130,7 +132,7 @@
         display: flex;
         align-items: center;
         padding-left: 16px;
-        color: @NL40;
+        color: @NL0;
 
         .ald-table-cell-container {
           width: 100%;
@@ -192,8 +194,8 @@
 
     &-left {
       color: @NL0;
-      font-weight: 500;
-      font-size: 14px;
+      font-weight: 600;
+      font-size: 13px;
     }
 
     &-right {
@@ -202,7 +204,7 @@
       justify-content: flex-end;
       height: 28px;
       color: @NL0;
-      font-size: 14px;
+      font-size: 13px;
     }
   }
 

package/dist/Tabs/index.d.ts

@@ -39,6 +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"];
+var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "monospace", "headerBackgroundColor", "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,17 +12,25 @@ 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,
       popupClassName = props.popupClassName,
       adaptHeight = props.adaptHeight,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      monospace = props.monospace,
+      headerBackgroundColor = props.headerBackgroundColor,
+      _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 tabsProps = _objectSpread({}, otherProps);
@@ -31,17 +39,40 @@ export default function Tabs(props) {
     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]);
+
   return /*#__PURE__*/React.createElement(AntdTabs, _extends({
     moreIcon: /*#__PURE__*/React.createElement("div", {
       className: "ald-tabs-more-icon"
     }, /*#__PURE__*/React.createElement(MoreVerticalLine, {
       color: "currentColor"
     })),
-    tabBarGutter: 24,
+    style: Object.assign(style, {
+      '--header-bg-color': headerBackgroundColor,
+      '--tabs-padding': "".concat(_padding, "px")
+    }),
+    tabPosition: tabPosition,
+    tabBarGutter: _monospace ? 0 : 24,
     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

@@ -22,6 +22,10 @@
 .ant-tabs.ald-tabs {
   &.ant-tabs {
     color: @NL40;
+
+    .ant-tabs-nav {
+      background-color: var(--header-bg-color);
+    }
   }
 
   .ant-tabs-tab {
@@ -125,12 +129,18 @@
   &.ant-tabs-bottom > .ant-tabs-nav,
   &.ant-tabs-top > div > .ant-tabs-nav,
   &.ant-tabs-bottom > div > .ant-tabs-nav {
-    margin: 0 0 20px;
+    margin-bottom: 16px;
 
     &::before {
       border-color: @BG70;
     }
   }
+
+  &.ant-tabs-left {
+    .ant-tabs-nav-list{
+     padding-right: 24px;
+    }
+  }
 }
 
 .ald-tabs-dropdown {
@@ -166,3 +176,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/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/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/package.json

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