@arco-design/mobile-react 2.24.1 → 2.25.0

package/esm/ellipsis/index.js

@@ -5,6 +5,7 @@ import { isSupportWebkitLineClamp } from './utils/is';
 import JsEllipsis from './components/js-ellipsis';
 import NativeEllipsis from './components/native-ellipsis';
 export * from './type';
+
 /**
  * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
  * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
@@ -13,34 +14,32 @@ export * from './type';
  * @name 文本缩略
  * @name_en Ellipsis
  */
-
 var Ellipsis = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      text = props.text,
-      dangerouslyUseInnerHTML = props.dangerouslyUseInnerHTML,
-      _props$maxLine = props.maxLine,
-      maxLine = _props$maxLine === void 0 ? 1 : _props$maxLine,
-      maxHeight = props.maxHeight,
-      _props$ellipsis = props.ellipsis,
-      ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
-      _props$ellipsisNode = props.ellipsisNode,
-      ellipsisNode = _props$ellipsisNode === void 0 ? '...' : _props$ellipsisNode,
-      _props$collapseNode = props.collapseNode,
-      collapseNode = _props$collapseNode === void 0 ? '' : _props$collapseNode,
-      endExcludes = props.endExcludes,
-      _props$reflowOnResize = props.reflowOnResize,
-      reflowOnResize = _props$reflowOnResize === void 0 ? false : _props$reflowOnResize,
-      _props$floatEllipsisN = props.floatEllipsisNode,
-      floatEllipsisNode = _props$floatEllipsisN === void 0 ? false : _props$floatEllipsisN,
-      onReflow = props.onReflow,
-      onCollapseNodeClick = props.onCollapseNodeClick,
-      onEllipsisNodeClick = props.onEllipsisNodeClick;
+    text = props.text,
+    dangerouslyUseInnerHTML = props.dangerouslyUseInnerHTML,
+    _props$maxLine = props.maxLine,
+    maxLine = _props$maxLine === void 0 ? 1 : _props$maxLine,
+    maxHeight = props.maxHeight,
+    _props$ellipsis = props.ellipsis,
+    ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
+    _props$ellipsisNode = props.ellipsisNode,
+    ellipsisNode = _props$ellipsisNode === void 0 ? '...' : _props$ellipsisNode,
+    _props$collapseNode = props.collapseNode,
+    collapseNode = _props$collapseNode === void 0 ? '' : _props$collapseNode,
+    endExcludes = props.endExcludes,
+    _props$reflowOnResize = props.reflowOnResize,
+    reflowOnResize = _props$reflowOnResize === void 0 ? false : _props$reflowOnResize,
+    _props$floatEllipsisN = props.floatEllipsisNode,
+    floatEllipsisNode = _props$floatEllipsisN === void 0 ? false : _props$floatEllipsisN,
+    onReflow = props.onReflow,
+    onCollapseNodeClick = props.onCollapseNodeClick,
+    onEllipsisNodeClick = props.onEllipsisNodeClick;
   var domRef = useRef(null);
   var jsEllipsisRef = useRef(null);
   var useNativeEllipsis = isSupportWebkitLineClamp() && maxHeight === void 0 && (!endExcludes || endExcludes.length === 0) && !onReflow && (floatEllipsisNode || ellipsisNode === '...' && !onEllipsisNodeClick);
   useImperativeHandle(ref, function () {
     var _jsEllipsisRef$curren;
-
     return {
       dom: domRef.current,
       reflow: jsEllipsisRef == null ? void 0 : (_jsEllipsisRef$curren = jsEllipsisRef.current) == null ? void 0 : _jsEllipsisRef$curren.reflow

package/esm/ellipsis/style/css/index.css

@@ -18,6 +18,9 @@
   background:  linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff) ;
   padding-left:  20PX ;
 }
+.arco-ellipsis-js-content-text-pre {
+  white-space: pre-line;
+}
 .arco-ellipsis-js-content-ellipsis {
   display: none;
 }

package/esm/ellipsis/style/index.less

@@ -21,6 +21,10 @@
         .use-var(padding-left, ellipsis-float-ellipsis-node-padding-left);
     }
 
+    &-js-content-text-pre {
+        white-space: pre-line;
+    }
+    
     &-js-content-ellipsis {
         display: none;
     }

package/esm/ellipsis/utils/dom.js

