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

package/dist/Input/style/size.less

@@ -0,0 +1,82 @@
+// size===large
+@input-height-large: 36px;
+@input-padding-large: var(--alias-padding-75-minus-1, 6px)
+  var(--alias-padding-150-minus-1, 12px);
+@input-font-size-large: 16px;
+@input-border-radius-large: 8px;
+@input-prefix-margin-right-large: var(--alias-spacing-100, 8px);
+@input-clear-icon-large: 20px;
+// size===middle
+@input-height-middle: 32px;
+@input-padding-middle: var(--alias-padding-75-minus-1, 6px)
+  var(--alias-padding-150-minus-1, 12px);
+@input-font-size-middle: 14px;
+@input-border-radius-middle: var(--alias-radius-75, 6px);
+@input-prefix-margin-right-middle: var(--alias-spacing-75, 6px);
+@input-clear-icon-middle: 20px;
+// size===small
+@input-height-small: 28px;
+@input-padding-small: var(--alias-padding-75-minus-1, 6px)
+  var(--alias-padding-150-minus-1, 12px);
+@input-font-size-small: 12px;
+@input-border-radius-small: var(--alias-radius-50, 4px);
+@input-prefix-margin-right-small: var(--alias-spacing-50, 4px);
+@input-clear-icon-small: 20px;
+
+.ald-input-wrap {
+  &.ald-input-small {
+    height: @input-height-small;
+    padding: @input-padding-small;
+    font-size: @input-font-size-small;
+    border-radius: @input-border-radius-small;
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-margin-right-small;
+    }
+
+    .ant-input-suffix .ant-input-clear-icon {
+      font-size: @input-clear-icon-small;
+    }
+  }
+
+  &.ald-input-middle {
+    height: @input-height-middle;
+    padding: @input-padding-middle;
+    font-size: @input-font-size-middle;
+    border-radius: @input-border-radius-middle;
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-margin-right-middle;
+    }
+
+    .ant-input-suffix .ant-input-clear-icon {
+      font-size: @input-clear-icon-middle;
+    }
+  }
+
+  &.ald-input-large {
+    height: @input-height-large;
+    padding: @input-padding-large;
+    font-size: @input-font-size-large;
+    border-radius: @input-border-radius-large;
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-margin-right-large;
+    }
+
+    .ant-input-suffix .ant-input-clear-icon {
+      font-size: @input-clear-icon-small;
+    }
+  }
+}
+
+.ald-input.ald-input {
+  // 带有其他内容的输入框，比如带 allowClear图标、prefix、suffix、密码图标等。
+  &.ant-input-affix-wrapper {
+    .ald-input-wrap();
+  }
+  // 纯input 输入框，比如普通的<Input /> <Input.textarea />
+  &:not(.ant-input-affix-wrapper) {
+    .ald-input-wrap();
+  }
+}

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/InputNumber/style/index.less

@@ -3,27 +3,30 @@
 
 @inputNumber-height-large: 36px;
 @inputNumber-font-size-large: 16px;
-@inputNumber-border-radius-large: 4px;
+@inputNumber-border-radius-large: 8px;
 @inputNumber-padding-large: 0 11px;
 
 @inputNumber-height-middle: 32px;
-@inputNumber-font-size-middle: 13px;
-@inputNumber-border-radius-middle: 2px;
+@inputNumber-font-size-middle: 14px;
+@inputNumber-border-radius-middle: 6px;
 @inputNumber-padding-middle: 0 7px;
 
 @inputNumber-height-small: 28px;
 @inputNumber-font-size-small: 12px;
-@inputNumber-border-radius-small: 2px;
+@inputNumber-border-radius-small: 4px;
 @inputNumber-padding-small: 0 7px;
 
 //默认
