@nutui/nutui-react 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("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.nutui = {}, global2.React, global2.ReactDOM));
 })(this, function(exports2, React, ReactDOM) {
   "use strict";/*!
-* @nutui/nutui-react v2.7.9 Fri Feb 21 2025 17:10:51 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.7.11 Fri Mar 28 2025 13:38:10 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -612,7 +612,7 @@
     style: {}
   };
   const prefixCls$2 = "nut-button";
-  const defaultProps$1t = {
+  const defaultProps$1u = {
     ...ComponentDefaults,
     color: "",
     type: "default",
@@ -648,7 +648,7 @@
         onClick,
         ...rest
       } = {
-        ...defaultProps$1t,
+        ...defaultProps$1u,
         ...props
       };
       const getStyle = React.useCallback(() => {
@@ -707,7 +707,7 @@
   );
   Button.displayName = "NutButton";
   const CellGroupContext = React.createContext(null);
-  const defaultProps$1s = {
+  const defaultProps$1t = {
     ...ComponentDefaults,
     title: "",
     description: "",
@@ -716,7 +716,7 @@
   const classPrefix$r = "nut-cell-group";
   const CellGroup = (props) => {
     const { children, className, title, description, divider, ...rest } = {
-      ...defaultProps$1s,
+      ...defaultProps$1t,
       ...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(
@@ -728,7 +728,7 @@
     ));
   };
   CellGroup.displayName = "NutCellGroup";
-  const defaultProps$1r = {
+  const defaultProps$1s = {
     ...ComponentDefaults,
     title: null,
     description: null,
@@ -755,7 +755,7 @@
       style,
       ...rest
     } = {
-      ...defaultProps$1r,
+      ...defaultProps$1s,
       ...props
     };
     const handleClick2 = (event) => {
@@ -1768,6 +1768,10 @@
       start: "开始",
       confirm: "确认",
       title: "日历选择",
+      week: "周",
+      month: "月",
+      year: "年",
+      quarter: "季度",
       monthTitle: (year, month) => `${year}年${Number(month) < 10 ? `0${Number(month)}` : month}月`,
       today: "今天",
       loadPreviousMonth: "加载上一个月",
@@ -1958,7 +1962,7 @@
   const pxCheck = (value) => {
     return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
   };
-  const defaultProps$1q = {
+  const defaultProps$1r = {
     ...ComponentDefaults,
     fit: "fill",
     position: "center",
@@ -1988,7 +1992,7 @@
       onClick,
       onLoad,
       onError
-    } = { ...defaultProps$1q, ...props };
+    } = { ...defaultProps$1r, ...props };
     const [innerLoading, setInnerLoading] = React.useState(false);
     const [isError, setIsError] = React.useState(false);
     const [complete, setComplete] = React.useState(false);
@@ -2851,7 +2855,7 @@
   };
   Overlay.displayName = "NutOverlay";
   const DataContext$1 = React.createContext({});
-  const defaultProps$1p = {
+  const defaultProps$1q = {
     ...ComponentDefaults,
     span: "24",
     offset: "0",
@@ -2859,7 +2863,7 @@
   };
   const Col = (props) => {
     const { className, style, span, offset, children, onClick } = {
-      ...defaultProps$1p,
+      ...defaultProps$1q,
       ...props
     };
     const [colName, setColName] = React.useState("");
@@ -2892,7 +2896,7 @@
     );
   };
   Col.displayName = "NutCol";
-  const defaultProps$1o = {
+  const defaultProps$1p = {
     ...ComponentDefaults,
     contentPosition: "center",
     direction: "horizontal"
@@ -2900,7 +2904,7 @@
   const classPrefix$n = `nut-divider`;
   const Divider = (props) => {
     const { children, contentPosition, style, className, direction, ...rest } = {
-      ...defaultProps$1o,
+      ...defaultProps$1p,
       ...props
     };
     const classes = direction === "horizontal" ? classNames({
@@ -2921,7 +2925,7 @@
     }
   };
   const GridContext = React.createContext(gridContext);
-  const defaultProps$1n = {
+  const defaultProps$1o = {
     text: "",
     columns: 4,
     gap: 0,
@@ -2946,7 +2950,7 @@
       onClick,
       ...rest
     } = {
-      ...defaultProps$1n,
+      ...defaultProps$1o,
       ...props
     };
     const classPrefix2 = "nut-grid-item";
@@ -3005,7 +3009,7 @@
     );
   };
   GridItem.displayName = "NutGridItem";
-  const defaultProps$1m = {
+  const defaultProps$1n = {
     columns: 4,
     gap: 0,
     center: true,
@@ -3026,7 +3030,7 @@
       className,
       onClick,
       ...rest
-    } = { ...defaultProps$1m, ...props };
+    } = { ...defaultProps$1n, ...props };
     const childrenDom = React.Children.toArray(children);
     const classPrefix2 = "nut-grid";
     const rootClass = () => {
@@ -3067,7 +3071,7 @@
   };
   Layout.displayName = "NutLayout";
   const classPrefix$m = "nut-row";
-  const defaultProps$1l = {
+  const defaultProps$1m = {
     ...ComponentDefaults,
     type: "",
     justify: "start",
@@ -3087,7 +3091,7 @@
       gutter,
       onClick
     } = {
-      ...defaultProps$1l,
+      ...defaultProps$1m,
       ...props
     };
     const getClass = (prefix2, type22) => {
@@ -3121,12 +3125,12 @@
   };
   Row.displayName = "NutRow";
   const prefixCls$1 = "nut-space";
-  const defaultProps$1k = {
+  const defaultProps$1l = {
     direction: "horizontal"
   };
   const Space = (props) => {
     const { className, style, children, wrap, align, direction, justify } = {
-      ...defaultProps$1k,
+      ...defaultProps$1l,
       ...props
     };
     const cls = classNames(
@@ -3194,7 +3198,7 @@
       stop2.current = true;
     };
   }
-  const defaultProps$1j = {
+  const defaultProps$1k = {
     ...ComponentDefaults,
     position: "top",
     threshold: 0,
@@ -3212,7 +3216,7 @@
       threshold,
       onChange,
       ...rest
-    } = { ...defaultProps$1j, ...props };
+    } = { ...defaultProps$1k, ...props };
     const stickyRef = React.useRef(null);
     const rootRef = React.useRef(null);
     const [isFixed, setIsFixed] = React.useState(false);
@@ -3336,7 +3340,7 @@
     );
   };
   SafeArea.displayName = "NutSafeArea";
-  const defaultProps$1i = {
+  const defaultProps$1j = {
     ...ComponentDefaults,
     target: "",
     threshold: 200,
@@ -3355,7 +3359,7 @@
       style,
       onClick
     } = {
-      ...defaultProps$1i,
+      ...defaultProps$1j,
       ...props
     };
     const classPrefix2 = "nut-backtop";
@@ -8248,7 +8252,7 @@
   });
   const animated = host.animated;
   const elevatorContext = React.createContext({});
-  const defaultProps$1h = {
+  const defaultProps$1i = {
     ...ComponentDefaults,
     height: "200px",
     floorKey: "title",
@@ -8274,7 +8278,7 @@
       children,
       ...rest
     } = {
-      ...defaultProps$1h,
+      ...defaultProps$1i,
       ...props
     };
     const classPrefix2 = "nut-elevator";
@@ -8452,7 +8456,7 @@
   };
   Elevator.displayName = "NutElevator";
   Elevator.Context = elevatorContext;
-  const defaultProps$1g = {
+  const defaultProps$1h = {
     ...ComponentDefaults,
     activeText: "",
     inactiveText: "",
@@ -8480,7 +8484,7 @@
       content,
       ...rest
     } = {
-      ...defaultProps$1g,
+      ...defaultProps$1h,
       ...props
     };
     const classPrefix2 = "nut-fixednav";
@@ -8533,7 +8537,7 @@
     );
   };
   FixedNav.displayName = "NutFixedNav";
-  const defaultProps$1f = {
+  const defaultProps$1g = {
     ...ComponentDefaults,
     left: "",
     right: "",
@@ -8558,7 +8562,7 @@
       zIndex,
       onBackClick
     } = {
-      ...defaultProps$1f,
+      ...defaultProps$1g,
       ...props
     };
     const classPrefix2 = "nut-navbar";
@@ -8634,7 +8638,7 @@
     return /* @__PURE__ */ React.createElement(React.Fragment, null, safeAreaInsetTop && /* @__PURE__ */ React.createElement(SafeArea, { position: "top" }), fixed && placeholder ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
   };
   NavBar.displayName = "NutNavBar";
-  const defaultProps$1e = {
+  const defaultProps$1f = {
     ...ComponentDefaults,
     position: "center",
     transition: "",
@@ -8687,7 +8691,7 @@
       afterShow,
       afterClose,
       onClick
-    } = { ...defaultProps$1e, ...props };
+    } = { ...defaultProps$1f, ...props };
     const nodeRef = React.useRef(null);
     let innerIndex = zIndex || _zIndex;
     const [index, setIndex] = React.useState(innerIndex);
@@ -8844,7 +8848,7 @@
     }
   };
   const OffsetContext = React.createContext(20);
