@nutui/nutui-react-taro 2.7.9 → 2.7.11

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.7.9 Fri Feb 21 2025 17:12:27 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.7.11 Fri Mar 28 2025 13:34:15 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -280,7 +280,7 @@
     style: {}
   };
   const prefixCls$2 = "nut-button";
-  const defaultProps$1u = {
+  const defaultProps$1v = {
     ...ComponentDefaults,
     color: "",
     type: "default",
@@ -315,7 +315,7 @@
         onClick,
         ...rest
       } = {
-        ...defaultProps$1u,
+        ...defaultProps$1v,
         ...props
       };
       const getStyle = React.useCallback(() => {
@@ -382,7 +382,7 @@
   );
   Button.displayName = "NutButton";
   const CellGroupContext = React.createContext(null);
-  const defaultProps$1t = {
+  const defaultProps$1u = {
     ...ComponentDefaults,
     title: "",
     description: "",
@@ -391,7 +391,7 @@
   const classPrefix$r = "nut-cell-group";
   const CellGroup = (props) => {
     const { children, className, title, description, divider, ...rest } = {
-      ...defaultProps$1t,
+      ...defaultProps$1u,
       ...props
     };
     return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix$r, className), ...rest }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$r}-title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$r}-description` }, description) : null, /* @__PURE__ */ React.createElement(
@@ -403,7 +403,7 @@
     ));
   };
   CellGroup.displayName = "NutCellGroup";
-  const defaultProps$1s = {
+  const defaultProps$1t = {
     ...ComponentDefaults,
     title: null,
     description: null,
@@ -430,7 +430,7 @@
       clickable,
       ...rest
     } = {
-      ...defaultProps$1s,
+      ...defaultProps$1t,
       ...props
     };
     const handleClick = (event) => {
@@ -1398,7 +1398,7 @@
     module2.exports = isEqual2;
   })(lodash_isequal, lodash_isequal.exports);
   var lodash_isequalExports = lodash_isequal.exports;
-  const isequal = /* @__PURE__ */ getDefaultExportFromCjs(lodash_isequalExports);
+  const isEqual$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_isequalExports);
   function useMemo(getValue2, condition, shouldUpdate) {
     const cacheRef = React__namespace.useRef({});
     if (!("value" in cacheRef.current) || shouldUpdate(cacheRef.current.condition, condition)) {
@@ -1443,6 +1443,10 @@
       start: "开始",
       confirm: "确认",
       title: "日历选择",
+      week: "周",
+      month: "月",
+      year: "年",
+      quarter: "季度",
       monthTitle: (year, month) => `${year}年${Number(month) < 10 ? `0${Number(month)}` : month}月`,
       today: "今天",
       loadPreviousMonth: "加载上一个月",
@@ -1586,7 +1590,7 @@
       [config2, direction],
       (prev, next) => prev.some((prevTheme, index) => {
         const nextTheme = next[index];
-        return !isequal(prevTheme, nextTheme);
+        return !isEqual$1(prevTheme, nextTheme);
       })
     );
     const cssVarStyle = React.useMemo(() => {
@@ -1609,7 +1613,7 @@
   const pxCheck = (value) => {
     return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
   };
-  const defaultProps$1r = {
+  const defaultProps$1s = {
     src: "",
     error: true,
     loading: true
@@ -1628,7 +1632,7 @@
       onLoad,
       onError,
       ...rest
-    } = { ...defaultProps$1r, ...props };
+    } = { ...defaultProps$1s, ...props };
     const [innerLoading, setInnerLoading] = React.useState(true);
     const [isError, setIsError] = React.useState(false);
     const handleLoad = (e2) => {
@@ -3647,7 +3651,7 @@
   };
   Overlay.displayName = "NutOverlay";
   const DataContext$1 = React.createContext({});
-  const defaultProps$1q = {
+  const defaultProps$1r = {
     ...ComponentDefaults,
     span: "24",
     offset: "0",
@@ -3655,7 +3659,7 @@
   };
   const Col = (props) => {
     const { className, style, span, offset, children, onClick } = {
-      ...defaultProps$1q,
+      ...defaultProps$1r,
       ...props
     };
     const [colName, setColName] = React.useState("");
@@ -3688,7 +3692,7 @@
     );
   };
   Col.displayName = "NutCol";
-  const defaultProps$1p = {
+  const defaultProps$1q = {
     ...ComponentDefaults,
     contentPosition: "center",
     direction: "horizontal"
@@ -3696,7 +3700,7 @@
   const classPrefix$o = `nut-divider`;
   const Divider = (props) => {
     const { children, contentPosition, style, className, direction, ...rest } = {
-      ...defaultProps$1p,
+      ...defaultProps$1q,
       ...props
     };
     const classes = direction === "horizontal" ? classNames({
@@ -3717,7 +3721,7 @@
     }
   };
   const GridContext = React.createContext(gridContext);
-  const defaultProps$1o = {
+  const defaultProps$1p = {
     text: "",
     columns: 4,
     gap: 0,
@@ -3742,7 +3746,7 @@
       onClick,
       ...rest
     } = {
-      ...defaultProps$1o,
+      ...defaultProps$1p,
       ...props
     };
     const classPrefix2 = "nut-grid-item";
@@ -3801,7 +3805,7 @@
     );
   };
   GridItem.displayName = "NutGridItem";
-  const defaultProps$1n = {
+  const defaultProps$1o = {
     columns: 4,
     gap: 0,
     center: true,
@@ -3822,7 +3826,7 @@
       className,
       onClick,
       ...rest
-    } = { ...defaultProps$1n, ...props };
+    } = { ...defaultProps$1o, ...props };
     const childrenDom = React.Children.toArray(children);
     const classPrefix2 = "nut-grid";
     const rootClass = () => {
@@ -3863,7 +3867,7 @@
   };
   Layout.displayName = "NutLayout";
   const classPrefix$n = "nut-row";
-  const defaultProps$1m = {
+  const defaultProps$1n = {
     ...ComponentDefaults,
     type: "",
     justify: "start",
@@ -3883,7 +3887,7 @@
       gutter,
       onClick
     } = {
-      ...defaultProps$1m,
+      ...defaultProps$1n,
       ...props
     };
     const getClass = (prefix, type22) => {
@@ -3917,12 +3921,12 @@
   };
   Row.displayName = "NutRow";
   const prefixCls$1 = "nut-space";
-  const defaultProps$1l = {
+  const defaultProps$1m = {
     direction: "horizontal"
   };
   const Space = (props) => {
     const { className, style, children, wrap, align, direction, justify } = {
-      ...defaultProps$1l,
+      ...defaultProps$1m,
       ...props
     };
     const cls = classNames(
@@ -4057,7 +4061,7 @@
     }
     return Promise.resolve(makeRect(0, 0));
   };
-  const defaultProps$1k = {
+  const defaultProps$1l = {
     ...ComponentDefaults,
     position: "top",
     zIndex: 900
@@ -4074,7 +4078,7 @@
       className,
       onChange,
       ...rest
-    } = { ...defaultProps$1k, ...props };
+    } = { ...defaultProps$1l, ...props };
     const stickyRef = React.useRef(null);
     const rootRef = React.useRef(null);
     const [rootRect, setRootRect] = React.useState({});
@@ -4198,7 +4202,7 @@
     );
   };
   SafeArea.displayName = "NutSafeArea";
-  const defaultProps$1j = {
+  const defaultProps$1k = {
     ...ComponentDefaults,
     threshold: 200,
     zIndex: 900,
@@ -4207,7 +4211,7 @@
   const BackTop = (props) => {
     const rtl = useRtl();
     const { children, threshold, zIndex, className, duration, style, onClick } = {
-      ...defaultProps$1j,
+      ...defaultProps$1k,
       ...props
     };
     const classPrefix2 = "nut-backtop";
@@ -4255,7 +4259,7 @@
     return idRef.current;
   }
   const elevatorContext = React.createContext({});
-  const defaultProps$1i = {
+  const defaultProps$1j = {
     ...ComponentDefaults,
     height: "200px",
     floorKey: "title",
@@ -4282,7 +4286,7 @@
       children,
       ...rest
     } = {
-      ...defaultProps$1i,
+      ...defaultProps$1j,
       ...props
     };
     const uuid = useUuid();
@@ -4508,7 +4512,7 @@
   };
   Elevator.displayName = "NutElevator";
   Elevator.Context = elevatorContext;
-  const defaultProps$1h = {
+  const defaultProps$1i = {
     ...ComponentDefaults,
     activeText: "",
     inactiveText: "",
@@ -4536,7 +4540,7 @@
       content,
       ...rest
     } = {
-      ...defaultProps$1h,
+      ...defaultProps$1i,
       ...props
     };
     const classPrefix2 = "nut-fixednav";
@@ -4589,7 +4593,7 @@
     );
   };
   FixedNav.displayName = "NutFixedNav";
-  const defaultProps$1g = {
+  const defaultProps$1h = {
     ...ComponentDefaults,
     left: "",
     right: "",
@@ -4614,7 +4618,7 @@
       zIndex,
       onBackClick
     } = {
-      ...defaultProps$1g,
+      ...defaultProps$1h,
       ...props
     };
     const classPrefix2 = "nut-navbar";
@@ -4692,7 +4696,7 @@
     return /* @__PURE__ */ React.createElement(React.Fragment, null, safeAreaInsetTop && /* @__PURE__ */ React.createElement(SafeArea, { position: "top" }), fixed && placeholder ? /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
   };
   NavBar.displayName = "NutNavBar";
-  const defaultProps$1f = {
+  const defaultProps$1g = {
     ...ComponentDefaults,
     position: "center",
     transition: "",
@@ -4745,7 +4749,7 @@
       afterShow,
       afterClose,
       onClick
-    } = { ...defaultProps$1f, ...props };
+    } = { ...defaultProps$1g, ...props };
     let innerIndex = zIndex || _zIndex;
     const [index, setIndex] = React.useState(innerIndex);
     const [innerVisible, setInnerVisible] = React.useState(visible);
@@ -4888,7 +4892,7 @@
   };
   Popup.displayName = "NutPopup";
   const OffsetContext = React.createContext(20);
-  const defaultProps$1e = {
+  const defaultProps$1f = {
     ...ComponentDefaults,
     position: "left",
     width: "80%"
@@ -4906,7 +4910,7 @@
       indent,
       ...rest
     } = {
-      ...defaultProps$1e,
+      ...defaultProps$1f,
       ...props
     };
     const innerIndent = indent ? Number(indent) : 20;
@@ -4964,13 +4968,13 @@
       title
     );
   };
-  const defaultProps$1d = {
+  const defaultProps$1e = {
     open: true
   };
   const SubSideNavBar = (props) => {
     const classPrefix2 = "nut-subsidenavbar";
     const { title, value, children, onClick, open: open2, ...rest } = {
-      ...defaultProps$1d,
+      ...defaultProps$1e,
       ...props
     };
     const [subShow, setSubShow] = React.useState(open2);
@@ -5048,7 +5052,7 @@
     );
     return [stateRef.current, setState];
   }
-  const defaultProps$1c = {
+  const defaultProps$1d = {
     ...ComponentDefaults,
     value: "",
     dot: false,
@@ -5073,7 +5077,7 @@
       color,
       fill
     } = {
-      ...defaultProps$1c,
+      ...defaultProps$1d,
       ...props
     };
     const classPrefix2 = "nut-badge";
@@ -5127,7 +5131,7 @@
   };
   Badge.displayName = "NutBadge";
   const TabbarContext = React.createContext(null);
-  const defaultProps$1b = {
+  const defaultProps$1c = {
     ...ComponentDefaults,
     title: "",
     icon: null,
@@ -5153,7 +5157,7 @@
       index,
       ...rest
     } = {
-      ...defaultProps$1b,
+      ...defaultProps$1c,
       ...props
     };
     const active = index === (ctx == null ? void 0 : ctx.selectIndex);
@@ -5191,7 +5195,7 @@
       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$1a = {
+  const defaultProps$1b = {
     ...ComponentDefaults,
     defaultValue: 0,
     fixed: false,
@@ -5214,7 +5218,7 @@
       style,
       onSwitch
     } = {
-      ...defaultProps$1a,
+      ...defaultProps$1b,
       ...props
     };
     const classPrefix2 = "nut-tabbar";
@@ -5256,14 +5260,14 @@
   };
   Tabbar.displayName = "NutTabbar";
   Tabbar.Item = TabbarItem;
-  const defaultProps$19 = {
+  const defaultProps$1a = {
     title: "",
     value: "",
     disabled: false
   };
   const TabPane = (props) => {
     const { children, autoHeightClassName, className, disabled } = {
-      ...defaultProps$19,
+      ...defaultProps$1a,
       ...props
     };
     const classPrefix2 = "nut-tabpane";
@@ -5290,7 +5294,7 @@
     };
   }
   const requestAniFrame$1 = requestAniFrame();
-  const defaultProps$18 = {
+  const defaultProps$19 = {
     ...ComponentDefaults,
     tabStyle: {},
     activeColor: "",
@@ -5319,7 +5323,7 @@
       value: outerValue,
       defaultValue: outerDefaultValue,
       ...rest
-    } = { ...defaultProps$18, ...props };
+    } = { ...defaultProps$19, ...props };
     const uuid = useUuid();
     const [value, setValue] = usePropsValue({
       value: outerValue,
@@ -5386,14 +5390,8 @@
     const [scrollLeft, setScrollLeft] = React.useState(0);
     const [scrollTop, setScrollTop] = React.useState(0);
     const scrollDirection = (to, direction2) => {
-      let count = 0;
-      const frames = 1;
-      function animate() {
-        if (direction2 === "horizontal") setScrollLeft(to);
-        else setScrollTop(to);
-        if (++count < frames) requestAniFrame$1(animate);
-      }
-      animate();
+      if (direction2 === "horizontal") setScrollLeft(to);
+      else setScrollTop(to);
     };
     const scrollIntoView = (index) => {
       requestAniFrame$1(() => {
@@ -5410,13 +5408,11 @@
           } else {
             const left2 = titleRects.slice(0, index).reduce((prev, curr) => prev + curr.width, 0);
             to = left2 - (navRect.width - titleRect.width) / 2;
-            if (to < 0) return;
-            to = rtl ? -to : to;
           }
+          scrollDirection(to, direction);
           Taro.nextTick(() => {
             scrollWithAnimation.current = true;
           });
-          scrollDirection(to, direction);
         });
       });
     };
@@ -5509,7 +5505,7 @@
   };
   Tabs.displayName = "NutTabs";
   Tabs.TabPane = TabPane;
-  const defaultProps$17 = {
+  const defaultProps$18 = {
     type: "custom",
     existList: [],
     defaultIcon: null,
@@ -5528,7 +5524,7 @@
       onSelect,
       onSwitch,
       ...rest
-    } = { ...defaultProps$17, ...props };
+    } = { ...defaultProps$18, ...props };
     const classPrefix2 = "nut-address";
     const selectedExist = (item) => {
       existList.forEach((list, index) => {
@@ -5690,7 +5686,7 @@
       return pathNodes;
     }
   }
-  const defaultProps$16 = {
+  const defaultProps$17 = {
     ...ComponentDefaults,
     activeColor: "",
     activeIcon: "checklist",
@@ -5736,7 +5732,7 @@
       onClose,
       onChange,
       onPathChange
-    } = { ...defaultProps$16, ...props };
+    } = { ...defaultProps$17, ...props };
     const [tabvalue, setTabvalue] = React.useState("c1");
     const [optionsData, setOptionsData] = React.useState([]);
     const isLazy = () => state.configs.lazy && Boolean(state.configs.onLoad);
@@ -6047,7 +6043,7 @@
   };
   const Cascader = React.forwardRef(InternalCascader);
   Cascader.displayName = "NutCascader";
-  const defaultProps$15 = {
+  const defaultProps$16 = {
     ...ComponentDefaults,
     visible: false,
     type: "custom",
@@ -6074,7 +6070,7 @@
       onPathChange,
       ...rest
     } = {
-      ...defaultProps$15,
+      ...defaultProps$16,
       ...props
     };
     return /* @__PURE__ */ React.createElement(React.Fragment, null, type2 === "custom" && /* @__PURE__ */ React.createElement(
@@ -6099,7 +6095,7 @@
       }
     ));
   };
-  const defaultProps$14 = {
+  const defaultProps$15 = {
     ...ComponentDefaults,
     defaultValue: [],
     type: "custom",
@@ -6141,7 +6137,7 @@
       onSwitch,
       ...rest
     } = {
-      ...defaultProps$14,
+      ...defaultProps$15,
       ...props
     };
     const classPrefix2 = "nut-address";
@@ -6298,33 +6294,6 @@
     const endTime = new Date(date2.replace(/-/g, "/")).getTime();
     return startTime === endTime;
   };
-  const getWeekDate = (year, month, date2, firstDayOfWeek = 0) => {
-    const dateNow = new Date(Number(year), parseInt(month) - 1, Number(date2));
-    const nowTime = dateNow.getTime();
-    let day = dateNow.getDay();
-    if (firstDayOfWeek === 0) {
-      const oneDayTime2 = 24 * 60 * 60 * 1e3;
-      const SundayTime2 = nowTime - day * oneDayTime2;
-      const SaturdayTime = nowTime + (6 - day) * oneDayTime2;
-      const sunday2 = date2Str(new Date(SundayTime2));
-      const saturday = date2Str(new Date(SaturdayTime));
-      return [sunday2, saturday];
-    }
-    day = day === 0 ? 7 : day;
-    const oneDayTime = 24 * 60 * 60 * 1e3;
-    const MondayTime = nowTime - (day - 1) * oneDayTime;
-    const SundayTime = nowTime + (7 - day) * oneDayTime;
-    const monday = date2Str(new Date(MondayTime));
-    const sunday = date2Str(new Date(SundayTime));
-    return [monday, sunday];
-  };
-  const formatResultDate = (date2) => {
-    const [year, month, day] = [...date2.split("-")];
-    const formatterDay = getNumTwoBit(Number(day));
-    const formatterDate = `${year}-${month}-${day}`;
-    const dayOfWeek = getWhatDay(Number(year), Number(month), Number(day));
-    return [year, month, formatterDay, formatterDate, dayOfWeek];
-  };
   const getCurrMonthData = (type2, year, month) => {
     {
       month === 12 && (year += 1);
@@ -6366,6 +6335,74 @@
     });
     return months.slice(preDates - days);
   };
+  const getWeekDate = (year, month, date2, firstDayOfWeek = 0) => {
+    const dateNow = new Date(Number(year), parseInt(month) - 1, Number(date2));
+    const nowTime = dateNow.getTime();
+    let day = dateNow.getDay();
+    if (firstDayOfWeek === 0) {
+      const oneDayTime2 = 24 * 60 * 60 * 1e3;
+      const SundayTime2 = nowTime - day * oneDayTime2;
+      const SaturdayTime = nowTime + (6 - day) * oneDayTime2;
+      const sunday2 = date2Str(new Date(SundayTime2));
+      const saturday = date2Str(new Date(SaturdayTime));
+      return [sunday2, saturday];
+    }
+    day = day === 0 ? 7 : day;
+    const oneDayTime = 24 * 60 * 60 * 1e3;
+    const MondayTime = nowTime - (day - 1) * oneDayTime;
+    const SundayTime = nowTime + (7 - day) * oneDayTime;
+    const monday = date2Str(new Date(MondayTime));
+    const sunday = date2Str(new Date(SundayTime));
+    return [monday, sunday];
+  };
+  const formatResultDate = (date2) => {
+    const [year, month, day] = [...date2.split("-")];
+    const formatterDay = getNumTwoBit(Number(day));
+    const formatterDate = `${year}-${month}-${day}`;
+    const dayOfWeek = getWhatDay(Number(year), Number(month), Number(day));
+    return [year, month, formatterDay, formatterDate, dayOfWeek];
+  };
+  const getWeekOfYearByYMD = (year, month, date2, firstDayOfWeek = 0) => {
+    const MILLISECONDS_PER_DAY = 864e5;
+    const dateNow = new Date(year, month - 1, date2);
+    const dateFirst = new Date(year, 0, 1);
+    const dayOfYear = Math.round(
+      (dateNow.valueOf() - dateFirst.valueOf()) / MILLISECONDS_PER_DAY
+    );
+    const DAYS_OF_FIRST_WEEK = 3;
+    let dayOfWeek = dateNow.getDay();
+    let remainder = 6 - dayOfWeek - DAYS_OF_FIRST_WEEK;
+    if (firstDayOfWeek !== 0) {
+      dayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
+      remainder = 7 - dayOfWeek - DAYS_OF_FIRST_WEEK;
+    }
+    let weekNo = Math.ceil((dayOfYear + remainder + 1) / 7);
+    if (weekNo === 0) {
+      weekNo = getWeekOfYearByYMD(year - 1, 12, 31, firstDayOfWeek);
+    } else if (weekNo === 53) {
+      const remainder2 = 7 - dayOfWeek - DAYS_OF_FIRST_WEEK;
+      weekNo = remainder2 > 0 ? 1 : weekNo;
+    }
+    return weekNo;
+  };
+  const getWeekNosOfYear = (year, month, firstDayOfWeek) => {
+    const startWeekNo = getWeekOfYearByYMD(year, month, 1, firstDayOfWeek);
+    const endWeekNo = getWeekOfYearByYMD(
+      year,
+      month,
+      getMonthDays(`${year}`, `${month}`),
+      firstDayOfWeek
+    );
+    return Array.from(
+      {
+        length: (endWeekNo === 1 ? 53 : endWeekNo) - (startWeekNo === 53 || startWeekNo === 52 ? 0 : startWeekNo) + 1
+      },
+      (_, i2) => {
+        const lastIndex = (endWeekNo === 1 ? 53 : endWeekNo) - startWeekNo;
+        return `${endWeekNo === 1 && i2 === lastIndex ? 1 : ((startWeekNo === 53 || startWeekNo === 52) && i2 !== 0 ? 0 : startWeekNo) + i2}`;
+      }
+    );
+  };
   const splitDate = (date2) => {
     const split = date2.indexOf("-") !== -1 ? "-" : "/";
     return date2.split(split);
@@ -6394,7 +6431,89 @@
   const isStartAndEnd = (days) => {
     return days.length >= 2 && isEqual(days[0], days[1]);
   };
-  const defaultProps$13 = {
+  const getPreMonths = (type2, year, month) => {
+    const preMonth = +month - 1;
+    const months = Array.from(Array(preMonth), (v, k) => {
+      return {
+        year,
+        month: k + 1,
+        yearAndMonth: formatMonth(year, k + 1),
+        type: type2
+      };
+    });
+    return months;
+  };
+  const getMonths = (type2, year, month, endMonth = 12) => {
+    const nextMonth = endMonth - month + 1;
+    const months = Array.from(Array(nextMonth), (v, k) => {
+      return {
+        year,
+        month: k + month,
+        yearAndMonth: formatMonth(year, k + month),
+        type: type2
+      };
+    });
+    return months;
+  };
+  const formatMonth = (year, month) => {
+    return `${year}-${String(month).padStart(2, "0")}`;
+  };
+  const formatQuarter = (year, quarter) => {
+    return `${year}-Q${quarter}`;
+  };
+  const getQuarter = (month) => {
+    if (month < 1 || month > 12) {
+      throw new Error("月份必须在 1 到 12 之间");
+    }
+    const quarter = Math.floor((month - 1) / 3) + 1;
+    return quarter;
+  };
+  const getQuarters = (type2, year, month, endMonth = 12) => {
+    const quarters = [];
+    const startIndex = month;
+    const endIndex = endMonth;
+    for (let index = startIndex; index <= endIndex; index += 3) {
+      const quarter = getQuarter(index);
+      quarters.push({
+        year,
+        quarter,
+        yearAndQuarter: formatQuarter(year, quarter),
+        type: type2
+      });
+    }
+    return quarters;
+  };
+  const getPreQuarters = (type2, year, month) => {
+    const quarters = [];
+    const startIndex = 1;
+    const endIndex = month - 3;
+    for (let index = startIndex; index <= endIndex; index += 3) {
+      const quarter = getQuarter(index);
+      quarters.push({
+        year,
+        quarter,
+        yearAndQuarter: formatQuarter(year, quarter),
+        type: type2
+      });
+    }
+    return quarters;
+  };
+  const getNextQuarters = (type2, year, month, endMonth = 12) => {
+    const quarters = [];
+    const startIndex = month + 3;
+    const endIndex = endMonth;
+    for (let index = startIndex; index <= endIndex; index += 3) {
+      const quarter = getQuarter(index);
+      quarters.push({
+        year,
+        quarter,
+        yearAndQuarter: formatQuarter(year, quarter),
+        type: type2
+      });
+    }
+    return quarters;
+  };
+  const defaultProps$14 = {
     ...ComponentDefaults,
     type: "single",
     autoBackfill: false,
@@ -6408,6 +6527,7 @@
     confirmText: "",
     showTitle: true,
     showSubTitle: true,
+    showMonthNumber: false,
     scrollAnimation: true,
     firstDayOfWeek: 0,
     disableDate: (date2) => false,
@@ -6444,19 +6564,20 @@
       confirmText,
       showTitle,
       showSubTitle,
+      showMonthNumber,
       scrollAnimation,
       firstDayOfWeek,
       disableDate,
       renderHeaderButtons,
+      renderBottomButton,
       renderDay,
       renderDayTop,
       renderDayBottom,
-      renderBottomButton,
       onConfirm,
       onUpdate,
       onDayClick,
       onPageChange
-    } = { ...defaultProps$13, ...props };
+    } = { ...defaultProps$14, ...props };
     const classPrefix2 = "nut-calendar";
     const dayPrefix = "nut-calendar-day";
     const weekdays = locale.calendaritem.weekdays;
@@ -6483,7 +6604,7 @@
       if (defaultValue || Array.isArray(defaultValue) && defaultValue.length > 0) {
         return type2 !== "single" ? [...defaultValue] : defaultValue;
       }
-      return void 0;
+      return type2 === "single" ? "" : [];
     };
     const [currentDate, setCurrentDate] = usePropsValue({
       value,
@@ -6518,6 +6639,7 @@
         const monthInfo = {
           curData: date2,
           title: monthTitle(y2, m2),
+          weekNo: getWeekNosOfYear(y2, m2, firstDayOfWeek),
           monthData: days,
           cssHeight,
           scrollTop: scrollTop2
@@ -6539,7 +6661,7 @@
       const currentMonthsData = monthsData[current];
       if (currentMonthsData.title === yearMonthTitle) return;
       const [year, month] = currentMonthsData.curData;
-      onPageChange && onPageChange([year, month, `${year}-${month}`]);
+      onPageChange == null ? void 0 : onPageChange([year, month, `${year}-${month}`]);
       setYearMonthTitle(currentMonthsData.title);
     };
     const setDefaultRange = (monthNum, current) => {
@@ -6741,7 +6863,7 @@
       initData();
     };
     React.useEffect(() => {
-      setCurrentDate(resetDefaultValue() || []);
+      setCurrentDate(resetDefaultValue());
     }, [defaultValue]);
     React.useEffect(() => {
       popup && resetRender();
@@ -6902,7 +7024,7 @@
         }
       }
       if (!isFirst) {
-        onDayClick && onDayClick(state.currDateArray);
+        onDayClick == null ? void 0 : onDayClick(state.currDateArray);
         if (autoBackfill || !popup) {
           confirm();
         }
@@ -6912,9 +7034,9 @@
     const confirm = () => {
       if (type2 === "range" && state.currDateArray.length === 2 || type2 !== "range") {
         const chooseData = state.currDateArray.slice(0);
-        onConfirm && onConfirm(chooseData);
+        onConfirm == null ? void 0 : onConfirm(chooseData);
         if (popup) {
-          onUpdate && onUpdate();
+          onUpdate == null ? void 0 : onUpdate();
         }
       }
     };
@@ -6937,7 +7059,14 @@
       return currentDate.length >= 2 && (type2 === "range" || type2 === "week") && day.type === "active" && isEnd(getCurrDate(day, month), currentDate);
     };
     const renderHeader = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: headerClasses }, showTitle && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-title` }, title || locale.calendaritem.title), renderHeaderButtons && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-header-buttons` }, renderHeaderButtons()), showSubTitle && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-sub-title` }, yearMonthTitle), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-weeks`, ref: weeksPanel }, weeks.map((item) => /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-week-item`, key: item }, item))));
