@nutui/nutui-react 2.0.0-alpha.16 → 2.0.0-alpha.18

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.0-alpha.16 Fri Jun 09 2023 18:29:35 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.18 Fri Jun 16 2023 18:36:57 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -2420,6 +2420,7 @@ Check the top-level render call using <` + t + ">.");
     disabled: false,
     block: false,
     icon: null,
+    nativeType: "button",
     onClick: (e) => {
     }
   };
@@ -2439,6 +2440,7 @@ Check the top-level render call using <` + t + ">.");
         onClick,
         className,
         style,
+        nativeType,
         ...rest
       } = {
         ...defaultProps$1r,
@@ -2472,6 +2474,7 @@ Check the top-level render call using <` + t + ">.");
           {
             ...rest,
             ref,
+            type: nativeType,
             className: classNames(
               prefixCls,
               className,
@@ -11180,6 +11183,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     };
     const onHandleClickOverlay = (e) => {
+      e.stopPropagation();
       if (closeOnOverlayClick) {
         const closed = onClickOverlay && onClickOverlay(e);
         closed && close();
@@ -11455,8 +11459,11 @@ Please add \`${key}Action\` when creating your handler.`);
     icon: null,
     active: false,
     index: 0,
-    handleClick: (idx) => {
-    }
+    value: "",
+    dot: false,
+    max: 99,
+    top: "0",
+    right: "5"
   };
   const TabbarItem = (props) => {
     const {
@@ -11468,8 +11475,12 @@ Please add \`${key}Action\` when creating your handler.`);
       activeColor,
       inactiveColor,
       index,
-      handleClick: handleClick2,
-      ...rest
+      value,
+      dot,
+      max,
+      top,
+      right,
+      handleClick: handleClick2
     } = {
       ...defaultProps$17,
       ...props
@@ -11482,6 +11493,14 @@ Please add \`${key}Action\` when creating your handler.`);
     const titleClass = classNames(boxPrefix, `${boxPrefix}-nav`, {
       [`${boxPrefix}-large`]: !icon
     });
+    const badgeProps = {
+      value,
+      dot,
+      max,
+      top,
+      right,
+      color: activeColor
+    };
     return /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -11492,7 +11511,7 @@ Please add \`${key}Action\` when creating your handler.`);
         },
         onClick: () => handleClick2(index)
       },
-      icon ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Badge, { ...rest }, /* @__PURE__ */ React.createElement("div", { className: boxPrefix }, icon)), /* @__PURE__ */ React.createElement("div", { className: titleClass }, title)) : /* @__PURE__ */ React.createElement(Badge, { ...rest }, /* @__PURE__ */ React.createElement("div", { className: titleClass }, title))
+      icon ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Badge, { ...badgeProps }, /* @__PURE__ */ React.createElement("div", { className: boxPrefix }, icon)), /* @__PURE__ */ React.createElement("div", { className: titleClass }, title)) : /* @__PURE__ */ React.createElement(Badge, { ...badgeProps }, /* @__PURE__ */ React.createElement("div", { className: titleClass }, title))
     );
   };
   const defaultProps$16 = {
@@ -13834,7 +13853,7 @@ Please add \`${key}Action\` when creating your handler.`);
   Cascader.defaultProps = defaultProps$Z;
   Cascader.displayName = "NutCascader";
   const CheckboxGroupContext = React.createContext(null);
-  const Context = CheckboxGroupContext;
+  const Context$1 = CheckboxGroupContext;
   const defaultProps$Y = {
     max: void 0,
     labelPosition: "right",
@@ -13905,7 +13924,7 @@ Please add \`${key}Action\` when creating your handler.`);
         });
       }, [options2, max]);
       return /* @__PURE__ */ React.createElement(
-        Context.Provider,
+        Context$1.Provider,
         {
           value: {
             labelPosition: labelPosition || "right",
@@ -13968,7 +13987,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...others
     } = props;
     let { labelPosition, ...rest } = others;
-    const ctx2 = React.useContext(Context);
+    const ctx2 = React.useContext(Context$1);
     let [innerChecked, setChecked] = usePropsValue({
       value: props.checked,
       defaultValue: props.defaultChecked,
@@ -14349,7 +14368,6 @@ Please add \`${key}Action\` when creating your handler.`);
   }
   const defaultProps$W = {
     ...ComponentDefaults,
-    visible: false,
     title: "",
     options: [],
     value: [],
@@ -14386,12 +14404,26 @@ Please add \`${key}Action\` when creating your handler.`);
         (_a2 = props.onConfirm) == null ? void 0 : _a2.call(props, setSelectedOptions(), val);
       }
     });