-  const defaultProps$1d = {
+  const defaultProps$1e = {
     ...ComponentDefaults,
     position: "left",
     width: "80%"
@@ -8862,7 +8866,7 @@
       indent,
       ...rest
     } = {
-      ...defaultProps$1d,
+      ...defaultProps$1e,
       ...props
     };
     const innerIndent = indent ? Number(indent) : 20;
@@ -8912,13 +8916,13 @@
       title
     );
   };
-  const defaultProps$1c = {
+  const defaultProps$1d = {
     open: true
   };
   const SubSideNavBar = (props) => {
     const classPrefix2 = "nut-subsidenavbar";
     const { title, value, children, onClick, open, ...rest } = {
-      ...defaultProps$1c,
+      ...defaultProps$1d,
       ...props
     };
     const offset = React.useContext(OffsetContext);
@@ -8995,7 +8999,7 @@
     );
     return [stateRef.current, setState];
   }
-  const defaultProps$1b = {
+  const defaultProps$1c = {
     ...ComponentDefaults,
     value: "",
     dot: false,
@@ -9020,7 +9024,7 @@
       color,
       fill
     } = {
-      ...defaultProps$1b,
+      ...defaultProps$1c,
       ...props
     };
     const classPrefix2 = "nut-badge";
@@ -9074,7 +9078,7 @@
   };
   Badge.displayName = "NutBadge";
   const TabbarContext = React.createContext(null);