+      return /* @__PURE__ */ React.createElement("div", { className: headerClasses }, showTitle && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-title` }, title || locale.calendaritem.title), renderHeaderButtons && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-header-buttons` }, renderHeaderButtons()), showSubTitle && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-sub-title` }, yearMonthTitle), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${classPrefix2}-weeks ${showMonthNumber ? `${classPrefix2}-weeks-shrink` : ""}`,
+          ref: weeksPanel
+        },
+        weeks.map((item) => /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-week-item`, key: item }, item))
+      ));
     };
     const renderItem = (month, day, index) => {
       const startTip = isStartTip(day, month);
@@ -6953,7 +7082,7 @@
         /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-day-day` }, renderDay ? renderDay(day) : day.day),
         !startTip && renderDayTop && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-day-info-top` }, renderDayTop(day)),
         noStartNorEnd && renderDayBottom && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-day-info-bottom` }, renderDayBottom(day)),
-        noStartNorEnd && isCurrDay(month, day.day) && !renderDayBottom && showToday && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-day-info-curr` }, locale.calendaritem.today),
+        noStartNorEnd && !renderDayBottom && showToday && isCurrDay(month, day.day) && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-day-info-curr` }, locale.calendaritem.today),
         startTip && /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -6969,9 +7098,9 @@
       );
     };
     const renderPanel = (month, key) => {
-      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-month`, key }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-month-title` }, month.title), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-days` }, month.monthData.map(
+      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-month`, key }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-month-title` }, month.title), /* @__PURE__ */ React.createElement("div", { className: `${showMonthNumber ? "shrink" : ""}` }, showMonthNumber && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-weeknumber` }, month.weekNo.map((item, index) => /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-weeknumber-index`, key: index }, item))), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-days` }, month.monthData.map(
         (day, i2) => renderItem(month, day, i2)
-      )));
+      ))));
     };
     const renderContent = () => {
       return /* @__PURE__ */ React.createElement(
@@ -6988,7 +7117,6 @@
         /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-pannel`, ref: monthsPanel }, /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: "viewArea",
             ref: viewAreaRef,
             style: { transform: `translateY(${translateY}px)` }
           },
@@ -7004,13 +7132,328 @@
     return /* @__PURE__ */ React.createElement("div", { className: classes, style }, renderHeader(), renderContent(), popup && !autoBackfill ? renderFooter() : "");
   });
   CalendarItem.displayName = "NutCalendarItem";
+  const defaultConfigRef = {
+    current: {
+      locale: zhCN
+    }
+  };
+  const getDefaultConfig = () => {
+    return defaultConfigRef.current;
+  };
+  const ConfigContext = React.createContext(null);
+  const useConfig = () => {
+    return React.useContext(ConfigContext) ?? getDefaultConfig();
+  };
+  const YearMonthPanelHeight = 231;
+  const YearQuarterPanelHeight = 103;
+  const defaultProps$13 = {
+    ...ComponentDefaults,
+    type: "single",
+    viewMode: "month",
+    title: "",
+    startDate: getDateString(0),
+    endDate: getDateString(365),
+    showToday: true,
+    showTitle: true,
+    scrollAnimation: true,
+    renderDay: void 0,
+    onItemClick: () => {
+    }
+  };
+  const CalendarViewModeItem = React.forwardRef((props) => {
+    const { locale } = useConfig();
+    const {
+      style,
+      className,
+      viewMode,
+      title,
+      value,
+      defaultValue,
+      startDate,
+      endDate,
+      showTitle,
+      renderDay,
+      onItemClick
+    } = { ...defaultProps$13, ...props };
+    const classPrefix2 = "nut-calendar-viewmode";
+    const [panelDate, setPanelDate] = React.useState({
+      months: [
+        {
+          year: (/* @__PURE__ */ new Date()).getFullYear(),
+          months: [],
+          cssHeight: 0,
+          scrollTop: 0,
+          currYear: false
+        }
+      ],
+      quarters: [
+        {
+          year: (/* @__PURE__ */ new Date()).getFullYear(),
+          quarters: [],
+          cssHeight: 0,
+          scrollTop: 0,
+          currYear: false
+        }
+      ]
+    });
+    const [scrollTop, setScrollTop] = React.useState(0);
+    const propStartDate = startDate || getDateString(0);
+    const propEndDate = endDate || getDateString(365);
+    const startDates = splitDate(propStartDate);
+    const endDates = splitDate(propEndDate);
+    const [innerValue, setInnerValue] = usePropsValue({
+      value,
+      defaultValue,
+      finalValue: [],
+      onChange: (val) => {
+      }
+    });
+    const monthsRef = React.useRef(null);
+    const monthsPanel = React.useRef(null);
+    const viewAreaRef = React.useRef(null);
+    const getMonthsPanel = () => {
+      return monthsPanel.current;
+    };
+    const getMonthsRef = () => {
+      return monthsRef.current;
+    };
+    const requestAniFrameFunc = (viewMode2) => {
+      switch (viewMode2) {
+        case "month":
+          {
+            const lastItem = panelDate.months[panelDate.months.length - 1];
+            const containerHeight = lastItem.cssHeight + lastItem.scrollTop;
+            const currentIndex = panelDate.months.findIndex(
+              (item) => item.currYear === true
+            );
+            requestAniFrame$1(() => {
+              var _a;
+              if (monthsRef && monthsPanel && viewAreaRef) {
+                getMonthsRef().clientHeight;
+                getMonthsPanel().style.height = `${containerHeight}px`;
+                const currTop = ((_a = panelDate.months[currentIndex]) == null ? void 0 : _a.scrollTop) || 0;
+                getMonthsRef().scrollTop = currTop;
+                setScrollTop(currTop);
+              }
+            });
+          }
+          break;
+        case "quarter":
+          {
+            const lastItem = panelDate.quarters[panelDate.quarters.length - 1];
+            const containerHeight = lastItem.cssHeight + lastItem.scrollTop;
+            const currentIndex = panelDate.quarters.findIndex(
+              (item) => item.currYear === true
+            );
+            requestAniFrame$1(() => {
+              var _a;
+              if (monthsRef && monthsPanel && viewAreaRef) {
+                getMonthsRef().clientHeight;
+                getMonthsPanel().style.height = `${containerHeight}px`;
+                const currTop = ((_a = panelDate.quarters[currentIndex]) == null ? void 0 : _a.scrollTop) || 0;
+                getMonthsRef().scrollTop = currTop;
+                setScrollTop(currTop);
+              }
+            });
+          }
+          break;
+      }
+    };
+    const isCurrYear = (year) => {
+      return innerValue.split("-")[0] === `${year}`;
+    };
+    const getMonthsData = () => {
+      const startYear = Number(startDates[0]);
+      const startMonth = Number(startDates[1]);
+      const endYear = Number(endDates[0]);
+      const endMonth = Number(endDates[1]);
+      const panelData = [];
+      const addPanelData = (year, months, scrollTop2) => {
+        panelData.push({
+          year,
+          months,
+          scrollTop: scrollTop2,
+          cssHeight: YearMonthPanelHeight,
+          currYear: isCurrYear(year)
+        });
+      };
+      if (startYear === endYear) {
+        addPanelData(
+          startYear,
+          [
+            ...getPreMonths("prev", startYear, startMonth),
+            ...getMonths("curr", startYear, startMonth, endMonth),
+            ...getMonths("next", endYear, endMonth + 1)
+          ],
+          0
+        );
+      } else {
+        let scrollTop2 = panelData.length * YearMonthPanelHeight;
+        const startMonths = [
+          ...getPreMonths("prev", startYear, startMonth),
+          ...getMonths("curr", startYear, startMonth)
+        ];
+        addPanelData(startYear, startMonths, scrollTop2);
+        for (let i2 = startYear + 1; i2 < endYear; i2++) {
+          scrollTop2 = panelData.length * YearMonthPanelHeight;
+          const midMonths = [...getMonths("curr", i2, 1)];
+          addPanelData(i2, midMonths, scrollTop2);
+        }
+        const lastMonths = [
+          ...getPreMonths("curr", endYear, endMonth + 1),
+          ...getMonths("next", endYear, endMonth + 1)
+        ];
+        scrollTop2 = panelData.length * YearMonthPanelHeight;
+        addPanelData(endYear, lastMonths, scrollTop2);
+      }
+      return panelData;
+    };
+    const getQuartersData = () => {
+      const startYear = Number(startDates[0]);
+      const startMonth = Number(startDates[1]);
+      const endYear = Number(endDates[0]);
+      const endMonth = Number(endDates[1]);
+      const panelData = [];
+      const addPanelData = (year, quarters, scrollTop2) => {
+        panelData.push({
+          year,
+          quarters,
+          scrollTop: scrollTop2,
+          cssHeight: YearQuarterPanelHeight,
+          currYear: isCurrYear(year)
+        });
+      };
+      if (startYear === endYear) {
+        const quarters = [
+          ...getPreQuarters("prev", startYear, startMonth),
+          ...getQuarters("curr", startYear, startMonth, endMonth),
+          ...getNextQuarters("next", endYear, endMonth)
+        ];
+        addPanelData(startYear, quarters, 0);
+      } else {
+        let scrollTop2 = panelData.length * YearQuarterPanelHeight;
+        const startQuarters = [
+          ...getPreQuarters("prev", startYear, startMonth),
+          ...getQuarters("curr", startYear, startMonth)
+        ];
+        addPanelData(startYear, startQuarters, scrollTop2);
+        for (let i2 = startYear + 1; i2 < endYear; i2++) {
+          scrollTop2 = panelData.length * YearQuarterPanelHeight;
+          const midQuarters = [...getQuarters("curr", i2, 1)];
+          addPanelData(i2, midQuarters, scrollTop2);
+        }
+        const lastQuarters = [
+          ...getQuarters("curr", endYear, 1, endMonth),
+          ...getNextQuarters("next", endYear, endMonth)
+        ];
+        scrollTop2 = panelData.length * YearQuarterPanelHeight;
+        addPanelData(endYear, lastQuarters, scrollTop2);
+      }
+      return panelData;
+    };
+    const initData = () => {
+      const data = (
+        // eslint-disable-next-line no-nested-ternary
+        viewMode === "month" ? getMonthsData() : viewMode === "quarter" ? getQuartersData() : null
+      );
+      setPanelDate({ ...panelDate, [`${viewMode}s`]: data });
+    };
+    React.useEffect(() => {
+      requestAniFrameFunc(viewMode);
+    }, [panelDate]);
+    React.useEffect(() => {
+      initData();
+    }, []);
+    const monthsViewScroll = (e2) => {
+      const scrollTop2 = e2.target.scrollTop;
+      Taro.getEnv() === "WEB" && setScrollTop(scrollTop2);
+    };
+    const handleItemClick = (viewMode2, item) => {
+      if (item.type !== "curr") return;
+      const val = viewMode2 === "month" ? item.yearAndMonth : item.yearAndQuarter;
+      setInnerValue(val);
+      onItemClick == null ? void 0 : onItemClick(val);
+    };
+    const isDisable = (item) => {
+      return item.type === "prev" || item.type === "next";
+    };
+    const isActive = (item) => {
+      const val = viewMode === "month" ? item.yearAndMonth : item.yearAndQuarter;
+      return val === innerValue;
+    };
+    const getClasses = (item) => {
+      if (isDisable(item)) {
+        return ["disabled"];
+      }
+      const res = [];
+      if (item.type === "curr") {
+        if (isActive(item)) {
+          res.push("active");
+        }
+      }
+      return res;
+    };
+    const classes = classNames(classPrefix2, className);
+    const renderHeader = () => {
+      return showTitle && /* @__PURE__ */ React.createElement(
+        components.View,
+        {
+          className: classNames({
+            [`${classPrefix2}-header`]: true
+          })
+        },
+        /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-title` }, title)
+      );
+    };
+    const renderItem = (item, index) => {
+      const units = {
+        month: locale.calendaritem.month,
+        quarter: locale.calendaritem.quarter
+      };
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            `${classPrefix2}-item`,
+            item.type,
+            getClasses(item)
+          ),
+          onClick: () => handleItemClick(viewMode, item),
+          key: index
+        },
+        /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-item-${item.type}` }, renderDay ? renderDay(item) : `${item[viewMode]}${units[viewMode]}`)
+      );
+    };
+    const renderPanel = () => {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, panelDate[`${viewMode}s`].map((item, key) => /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-panel`, key }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-panel-title` }, item.year), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, item[`${viewMode}s`].map(
+        (item2, i2) => renderItem(item2, i2)
+      )))));
+    };
+    const renderContent = () => {
+      return /* @__PURE__ */ React.createElement(
+        components.ScrollView,
+        {
+          scrollTop,
+          scrollY: true,
+          className: `${classPrefix2}-content`,
+          onScroll: monthsViewScroll,
+          ref: monthsRef
+        },
+        /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-pannel`, ref: monthsPanel }, /* @__PURE__ */ React.createElement("div", { ref: viewAreaRef }, renderPanel()))
+      );
+    };
+    return /* @__PURE__ */ React.createElement("div", { className: classes, style }, renderHeader(), renderContent());
+  });
+  CalendarViewModeItem.displayName = "NutCalendarViewModeItem";
   const defaultProps$12 = {
     ...ComponentDefaults,
     type: "single",
+    viewMode: "day",
     autoBackfill: false,
     popup: true,
     visible: false,
     title: "",
+    value: "",
     defaultValue: "",
     startDate: getDateString(0),
     endDate: getDateString(365),
@@ -7020,6 +7463,7 @@
     confirmText: "",
     showTitle: true,
     showSubTitle: true,
+    showMonthNumber: false,
     scrollAnimation: true,
     firstDayOfWeek: 0,
     disableDate: (date2) => false,
@@ -7033,6 +7477,8 @@
     },
     onDayClick: (data) => {
     },