+    const [innerVisible, setInnerVisible] = usePropsValue({
+      value: props.visible,
+      defaultValue: false,
+      finalValue: false
+    });
     const [innerValue, setInnerValue] = React.useState(selectedValue);
     const [columnIndex, setColumnIndex] = React.useState(0);
     const pickerRef = React.useRef(null);
     const [refs, setRefs] = useRefs();
     const [columnsList, setColumnsList] = React.useState([]);
     const isConfirmEvent = React.useRef(false);
+    const actions = {
+      open: () => {
+        setInnerVisible(true);
+      },
+      close: () => {
+        setInnerVisible(false);
+      }
+    };
+    React.useImperativeHandle(ref, () => actions);
     const formatCascade = (columns, values) => {
       const formatted = [];
       let columnOptions = {
@@ -14453,12 +14485,12 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     React.useEffect(() => {
       setInnerValue(innerValue !== selectedValue ? selectedValue : innerValue);
-    }, [visible]);
+    }, [innerVisible]);
     React.useEffect(() => {
-      if (visible) {
+      if (innerVisible) {
         init();
       }
-    }, [options2, visible]);
+    }, [options2, innerVisible]);
     React.useEffect(() => {
       onChange && onChange(setSelectedOptions(), innerValue, columnIndex);
     }, [innerValue, columnsList]);
@@ -14531,6 +14563,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }, 0);
     };
     const closePicker = () => {
+      setInnerVisible(false);
       onClose && onClose(setSelectedOptions(), innerValue);
       afterClose && afterClose(setSelectedOptions(), innerValue, pickerRef);
     };
@@ -14539,21 +14572,34 @@ Please add \`${key}Action\` when creating your handler.`);
         "span",
         {
           className: `${classPrefix2}__cancel-btn`,
-          onClick: () => closePicker()
+          onClick: (e) => {
+            e.stopPropagation();
+            closePicker();
+          }
         },
         locale.cancel
-      ), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__title` }, title || ""), /* @__PURE__ */ React.createElement("span", { className: `${classPrefix2}__confirm-btn`, onClick: confirm2 }, locale.confirm));
+      ), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__title` }, title || ""), /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: `${classPrefix2}__confirm-btn`,
+          onClick: (e) => {
+            e.stopPropagation();
+            confirm2();
+          }
+        },
+        locale.confirm
+      ));
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof children === "function" && children(selectedValue), /* @__PURE__ */ React.createElement(
       Popup,
       {
-        visible,
+        visible: innerVisible,
         position: "bottom",
         afterClose: () => {
           closePicker();
         }
       },
-      /* @__PURE__ */ React.createElement("div", { className: classes, style, ...rest }, renderTitleBar(), children, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__panel`, ref: pickerRef }, columnsList == null ? void 0 : columnsList.map((item, index) => {
+      /* @__PURE__ */ React.createElement("div", { className: classes, style, ...rest }, renderTitleBar(), typeof children !== "function" && children, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__panel`, ref: pickerRef }, columnsList == null ? void 0 : columnsList.map((item, index) => {
         return /* @__PURE__ */ React.createElement(
           PickerPanel$1,
           {
@@ -14568,7 +14614,7 @@ Please add \`${key}Action\` when creating your handler.`);
           }
         );
       })))
-    );
+    ));
   };
   const Picker = React.forwardRef(InternalPicker);
   const Picker$1 = Picker;
@@ -14872,7 +14918,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   DatePicker.defaultProps = defaultProps$V;
   DatePicker.displayName = "NutDatePicker";
-  const FormItemContext = React.createContext({});
+  const Context = React.createContext({});
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function(target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -15926,15 +15972,18 @@ Please add \`${key}Action\` when creating your handler.`);
   Schema.warning = warning;
   Schema.messages = messages;
   Schema.validators = validators;