-@inputNumber-bg-color: @BG100;
-@inputNumber-border-color: @BG60;
-@inputNumber-color: @NL0;
+@inputNumber-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+@inputNumber-border-color: var(
+  --alias-colors-border-accent-gray-subtle-default,
+  #d1d5db
+);
+@inputNumber-color: var(--alias-colors-text-default, #1f2937);
 @inputNumber-wrapper-bg-color: @BG95;
 //激活
-@inputNumber-active-bg-color: @BG100;
-@inputNumber-active-border-color: @B40;
+@inputNumber-active-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+@inputNumber-active-border-color: var(--alias-colors-border-selected, #126fdd);
 
 //disable
 @inputNumber-disabled-bg-color: @BG90;

package/dist/MemberPicker/components/MultipleOption.js

@@ -4,8 +4,8 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import classnames from 'classnames';
 import React from 'react';
-import Button from "../../Button";
 import Checkbox from "../../Checkbox";
+import TextLink from "../../TextLink/index";
 import { getAccount, getId, getPhoto } from "../utils";
 import { isUserGroup } from "../utils/getUsersWithUserId";
 import NickLabel from "./NickLabel";
@@ -32,13 +32,14 @@ export default function MultipleList(params) {
     checked: selected,
     disabled: disabled
   }), /*#__PURE__*/React.createElement(NickLabel, {
+    type: user.type,
     id: getId(user),
     name: user.name,
     photo: getPhoto(user),
     account: getAccount(user)
-  })), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(Button, {
-    type: "link",
+  })), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
     className: "ald-member-picker-btn",
