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

package/dist/Input/components/TextArea/index.js

@@ -1,24 +1,37 @@
-var _excluded = ["bordered", "size", "className"];
+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 = ["bordered", "size", "disabled", "className"];
 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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+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); }
 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; }
 import AntdTextArea from 'antd/lib/input/TextArea';
 import classnames from 'classnames';
 import React, { useContext } from 'react';
 import SizeContext from "../../../ConfigProvider/sizeContext";
+import { CloseCircleFill } from "../../../Icon";
 import { getSizeType } from "../Input";
 export default /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$bordered = props.bordered,
     bordered = _props$bordered === void 0 ? true : _props$bordered,
     customSize = props.size,
+    disabled = props.disabled,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
     rest = _objectWithoutProperties(props, _excluded);
   var contentSize = useContext(SizeContext);
   var size = customSize || contentSize || 'middle';
   return /*#__PURE__*/React.createElement(AntdTextArea, _extends({}, rest, {
+    disabled: disabled,
     spellCheck: false,
-    className: classnames('ald-input-textarea', "ald-input-textarea-".concat(getSizeType(size)), className),
+    className: classnames('ald-input', 'ald-input-textarea', "ald-input-textarea-".concat(getSizeType(size)), _defineProperty({}, "ald-input-disabled", disabled), className),
+    allowClear: {
+      clearIcon: /*#__PURE__*/React.createElement(CloseCircleFill, {
+        size: 20,
+        color: "#6B7280"
+      })
+    },
     ref: ref,
     bordered: bordered
   }));

package/dist/Input/index.d.ts

@@ -1,14 +1,11 @@
 /// <reference types="react" />
 import { IInputProps, InputRef } from './components/Input';
-import Group from './components/Group';
-import TextArea from './components/TextArea';
 import Password from './components/Password';
+import TextArea from './components/TextArea';
 export type { IInputProps, InputRef, TSize } from './components/Input';
-export type { IGroupProps } from './components/Group';
-export type { ITextAreaProps, TextAreaRef } from './components/TextArea';
 export type { IPasswordProps } from './components/Password';
+export type { ITextAreaProps, TextAreaRef } from './components/TextArea';
 interface ICompoundedComponent extends React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<InputRef>> {
-    Group: typeof Group;
     TextArea: typeof TextArea;
     Password: typeof Password;
 }

package/dist/Input/index.js

@@ -1,9 +1,7 @@
 import InternalInput from "./components/Input";
-import Group from "./components/Group";
-import TextArea from "./components/TextArea";
 import Password from "./components/Password";
+import TextArea from "./components/TextArea";
 var Input = InternalInput;
-Input.Group = Group;
 Input.TextArea = TextArea;
 Input.Password = Password;
 export default Input;

package/dist/Input/style/index.less

@@ -1,573 +1,12 @@
 /* stylelint-disable no-descending-specificity */
 @import '../../style/index.less';
 @import '../../Icon/index.less';
