@nutui/nutui-react 2.0.16 → 2.0.17-beta.1

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.16 Wed Sep 06 2023 15:53:25 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.17 Wed Sep 13 2023 17:08:08 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -12760,6 +12760,7 @@ Please add \`${key}Action\` when creating your handler.`);
       activeColor,
       activeIcon,
       popup,
+      popupProps = {},
       visible,
       options: options2,
       value,
@@ -13055,6 +13056,7 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(React.Fragment, null, popup ? /* @__PURE__ */ React.createElement(
       Popup,
       {
+        ...popupProps,
         visible,
         position: "bottom",
         round: true,
@@ -14606,7 +14608,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return false;
     };
-    const setTransform = (translateY = 0, type2, time = DEFAULT_DURATION, deg) => {
+    const setTransform = (type2, deg, time = DEFAULT_DURATION, translateY = 0) => {
       let nTime = time;
       if (type2 !== "end") {
         nTime = 0;
@@ -14626,7 +14628,7 @@ Please add \`${key}Action\` when creating your handler.`);
         }
         const endMove = Math.round(updateMove / lineSpacing) * lineSpacing;
         const deg = `${(Math.abs(Math.round(endMove / lineSpacing)) + 1) * rotation}deg`;
-        setTransform(endMove, type2, time, deg);
+        setTransform(type2, deg, time, endMove);
         setCurrIndex(Math.abs(Math.round(endMove / lineSpacing)) + 1);
       } else {
         let deg = 0;
@@ -14635,7 +14637,7 @@ Please add \`${key}Action\` when creating your handler.`);
         const minDeg = 0;
         deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
         if (minDeg < deg && deg < maxDeg) {
-          setTransform(updateMove, "", void 0, `${deg}deg`);
+          setTransform("", `${deg}deg`, void 0, updateMove);
           setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing)) + 1);
         }
       }
@@ -14869,9 +14871,7 @@ Please add \`${key}Action\` when creating your handler.`);
       while (columnOptions && columnOptions.children) {
         const options22 = columnOptions.children;
         const value = values[columnIndex2];
-        let index = options22.findIndex(
-          (columnItem) => columnItem.value === value
-        );
+        let index = options22.findIndex((columnItem) => columnItem.value === value);
         if (index === -1)
           index = 0;
         columnOptions = columnOptions.children[index];
@@ -16423,7 +16423,7 @@ Please add \`${key}Action\` when creating your handler.`);
       __publicField(this, "fieldEntities", []);
       // 校验成功或失败的回调，onFinish、onFinishFailed
       __publicField(this, "callbacks", {});