+    onItemClick: () => {
+    },
     onPageChange: (param) => {
     }
   };
@@ -7045,8 +7491,10 @@
       popup,
       visible,
       type: type2,
+      viewMode,
       autoBackfill,
       title,
+      value,
       defaultValue,
       startDate,
       endDate,
@@ -7056,6 +7504,7 @@
       confirmText,
       showTitle,
       showSubTitle,
+      showMonthNumber,
       scrollAnimation,
       firstDayOfWeek,
       closeIcon,
@@ -7068,6 +7517,7 @@
       onClose,
       onConfirm,
       onDayClick,
+      onItemClick,
       onPageChange
     } = { ...defaultProps$12, ...props };
     const calendarRef = React.useRef(null);
@@ -7081,9 +7531,6 @@
     const closePopup = () => {
       close2();
     };
-    const select = (param) => {
-      onDayClick && onDayClick(param);
-    };
     const scrollToDate = (date2) => {
       var _a;
       (_a = calendarRef.current) == null ? void 0 : _a.scrollToDate(date2);
@@ -7095,7 +7542,25 @@
       scrollToDate
     }));
     const renderItem = () => {
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, viewMode !== "day" ? /* @__PURE__ */ React.createElement(
+        CalendarViewModeItem,
+        {
+          ref: calendarRef,
+          style,
+          className,
+          type: type2,
+          viewMode,
+          title: title || locale.calendaritem.title,
+          value,
+          defaultValue,
+          startDate,
+          endDate,
+          showTitle,
+          scrollAnimation,
+          renderDay,
+          onItemClick
+        }
+      ) : /* @__PURE__ */ React.createElement(
         CalendarItem,
         {
           ref: calendarRef,
@@ -7115,6 +7580,7 @@
           confirmText: confirmText || locale.calendaritem.confirm,
           showTitle,
           showSubTitle,
+          showMonthNumber,
           scrollAnimation,
           firstDayOfWeek,
           disableDate,
@@ -7124,12 +7590,12 @@
           renderDayTop,
           renderDayBottom,
           onConfirm: choose,
-          onDayClick: select,
+          onDayClick,
           onPageChange: yearMonthChange
         }
-      );
+      ));
     };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, popup ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, popup && viewMode === "day" ? /* @__PURE__ */ React.createElement(
       Popup,
       {
         className: "nut-calendar-popup",
@@ -7137,11 +7603,11 @@
         position: "bottom",
         round: true,
         closeable: true,
+        closeIcon,
         destroyOnClose: true,
         onOverlayClick: closePopup,
         onCloseIconClick: closePopup,
-        style: { height: "83%" },
-        closeIcon
+        style: { height: "83%" }
       },
       renderItem()
     ) : renderItem());
