@nutui/nutui-react 2.7.0 → 2.7.2

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.nutui = {}, global2.React, global2.ReactDOM));
 })(this, function(exports2, React, ReactDOM) {
   "use strict";/*!
-* @nutui/nutui-react v2.7.0 Fri Nov 01 2024 15:59:16 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.7.2 Fri Dec 06 2024 16:20:01 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -5332,7 +5332,7 @@
       }
     }
   }
-  const toArray = (a) => is.und(a) ? [] : is.arr(a) ? a : [a];
+  const toArray$1 = (a) => is.und(a) ? [] : is.arr(a) ? a : [a];
   function flush(queue, iterator) {
     if (queue.size) {
       const items = Array.from(queue);
@@ -6340,7 +6340,7 @@
   function callProp(value, ...args) {
     return is.fun(value) ? value(...args) : value;
   }
-  const matchProp = (value, key) => value === true || !!(key && value && (is.fun(value) ? value(key) : toArray(value).includes(key)));
+  const matchProp = (value, key) => value === true || !!(key && value && (is.fun(value) ? value(key) : toArray$1(value).includes(key)));
   const resolveProp = (prop, key) => is.obj(prop) ? key && prop[key] : prop;
   const getDefaultProp = (props, key) => props.default === true ? props[key] : props.default ? props.default[key] : void 0;
   const noopTransform = (value) => value;
@@ -6882,7 +6882,7 @@
       } = anim;
       const payload = getPayload(anim.to);
       if (!payload && hasFluidValue(anim.to)) {
-        toValues = toArray(getFluidValue(anim.to));
+        toValues = toArray$1(getFluidValue(anim.to));
       }
       anim.values.forEach((node2, i2) => {
         if (node2.done) return;
@@ -7235,7 +7235,7 @@
       if (!hasAsyncTo) {
         if (started || hasFluidValue(prevTo)) {
           anim.values = node.getPayload();
-          anim.toValues = hasFluidValue(to2) ? null : goalType == AnimatedString ? [1] : toArray(goal);
+          anim.toValues = hasFluidValue(to2) ? null : goalType == AnimatedString ? [1] : toArray$1(goal);
         }
         if (anim.immediate != immediate) {
           anim.immediate = immediate;
@@ -7508,7 +7508,7 @@
         queue
       } = this;
       if (props) {
-        queue = toArray(props).map(createUpdate);
+        queue = toArray$1(props).map(createUpdate);
       } else {
         this.queue = [];
       }
@@ -7524,7 +7524,7 @@
       }
       if (keys) {
         const springs = this.springs;
-        each(toArray(keys), (key) => springs[key].stop(!!arg));
+        each(toArray$1(keys), (key) => springs[key].stop(!!arg));
       } else {
         stopAsync(this._state, this._lastAsyncId);
         this.each((spring) => spring.stop(!!arg));
@@ -7538,7 +7538,7 @@
         });
       } else {
         const springs = this.springs;
-        each(toArray(keys), (key) => springs[key].pause());
+        each(toArray$1(keys), (key) => springs[key].pause());
       }
       return this;
     }
@@ -7549,7 +7549,7 @@
         });
       } else {
         const springs = this.springs;
-        each(toArray(keys), (key) => springs[key].resume());
+        each(toArray$1(keys), (key) => springs[key].resume());
       }
       return this;
     }
@@ -7700,7 +7700,7 @@
   function getSprings(ctrl, props) {
     const springs = _extends$1({}, ctrl.springs);
     if (props) {
-      each(toArray(props), (props2) => {
+      each(toArray$1(props), (props2) => {
         if (is.und(props2.keys)) {
           props2 = createUpdate(props2);
         }
@@ -7972,7 +7972,7 @@
       }
     }
     _get() {
-      const inputs = is.arr(this.source) ? this.source.map(getFluidValue) : toArray(getFluidValue(this.source));
+      const inputs = is.arr(this.source) ? this.source.map(getFluidValue) : toArray$1(getFluidValue(this.source));
       return this.calc(...inputs);
     }
     _start() {
@@ -7991,7 +7991,7 @@
     }
     _attach() {
       let priority2 = 1;
-      each(toArray(this.source), (source) => {
+      each(toArray$1(this.source), (source) => {
         if (hasFluidValue(source)) {
           addFluidObserver(source, this);
         }
@@ -8006,7 +8006,7 @@
       this._start();
     }
     _detach() {
-      each(toArray(this.source), (source) => {
+      each(toArray$1(this.source), (source) => {
         if (hasFluidValue(source)) {
           removeFluidObserver(source, this);
         }
@@ -8025,7 +8025,7 @@
       } else if (event.type == "idle") {
         this._active.delete(event.parent);
       } else if (event.type == "priority") {
-        this.priority = toArray(this.source).reduce((highest, parent) => Math.max(highest, (isFrameValue(parent) ? parent.priority : 0) + 1), 0);
+        this.priority = toArray$1(this.source).reduce((highest, parent) => Math.max(highest, (isFrameValue(parent) ? parent.priority : 0) + 1), 0);
       }
     }
   }
@@ -8187,7 +8187,7 @@
           delete style[key];
           if (is.und(value)) return;
           const unit = pxTransforms.test(key) ? "px" : degTransforms.test(key) ? "deg" : "";
-          inputs.push(toArray(value));
+          inputs.push(toArray$1(value));
           transforms.push(key === "rotate3d" ? ([x2, y2, z2, deg]) => [`rotate3d(${x2},${y2},${z2},${addUnit(deg, unit)})`, isValueIdentity(deg, 0)] : (input) => [`${key}(${input.map((v) => addUnit(v, unit)).join(",")})`, isValueIdentity(input, key.startsWith("scale") ? 1 : 0)]);
         }
       });
@@ -13719,6 +13719,25 @@
   Schema.warning = warning;
   Schema.messages = messages;
   Schema.validators = validators;
+  function merge(...objects) {
+    const result = Array.isArray(objects[0]) ? [] : {};
+    function mergeHelper(obj, path = []) {
+      for (const [key, value] of Object.entries(obj)) {
+        const newPath = [...path, key];
+        if (Array.isArray(value)) {
+          result[key] = [...value];
+        } else if (typeof value === "object" && value !== null) {
+          if (path.some((p2) => p2 === value)) continue;
+          if (!result[key]) result[key] = {};
+          mergeHelper(value, newPath);
+        } else {
+          result[key] = value;
+        }
+      }
+    }
+    objects.filter((obj) => !!obj).forEach((obj) => mergeHelper(obj));
+    return result;
+  }
   const SECRET = "NUT_FORM_INTERNAL";
   class FormStore {
     constructor() {
@@ -13751,17 +13770,16 @@
         });
         return fieldsValue;
       };
-      this.setInitialValues = (values, init) => {
+      this.setInitialValues = (initialValues, init) => {
+        this.initialValues = initialValues || {};
         if (init) {
-          this.initialValues = values;
-          this.store = values;
+          const nextStore = merge(initialValues, this.store);
+          this.updateStore(nextStore);
         }
       };
-      this.setFieldsValue = (newStore, needValidate = true) => {
-        this.store = {
-          ...this.store,
-          ...newStore
-        };
+      this.setFieldsValue = (newStore) => {
+        const nextStore = merge(this.store, newStore);
+        this.updateStore(nextStore);
         this.fieldEntities.forEach((entity) => {
           const { name } = entity.props;
           Object.keys(newStore).forEach((key) => {
@@ -13779,7 +13797,12 @@
             item.entity.onStoreChange("update");
           }
         });
-        needValidate && this.validateFields();
+      };
+      this.setFieldValue = (name, value) => {
+        const store = {
+          [name]: value
+        };
+        this.setFieldsValue(store);
       };
       this.setCallback = (callback) => {
         this.callbacks = {
@@ -13787,46 +13810,55 @@
           ...callback
         };
       };
-      this.validateFields = async (nameList) => {
+      this.validateEntities = async (entity, errs) => {
         var _a;
-        let filterEntitys = [];
-        const errs = [];
+        const { name, rules: rules2 = [] } = entity.props;
+        if (!name) {
+          console.warn("Form field missing name property");
+          return;
+        }
+        const descriptor = {};
+        if (rules2.length) {
+          if (rules2.length > 1) {
+            descriptor[name] = [];
+            rules2.forEach((v) => {
+              descriptor[name].push(v);
+            });
+          } else {
+            descriptor[name] = rules2[0];
+          }
+        }
+        const validator = new Schema(descriptor);
+        try {
+          await validator.validate({ [name]: (_a = this.store) == null ? void 0 : _a[name] });
+        } catch ({ errors }) {
+          if (errors) {
+            errs.push(...errors);
+            this.errors[name] = errors;
+          }
+        } finally {
+          if (!errs || errs.length === 0) {
+            this.errors[name] = [];
+          }
+        }
+        entity.onStoreChange("validate");
+      };
+      this.validateFields = async (nameList) => {
+        let filterEntities = [];
         this.errors.length = 0;
         if (!nameList || nameList.length === 0) {
-          filterEntitys = this.fieldEntities;
+          filterEntities = this.fieldEntities;
         } else {
-          filterEntitys = this.fieldEntities.filter(
+          filterEntities = this.fieldEntities.filter(
             ({ props: { name } }) => nameList.includes(name)
           );
         }
-        for (const entity of filterEntitys) {
-          const { name, rules: rules2 = [] } = entity.props;
-          const descriptor = {};
-          if (rules2.length) {
-            if (rules2.length > 1) {
-              descriptor[name] = [];
-              rules2.forEach((v) => {
-                descriptor[name].push(v);
-              });
-            } else {
-              descriptor[name] = rules2[0];
-            }
-          }
-          const validator = new Schema(descriptor);
-          try {
-            await validator.validate({ [name]: (_a = this.store) == null ? void 0 : _a[name] });
-          } catch ({ errors }) {
-            if (errors) {
-              errs.push(...errors);
-              this.errors[name] = errors;
-            }
-          } finally {
-            if (!errs || errs.length === 0) {
-              this.errors[name] = [];
-            }
-          }
-          entity.onStoreChange("validate");
-        }
+        const errs = [];
+        await Promise.all(
+          filterEntities.map(async (entity) => {
+            await this.validateEntities(entity, errs);
+          })
+        );
         return errs;
       };
       this.submit = async () => {
@@ -13840,7 +13872,8 @@
       };
       this.resetFields = () => {
         this.errors.length = 0;
-        this.store = this.initialValues;
+        const nextStore = merge({}, this.initialValues);
+        this.updateStore(nextStore);
         this.fieldEntities.forEach((entity) => {
           entity.onStoreChange("reset");
         });
@@ -13875,6 +13908,7 @@
           getFieldValue: this.getFieldValue,
           getFieldsValue: this.getFieldsValue,
           setFieldsValue: this.setFieldsValue,
+          setFieldValue: this.setFieldValue,
           resetFields: this.resetFields,
           validateFields: this.validateFields,
           submit: this.submit,
@@ -13889,6 +13923,9 @@
         }
       };
     }
+    updateStore(nextStore) {
+      this.store = nextStore;
+    }
   }
   const useForm = (form) => {
     const formRef = React.useRef();
@@ -13906,7 +13943,9 @@
     ...ComponentDefaults,
     labelPosition: "right",
     starPosition: "left",
+    disabled: false,
     divider: false,
+    validateTrigger: "onChange",
     onFinish: (values) => {
     },
     onFinishFailed: (values, errorFields) => {
@@ -13927,8 +13966,10 @@
         children,
         initialValues,
         divider,
+        disabled,
         onFinish,
         onFinishFailed,
+        validateTrigger,
         labelPosition,
         starPosition,
         form
@@ -13975,7 +14016,13 @@
             resetFields();
           }
         },
-        /* @__PURE__ */ React.createElement(Cell.Group, { divider }, /* @__PURE__ */ React.createElement(Context.Provider, { value: formInstance }, children), footer ? /* @__PURE__ */ React.createElement(Cell, { className: `${classPrefix2}-footer` }, footer) : null)
+        /* @__PURE__ */ React.createElement(Cell.Group, { divider }, /* @__PURE__ */ React.createElement(
+          Context.Provider,
+          {
+            value: { formInstance, labelPosition, disabled, validateTrigger }
+          },
+          children
+        ), footer ? /* @__PURE__ */ React.createElement(Cell, { className: `${classPrefix2}-footer` }, footer) : null)
       );
     }
   );
