@nutui/nutui-react 2.6.13 → 2.6.14

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v2.6.14
+`2024-07-19`
+
+
+* :sparkles: feat(menuitem): 新增css类名，增强自定义样式能力 (#2443) @Alex-huxiyang
+* :sparkles: feat(empty): add css variable nutui-empty-background-color (#2451) @Alex-huxiyang
+* :sparkles: feat(infiniteLoading): 继承 scrollView 的 props 类型 (#2441) @oasis-cloud
+* :bug: fix(cascader): 初始化设置value未成功选中 (#2435) @Alex-huxiyang
+* :bug: fix(swiper): display abnormal when dir = 'rtl' (#2454) @Alex-huxiyang
+* :bug: fix(form): 兼容校验时机 (#2437) @Alex-huxiyang
+* :bug: fix(form): 在FromInstance增加validateFields方法的定义 (#2450) @jinjl
+
+
+# v2.6.13
+`2024-07-12`
+
+
+* :sparkles: feat: tabs滚动条兼容火狐浏览器 (#2431) @JoanneXu6677
+* :sparkles: feat(drag):  add the ability to support onDrag, onDragStart, onDragEnd callbacks (#2418) @Alex-huxiyang
+* :bug: fix(formItem): validateTrigger无法正确触发校验 (#2433) @Alex-huxiyang
+* :bug: fix: 日历组件滚动到顶部时 出现空白问题 (#2409) @522109452
+* :bug: fix(imagepreview): 无法在预期情景正确关闭图片的异常 (#2421) @Alex-huxiyang
+
+
 # v2.6.12
 `2024-07-05`
 

package/dist/esm/Empty/style/style.css

@@ -1 +1 @@
-.nut-empty{box-sizing:border-box;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:var(--nutui-empty-padding, 32px 40px);background-color:var(--nutui-gray-1, #ffffff)}.nut-empty-image{width:var(--nutui-empty-image-size, 160px);height:var(--nutui-empty-image-size, 160px)}.nut-empty-image .img{width:100%;height:100%}.nut-empty-image img,.nut-empty-image image{width:100%;height:100%}.nut-empty-title{margin-top:var(--nutui-empty-title-margin-top, 0px);margin-bottom:var(--nutui-empty-title-margin-bottom, 8px);color:var(--nutui-gray-7, #1a1a1a);font-size:var(--nutui-font-size-3, 14px);line-height:var(--nutui-empty-title-line-height, var(--nutui-font-size-3, 14px))}.nut-empty-description{margin-top:var(--nutui-empty-description-margin-top, 0px);color:var(--nutui-gray-5, #8c8c8c);font-size:var(--nutui-font-size-2, 12px);line-height:var(--nutui-empty-description-line-height, 1.2)}.nut-empty-small .nut-empty-image{width:var(--nutui-empty-image-small-size, 120px);height:var(--nutui-empty-image-small-size, 120px)}.nut-empty-actions{display:flex;margin-top:16px}.nut-empty-actions .nut-button.nut-empty-actions-left,.nut-empty-actions .nut-button.nut-empty-actions-right{height:28px;padding:0 12px;font-weight:400}.nut-empty-actions .nut-button.nut-empty-actions-left{margin-right:16px}[dir=rtl] .nut-empty-actions .nut-button.nut-empty-actions-left,.nut-rtl .nut-empty-actions .nut-button.nut-empty-actions-left{margin-right:0;margin-left:16px}
+.nut-empty{box-sizing:border-box;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:var(--nutui-empty-padding, 32px 40px);background-color:var(--nutui-empty-background-color, #fff)}.nut-empty-image{width:var(--nutui-empty-image-size, 160px);height:var(--nutui-empty-image-size, 160px)}.nut-empty-image .img{width:100%;height:100%}.nut-empty-image img,.nut-empty-image image{width:100%;height:100%}.nut-empty-title{margin-top:var(--nutui-empty-title-margin-top, 0px);margin-bottom:var(--nutui-empty-title-margin-bottom, 8px);color:var(--nutui-gray-7, #1a1a1a);font-size:var(--nutui-font-size-3, 14px);line-height:var(--nutui-empty-title-line-height, var(--nutui-font-size-3, 14px))}.nut-empty-description{margin-top:var(--nutui-empty-description-margin-top, 0px);color:var(--nutui-gray-5, #8c8c8c);font-size:var(--nutui-font-size-2, 12px);line-height:var(--nutui-empty-description-line-height, 1.2)}.nut-empty-small .nut-empty-image{width:var(--nutui-empty-image-small-size, 120px);height:var(--nutui-empty-image-small-size, 120px)}.nut-empty-actions{display:flex;margin-top:16px}.nut-empty-actions .nut-button.nut-empty-actions-left,.nut-empty-actions .nut-button.nut-empty-actions-right{height:28px;padding:0 12px;font-weight:400}.nut-empty-actions .nut-button.nut-empty-actions-left{margin-right:16px}[dir=rtl] .nut-empty-actions .nut-button.nut-empty-actions-left,.nut-rtl .nut-empty-actions .nut-button.nut-empty-actions-left{margin-right:0;margin-left:16px}

package/dist/esm/Swiper.js

@@ -3,6 +3,7 @@ import { useDrag } from "@use-gesture/react";
 import { animated, useSpring } from "@react-spring/web";
 import classNames from "classnames";
 import Indicator__default from "./Indicator.js";
+import { useRtl } from "./ConfigProvider.js";
 import SwiperItem__default from "./SwiperItem.js";
 const getRefValue = (ref) => {
   return ref.current;
@@ -30,11 +31,13 @@ const getPerSlidePosition$1 = (index, position, loop, count) => {
 const defaultEffect = (args) => {
   return React__default.Children.map(args.children, (child, index) => {
     const { isVertical, getSpringsAxis, loop, count } = args;
+    const rtl = useRtl();
+    const position = rtl ? "right" : "left";
     return React__default.createElement(animated.div, { className: "nut-swiper-slide", style: {
-      [isVertical ? "y" : "x"]: getSpringsAxis().to((position) => {
-        return getPerSlidePosition$1(index, position, loop, count);
+      [isVertical ? "y" : "x"]: getSpringsAxis().to((position2) => {
+        return getPerSlidePosition$1(index, position2, loop, count);
       }),
-      [isVertical ? "top" : "left"]: `-${index * 100}%`
+      [isVertical ? "top" : position]: `-${index * 100}%`
     } }, child);
   });
 };
@@ -51,12 +54,14 @@ const getPerSlidePosition = (index, position, loop, count) => {
 };
 const focusEffect = (args) => {
   return React__default.Children.map(args.children, (child, index) => {
+    const rtl = useRtl();
+    const position = rtl ? "right" : "left";
     const { isVertical, springs, transforms, loop, count, swiperDirection, dragging, current, effect } = args;
     return React__default.createElement(animated.div, { className: "nut-swiper-slide", style: {
-      [isVertical ? "y" : "x"]: springs[isVertical ? "y" : "x"].to((position) => {
-        return getPerSlidePosition(index, position, loop, count);
+      [isVertical ? "y" : "x"]: springs[isVertical ? "y" : "x"].to((position2) => {
+        return getPerSlidePosition(index, position2, loop, count);
       }),
-      [isVertical ? "top" : "left"]: `-${index * 100}%`,
+      [isVertical ? "top" : position]: `-${index * 100}%`,
       scale: springs.s.to((ss) => {
         const scales = getRefValue(transforms);
         if (!scales)

package/dist/esm/cascader2.js

@@ -208,7 +208,7 @@ const InternalCascader = (props, ref) => {
   });
   const syncValue = () => __awaiter(void 0, void 0, void 0, function* () {
     const currentValue = innerValue;
-    if (currentValue === void 0 || currentValue !== defaultValue || !state.tree.nodes.length) {
+    if (currentValue === void 0 || ![defaultValue, value].includes(currentValue) || !state.tree.nodes.length) {
       return;
     }
     if (currentValue.length === 0) {
@@ -236,7 +236,7 @@ const InternalCascader = (props, ref) => {
         state.initLoading = false;
       }
     }
-    if (needToSync.length && currentValue === defaultValue) {
+    if (needToSync.length && [defaultValue, value].includes(currentValue)) {
       const pathNodes = state.tree.getPathNodesByValue(needToSync);
       pathNodes.forEach((node, index) => {
         state.tabsCursor = index;

package/dist/esm/formitem2.js

@@ -42,7 +42,7 @@ class FormStore {
         this.store = values;
       }
     };
-    this.setFieldsValue = (newStore) => {
+    this.setFieldsValue = (newStore, needValidate = true) => {
       this.store = Object.assign(Object.assign({}, this.store), newStore);
       this.fieldEntities.forEach((entity) => {
         const { name } = entity.props;
@@ -61,6 +61,7 @@ class FormStore {
           item.entity.onStoreChange("update");
         }
       });
+      needValidate && this.validateFields();
     };
     this.setCallback = (callback) => {
       this.callbacks = Object.assign(Object.assign({}, this.callbacks), callback);
@@ -209,7 +210,7 @@ class FormItem extends React__default.Component {
         if (this.props.getValueFromEvent) {
           next = this.props.getValueFromEvent(...args);
         }
-        setFieldsValue({ [name]: next });
+        setFieldsValue({ [name]: next }, false);
       } });
       const { validateTrigger } = this.props;
       let validateTriggers = [this.props.trigger || "onChange"];

package/dist/esm/menuitem2.js

@@ -133,8 +133,8 @@ const MenuItem = forwardRef((props, ref) => {
               }, onClick: () => {
                 handleClick(item);
               } },
-              item.value === innerValue ? React__default.createElement("i", null, icon || React__default.createElement(Check, { color: activeColor, className: getIconCName(item.value, value) })) : null,
-              React__default.createElement("div", { className: getIconCName(item.value, value), style: {
+              item.value === innerValue ? React__default.createElement("i", { className: "nut-menu-container-item-icon" }, icon || React__default.createElement(Check, { color: activeColor, className: getIconCName(item.value, value) })) : null,
+              React__default.createElement("div", { className: `nut-menu-container-item-title ${getIconCName(item.value, value)}`, style: {
                 color: `${item.value === innerValue ? activeColor : ""}`
               } }, item.text)
             );

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.13 Fri Jul 12 2024 14:00:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.14 Fri Jul 19 2024 16:21:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.13 Fri Jul 12 2024 14:00:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.14 Fri Jul 19 2024 16:21:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.13 Fri Jul 12 2024 14:00:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.14 Fri Jul 19 2024 16:21:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/tr-TR.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.13 Fri Jul 12 2024 14:00:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.14 Fri Jul 19 2024 16:21:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.13 Fri Jul 12 2024 14:00:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.14 Fri Jul 19 2024 16:21:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.13 Fri Jul 12 2024 14:00:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.14 Fri Jul 19 2024 16:21:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.13 Fri Jul 12 2024 14:00:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.14 Fri Jul 19 2024 16:21:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.13 Fri Jul 12 2024 13:59:44 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.14 Fri Jul 19 2024 16:21:28 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -9627,7 +9627,7 @@ const InternalCascader = (props, ref) => {
   };
   const syncValue = async () => {
     const currentValue = innerValue;
-    if (currentValue === void 0 || currentValue !== defaultValue || !state.tree.nodes.length) {
+    if (currentValue === void 0 || ![defaultValue, value].includes(currentValue) || !state.tree.nodes.length) {
       return;
     }
     if (currentValue.length === 0) {
@@ -9659,7 +9659,7 @@ const InternalCascader = (props, ref) => {
         state.initLoading = false;
       }
     }
-    if (needToSync.length && currentValue === defaultValue) {
+    if (needToSync.length && [defaultValue, value].includes(currentValue)) {
       const pathNodes = state.tree.getPathNodesByValue(needToSync);
       pathNodes.forEach((node, index) => {
         state.tabsCursor = index;
@@ -13682,7 +13682,7 @@ class FormStore {
         this.store = values;
       }
     };
-    this.setFieldsValue = (newStore) => {
+    this.setFieldsValue = (newStore, needValidate = true) => {
       this.store = {
         ...this.store,
         ...newStore
@@ -13704,6 +13704,7 @@ class FormStore {
           item.entity.onStoreChange("update");
         }
       });
+      needValidate && this.validateFields();
     };
     this.setCallback = (callback) => {
       this.callbacks = {
@@ -13948,7 +13949,7 @@ const _FormItem = class _FormItem extends React__default.Component {
           if (this.props.getValueFromEvent) {
             next = this.props.getValueFromEvent(...args);
           }
-          setFieldsValue({ [name]: next });
+          setFieldsValue({ [name]: next }, false);
         }
       };
       const { validateTrigger } = this.props;
@@ -14708,7 +14709,7 @@ const MenuItem = forwardRef((props, ref) => {
               handleClick2(item);
             }
           },
-          item.value === innerValue ? /* @__PURE__ */ React__default.createElement("i", null, icon || /* @__PURE__ */ React__default.createElement(
+          item.value === innerValue ? /* @__PURE__ */ React__default.createElement("i", { className: "nut-menu-container-item-icon" }, icon || /* @__PURE__ */ React__default.createElement(
             o$5,
             {
               color: activeColor,
@@ -14718,7 +14719,7 @@ const MenuItem = forwardRef((props, ref) => {
           /* @__PURE__ */ React__default.createElement(
             "div",
             {
-              className: getIconCName(item.value, value),
+              className: `nut-menu-container-item-title ${getIconCName(item.value, value)}`,
               style: {
                 color: `${item.value === innerValue ? activeColor : ""}`
               }
@@ -20589,15 +20590,17 @@ const getPerSlidePosition$1 = (index, position, loop2, count) => {
 const defaultEffect = (args) => {
   return React__default.Children.map(args.children, (child, index) => {
     const { isVertical, getSpringsAxis, loop: loop2, count } = args;
+    const rtl = useRtl();
+    const position = rtl ? "right" : "left";
     return /* @__PURE__ */ React__default.createElement(
       animated.div,
       {
         className: "nut-swiper-slide",
         style: {
-          [isVertical ? "y" : "x"]: getSpringsAxis().to((position) => {
-            return getPerSlidePosition$1(index, position, loop2, count);
+          [isVertical ? "y" : "x"]: getSpringsAxis().to((position2) => {
+            return getPerSlidePosition$1(index, position2, loop2, count);
           }),
-          [isVertical ? "top" : "left"]: `-${index * 100}%`
+          [isVertical ? "top" : position]: `-${index * 100}%`
         }
       },
       child
@@ -20617,6 +20620,8 @@ const getPerSlidePosition = (index, position, loop2, count) => {
 };
 const focusEffect = (args) => {
   return React__default.Children.map(args.children, (child, index) => {
+    const rtl = useRtl();
+    const position = rtl ? "right" : "left";
     const {
       isVertical,
       springs,
@@ -20634,11 +20639,11 @@ const focusEffect = (args) => {
         className: "nut-swiper-slide",
         style: {
           [isVertical ? "y" : "x"]: springs[isVertical ? "y" : "x"].to(
-            (position) => {
-              return getPerSlidePosition(index, position, loop2, count);
+            (position2) => {
+              return getPerSlidePosition(index, position2, loop2, count);
             }
           ),
-          [isVertical ? "top" : "left"]: `-${index * 100}%`,
+          [isVertical ? "top" : position]: `-${index * 100}%`,
           scale: springs.s.to((ss) => {
             const scales = getRefValue(transforms);
             if (!scales) return 1;

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.6.13 Fri Jul 12 2024 13:59:44 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.14 Fri Jul 19 2024 16:21:28 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -9645,7 +9645,7 @@
     };
     const syncValue = async () => {
       const currentValue = innerValue;
-      if (currentValue === void 0 || currentValue !== defaultValue || !state.tree.nodes.length) {
+      if (currentValue === void 0 || ![defaultValue, value].includes(currentValue) || !state.tree.nodes.length) {
         return;
       }
       if (currentValue.length === 0) {
@@ -9677,7 +9677,7 @@
           state.initLoading = false;
         }
       }
-      if (needToSync.length && currentValue === defaultValue) {
+      if (needToSync.length && [defaultValue, value].includes(currentValue)) {
         const pathNodes = state.tree.getPathNodesByValue(needToSync);
         pathNodes.forEach((node, index) => {
           state.tabsCursor = index;
@@ -13700,7 +13700,7 @@
           this.store = values;
         }
       };
-      this.setFieldsValue = (newStore) => {
+      this.setFieldsValue = (newStore, needValidate = true) => {
         this.store = {
           ...this.store,
           ...newStore
@@ -13722,6 +13722,7 @@
             item.entity.onStoreChange("update");
           }
         });
+        needValidate && this.validateFields();
       };
       this.setCallback = (callback) => {
         this.callbacks = {
@@ -13966,7 +13967,7 @@
             if (this.props.getValueFromEvent) {
               next = this.props.getValueFromEvent(...args);
             }
-            setFieldsValue({ [name]: next });
+            setFieldsValue({ [name]: next }, false);
           }
         };
         const { validateTrigger } = this.props;
@@ -14726,7 +14727,7 @@
                 handleClick2(item);
               }
             },
-            item.value === innerValue ? /* @__PURE__ */ React.createElement("i", null, icon || /* @__PURE__ */ React.createElement(
+            item.value === innerValue ? /* @__PURE__ */ React.createElement("i", { className: "nut-menu-container-item-icon" }, icon || /* @__PURE__ */ React.createElement(
               o$5,
               {
                 color: activeColor,
@@ -14736,7 +14737,7 @@
             /* @__PURE__ */ React.createElement(
               "div",
               {
-                className: getIconCName(item.value, value),
+                className: `nut-menu-container-item-title ${getIconCName(item.value, value)}`,
                 style: {
                   color: `${item.value === innerValue ? activeColor : ""}`
                 }
@@ -20607,15 +20608,17 @@
   const defaultEffect = (args) => {
     return React.Children.map(args.children, (child, index) => {
       const { isVertical, getSpringsAxis, loop: loop2, count } = args;
+      const rtl = useRtl();
+      const position = rtl ? "right" : "left";
       return /* @__PURE__ */ React.createElement(
         animated.div,
         {
           className: "nut-swiper-slide",
           style: {
-            [isVertical ? "y" : "x"]: getSpringsAxis().to((position) => {
-              return getPerSlidePosition$1(index, position, loop2, count);
+            [isVertical ? "y" : "x"]: getSpringsAxis().to((position2) => {
+              return getPerSlidePosition$1(index, position2, loop2, count);
             }),
-            [isVertical ? "top" : "left"]: `-${index * 100}%`
+            [isVertical ? "top" : position]: `-${index * 100}%`
           }
         },
         child
@@ -20635,6 +20638,8 @@
   };
   const focusEffect = (args) => {
     return React.Children.map(args.children, (child, index) => {
+      const rtl = useRtl();
+      const position = rtl ? "right" : "left";
       const {
         isVertical,
         springs,
@@ -20652,11 +20657,11 @@
           className: "nut-swiper-slide",
           style: {
             [isVertical ? "y" : "x"]: springs[isVertical ? "y" : "x"].to(
-              (position) => {
-                return getPerSlidePosition(index, position, loop2, count);
+              (position2) => {
+                return getPerSlidePosition(index, position2, loop2, count);
               }
             ),
-            [isVertical ? "top" : "left"]: `-${index * 100}%`,
+            [isVertical ? "top" : position]: `-${index * 100}%`,
             scale: springs.s.to((ss) => {
               const scales = getRefValue(transforms);
               if (!scales) return 1;

package/dist/packages/empty/empty.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-  background-color: $color-background-overlay;
+  background-color: $empty-background-color;
 
   &-image {
     width: $empty-image-size;