@nutui/nutui-react 2.7.5 → 2.7.7

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.5 Fri Jan 03 2025 17:37:52 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.7.7 Fri Jan 24 2025 13:55:36 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -3171,7 +3171,7 @@
       height: 0
     };
   };
-  function useWatch(dep, callback, config2 = { immediate: false }) {
+  function useWatch$1(dep, callback, config2 = { immediate: false }) {
     const { immediate } = config2;
     const prev = React.useRef();
     const inited = React.useRef(false);
@@ -3301,7 +3301,7 @@
       });
       setIsFixed(fixed.fixed);
     }, [position, threshold, container]);
-    useWatch(isFixed, () => {
+    useWatch$1(isFixed, () => {
       onChange && onChange(isFixed);
     });
     React.useEffect(() => {
@@ -9222,7 +9222,7 @@
       autoHeightClassName,
       className
     );
-    return children ? /* @__PURE__ */ React.createElement("div", { className: classes }, !disabled && children) : null;
+    return children && /* @__PURE__ */ React.createElement("div", { className: classes }, !disabled && children);
   };
   const defaultProps$17 = {
     ...ComponentDefaults,
@@ -9252,39 +9252,30 @@
       value: outerValue,
       defaultValue: outerDefaultValue,
       ...rest
-    } = {
-      ...defaultProps$17,
-      ...props
-    };
+    } = { ...defaultProps$17, ...props };
     const [value, setValue] = usePropsValue({
       value: outerValue,
       defaultValue: outerDefaultValue,
-      finalValue: 0,
       onChange
     });
     const titleItemsRef = React.useRef([]);
     const navRef = React.useRef(null);
-    const scrollDirection = (nav, to2, duration2, direction2) => {
-      let count = 0;
-      const from = direction2 === "horizontal" ? nav.scrollLeft : nav.scrollTop;
+    const scrollDirection = (nav, to2, duration2) => {
+      const from = direction === "horizontal" ? nav.scrollLeft : nav.scrollTop;
       const frames = Math.round(duration2 * 1e3 / 16);
-      function animate() {
-        if (direction2 === "horizontal") {
-          nav.scrollLeft += (to2 - from) / frames;
-        } else {
-          nav.scrollTop += (to2 - from) / frames;
-        }
-        if (++count < frames) {
-          requestAniFrame$1(animate);
-        }
-      }
+      let count = 0;
+      const animate = () => {
+        if (direction === "horizontal") nav.scrollLeft += (to2 - from) / frames;
+        else nav.scrollTop += (to2 - from) / frames;
+        if (++count < frames) requestAniFrame$1(animate);
+      };
       animate();
     };
     const scrollIntoView = (index, immediate) => {
       const nav = navRef.current;
       const titleItem = titleItemsRef.current;
       const titlesLength = titles.current.length;
-      const itemLength = titleItemsRef.current.length;
+      const itemLength = titleItem.length;
       if (!nav || !titleItem || !titleItem[itemLength - titlesLength + index]) {
         return;
       }
@@ -9296,13 +9287,13 @@
       } else {
         to2 = title2.offsetLeft - (nav.offsetWidth - title2.offsetWidth) / 2;
       }
-      scrollDirection(nav, to2, 0.3, direction);
+      scrollDirection(nav, to2, 0.3);
     };
     const getTitles = () => {
       const titles2 = [];
       React.Children.forEach(children, (child, idx) => {
         if (React.isValidElement(child)) {
-          const props2 = child == null ? void 0 : child.props;
+          const { props: props2 } = child;
           if ((props2 == null ? void 0 : props2.title) || (props2 == null ? void 0 : props2.value)) {
             titles2.push({
               title: props2.title,
@@ -9337,23 +9328,18 @@
     );
     const classesTitle = classNames(`${classPrefix$j}-titles`, {
       [`${classPrefix$j}-titles-${activeType}`]: activeType,
-      [`${classPrefix$j}-titles-scrollable`]: true,
       [`${classPrefix$j}-titles-${align}`]: align
     });
-    const tabsActiveStyle = {
-      color: activeType === "smile" ? activeColor : "",
-      background: activeType === "line" ? activeColor : ""
-    };
     const getContentStyle = () => {
-      let index = titles.current.findIndex((t) => t.value == value);
+      let index = titles.current.findIndex((t) => t.value === value);
       index = index < 0 ? 0 : index;
       return {
-        transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
+        transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0, -${index * 100}%, 0)`,
         transitionDuration: `${duration}ms`
       };
     };
     React.useEffect(() => {
-      let index = titles.current.findIndex((t) => t.value == value);
+      let index = titles.current.findIndex((t) => t.value === value);
       index = index < 0 ? 0 : index;
       setTimeout(() => {
         scrollIntoView(index);
@@ -9361,69 +9347,55 @@
     }, [value]);
     const tabChange = (item) => {
       onClick && onClick(item.value);
-      if (item.disabled) {
-        return;
+      if (!item.disabled) {
+        setValue(item.value);
       }
-      setValue(item.value);
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ...rest }, /* @__PURE__ */ React.createElement("div", { className: classesTitle, style: { ...tabStyle }, ref: navRef }, !!title && typeof title === "function" ? title() : titles.current.map((item) => {
+    return /* @__PURE__ */ React.createElement("div", { className: classes, ...rest }, /* @__PURE__ */ React.createElement("div", { className: classesTitle, style: tabStyle, ref: navRef }, !!title && typeof title === "function" ? title() : titles.current.map((item) => {
       return /* @__PURE__ */ React.createElement(
         "div",
         {
-          onClick: () => {
-            tabChange(item);
-          },
+          key: item.value,
+          ref: (ref) => titleItemsRef.current.push(ref),
+          onClick: () => tabChange(item),
           className: classNames(`${classPrefix$j}-titles-item`, {
             [`nut-tabs-titles-item-active`]: !item.disabled && String(item.value) === String(value),
             [`nut-tabs-titles-item-disabled`]: item.disabled,
             [`nut-tabs-titles-item-${align}`]: align
-          }),
-          ref: (ref) => titleItemsRef.current.push(ref),
-          key: item.value
+          })
         },
         activeType === "line" && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: classNames(`${classPrefix$j}-titles-item-line`, {
-              [`${classPrefix$j}-titles-item-line-${direction}`]: true
-            }),
-            style: tabsActiveStyle
+            className: classNames(
+              `${classPrefix$j}-titles-item-line`,
+              `${classPrefix$j}-titles-item-line-${direction}`
+            ),
+            style: { background: activeColor }
           }
         ),
-        activeType === "smile" && /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `${classPrefix$j}-titles-item-smile`,
-            style: tabsActiveStyle
-          },
-          /* @__PURE__ */ React.createElement(c$3, { color: activeColor, width: 40, height: 20 })
-        ),
+        activeType === "smile" && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}-titles-item-smile` }, /* @__PURE__ */ React.createElement(c$3, { color: activeColor, width: 40, height: 20 })),
         /* @__PURE__ */ React.createElement(
           "div",
           {
             className: classNames(
-              `${classPrefix$j}-ellipsis`,
+              {
+                [`${classPrefix$j}-ellipsis`]: direction === "vertical"
+              },
               `${classPrefix$j}-titles-item-text`
-            )
+            ),
+            style: { color: activeColor }
           },
           item.title
         )
       );
     })), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}-content-wrap` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}-content`, style: getContentStyle() }, React.Children.map(children, (child, idx) => {
-      if (!React.isValidElement(child)) {
-        return null;
-      }
-      let childProps = {
+      if (!React.isValidElement(child)) return null;
+      return React.cloneElement(child, {
         ...child.props,
-        active: value === child.props.value
-      };
-      if (String(value) !== String(child.props.value || idx) && autoHeight) {
-        childProps = {
-          ...childProps,
-          autoHeightClassName: "inactive"
-        };
-      }
-      return React.cloneElement(child, childProps);
+        active: value === child.props.value,
+        autoHeightClassName: autoHeight && String(value) !== String(child.props.value || idx) ? "inactive" : void 0
+      });
     }))));
   };
   Tabs.displayName = "NutTabs";