@@ -13989,6 +14036,12 @@
       }
     ).$$typeof === component.type.$$typeof;
   }
+  function toArray(value) {
+    if (value === void 0 || value === null) {
+      return [];
+    }
+    return Array.isArray(value) ? value : [value];
+  }
   const defaultProps$W = {
     ...ComponentDefaults,
     required: false,
@@ -13996,7 +14049,6 @@
     label: "",
     rules: [{ required: false, message: "" }],
     errorMessageAlign: "left",
-    validateTrigger: "onChange",
     shouldUpdate: false,
     noStyle: false
   };
@@ -14005,15 +14057,14 @@
       super(props);
       this.getControlled = (children) => {
         var _a;
-        const { setFieldsValue, getFieldValue } = this.context;
-        const { dispatch } = this.context.getInternal(SECRET);
+        const { setFieldsValue, getFieldValue } = this.context.formInstance;
+        const { dispatch } = this.context.formInstance.getInternal(SECRET);
         const { name = "" } = this.props;
-        if ((_a = children == null ? void 0 : children.props) == null ? void 0 : _a.defaultValue) {
-          console.warn("通过 initialValue 设置初始值");
-        }
+        if ((_a = children == null ? void 0 : children.props) == null ? void 0 : _a.defaultValue) ;
         const fieldValue = getFieldValue(name);
         const controlled = {
           ...children.props,
+          className: children.props.className,
           [this.props.valuePropName || "value"]: fieldValue !== void 0 ? fieldValue : this.props.initialValue,
           [this.props.trigger || "onChange"]: (...args) => {
             const originOnChange = children.props[this.props.trigger || "onChange"];
@@ -14024,27 +14075,25 @@
             if (this.props.getValueFromEvent) {
               next = this.props.getValueFromEvent(...args);
             }
-            setFieldsValue({ [name]: next }, false);
+            setFieldsValue({ [name]: next });
           }
         };
         const { validateTrigger } = this.props;
-        let validateTriggers = [this.props.trigger || "onChange"];
-        if (validateTrigger) {
-          validateTriggers = typeof validateTrigger === "string" ? [validateTrigger] : [...validateTrigger];
-          validateTriggers.forEach((trigger) => {
-            const originTrigger = controlled[trigger];
-            controlled[trigger] = (...args) => {
-              if (originTrigger) {
-                originTrigger(...args);
-              }
-              if (this.props.rules && this.props.rules.length) {
-                dispatch({
-                  name: this.props.name
-                });
-              }
-            };
-          });
-        }
+        const mergedValidateTrigger = validateTrigger || this.context.validateTrigger;
+        const validateTriggers = toArray(mergedValidateTrigger);
+        validateTriggers.forEach((trigger) => {
+          const originTrigger = controlled[trigger];
+          controlled[trigger] = (...args) => {
+            if (originTrigger) {
+              originTrigger(...args);
+            }
+            if (this.props.rules && this.props.rules.length) {
+              dispatch({
+                name: this.props.name
+              });
+            }
+          };
+        });
         if (isForwardRefComponent(children)) {
           controlled.ref = (componentInstance) => {
             const originRef = children.ref;
@@ -14068,7 +14117,7 @@
       };
       this.onStoreChange = (type) => {
         if (type === "reset") {
-          this.context.errors[this.props.name] = [];
+          this.context.formInstance.errors[this.props.name] = [];
           this.refresh();
         } else {
           this.forceUpdate();
@@ -14089,27 +14138,40 @@
           ...this.props
         };
         const requiredInRules = rules2 == null ? void 0 : rules2.some((rule) => rule.required);
-        const item = name ? this.context.errors[name] : [];
-        const { starPosition } = this.context;
-        const renderStar = (required || requiredInRules) && /* @__PURE__ */ React.createElement("i", { className: "required" });
-        const renderLabel = /* @__PURE__ */ React.createElement(React.Fragment, null, starPosition === "left" ? renderStar : null, label, starPosition === "right" ? renderStar : null);
+        const item = name ? this.context.formInstance.errors[name] : [];
+        const { starPosition } = this.context.formInstance;
+        const renderStar = (required || requiredInRules) && /* @__PURE__ */ React.createElement("div", { className: "nut-form-item-label-required required" }, "*");
+        const 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 ${className}`,
+            className: `${this.getClassNameWithDirection("nut-form-item")} ${className}`,
             style,
             align,
             onClick: (e) => this.props.onClick && this.props.onClick(e, this.componentRef)
           },
-          label ? /* @__PURE__ */ React.createElement("div", { className: "nut-cell-title nut-form-item-label" }, renderLabel) : null,
-          /* @__PURE__ */ React.createElement("div", { className: "nut-cell-value nut-form-item-body" }, /* @__PURE__ */ React.createElement("div", { className: "nut-form-item-body-slots" }, childNode), item && item.length > 0 && /* @__PURE__ */ React.createElement(
+          label ? /* @__PURE__ */ React.createElement(
             "div",
             {
-              className: "nut-form-item-body-tips",
-              style: { textAlign: errorMessageAlign }
+              className: `nut-cell-title ${this.getClassNameWithDirection("nut-form-item-label")}`
             },
-            item[0].message
-          ))
+            renderLabel
+          ) : null,
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: `nut-cell-value ${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",
+              {
+                className: "nut-form-item-body-tips",
+                style: { textAlign: errorMessageAlign }
+              },
+              item[0].message
+            )
+          )
         );
       };
       this.componentRef = React.createRef();