-
-@ald-prefix: ant;
-
-// size===large
-@input-height-large: 36px;
-@input-padding-large: 5px 11px;
-@input-font-size-large: 16px;
-@input-border-radius-large: 4px;
-@input-prefix-margin-right-large: 8px;
-@input-clear-icon-large: 20px;
-// size===middle
-@input-height-middle: 32px;
-@input-padding-middle: 5px 7px;
-@input-font-size-middle: 13px;
-@input-border-radius-middle: 2px;
-@input-prefix-margin-right-middle: 4px;
-@input-clear-icon-middle: 16px;
-// size===small
-@input-height-small: 28px;
-@input-padding-small: 5px 7px;
-@input-font-size-small: 12px;
-@input-border-radius-small: 2px;
-@input-prefix-margin-right-small: 4px;
-@input-clear-icon-small: 14px;
-//custom status
-@input-border-color: @BG60;
-@input-fontColor: @NL0;
-@input-placeholder-color: @NL50;
-@input-prefix-color: @NL40;
-@input-bg-color: @BG100;
-// active status
-@input-active-border-color: @B40;
-// @input-box-shadow-active: @shadow-xs;
-// disabled status
-@input-disabled-border-color: @BG60;
-@input-disabled-bg-color: @BG90;
-@input-disabled-font-color: @NL40;
-
-.ant-input.ald-input.ald-input,
-.ant-input-affix-wrapper.ald-input.ald-input,
-.ald-input.ald-input .ant-input {
-  color: @NL0;
-  font-weight: 400;
-  background-color: @input-bg-color;
-  border-color: @input-border-color;
-  border-radius: @input-border-radius-middle;
-  // box-shadow: @shadow-xs;
-  caret-color: @B60;
-
-  .ant-input-suffix .ant-input-clear-icon {
-    display: none;
-  }
-
-  &:hover {
-    border-color: @input-border-color;
-
-    .ant-input-suffix .ant-input-clear-icon {
-      display: block;
-    }
-  }
-
-  &.ant-input-affix-wrapper-focused {
-    .ant-input-suffix .ant-input-clear-icon {
-      display: block;
-    }
-  }
-
-  &::placeholder {
-    color: @input-placeholder-color;
-  }
-
-  &-prefix {
-    color: @input-prefix-color;
-    font-size: inherit;
-  }
-
-  &-suffix {
-    color: @NL60;
-  }
-
-  &:focus,
-  &-focused {
-    border-color: @input-active-border-color;
-    box-shadow: none;
-    // box-shadow: @input-box-shadow-active;
-  }
-
-  &[disabled].ald-input {
-    color: @input-disabled-font-color;
-    background-color: @input-disabled-bg-color;
-    border-color: @input-disabled-border-color;
-    box-shadow: none;
-    cursor: default;
-
-    &::placeholder {
-      color: @input-placeholder-color;
-    }
-  }
-
-  &-affix-wrapper {
-    // height: 28px;
-    // padding: 0 12px;
-    // border-radius: @border-radius-base;
-
-    &-hover,
-    &-focused,
-    &:hover {
-      box-shadow: unset;
-    }
-
-    .ant-input {
-      height: 100%;
-      border-radius: 0;
-    }
-  }
-
-  .ant-input {
-    font-size: inherit;
-  }
-}
-
-.ant-input-affix-wrapper.ant-input-affix-wrapper.ant-input-affix-wrapper {
-  background-color: @input-bg-color;
-  border-color: @input-border-color;
-  border-radius: 2px;
-
-  // &:hover,
-  &-focused {
-    &:not(.ant-input-affix-wrapper-disabled) {
-      border-color: @input-active-border-color;
-      // box-shadow: @input-box-shadow-active;
-      box-shadow: none;
-      cursor: initial;
-    }
-  }
-
-  .ant-input {
-    color: @NL0;
-    background-color: @input-bg-color;
-    border-radius: 0;
-    box-shadow: none;
-    caret-color: @B60;
-
-    &::placeholder {
-      color: @input-placeholder-color;
-    }
-  }
-
-  .ald-input {
-    height: 1.5715em; //和行高一致
-  }
-
-  .ant-input-prefix {
-    color: #858585;
-  }
-
-  .ant-input-suffix {
-    color: #858585;
-
-    .ant-input-clear-icon {
-      color: #858585;
-      font-size: inherit;
-    }
-
-    .ant-input-password-icon {
-      color: #858585;
-    }
-  }
-}
-
-.ant-input-affix-wrapper-focused {
-  &.ant-input-password {
-    border-color: @input-active-border-color;
-    // box-shadow: @input-box-shadow-active;
-  }
-
-  // &:hover {
-  //   border-color: @input-active-border-color;
-  //   // box-shadow: @input-box-shadow-active;
-  // }
-
-  .ant-input:hover {
-    box-shadow: none;
-  }
-}
-
-.ald-input {
-  &.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-group {
-  .ald-input {
-    margin: 0;
-  }
-}
-
-.ald-input-group-large {
-  &:not(.ant-input-group-compact) .ald-input {
-    height: @input-height-large;
-    padding: @input-padding-large;
-    font-size: @input-font-size-large;
-
-    &.ant-input {
-      border-radius: @input-border-radius-large;
-    }
-
-    .ant-input-prefix {
-      margin-right: @input-prefix-margin-right-large;
-    }
-  }
-
-  &.ant-input-group-compact {
-    .ald-input,
-    .ald-select,
-    .ald-btn.ant-btn {
-      border-radius: 0;
-    }
-  }
-
-  &.ant-input-group-compact > *:first-child {
-    border-radius: 0 !important;
-    border-start-start-radius: @input-border-radius-large !important;
-    border-end-start-radius: @input-border-radius-large !important;
-  }
-
-  &.ant-input-group-compact > *:last-child {
-    border-radius: 0 !important;
-    border-inline-end-width: 1px;
-    border-start-end-radius: @input-border-radius-large !important;
-    border-end-end-radius: @input-border-radius-large !important;
-  }
-}
-
-.ald-input-group-middle {
-  &:not(.ant-input-group-compact) .ald-input {
-    height: @input-height-middle;
-    padding: @input-padding-middle;
-    font-size: @input-font-size-middle;
-    border-radius: @input-border-radius-middle;
-
-    &.ant-input {
-      border-radius: @input-border-radius-middle;
-    }
-
-    .ant-input-prefix {
-      margin-right: @input-prefix-margin-right-middle;
-    }
-  }
-
-  &.ant-input-group-compact {
-    .ald-input,
-    .ald-select,
-    .ald-btn.ant-btn {
-      border-radius: 0;
-    }
-  }
-
-  &.ant-input-group-compact > *:first-child {
-    border-radius: 0 !important;
-    border-start-start-radius: @input-border-radius-middle !important;
-    border-end-start-radius: @input-border-radius-middle !important;
-  }
-
-  &.ant-input-group-compact > *:last-child {
-    border-radius: 0 !important;
-    border-inline-end-width: 1px;
-    border-start-end-radius: @input-border-radius-middle !important;
-    border-end-end-radius: @input-border-radius-middle !important;
-  }
-}
-
-.ald-input-group-small {
-  &:not(.ant-input-group-compact) .ald-input {
-    height: @input-height-small;
-    padding: @input-padding-small;
-    font-size: @input-font-size-small;
-    border-radius: @input-border-radius-small;
-
-    &.ant-input {
-      border-radius: @input-border-radius-small;
-    }
-
-    .ant-input-prefix {
-      margin-right: @input-prefix-margin-right-small;
-    }
-  }
-
-  &.ant-input-group-compact {
-    .ald-input,
-    .ald-select,
-    .ald-btn.ant-btn {
-      border-radius: 0;
-    }
-  }
-
-  &.ant-input-group-compact > *:first-child {
-    border-radius: 0 !important;
-    border-start-start-radius: @input-border-radius-small !important;
-    border-end-start-radius: @input-border-radius-small !important;
-  }
-
-  &.ant-input-group-compact > *:last-child {
-    border-radius: 0 !important;
-    border-inline-end-width: 1px;
-    border-start-end-radius: @input-border-radius-small !important;
-    border-end-end-radius: @input-border-radius-small !important;
-  }
-}
-
-.ald-textarea-large {
-  padding: 5px 11px;
-  font-size: @font-size-large;
-  line-height: @line-height-large;
-  border-radius: @border-radius-large;
-}
-
-.ald-textarea-middle {
-  padding: 5px 11px;
-  font-size: @font-size-middle;
-  line-height: @line-height-middle;
-  border-radius: @border-radius-middle;
-}
-
-.ald-textarea-small {
-  padding: 5px 7px;
-  font-size: @font-size-small;
-  line-height: @line-height-small;
-  border-radius: @border-radius-small;
-}
-
-textarea.ald-input-textarea-large.ald-input-textarea,
-.ald-input-textarea.ald-input-textarea-large .ant-input {
-  .ald-textarea-large();
-}
-
-textarea.ald-input-textarea-middle.ald-input-textarea,
-.ald-input-textarea.ald-input-textarea-middle .ant-input {
-  .ald-textarea-middle();
-}
-
-textarea.ald-input-textarea-small.ald-input-textarea,
-.ald-input-textarea.ald-input-textarea-small .ant-input {
-  .ald-textarea-small();
-}
-
-textarea.ald-input-textarea.ald-input-textarea,
-.ald-input-textarea.ald-input-textarea .ant-input {
-  color: @NL0;
-  background: @input-bg-color;
-  caret-color: @B60;
-  border-color: @input-border-color;
-
-  // &:hover,
-  &:active,
-  &:focus {
-    border-color: @B40;
-    box-shadow: none;
-  }
-
-  ::placeholder {
-    color: @NL80;
-  }
-
-  &.ant-input-disabled {
-    color: #858585;
-    background: #f8f8f8;
-    cursor: initial;
-
-    // &:hover,
-    &:active,
-    &:focus {
-      border-color: #dbdbdb;
-      box-shadow: none;
-    }
-  }
-}
-
-.ant-input-textarea-show-count::after {
-  color: @NL50;
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.ant-input-group-wrapper {
-  .ant-input-group-addon {
-    color: #858585 !important;
-    border-color: @input-border-color;
-  }
-
-  &.ald-input-large {
-    .ant-input-group-addon {
-      padding: 4px 14px;
-      font-size: @input-font-size-large;
-    }
-
-    .ant-input {
-      height: @input-height-large;
-      padding: @input-padding-large;
-      font-size: @input-font-size-large;
-
-      .ant-input-prefix {
-        margin-right: @input-prefix-margin-right-large;
-      }
-
-      .ant-input-suffix .ant-input-clear-icon {
-        font-size: @input-clear-icon-small;
-      }
-    }
-
-    .ant-input:first-child,
-    .ant-input-group-addon:first-child {
-      border-radius: @input-border-radius-large 0 0 @input-border-radius-large;
-    }
-
-    .ant-input:last-child,
-    .ant-input-group-addon:last-child {
-      border-radius: 0 @input-border-radius-large @input-border-radius-large 0;
-    }
-  }
-
-  &.ald-input-middle {
-    .ant-input-group-addon {
-      padding: 4px 8px;
-      font-size: @input-font-size-middle;
-    }
-
-    .ant-input {
-      height: @input-height-middle;
-      padding: @input-padding-middle;
-      font-size: @input-font-size-middle;
-
-      .ant-input-prefix {
-        margin-right: @input-prefix-margin-right-middle;
-      }
-
-      .ant-input-suffix .ant-input-clear-icon {
-        font-size: @input-clear-icon-middle;
-      }
-    }
-
-    .ant-input:first-child,
-    .ant-input-group-addon:first-child {
-      border-radius: @input-border-radius-middle 0 0 @input-border-radius-middle;
-    }
-
-    .ant-input:last-child,
-    .ant-input-group-addon:last-child {
-      border-radius: 0 @input-border-radius-middle @input-border-radius-middle 0;
-    }
-  }
-
-  &.ald-input-small {
-    .ant-input-group-addon {
-      padding: 3px 8px;
-      font-size: @input-font-size-small;
-    }
-
-    .ant-input {
-      height: @input-height-small;
-      padding: @input-padding-small;
-      font-size: @input-font-size-small;
-
-      .ant-input-prefix {
-        margin-right: @input-prefix-margin-right-small;
-      }
-
-      .ant-input-suffix .ant-input-clear-icon {
-        font-size: @input-clear-icon-small;
-      }
-    }
-
-    .ant-input:first-child,
-    .ant-input-group-addon:first-child {
-      border-radius: @input-border-radius-small 0 0 @input-border-radius-small;
-    }
-
-    .ant-input:last-child,
-    .ant-input-group-addon:last-child {
-      border-radius: 0 @input-border-radius-small @input-border-radius-small 0;
-    }
-  }
-
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  .ant-input-group-addon[class][class] {
-    background-color: #f8f8f8;
-
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-}
-
-.ant-input-group.ant-input-group-compact {
-  & > {
-    .ald-select,
-    .ald-input,
-    .ant-input,
-    .ant-input-number {
-      &:hover {
-        position: relative;
-        z-index: 2;
-      }
-    }
-  }
-
-  & > .ald-select.ald-select-open {
-    position: relative;
-    z-index: 1;
-  }
-
-  .ant-input-number.ant-input-number-focused {
-    position: relative;
-    z-index: 1;
-  }
-}
+@import './reset.less';
+@import './size.less';
+@import './status.less';
 
 .ant-input-status-error:not(.ant-input-disabled):not(
     .ant-input-borderless
   ).ant-input.ant-input {
-  border-color: @error-color;
+  border-color: var(--alias-colors-border-danger, #dc2626);
 }

package/dist/Input/style/reset.less

@@ -0,0 +1,22 @@
+.ald-input.ald-input {
+  // 纯input 输入框，比如普通的<Input /> <Input.textarea />
+  &:not(.ant-input-affix-wrapper) {
+    box-shadow: none;
+  }
+  // 带有其他内容的输入框，比如带 allowClear图标、prefix、suffix、密码图标等。
+  &.ant-input-affix-wrapper {
+    box-shadow: none;
+    // 输入框
+    .ant-input.ant-input {
+      color: inherit;
+      font-size: inherit;
+    }
+    // 后缀
+    .ant-input-suffix {
+      .ant-input-clear-icon {
+        display: grid;
+        place-items: center;
+      }
+    }
+  }
+}