@@ -12551,6 +12523,14 @@
           Number(formatDate[2]),
           getMonthEndDay(Number(formatDate[0]), Number(formatDate[1]))
         );
+        if (selectedOptions.length >= 2 && ["date", "datehour", "datetime", "month-day"].includes(rangeType)) {
+          const dayOption = formatOption("day", day);
+          if (rangeType === "month-day") {
+            selectedOptions[1] = dayOption;
+          } else {
+            selectedOptions[2] = dayOption;
+          }
+        }
         let date = null;
         if (rangeType === "date" || rangeType === "month-day" || rangeType === "year-month") {
           date = new Date(year, month, day);
@@ -13455,7 +13435,7 @@
       pattern: {
         mismatch: "%s value %s does not match pattern %s"
       },
-      clone: function clone() {
+      clone: function clone2() {
         var cloned = JSON.parse(JSON.stringify(this));
         cloned.clone = this.clone;
         return cloned;
@@ -13719,23 +13699,55 @@
   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;
-        }
+  function merge(...items) {
+    return _merge(items[0] === true, false, items);
+  }
+  function recursive(...items) {
+    return _merge(items[0] === true, true, items);
+  }
+  function clone(input) {
+    if (Array.isArray(input)) {
+      const output = [];
+      for (let index = 0; index < input.length; ++index)
+        output.push(clone(input[index]));
+      return output;
+    }
+    if (isPlainObject(input)) {
+      const output = {};
+      for (const index in input) output[index] = clone(input[index]);
+      return output;
+    }
+    return input;
+  }
+  function isPlainObject(input) {
+    if (input === null || typeof input !== "object") return false;
+    if (Object.getPrototypeOf(input) === null) return true;
+    let ref = input;
+    while (Object.getPrototypeOf(ref) !== null) ref = Object.getPrototypeOf(ref);
+    return Object.getPrototypeOf(input) === ref;
+  }
+  function _recursiveMerge(base, extend) {
+    if (!isPlainObject(base) || !isPlainObject(extend)) return extend;
+    for (const key in extend) {
+      if (key === "__proto__" || key === "constructor" || key === "prototype")
+        continue;
+      base[key] = isPlainObject(base[key]) && isPlainObject(extend[key]) ? _recursiveMerge(base[key], extend[key]) : extend[key];
+    }
+    return base;
+  }
+  function _merge(isClone, isRecursive, items) {
+    let result;
+    if (isClone || !isPlainObject(result = items.shift())) result = {};
+    for (let index = 0; index < items.length; ++index) {
+      const item = items[index];
+      if (!isPlainObject(item)) continue;
+      for (const key in item) {
+        if (key === "__proto__" || key === "constructor" || key === "prototype")
+          continue;
+        const value = isClone ? clone(item[key]) : item[key];
+        result[key] = isRecursive ? _recursiveMerge(result[key], value) : value;
       }
     }
-    objects.filter((obj) => !!obj).forEach((obj) => mergeHelper(obj));
     return result;
   }
   const SECRET = "NUT_FORM_INTERNAL";
@@ -13751,9 +13763,6 @@
         this.fieldEntities.push(field);
         return () => {
           this.fieldEntities = this.fieldEntities.filter((item) => item !== field);
-          if (this.store) {
-            delete this.store[field.props.name];
-          }
         };
       };
       this.getFieldValue = (name) => {
@@ -13775,10 +13784,11 @@
         if (init) {
           const nextStore = merge(initialValues, this.store);
           this.updateStore(nextStore);
+          this.notifyWatch();
         }
       };
       this.setFieldsValue = (newStore) => {
-        const nextStore = merge(this.store, newStore);
+        const nextStore = recursive(true, this.store, newStore);
         this.updateStore(nextStore);
         this.fieldEntities.forEach((entity) => {
           const { name } = entity.props;
@@ -13797,12 +13807,14 @@
             item.entity.onStoreChange("update");
           }
         });
+        this.notifyWatch();
       };
       this.setFieldValue = (name, value) => {
         const store = {
           [name]: value
         };
         this.setFieldsValue(store);
+        this.notifyWatch([name]);
       };
       this.setCallback = (callback) => {
         this.callbacks = {
@@ -13845,7 +13857,6 @@
       };
       this.validateFields = async (nameList) => {
         let filterEntities = [];
-        this.errors.length = 0;
         if (!nameList || nameList.length === 0) {
           filterEntities = this.fieldEntities;
         } else {
@@ -13870,13 +13881,29 @@
           (_d = (_c = this.callbacks).onFinishFailed) == null ? void 0 : _d.call(_c, this.store, errors);
         }
       };
-      this.resetFields = () => {
-        this.errors.length = 0;
-        const nextStore = merge({}, this.initialValues);
-        this.updateStore(nextStore);
-        this.fieldEntities.forEach((entity) => {
-          entity.onStoreChange("reset");
-        });
+      this.resetFields = (namePaths) => {
+        if (namePaths && namePaths.length) {
+          namePaths.forEach((path) => {
+            this.errors[path] = null;
+            this.fieldEntities.forEach((entity) => {
+              const name = entity.props.name;
+              if (name === path) {
+                if (path in this.initialValues) {
+                  this.updateStore({ [path]: this.initialValues[path] });
+                } else {
+                  delete this.store[path];
+                }
+                entity.onStoreChange("reset");
+              }
+            });
+          });
+        } else {
+          const nextStore = merge({}, this.initialValues);
+          this.updateStore(nextStore);
+          this.fieldEntities.forEach((entity) => {
+            entity.onStoreChange("reset");
+          });
+        }
       };
       this.registerUpdate = (field, shouldUpdate) => {
         this.updateList.push({
@@ -13899,7 +13926,8 @@
             dispatch: this.dispatch,
             store: this.store,
             fieldEntities: this.fieldEntities,
-            registerUpdate: this.registerUpdate
+            registerUpdate: this.registerUpdate,
+            registerWatch: this.registerWatch
           };
         }
       };
@@ -13916,6 +13944,26 @@
           getInternal: this.getInternal
         };
       };