@@ -14118,14 +14180,14 @@
       };
     }
     componentDidMount() {
-      const { store = {}, setInitialValues } = this.context.getInternal(SECRET);
+      const { store = {}, setInitialValues } = this.context.formInstance.getInternal(SECRET);
       if (this.props.initialValue && this.props.name && !Object.keys(store).includes(this.props.name)) {
         setInitialValues(
           { ...store, [this.props.name]: this.props.initialValue },
           true
         );
       }
-      const { registerField, registerUpdate } = this.context.getInternal(SECRET);
+      const { registerField, registerUpdate } = this.context.formInstance.getInternal(SECRET);
       this.cancelRegister = registerField(this);
       this.eventOff = registerUpdate(this, this.props.shouldUpdate);
     }
@@ -14137,6 +14199,12 @@
         this.eventOff();
       }
     }
+    getClassNameWithDirection(className) {
+      if (className && this.context.labelPosition) {
+        return `${className} ${className}-${this.context.labelPosition}`;
+      }
+      return className;
+    }
     render() {
       const { children } = this.props;
       const child = Array.isArray(children) ? children[0] : children;
@@ -14147,9 +14215,9 @@
           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));
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: this.state.resetCount }, /* @__PURE__ */ React.createElement("div", { className: this.context.disabled ? "nut-form-item-disabled" : "" }, this.props.noStyle ? returnChildNode : this.renderLayout(returnChildNode)));
     }
   };
   _FormItem.defaultProps = defaultProps$W;