-  const defaultProps$1a = {
+  const defaultProps$1b = {
     ...ComponentDefaults,
     title: "",
     icon: null,
@@ -9100,7 +9104,7 @@
       index,
       ...rest
     } = {
-      ...defaultProps$1a,
+      ...defaultProps$1b,
       ...props
     };
     const active = index === (ctx2 == null ? void 0 : ctx2.selectIndex);
@@ -9138,7 +9142,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$19 = {
+  const defaultProps$1a = {
     ...ComponentDefaults,
     defaultValue: 0,
     fixed: false,
@@ -9161,7 +9165,7 @@
       style,
       onSwitch
     } = {
-      ...defaultProps$19,
+      ...defaultProps$1a,
       ...props
     };
     const classPrefix2 = "nut-tabbar";
@@ -9203,14 +9207,14 @@
   };
   Tabbar.displayName = "NutTabbar";
   Tabbar.Item = TabbarItem;
-  const defaultProps$18 = {
+  const defaultProps$19 = {
     title: "",
     value: "",
     disabled: false
   };
   const TabPane = (props) => {
     const { children, autoHeightClassName, className, disabled } = {
-      ...defaultProps$18,
+      ...defaultProps$19,
       ...props
     };
     const classPrefix2 = "nut-tabpane";
@@ -9224,7 +9228,7 @@
     );
     return children && /* @__PURE__ */ React.createElement("div", { className: classes }, !disabled && children);
   };
-  const defaultProps$17 = {
+  const defaultProps$18 = {
     ...ComponentDefaults,
     tabStyle: {},
     activeColor: "",
@@ -9252,7 +9256,7 @@
       value: outerValue,
       defaultValue: outerDefaultValue,
       ...rest
-    } = { ...defaultProps$17, ...props };
+    } = { ...defaultProps$18, ...props };
     const [value, setValue] = usePropsValue({
       value: outerValue,
       defaultValue: outerDefaultValue,
@@ -9533,7 +9537,7 @@
       return pathNodes;
     }
   }
-  const defaultProps$16 = {
+  const defaultProps$17 = {
     ...ComponentDefaults,
     activeColor: "",
     activeIcon: "checklist",
@@ -9579,7 +9583,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);
@@ -9889,7 +9893,7 @@
   };
   const Cascader = React.forwardRef(InternalCascader);
   Cascader.displayName = "NutCascader";
-  const defaultProps$15 = {
+  const defaultProps$16 = {
     ...ComponentDefaults,
     visible: false,
     type: "custom",
@@ -9916,7 +9920,7 @@
       onPathChange,
       ...rest
     } = {
-      ...defaultProps$15,
+      ...defaultProps$16,
       ...props
     };
     return /* @__PURE__ */ React.createElement(React.Fragment, null, type === "custom" && /* @__PURE__ */ React.createElement(
@@ -9941,7 +9945,7 @@
       }
     ));
   };
