@nutui/nutui-react-taro 2.4.2 → 2.5.1

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("@tarojs/taro"), require("@tarojs/components"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "@tarojs/taro", "@tarojs/components", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory((global2.nutui = global2.nutui || {}, global2.nutui.react = {}), global2.React, global2.Taro, global2.components, global2.ReactDOM));
 })(this, function(exports2, React, Taro, components, ReactDOM) {
   "use strict";/*!
-* @nutui/nutui-react-taro v2.4.2 Wed Mar 20 2024 20:01:38 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.5.1 Fri Mar 29 2024 16:12:06 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1464,6 +1464,9 @@
       direction: "ltr"
     }
   };
+  const setDefaultConfig = (config2) => {
+    defaultConfigRef$1.current = config2;
+  };
   const getDefaultConfig$1 = () => {
     return defaultConfigRef$1.current;
   };
@@ -5337,18 +5340,10 @@
             return;
           let to = 0;
           if (props.direction === "vertical") {
-            const DEFAULT_PADDING = 11;
-            const top = titleRects.slice(0, index).reduce(
-              (prev, curr) => prev + curr.height,
-              DEFAULT_PADDING
-            );
+            const top = titleRects.slice(0, index).reduce((prev, curr) => prev + curr.height, 0);
             to = top - (navRectRef.current.height - titleRect.height) / 2;
           } else {
-            const DEFAULT_PADDING = 20;
-            const left2 = titleRects.slice(0, index).reduce(
-              (prev, curr) => prev + curr.width,
-              DEFAULT_PADDING
-            );
+            const left2 = titleRects.slice(0, index).reduce((prev, curr) => prev + curr.width, 0);
             to = left2 - (navRectRef.current.width - titleRect.width) / 2;
             to = rtl ? -to : to;
           }
@@ -6036,8 +6031,8 @@
         onClose: () => {
           onClose == null ? void 0 : onClose();
         },
-        onChange: (val) => {
-          onChange == null ? void 0 : onChange(val);
+        onChange: (val, params) => {
+          onChange == null ? void 0 : onChange(val, params);
         },
         onPathChange,
         ...rest
@@ -8612,8 +8607,12 @@
           return result;
       }
     };
-    const handlePickerChange = (selectedOptions, selectedValue, index) => {
+    const compareDateChange = (currentDate, newDate) => {
       var _a;
+      const isEqual = ((_a = new Date(currentDate)) == null ? void 0 : _a.getTime()) === (newDate == null ? void 0 : newDate.getTime());
+      newDate && isDate(newDate) && !isEqual && setSelectedDate(formatValue(newDate));
+    };
+    const handlePickerChange = (selectedOptions, selectedValue, index) => {
       const rangeType = type2.toLocaleLowerCase();
       if (["date", "datetime", "datehour", "month-day", "year-month"].includes(
         rangeType
@@ -8652,8 +8651,22 @@
         } else if (rangeType === "datehour") {
           date2 = new Date(year, month, day, Number(formatDate[3]));
         }
-        const isEqual = ((_a = new Date(selectedDate)) == null ? void 0 : _a.getTime()) === (date2 == null ? void 0 : date2.getTime());
-        date2 && isDate(date2) && !isEqual && setSelectedDate(formatValue(date2));
+        compareDateChange(selectedDate, date2);
+      } else {
+        const [hour, minute, seconds] = selectedValue;
+        const currentDate = new Date(selectedDate);
+        const year = currentDate.getFullYear();
+        const month = currentDate.getMonth();
+        const day = currentDate.getDate();
+        const date2 = new Date(
+          year,
+          month,
+          day,
+          Number(hour),
+          Number(minute),
+          rangeType === "time" ? Number(seconds) : 0
+        );
+        compareDateChange(selectedDate, date2);
       }
       props.onChange && props.onChange(selectedOptions, selectedValue, index);
     };
@@ -10292,6 +10305,7 @@
   };
   const Input = React.forwardRef(
     (props, ref) => {
+      const rtl = useRtl();
       const { locale } = useConfig$1();
       const {
         type: type2,
@@ -10427,8 +10441,14 @@
             className: "nut-input-native",
             ref: inputRef,
             style: {
-              textAlign: `${// eslint-disable-next-line no-nested-ternary
-              align === "right" ? "end" : align === "left" ? "start" : "center"}`
+              // eslint-disable-next-line no-nested-ternary
+              textAlign: rtl ? (
+                // eslint-disable-next-line no-nested-ternary
+                align === "right" ? (
+                  // eslint-disable-next-line no-nested-ternary
+                  "left"
+                ) : align === "left" ? "right" : "center"
+              ) : align
             },
             type: inputType(type2),
             password: type2 === "password",
@@ -12643,6 +12663,7 @@
     percent: 0,
     showText: false,
     animated: false,
+    lazy: false,
     delay: 0
   };
   const Progress = (props) => {
@@ -12657,6 +12678,7 @@
       showText,
       animated,
       children,
+      lazy,
       delay,
       ...rest
     } = {
@@ -12677,10 +12699,7 @@
       width: `${displayPercent}%`,
       background: color
     };
-    React.useEffect(() => {
-      setDispalyPercent(percent);
-    }, [percent]);
-    React.useEffect(() => {
+    const handlePercent = () => {
       let timer = null;
       if (delay) {
         setDispalyPercent(0);
@@ -12689,27 +12708,104 @@
         }, delay);
       }
       return () => {
+        lazy && resetObserver(Taro.getEnv());
         timer && clearTimeout(timer);
       };
+    };
+    React.useEffect(() => {
+      setDispalyPercent(percent);
+    }, [percent]);
+    const [intersecting, setIntersecting] = React.useState(false);
+    const progressRef = React.useRef(null);
+    const webObserver = React.useRef(null);
+    const uuid = useUuid();
+    const selector = `${classPrefix2}-lazy-${uuid}`;
+    const resetObserver = (env, observer = null) => {
+      if (env === "WEB") {
+        webObserver.current.disconnect && webObserver.current.disconnect();
+      } else {
+        observer && observer.disconnect();
+      }
+    };
+    React.useEffect(() => {
+      if (lazy) {
+        setTimeout(() => {
+          if (intersecting) {
+            setDispalyPercent(percent);
+          } else {
+            setDispalyPercent(0.01);
+          }
+        }, delay);
+      }
+    }, [intersecting]);
+    const handleWebObserver = () => {
+      if (lazy) {
+        webObserver.current = new IntersectionObserver(
+          (entires, self2) => {
+            entires.forEach((item) => {
+              setIntersecting(item.isIntersecting);
+            });
+          },
+          {
+            threshold: [0],
+            rootMargin: "0px"
+          }
+        );
+        webObserver.current.observe(progressRef.current);
+      }
+      handlePercent();
+    };
+    const handleOtherObserver = () => {
+      let observer = null;
+      if (lazy) {
+        observer = Taro.createIntersectionObserver(
+          Taro.getCurrentInstance().page,
+          {
+            thresholds: [0],
+            observeAll: true
+          }
+        );
+        observer.relativeToViewport({ top: 0 }).observe(`#${selector}`, (res) => {
+          setIntersecting(res.intersectionRatio > 0);
+        });
+      }
+      handlePercent();
+    };
+    React.useEffect(() => {
+      if (Taro.getEnv() === "WEB") {
+        handleWebObserver();
+      } else {
+        handleOtherObserver();
+      }
     }, []);
-    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), style, ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-outer`, style: stylesOuter }, /* @__PURE__ */ React.createElement("div", { className: classesInner, style: stylesInner }, showText && /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `${classPrefix2}-text`,
-        style: rtl ? { right: `${displayPercent}%` } : { left: `${displayPercent}%` }
+        ref: progressRef,
+        id: selector,
+        className: classNames(classPrefix2, className),
+        style,
+        ...rest
       },
-      children || /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-outer`, style: stylesOuter }, /* @__PURE__ */ React.createElement("div", { className: classesInner, style: stylesInner }, showText && /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: `${classPrefix2}-text-inner`,
-          style: {
-            background: color
-          }
+          className: `${classPrefix2}-text`,
+          style: rtl ? { right: `${displayPercent}%` } : { left: `${displayPercent}%` }
         },
-        percent,
-        "%"
-      )
-    ))));
+        children || /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${classPrefix2}-text-inner`,
+            style: {
+              background: color
+            }
+          },
+          percent,
+          "%"
+        )
+      )))
+    );
   };
   Progress.defaultProps = defaultProps$J;
   Progress.displayName = "NutProgress";