-      __publicField(this, "errors", []);
+      __publicField(this, "errors", {});
       /**
        * 注册组件实例
        * @param field
@@ -16445,6 +16445,19 @@ Please add \`${key}Action\` when creating your handler.`);
         var _a2;
         return (_a2 = this.store) == null ? void 0 : _a2[name];
       });
+      /**
+       * 获取全部字段
+       */
+      __publicField(this, "getFieldsValue", (name) => {
+        if (typeof name === "boolean") {
+          return JSON.parse(JSON.stringify(this.store));
+        }
+        const fieldsValue = {};
+        name.forEach((field) => {
+          fieldsValue[field] = this.getFieldValue(field);
+        });
+        return fieldsValue;
+      });
       /**
        * 设置 form 的初始值，之后在 reset 的时候使用
        * @param values
@@ -16502,13 +16515,45 @@ Please add \`${key}Action\` when creating your handler.`);
           validator.validate({ [name]: (_a2 = this.store) == null ? void 0 : _a2[name] }, (errors) => {
             if (errors) {
               err.push(...errors);
-              this.errors.push(...errors);
+              this.errors[name] = errors;
             }
             entity.onStoreChange("validate");
           });
         });
         return err;
       });
+      __publicField(this, "validateFields", (nameList) => {
+        if (!nameList || nameList.length === 0) {
+          this.validate();
+          return;
+        }
+        this.fieldEntities.filter(({ props: { name } }) => {
+          return nameList.includes(name);
+        }).forEach((entity) => {
+          var _a2;
+          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);
+          validator.messages();
+          validator.validate({ [name]: (_a2 = this.store) == null ? void 0 : _a2[name] }, (errors) => {
+            this.errors[name] = [];
+            if (errors) {
+              this.errors[name] = errors;
+            }
+            entity.onStoreChange("validate");
+          });
+        });
+      });
       __publicField(this, "submit", () => {
         var _a2, _b, _c, _d;
         const errors = this.validate();
@@ -16525,12 +16570,17 @@ Please add \`${key}Action\` when creating your handler.`);
           entity.onStoreChange("reset");
         });
       });
+      __publicField(this, "dispatch", ({ name }) => {
+        this.validateFields([name]);
+      });
       __publicField(this, "getForm", () => {
         return {
+          dispatch: this.dispatch,
           setInitialValues: this.setInitialValues,
           setCallback: this.setCallback,
           registerField: this.registerField,
           getFieldValue: this.getFieldValue,
+          getFieldsValue: this.getFieldsValue,
           setFieldsValue: this.setFieldsValue,
           resetFields: this.resetFields,
           submit: this.submit,
@@ -16652,7 +16702,8 @@ Please add \`${key}Action\` when creating your handler.`);
     name: "",
     label: "",
     rules: [{ required: false, message: "" }],
-    errorMessageAlign: "left"
+    errorMessageAlign: "left",
+    validateTrigger: "onChange"
   };
   class FormItem extends React.Component {
     constructor(props) {
@@ -16662,7 +16713,7 @@ Please add \`${key}Action\` when creating your handler.`);
       // children添加value属性和onChange事件
       __publicField(this, "getControlled", (children) => {
         var _a2;
-        const { setFieldsValue, getFieldValue } = this.context;
+        const { setFieldsValue, getFieldValue, dispatch } = this.context;
         const { name = "" } = this.props;
         if ((_a2 = children == null ? void 0 : children.props) == null ? void 0 : _a2.defaultValue) {
           console.warn("通过 initialValue 设置初始值");
@@ -16683,6 +16734,24 @@ Please add \`${key}Action\` when creating your handler.`);
             setFieldsValue({ [name]: next });
           }
         };
+        const { validateTrigger } = this.props;
+        let validateTriggers = [this.props.trigger || "onChange"];
+        if (validateTrigger) {
+          validateTriggers = typeof validateTrigger === "string" ? [...validateTriggers, validateTrigger] : [...validateTriggers, ...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
+                });
+              }
+            };
+          });
+        }
         if (isForwardRefComponent(children)) {
           controlled.ref = (componentInstance) => {
             const originRef = children.ref;
@@ -16712,16 +16781,22 @@ Please add \`${key}Action\` when creating your handler.`);
         }
       });
       __publicField(this, "renderLayout", (childNode) => {
-        var _a2, _b;
-        const { label, name, required: required2, className, style, errorMessageAlign } = {
+        const {
+          label,
+          name,
+          required: required2,
+          rules: rules2,
+          className,
+          style,
+          errorMessageAlign
+        } = {
           ...defaultProps$V,
           ...this.props
         };
-        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 requiredInRules = rules2 == null ? void 0 : rules2.some((rule) => rule.required);
+        const item = name ? this.context.errors[name] : [];
         const { starPosition } = this.context;
-        const renderStar = required2 && /* @__PURE__ */ React.createElement("i", { className: "required" });
+        const renderStar = (required2 || requiredInRules) && /* @__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,
@@ -16731,7 +16806,7 @@ Please add \`${key}Action\` when creating your handler.`);
             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.length > 0 && /* @__PURE__ */ React.createElement(
+          /* @__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(
             "div",
             {
               className: "nut-form-item__body__tips",
@@ -17119,7 +17194,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const changeFormatValue = (e) => {
       const input = e.target.value;
-      const numReg = new RegExp("^[0-9]*$");
+      const numReg = /^[0-9]*$/;
       const numValue = input.replace(/[^0-9|.]/gi, "");
       if (formatter) {
         if (!numReg.test(input[0]) && numValue) {
@@ -17138,7 +17213,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const burFormatValue = (e) => {
       const input = e.target.value;
-      const numReg = new RegExp("^[0-9]*$");
+      const numReg = /^[0-9]*$/;
       const numValue = input.replace(/[^0-9|.]/gi, "");
       if (formatter) {
         if (formatter(numValue) === input) {
@@ -18722,7 +18797,9 @@ Please add \`${key}Action\` when creating your handler.`);
     }));
     return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className}`, style, ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__inner`, ref: wrapRef }, /* @__PURE__ */ React.createElement(React.Fragment, null, isCanvasSupported ? /* @__PURE__ */ React.createElement("canvas", { ref: canvasRef, height: canvasHeight, width: canvasWidth }) : unsupported ? /* @__PURE__ */ React.createElement(React.Fragment, null, unsupported) : /* @__PURE__ */ React.createElement("p", { className: `${classPrefix2}__unsupport` }, locale.signature.unsupported))));
   };