@@ -12106,41 +12572,45 @@
       searchSelf && searchSelf.focus();
     };
     const change = (event) => {
-      if (value === event.target.value) return;
-      onChange && (onChange == null ? void 0 : onChange(event.target.value, event));
-      setValue(event.target.value);
-      event.target.value === "" && forceFocus();
+      if (value === event.detail.value) return;
+      onChange && (onChange == null ? void 0 : onChange(event.detail.value, event));
+      setValue(event.detail.value);
+      event.detail.value === "" && forceFocus();
     };
     const focus = (event) => {
-      const { value: value2 } = event.target;
+      const { value: value2 } = event.detail;
       onFocus && (onFocus == null ? void 0 : onFocus(value2, event));
     };
     const blur = (event) => {
       const searchSelf = searchRef.current;
       searchSelf && searchSelf.blur();
-      const { value: value2 } = event.target;
+      const { value: value2 } = event.detail;
       onBlur && (onBlur == null ? void 0 : onBlur(value2, event));
     };
     React.useEffect(() => {
       setValue(outerValue || "");
     }, [outerValue]);
     React.useEffect(() => {
-      autoFocus && forceFocus();
+      if (Taro.getEnv() === "WEB") {
+        autoFocus && forceFocus();
+      }
     }, [autoFocus]);
     const renderField = () => {
       return /* @__PURE__ */ React.createElement(
-        "input",
+        components.Input,
         {
           className: `${classPrefix2}-input ${clearable ? `${classPrefix2}-input-clear` : ""}`,
           ref: searchRef,
           style,
-          value: value || "",
+          value: (value || "").toString(),
           placeholder: placeholder || locale.placeholder,
-          disabled,
-          readOnly,
-          maxLength,
-          onKeyPress: onKeypress,
-          onChange: (e2) => change(e2),
+          disabled: disabled || readOnly,
+          maxlength: maxLength,
+          nativeProps: {
+            onKeyPress: onKeypress
+          },
+          autoFocus,
+          onInput: (e2) => change(e2),
           onFocus: (e2) => focus(e2),
           onBlur: (e2) => blur(e2),
           onClick: (e2) => clickInput(e2)
@@ -12152,23 +12622,23 @@
     };
     const renderLeftIn = () => {
       if (!leftIn) return null;
-      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-leftin ${classPrefix2}-icon` }, leftIn);
+      return /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-leftin ${classPrefix2}-icon` }, leftIn);
     };
     const renderLeft = () => {
       if (!backable && !left2) return null;
-      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-left` }, backable ? /* @__PURE__ */ React.createElement(j$1, { size: "16" }) : left2);
+      return /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-left` }, backable ? /* @__PURE__ */ React.createElement(j$1, { size: "16" }) : left2);
     };
     const renderRightIn = () => {
       if (!rightIn) return null;
-      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-rightin ${classPrefix2}-icon` }, rightIn);
+      return /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-rightin ${classPrefix2}-icon` }, rightIn);
     };
     const renderRight = () => {
       if (!right2) return null;
-      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-right` }, right2);
+      return /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-right` }, right2);
     };
     const handleClear = () => {
       return /* @__PURE__ */ React.createElement(
-        "div",
+        components.View,
         {
           className: `${classPrefix2}-clear  ${classPrefix2}-icon`,
           onClick: (e2) => clearaVal(e2)
@@ -12194,19 +12664,19 @@
       }
     };
     return /* @__PURE__ */ React.createElement(
-      "div",
+      components.View,
       {
         className: `${classPrefix2} ${disabled ? `${classPrefix2}-disabled` : ""}  ${className || ""}`,
         style
       },
       renderLeft(),
       /* @__PURE__ */ React.createElement(
-        "div",
+        components.View,
         {
           className: `${classPrefix2}-content ${shape === "round" ? `${classPrefix2}-round` : ""}`
         },
         renderLeftIn(),
-        /* @__PURE__ */ React.createElement("div", { className: "nut-searchbar-input-box" }, renderField()),
+        /* @__PURE__ */ React.createElement(components.View, { className: "nut-searchbar-input-box" }, renderField()),
         clearable && !value && renderRightIn(),
         clearable && value && handleClear()
       ),
@@ -13579,7 +14049,7 @@
     const stateRef = React.useRef(args);
     const currentRef = React.useRef();
     const previousRef = React.useRef();
-    if (!isequal(currentRef.current, args)) {
+    if (!isEqual$1(currentRef.current, args)) {
       previousRef.current = currentRef.current;
       currentRef.current = args;
       stateRef.current = args;
@@ -18005,18 +18475,6 @@
       }
     });
   };
-  const defaultConfigRef = {
-    current: {
-      locale: zhCN
-    }
-  };
-  const getDefaultConfig = () => {
-    return defaultConfigRef.current;
-  };
-  const ConfigContext = React.createContext(null);
-  const useConfig = () => {
-    return React.useContext(ConfigContext) ?? getDefaultConfig();
-  };
   const defaultProps$9 = {
     ...ComponentDefaults,
     visible: false,