+  console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
   class FormStore {
     constructor() {
-      __publicField(this, "store", {});
+      // 初始化数据
+      __publicField(this, "initialValues", {});
       // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
-      __publicField(this, "fieldEntities", []);
+      __publicField(this, "store", {});
       // 所有的组件实例
-      // 成功和失败的回调
+      __publicField(this, "fieldEntities", []);
+      // 校验成功或失败的回调，onFinish、onFinishFailed
       __publicField(this, "callbacks", {});
-      __publicField(this, "errList", []);
+      __publicField(this, "errors", []);
       /**
        * 注册组件实例
        * @param field
@@ -15943,11 +15992,29 @@ Please add \`${key}Action\` when creating your handler.`);
         this.fieldEntities.push(field);
         return () => {
           this.fieldEntities = this.fieldEntities.filter((item) => item != field);
-          delete this.store[field.props.name];
+          if (this.store) {
+            delete this.store[field.props.name];
+          }
         };
       });
+      /**
+       * 获取 formItem 的值
+       * @param name
+       */
       __publicField(this, "getFieldValue", (name) => {
-        return this.store[name];
+        var _a2;
+        return (_a2 = this.store) == null ? void 0 : _a2[name];
+      });
+      /**
+       * 设置 form 的初始值，之后在 reset 的时候使用
+       * @param values
+       * @param init
+       */
+      __publicField(this, "setInitialValues", (values, init) => {
+        if (init) {
+          this.initialValues = values;
+          this.store = values;
+        }
       });
       /**
        * 存储组件数据
@@ -15962,34 +16029,28 @@ Please add \`${key}Action\` when creating your handler.`);
           const { name } = enetity.props;
           Object.keys(newStore).forEach((key) => {
             if (key === name) {
-              enetity.onStoreChange();
+              enetity.onStoreChange("update");
             }
           });
         });
       });
-      /**
-       * 表单校验
-       * rules: { required: true, message: '' }
-       * descriptor: {
-       *    username: {
-       *      type: 'string',
-       *      required: true,
-       *      validator: (rule, value) => {
-       *        return /^[a-zA-Z0-9]+$/.test(value)
-       *      },
-       *    },
-       *  }
-       */
+      __publicField(this, "setCallback", (callback) => {
+        this.callbacks = {
+          ...this.callbacks,
+          ...callback
+        };
+      });
       __publicField(this, "validate", () => {
         const err = [];
-        this.errList.length = 0;
+        this.errors.length = 0;
         this.fieldEntities.forEach((entity) => {
+          var _a2;
           const { name, rules: rules2 = [] } = entity.props;
           const descriptor = {};
           if (rules2.length) {
             if (rules2.length > 1) {
               descriptor[name] = [];
-              rules2.map((v) => {
+              rules2.forEach((v) => {
                 descriptor[name].push(v);
               });
             } else {
@@ -15997,39 +16058,36 @@ Please add \`${key}Action\` when creating your handler.`);
             }
           }
           const validator = new Schema(descriptor);
-          validator.validate({ [name]: this.store[name] }, (errors) => {
+          validator.messages();
+          validator.validate({ [name]: (_a2 = this.store) == null ? void 0 : _a2[name] }, (errors) => {
             if (errors) {
               err.push(...errors);
-              this.errList.push(...errors);
+              this.errors.push(...errors);
             }
-            entity.onStoreChange();
+            entity.onStoreChange("validate");
           });
         });
         return err;
       });
-      __publicField(this, "setCallback", (callback) => {
-        this.callbacks = {
-          ...this.callbacks,
-          ...callback
-        };
-      });
       __publicField(this, "submit", () => {
         var _a2, _b, _c, _d;
-        const err = this.validate();
-        if (err.length === 0) {
+        const errors = this.validate();
+        if (errors.length === 0) {
           (_b = (_a2 = this.callbacks).onFinish) == null ? void 0 : _b.call(_a2, this.store);
-        } else if (err.length > 0) {
-          (_d = (_c = this.callbacks).onFinishFailed) == null ? void 0 : _d.call(_c, err);
+        } else if (errors.length > 0) {
+          (_d = (_c = this.callbacks).onFinishFailed) == null ? void 0 : _d.call(_c, this.store, errors);
         }
       });
       __publicField(this, "resetFields", () => {
-        this.errList.length = 0;
-        this.fieldEntities.forEach((enetity) => {
-          enetity.onStoreChange();
+        this.errors.length = 0;
+        this.store = this.initialValues;
+        this.fieldEntities.forEach((entity) => {
+          entity.onStoreChange("reset");
         });
       });
       __publicField(this, "getForm", () => {
         return {
+          setInitialValues: this.setInitialValues,
           setCallback: this.setCallback,
           registerField: this.registerField,
           getFieldValue: this.getFieldValue,
@@ -16037,12 +16095,12 @@ Please add \`${key}Action\` when creating your handler.`);
           resetFields: this.resetFields,
           submit: this.submit,
           store: this.store,
-          errList: this.errList,
+          errors: this.errors,
           fieldEntities: this.fieldEntities
         };
       });
       this.callbacks = {
-        onFinish: (value) => {
+        onFinish: () => {
         },
         onFinishFailed: () => {
         }
@@ -16061,98 +16119,113 @@ Please add \`${key}Action\` when creating your handler.`);
     }
     return [formRef.current];
   };
+  function isForwardRefComponent(component) {
+    return component.type && component.type.$$typeof && // eslint-disable-next-line react/display-name
+    React.forwardRef(
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      () => {
+      }
+    ).$$typeof === component.type.$$typeof;
+  }
   const defaultProps$U = {
     ...ComponentDefaults,
+    required: false,
     name: "",
     label: "",
-    className: "",
     rules: [{ required: false, message: "" }],
-    disabled: false,
-    labelWidth: 90,
-    errorMessageAlign: "left",
-    showErrorLine: true,
-    showErrorMessage: true,
-    initialValue: ""
+    errorMessageAlign: "left"
   };
   class FormItem extends React.Component {
-    constructor() {
-      super(...arguments);
+    constructor(props) {
+      super(props);
       __publicField(this, "cancelRegister");
-      __publicField(this, "isInitialValue", false);
+      __publicField(this, "componentRef");
       // children添加value属性和onChange事件
       __publicField(this, "getControlled", (children) => {
-        var _a2, _b;
-        const { getFieldValue, setFieldsValue } = this.context;
+        var _a2;
+        const { setFieldsValue, getFieldValue } = this.context;
         const { name } = this.props;
-        const type2 = children.type.NAME;
-        const defaultvalue = this.props.initialValue || ((_a2 = children.props) == null ? void 0 : _a2.defaultValue) || ((_b = children.props) == null ? void 0 : _b.value);
-        if (defaultvalue && !this.isInitialValue) {
-          setFieldsValue({ [name]: defaultvalue });
-          this.isInitialValue = true;
-        }
-        return {
-          value: getFieldValue(name),
-          defaultValue: getFieldValue(name),
-          onChange: (event) => {
-            const originOnChange = children.props.onChange;
+        if ((_a2 = children == null ? void 0 : children.props) == null ? void 0 : _a2.defaultValue) {
+          console.warn("通过 initialValue 设置初始值");
+        }
+        const controlled = {
+          ...children.props,
+          [this.props.valuePropName || "value"]: getFieldValue(name) || this.props.initialValue,
+          [this.props.trigger || "onChange"]: (...args) => {
+            const originOnChange = children.props[this.props.trigger || "onChange"];
             if (originOnChange) {
-              originOnChange(event);
+              originOnChange(...args);
             }
-            let newValue = event;
-            switch (type2) {
-              case "checkbox":
-                newValue = event.target.value;
-                break;
+            let [next] = args;
+            if (this.props.getValueFromEvent) {
+              next = this.props.getValueFromEvent(...args);
             }
-            setFieldsValue({ [name]: newValue });
+            setFieldsValue({ [name]: next });
           }
         };
+        if (isForwardRefComponent(children)) {
+          controlled.ref = (componentInstance) => {
+            const originRef = children.ref;
+            if (originRef) {
+              if (typeof originRef === "function") {
+                originRef(componentInstance);
+              }
+              if ("current" in originRef) {
+                originRef.current = componentInstance;
+              }
+            }
+            this.componentRef = componentInstance;
+          };
+        }
+        return controlled;
+      });
+      __publicField(this, "refresh", () => {
+        this.setState(({ resetCount }) => ({
+          resetCount: resetCount + 1
+        }));
       });
-      __publicField(this, "onStoreChange", () => {
-        this.forceUpdate();
+      __publicField(this, "onStoreChange", (type2) => {
+        if (type2 === "reset") {
+          this.refresh();
+        } else {
+          this.forceUpdate();
+        }
       });
       __publicField(this, "renderLayout", (childNode) => {
         var _a2, _b;
-        const {
-          label,
-          name,
-          rules: rules2 = [{ required: false, message: "" }],
-          className,
-          labelWidth,
-          errorMessageAlign,
-          showErrorLine,
-          showErrorMessage
-        } = {
+        const { label, name, required: required2, className, style, errorMessageAlign } = {
           ...defaultProps$U,
           ...this.props
         };
-        const item = ((_a2 = this.context.errList) == null ? void 0 : _a2.length) > 0 && ((_b = this.context.errList) == null ? void 0 : _b.filter((item2) => {
+        const item = ((_a2 = this.context.errors) == null ? void 0 : _a2.length) > 0 && ((_b = this.context.errors) == null ? void 0 : _b.filter((item2) => {
           return item2.field === name;
         }));
-        const { starPositon } = this.context;
-        const renderStar = rules2.length > 0 && rules2[0].required && /* @__PURE__ */ React.createElement("i", { className: "required" });
-        const renderLabel = starPositon === "Right" ? /* @__PURE__ */ React.createElement(React.Fragment, null, label, renderStar) : /* @__PURE__ */ React.createElement(React.Fragment, null, renderStar, label);
-        return /* @__PURE__ */ React.createElement(Cell, { className: `nut-form-item ${className}` }, label ? /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: "nut-cell__title nut-form-item__label",
-            style: {
-              width: this.pxCheck(labelWidth)
-            }
-          },
-          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.length > 0 && /* @__PURE__ */ React.createElement(
-          "div",
+        const { starPosition } = this.context;
+        const renderStar = required2 && /* @__PURE__ */ React.createElement("i", { className: "required" });
+        const renderLabel = /* @__PURE__ */ React.createElement(React.Fragment, null, starPosition === "left" ? renderStar : null, label, starPosition === "right" ? renderStar : null);
+        return /* @__PURE__ */ React.createElement(
+          Cell,
           {
-            className: "nut-form-item__body__tips",
-            style: { textAlign: errorMessageAlign }
+            className: `nut-form-item ${className}`,
+            style,
+            onClick: (e) => this.props.onClick && this.props.onClick(e, this.componentRef)
           },
-          item[0].message
-        )));
-      });
-      __publicField(this, "pxCheck", (value) => {
-        return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+          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.length > 0 && /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: "nut-form-item__body__tips",
+              style: { textAlign: errorMessageAlign }
+            },
+            item[0].message
+          ))
+        );
       });
+      this.componentRef = React.createRef();
+      this.state = {
+        resetCount: 1
+      };
     }
     componentDidMount() {
       this.cancelRegister = this.context.registerField(this);
@@ -16163,81 +16236,86 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     }
     render() {
-      const { children, initialValue } = this.props;
-      const c = Array.isArray(children) ? children[0] : children;
-      let restCNode = c;
-      if (initialValue) {
-        restCNode = React.cloneElement(c, {
-          defaultValue: initialValue
-        });
-      }
+      const { children } = this.props;
+      const child = Array.isArray(children) ? children[0] : children;
       const returnChildNode = React.cloneElement(
-        restCNode,
-        this.getControlled(restCNode)
+        child,
+        this.getControlled(child)
       );
-      return this.renderLayout(returnChildNode);
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: this.state.resetCount }, this.renderLayout(returnChildNode));
     }
   }
   __publicField(FormItem, "defaultProps", defaultProps$U);
-  __publicField(FormItem, "contextType", FormItemContext);
+  __publicField(FormItem, "contextType", Context);
   const defaultProps$T = {
     ...ComponentDefaults,
-    className: "",
-    style: void 0,
-    form: {},
-    labelPosition: "Right",
-    formGroupTitle: "",
-    onFinish: (obj) => {
-    },
-    onFinishFailed: (value) => {
+    labelPosition: "right",
+    starPosition: "left",
+    onFinish: (values) => {
     },
-    starPositon: "Left"
+    onFinishFailed: (values, errorFields) => {
+    }
   };
   const PositionInfo = {
-    Top: "form-layout-top",
-    Left: "form-layout-left",
-    Right: "form-layout-right"
+    top: "form-layout-top",
+    left: "form-layout-left",
+    right: "form-layout-right"
   };
   const Form = (props) => {
+    const classPrefix2 = "nut-form";
     const {
+      className,
+      style,
+      footer,
       children,
+      initialValues,
       onFinish,
       onFinishFailed,
       labelPosition,
-      starPositon,
-      form,
-      ...rest
+      starPosition,
+      form
     } = {
       ...defaultProps$T,
       ...props
     };
-    let formInstance = {};
-    if (Object.keys(form).length !== 0) {
+    let formInstance;
+    if (form !== void 0) {
       formInstance = form;
     } else {
       [formInstance] = useForm();
     }
-    formInstance.starPositon = starPositon;
-    const { setCallback, submit, resetFields } = formInstance;
+    formInstance.starPosition = starPosition;
+    const { setCallback, submit, resetFields, setInitialValues } = formInstance;
     setCallback({
       onFinish,
       onFinishFailed
     });
+    const mountRef = React.useRef(false);
+    setInitialValues(initialValues, !mountRef.current);
+    if (!mountRef.current) {
+      mountRef.current = true;
+    }
     return /* @__PURE__ */ React.createElement(
       "form",
       {
-        className: `nut-form ${PositionInfo[labelPosition]} ${props.className}`,
-        style: props.style,
+        className: classNames(
+          classPrefix2,
+          className,
+          PositionInfo[labelPosition]
+        ),
+        style,
         onSubmit: (e) => {
           e.preventDefault();
+          e.stopPropagation();
           submit();
         },
         onReset: (e) => {
           e.preventDefault();
+          e.stopPropagation();
           resetFields();
         }
       },
-      /* @__PURE__ */ React.createElement(CellGroup, null, /* @__PURE__ */ React.createElement(FormItemContext.Provider, { value: formInstance }, children))
+      /* @__PURE__ */ React.createElement(CellGroup, null, /* @__PURE__ */ React.createElement(Context.Provider, { value: formInstance }, children), footer ? /* @__PURE__ */ React.createElement(Cell, null, footer) : null)
     );
   };
   Form.defaultProps = defaultProps$T;
@@ -16453,7 +16531,7 @@ Please add \`${key}Action\` when creating your handler.`);
     disabled: false,
     min: 1,
     max: 9999,
-    readonly: false,
+    readOnly: false,
     allowEmpty: false,
     defaultValue: 0,
     step: 1,
@@ -16467,7 +16545,7 @@ Please add \`${key}Action\` when creating your handler.`);
       disabled,
       min,
       max,
-      readonly,
+      readOnly,
       value,
       defaultValue,
       allowEmpty,
@@ -16626,14 +16704,14 @@ Please add \`${key}Action\` when creating your handler.`);
     const focusValue = (e) => {
       if (disabled)
         return;
-      if (readonly)
+      if (readOnly)
         return;
       onFocus && onFocus(e);
     };
     const burValue = (e) => {
       if (disabled)
         return;
-      if (readonly)
+      if (readOnly)
         return;
       const input = e.target;
       let value2 = input.valueAsNumber;
@@ -16661,7 +16739,7 @@ Please add \`${key}Action\` when creating your handler.`);
         min,
         max,
         disabled,
-        readOnly: readonly,
+        readOnly,
         value: _checked,
         onInput: changeFormatValue,
         onBlur: burFormatValue,
@@ -16674,7 +16752,7 @@ Please add \`${key}Action\` when creating your handler.`);
         min,
         max,
         disabled,
-        readOnly: readonly,
+        readOnly,
         value: _checked,
         onInput: changeValue,
         onBlur: burValue,
@@ -17866,7 +17944,7 @@ Please add \`${key}Action\` when creating your handler.`);
       return /* @__PURE__ */ React.createElement(
         "input",
         {
-          className: `${classPrefix2}__input ${shape === "round" ? `${classPrefix2}__round` : ""} ${clearable ? `${classPrefix2}__input-clear` : ""}`,
+          className: `${classPrefix2}__input ${clearable ? `${classPrefix2}__input-clear` : ""}`,
           ref: searchRef,
           style: { ...props.style },
           value: value || "",
@@ -17939,7 +18017,16 @@ Please add \`${key}Action\` when creating your handler.`);
         style: { ...props.style }
       },
       renderLeft(),
-      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__content` }, renderLeftIn(), renderField(), renderRightIn(), clearable && value && handleClear()),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${classPrefix2}__content ${shape === "round" ? `${classPrefix2}__round` : ""}`
+        },
+        renderLeftIn(),
+        renderField(),
+        renderRightIn(),
+        clearable && value && handleClear()
+      ),
       renderRight()
     );
   };
@@ -20347,7 +20434,7 @@ Please add \`${key}Action\` when creating your handler.`);
       return styles;
     };
     const getRootPosition = () => {
-      let styles = {};
+      const styles = {};
       if (!rootPosition)
         return {};
       const contentWidth = elWidth;
@@ -20357,34 +20444,34 @@ Please add \`${key}Action\` when creating your handler.`);
       const skew = location.split("-")[1];
       let cross = 0;
       let parallel = 0;