-  const defaultProps$14 = {
+  const defaultProps$15 = {
     type: "custom",
     existList: [],
     defaultIcon: null,
@@ -9960,7 +9964,7 @@
       onSelect,
       onSwitch,
       ...rest
-    } = { ...defaultProps$14, ...props };
+    } = { ...defaultProps$15, ...props };
     const classPrefix2 = "nut-address";
     const selectedExist = (item) => {
       existList.forEach((list, index) => {
@@ -9989,7 +9993,7 @@
       );
     })), (custom || custom && locale.address.chooseAnotherAddress) && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer`, onClick }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-btn` }, custom)));
   };
-  const defaultProps$13 = {
+  const defaultProps$14 = {
     ...ComponentDefaults,
     defaultValue: [],
     type: "custom",
@@ -10031,7 +10035,7 @@
       onSwitch,
       ...rest
     } = {
-      ...defaultProps$13,
+      ...defaultProps$14,
       ...props
     };
     const classPrefix2 = "nut-address";
@@ -10188,33 +10192,6 @@
     const endTime = new Date(date22.replace(/-/g, "/")).getTime();
     return startTime === endTime;
   };
-  const getWeekDate = (year, month, date, firstDayOfWeek = 0) => {
-    const dateNow = new Date(Number(year), parseInt(month) - 1, Number(date));
-    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 = (date) => {
-    const [year, month, day] = [...date.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 = (type, year, month) => {
     {
       month === 12 && (year += 1);
@@ -10256,6 +10233,74 @@
     });
     return months.slice(preDates - days);
   };
+  const getWeekDate = (year, month, date, firstDayOfWeek = 0) => {
+    const dateNow = new Date(Number(year), parseInt(month) - 1, Number(date));
+    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 = (date) => {
+    const [year, month, day] = [...date.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, date, firstDayOfWeek = 0) => {
+    const MILLISECONDS_PER_DAY = 864e5;
+    const dateNow = new Date(year, month - 1, date);
+    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 = (date) => {
     const split = date.indexOf("-") !== -1 ? "-" : "/";
     return date.split(split);
@@ -10284,7 +10329,89 @@
   const isStartAndEnd = (days) => {
     return days.length >= 2 && isEqual(days[0], days[1]);
   };
-  const defaultProps$12 = {
+  const getPreMonths = (type, 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
+      };
+    });
+    return months;
+  };
+  const getMonths = (type, 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
+      };
+    });
+    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 = (type, 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
+      });
+    }
+    return quarters;
+  };
+  const getPreQuarters = (type, 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
+      });
+    }
+    return quarters;
+  };
+  const getNextQuarters = (type, 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
+      });
+    }
+    return quarters;
+  };
+  const defaultProps$13 = {
     ...ComponentDefaults,
     type: "single",
     autoBackfill: false,
@@ -10298,6 +10425,7 @@
     confirmText: "",
     showTitle: true,
     showSubTitle: true,
+    showMonthNumber: false,
     scrollAnimation: true,
     firstDayOfWeek: 0,
     disableDate: (date) => false,
@@ -10324,6 +10452,7 @@
       type,
       autoBackfill,
       title,
+      value,
       defaultValue,
       startDate,
       endDate,
@@ -10333,6 +10462,7 @@
       confirmText,
       showTitle,
       showSubTitle,
+      showMonthNumber,
       scrollAnimation,
       firstDayOfWeek,
       disableDate,
@@ -10341,12 +10471,11 @@
       renderDay,
       renderDayTop,
       renderDayBottom,
-      value,
       onConfirm,
       onUpdate,
       onDayClick,
       onPageChange
-    } = { ...defaultProps$12, ...props };
+    } = { ...defaultProps$13, ...props };
     const classPrefix2 = "nut-calendar";
     const dayPrefix = "nut-calendar-day";
     const weekdays = locale.calendaritem.weekdays;