@@ -1,7 +1,6 @@
 export function getLineHeight(element) {
   var style = window.getComputedStyle(element, null);
   var lineHeight = style.getPropertyValue('line-height');
-
   if (lineHeight === 'normal') {
     // Create a temp element to get line-height
     var dom = document.createElement('span');
@@ -14,30 +13,24 @@ export function getLineHeight(element) {
     element.removeChild(dom);
     return height;
   }
-
   return parseFloat(lineHeight);
 }
-
 function createSpan(text, className) {
   if (className === void 0) {
     className = '';
   }
-
   var span = document.createElement('span');
   span.className = className;
   span.textContent = text;
   return span;
 }
-
 export function wrapTextChildNodesWithSpan(node, className) {
   if (className === void 0) {
     className = '';
   }
-
   if (node.nodeType === Node.TEXT_NODE) {
     if (node.textContent) {
       var _node$parentNode;
-
       (_node$parentNode = node.parentNode) == null ? void 0 : _node$parentNode.replaceChild(createSpan(node.textContent, className), node);
     }
   } else {

package/esm/ellipsis/utils/is.js

@@ -1,8 +1,8 @@
 export var isBrowser = function isBrowser() {
   return typeof window !== 'undefined' && typeof document !== 'undefined';
 };
-/** Whether the environment support -webkit-line-clamp. */
 
+/** Whether the environment support -webkit-line-clamp. */
 export var isSupportWebkitLineClamp = function isSupportWebkitLineClamp() {
   return isBrowser() && typeof document.body.style.webkitLineClamp !== 'undefined';
 };

package/esm/form/form-item-context.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IFormItemContext } from './type';
+export declare const FormItemContext: React.Context<IFormItemContext>;

package/esm/form/form-item-context.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { defaultFormDataMethods } from './useForm';
+export var FormItemContext = /*#__PURE__*/React.createContext({
+  form: defaultFormDataMethods,
+  layout: 'horizontal'
+});

package/esm/form/form-item.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FormItemProps, FormItemRef } from './type';
+declare const _default: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<FormItemRef>>;
+export default _default;

package/esm/form/form-item.js

@@ -0,0 +1,306 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+var _excluded = ["label", "field", "disabled", "layout", "style", "extra", "requiredIcon", "rules", "className"];
+/* eslint-disable react/no-unused-class-component-methods */
+import React, { forwardRef, PureComponent, useContext, useImperativeHandle, useRef, useState } from 'react';
+import { cls, Validator, ValidatorType } from '@arco-design/mobile-utils';
+import { FormItemContext } from './form-item-context';
+import { GlobalContext } from '../context-provider';
+import { FormInternalComponentType } from './type';
+import { getErrorAndWarnings, isFieldRequired } from './utils';
+var FormItemInner = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(FormItemInner, _PureComponent);
+  function FormItemInner(props, context) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
+    _this.destroyField = void 0;
+    _this._errors = [];
+    _this._touched = false;
+    _this.innerTriggerFunction = function (_, value) {
+      var _children$props;
+      _this.setFieldData(value);
+      var _this$props = _this.props,
+        children = _this$props.children,
+        trigger = _this$props.trigger;
+      if (trigger && (_children$props = children.props) != null && _children$props[trigger]) {
+        var _children$props2;
+        for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+          args[_key - 2] = arguments[_key];
+        }
+        (_children$props2 = children.props) == null ? void 0 : _children$props2[trigger].apply(_children$props2, [_, value].concat(args));
+      }
+    };
+    _this.innerTriggerFunctionWithValueFirst = function (value) {
+      var _children$props3;
+      _this.setFieldData(value);
+      var _this$props2 = _this.props,
+        children = _this$props2.children,
+        trigger = _this$props2.trigger;
+      if (trigger && (_children$props3 = children.props) != null && _children$props3[trigger]) {
+        var _children$props4;
+        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          args[_key2 - 1] = arguments[_key2];
+        }
+        (_children$props4 = children.props) == null ? void 0 : _children$props4[trigger].apply(_children$props4, [value].concat(args));
+      }
+    };
+    _this.destroyField = function () {};
+    if (props != null && props.initialValue && props.field) {
+      var _setInitialValues;
+      var _context$form$getInte = context.form.getInternalHooks(),
+        setInitialValues = _context$form$getInte.setInitialValues;
+      setInitialValues((_setInitialValues = {}, _setInitialValues[props.field] = props.initialValue, _setInitialValues));
+    }
+    return _this;
+  }
+  var _proto = FormItemInner.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    var _this$context$form$ge = this.context.form.getInternalHooks(),
+      registerField = _this$context$form$ge.registerField;
+    this.destroyField = registerField(this.props.field, this);
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.destroyField();
+  };
+  _proto.onValueChange = function onValueChange(preStore, curStore) {
+    this._touched = true;
+    var shouldUpdate = this.props.shouldUpdate;
+    if (typeof shouldUpdate === 'function') {
+      shouldUpdate({
+        preStore: preStore,
+        curStore: curStore
+      }) && this.forceUpdate();
+      return;
+    }
+    this.forceUpdate();
+  };
+  _proto.getFieldError = function getFieldError() {
+    return this._errors;
+  };
+  _proto.isFieldTouched = function isFieldTouched() {
+    return this._touched;
+  };
+  _proto.validateField = function validateField() {
+    var _this2 = this;
+    var validateMessages = this.context.validateMessages;
+    var getFieldValue = this.context.form.getFieldValue;
+    var _this$props3 = this.props,
+      field = _this$props3.field,
+      rules = _this$props3.rules,
+      onValidateStatusChange = _this$props3.onValidateStatusChange;
+    var value = getFieldValue(field);
+    if (rules != null && rules.length && field) {
+      var _Validator;
+      var fieldDom = this.props.getFormItemRef();
+      var fieldValidator = new Validator((_Validator = {}, _Validator[field] = rules, _Validator), {
+        validateMessages: validateMessages
+      });
+      return new Promise(function (resolve) {
+        var _fieldValidator$valid;
+        fieldValidator.validate((_fieldValidator$valid = {}, _fieldValidator$valid[field] = value, _fieldValidator$valid), function (errorsMap) {
+          var _getErrorAndWarnings = getErrorAndWarnings((errorsMap == null ? void 0 : errorsMap[field]) || []),
+            errors = _getErrorAndWarnings.errors,
+            warnings = _getErrorAndWarnings.warnings;
+          _this2._errors = errors;
+          onValidateStatusChange({
+            errors: _this2._errors,
+            warnings: warnings
+          });
+          return resolve({
+            errors: _this2._errors,
+            warnings: warnings,
+            value: value,
+            field: field,
+            dom: fieldDom
+          });
+        });
+      });
+    }
+    return Promise.resolve({
+      errors: [],
+      warnings: [],
+      value: value,
+      field: field,
+      dom: null
+    });
+  };
+  _proto.setFieldData = function setFieldData(value) {
+    var field = this.props.field;
+    var _ref = this.context.form,
+      setFieldValue = _ref.setFieldValue;
+    setFieldValue(field, value);
+    this.validateField();
+  };
+  _proto.innerClearFunction = function innerClearFunction() {
+    var _children$props5;
+    var children = this.props.children;
+    this.setFieldData('');
+    if ((_children$props5 = children.props) != null && _children$props5.onClear) {
+      var _children$props6;
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+      (_children$props6 = children.props) == null ? void 0 : _children$props6.onClear.apply(_children$props6, args);
+    }
+  };
+  _proto.renderChildren = function renderChildren() {
+    var _props,
+      _children$type,
+      _this3 = this;
+    var _this$props4 = this.props,
+      children = _this$props4.children,
+      field = _this$props4.field,
+      _this$props4$trigger = _this$props4.trigger,
+      trigger = _this$props4$trigger === void 0 ? 'onChange' : _this$props4$trigger,
+      _this$props4$triggerP = _this$props4.triggerPropsField,
+      triggerPropsField = _this$props4$triggerP === void 0 ? 'value' : _this$props4$triggerP,
+      displayType = _this$props4.displayType;
+    var _ref2 = this.context.form,
+      getFieldValue = _ref2.getFieldValue;
+    var props = (_props = {}, _props[triggerPropsField] = getFieldValue(field), _props.disabled = this.props.disabled, _props);
+    var childrenType = displayType || ((_children$type = children.type) == null ? void 0 : _children$type.displayName);
+    switch (childrenType) {
+      case FormInternalComponentType.Input:
+      case FormInternalComponentType.Textarea:
+        props = {
+          value: getFieldValue(field) || '',
+          onInput: this.innerTriggerFunction,
+          onClear: this.innerClearFunction,
+          disabled: this.props.disabled
+        };
+        break;
+      case FormInternalComponentType.Checkbox:
+      case FormInternalComponentType.Radio:
+      case FormInternalComponentType.Slider:
+      case FormInternalComponentType.RadioGroup:
+      case FormInternalComponentType.CheckboxGroup:
+        props = {
+          value: getFieldValue(field),
+          onChange: this.innerTriggerFunctionWithValueFirst,
+          disabled: this.props.disabled
+        };
+        break;
+      case FormInternalComponentType.DatePicker:
+        props = {
+          currentTs: getFieldValue(field),
+          onChange: this.innerTriggerFunction,
+          disabled: this.props.disabled
+        };
+        break;
+      case FormInternalComponentType.Picker:
+        props = {
+          data: getFieldValue(field),
+          onPickerChange: this.innerTriggerFunction,
+          disabled: this.props.disabled
+        };
+        break;
+      case FormInternalComponentType.Switch:
+        props = {
+          checked: Boolean(getFieldValue(field)),
+          onChange: this.innerTriggerFunctionWithValueFirst,
+          disabled: this.props.disabled
+        };
+        break;
+      case FormInternalComponentType.ImagePicker:
+        props = {
+          images: getFieldValue(field),
+          onChange: this.innerTriggerFunctionWithValueFirst,
+          disabled: this.props.disabled
+        };
+        break;
+      default:
+        var originTrigger = children.props[trigger];
+        // inject the validated result
+        props.error = this._errors;
+        props[trigger] = function (newValue) {
+          _this3.setFieldData(newValue);
+          for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+            args[_key4 - 1] = arguments[_key4];
+          }
+          originTrigger && originTrigger.apply(void 0, [newValue].concat(args));
+        };
+    }
+    return /*#__PURE__*/React.cloneElement(children, props);
+  };
+  _proto.render = function render() {
+    return this.renderChildren();
+  };
+  return FormItemInner;
+}(PureComponent);
+FormItemInner.contextType = FormItemContext;
+export default /*#__PURE__*/forwardRef(function (props, ref) {
+  var _cls;
+  var label = props.label,
+    field = props.field,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    itemLayout = props.layout,
+    style = props.style,
+    extra = props.extra,
+    requiredIcon = props.requiredIcon,
+    rules = props.rules,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useContext = useContext(GlobalContext),
+    prefixCls = _useContext.prefixCls;
+  var _useContext2 = useContext(FormItemContext),
+    layout = _useContext2.layout,
+    propsDisabled = _useContext2.disabled;
+  var _useState = useState(null),
+    errors = _useState[0],
+    setErrors = _useState[1];
+  var _useState2 = useState([]),
+    warnings = _useState2[0],
+    setWarnings = _useState2[1];
+  var formItemRef = useRef(null);
+  var onValidateStatusChange = function onValidateStatusChange(validateResult) {
+    var _errors = validateResult.errors,
+      _warnings = validateResult.warnings;
+    setErrors(_errors.length ? _errors[0] : null);
+    setWarnings(_warnings);
+  };
+  var getFormItemRef = function getFormItemRef() {
+    return formItemRef.current;
+  };
+  var fieldDisabled = disabled || propsDisabled;
+  var fieldRules = rest != null && rest.required ? [{
+    type: ValidatorType.String,
+    required: true
+  }].concat(rules || []) : rules;
+  var isRequired = isFieldRequired(rules) || (rest == null ? void 0 : rest.required);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: formItemRef.current
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-form-item", prefixCls + "-form-item-" + (itemLayout || layout), className, (_cls = {
+      disabled: fieldDisabled
+    }, _cls[prefixCls + "-form-item-error"] = !!errors, _cls[prefixCls + "-form-item-warning"] = Boolean(!errors && warnings), _cls)),
+    style: style,
+    ref: formItemRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-form-label-item")
+  }, isRequired ? requiredIcon || /*#__PURE__*/React.createElement("span", {
+    className: cls(prefixCls + "-form-label-item-required-asterisk")
+  }, "*") : null, label), /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-form-item-control-wrapper")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-form-item-control")
+  }, /*#__PURE__*/React.createElement(FormItemInner, _extends({}, rest, {
+    rules: fieldRules,
+    disabled: fieldDisabled,
+    field: field,
+    onValidateStatusChange: onValidateStatusChange,
+    getFormItemRef: getFormItemRef
+  }))), errors && /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-form-item-message " + prefixCls + "-form-item-error-message")
+  }, errors), (warnings || []).map(function (node, key) {
+    return typeof node === 'string' ? /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-form-item-message " + prefixCls + "-form-item-warning-message"),
+      key: key
+    }, node) : node;
+  })), extra);
+});

