@nutui/nutui-react 3.0.0 → 3.0.2

package/dist/es/packages/formitem/formitem.d.ts

@@ -76,6 +76,7 @@ export declare class FormItem extends React.Component<Partial<FormItemProps>, {
     getControlled: (children: React.ReactElement) => any;
     refresh: () => void;
     onStoreChange: (type?: string) => void;
+    getClassNameWithDirection(className: string): string;
     renderLayout: (childNode: React.ReactNode) => React.JSX.Element;
     render(): React.JSX.Element;
 }

package/dist/es/packages/formitem/formitem.js

@@ -12,6 +12,7 @@ import { Context } from "../form/context";
 import Cell from "../cell";
 import { ComponentDefaults } from "../../utils/typings";
 import { isForwardRefComponent } from "../../utils/is-forward-ref-component";
+import { toArray } from "../../utils/to-array";
 import { SECRET } from "../form/useform";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     required: false,
@@ -24,7 +25,6 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
         }
     ],
     errorMessageAlign: 'left',
-    validateTrigger: 'onChange',
     shouldUpdate: false,
     noStyle: false
 });
@@ -40,15 +40,19 @@ export var FormItem = /*#__PURE__*/ function(_superClass) {
         ]), _define_property(_this, "cancelRegister", void 0), _define_property(_this, "componentRef", void 0), _define_property(_this, "eventOff", void 0), // children添加value属性和onChange事件
         _define_property(_this, "getControlled", function(children) {
             var _children_props;
-            var _this_context = _this.context, setFieldsValue = _this_context.setFieldsValue, getFieldValue = _this_context.getFieldValue;
-            var dispatch = _this.context.getInternal(SECRET).dispatch;
+            var _this_context_formInstance = _this.context.formInstance, setFieldsValue = _this_context_formInstance.setFieldsValue, getFieldValue = _this_context_formInstance.getFieldValue;
+            var dispatch = _this.context.formInstance.getInternal(SECRET).dispatch;
             var _this_props = _this.props, _this_props_name = _this_props.name, name = _this_props_name === void 0 ? '' : _this_props_name;
             if (children === null || children === void 0 ? void 0 : (_children_props = children.props) === null || _children_props === void 0 ? void 0 : _children_props.defaultValue) {
-                console.warn('通过 initialValue 设置初始值');
+                if (process.env.NODE_ENV !== 'production') {
+                    console.warn('[NutUI] FormItem:', '请通过 initialValue 设置初始值，而不是 defaultValue');
+                }
             }
             var fieldValue = getFieldValue(name);
             var _obj;
-            var controlled = _object_spread_props(_object_spread({}, children.props), (_obj = {}, _define_property(_obj, _this.props.valuePropName || 'value', fieldValue !== undefined ? fieldValue : _this.props.initialValue), _define_property(_obj, _this.props.trigger || 'onChange', function() {
+            var controlled = _object_spread_props(_object_spread({}, children.props), (_obj = {
+                className: children.props.className
+            }, _define_property(_obj, _this.props.valuePropName || 'value', fieldValue !== undefined ? fieldValue : _this.props.initialValue), _define_property(_obj, _this.props.trigger || 'onChange', function() {
                 for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
                     args[_key] = arguments[_key];
                 }
@@ -62,33 +66,27 @@ export var FormItem = /*#__PURE__*/ function(_superClass) {
                     var _this_props;
                     next = (_this_props = _this.props).getValueFromEvent.apply(_this_props, _to_consumable_array(args));
                 }
-                setFieldsValue(_define_property({}, name, next), false);
+                setFieldsValue(_define_property({}, name, next));
             }), _obj));
             var validateTrigger = _this.props.validateTrigger;
-            var validateTriggers = [
-                _this.props.trigger || 'onChange'
-            ];
-            if (validateTrigger) {
-                validateTriggers = typeof validateTrigger === 'string' ? [
-                    validateTrigger
-                ] : _to_consumable_array(validateTrigger);
-                validateTriggers.forEach(function(trigger) {
-                    var originTrigger = controlled[trigger];
-                    controlled[trigger] = function() {
-                        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
-                            args[_key] = arguments[_key];
-                        }
-                        if (originTrigger) {
-                            originTrigger.apply(void 0, _to_consumable_array(args));
-                        }
-                        if (_this.props.rules && _this.props.rules.length) {
-                            dispatch({
-                                name: _this.props.name
-                            });
-                        }
-                    };
-                });
-            }
+            var mergedValidateTrigger = validateTrigger || _this.context.validateTrigger;
+            var validateTriggers = toArray(mergedValidateTrigger);
+            validateTriggers.forEach(function(trigger) {
+                var originTrigger = controlled[trigger];
+                controlled[trigger] = function() {
+                    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                        args[_key] = arguments[_key];
+                    }
+                    if (originTrigger) {
+                        originTrigger.apply(void 0, _to_consumable_array(args));
+                    }
+                    if (_this.props.rules && _this.props.rules.length) {
+                        dispatch({
+                            name: _this.props.name
+                        });
+                    }
+                };
+            });
             if (isForwardRefComponent(children)) {
                 controlled.ref = function(componentInstance) {
                     var originRef = children.ref;
@@ -113,7 +111,7 @@ export var FormItem = /*#__PURE__*/ function(_superClass) {
             });
         }), _define_property(_this, "onStoreChange", function(type) {
             if (type === 'reset') {
-                _this.context.errors[_this.props.name] = [];
+                _this.context.formInstance.errors[_this.props.name] = [];
                 _this.refresh();
             } else {
                 _this.forceUpdate();
@@ -123,23 +121,25 @@ export var FormItem = /*#__PURE__*/ function(_superClass) {
             var requiredInRules = rules === null || rules === void 0 ? void 0 : rules.some(function(rule) {
                 return rule.required;
             });
-            var item = name ? _this.context.errors[name] : [];
-            var starPosition = _this.context.starPosition;
-            var renderStar = (required || requiredInRules) && /*#__PURE__*/ React.createElement("i", {
-                className: "required"
-            });
-            var renderLabel = /*#__PURE__*/ React.createElement(React.Fragment, null, starPosition === 'left' ? renderStar : null, label, starPosition === 'right' ? renderStar : null);
+            var item = name ? _this.context.formInstance.errors[name] : [];
+            var starPosition = _this.context.formInstance.starPosition;
+            var renderStar = (required || requiredInRules) && /*#__PURE__*/ React.createElement("div", {
+                className: "nut-form-item-label-required required"
+            }, "*");
+            var renderLabel = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
+                className: "nut-form-item-labeltxt"
+            }, starPosition === 'left' ? renderStar : null, label), starPosition === 'right' ? renderStar : null);
             return /*#__PURE__*/ React.createElement(Cell, {
-                className: "nut-form-item ".concat(className),
+                className: "".concat(_this.getClassNameWithDirection('nut-form-item'), " ").concat(className),
                 style: style,
                 align: align,
                 onClick: function(e) {
                     return _this.props.onClick && _this.props.onClick(e, _this.componentRef);
                 }
             }, label ? /*#__PURE__*/ React.createElement("div", {
-                className: "nut-cell-title nut-form-item-label"
+                className: "nut-cell-title ".concat(_this.getClassNameWithDirection('nut-form-item-label'))
             }, renderLabel) : null, /*#__PURE__*/ React.createElement("div", {
-                className: "nut-cell-value nut-form-item-body"
+                className: "nut-cell-value ".concat(_this.getClassNameWithDirection('nut-form-item-body'))
             }, /*#__PURE__*/ React.createElement("div", {
                 className: "nut-form-item-body-slots"
             }, childNode), item && item.length > 0 && /*#__PURE__*/ React.createElement("div", {
@@ -160,12 +160,12 @@ export var FormItem = /*#__PURE__*/ function(_superClass) {
             key: "componentDidMount",
             value: function componentDidMount() {
                 // Form设置initialValues时的处理
-                var _this_context_getInternal = this.context.getInternal(SECRET), _this_context_getInternal_store = _this_context_getInternal.store, store = _this_context_getInternal_store === void 0 ? {} : _this_context_getInternal_store, setInitialValues = _this_context_getInternal.setInitialValues;
+                var _this_context_formInstance_getInternal = this.context.formInstance.getInternal(SECRET), _this_context_formInstance_getInternal_store = _this_context_formInstance_getInternal.store, store = _this_context_formInstance_getInternal_store === void 0 ? {} : _this_context_formInstance_getInternal_store, setInitialValues = _this_context_formInstance_getInternal.setInitialValues;
                 if (this.props.initialValue && this.props.name && !Object.keys(store).includes(this.props.name)) {
                     setInitialValues(_object_spread_props(_object_spread({}, store), _define_property({}, this.props.name, this.props.initialValue)), true);
                 }
                 // 注册组件实例到FormStore
-                var _this_context_getInternal1 = this.context.getInternal(SECRET), registerField = _this_context_getInternal1.registerField, registerUpdate = _this_context_getInternal1.registerUpdate;
+                var _this_context_formInstance_getInternal1 = this.context.formInstance.getInternal(SECRET), registerField = _this_context_formInstance_getInternal1.registerField, registerUpdate = _this_context_formInstance_getInternal1.registerUpdate;
                 this.cancelRegister = registerField(this);
                 // 这里需要增加事件监听，因为此实现属于依赖触发
                 this.eventOff = registerUpdate(this, this.props.shouldUpdate);
@@ -182,6 +182,15 @@ export var FormItem = /*#__PURE__*/ function(_superClass) {
                 }
             }
         },
+        {
+            key: "getClassNameWithDirection",
+            value: function getClassNameWithDirection(className) {
+                if (className && this.context.labelPosition) {
+                    return "".concat(className, " ").concat(className, "-").concat(this.context.labelPosition);
+                }
+                return className;
+            }
+        },
         {
             key: "render",
             value: function render() {
@@ -191,11 +200,13 @@ export var FormItem = /*#__PURE__*/ function(_superClass) {
                 if (!this.props.shouldUpdate) {
                     returnChildNode = /*#__PURE__*/ React.cloneElement(child, this.getControlled(child));
                 } else {
-                    returnChildNode = child(this.context);
+                    returnChildNode = child(this.context.formInstance);
                 }
                 return /*#__PURE__*/ React.createElement(React.Fragment, {
                     key: this.state.resetCount
-                }, this.props.noStyle ? returnChildNode : this.renderLayout(returnChildNode));
+                }, /*#__PURE__*/ React.createElement("div", {
+                    className: this.context.disabled ? 'nut-form-item-disabled' : ''
+                }, this.props.noStyle ? returnChildNode : this.renderLayout(returnChildNode)));
             }
         }
     ]);

package/dist/es/packages/formitem/style/formitem.scss

@@ -1,40 +1,41 @@
 .nut-form-item {
   display: flex;
-  align-items: center;
-  padding: 4px 12px;
+  line-height: unset;
 
-  &.error {
-    &.line {
-      &::before {
-        border-bottom: 1px solid $form-item-error-line-color;
-        transform: scaleX(1);
-        transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-      }
-    }
+  &-disabled {
+    opacity: 0.4;
+    pointer-events: none;
   }
 
   &-label {
+    display: flex;
+    flex-direction: row;
     font-size: $form-item-label-font-size;
     font-weight: normal;
     width: $form-item-label-width;
     margin-right: $form-item-label-margin-right;
-    flex: none !important;
-    display: inline-block !important;
+    flex: 0 0 auto;
     word-wrap: break-word;
     text-align: $form-item-label-text-align;
+    line-height: unset;
+  }
 
-    .required {
-      &::before {
-        content: '*';
-        color: $form-item-required-color;
-        margin-right: $form-item-required-margin-right;
-      }
-    }
+  &-label-required {
+    color: $form-item-required-color;
+    margin-right: $form-item-required-margin-right;
+    display: block;
+    position: absolute;
+    left: -10px;
+  }
+
+  .nut-form-item-labeltxt {
+    position: relative;
+    font-size: 12px;
   }
 
   &-body {
     flex: 1;
-    display: flex !important;
+    display: flex;
     flex-direction: column;
 
     &-slots {
@@ -45,6 +46,10 @@
         border: 0;
       }
 
+      .nut-input-container {
+        height: auto;
+      }
+
       .nut-input-text {
         font-size: $form-item-body-font-size;
         text-align: $form-item-body-input-text-align;
@@ -61,7 +66,7 @@
       }
 
       .nut-textarea {
-        padding: 0 !important;
+        padding: 0;
 
         .nut-textarea-textarea {
           font: inherit;
@@ -77,6 +82,7 @@
     }
   }
 }
+
 [dir='rtl'] .nut-form-item,
 .nut-rtl .nut-form-item {
   &-label {
@@ -91,22 +97,96 @@
       }
     }
   }
+
   &-body {
     &-slots {
       text-align: right;
+
       .nut-icon-ArrowRight,
       .nut-icon-ArrowLeft {
         transform: rotateY(180deg);
       }
+
       .nut-input-text {
         text-align: right;
       }
+
       .nut-textarea-textarea {
         text-align: right;
       }
     }
   }
+
   &-tips {
     text-align: right;
   }
 }
+
+/* position */
+
+.nut-form-item-label-right {
+  justify-content: flex-end;
+  padding-right: 24px;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-left {
+  position: relative;
+  padding-left: 12px;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-left-required {
+  display: block;
+  line-height: 1.5;
+  position: absolute;
+  left: 0.1em;
+}
+
+.nut-form-item-top {
+  flex-direction: column;
+  align-items: flex-start;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-top {
+  display: block;
+  padding-bottom: 4px;
+  padding-right: 24px;
+}
+
+.nut-form-item-body-top {
+  margin-left: 0;
+  width: 100%;
+}
+
+[dir='rtl'] .form-layout-right .nut-form-item-label,
+.nut-rtl .form-layout-right .nut-form-item-label {
+  text-align: left;
+  padding-right: 0;
+  padding-left: 24px;
+}
+
+[dir='rtl'] .form-layout-left .nut-form-item-label,
+.nut-rtl .form-layout-left .nut-form-item-label {
+  text-align: right;
+  padding-left: 0;
+  padding-right: 12px;
+
+  .required {
+    left: auto;
+    right: 0.1em;
+  }
+}
+
+[dir='rtl'] .form-layout-top .nut-form-item-label,
+.nut-rtl .form-layout-top .nut-form-item-label {
+  padding-right: 0;
+  padding-left: 24px;
+}
+
+[dir='rtl'] .form-layout-top .nut-form-item-body,
+.nut-rtl .form-layout-top .nut-form-item-body {
+  margin-left: 0;
+  margin-right: 0;
+}

package/dist/es/packages/formitem/style/style.css

@@ -4,32 +4,38 @@
 /* #endif */
 .nut-form-item {
   display: flex;
-  align-items: center;
-  padding: 4px 12px;
+  line-height: unset;
 }
-.nut-form-item.error.line::before {
-  border-bottom: 1px solid var(--nutui-form-item-error-line-color, var(--nutui-color-primary, #ff0f23));
-  transform: scaleX(1);
-  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+.nut-form-item-disabled {
+  opacity: 0.4;
+  pointer-events: none;
 }
 .nut-form-item-label {
+  display: flex;
+  flex-direction: row;
   font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-base, 14px));
   font-weight: normal;
   width: var(--nutui-form-item-label-width, 90px);
   margin-right: var(--nutui-form-item-label-margin-right, 10px);
-  flex: none !important;
-  display: inline-block !important;
+  flex: 0 0 auto;
   word-wrap: break-word;
   text-align: var(--nutui-form-item-label-text-align, left);
+  line-height: unset;
 }
-.nut-form-item-label .required::before {
-  content: "*";
+.nut-form-item-label-required {
   color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23));
   margin-right: var(--nutui-form-item-required-margin-right, 4px);
+  display: block;
+  position: absolute;
+  left: -10px;
+}
+.nut-form-item .nut-form-item-labeltxt {
+  position: relative;
+  font-size: 12px;
 }
 .nut-form-item-body {
   flex: 1;
-  display: flex !important;
+  display: flex;
   flex-direction: column;
 }
 .nut-form-item-body-slots {
@@ -39,6 +45,9 @@
   padding: 0;
   border: 0;
 }
+.nut-form-item-body-slots .nut-input-container {
+  height: auto;
+}
 .nut-form-item-body-slots .nut-input-text {
   font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14px));
   text-align: var(--nutui-form-item-body-input-text-align, left);
@@ -53,7 +62,7 @@
   min-height: 24px;
 }
 .nut-form-item-body-slots .nut-textarea {
-  padding: 0 !important;
+  padding: 0;
 }
 .nut-form-item-body-slots .nut-textarea .nut-textarea-textarea {
   font: inherit;
@@ -97,4 +106,72 @@
 [dir=rtl] .nut-form-item-tips,
 .nut-rtl .nut-form-item-tips {
   text-align: right;
+}
+
+/* position */
+.nut-form-item-label-right {
+  justify-content: flex-end;
+  padding-right: 24px;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-left {
+  position: relative;
+  padding-left: 12px;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-left-required {
+  display: block;
+  line-height: 1.5;
+  position: absolute;
+  left: 0.1em;
+}
+
+.nut-form-item-top {
+  flex-direction: column;
+  align-items: flex-start;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-top {
+  display: block;
+  padding-bottom: 4px;
+  padding-right: 24px;
+}
+
+.nut-form-item-body-top {
+  margin-left: 0;
+  width: 100%;
+}
+
+[dir=rtl] .form-layout-right .nut-form-item-label,
+.nut-rtl .form-layout-right .nut-form-item-label {
+  text-align: left;
+  padding-right: 0;
+  padding-left: 24px;
+}
+
+[dir=rtl] .form-layout-left .nut-form-item-label,
+.nut-rtl .form-layout-left .nut-form-item-label {
+  text-align: right;
+  padding-left: 0;
+  padding-right: 12px;
+}
+[dir=rtl] .form-layout-left .nut-form-item-label .required,
+.nut-rtl .form-layout-left .nut-form-item-label .required {
+  left: auto;
+  right: 0.1em;
+}
+
+[dir=rtl] .form-layout-top .nut-form-item-label,
+.nut-rtl .form-layout-top .nut-form-item-label {
+  padding-right: 0;
+  padding-left: 24px;
+}
+
+[dir=rtl] .form-layout-top .nut-form-item-body,
+.nut-rtl .form-layout-top .nut-form-item-body {
+  margin-left: 0;
+  margin-right: 0;
 }

package/dist/es/packages/imagepreview/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

package/dist/es/packages/input/style/input.scss

@@ -8,6 +8,12 @@
   font-size: $input-font-size;
   box-sizing: border-box;
 
+  .nut-input-native .weui-input::placeholder,
+  &-placeholder {
+    color: rgb(117, 117, 117);
+    font-size: $input-font-size;
+  }
+
   .nut-icon {
     color: $color-text-disabled;
     width: 14px;
@@ -52,7 +58,3 @@
     -webkit-text-fill-color: $color-text-disabled;
   }
 }
-
-.nut-input-clear {
-  // flex: 0;
-}

package/dist/es/packages/input/style/style.css

@@ -12,6 +12,10 @@
   font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
 }
+.nut-input .nut-input-native .weui-input::placeholder, .nut-input-placeholder {
+  color: rgb(117, 117, 117);
+  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
+}
 .nut-input .nut-icon {
   color: var(--nutui-color-text-disabled, #c2c4cc);
   width: 14px;

package/dist/es/packages/numberkeyboard/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {