@aloudata/aloudata-design 1.10.14 → 2.0.0-beta.1

package/dist/Input/style/status.less

@@ -0,0 +1,105 @@
+// 光标颜色
+@input-caret-color: var(
+  --alias-colors-border-accent-gray-stronger-default,
+  #4b5563
+);
+// color enabled
+@input-enabled-border-color: var(
+  --alias-colors-border-accent-gray-subtle-default,
+  #d1d5db
+);
+@input-enabled-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+@input-enabled-text-color: var(--alias-colors-text-default, #1f2937);
+@input-enabled-placeholder-color: var(--alias-colors-text-subtlest, #9ca3af);
+// color hover
+@input-hover-border-color: var(
+  --alias-colors-border-accent-gray-subtle-hover,
+  #9ca3af
+);
+@input-hover-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+@input-hover-text-color: var(--alias-colors-text-default, #1f2937);
+@input-hover-placeholder-color: var(--alias-colors-text-subtlest, #9ca3af);
+
+//color focus
+@input-focus-border-color: var(--alias-colors-border-selected, #126fdd);
+@input-focus-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+@input-focus-text-color: var(--alias-colors-text-default, #1f2937);
+@input-focus-placeholder-color: var(--alias-colors-text-subtlest, #9ca3af);
+
+//color disabled
+@input-disabled-border-color: var(
+  --alias-colors-border-disabled,
+  rgba(0, 0, 0, 0.1)
+);
+@input-disabled-bg-color: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
+@input-disabled-text-color: var(
+  --alias-colors-text-disabled,
+  rgba(0, 0, 0, 0.25)
+);
+@input-disabled-placeholder-color: var(
+  --alias-colors-text-disabled,
+  rgba(0, 0, 0, 0.25)
+);
+
+.input-color(@border-color,@text-color,@bg-color,@placeholder-color) {
+  border-color: @border-color;
+  color: @text-color;
+  background-color: @bg-color;
+
+  &::placeholder {
+    color: @placeholder-color;
+  }
+}
+
+.ald-input.ald-input {
+  // 纯input 输入框，比如普通的<Input /> <Input.textarea />
+  &:not(.ant-input-affix-wrapper) {
+    .input-color(@input-enabled-border-color,@input-enabled-text-color,@input-enabled-bg-color,@input-enabled-placeholder-color);
+
+    &:hover {
+      .input-color(@input-hover-border-color,@input-hover-text-color,@input-hover-bg-color,@input-hover-placeholder-color);
+    }
+
+    &:focus {
+      .input-color(@input-focus-border-color,@input-focus-text-color,@input-focus-bg-color,@input-focus-placeholder-color);
+    }
+
+    &.ald-input-disabled {
+      cursor: default;
+      .input-color(@input-disabled-border-color,@input-disabled-text-color,@input-disabled-bg-color,@input-disabled-placeholder-color);
+    }
+  }
+  // 带有其他内容的输入框，比如带 allowClear图标、prefix、suffix、密码图标等。
+  &.ant-input-affix-wrapper {
+    // 纯input 输入框，比如普通的<Input /> <Input.textarea />
+    .input-color(@input-enabled-border-color,@input-enabled-text-color,@input-enabled-bg-color,@input-enabled-placeholder-color);
+
+    &:hover {
+      .input-color(@input-hover-border-color,@input-hover-text-color,@input-hover-bg-color,@input-hover-placeholder-color);
+    }
+    // 激活状态
+    &.ant-input-affix-wrapper-focused,
+    &:active {
+      .input-color(@input-focus-border-color,@input-focus-text-color,@input-focus-bg-color,@input-focus-placeholder-color);
+    }
+
+    &.ald-input-disabled {
+      cursor: default;
+      .input-color(@input-disabled-border-color,@input-disabled-text-color,@input-disabled-bg-color,@input-disabled-placeholder-color);
+
+      .ant-input-disabled {
+        cursor: default;
+      }
+    }
+    // 前缀
+    .ant-input-prefix {
+      color: var(--alias-colors-text-subtle, #4b5563);
+    }
+    // 后缀
+    .ant-input-suffix {
+      .ant-input-clear-icon {
+        color: var(--alias-colors-icon-subtle, #6b7280);
+      }
+    }
+  }
+}

package/dist/MemberPicker/style/index.less

@@ -12,7 +12,7 @@
 .ald-member-picker-wrapper {
   box-sizing: border-box;
   border: 1px solid var(--colors-gray-400, #dbdbdb);
-  background: var(--colors-neutral-white, #fff);
+  background: var(--global-colors-base-white-950a, #fff);
   box-shadow: 0 20px 24px -4px rgb(16 24 40 / 0.08),
     0 8px 8px -4px rgb(16 24 40 / 0.03);
 
@@ -192,7 +192,7 @@
   width: auto;
   height: 32px;
   box-sizing: border-box;
-  background: var(--colors-neutral-white, #fff);
+  background: var(--global-colors-base-white-950a, #fff);
   justify-content: space-between;
   min-width: 0;
 

package/dist/Menu/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "expandIcon", "items"];
+var _excluded = ["className", "items"];
 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); }
 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); }
 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; }
@@ -12,7 +12,6 @@ import { Menu as AntdMenu } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 import { ChevronRightLine } from "../Icon";
-import theme from "../style/themes/default/themeColor.module.less";
 import Divider from "./Divider";
 import MenuItem from "./MenuItem";
 import SubMenu from "./SubMenu";
@@ -30,7 +29,10 @@ export function addPopupOffset(items) {
       return _objectSpread(_objectSpread({
         popupOffset: [OFFSET_WIDTH, OFFSET_HEIGHT]
       }, item), {}, {
-        children: addPopupOffset(item.children)
+        children: addPopupOffset(item.children),
+        expandIcon: /*#__PURE__*/React.createElement(ChevronRightLine, {
+          size: 16
+        })
       });
     }
     return item;
@@ -38,15 +40,10 @@ export function addPopupOffset(items) {
 }
 export default function Menu(props) {
   var className = props.className,
-    expandIcon = props.expandIcon,
     items = props.items,
     otherProps = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(AntdMenu, _extends({
-    className: classNames(className, 'ald-menu'),
-    expandIcon: expandIcon || /*#__PURE__*/React.createElement(ChevronRightLine, {
-      color: theme.NL50,
-      size: 16
-    })
+    className: classNames(className, 'ald-menu')
   }, otherProps, {
     items: addPopupOffset(items),
     theme: "light"

package/dist/Menu/style/index.less

@@ -1,165 +1,104 @@
 @import '../../style/index.less';
-@import '../../Icon/index.less';
-@import './dropdown.less';
 
-.ant-menu-light.ald-menu.ant-menu {
-  &.ant-menu-root.ant-menu-vertical {
-    border: none;
-  }
+//  Menu 和子menu的 ul样式
+.menu-content {
+  background: var(--alias-colors-bg-skeleton-subtler, #fff);
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
 
-  .ant-menu-item,
-  .ant-menu-submenu,
-  .ant-menu-item-selected {
+  .ant-menu-item-divider,
+  .ant-menu-submenu-title-divider {
+    background-color: var(--alias-colors-border-subtle, #f3f4f6);
     margin: 0;
-    height: initial;
-    padding: 6px 8px;
-    line-height: 20px;
-    font-size: 13px;
-    width: 100%;
-    border-radius: 0;
-    border: none;
-    background-color: @BG100;
-    color: @NL0;
-    transition: none;
-    cursor: pointer;
-
-    &:hover {
-      background-color: @BG90;
-    }
-
-    &:active {
-      background-color: none;
-    }
-
-    &:not(.ant-menu-item-selected):active {
-      background-color: @BG90;
-    }
-
-    &.ant-menu-item-disabled {
-      color: @NL50 !important;
-      transition: none;
-      background-color: @BG100 !important;
-      cursor: default;
-    }
-
-    .ant-menu-submenu-title {
-      line-height: 20px;
-      font-size: 13px;
-      width: 100%;
-      padding: 0;
-      height: initial;
-      margin: 0;
-
-      &:hover {
-        background: none;
-      }
-
-      .ant-menu-submenu-expand-icon {
-        width: initial;
-        right: 8px;
-      }
-    }
   }
 
-  .ant-menu-submenu {
-    padding: 6px 0;
-
-    .ant-menu-submenu-title {
-      padding: 0 8px;
-    }
-  }
-
-  .ant-menu-title-content {
-    line-height: 20px;
-    font-size: 13px;
-    width: 100%;
-    padding: 0;
-    height: initial;
-    margin: 0;
-
-    &:hover {
-      background: none;
-    }
-  }
-}
-
-.ant-menu-submenu.ant-menu-submenu.ant-menu-submenu-popup.ant-menu {
-  .ant-menu-vertical {
-    border: 1px solid @BG70;
-    border-radius: 2px;
-    box-shadow: @shadow-L;
+  .ant-menu-item-selected {
+    background-color: unset;
   }
 
+  // menu项样式
   .ant-menu-item,
-  .ant-menu-submenu,
-  .ant-menu-item-selected {
-    margin: 0;
-    height: initial;
-    padding: 6px 8px;
+  .ant-menu-submenu .ant-menu-submenu-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--alias-padding-100, 8px) var(--alias-padding-150, 12px);
+    color: var(--alias-colors-text-default, #1f2937);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
     line-height: 20px;
-    font-size: 13px;
-    width: 100%;
+    height: auto;
+    margin: 0;
+    width: auto;
+    gap: var(--alias-spacing-50, 4px);
     border-radius: 0;
-    border: none;
-    background-color: @BG100;
-    color: @NL0;
-    transition: none;
 
     &:hover {
-      background-color: @BG90 !important;
-    }
-
-    &:active {
-      background-color: none;
+      background-color: unset;
     }
 
-    &:not(.ant-menu-item-selected):active {
-      background-color: @BG90;
+    .ant-dropdown-menu-item-icon {
+      font-size: 20px;
+      margin: 0;
     }
 
-    &.ant-menu-item-disabled {
-      color: @NL50 !important;
-      transition: none;
-      background-color: @BG100 !important;
-      cursor: default;
+    .ant-menu-title-content.ant-menu-title-content {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      margin-left: 0;
+      flex: 1;
     }
 
-    .ant-menu-submenu-title {
-      line-height: 20px;
-      font-size: 13px;
-      width: 100%;
-      padding: 0;
-      height: initial;
-      margin: 0;
-
-      &:hover {
-        background: none;
-      }
+    svg {
+      flex-shrink: 0;
     }
   }
 
   .ant-menu-submenu {
-    padding: 6px 0;
+    border-radius: 0;
+  }
+
+  .ant-menu-item.ant-menu-item-disabled {
+    cursor: default;
+    color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
 
-    .ant-menu-submenu-title {
-      padding: 0 8px;
+    &:hover {
+      background-color: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
     }
   }
 
-  .ant-menu.ant-menu-sub {
-    padding: 0;
+  .ant-menu-item:hover,
+  .ant-menu-submenu:hover,
+  .ant-menu-submenu.ant-menu-submenu-active {
+    background-color: var(
+      --alias-colors-bg-interaction-hover,
+      rgba(0, 0, 0, 0.05)
+    );
   }
+}
 
-  .ant-menu-title-content {
-    line-height: 20px;
-    font-size: 13px;
-    width: 100%;
-    padding: 0;
-    height: initial;
-    margin: 0;
+// 容器样式
+.menu-wrap {
+  border: 1px solid var(--alias-colors-border-strong, #d1d5db);
+  border-radius: var(--alias-radius-75, 6px);
+  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05),
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
 
-    &:hover {
-      background: none;
-    }
+// menu菜单
+.ant-menu-root.ant-menu {
+  border: none;
+  .menu-content();
+}
+
+.ant-menu-submenu.ant-menu-submenu-popup {
+  .menu-wrap();
+  // 二级菜单中的ul
+  .ant-menu-sub {
+    .menu-content();
   }
 }

package/dist/Modal/index.d.ts

@@ -18,7 +18,7 @@ export interface ModalProps extends Omit<AntdModalProps, 'okButtonProps' | 'canc
     okType?: ButtonType;
     paddingLess?: boolean;
     virtualScrollBar?: boolean;
-    hasHeaderBottomBorder?: boolean;
+    hideHeaderBottomBorder?: boolean;
 }
 export interface ModalFuncProps extends Omit<AntdModalFuncProps, 'okButtonProps' | 'cancelButtonProps' | 'okType' | 'icon'> {
     cancelButtonProps?: IButtonProps;

package/dist/Modal/index.js

@@ -1,6 +1,6 @@
 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); }
 var _excluded = ["className", "type", "loading", "size", "disabled", "shape"],
-  _excluded2 = ["className", "children", "okType", "width", "closeIcon", "subTitle", "okButtonProps", "cancelButtonProps", "okText", "cancelText", "icon", "title", "paddingLess", "virtualScrollBar", "hasHeaderBottomBorder"],
+  _excluded2 = ["className", "children", "okType", "width", "closeIcon", "subTitle", "okButtonProps", "cancelButtonProps", "okText", "cancelText", "icon", "title", "paddingLess", "hideHeaderBottomBorder", "virtualScrollBar"],
   _excluded3 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
   _excluded4 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
   _excluded5 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
@@ -20,7 +20,7 @@ import useModal from 'antd/lib/modal/useModal/index';
 import classNames from 'classnames';
 import React from 'react';
 import { btnPrefix, getButtonSizeClass, getButtonType, getDangerStatus, getShape } from "../Button";
-import { AlertTriangleDuotone, CancelCircleDuotone, CheckCircleDuotone, CloseLLine, InfoCircleDuotone } from "../Icon";
+import { AttentionTriangleLightLine, CheckCircleLightLine, CloseLLine, InformationCircleLightLine } from "../Icon";
 import IconButton from "../IconButton";
 import ScrollArea from "../ScrollArea";
 
@@ -49,18 +49,20 @@ function getButtonProps(buttonProps, defaultBtnType, okType) {
     shape: getShape(shape)
   });
 }
-var ModalTitle = function ModalTitle(_ref) {
+var ModalTitle = function ModalTitle(_ref, type) {
   var icon = _ref.icon,
     title = _ref.title,
     subTitle = _ref.subTitle;
   return /*#__PURE__*/React.createElement("div", {
     className: 'ald-modal-title-container'
-  }, icon, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('ald-modal-icon-container', _defineProperty({}, "ald-modal-cion-".concat(type, "-container"), type))
+  }, icon), /*#__PURE__*/React.createElement("div", {
     className: 'ald-modal-text-container'
   }, title && /*#__PURE__*/React.createElement("div", {
-    className: 'title'
+    className: 'ald-modal-text-title'
   }, title), subTitle && /*#__PURE__*/React.createElement("div", {
-    className: 'subTitle'
+    className: 'ald-modal-text-sub-title'
   }, subTitle)));
 };
 var OriginModal = function OriginModal(props) {
@@ -81,30 +83,19 @@ var OriginModal = function OriginModal(props) {
     icon = props.icon,
     title = props.title,
     paddingLess = props.paddingLess,
+    hideHeaderBottomBorder = props.hideHeaderBottomBorder,
     virtualScrollBar = props.virtualScrollBar,
-    _props$hasHeaderBotto = props.hasHeaderBottomBorder,
-    hasHeaderBottomBorder = _props$hasHeaderBotto === void 0 ? false : _props$hasHeaderBotto,
     restProps = _objectWithoutProperties(props, _excluded2);
   return /*#__PURE__*/React.createElement(AntdModal, _extends({}, restProps, {
     title: ModalTitle({
       icon: icon,
       title: title,
       subTitle: subTitle
-    })
-    // title={
-    //   <div className={'ald-modal-title-container'}>
-    //     {icon}
-    //     <div className={'ald-modal-text-container'}>
-    //       {title && <div className={'title'}>{title}</div>}
-    //       {subTitle && <div className={'subTitle'}>{subTitle}</div>}
-    //     </div>
-    //   </div>
-    // }
-    ,
+    }),
     className: classNames('ald-modal', className, {
       'ald-modal-padding-less': paddingLess,
       'ald-modal-virtual-scroll-bar': virtualScrollBar,
-      'ald-modal-header-bottom-border': hasHeaderBottomBorder
+      'ald-modal-show-header-bottom-border': hideHeaderBottomBorder
     }),
     okButtonProps: getButtonProps(okButtonProps, 'primary', okType),
     cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary'),
@@ -113,10 +104,9 @@ var OriginModal = function OriginModal(props) {
     width: width || DEFAULT_WIDTH,
     closeIcon: closeIcon || /*#__PURE__*/React.createElement(IconButton, {
       icon: /*#__PURE__*/React.createElement(CloseLLine, {
-        color: "#171717",
         size: 20
       }),
-      size: 'middle'
+      size: "middle"
     })
   }), virtualScrollBar ? /*#__PURE__*/React.createElement(ScrollArea, {
     className: 'ald-modal-body-wrap',
@@ -146,14 +136,13 @@ Modal.info = function infoFn(props) {
     width: width || DEFAULT_WIDTH,
     className: classNames('ald-modal', className),
     title: ModalTitle({
-      icon: /*#__PURE__*/React.createElement(InfoCircleDuotone, {
-        size: 32,
-        color: '#3271C9',
-        className: "ald-modal-close"
+      icon: /*#__PURE__*/React.createElement(InformationCircleLightLine, {
+        size: 24,
+        color: '#2986F4'
       }),
       title: title,
       subTitle: subTitle
-    }),
+    }, 'info'),
     okText: okText,
     cancelText: cancelText
   }, restProps));
@@ -179,14 +168,14 @@ Modal.success = function successFn(props) {
     width: width || DEFAULT_WIDTH,
     className: classNames('ald-modal', className),
     title: ModalTitle({
-      icon: /*#__PURE__*/React.createElement(CheckCircleDuotone, {
+      icon: /*#__PURE__*/React.createElement(CheckCircleLightLine, {
         fill: "#fff",
-        color: "#16B667",
-        size: 32
+        color: "#22C55E",
+        size: 24
       }),
       title: title,
       subTitle: subTitle
-    }),
+    }, 'success'),
     okText: okText,
     cancelText: cancelText
   }, restProps));
@@ -212,14 +201,14 @@ Modal.error = function errorFn(props) {
     width: width || DEFAULT_WIDTH,
     className: classNames('ald-modal', className),
     title: ModalTitle({
-      icon: /*#__PURE__*/React.createElement(CancelCircleDuotone, {
-        color: "#D64343",
+      icon: /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
+        color: "#EF4444",
         fill: '#fff',
-        size: 32
+        size: 24
       }),
       title: title,
       subTitle: subTitle
-    }),
+    }, 'error'),
     okText: okText,
     cancelText: cancelText
   }, restProps));
@@ -246,13 +235,13 @@ Modal.warning = function modalWarn(props) {
     // className: classNames('ald-modal-warning', className),
     className: classNames('ald-modal ald-modal-warning', className),
     title: ModalTitle({
-      icon: /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
-        color: "#FFB01F",
-        size: 32
+      icon: /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
+        color: "#EAB308",
+        size: 24
       }),
       title: title,
       subTitle: subTitle
-    }),
+    }, 'warning'),
     okText: okText,
     cancelText: cancelText
   }, restProps));
@@ -278,14 +267,14 @@ Modal.confirm = function confirmFn(props) {
     width: width || DEFAULT_WIDTH,
     className: classNames('ald-modal', className),
     title: ModalTitle({
-      icon: /*#__PURE__*/React.createElement(InfoCircleDuotone, {
-        size: 32,
-        color: '#3271C9',
+      icon: /*#__PURE__*/React.createElement(InformationCircleLightLine, {
+        size: 24,
+        color: '#2986F4',
         className: "ald-modal-close"
       }),
       title: title,
       subTitle: subTitle
-    }),
+    }, 'confirm'),
     okText: okText,
     cancelText: cancelText
   }, restProps));