+      this.watchList = [];
+      this.registerWatch = (callback) => {
+        this.watchList.push(callback);
+        return () => {
+          this.watchList = this.watchList.filter((fn) => fn !== callback);
+        };
+      };
+      this.notifyWatch = (namePath = []) => {
+        if (this.watchList.length) {
+          let allValues;
+          if (!namePath || namePath.length === 0) {
+            allValues = this.getFieldsValue(true);
+          } else {
+            allValues = this.getFieldsValue(namePath);
+          }
+          this.watchList.forEach((callback) => {
+            callback(allValues, namePath);
+          });
+        }
+      };
       this.callbacks = {
         onFinish: () => {
         },
@@ -13939,6 +13987,24 @@
     }
     return [formRef.current];
   };
+  const useWatch = (path, form) => {
+    const formInstance = form.getInternal(SECRET);
+    const [value, setValue] = React.useState();
+    React.useEffect(() => {
+      const unsubscribe = formInstance.registerWatch(
+        (data, namePath) => {
+          const value2 = data[path];
+          setValue(value2);
+        }
+      );
+      const initialValue = form.getFieldsValue(true);
+      if (value !== initialValue[path]) {
+        setValue(initialValue[path]);
+      }
+      return () => unsubscribe();
+    }, [form]);
+    return value;
+  };
   const defaultProps$X = {
     ...ComponentDefaults,
     labelPosition: "right",
@@ -14226,6 +14292,7 @@
   const InnerForm = Form;
   InnerForm.Item = FormItem;
   InnerForm.useForm = useForm;
+  InnerForm.useWatch = useWatch;
   function trimExtraChar(value, char, regExp) {
     const index = value.indexOf(char);
     if (index === -1) {
@@ -17708,7 +17775,7 @@
     const imageNode = typeof imageUrl === "string" ? /* @__PURE__ */ React.createElement("img", { className: "img", src: imageUrl, alt: "empty" }) : imageUrl;
     React.useEffect(() => {
       setImgStyle(() => {
-        if (!imageSize) {
+        if (typeof imageSize !== "number" && typeof imageSize !== "string") {
           return {};
         }
         if (typeof imageSize === "number") {

package/dist/packages/cellgroup/cellgroup.scss

@@ -50,7 +50,7 @@
 
       &:last-child {
         .nut-cell-divider {
-          border-top: 0 !important;
+          border-top: 0;
         }
       }
     }

package/dist/packages/formitem/formitem.scss

@@ -25,11 +25,12 @@
     position: absolute;
     left: -0.8em;
   }
+
   .nut-form-item-labeltxt {
     font-size: $form-item-label-font-size;
-    height: 10px;
     position: relative;
   }
+
   &-body {
     flex: 1;
     display: flex;
@@ -60,6 +61,7 @@
 
       .nut-textarea {
         padding: 0;
+
         .nut-textarea-textarea {
           font: inherit;
           text-align: $form-item-body-input-text-align;
@@ -75,6 +77,16 @@
   }
 }
 
+.nut-form {
+  .nut-cell-group {
+    .nut-cell-group-wrap-divider {
+      .nut-cell-divider {
+        border-top: $cell-divider-border-bottom;
+      }
+    }
+  }
+}
+
 [dir='rtl'] .nut-form-item,
 .nut-rtl .nut-form-item {
   &-label {
@@ -89,21 +101,26 @@
       }
     }
   }
+
   &-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;
   }