@@ -13327,7 +13423,7 @@
     disableConfirmButton: false,
     footerDirection: "horizontal",
     lockScroll: true,
-    closeIconPosition: "top-right",
+    closeIconPosition: "bottom",
     closeIcon: false,
     beforeCancel: () => true,
     beforeClose: () => true,
@@ -14405,6 +14501,7 @@
   };
   const classPrefix$c = `nut-popover`;
   const Popover = (props) => {
+    const rtl = useRtl();
     const {
       children,
       list,
@@ -14459,9 +14556,9 @@
         setRootPosition({
           width: rect.width,
           height: rect.height,
-          left: rect.left,
+          left: rtl ? rect.right : rect.left,
           top: rect.top + distance,
-          right: rect.right
+          right: rtl ? rect.left : rect.right
         });
       }).exec();
       setTimeout(() => {
@@ -14515,15 +14612,17 @@
       let cross = 0;
       let parallel = 0;
       if (Array.isArray(offset) && offset.length === 2) {
+        const rtloffset = rtl ? -offset[0] : offset[0];
         cross += +offset[1];
-        parallel += +offset[0];
+        parallel += +rtloffset;
       }
       if (width) {
+        const dir = rtl ? "right" : "left";
         if (["bottom", "top"].includes(direction)) {
           const h2 = direction === "bottom" ? height + cross : -(contentHeight + cross);
           styles.top = `${top + h2}px`;
           if (!skew) {
-            styles.left = `${-(contentWidth - width) / 2 + left2 + parallel}px`;
+            styles[dir] = `${-(contentWidth - width) / 2 + rootPosition[dir] + parallel}px`;
           }
           if (skew === "start") {
             styles.left = `${left2 + parallel}px`;
@@ -14559,15 +14658,17 @@
       const skew = location.split("-")[1];
       const base = 16;
       if (props.arrowOffset !== 0) {
+        const dir = rtl ? "right" : "left";
+        const dir2 = rtl ? "left" : "right";
         if (["bottom", "top"].includes(direction)) {
           if (!skew) {
-            styles.left = `calc(50% + ${arrowOffset}px)`;
+            styles[dir] = `calc(50% + ${arrowOffset}px)`;
           }
           if (skew === "start") {
-            styles.left = `${base + arrowOffset}px`;
+            styles[dir] = `${base + arrowOffset}px`;
           }
           if (skew === "end") {
-            styles.right = `${base - arrowOffset}px`;
+            styles[dir2] = `${base - arrowOffset}px`;
           }
         }
         if (["left", "right"].includes(direction)) {
@@ -14585,12 +14686,13 @@
       return styles;
     };
     const handleSelect = (item, index) => {
+      var _a;
       if (!item.disabled) {
-        onSelect && onSelect(item, index);
+        onSelect == null ? void 0 : onSelect(item, index);
       }
       if (closeOnActionClick) {
-        props.onClick && props.onClick();
-        onClose && onClose();
+        (_a = props.onClick) == null ? void 0 : _a.call(props);
+        onClose == null ? void 0 : onClose();
       }
     };
     return /* @__PURE__ */ React.createElement(React.Fragment, null, !targetId && /* @__PURE__ */ React.createElement(
@@ -16370,9 +16472,14 @@
     const digitReg = /^[0-9]+$/;
     const letterUpperReg = /^[A-Z]+$/;
     const letterLowerReg = /^[a-z]+$/;
+    const rtl = useRtl();
+    const rtlClasses = classNames({
+      [`${classPrefix$6}-rtl`]: rtl
+    });
     const classes = classNames(
       classPrefix$6,
       width ? `${classPrefix$6}-width` : "",
+      rtlClasses,
       className
     );
     React.useEffect(() => {
@@ -16427,6 +16534,9 @@
             bsize * 0.4,
             bsize * 0.75
           ];
+          if (rootContain.current) {
+            rootContain.current.style.fontSize = `${bsize}px`;
+          }
           calcEllipse();
         }
       ).exec();
@@ -16599,18 +16709,19 @@
             width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`
           }
         },
-        content
-      ), expandText ? /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: "nut-ellipsis-text",
-          onClick: (e2) => {
-            e2.stopPropagation();
-            clickHandle(2);
-          }
-        },
-        collapseText
-      ) : null) : null)
+        content,
+        expandText ? /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: "nut-ellipsis-text",
+            onClick: (e2) => {
+              e2.stopPropagation();
+              clickHandle(2);
+            }
+          },
+          collapseText
+        ) : null
+      )) : null)
     ), /* @__PURE__ */ React.createElement(
       components.View,
       {
@@ -16671,7 +16782,8 @@
     indicator: false,
     autoPlay: false,
     loop: false,
-    defaultValue: 0
+    defaultValue: 0,
+    style: {}
   };
   const classPrefix$4 = "nut-swiper";
   const Swiper = React.forwardRef((props, ref) => {
@@ -16687,6 +16799,7 @@
       direction,
       defaultValue,
       onChange,
+      style,
       ...rest
     } = {
       ...defaultProps$i,
@@ -16750,6 +16863,7 @@
       {
         className: classNames(classPrefix$4, className),
         style: {
+          ...style,
           width: !width ? "100%" : pxCheck(width),
           height: !height ? "150px" : pxCheck(height)
         }
@@ -17659,7 +17773,7 @@
       },
       children && /* @__PURE__ */ React.createElement("span", { className: `${classPrefix2}-text` }, children),
       React.isValidElement(closeIcon) ? /* @__PURE__ */ React.createElement(
-        "i",
+        components.View,
         {
           className: `${classPrefix2}-custom-icon`,
           onClick: (e2) => {
@@ -19356,5 +19470,9 @@
   exports2.Video = Video;
   exports2.VirtualList = VirtualList;
   exports2.WaterMark = WaterMark;
+  exports2.getDefaultConfig = getDefaultConfig$1;
+  exports2.setDefaultConfig = setDefaultConfig;
+  exports2.useConfig = useConfig$1;
+  exports2.useRtl = useRtl;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/dist/packages/dialog/dialog.scss

@@ -42,6 +42,11 @@
     align-items: center;
     top: $dialog-close-top;
     color: $dialog-close-color;
+    .nut-icon {
+      font-size: 24px;
+      height: 24px;
+      width: 24px;
+    }
 
     &-top-right {
       right: $dialog-close-right;

package/dist/packages/ellipsis/ellipsis.scss

@@ -4,7 +4,7 @@
   .nut-ellipsis-text {
     cursor: pointer;
     color: $ellipsis-expand-collapse-color;
-    display: inline;
+    display: inline-block;
   }
 
   .nut-ellipsis-wordbreak {

package/dist/packages/form/form.scss

@@ -1,6 +1,6 @@
 
 .form-layout-right .nut-form-item-label {
-  text-align: end;
+  text-align: right;
   font-size: 14px;
   padding-right: 24px;
   white-space: nowrap;
@@ -8,7 +8,7 @@
 
 .form-layout-left .nut-form-item-label {
   position: relative;
-  text-align: start;
+  text-align: left;
   font-size: 14px;
   padding-left: 12px;
   white-space: nowrap;
@@ -41,12 +41,14 @@
 
 [dir='rtl'] .form-layout-right .nut-form-item-label,
 .nut-rtl .form-layout-right .nut-form-item-label {
+  text-align: left;
   padding-right: 0;
   padding-left: 24px;
 }
 
 [dir='rtl'] .form-layout-left .nut-form-item-label,
 .nut-rtl .form-layout-left .nut-form-item-label {
+  text-align: right;
   padding-left: 0;
   padding-right: 12px;
 

package/dist/packages/formitem/formitem.scss

@@ -78,6 +78,7 @@
 [dir='rtl'] .nut-form-item,
 .nut-rtl .nut-form-item {
   &-label {
+    text-align: right;
     margin-right: 0;
     margin-left: $form-item-label-margin-right;
 
@@ -88,4 +89,22 @@
       }
     }
   }
+  &-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;
+  }
 }

package/dist/packages/popover/popover.scss

@@ -100,11 +100,11 @@
         border-bottom: none;
       }
 
-      &:hover {
-        cursor: pointer;
-        color: $popover-hover-text-color;
-        background-color: $popover-hover-background-color;
-      }
+      // &:hover:not(:only-child) {
+      //   cursor: pointer;
+      //   color: $popover-hover-text-color;
+      //   background-color: $popover-hover-background-color;
+      // }
 
       &:hover:nth-of-type(2) {
         border-radius: 8px 8px 0px 0px;
@@ -121,17 +121,20 @@
         width: 12px;
         height: 12px;
         font-size: 12px;
+        .nut-icon {
+          width: 12px;
+          height: 12px;
+          font-size: 12px;
+        }
       }
 
       &-name {
         width: 100%;
         word-break: keep-all;
-        margin-left: 4px;
+        margin: 0 6px 0 4px;
       }
 
       &-action-icon {
-        position: absolute;
-        right: $popover-menu-item-padding;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -241,29 +244,6 @@
 
 [dir='rtl'] .nut-popover,
 .nut-rtl .nut-popover {
-  &-arrow {
-    &-left {
-      right: auto;
-      left: 0px;
-      border-left-color: currentcolor;
-      border-right-color: $popover-border-color;
-      border-right-width: medium;
-      border-left-width: 0;
-      margin-right: 0;
-      margin-left: -8px;
-    }
-
-    &-right {
-      left: auto;
-      right: 0px;
-      border-right-color: currentcolor;
-      border-left-color: $popover-border-color;
-      border-left-width: medium;
-      border-right-width: 0;
-      margin-left: 0;
-      margin-right: -8px;
-    }
-  }
   .nut-popover-content {
     .nut-popover-menu-item {
       &-name {

package/dist/packages/tabs/tabs.scss

@@ -8,7 +8,6 @@
   display: flex;
   box-sizing: border-box;
   height: $tabs-titles-height;
-  padding: $tabs-titles-padding;
   user-select: none;
   overflow: hidden;
   background: $tabs-titles-background-color;
@@ -29,14 +28,14 @@
   &-left {
     justify-content: flex-start;
     .nut-tabs-titles-item {
-      padding: 0 10px;
+      padding: 0 22px;
     }
   }
 
   &-right {
     justify-content: flex-end;
     .nut-tabs-titles-item {
-      padding: 0 10px;
+      padding: 0 22px;
     }
   }
 
@@ -51,7 +50,7 @@
     align-items: center;
     justify-content: center;
     flex: 1 0 auto;
-    margin: 0 $tabs-titles-gap;
+    padding: 0 $tabs-titles-gap;
     height: $tabs-titles-height;
     line-height: $tabs-titles-height;
     min-width: $tabs-titles-item-min-width;
@@ -118,14 +117,6 @@
     &-disabled {
       color: $color-text-disabled;
     }
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
   }
 
   &-simple {
@@ -140,7 +131,7 @@
     background-color: $color-default-light;
 
     .nut-tabs-titles-item {
-      margin: 0;
+      padding: 0;
 
       &-active {
         font-weight: $font-weight-bold;
@@ -152,10 +143,18 @@
 
   &-button {
     .nut-tabs-titles-item {
-      &-active {
+      padding: 0 10px;
+      .nut-tabs-titles-item-text {
+        flex: 1;
         height: 28px;
-        margin-top: 8px;
-        margin-bottom: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 8px;
+      }
+    }
+    .nut-tabs-titles-item-active {
+      .nut-tabs-titles-item-text {
         background: $color-default-light;
         color: $color-text;
         border-radius: $tabs-tab-button-border-radius;
@@ -172,7 +171,7 @@
     border-bottom: 1px solid $color-border;
 
     .nut-tabs-titles-item {
-      margin: 0;
+      padding: 0;
       position: relative;
 
       &::after {
@@ -204,10 +203,6 @@
       right: 50%;
       transform: translate(50%, 0);
     }
-    &:first-child {
-      margin-left: 0;
-      margin-right: 0;
-    }
   }
   &-divider {
     .nut-tabs-titles-item {