@@ -10371,7 +10500,7 @@
       if (defaultValue || Array.isArray(defaultValue) && defaultValue.length > 0) {
         return type !== "single" ? [...defaultValue] : defaultValue;
       }
-      return void 0;
+      return type === "single" ? "" : [];
     };
     const [currentDate, setCurrentDate] = usePropsValue({
       value,
@@ -10397,15 +10526,16 @@
           ...getPreMonthDates("prev", y, m2, firstDayOfWeek),
           ...getDaysStatus("active", y, m2)
         ];
-        const cssHeight = 39 + (days.length > 35 ? 384 : 320);
         let scrollTop = 0;
         if (monthData.length > 0) {
           const monthEle = monthData[monthData.length - 1];
           scrollTop = monthEle.scrollTop + monthEle.cssHeight;
         }
+        const cssHeight = 39 + (days.length > 35 ? 384 : 320);
         const monthInfo = {
           curData: date,
           title: monthTitle(y, m2),
+          weekNo: getWeekNosOfYear(y, m2, firstDayOfWeek),
           monthData: days,
           cssHeight,
           scrollTop
@@ -10427,7 +10557,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) => {
@@ -10531,9 +10661,7 @@
         const index = monthsData.findIndex((item) => {
           return +item.curData[0] === year && +item.curData[1] === month;
         });
-        if (index > -1) {
-          current = index;
-        }
+        if (index > -1) current = index;
       }
       return {
         current,
@@ -10588,12 +10716,8 @@
     const getMonthNum = () => {
       let monthNum = Number(endDates[1]) - Number(startDates[1]);
       const yearNum = Number(endDates[0]) - Number(startDates[0]);
-      if (yearNum > 0) {
-        monthNum += 12 * yearNum;
-      }
-      if (monthNum <= 0) {
-        monthNum = 1;
-      }
+      if (yearNum > 0) monthNum += 12 * yearNum;
+      if (monthNum <= 0) monthNum = 1;
       setMonthsNum(monthNum);
       return monthNum;
     };
@@ -10616,7 +10740,7 @@
       initData();
     };
     React.useEffect(() => {
-      setCurrentDate(resetDefaultValue() || []);
+      setCurrentDate(resetDefaultValue());
     }, [defaultValue]);
     React.useEffect(() => {
       popup && resetRender();
@@ -10769,7 +10893,7 @@
         state.currDateArray = [...days];
       }
       if (!isFirst) {
-        onDayClick && onDayClick(state.currDateArray);
+        onDayClick == null ? void 0 : onDayClick(state.currDateArray);
         if (autoBackfill || !popup) {
           confirm2();
         }
@@ -10779,9 +10903,9 @@
     const confirm2 = () => {
       if (type === "range" && state.currDateArray.length === 2 || type !== "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();
         }
       }
     };
@@ -10804,7 +10928,14 @@
       return currentDate.length >= 2 && (type === "range" || type === "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);
@@ -10813,7 +10944,7 @@
       return /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: [`${classPrefix2}-day`, getClasses(day, month)].join(" "),
+          className: classNames("nut-calendar-day", getClasses(day, month)),
           onClick: () => handleDayClick(day, month, false),
           key: index
         },
@@ -10824,7 +10955,11 @@
         startTip && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: `${classPrefix2}-day-info ${isStartAndEnd(currentDate) ? `${classPrefix2}-day-info-top` : ""}`
+            className: classNames("nut-calendar-day-info", {
+              "nut-calendar-day-info-top": isStartAndEnd(
+                currentDate
+              )
+            })
           },
           startText || locale.calendaritem.start
         ),