package/esm/form/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FormProps, FormRef } from './type';
+export { default as useForm } from './useForm';
+export * from './type';
+declare const _default: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<FormRef>> & {
+    Item: React.ForwardRefExoticComponent<import("./type").FormItemProps & React.RefAttributes<import("./type").FormItemRef>>;
+};
+/**
+ * 表单组件用于集合数据录入
+ * @en Form, Form for collecting data input
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 表单
+ * @name_en Form
+ */
+export default _default;

package/esm/form/index.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { componentWrapper, defaultLocale } from '@arco-design/mobile-utils';
+import React, { useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
+import { ContextLayout } from '../context-provider';
+import Item from './form-item';
+import { FormItemContext } from './form-item-context';
+import useForm from './useForm';
+export { default as useForm } from './useForm';
+export * from './type';
+var Form = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    style = props.style,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
+    initialValues = props.initialValues,
+    formInstance = props.form,
+    children = props.children,
+    onValuesChange = props.onValuesChange,
+    onSubmit = props.onSubmit,
+    onSubmitFailed = props.onSubmitFailed,
+    disabled = props.disabled;
+  var domRef = useRef(null);
+  var _useForm = useForm(formInstance),
+    form = _useForm[0];
+  var _getInternalHooks = form.getInternalHooks(),
+    setCallbacks = _getInternalHooks.setCallbacks,
+    setInitialValues = _getInternalHooks.setInitialValues;
+  setCallbacks({
+    onValuesChange: onValuesChange,
+    onSubmit: onSubmit,
+    onSubmitFailed: onSubmitFailed
+  });
+  useEffect(function () {
+    setInitialValues(initialValues || {});
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current,
+      form: form
+    };
+  });
+  var contextValue = {
+    form: form,
+    layout: layout,
+    disabled: disabled
+  };
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls,
+      _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
+    return /*#__PURE__*/React.createElement("form", {
+      className: prefixCls + "-form " + className,
+      style: style,
+      ref: domRef,
+      onSubmit: function onSubmit(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        form.submit();
+      }
+    }, /*#__PURE__*/React.createElement(FormItemContext.Provider, {
+      value: _extends({}, contextValue, {
+        validateMessages: (locale == null ? void 0 : locale.Form) || {}
+      })
+    }, children));
+  });
+});
+
+/**
+ * 表单组件用于集合数据录入
+ * @en Form, Form for collecting data input
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 表单
+ * @name_en Form
+ */
+export default componentWrapper(Form, {
+  Item: Item
+});

