@uzum-tech/ui 1.1.5 → 1.2.0

package/dist/index.js

@@ -597,16 +597,16 @@
 
     const warnedMessages = /* @__PURE__ */new Set();
     function warnOnce(location, message) {
-      const mergedMessage = `[naive/${location}]: ${message}`;
+      const mergedMessage = `[uzum-ui/${location}]: ${message}`;
       if (warnedMessages.has(mergedMessage)) return;
       warnedMessages.add(mergedMessage);
       console.error(mergedMessage);
     }
     function warn$2(location, message) {
-      console.error(`[naive/${location}]: ${message}`);
+      console.error(`[uzum-ui/${location}]: ${message}`);
     }
     function throwError(location, message) {
-      throw new Error(`[naive/${location}]: ${message}`);
+      throw new Error(`[uzum-ui/${location}]: ${message}`);
     }
 
     function smallerSize(size) {
@@ -42629,7 +42629,7 @@
     width: var(--u-close-icon-size);
     height: var(--u-close-icon-size);
   `),
-    // fix: https://github.com/tusen-ai/naive-ui/issues/4588
+    // fix: https://github.com/tusen-ai/uzum-ui/issues/4588
     cM("right-adjust", [cB("alert-body", `
       padding-right: calc(var(--u-close-size) + var(--u-padding) + 2px);
     `)]), cM("show-icon", [cB("alert-body", [cE("content, title", `
@@ -42863,7 +42863,7 @@
                 `${mergedClsPrefix}-alert--${this.layoutType}`,
                 this.actionsHorizontal && `${mergedClsPrefix}-alert--horizontal`,
                 this.showIcon && `${mergedClsPrefix}-alert--show-icon`,
-                // fix: https://github.com/tusen-ai/naive-ui/issues/4588
+                // fix: https://github.com/tusen-ai/uzum-ui/issues/4588
                 !this.title && this.closable && `${mergedClsPrefix}-alert--right-adjust`,
                 this.rtlEnabled && `${mergedClsPrefix}-alert--rtl`
               ],
@@ -48543,7 +48543,7 @@
       }
     });
 
-    const START_YEAR = 1901;
+    const START_YEAR = 1924;
     const END_YEAR = /* @__PURE__ */new Date().getFullYear();
     const MONTH_ITEM_HEIGHT = 50;
     const MONTH_ITEM_GAP = 8;
@@ -71854,6 +71854,7 @@
     const usePanelCommonProps = {
       active: Boolean,
       dateFormat: String,
+      type: String,
       timeFormat: {
         type: String,
         value: TIME_FORMAT
@@ -72377,7 +72378,11 @@
               ],
               onClick: () => {
                 useAsQuickJump ? handleQuickMonthClick(item, (value) => {
-                  props.onUpdateValue(value, false);
+                  props.onUpdateValue(
+                    value,
+                    false,
+                    item
+                  );
                 }) : handleDateClick(item);
               }
             },