-  const Signature = React.forwardRef(InternalSignature);
+  const Signature = React.forwardRef(
+    InternalSignature
+  );
   Signature.defaultProps = defaultProps$J;
   Signature.displayName = "NutSignature";
   const defaultProps$I = {
@@ -20499,10 +20576,13 @@ Please add \`${key}Action\` when creating your handler.`);
       if (childCount <= 1)
         return;
       stopAutoPlay();
-      swiperRef.current.autoplayTimer = setTimeout(() => {
-        next();
-        autoplay();
-      }, Number(duration) + 100 * speed);
+      swiperRef.current.autoplayTimer = setTimeout(
+        () => {
+          next();
+          autoplay();
+        },
+        Number(duration) + 100 * speed
+      );
     };
     const move = ({ pace = 0, offset: offset2 = 0 }) => {
       if (childCount <= 1)
@@ -21405,7 +21485,7 @@ Please add \`${key}Action\` when creating your handler.`);
         ...icon.props,
         className: `${icon.props.className || ""} icon`
       }) : null, children && /* @__PURE__ */ React.createElement("span", { className: "text" }, children), !src && !icon && !children && /* @__PURE__ */ React.createElement(k$2, { className: "icon" })),
-      showMax && /* @__PURE__ */ React.createElement("div", { className: "text" }, ((_l = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _l.maxContent) ? (_m = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _m.maxContent : `+ ${avatarIndex - ((_n = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _n.max)}`)
+      showMax && /* @__PURE__ */ React.createElement("div", { className: "text" }, ((_l = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _l.maxContent) ? (_m = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _m.maxContent : `+ ${avatarIndex - Number(((_n = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _n.max) || 0)}`)
     ));
   };
   Avatar.defaultProps = defaultProps$u;
@@ -22070,10 +22150,9 @@ Please add \`${key}Action\` when creating your handler.`);
       handPlaying: false
     });
     const classPrefix2 = "nut-audio";
-    const warn = console.warn;
     const handleEnded = (e) => {
       if (props.loop) {
-        warn(locale.audio.tips || "onPlayEnd事件在loop=false时才会触发");
+        console.warn(locale.audio.tips || "onPlayEnd事件在loop=false时才会触发");
       } else {
         props.onEnd && props.onEnd(e);
       }
@@ -22786,7 +22865,9 @@ Please add \`${key}Action\` when creating your handler.`);
       )
     );
   };
-  const CountDown = React.forwardRef(InternalCountDown);
+  const CountDown = React.forwardRef(
+    InternalCountDown
+  );
   CountDown.defaultProps = defaultProps$k;
   CountDown.displayName = "NutCountDown";
   const useIsomorphicLayoutEffect = canUseDom ? React.useLayoutEffect : React.useEffect;
@@ -24123,8 +24204,8 @@ Please add \`${key}Action\` when creating your handler.`);
         return [columns2.key, columns2.render];
       });
     };
