@nutui/nutui-react 2.7.8 → 2.7.10

package/CHANGELOG.md

@@ -1,12 +1,28 @@
-# v2.7.8
-`2025-02-14`
+# v2.7.10
+`2025-03-14`
+
+
+* :sparkles: feat(calendar): add viewmode (#2985)
+* :bug: fix(calendar): defaultvalue 为空时,渲染异常 (#3015)
+* :bug: fix(tabs): 修复tabs数量过多时的滚动操作bug (#3014)
+
 
+# v2.7.9
 
-* 📖 docs(configprovider): 优化文档中的主题配置描述 (#2959)
-* :bug: fix: next ci failed (#2970)
-* zap: perf: animate (#2969)
-* 🪵 refactor: calendar (#2983)
+`2025-02-21`
+
+- :bug: fix(swiper): 设置横向轮播后，手势无法触发页面的滚动 (#3003)
+- 🪵 refactor: use compatible systemInfo util API (#2995)
+- 📖 docs(loading): 主题变量修正 (#3008)
+
+# v2.7.8
+
+`2025-02-14`
 
+- 📖 docs(configprovider): 优化文档中的主题配置描述 (#2959)
+- :bug: fix: next ci failed (#2970)
+- zap: perf: animate (#2969)
+- 🪵 refactor: calendar (#2983)
 
 # v2.7.7
 

package/dist/esm/Calendar/style/index.js

@@ -1,2 +1,4 @@
-import '../../Popup/style'
+import '../../Popup/style'
+import'../../../packages/calendar/calendarviewmode.scss';
+
 import '../../../packages/calendar/calendar.scss'

package/dist/esm/Calendar/style/style.css

@@ -1 +1 @@
-.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, .7)));z-index:var(--nutui-overlay-zIndex, 1000)}.nut-overlay .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-7, #1a1a1a))}[dir=rtl] .nut-overlay,.nut-rtl .nut-overlay{left:auto;right:0}.nut-overflow-hidden{overflow:hidden!important}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-overlay-slide-enter-active,.nut-overlay-slide-appear-active{animation-fill-mode:both;animation-name:nut-fade-in;animation-duration:var(--nutui-overlay-animation-duration, .3s)}.nut-overlay-slide-exit-active{animation-fill-mode:both;animation-name:nut-fade-out;animation-duration:var(--nutui-overlay-animation-duration, .3s)}.nut-popup{position:fixed;min-height:26%;max-height:100%;overflow-y:auto;background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));color:var(--nutui-gray-7, #1a1a1a);-webkit-overflow-scrolling:touch;font-size:var(--nutui-font-size-3, 14px)}.nut-popup-title{display:flex;align-items:center;justify-content:center;border-bottom:var(--nutui-popup-title-border-bottom, 0);padding:var(--nutui-popup-title-padding, 16px);position:relative}.nut-popup-title-left{position:absolute;left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-title{font-weight:var(--nutui-font-weight-bold, 500);font-size:var(--nutui-popup-title-font-size, var(--nutui-font-size-5, 18px))}.nut-popup-title-description{color:var(--nutui-gray-5, #8c8c8c);font-size:var(--nutui-popup-description-font-size, var(--nutui-font-size-1, 10px));font-weight:var(--nutui-font-weight, 400)}.nut-popup-title-right{position:absolute!important;z-index:1;cursor:pointer;width:var(--nutui-popup-icon-size, var(--nutui-font-size-5, 18px));height:var(--nutui-popup-icon-size, var(--nutui-font-size-5, 18px));display:flex;justify-content:center;align-items:center;top:var(--nutui-popup-title-padding, 16px);right:var(--nutui-popup-title-padding, 16px);color:var(--nutui-gray-5, #8c8c8c)}.nut-popup-title-right:active{opacity:.7}.nut-popup-title-right-top-left{top:var(--nutui-popup-title-padding, 16px);left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-right-bottom-left{bottom:var(--nutui-popup-title-padding, 16px);left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-right-bottom-right{right:var(--nutui-popup-title-padding, 16px);bottom:var(--nutui-popup-title-padding, 16px)}.nut-popup-center{top:50%;left:50%;min-height:10%;transform:translate(-50%,-50%)}.nut-popup-center.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom,.nut-popup-top{max-height:83%}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.nut-popup-round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.nut-popup-round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-default-exit-done.nut-popup,.nut-popup-slide-center-exit-done.nut-popup,.nut-popup-slide-left-exit-done.nut-popup,.nut-popup-slide-right-exit-done.nut-popup,.nut-popup-slide-top-exit-done.nut-popup,.nut-popup-slide-bottom-exit-done.nut-popup{display:none}.nut-popup .nut-overflow-hidden{overflow:hidden!important}[dir=rtl] .nut-popup-title-left,.nut-rtl .nut-popup-title-left{left:auto;right:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right,.nut-rtl .nut-popup-title-right{right:auto;left:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right-top-left,.nut-rtl .nut-popup-title-right-top-left,[dir=rtl] .nut-popup-title-right-bottom-left,.nut-rtl .nut-popup-title-right-bottom-left{left:auto;right:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right-bottom-right,.nut-rtl .nut-popup-title-right-bottom-right{right:auto;left:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,.nut-rtl .nut-popup-title .nut-icon-ArrowLeft{transform:rotate(180deg)}[dir=rtl] .nut-popup-center,.nut-rtl .nut-popup-center{left:auto;right:50%;transform:translate(50%,-50%)}[dir=rtl] .nut-popup-bottom,.nut-rtl .nut-popup-bottom,[dir=rtl] .nut-popup-top,.nut-rtl .nut-popup-top{left:auto;right:0}.nut-calendar{position:relative;display:flex;flex-direction:column;flex:1;font-size:var(--nutui-calendar-base-font-size, var(--nutui-font-size-4, 16px));background-color:var(--nutui-gray-1, #ffffff);color:var(--nutui-gray-7, #1a1a1a);overflow:hidden;height:100%}.nut-calendar.nut-calendar-title .nut-calendar-header .calendar-title{font-size:var(--nutui-calendar-base-font-size, var(--nutui-font-size-4, 16px))}.nut-calendar .nut-calendar-taro{height:60vh}.nut-calendar .popup-box{height:100%}.nut-calendar ::-webkit-scrollbar{display:none}.nut-calendar-header{display:flex;flex-direction:column;text-align:center}.nut-calendar-title{color:var(--nutui-gray-7, #1a1a1a);font-size:var(--nutui-calendar-title-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-calendar-title-font-weight, var(--nutui-font-weight-bold, 500));line-height:50px}.nut-calendar-sub-title{padding:7px 0;line-height:22px;font-size:var(--nutui-calendar-sub-title-font-size, var(--nutui-font-size-3, 14px))}.nut-calendar-header-buttons{height:var(--nutui-calendar-header-height, 24px)}.nut-calendar-weeks{display:flex;align-items:center;justify-content:space-around;height:36px;border-radius:0 0 12px 12px;box-shadow:0 4px 10px #0000000f}.nut-calendar-week-item:first-of-type,.nut-calendar-week-item:last-of-type{color:var(--nutui-color-primary, #fa2c19)}.nut-calendar-content{flex:1;width:100%;display:block;overflow-y:auto}.nut-calendar-pannel{position:relative;width:100%;height:auto;display:block;box-sizing:border-box}.nut-calendar-pannel .calendar-loading-tip{height:50px;line-height:50px;text-align:center;position:absolute;top:-50px;left:0;right:0;font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-gray-6, #595959)}.nut-calendar-month{display:flex;flex-direction:column;text-align:center}.nut-calendar-month-title{height:23px;line-height:23px;margin:8px 0}.nut-calendar-days{overflow:hidden}.nut-calendar-day{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;float:left;width:var(--nutui-calendar-day-width, 14.28%);height:var(--nutui-calendar-day-height, 60px);font-weight:var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold, 500));margin-bottom:4px}.nut-calendar-day:nth-child(7n),.nut-calendar-day:nth-child(7n+1){color:var(--nutui-color-primary, #fa2c19)}.nut-calendar-day-info-curr,.nut-calendar-day-info{position:absolute;bottom:5px;width:100%;font-size:12px;line-height:14px}.nut-calendar-day-info-top{position:absolute;width:100%;top:5px}.nut-calendar-day-info-bottom{position:absolute;width:100%;bottom:5px}.nut-calendar-day-active{background-color:var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #fa2c19));color:var(--nutui-color-primary-text, #ffffff)!important;border-radius:var(--nutui-calendar-day-active-border-radius, 4px)}.nut-calendar-day-active.active-start{border-radius:0;border-top-left-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-left-radius:var(--nutui-calendar-day-active-border-radius, 4px)}.nut-calendar-day-active.active-end{border-radius:0;border-top-right-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-right-radius:var(--nutui-calendar-day-active-border-radius, 4px)}.nut-calendar-day-active .nut-calendar-day-info{color:var(--nutui-color-primary-text, #ffffff)}.nut-calendar-day-disabled{color:var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #bfbfbf))!important}.nut-calendar-day-disabled .nut-calendar-day-info-curr{display:none}.nut-calendar-day-choose{background-color:var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light, #ffeae8));color:var(--nutui-calendar-choose-color, var(--nutui-color-primary, #fa2c19))}.nut-calendar-day-choose-disabled{background-color:var(--nutui-calendar-choose-disable-background-color, rgba(191, 191, 191, .09));color:var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #bfbfbf))!important}.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr{display:none}.nut-calendar-footer{display:flex;width:100%;flex-direction:column;background-color:#fff}.nut-calendar-footer .calendar-confirm-btn{height:44px;margin:10px 18px;border-radius:22px;background:linear-gradient(135deg,var(--nutui-color-primary-stop-1, #f53d4d) 0%,var(--nutui-color-primary-stop-2, #fa2c19) 100%);color:var(--nutui-color-primary-text, #ffffff);text-align:center;line-height:44px}.nut-calendar-popup .nut-popup-title-right{top:7px!important}[dir=rtl] .nut-calendar-day,.nut-rtl .nut-calendar-day{float:right}[dir=rtl] .nut-calendar-day-active.active-start,.nut-rtl .nut-calendar-day-active.active-start{border-top-left-radius:0;border-top-right-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-left-radius:0;border-bottom-right-radius:var(--nutui-calendar-day-active-border-radius, 4px)}[dir=rtl] .nut-calendar-day-active.active-end,.nut-rtl .nut-calendar-day-active.active-end{border-top-right-radius:0;border-top-left-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-right-radius:0;border-bottom-left-radius:var(--nutui-calendar-day-active-border-radius, 4px)}
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, .7)));z-index:var(--nutui-overlay-zIndex, 1000)}.nut-overlay .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-7, #1a1a1a))}[dir=rtl] .nut-overlay,.nut-rtl .nut-overlay{left:auto;right:0}.nut-overflow-hidden{overflow:hidden!important}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-overlay-slide-enter-active,.nut-overlay-slide-appear-active{animation-fill-mode:both;animation-name:nut-fade-in;animation-duration:var(--nutui-overlay-animation-duration, .3s)}.nut-overlay-slide-exit-active{animation-fill-mode:both;animation-name:nut-fade-out;animation-duration:var(--nutui-overlay-animation-duration, .3s)}.nut-popup{position:fixed;min-height:26%;max-height:100%;overflow-y:auto;background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));color:var(--nutui-gray-7, #1a1a1a);-webkit-overflow-scrolling:touch;font-size:var(--nutui-font-size-3, 14px)}.nut-popup-title{display:flex;align-items:center;justify-content:center;border-bottom:var(--nutui-popup-title-border-bottom, 0);padding:var(--nutui-popup-title-padding, 16px);position:relative}.nut-popup-title-left{position:absolute;left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-title{font-weight:var(--nutui-font-weight-bold, 500);font-size:var(--nutui-popup-title-font-size, var(--nutui-font-size-5, 18px))}.nut-popup-title-description{color:var(--nutui-gray-5, #8c8c8c);font-size:var(--nutui-popup-description-font-size, var(--nutui-font-size-1, 10px));font-weight:var(--nutui-font-weight, 400)}.nut-popup-title-right{position:absolute!important;z-index:1;cursor:pointer;width:var(--nutui-popup-icon-size, var(--nutui-font-size-5, 18px));height:var(--nutui-popup-icon-size, var(--nutui-font-size-5, 18px));display:flex;justify-content:center;align-items:center;top:var(--nutui-popup-title-padding, 16px);right:var(--nutui-popup-title-padding, 16px);color:var(--nutui-gray-5, #8c8c8c)}.nut-popup-title-right:active{opacity:.7}.nut-popup-title-right-top-left{top:var(--nutui-popup-title-padding, 16px);left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-right-bottom-left{bottom:var(--nutui-popup-title-padding, 16px);left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-right-bottom-right{right:var(--nutui-popup-title-padding, 16px);bottom:var(--nutui-popup-title-padding, 16px)}.nut-popup-center{top:50%;left:50%;min-height:10%;transform:translate(-50%,-50%)}.nut-popup-center.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom,.nut-popup-top{max-height:83%}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.nut-popup-round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.nut-popup-round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-default-exit-done.nut-popup,.nut-popup-slide-center-exit-done.nut-popup,.nut-popup-slide-left-exit-done.nut-popup,.nut-popup-slide-right-exit-done.nut-popup,.nut-popup-slide-top-exit-done.nut-popup,.nut-popup-slide-bottom-exit-done.nut-popup{display:none}.nut-popup .nut-overflow-hidden{overflow:hidden!important}[dir=rtl] .nut-popup-title-left,.nut-rtl .nut-popup-title-left{left:auto;right:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right,.nut-rtl .nut-popup-title-right{right:auto;left:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right-top-left,.nut-rtl .nut-popup-title-right-top-left,[dir=rtl] .nut-popup-title-right-bottom-left,.nut-rtl .nut-popup-title-right-bottom-left{left:auto;right:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right-bottom-right,.nut-rtl .nut-popup-title-right-bottom-right{right:auto;left:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,.nut-rtl .nut-popup-title .nut-icon-ArrowLeft{transform:rotate(180deg)}[dir=rtl] .nut-popup-center,.nut-rtl .nut-popup-center{left:auto;right:50%;transform:translate(50%,-50%)}[dir=rtl] .nut-popup-bottom,.nut-rtl .nut-popup-bottom,[dir=rtl] .nut-popup-top,.nut-rtl .nut-popup-top{left:auto;right:0}.nut-calendar-viewmode{position:relative;display:flex;flex-direction:column;flex:1;font-size:var(--nutui-calendar-base-font-size, var(--nutui-font-size-4, 16px));background-color:var(--nutui-gray-1, #ffffff);color:var(--nutui-gray-7, #1a1a1a);overflow:hidden;height:100%}.nut-calendar-viewmode.nut-calendar-title .nut-calendar-header .calendar-title{font-size:var(--nutui-calendar-base-font-size, var(--nutui-font-size-4, 16px))}.nut-calendar-viewmode .nut-calendar-taro{height:60vh}.nut-calendar-viewmode .popup-box{height:100%}.nut-calendar-viewmode ::-webkit-scrollbar{display:none}.nut-calendar-viewmode-header{display:flex;flex-direction:column;text-align:center}.nut-calendar-viewmode-title{color:var(--nutui-gray-7, #1a1a1a);font-size:var(--nutui-calendar-title-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-calendar-title-font-weight, var(--nutui-font-weight-bold, 500));line-height:50px}.nut-calendar-viewmode-sub-title{padding:7px 0;line-height:22px;font-size:var(--nutui-calendar-sub-title-font-size, var(--nutui-font-size-3, 14px))}.nut-calendar-viewmode-content{flex:1;width:100%;display:block;overflow-y:auto}.nut-calendar-viewmode-pannel{position:relative;width:100%;height:auto;display:block;box-sizing:border-box}.nut-calendar-viewmode-pannel .calendar-loading-tip{height:50px;line-height:50px;text-align:center;position:absolute;top:-50px;left:0;right:0;font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-gray-6, #595959)}.nut-calendar-viewmode-panel{display:flex;flex-direction:column;text-align:center}.nut-calendar-viewmode-panel-title{height:23px;line-height:23px;margin:8px 0}.nut-calendar-viewmode-item{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;float:left;width:var(--nutui-calendar-panel-item-width, 24.85%);height:var(--nutui-calendar-day-height, 60px);font-weight:var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold, 500));margin-bottom:4px}.nut-calendar-viewmode-item-info-curr,.nut-calendar-viewmode-item-info{position:absolute;bottom:5px;width:100%;font-size:var(--nutui-font-size-2, 12px);line-height:14px}.nut-calendar-viewmode-item.active{background-color:var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #fa2c19));color:var(--nutui-color-primary-text, #ffffff)!important;border-radius:var(--nutui-calendar-day-active-border-radius, 4px)}.nut-calendar-viewmode-item.active .nut-calendar-day-info{color:var(--nutui-color-primary-text, #ffffff)}.nut-calendar-viewmode-item-prev,.nut-calendar-viewmode-item-next{color:var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #bfbfbf))!important}.nut-calendar-viewmode-item-prev .nut-calendar-day-info-curr,.nut-calendar-viewmode-item-next .nut-calendar-day-info-curr{display:none}.nut-calendar-viewmode-footer{display:flex;width:100%;flex-direction:column;background-color:#fff}.nut-calendar-viewmode-footer .calendar-confirm-btn{height:44px;margin:10px 18px;border-radius:22px;background:linear-gradient(135deg,var(--nutui-color-primary-stop-1, #f53d4d) 0%,var(--nutui-color-primary-stop-2, #fa2c19) 100%);color:var(--nutui-color-primary-text, #ffffff);text-align:center;line-height:44px}.nut-calendar{position:relative;display:flex;flex-direction:column;flex:1;font-size:var(--nutui-calendar-base-font-size, var(--nutui-font-size-4, 16px));background-color:var(--nutui-gray-1, #ffffff);color:var(--nutui-gray-7, #1a1a1a);overflow:hidden;height:100%}.nut-calendar.nut-calendar-title .nut-calendar-header .calendar-title{font-size:var(--nutui-calendar-base-font-size, var(--nutui-font-size-4, 16px))}.nut-calendar .nut-calendar-taro{height:60vh}.nut-calendar .popup-box{height:100%}.nut-calendar ::-webkit-scrollbar{display:none}.nut-calendar-header{display:flex;flex-direction:column;text-align:center}.nut-calendar-title{color:var(--nutui-gray-7, #1a1a1a);font-size:var(--nutui-calendar-title-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-calendar-title-font-weight, var(--nutui-font-weight-bold, 500));line-height:50px}.nut-calendar-sub-title{padding:7px 0;line-height:22px;font-size:var(--nutui-calendar-sub-title-font-size, var(--nutui-font-size-3, 14px))}.nut-calendar-header-buttons{height:var(--nutui-calendar-header-height, 24px)}.nut-calendar-weeks{display:flex;align-items:center;justify-content:space-around;height:36px;border-radius:0 0 12px 12px;box-shadow:0 4px 10px #0000000f}.nut-calendar-weeks-shrink{padding-left:17%}.nut-calendar-week-item:first-of-type,.nut-calendar-week-item:last-of-type{color:var(--nutui-color-primary, #fa2c19)}.nut-calendar-content{flex:1;width:100%;display:block;overflow-y:auto}.nut-calendar-pannel{position:relative;width:100%;height:auto;display:block;box-sizing:border-box}.nut-calendar-pannel .calendar-loading-tip{height:50px;line-height:50px;text-align:center;position:absolute;top:-50px;left:0;right:0;font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-gray-6, #595959)}.nut-calendar-month{display:flex;flex-direction:column;text-align:center}.nut-calendar-month-title{height:23px;line-height:23px;margin:8px 0}.nut-calendar-weeknumber{width:35%}.nut-calendar-weeknumber-index{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;height:var(--nutui-calendar-day-height, 60px);font-weight:var(--nutui-font-weight, 400);font-size:var(--nutui-font-size-3, 14px);margin-bottom:4px;color:var(--nutui-gray-5, #8c8c8c)}.nut-calendar-days{overflow:hidden}.nut-calendar-day{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;float:left;width:var(--nutui-calendar-day-width, 14.28%);height:var(--nutui-calendar-day-height, 60px);font-weight:var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold, 500));margin-bottom:4px}.nut-calendar-day:nth-child(7n),.nut-calendar-day:nth-child(7n+1){color:var(--nutui-color-primary, #fa2c19)}.nut-calendar-day-info-curr,.nut-calendar-day-info{position:absolute;bottom:5px;width:100%;font-size:12px;line-height:14px}.nut-calendar-day-info-top{position:absolute;width:100%;top:5px}.nut-calendar-day-info-bottom{position:absolute;width:100%;bottom:5px}.nut-calendar-day-active{background-color:var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #fa2c19));color:var(--nutui-color-primary-text, #ffffff)!important;border-radius:var(--nutui-calendar-day-active-border-radius, 4px)}.nut-calendar-day-active.active-start{border-radius:0;border-top-left-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-left-radius:var(--nutui-calendar-day-active-border-radius, 4px)}.nut-calendar-day-active.active-end{border-radius:0;border-top-right-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-right-radius:var(--nutui-calendar-day-active-border-radius, 4px)}.nut-calendar-day-active .nut-calendar-day-info{color:var(--nutui-color-primary-text, #ffffff)}.nut-calendar-day-disabled{color:var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #bfbfbf))!important}.nut-calendar-day-disabled .nut-calendar-day-info-curr{display:none}.nut-calendar-day-choose{background-color:var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light, #ffeae8));color:var(--nutui-calendar-choose-color, var(--nutui-color-primary, #fa2c19))}.nut-calendar-day-choose-disabled{background-color:var(--nutui-calendar-choose-disable-background-color, rgba(191, 191, 191, .09));color:var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #bfbfbf))!important}.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr{display:none}.nut-calendar .shrink{display:flex}.nut-calendar-footer{display:flex;width:100%;flex-direction:column;background-color:#fff}.nut-calendar-footer .calendar-confirm-btn{height:44px;margin:10px 18px;border-radius:22px;background:linear-gradient(135deg,var(--nutui-color-primary-stop-1, #f53d4d) 0%,var(--nutui-color-primary-stop-2, #fa2c19) 100%);color:var(--nutui-color-primary-text, #ffffff);text-align:center;line-height:44px}.nut-calendar-popup .nut-popup-title-right{top:7px!important}[dir=rtl] .nut-calendar-day,.nut-rtl .nut-calendar-day{float:right}[dir=rtl] .nut-calendar-day-active.active-start,.nut-rtl .nut-calendar-day-active.active-start{border-top-left-radius:0;border-top-right-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-left-radius:0;border-bottom-right-radius:var(--nutui-calendar-day-active-border-radius, 4px)}[dir=rtl] .nut-calendar-day-active.active-end,.nut-rtl .nut-calendar-day-active.active-end{border-top-right-radius:0;border-top-left-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-right-radius:0;border-bottom-left-radius:var(--nutui-calendar-day-active-border-radius, 4px)}

package/dist/esm/Calendar.js

@@ -1,17 +1,277 @@
-import React__default, { useRef } from "react";
+import React__default, { useState, useRef, useEffect } from "react";
 import Popup__default from "./Popup.js";
 import CalendarItem__default from "./CalendarItem.js";
-import { g as getDateString } from "./date.js";
-import { useConfig } from "./ConfigProvider.js";
+import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { type: "single", autoBackfill: false, popup: true, visible: false, title: "", defaultValue: "", startDate: getDateString(0), endDate: getDateString(365), showToday: true, startText: "", endText: "", confirmText: "", showTitle: true, showSubTitle: true, scrollAnimation: true, firstDayOfWeek: 0, disableDate: (date) => false, renderHeaderButtons: void 0, renderDay: void 0, renderDayTop: void 0, renderDayBottom: void 0, onClose: () => {
+import { a as getDateString } from "./date.js";
+import { r as requestAniFrame } from "./raf.js";
+import { useConfig } from "./ConfigProvider.js";
+import { u as usePropsValue } from "./use-props-value.js";
+import { s as splitDate, g as getPreMonths, a as getMonths, b as getPreQuarters, c as getQuarters, d as getNextQuarters } from "./utils.js";
+const YearMonthPanelHeight = 231;
+const YearQuarterPanelHeight = 103;
+const defaultProps$1 = Object.assign(Object.assign({}, 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__default.forwardRef((props) => {
+  const { locale } = useConfig();
+  const { style, className, viewMode, title, value, defaultValue, startDate, endDate, showTitle, renderDay, onItemClick } = Object.assign(Object.assign({}, defaultProps$1), props);
+  const classPrefix = "nut-calendar-viewmode";
+  const [panelDate, setPanelDate] = 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 = useRef(null);
+  const monthsPanel = useRef(null);
+  const viewAreaRef = 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(() => {
+            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(() => {
+            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 i = startYear + 1; i < endYear; i++) {
+        scrollTop = panelData.length * YearMonthPanelHeight;
+        const midMonths = [...getMonths("curr", i, 1)];
+        addPanelData(i, 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 i = startYear + 1; i < endYear; i++) {
+        scrollTop = panelData.length * YearQuarterPanelHeight;
+        const midQuarters = [...getQuarters("curr", i, 1)];
+        addPanelData(i, 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(Object.assign(Object.assign({}, panelDate), { [`${viewMode}s`]: data }));
+  };
+  useEffect(() => {
+    requestAniFrameFunc(viewMode);
+  }, [panelDate]);
+  useEffect(() => {
+    initData();
+  }, []);
+  const handleItemClick = (item) => {
+    if (item.type !== "curr")
+      return;
+    const val = viewMode === "month" ? item.yearAndMonth : item.yearAndQuarter;
+    setInnerValue(val);
+    onItemClick === null || onItemClick === void 0 ? 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(classPrefix, className);
+  const renderHeader = () => {
+    return showTitle && React__default.createElement(
+      "div",
+      { className: classNames({
+        [`${classPrefix}-header`]: true
+      }) },
+      React__default.createElement("div", { className: `${classPrefix}-title` }, title)
+    );
+  };
+  const renderItem = (item, index) => {
+    const units = {
+      month: locale.calendaritem.month,
+      quarter: locale.calendaritem.quarter
+    };
+    return React__default.createElement(
+      "div",
+      { className: classNames(`${classPrefix}-item`, item.type, getClasses(item)), onClick: () => handleItemClick(item), key: index },
+      React__default.createElement("div", { className: `${classPrefix}-item-${item.type}` }, renderDay ? renderDay(item) : `${item[viewMode]}${units[viewMode]}`)
+    );
+  };
+  const renderPanel = () => {
+    return React__default.createElement(React__default.Fragment, null, panelDate[`${viewMode}s`].map((item, key) => React__default.createElement(
+      "div",
+      { className: `${classPrefix}-panel`, key },
+      React__default.createElement("div", { className: `${classPrefix}-panel-title` }, item.year),
+      React__default.createElement("div", { className: `${classPrefix}-content` }, item[`${viewMode}s`].map((item2, i) => renderItem(item2, i)))
+    )));
+  };
+  const renderContent = () => {
+    return React__default.createElement(
+      "div",
+      { className: `${classPrefix}-content`, ref: monthsRef },
+      React__default.createElement(
+        "div",
+        { className: `${classPrefix}-pannel`, ref: monthsPanel },
+        React__default.createElement("div", { ref: viewAreaRef }, renderPanel())
+      )
+    );
+  };
+  return React__default.createElement(
+    "div",
+    { className: classes, style },
+    renderHeader(),
+    renderContent()
+  );
+});
+CalendarViewModeItem.displayName = "NutCalendarViewModeItem";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { type: "single", viewMode: "day", autoBackfill: false, popup: true, visible: false, title: "", value: "", defaultValue: "", startDate: getDateString(0), endDate: getDateString(365), showToday: true, startText: "", endText: "", confirmText: "", showTitle: true, showSubTitle: true, showMonthNumber: false, scrollAnimation: true, firstDayOfWeek: 0, disableDate: (date) => false, renderHeaderButtons: void 0, renderDay: void 0, renderDayTop: void 0, renderDayBottom: void 0, onClose: () => {
 }, onConfirm: (param) => {
 }, onDayClick: (data) => {
+}, onItemClick: () => {
 }, onPageChange: (param) => {
 } });
 const Calendar = React__default.forwardRef((props, ref) => {
   const { locale } = useConfig();
-  const { style, className, children, popup, visible, type, autoBackfill, title, defaultValue, startDate, endDate, showToday, startText, endText, confirmText, showTitle, showSubTitle, scrollAnimation, firstDayOfWeek, closeIcon, disableDate, renderHeaderButtons, renderBottomButton, renderDay, renderDayTop, renderDayBottom, onClose, onConfirm, onDayClick, onPageChange } = Object.assign(Object.assign({}, defaultProps), props);
+  const { style, className, children, popup, visible, type, viewMode, autoBackfill, title, value, defaultValue, startDate, endDate, showToday, startText, endText, confirmText, showTitle, showSubTitle, showMonthNumber, scrollAnimation, firstDayOfWeek, closeIcon, disableDate, renderHeaderButtons, renderBottomButton, renderDay, renderDayTop, renderDayBottom, onClose, onConfirm, onDayClick, onItemClick, onPageChange } = Object.assign(Object.assign({}, defaultProps), props);
   const calendarRef = useRef(null);
   const close = () => {
     onClose && onClose();
@@ -23,9 +283,6 @@ const Calendar = React__default.forwardRef((props, ref) => {
   const closePopup = () => {
     close();
   };
-  const select = (param) => {
-    onDayClick && onDayClick(param);
-  };
   const scrollToDate = (date) => {
     var _a;
     (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.scrollToDate(date);
@@ -37,9 +294,9 @@ const Calendar = React__default.forwardRef((props, ref) => {
     scrollToDate
   }));
   const renderItem = () => {
-    return React__default.createElement(CalendarItem__default, { ref: calendarRef, style, className, children, type, autoBackfill, renderBottomButton, popup, title: title || locale.calendaritem.title, defaultValue, startDate, endDate, showToday, startText: startText || locale.calendaritem.start, endText: endText || locale.calendaritem.end, confirmText: confirmText || locale.calendaritem.confirm, showTitle, showSubTitle, scrollAnimation, firstDayOfWeek, disableDate, renderHeaderButtons, renderDay, renderDayTop, renderDayBottom, onConfirm: choose, onDayClick: select, onPageChange: yearMonthChange });
+    return React__default.createElement(React__default.Fragment, null, viewMode !== "day" ? React__default.createElement(CalendarViewModeItem, { ref: calendarRef, style, className, type, viewMode, title: title || locale.calendaritem.title, value, defaultValue, startDate, endDate, showTitle, scrollAnimation, renderDay, onItemClick }) : React__default.createElement(CalendarItem__default, { ref: calendarRef, style, className, children, type, autoBackfill, renderBottomButton, popup, title: title || locale.calendaritem.title, defaultValue, startDate, endDate, showToday, startText: startText || locale.calendaritem.start, endText: endText || locale.calendaritem.end, confirmText: confirmText || locale.calendaritem.confirm, showTitle, showSubTitle, showMonthNumber, scrollAnimation, firstDayOfWeek, disableDate, renderHeaderButtons, renderDay, renderDayTop, renderDayBottom, onConfirm: choose, onDayClick: (param) => onDayClick && onDayClick(param), onPageChange: yearMonthChange }));
   };
-  return React__default.createElement(React__default.Fragment, null, popup ? React__default.createElement(Popup__default, { className: "nut-calendar-popup", visible, position: "bottom", round: true, closeable: true, closeIcon, destroyOnClose: true, onOverlayClick: closePopup, onCloseIconClick: closePopup, style: { height: "83%" } }, renderItem()) : renderItem());
+  return React__default.createElement(React__default.Fragment, null, popup && viewMode === "day" ? React__default.createElement(Popup__default, { className: "nut-calendar-popup", visible, position: "bottom", round: true, closeable: true, closeIcon, destroyOnClose: true, onOverlayClick: closePopup, onCloseIconClick: closePopup, style: { height: "83%" } }, renderItem()) : renderItem());
 });
 Calendar.displayName = "NutCalendar";
 export {

package/dist/esm/CalendarCard.js

@@ -1,7 +1,7 @@
 import React__default, { useState, useEffect } from "react";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
-import { m as getMonthPreDay, f as getMonthDays } from "./date.js";
+import { c as getMonthPreDay, b as getMonthDays } from "./date.js";
 import { useConfig } from "./ConfigProvider.js";
 import { u as usePropsValue } from "./use-props-value.js";
 const ArrowLeft = () => {