@@ -16302,7 +16370,6 @@
     showCount: false,
     rows: 2,
     maxLength: 140,
-    placeholder: "",
     readOnly: false,
     disabled: false,
     autoSize: false
@@ -16402,7 +16469,7 @@
           },
           rows,
           maxLength: maxLength === -1 ? void 0 : maxLength,
-          placeholder: placeholder || locale.placeholder,
+          placeholder: placeholder === void 0 ? locale.placeholder : placeholder,
           ...rest
         }
       ),
@@ -16903,6 +16970,7 @@
       }
     };
     const readFile = (files) => {
+      const results = [];
       files.forEach((file, index) => {
         var _a;
         const formData = new FormData();
@@ -16919,13 +16987,14 @@
           const reader = new FileReader();
           reader.onload = (event) => {
             fileItem.url = event.target.result;
-            setFileList([...fileList, fileItem]);
+            results.push(fileItem);
           };
           reader.readAsDataURL(file);
         } else {
-          setFileList([...fileList, fileItem]);
+          results.push(fileItem);
         }
       });
+      setFileList([...fileList, ...results]);
     };
     const filterFiles = (files) => {
       const maximum = maxCount * 1;

package/dist/packages/form/form.scss

@@ -1,68 +0,0 @@
-
-.form-layout-right .nut-form-item-label {
-  text-align: right;
-  padding-right: 24px;
-  white-space: nowrap;
-}
-
-.form-layout-left .nut-form-item-label {
-  position: relative;
-  text-align: left;
-  padding-left: 12px;
-  white-space: nowrap;
-
-  .required {
-    display: block;
-    line-height: 1.5;
-    position: absolute;
-    left: 0.1em;
-  }
-}
-
-.form-layout-top .nut-form-item {
-  flex-direction: column;
-  align-items: flex-start;
-  white-space: nowrap;
-}
-
-.form-layout-top .nut-form-item-label {
-  padding-bottom: 4px;
-  display: block;
-  padding-right: 24px;
-}
-
-.form-layout-top .nut-form-item-body {
-  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;
-}