@@ -72406,17 +72411,9 @@
             onKeydown: this.handlePanelKeyDown
           },
           /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-month-calendar` }, {
-            default: () => [
-              this.monthArray.map(
-                (item, i) => renderItem(item, i, mergedClsPrefix)
-              ),
-              /* @__PURE__ */ vue.h(
-                "div",
-                {
-                  class: `${mergedClsPrefix}-date-panel-month-calendar__padding`
-                }
-              )
-            ]
+            default: () => this.monthArray.map(
+              (item, i) => renderItem(item, i, mergedClsPrefix)
+            )
           }),
           /* @__PURE__ */ vue.h(FocusDetector, { onFocus: this.handleFocusDetectorFocus })
         );
@@ -72439,6 +72436,7 @@
           type: String,
           required: true
         },
+        disabled: Boolean,
         onUpdateValue: {
           type: Function,
           required: true
@@ -72456,10 +72454,12 @@
           }
         });
         function handleHeaderClick() {
+          if (props.disabled)
+            return;
           showRef.value = !showRef.value;
         }
-        function handleUpdateValue(value) {
-          props.onUpdateValue(value);
+        function handleUpdateValue(value, doUpdate, item) {
+          props.onUpdateValue(value, doUpdate, item);
           handleHeaderClick();
         }
         return {
@@ -72470,13 +72470,14 @@
         };
       },
       render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, disabled } = this;
         return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, /* @__PURE__ */ vue.h(
           "div",
           {
             class: [
               `${mergedClsPrefix}-date-panel-month__text`,
-              this.show && `${mergedClsPrefix}-date-panel-month__text--active`
+              this.show && `${mergedClsPrefix}-date-panel-month__text--active`,
+              disabled && `${mergedClsPrefix}-date-panel-month__text--disabled`
             ],
             onClick: this.handleHeaderClick
           },
@@ -72533,7 +72534,11 @@
               ],
               onClick: () => {
                 useAsQuickJump ? handleQuickMonthClick(item, (value) => {
-                  props.onUpdateValue(value, false);
+                  props.onUpdateValue(
+                    value,
+                    false,
+                    item
+                  );
                 }) : handleDateClick(item);
               }
             },
@@ -72556,6 +72561,7 @@
             class: [
               `${mergedClsPrefix}-date-panel`,
               `${mergedClsPrefix}-date-panel--month`,
+              `${mergedClsPrefix}-date-panel--year`,
               this.themeClass
             ],
             onFocus: this.handlePanelFocus,
@@ -72597,6 +72603,7 @@
           type: String,
           required: true
         },
+        disabled: Boolean,
         onUpdateValue: {
           type: Function,
           required: true
@@ -72614,10 +72621,12 @@
           }
         });
         function handleHeaderClick() {
+          if (props.disabled)
+            return;
           showRef.value = !showRef.value;
         }
-        function handleUpdateValue(value) {
-          props.onUpdateValue(value);
+        function handleUpdateValue(value, doUpdate, item) {
+          props.onUpdateValue(value, doUpdate, item);
           handleHeaderClick();
         }
         return {
@@ -72628,7 +72637,7 @@
         };
       },
       render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, disabled } = this;
         return /* @__PURE__ */ vue.h(
           "div",
           {
@@ -72640,7 +72649,8 @@
             {
               class: [
                 `${mergedClsPrefix}-date-panel-month__text`,
-                this.show && `${mergedClsPrefix}-date-panel-month__text--active`
+                this.show && `${mergedClsPrefix}-date-panel-month__text--active`,
+                disabled && `${mergedClsPrefix}-date-panel-month__text--disabled`
               ],
               onClick: this.handleHeaderClick
             },
@@ -72687,14 +72697,21 @@
           type: String,
           required: true
         },
-        onUpdateValue: {
-          type: Function,
-          required: true
-        }
+        isMonth: {
+          type: Boolean,
+          value: false
+        },
+        isYear: {
+          type: Boolean,
+          value: false
+        },
+        onUpdateValue: Function,
+        onUpdateMonth: Function,
+        onUpdateYear: Function
       },
-      setup() {
-        const monthPanelIsActive = vue.ref(false);
-        const yearPanelIsActive = vue.ref(false);
+      setup(props) {
+        const monthPanelIsActive = vue.ref(props.isMonth);
+        const yearPanelIsActive = vue.ref(props.isYear);
         function onUpdateMonthPanelIsActive(value) {
           monthPanelIsActive.value = value;
           if (value)
@@ -72702,41 +72719,65 @@
         }
         function onUpdateYearPanelIsActive(value) {
           yearPanelIsActive.value = value;
-          if (value)
+          if (value && !props.isMonth)
             monthPanelIsActive.value = false;
         }
+        function handleUpdateMonth(value, doUpdate, item) {
+          props.onUpdateMonth?.(value, doUpdate, item);
+          props.onUpdateValue?.(value, doUpdate, item);
+        }
+        function handleUpdateYear(value, doUpdate, item) {
+          props.onUpdateYear?.(value, doUpdate, item);
+          props.onUpdateValue?.(value, doUpdate, item);
+        }
         return {
           monthPanelIsActive,
           yearPanelIsActive,
           onUpdateMonthPanelIsActive,
-          onUpdateYearPanelIsActive
+          onUpdateYearPanelIsActive,
+          handleUpdateMonth,
+          handleUpdateYear
         };
       },
       render() {
-        const { mergedClsPrefix } = this;
-        return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-month` }, /* @__PURE__ */ vue.h(
-          PanelMonth,
-          {
-            panelActive: this.monthPanelIsActive,
-            value: this.value,
-            mergedClsPrefix,
-            calendarMonth: this.calendarMonth,
-            calendarYear: this.calendarYear,
-            onUpdatePanelActive: this.onUpdateMonthPanelIsActive,
-            onUpdateValue: this.onUpdateValue
-          }
-        ), /* @__PURE__ */ vue.h(
-          PanelYear,
+        const { mergedClsPrefix, isYear } = this;
+        return /* @__PURE__ */ vue.h(
+          "div",
           {
-            panelActive: this.yearPanelIsActive,
-            value: this.value,
-            mergedClsPrefix,
-            calendarMonth: this.calendarMonth,
-            calendarYear: this.calendarYear,
-            onUpdatePanelActive: this.onUpdateYearPanelIsActive,
-            onUpdateValue: this.onUpdateValue
-          }
-        ));
+            class: [
+              `${mergedClsPrefix}-date-panel-month`,
+              {
+                [`${mergedClsPrefix}-date-panel-month--justify-end`]: isYear
+              }
+            ]
+          },
+          isYear ? null : /* @__PURE__ */ vue.h(
+            PanelMonth,
+            {
+              panelActive: this.monthPanelIsActive,
+              value: this.value,
+              mergedClsPrefix,
+              calendarMonth: this.calendarMonth,
+              calendarYear: this.calendarYear,
+              disabled: this.isMonth,
+              onUpdatePanelActive: this.onUpdateMonthPanelIsActive,
+              onUpdateValue: this.handleUpdateMonth
+            }
+          ),
+          /* @__PURE__ */ vue.h(
+            PanelYear,
+            {
+              panelActive: this.yearPanelIsActive,
+              value: this.value,
+              mergedClsPrefix,
+              calendarMonth: this.calendarMonth,
+              calendarYear: this.calendarYear,
+              disabled: this.isYear,
+              onUpdatePanelActive: this.onUpdateYearPanelIsActive,
+              onUpdateValue: this.handleUpdateYear
+            }
+          )
+        );
       }
     });
 