@@ -10832,9 +10967,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(
@@ -10847,7 +10982,6 @@
         /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-pannel`, ref: monthsPanel }, /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: "viewArea",
             ref: viewAreaRef,
             style: { transform: `translateY(${translateY}px)` }
           },
@@ -10863,13 +10997,295 @@
     return /* @__PURE__ */ React.createElement("div", { className: classes, style }, renderHeader(), renderContent(), popup && !autoBackfill ? renderFooter() : "");
   });
   CalendarItem.displayName = "NutCalendarItem";
+  const YearMonthPanelHeight = 231;
+  const YearQuarterPanelHeight = 103;
+  const defaultProps$12 = {
+    ...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$12, ...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 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(() => {
+              if (monthsRef && monthsPanel && viewAreaRef) {
+                getMonthsRef().clientHeight;
+                getMonthsPanel().style.height = `${containerHeight}px`;
+                getMonthsRef().scrollTop = panelDate.months[currentIndex].scrollTop;
+              }
+            });
+          }
+          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(() => {
+              if (monthsRef && monthsPanel && viewAreaRef) {
+                getMonthsRef().clientHeight;
+                getMonthsPanel().style.height = `${containerHeight}px`;
+                getMonthsRef().scrollTop = panelDate.quarters[currentIndex].scrollTop;
+              }
+            });
+          }
+          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, scrollTop) => {
+        panelData.push({
+          year,
+          months,
+          scrollTop,
+          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 scrollTop = panelData.length * YearMonthPanelHeight;
+        const startMonths = [
+          ...getPreMonths("prev", startYear, startMonth),
+          ...getMonths("curr", startYear, startMonth)
+        ];
+        addPanelData(startYear, startMonths, scrollTop);
+        for (let i2 = startYear + 1; i2 < endYear; i2++) {
+          scrollTop = panelData.length * YearMonthPanelHeight;
+          const midMonths = [...getMonths("curr", i2, 1)];
+          addPanelData(i2, midMonths, scrollTop);
+        }
+        const lastMonths = [
+          ...getPreMonths("curr", endYear, endMonth + 1),
+          ...getMonths("next", endYear, endMonth + 1)
+        ];
+        scrollTop = panelData.length * YearMonthPanelHeight;
+        addPanelData(endYear, lastMonths, scrollTop);
+      }
+      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, scrollTop) => {
+        panelData.push({
+          year,
+          quarters,
+          scrollTop,
+          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 scrollTop = panelData.length * YearQuarterPanelHeight;
+        const startQuarters = [
+          ...getPreQuarters("prev", startYear, startMonth),
+          ...getQuarters("curr", startYear, startMonth)
+        ];
+        addPanelData(startYear, startQuarters, scrollTop);
+        for (let i2 = startYear + 1; i2 < endYear; i2++) {
+          scrollTop = panelData.length * YearQuarterPanelHeight;
+          const midQuarters = [...getQuarters("curr", i2, 1)];
+          addPanelData(i2, midQuarters, scrollTop);
+        }
+        const lastQuarters = [
+          ...getQuarters("curr", endYear, 1, endMonth),
+          ...getNextQuarters("next", endYear, endMonth)
+        ];
+        scrollTop = panelData.length * YearQuarterPanelHeight;
+        addPanelData(endYear, lastQuarters, scrollTop);
+      }
+      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 handleItemClick = (item) => {
+      if (item.type !== "curr") return;
+      const val = viewMode === "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(
+        "div",
+        {
+          className: classNames({
+            [`${classPrefix2}-header`]: true
+          })
+        },
+        /* @__PURE__ */ React.createElement("div", { 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(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("div", { className: `${classPrefix2}-content`, 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$11 = {
     ...ComponentDefaults,
     type: "single",
+    viewMode: "day",
     autoBackfill: false,
     popup: true,
     visible: false,
     title: "",
+    value: "",
     defaultValue: "",
     startDate: getDateString(0),
     endDate: getDateString(365),
@@ -10879,6 +11295,7 @@
     confirmText: "",
     showTitle: true,
     showSubTitle: true,
+    showMonthNumber: false,
     scrollAnimation: true,
     firstDayOfWeek: 0,
     disableDate: (date) => false,
@@ -10892,6 +11309,8 @@
     },
     onDayClick: (data) => {
     },
+    onItemClick: () => {
+    },
     onPageChange: (param) => {
     }
   };
@@ -10904,8 +11323,10 @@
       popup,
       visible,
       type,
+      viewMode,
       autoBackfill,
       title,
+      value,
       defaultValue,
       startDate,
       endDate,
@@ -10915,6 +11336,7 @@
       confirmText,
       showTitle,
       showSubTitle,
+      showMonthNumber,
       scrollAnimation,
       firstDayOfWeek,
       closeIcon,
@@ -10927,6 +11349,7 @@
       onClose,
       onConfirm,
       onDayClick,
+      onItemClick,
       onPageChange
     } = { ...defaultProps$11, ...props };
     const calendarRef = React.useRef(null);
@@ -10940,9 +11363,6 @@
     const closePopup = () => {
       close();
     };
-    const select = (param) => {
-      onDayClick && onDayClick(param);
-    };
     const scrollToDate = (date) => {
       var _a;
       (_a = calendarRef.current) == null ? void 0 : _a.scrollToDate(date);
@@ -10954,7 +11374,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,
+          viewMode,
+          title: title || locale.calendaritem.title,
+          value,
+          defaultValue,
+          startDate,
+          endDate,
+          showTitle,
+          scrollAnimation,
+          renderDay,
+          onItemClick
+        }
+      ) : /* @__PURE__ */ React.createElement(
         CalendarItem,
         {
           ref: calendarRef,
@@ -10975,6 +11413,7 @@
           confirmText: confirmText || locale.calendaritem.confirm,
           showTitle,
           showSubTitle,
+          showMonthNumber,
           scrollAnimation,
           firstDayOfWeek,
           disableDate,
@@ -10983,12 +11422,12 @@
           renderDayTop,
           renderDayBottom,
           onConfirm: choose,
-          onDayClick: select,
+          onDayClick: (param) => onDayClick && onDayClick(param),
           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",