-    const renderBodyTds = (item) => {
-      return sortDataItem().map(([value, render2], index) => {
+    const renderBodyTds = (item, rowIndex) => {
+      return sortDataItem().map(([value, render2]) => {
         return /* @__PURE__ */ React.createElement(
           "span",
           {
@@ -24134,13 +24215,13 @@ Please add \`${key}Action\` when creating your handler.`);
             ),
             key: value
           },
-          typeof item[value] === "function" || typeof render2 === "function" ? /* @__PURE__ */ React.createElement("div", null, render2 ? render2(item) : item[value](item)) : item[value]
+          typeof item[value] === "function" || typeof render2 === "function" ? /* @__PURE__ */ React.createElement("div", null, render2 ? render2(item, rowIndex) : item[value](item)) : item[value]
         );
       });
     };
     const renderBoyTrs = () => {
       return curData.map((item, index) => {
-        return /* @__PURE__ */ React.createElement("div", { className: bodyClassPrefix, key: index }, renderBodyTds(item));
+        return /* @__PURE__ */ React.createElement("div", { className: bodyClassPrefix, key: index }, renderBodyTds(item, index));
       });
     };
     return /* @__PURE__ */ React.createElement("div", { className: cls, style, ...rest }, /* @__PURE__ */ React.createElement(
@@ -24450,7 +24531,7 @@ Please add \`${key}Action\` when creating your handler.`);
     }
     return size;
   };
-  const binarySearch = (positionsList, value = 0, horizontal) => {
+  const binarySearch = (positionsList, horizontal, value = 0) => {
     let start2 = 0;
     let end = positionsList.length - 1;
     let tempIndex = null;
@@ -24626,7 +24707,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const scroll = React.useCallback(() => {
       requestAnimationFrame((e) => {
         const scrollSize = getElement()[scrollKey];
-        const startIndex = binarySearch(positions, scrollSize, horizontal);
+        const startIndex = binarySearch(positions, horizontal, scrollSize);
         const overStart = startIndex - overscan > -1 ? startIndex - overscan : 0;
         if (!itemEqual) {
           updateTotalSize();
@@ -24806,7 +24887,9 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     return /* @__PURE__ */ React.createElement("div", { className: classes, ref: barrageBody, ...restProps }, /* @__PURE__ */ React.createElement("div", { ref: barrageContainer, className: "bContainer" }));
   };
-  const Barrage = React.forwardRef(InternalBarrage);
+  const Barrage = React.forwardRef(
+    InternalBarrage
+  );
   Barrage.defaultProps = defaultProps$5;
   Barrage.displayName = "NutBarrage";
   const defaultProps$4 = {
@@ -25086,7 +25169,7 @@ Please add \`${key}Action\` when creating your handler.`);
         return console.warn(`传入的值：${num}不是一个数字`);
       }
       num = parseFloat(num);
-      const numPow = Math.pow(10, digit);
+      const numPow = 10 ** digit;
       return (Math.round((num + Number.EPSILON) * numPow) / numPow).toFixed(digit);
     };
     const calcStyle = (() => {

package/dist/packages/form/form.scss

@@ -7,10 +7,18 @@
 }
 
 .form-layout-left .nut-form-item__label {
+  position: relative;
   text-align: left;
   font-size: 14px;
-  padding-right: 24px;
+  padding-left: 12px;
   white-space: nowrap;
+
+  .required {
+    display: block;
+    line-height: 1.5;
+    position: absolute;
+    left: 0.1em;
+  }
 }
 
 .form-layout-top .nut-form-item {

package/dist/packages/formitem/formitem.scss

@@ -1,17 +1,6 @@
 .nut-form-item {
   display: flex;
 
-  &::before {
-    position: absolute;
-    box-sizing: border-box;
-    content: ' ';
-    pointer-events: none;
-    right: 16px;
-    bottom: 0;
-    left: 16px;
-    transform: scaleX(0);
-  }
-
   &.error {
     &.line {
       &::before {