@@ -73796,10 +73837,41 @@
             }
           });
         }
-        return useCalendar(props, "date");
+        const calendar = useCalendar(props, "date");
+        const type = props.type;
+        const monthTypes = ["month", "quarter"];
+        const withoutDayTypes = [...monthTypes, "year"];
+        const isWithoutDay = vue.computed(() => withoutDayTypes.includes(type));
+        const isMonth = vue.computed(() => monthTypes.includes(type));
+        const isYear = vue.computed(() => type === "year");
+        const handleMonthClick = (value, _doUpdate, item) => {
+          calendar.onUpdateCalendarValue(value);
+          isMonth.value && calendar.handleDateClick(item);
+        };
+        const handleYearClick = (value, _doUpdate, item) => {
+          calendar.onUpdateCalendarValue(value);
+          isYear.value && calendar.handleDateClick(item);
+        };
+        return {
+          ...calendar,
+          isWithoutDay,
+          isMonth,
+          isYear,
+          handleMonthClick,
+          handleYearClick
+        };
       },
       render() {
-        const { mergedClsPrefix, shortcuts, onRender } = this;
+        const {
+          mergedClsPrefix,
+          shortcuts,
+          onRender,
+          isWithoutDay,
+          isYear,
+          isMonth,
+          handleMonthClick,
+          handleYearClick
+        } = this;
         onRender?.();
         return /* @__PURE__ */ vue.h(
           "div",
@@ -73819,12 +73891,15 @@
             PanelHeader,
             {
               value: this.calendarValue,
+              isMonth,
+              isYear,
               mergedClsPrefix,
               calendarMonth: this.calendarMonth,
               calendarYear: this.calendarYear,
-              onUpdateValue: this.onUpdateCalendarValue
+              onUpdateMonth: handleMonthClick,
+              onUpdateYear: handleYearClick
             }
-          ), /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => /* @__PURE__ */ vue.h(
+          ), isWithoutDay ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-placeholder` }) : /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => /* @__PURE__ */ vue.h(
             "div",
             {
               key: weekday,
@@ -73849,9 +73924,14 @@
                 this.handleDateClick(dateItem);
               }
             },
-            /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
+            /* @__PURE__ */ vue.h(
+              "div",
+              {
+                class: `${mergedClsPrefix}-date-panel-date__trigger`
+              }
+            ),
             dateItem.dateObject.date
-          )))),
+          ))))),
           this.datePickerSlots.footer ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer()) : null,
           this.actions?.length || shortcuts ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-actions` }, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts && Object.keys(shortcuts).map((key) => {
             const shortcut = shortcuts[key];
@@ -73893,10 +73973,76 @@
             }
           });
         }