-      if (Array.isArray(offset) && offset.length == 2) {
+      if (Array.isArray(offset) && offset.length === 2) {
         cross += +offset[1];
         parallel += +offset[0];
       }
       if (width) {
         if (["bottom", "top"].includes(direction)) {
-          const h = direction == "bottom" ? height + cross : -(contentHeight + cross);
+          const h = direction === "bottom" ? height + cross : -(contentHeight + cross);
           styles.top = `${top + h}px`;
           if (!skew) {
             styles.left = `${-(contentWidth - width) / 2 + left + parallel}px`;
           }
-          if (skew == "start") {
+          if (skew === "start") {
             styles.left = `${left + parallel}px`;
           }
-          if (skew == "end") {
+          if (skew === "end") {
             styles.left = `${right + parallel}px`;
           }
         }
         if (["left", "right"].includes(direction)) {
-          const contentW = direction == "left" ? -(contentWidth + cross) : width + cross;
+          const contentW = direction === "left" ? -(contentWidth + cross) : width + cross;
           styles.left = `${left + contentW}px`;
           if (!skew) {
             styles.top = `${top - contentHeight / 2 + height / 2 - 4 + parallel}px`;
           }
-          if (skew == "start") {
+          if (skew === "start") {
             styles.top = `${top + parallel}px`;
           }
-          if (skew == "end") {
+          if (skew === "end") {
             styles.top = `${top + height + parallel}px`;
           }
         }
@@ -20836,7 +20923,7 @@ Please add \`${key}Action\` when creating your handler.`);
     name: ""
   };
   const Swipe = React.forwardRef((props, instanceRef) => {
-    const swipeBem = cn("swipe");
+    const classPrefix2 = "nut-swipe";
     const touch = useTouch();
     const { children, className, style } = { ...defaultProps$s, ...props };
     const root2 = React.useRef();
@@ -20957,7 +21044,7 @@ Please add \`${key}Action\` when creating your handler.`);
           "div",
           {
             ref: measuredRef,
-            className: `${swipeBem(side)}`,
+            className: `${classPrefix2}__${side}`,
             onClick: (e) => handleOperate(e, side)
           },
           props[`${side}Action`]
@@ -20997,13 +21084,13 @@ Please add \`${key}Action\` when creating your handler.`);
       "div",
       {
         ref: root2,
-        className: classNames(swipeBem(), className),
+        className: classNames(classPrefix2, className),
         onTouchStart: (e) => onTouchStart(e),
         onTouchMove: (e) => onTouchMove(e),
         onTouchEnd: (e) => onTouchEnd(e),
         style
       },
-      /* @__PURE__ */ React.createElement("div", { className: `${swipeBem("wrapper")}`, style: wrapperStyle }, renderActionContent("left", leftRef), children, renderActionContent("right", rightRef))
+      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__wrapper`, style: wrapperStyle }, renderActionContent("left", leftRef), children, renderActionContent("right", rightRef))
     );
   });
   Swipe.defaultProps = defaultProps$s;