+    size: "small",
     onClick: function onClick(e) {
       onNextLevel === null || onNextLevel === void 0 ? void 0 : onNextLevel(user);
       e.stopPropagation();

package/dist/MemberPicker/components/NickLabel.d.ts

@@ -1,9 +1,11 @@
+import { EUserType } from "../../ConfigProvider/getUserList";
 import React from 'react';
 interface INickLabelProps {
     name?: string;
     id: string;
     photo?: React.ReactNode;
     account?: string;
+    type: EUserType;
 }
 declare const _default: React.NamedExoticComponent<INickLabelProps>;
 export default _default;

package/dist/MemberPicker/components/NickLabel.js

@@ -1,16 +1,22 @@
+import { EUserType } from "../../ConfigProvider/getUserList";
+import { UserGroup } from "../../Icon";
 import React, { memo } from 'react';
 import Avatar from "../../Avatar";
 var NickLabel = function NickLabel(_ref) {
   var photo = _ref.photo,
     name = _ref.name,
     id = _ref.id,
-    account = _ref.account;
+    account = _ref.account,
+    type = _ref.type;
   var innerName = name || id;
+  var photoSrc = !photo && type === EUserType.USER_GROUP ? /*#__PURE__*/React.createElement(UserGroup, {
+    size: 20
+  }) : photo;
   return /*#__PURE__*/React.createElement("div", {
     className: "ald-member-picker-nick-label"
   }, /*#__PURE__*/React.createElement(Avatar, {
     key: innerName,
-    src: photo,
+    src: photoSrc,
     size: 20
   }, innerName), /*#__PURE__*/React.createElement("div", {
     className: "ald-member-picker-nick-label-name",

package/dist/MemberPicker/components/Panel.js

@@ -86,7 +86,7 @@ export default function Panel(props) {
     var userSelection = /*#__PURE__*/React.createElement(MemberSelection, {
       className: 'ald-member-picker-member-selection-multiple',
       userList: dataList.filter(isUser),
-      width: (panelWidth - 3) / 2,
+      width: (panelWidth - 6) / 2,
       selectedUsers: selectedUsers.filter(isUser),
       onChange: onSelectionChange,
       onSearchValueChange: onSearchValueChange,
@@ -97,7 +97,7 @@ export default function Panel(props) {
     var userGroupSelection = /*#__PURE__*/React.createElement(UserGroupSelection, {
       className: 'ald-member-picker-member-selection-multiple',
       userGroupList: dataList.filter(isUserGroup),
-      width: (panelWidth - 3) / 2,
+      width: (panelWidth - 6) / 2,
       selectedUsersGroup: selectedUsers.filter(isUserGroup),
       onChange: onSelectionChange,
       onSearchValueChange: onSearchValueChange,

package/dist/MemberPicker/components/SelectedMemberTags.js

@@ -43,12 +43,15 @@ export default function SelectedMemberTags(props) {
     return /*#__PURE__*/React.createElement("div", {
       className: 'ald-member-picker-selected-member-tag',
       key: getId(user)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'ald-member-picker-selected-member-tag-user'
     }, /*#__PURE__*/React.createElement(NickLabel, {
+      type: user.type,
       id: getId(user),
       name: user.name,
       photo: getPhoto(user),
       account: getAccount(user)
-    }), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
+    })), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
       size: 20,
       className: 'ald-member-picker-close',
       color: "#98A2B3",

package/dist/MemberPicker/components/SingleOption.js

@@ -21,6 +21,7 @@ export default function SingleOption(params) {
     className: classnames('ald-member-picker-option', className, 'ald-member-picker-singleOption', _defineProperty({}, 'ald-member-picker-single-option-selected', selected)),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(NickLabel, {
+    type: user.type,
     id: getId(user),
     name: user.name,
     photo: getPhoto(user),

package/dist/MemberPicker/index.js

@@ -35,6 +35,7 @@ var Component = function Component(_ref) {
     disabled = _ref.disabled,
     _onClear = _ref.onClear,
     size = _ref.size,
+    selectType = _ref.selectType,
     _ref$lockedIds = _ref.lockedIds,
     lockedIds = _ref$lockedIds === void 0 ? [] : _ref$lockedIds;
   var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
@@ -185,6 +186,7 @@ var Component = function Component(_ref) {
   return /*#__PURE__*/React.createElement(Select, {
     prefix: prefix,
     size: size,
+    type: selectType,
     className: classNames('ald-member-picker-select', className),
     value: selectedUserList.map(function (item) {
       if (item.type === EUserType.USER_GROUP) {

package/dist/MemberPicker/interface.d.ts

@@ -15,6 +15,7 @@ export interface IBaseMemberSelectorProps extends Pick<ISelectProps, 'allowClear
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     type?: EMemberPicker;
+    selectType?: ISelectProps['type'];
     lockedIds?: Array<TUserValue | TUserGroupValue>;
 }
 export interface IMultipleMemberSelectorProps extends IBaseMemberSelectorProps {

package/dist/MemberPicker/style/index.less

@@ -6,15 +6,15 @@
 @import '../../Empty/style/index.less';
 @import '../../message/style/index.less';
 @import '../../Spin/style/index.less';
+@import '../../TextLink/style/index.less';
 
 @btnWidth: 30px;
 
 .ald-member-picker-wrapper {
   box-sizing: border-box;
   border: 1px solid var(--colors-gray-400, #dbdbdb);
-  background: var(--colors-neutral-white, #fff);
-  box-shadow: 0 20px 24px -4px rgb(16 24 40 / 0.08),
-    0 8px 8px -4px rgb(16 24 40 / 0.03);
+  background: var(--global-colors-base-white-950a, #fff);
+  box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
 
   &.ald-member-picker-multiple {
     display: flex;
@@ -22,9 +22,6 @@
     border-radius: 2px;
     // .memberSelection {
     // }
-    .ald-member-picker-selected-member-tags {
-      border-left: 1px solid var(--colors-gray-400, #dbdbdb);
-    }
 
     .ald-member-picker-selector-footer {
       grid-column: 1 / 3;
@@ -34,6 +31,7 @@
 
 .ald-member-picker-member-selection-wrapper {
   width: 50%;
+  border-right: 1px solid var(--alias-colors-border-default, #e5e7eb);
 }
 
 .ald-member-picker-member-list-wrap {
@@ -51,7 +49,7 @@
   .ald-member-picker-search-input.ald-member-picker-search-input {
     border: none;
     border-bottom: 1px solid var(--colors-gray-300, #e8e8e8) !important;
-    border-radius: 0;
+    border-radius: 0 !important;
     flex: 0 0 32px;
 
     &.ant-input-affix-wrapper-focused {
@@ -72,7 +70,7 @@
   }
 
   .ald-member-picker-member-list {
-    height: 200px;
+    height: 300px;
 
     &.ald-member-picker-member-list-null {
       display: none;
@@ -82,6 +80,7 @@
 
 .ald-member-picker-selected-member-tags-wrap {
   width: 50%;
+  height: 100%;
   max-height: 320px;
   padding: 8px;
 
@@ -102,19 +101,21 @@
 
     .ald-member-picker-selected-member-tag {
       display: flex;
-      padding: 1px 5px;
       justify-content: center;
-      gap: var(--global-number-spacing-spacing-xxs, 4px);
-      border-radius: var(--global-number-radius-radius-sm, 2px);
-      border: 1px solid var(--colors-gray-300, #e8e8e8);
-      font-size: 13px;
-      font-style: normal;
+      align-items: center;
+      border-radius: var(--alias-radius-50, 4px);
+      border: 1px solid
+        var(--alias-colors-border-accent-gray-subtler-default, #e5e7eb);
+      background: var(--alias-colors-bg-accent-gray-subtler-default, #f9fafb);
+      color: var(--alias-colors-text-accent-gray-default, #374151);
+      text-align: center;
+      font-size: 14px;
       font-weight: 400;
-      line-height: 20px;
-      height: 24px;
-      max-width: 100%;
+      line-height: 20px; /* 142.857% */
 
       .ald-member-picker-close {
+        border-left: 1px solid
+          var(--alias-colors-border-accent-gray-subtler-default, #e5e7eb);
         cursor: pointer;
       }
     }
@@ -130,18 +131,18 @@
   align-items: center;
   gap: var(--global-number-spacing-spacing-sm, 12px);
   align-self: stretch;
-  border-top: 1px solid var(--colors-gray-300, #e8e8e8);
-  background: var(--colors-gray-97, #f8f8f8);
+  border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
+  background: var(--alias-colors-bg-skeleton-subtler, #fff);
 }
 
 .ald-member-picker-option {
-  padding: 0 8px;
+  padding: 0 12px;
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  height: 32px;
+  height: 36px;
   line-height: 20px;
-  gap: 4px;
+  gap: 6px;
   cursor: pointer;
   justify-content: space-between;
 
@@ -192,7 +193,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;
 
@@ -231,8 +232,13 @@
   }
 }
 
+.ald-member-picker-selected-member-tag-user {
+  padding: 2px 6px;
+  display: flex;
+  align-items: center;
+}
+
 .ald-member-picker-nick-label {
-  font-size: 0;
   display: inline-flex;
   gap: 4px;
   flex-wrap: nowrap;
@@ -246,15 +252,14 @@
   }
 
   .ald-member-picker-nick-label-name {
-    color: var(--colors-gray-900, #171717);
-    font-size: 13px;
-    font-style: normal;
+    color: var(--alias-colors-text-default, #1f2937);
+    font-size: 14px;
     font-weight: 400;
-    line-height: 20px;
+    line-height: 20px; /* 142.857% */
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    max-width: 140px;
+    max-width: 130px;
   }
 }
 
@@ -308,8 +313,11 @@
   align-items: center;
 }
 
-.ald-select-popup.ald-member-picker-popup.ald-member-picker-popup {
+.ald-select-popup.ald-member-picker-popup.ald-member-picker-popup.ald-member-picker-popup {
   border: none;
   background-color: transparent;
   overflow: hidden;
+  padding: 0;
+  box-shadow: none;
+  border-radius: 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"