-        return useDualCalendar(props, "daterange");
+        const calendar = useDualCalendar(props, "daterange");
+        const type = props.type;
+        const monthRanges = ["monthrange", "quarterrange"];
+        const withoutDayTypes = [...monthRanges, "yearrange"];
+        const isWithoutDay = vue.computed(() => withoutDayTypes.includes(type));
+        const isMonthRange = vue.computed(() => monthRanges.includes(type));
+        const isYearRange = vue.computed(() => type === "yearrange");
+        const monthToDateItem = (value, item, isEnd = false) => {
+          const { dateObject, ...monthItem } = item;
+          return {
+            ...monthItem,
+            dateObject: {
+              ...dateObject,
+              date: 1
+            },
+            inCurrentMonth: false,
+            isCurrentDate: false,
+            inSpan: false,
+            startOfSpan: false,
+            endOfSpan: isEnd,
+            selected: isEnd,
+            ts: value,
+            type: "date"
+          };
+        };
+        const setMonthRange = (value, item, isEnd = false) => {
+          const monthItem = monthToDateItem(value, item, isEnd);
+          calendar.handleDateMouseEnter(monthItem);
+          calendar.handleDateClick(monthItem);
+        };
+        const handleMonthStartClick = (value, _doUpdate, item) => {
+          calendar.onUpdateStartCalendarValue(value);
+          isMonthRange.value && setMonthRange(value, item);
+        };
+        const handleMonthEndClick = (value, _doUpdate, item) => {
+          calendar.onUpdateEndCalendarValue(value);
+          isMonthRange.value && setMonthRange(value, item, true);
+        };
+        const handleYearStartClick = (value, _doUpdate, item) => {
+          calendar.onUpdateStartCalendarValue(value);
+          isYearRange.value && setMonthRange(value, item);
+        };
+        const handleYearEndClick = (value, _doUpdate, item) => {
+          calendar.onUpdateEndCalendarValue(value);
+          isYearRange.value && setMonthRange(value, item, true);
+        };
+        return {
+          ...calendar,
+          isMonthRange,
+          isYearRange,
+          isWithoutDay,
+          handleMonthStartClick,
+          handleMonthEndClick,
+          handleYearStartClick,
+          handleYearEndClick
+        };
       },
       render() {
-        const { mergedClsPrefix, shortcuts, onRender } = this;
+        const {
+          mergedClsPrefix,
+          shortcuts,
+          onRender,
+          isMonthRange,
+          isYearRange,
+          isWithoutDay,
+          handleMonthStartClick,
+          handleMonthEndClick,
+          handleYearStartClick,
+          handleYearEndClick
+        } = this;
         onRender?.();
         return /* @__PURE__ */ vue.h(
           "div",
@@ -73923,20 +74069,22 @@
               {
                 value: this.startCalendarDateTime,
                 mergedClsPrefix,
+                isMonth: isMonthRange,
+                isYear: isYearRange,
                 calendarMonth: this.startCalendarMonth,
                 calendarYear: this.startCalendarYear,
-                onUpdateValue: this.onUpdateStartCalendarValue
+                onUpdateMonth: handleMonthStartClick,
+                onUpdateYear: handleYearStartClick
               }
             ),
-            /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => /* @__PURE__ */ vue.h(
+            isWithoutDay ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-placeholder` }) : /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => /* @__PURE__ */ vue.h(
               "div",
               {
                 key: weekday,
                 class: `${mergedClsPrefix}-date-panel-weekdays__day`
               },
               weekday
-            ))),
-            /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-dates` }, this.startDateArray.map((dateItem, i) => /* @__PURE__ */ vue.h(
+            ))), /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-dates` }, this.startDateArray.map((dateItem, i) => /* @__PURE__ */ vue.h(
               "div",
               {
                 "data-u-date": true,
@@ -73960,9 +74108,14 @@
                   this.handleDateMouseEnter(dateItem);
                 }
               },
-              /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
+              /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  class: `${mergedClsPrefix}-date-panel-date__trigger`
+                }
+              ),
               dateItem.dateObject.date
-            )))
+            ))))
           ),
           /* @__PURE__ */ vue.h(
             "div",
@@ -73975,20 +74128,22 @@
               {
                 value: this.endCalendarDateTime,
                 mergedClsPrefix,
+                isMonth: isMonthRange,
+                isYear: isYearRange,
                 calendarMonth: this.endCalendarMonth,
                 calendarYear: this.endCalendarYear,
-                onUpdateValue: this.onUpdateEndCalendarValue
+                onUpdateMonth: handleMonthEndClick,
+                onUpdateYear: handleYearEndClick
               }
             ),
-            /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => /* @__PURE__ */ vue.h(
+            isWithoutDay ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-placeholder` }) : /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => /* @__PURE__ */ vue.h(
               "div",
               {
                 key: weekday,
                 class: `${mergedClsPrefix}-date-panel-weekdays__day`
               },
               weekday
-            ))),
-            /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-dates` }, this.endDateArray.map((dateItem, i) => /* @__PURE__ */ vue.h(
+            ))), /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-dates` }, this.endDateArray.map((dateItem, i) => /* @__PURE__ */ vue.h(
               "div",
               {
                 "data-u-date": true,
@@ -74012,9 +74167,14 @@
                   this.handleDateMouseEnter(dateItem);
                 }
               },
-              /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
+              /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  class: `${mergedClsPrefix}-date-panel-date__trigger`
+                }
+              ),
               dateItem.dateObject.date