package/esm/form/style/css/index.css

@@ -0,0 +1,92 @@
+.arco-form-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+          align-items: flex-start;
+  border-top: 1px solid var(--form-item-border-divider-color);
+}
+.arco-form-item:first-child {
+  border: none;
+}
+.arco-form-label-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  position: relative;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+          justify-content: flex-start;
+  font-size:  0.32rem ;
+  line-height:  1.08rem ;
+  color:  #1d2129 ;
+  padding-right:  0.32rem ;
+  width:  1.92rem ;
+}
+.arco-form-label-item-required-asterisk {
+  position: absolute;
+  left: -0.6em;
+  top: 0;
+  font-size:  0.32rem ;
+  line-height:  1.08rem ;
+  color:  #f53f3f ;
+}
+.disabled .arco-form-label-item {
+  color:  #c9cdd4 ;
+}
+.arco-form-item-control {
+  padding: 16px 0;
+}
+.arco-form-item-control .arco-input-wrap,
+.arco-form-item-control .arco-input {
+  padding: 0;
+}
+.arco-form-item-control-wrapper {
+  width: 100%;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  position: relative;
+}
+.arco-form-item-control-wrapper .arco-input-wrap {
+  height:  0.44rem ;
+}
+.arco-form-item-message {
+  font-size: 0.24rem;
+  color:  #f53f3f ;
+  margin-top: -0.1rem;
+  margin-bottom: 16px;
+}
+.arco-form-item-message svg,
+.arco-form-item-message span {
+  vertical-align: middle;
+}
+.arco-form-item-message svg {
+  margin-right: 0.08rem;
+}
+.arco-form-item-error-message {
+  color:  #f53f3f ;
+}
+.arco-form-item-warning-message {
+  color:  #ff7d00 ;
+}
+.arco-form-item.arco-form-item-vertical {
+  display: block;
+}
+.arco-form-item.arco-form-item-vertical .arco-input-wrap {
+  padding-left: 0;
+}
+.arco-form-item.arco-form-item-vertical .arco-form-label-item {
+  width: auto;
+  margin-top: 16px;
+  height:  0.32rem ;
+  line-height:  0.32rem ;
+}
+.arco-form-item.arco-form-item-vertical .arco-form-label-item-required-asterisk {
+  height:  0.32rem ;
+  line-height:  0.32rem ;
+}

package/esm/form/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esm/form/style/css/index.js

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esm/form/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/esm/form/style/index.js

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';