-            )))
+            ))))
           ),
           this.datePickerSlots.footer ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer()) : null,
           this.actions?.length || shortcuts ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-actions` }, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts && Object.keys(shortcuts).map((key) => {
@@ -74051,250 +74211,6 @@
       }
     });
 
-    var MonthRangePanel = vue.defineComponent({
-      name: "MonthRangePanel",
-      props: {
-        ...useDualCalendarProps,
-        type: {
-          type: String,
-          required: true
-        }
-      },
-      setup(props) {
-        {
-          vue.watchEffect(() => {
-            if (props.actions?.includes("now")) {
-              warnOnce(
-                "date-picker",
-                `The \`now\` action is not supported for u-date-picker of ${props.type}type`
-              );
-            }
-          });
-        }
-        const useCalendarRef = useDualCalendar(props, props.type);
-        const renderItem = (item, i, mergedClsPrefix, type) => {
-          const { handleColItemClick } = useCalendarRef;
-          const disabled = false;
-          return /* @__PURE__ */ vue.h(
-            "div",
-            {
-              "data-u-date": true,
-              key: i,
-              class: [
-                `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item`,
-                {
-                  [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`]: item.isCurrent,
-                  [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`]: item.selected,
-                  [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]: disabled
-                }
-              ],
-              onClick: () => {
-                handleColItemClick(item, type);
-              }
-            },
-            item.type === "month" ? item.dateObject.month + 1 : item.type === "quarter" ? `Q${item.dateObject.quarter}` : item.dateObject.year
-          );
-        };
-        vue.onMounted(() => {
-          useCalendarRef.justifyColumnsScrollState();
-        });
-        return { ...useCalendarRef, renderItem };
-      },
-      render() {
-        const {
-          mergedClsPrefix,
-          mergedTheme,
-          shortcuts,
-          type,
-          renderItem,
-          onRender
-        } = this;
-        onRender?.();
-        return /* @__PURE__ */ vue.h(
-          "div",
-          {
-            ref: "selfRef",
-            tabindex: 0,
-            class: [
-              `${mergedClsPrefix}-date-panel`,
-              `${mergedClsPrefix}-date-panel--daterange`,
-              !this.panel && `${mergedClsPrefix}-date-panel--shadow`,
-              this.themeClass
-            ],
-            onKeydown: this.handlePanelKeyDown,
-            onFocus: this.handlePanelFocus
-          },
-          /* @__PURE__ */ vue.h(
-            "div",
-            {
-              ref: "startDatesElRef",
-              class: `${mergedClsPrefix}-date-panel-calendar ${mergedClsPrefix}-date-panel-calendar--start`
-            },
-            /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-month-calendar` }, /* @__PURE__ */ vue.h(
-              Scrollbar$1,
-              {
-                ref: "startYearScrollbarRef",
-                class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col`,
-                theme: mergedTheme.peers.Scrollbar,
-                themeOverrides: mergedTheme.peerOverrides.Scrollbar,
-                container: () => this.virtualListContainer("start"),
-                content: () => this.virtualListContent("start"),
-                horizontalRailStyle: { zIndex: 1 },
-                verticalRailStyle: { zIndex: 1 }
-              },
-              {
-                default: () => /* @__PURE__ */ vue.h(
-                  VVirtualList,
-                  {
-                    ref: "startYearVlRef",
-                    items: this.startYearArray,
-                    itemSize: MONTH_ITEM_HEIGHT,
-                    showScrollbar: false,
-                    keyField: "ts",
-                    onScroll: this.handleStartYearVlScroll,
-                    paddingBottom: 4
-                  },
-                  {
-                    default: ({
-                      item,
-                      index
-                    }) => {
-                      return renderItem(item, index, mergedClsPrefix, "start");
-                    }
-                  }
-                )
-              }
-            ), type === "monthrange" || type === "quarterrange" ? /* @__PURE__ */ vue.h(
-              "div",
-              {
-                class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col`
-              },
-              /* @__PURE__ */ vue.h(
-                Scrollbar$1,
-                {
-                  ref: "startMonthScrollbarRef",
-                  theme: mergedTheme.peers.Scrollbar,
-                  themeOverrides: mergedTheme.peerOverrides.Scrollbar
-                },
-                {
-                  default: () => [
-                    (type === "monthrange" ? this.startMonthArray : this.startQuarterArray).map(
-                      (item, i) => renderItem(item, i, mergedClsPrefix, "start")
-                    ),
-                    type === "monthrange" && /* @__PURE__ */ vue.h(
-                      "div",
-                      {
-                        class: `${mergedClsPrefix}-date-panel-month-calendar__padding`
-                      }
-                    )
-                  ]
-                }
-              )
-            ) : null)
-          ),
-          /* @__PURE__ */ vue.h(
-            "div",
-            {
-              ref: "endDatesElRef",
-              class: `${mergedClsPrefix}-date-panel-calendar ${mergedClsPrefix}-date-panel-calendar--end`
-            },
-            /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-month-calendar` }, /* @__PURE__ */ vue.h(
-              Scrollbar$1,
-              {
-                ref: "endYearScrollbarRef",
-                class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col`,
-                theme: mergedTheme.peers.Scrollbar,
-                themeOverrides: mergedTheme.peerOverrides.Scrollbar,
-                container: () => this.virtualListContainer("end"),
-                content: () => this.virtualListContent("end"),
-                horizontalRailStyle: { zIndex: 1 },
-                verticalRailStyle: { zIndex: 1 }
-              },
-              {
-                default: () => /* @__PURE__ */ vue.h(
-                  VVirtualList,
-                  {
-                    ref: "endYearVlRef",
-                    items: this.endYearArray,
-                    itemSize: MONTH_ITEM_HEIGHT,
-                    showScrollbar: false,
-                    keyField: "ts",
-                    onScroll: this.handleEndYearVlScroll,
-                    paddingBottom: 4
-                  },
-                  {
-                    default: ({
-                      item,
-                      index
-                    }) => {
-                      return renderItem(item, index, mergedClsPrefix, "end");
-                    }
-                  }
-                )
-              }
-            ), type === "monthrange" || type === "quarterrange" ? /* @__PURE__ */ vue.h(
-              "div",
-              {
-                class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col`
-              },
-              /* @__PURE__ */ vue.h(
-                Scrollbar$1,
-                {
-                  ref: "endMonthScrollbarRef",
-                  theme: mergedTheme.peers.Scrollbar,
-                  themeOverrides: mergedTheme.peerOverrides.Scrollbar
-                },
-                {
-                  default: () => [
-                    (type === "monthrange" ? this.endMonthArray : this.endQuarterArray).map(
-                      (item, i) => renderItem(item, i, mergedClsPrefix, "end")
-                    ),
-                    type === "monthrange" && /* @__PURE__ */ vue.h(
-                      "div",
-                      {
-                        class: `${mergedClsPrefix}-date-panel-month-calendar__padding`
-                      }
-                    )
-                  ]
-                }
-              )
-            ) : null)
-          ),
-          this.datePickerSlots.footer ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, vue.renderSlot(this.datePickerSlots, "footer")) : null,
-          this.actions?.length || shortcuts ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-actions` }, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts && Object.keys(shortcuts).map((key) => {
-            const shortcut = shortcuts[key];
-            return Array.isArray(shortcut) || typeof shortcut === "function" ? /* @__PURE__ */ vue.h(
-              XButton,
-              {
-                secondary: true,
-                round: true,
-                size: "small",
-                onMouseenter: () => {
-                  this.handleRangeShortcutMouseenter(shortcut);
-                },
-                onClick: () => {
-                  this.handleRangeShortcutClick(shortcut);
-                },
-                onMouseleave: () => {
-                  this.handleShortcutMouseleave();
-                }
-              },
-              { default: () => key }
-            ) : null;
-          })), /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-date-panel-actions__suffix` }, this.actions?.includes("clear") ? /* @__PURE__ */ vue.h(XButton, { secondary: true, onClick: this.handleClearClick }, { default: () => this.locale.clear }) : null, this.actions?.includes("confirm") ? /* @__PURE__ */ vue.h(
-            XButton,
-            {
-              type: "primary",
-              disabled: this.isRangeInvalid,
-              onClick: this.handleConfirmClick
-            },
-            { default: () => this.locale.confirm }
-          ) : null)) : null,
-          /* @__PURE__ */ vue.h(FocusDetector, { onFocus: this.handleFocusDetectorFocus })
-        );
-      }
-    });
-
     var style$S = c$1([cB("date-picker", `
     position: relative;
     z-index: auto;
@@ -74417,6 +74333,8 @@
       margin: 0,
       padding: "15px 16px",
       boxSizing: "border-box"
+    }), cM("year", {
+      zIndex: "2"
     }), cB("date-panel-footer", {
       gridArea: "footer"
     }), cB("date-panel-actions", {
@@ -74439,21 +74357,20 @@
       zIndex: 1
     })]), c$1("~ .u-date-panel-calendar", {
       paddingTop: "16px"
-    })]), cB("date-panel-month", {
+    })]), cB("date-panel-placeholder", {
+      width: "266px",
+      height: "250px"
+    }), cB("date-panel-month", {
       boxSizing: "border-box",
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       padding: "var(--u-calendar-title-padding)",
       height: "var(--u-calendar-title-height)"
-    }, [cE("icon", `
+    }, [cM("justify-end", {
+      justifyContent: "end"
+    }), cE("icon", `
         font-size: var(--u-arrow-size);
-      `), cE("prev, next, fast-prev, fast-next", `
-        line-height: 0;
-        cursor: pointer;
-        width: var(--u-arrow-size);
-        height: var(--u-arrow-size);
-        color: var(--u-arrow-color);
       `), cE("month-year", {
       userSelect: "none",
       "-webkit-user-select": "none"
@@ -74466,10 +74383,11 @@
           padding: 6px 8px;
           text-align: center;
           color: var(--u-calendar-title-text-color);
-          cursor: pointer;
           transition: .3s var(--u-bezier);
           border-radius: var(--u-panel-border-radius);
-        `, [c$1(".u-icon", {
+        `, [cNotM("disabled", {
+      cursor: "pointer"
+    }), c$1(".u-icon", {
       width: "24px",
       transition: "transform .3s var(--u-bezier)"
     }), cM("active", `
@@ -74704,6 +74622,12 @@
             }
           });
         }
+        const rangeTypes = [
+          "daterange",
+          "monthrange",
+          "yearrange",
+          "quarterrange"
+        ];
         const { localeRef, dateLocaleRef } = useLocale("DatePicker");
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
@@ -75467,6 +75391,7 @@
         ) : void 0;
         return {
           ...exposedMethods,
+          rangeTypes,
           mergedStatus: mergedStatusRef,
           mergedClsPrefix: mergedClsPrefixRef,
           mergedBordered: mergedBorderedRef,
@@ -75539,11 +75464,12 @@
           onRender: this.onRender
         };
         const renderPanel = () => {
-          const { type } = this;
-          return type === "datetime" ? /* @__PURE__ */ vue.h(DatetimePanel, { ...commonPanelProps }, $slots) : type === "daterange" ? /* @__PURE__ */ vue.h(
+          const { type, rangeTypes } = this;
+          return type === "datetime" ? /* @__PURE__ */ vue.h(DatetimePanel, { ...commonPanelProps }, $slots) : rangeTypes.includes(type) ? /* @__PURE__ */ vue.h(
             DateRangePanel,
             {
               ...commonPanelProps,
+              type,
               defaultCalendarStartTime: this.defaultCalendarStartTime,
               defaultCalendarEndTime: this.defaultCalendarEndTime,
               bindCalendarMonths: this.bindCalendarMonths
@@ -75558,7 +75484,7 @@
               bindCalendarMonths: this.bindCalendarMonths
             },
             $slots
-          ) : type === "month" || type === "year" || type === "quarter" ? /* @__PURE__ */ vue.h(vue.Fragment, null) : type === "monthrange" || type === "yearrange" || type === "quarterrange" ? /* @__PURE__ */ vue.h(MonthRangePanel, { ...commonPanelProps, type }) : /* @__PURE__ */ vue.h(DatePanel, { ...commonPanelProps }, $slots);
+          ) : /* @__PURE__ */ vue.h(DatePanel, { ...commonPanelProps, type }, $slots);
         };
         if (this.panel) {
           return renderPanel();
@@ -106796,7 +106722,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.1.5";
+    var version = "1.2.0";
 
     function create({
       componentPrefix = "U",
@@ -106832,10 +106758,10 @@
       };
     }
 
-    const naive = create({
+    const uzumUi = create({
       components: Object.keys(components).map(key => components[key])
     });
-    const install = naive.install;
+    const install = uzumUi.install;
 
     function useThemeVars() {
       const configProviderInjection = vue.inject(configProviderInjectionKey, null);
@@ -107833,7 +107759,7 @@
     exports.dateZhCN = dateZhCN;
     exports.dateZhTW = datezhTW;
     exports.deDE = deDE;
-    exports.default = naive;
+    exports.default = uzumUi;
     exports.descriptionsDark = descriptionsDark;
     exports.descriptionsItemProps = descriptionsItemProps;
     exports.descriptionsProps = descriptionsProps;