naive-ui 2.30.6 → 2.30.7

package/lib/date-picker/src/panel/daterange.d.ts

@@ -234,6 +234,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarLeftPaddingYear: string;
             calendarLeftPaddingQuarter: string;
             calendarLeftPaddingMonthrange: string;
+            calendarLeftPaddingQuarterrange: string;
+            calendarLeftPaddingYearrange: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
@@ -242,6 +244,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarRightPaddingYear: string;
             calendarRightPaddingQuarter: string;
             calendarRightPaddingMonthrange: string;
+            calendarRightPaddingQuarterrange: string;
+            calendarRightPaddingYearrange: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {
@@ -1143,7 +1147,7 @@ declare const _default: import("vue").DefineComponent<{
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
     resetSelectingStatus: (e: MouseEvent) => void;
     handleDateClick: (dateItem: import("../utils").DateItem) => void;
-    handleColItemClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem, clickType: "start" | "end") => void;
+    handleColItemClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, clickType: "start" | "end") => void;
     handleDateMouseEnter: (dateItem: import("../utils").DateItem) => void;
     handleConfirmClick: () => void;
     startCalendarPrevYear: () => void;
@@ -1166,8 +1170,10 @@ declare const _default: import("vue").DefineComponent<{
     endDateArray: import("vue").ComputedRef<import("../utils").DateItem[]>;
     startYearArray: import("vue").ComputedRef<import("../utils").YearItem[]>;
     startMonthArray: import("vue").ComputedRef<import("../utils").MonthItem[]>;
+    startQuarterArray: import("vue").ComputedRef<import("../utils").QuarterItem[]>;
     endYearArray: import("vue").ComputedRef<import("../utils").YearItem[]>;
     endMonthArray: import("vue").ComputedRef<import("../utils").MonthItem[]>;
+    endQuarterArray: import("vue").ComputedRef<import("../utils").QuarterItem[]>;
     isSelecting: import("vue").Ref<boolean>;
     handleRangeShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;
     handleRangeShortcutClick: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;

package/lib/date-picker/src/panel/datetime.d.ts

@@ -203,6 +203,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarLeftPaddingYear: string;
             calendarLeftPaddingQuarter: string;
             calendarLeftPaddingMonthrange: string;
+            calendarLeftPaddingQuarterrange: string;
+            calendarLeftPaddingYearrange: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
@@ -211,6 +213,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarRightPaddingYear: string;
             calendarRightPaddingQuarter: string;
             calendarRightPaddingMonthrange: string;
+            calendarRightPaddingQuarterrange: string;
+            calendarRightPaddingYearrange: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {

package/lib/date-picker/src/panel/datetimerange.d.ts

@@ -234,6 +234,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarLeftPaddingYear: string;
             calendarLeftPaddingQuarter: string;
             calendarLeftPaddingMonthrange: string;
+            calendarLeftPaddingQuarterrange: string;
+            calendarLeftPaddingYearrange: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
@@ -242,6 +244,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarRightPaddingYear: string;
             calendarRightPaddingQuarter: string;
             calendarRightPaddingMonthrange: string;
+            calendarRightPaddingQuarterrange: string;
+            calendarRightPaddingYearrange: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {
@@ -1143,7 +1147,7 @@ declare const _default: import("vue").DefineComponent<{
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
     resetSelectingStatus: (e: MouseEvent) => void;
     handleDateClick: (dateItem: import("../utils").DateItem) => void;
-    handleColItemClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem, clickType: "start" | "end") => void;
+    handleColItemClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, clickType: "start" | "end") => void;
     handleDateMouseEnter: (dateItem: import("../utils").DateItem) => void;
     handleConfirmClick: () => void;
     startCalendarPrevYear: () => void;
@@ -1166,8 +1170,10 @@ declare const _default: import("vue").DefineComponent<{
     endDateArray: import("vue").ComputedRef<import("../utils").DateItem[]>;
     startYearArray: import("vue").ComputedRef<import("../utils").YearItem[]>;
     startMonthArray: import("vue").ComputedRef<import("../utils").MonthItem[]>;
+    startQuarterArray: import("vue").ComputedRef<import("../utils").QuarterItem[]>;
     endYearArray: import("vue").ComputedRef<import("../utils").YearItem[]>;
     endMonthArray: import("vue").ComputedRef<import("../utils").MonthItem[]>;
+    endQuarterArray: import("vue").ComputedRef<import("../utils").QuarterItem[]>;
     isSelecting: import("vue").Ref<boolean>;
     handleRangeShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;
     handleRangeShortcutClick: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;

package/lib/date-picker/src/panel/month.d.ts

@@ -211,6 +211,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarLeftPaddingYear: string;
             calendarLeftPaddingQuarter: string;
             calendarLeftPaddingMonthrange: string;
+            calendarLeftPaddingQuarterrange: string;
+            calendarLeftPaddingYearrange: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
@@ -219,6 +221,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarRightPaddingYear: string;
             calendarRightPaddingQuarter: string;
             calendarRightPaddingMonthrange: string;
+            calendarRightPaddingQuarterrange: string;
+            calendarRightPaddingYearrange: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {

package/lib/date-picker/src/panel/monthrange.d.ts

@@ -1,8 +1,8 @@
 import { PropType, VNode } from 'vue';
-import type { MonthItem, YearItem } from '../utils';
+import type { MonthItem, QuarterItem, YearItem } from '../utils';
 declare const _default: import("vue").DefineComponent<{
     type: {
-        type: PropType<"monthrange">;
+        type: PropType<"monthrange" | "quarterrange" | "yearrange">;
         required: true;
     };
     defaultCalendarStartTime: NumberConstructor;
@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     onRender: PropType<(() => void) | undefined>;
     panel: BooleanConstructor;
 }, {
-    renderItem: (item: YearItem | MonthItem, i: number, mergedClsPrefix: string, type: 'start' | 'end') => VNode;
+    renderItem: (item: YearItem | MonthItem | QuarterItem, i: number, mergedClsPrefix: string, type: 'start' | 'end') => VNode;
     startDateDisplayString: import("vue").Ref<string>;
     endDateInput: import("vue").Ref<string>;
     timePickerSize: import("vue").Ref<"small" | "medium" | "large">;
@@ -241,6 +241,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarLeftPaddingYear: string;
             calendarLeftPaddingQuarter: string;
             calendarLeftPaddingMonthrange: string;
+            calendarLeftPaddingQuarterrange: string;
+            calendarLeftPaddingYearrange: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
@@ -249,6 +251,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarRightPaddingYear: string;
             calendarRightPaddingQuarter: string;
             calendarRightPaddingMonthrange: string;
+            calendarRightPaddingQuarterrange: string;
+            calendarRightPaddingYearrange: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {
@@ -1150,7 +1154,7 @@ declare const _default: import("vue").DefineComponent<{
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
     resetSelectingStatus: (e: MouseEvent) => void;
     handleDateClick: (dateItem: import("../utils").DateItem) => void;
-    handleColItemClick: (dateItem: MonthItem | YearItem, clickType: "start" | "end") => void;
+    handleColItemClick: (dateItem: MonthItem | YearItem | QuarterItem, clickType: "start" | "end") => void;
     handleDateMouseEnter: (dateItem: import("../utils").DateItem) => void;
     handleConfirmClick: () => void;
     startCalendarPrevYear: () => void;
@@ -1173,14 +1177,16 @@ declare const _default: import("vue").DefineComponent<{
     endDateArray: import("vue").ComputedRef<import("../utils").DateItem[]>;
     startYearArray: import("vue").ComputedRef<YearItem[]>;
     startMonthArray: import("vue").ComputedRef<MonthItem[]>;
+    startQuarterArray: import("vue").ComputedRef<QuarterItem[]>;
     endYearArray: import("vue").ComputedRef<YearItem[]>;
     endMonthArray: import("vue").ComputedRef<MonthItem[]>;
+    endQuarterArray: import("vue").ComputedRef<QuarterItem[]>;
     isSelecting: import("vue").Ref<boolean>;
     handleRangeShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;
     handleRangeShortcutClick: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
-        type: PropType<"monthrange">;
+        type: PropType<"monthrange" | "quarterrange" | "yearrange">;
         required: true;
     };
     defaultCalendarStartTime: NumberConstructor;

package/lib/date-picker/src/panel/monthrange.js

@@ -42,7 +42,9 @@ exports.default = (0, vue_1.defineComponent)({
                         handleColItemClick(item, type);
                     } }, item.type === 'month'
                 ? item.dateObject.month + 1
-                : item.dateObject.year));
+                : item.type === 'quarter'
+                    ? item.dateObject.quarter
+                    : item.dateObject.year));
         };
         (0, vue_1.onMounted)(() => {
             useCalendarRef.justifyColumnsScrollState();
@@ -66,11 +68,13 @@ exports.default = (0, vue_1.defineComponent)({
                             }
                         }))
                     }),
-                    type === 'monthrange' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col` },
+                    type === 'monthrange' || type === 'quarterrange' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col` },
                         (0, vue_1.h)(_internal_1.NScrollbar, { ref: "startMonthScrollbarRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                             default: () => [
-                                this.startMonthArray.map((monthItem, i) => renderItem(monthItem, i, mergedClsPrefix, 'start')),
-                                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__padding` })
+                                (type === 'monthrange'
+                                    ? this.startMonthArray
+                                    : this.startQuarterArray).map((item, i) => renderItem(item, i, mergedClsPrefix, 'start')),
+                                type === 'monthrange' && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__padding` }))
                             ]
                         }))) : null)),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel__vertical-divider` }),
@@ -83,11 +87,13 @@ exports.default = (0, vue_1.defineComponent)({
                             }
                         }))
                     }),
-                    type === 'monthrange' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col` },
+                    type === 'monthrange' || type === 'quarterrange' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col` },
                         (0, vue_1.h)(_internal_1.NScrollbar, { ref: "endMonthScrollbarRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                             default: () => [
-                                this.endMonthArray.map((monthItem, i) => renderItem(monthItem, i, mergedClsPrefix, 'end')),
-                                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__padding` })
+                                (type === 'monthrange'
+                                    ? this.endMonthArray
+                                    : this.endQuarterArray).map((item, i) => renderItem(item, i, mergedClsPrefix, 'end')),
+                                type === 'monthrange' && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__padding` }))
                             ]
                         }))) : null)),
             this.datePickerSlots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-footer` }, (0, vue_1.renderSlot)(this.datePickerSlots, 'footer'))) : null,

package/lib/date-picker/src/panel/panelHeader.d.ts

@@ -293,6 +293,8 @@ declare const _default: import("vue").DefineComponent<{
                     calendarLeftPaddingYear: string;
                     calendarLeftPaddingQuarter: string;
                     calendarLeftPaddingMonthrange: string;
+                    calendarLeftPaddingQuarterrange: string;
+                    calendarLeftPaddingYearrange: string;
                     calendarRightPaddingDate: string;
                     calendarRightPaddingDatetime: string;
                     calendarRightPaddingDaterange: string;
@@ -301,6 +303,8 @@ declare const _default: import("vue").DefineComponent<{
                     calendarRightPaddingYear: string;
                     calendarRightPaddingQuarter: string;
                     calendarRightPaddingMonthrange: string;
+                    calendarRightPaddingQuarterrange: string;
+                    calendarRightPaddingYearrange: string;
                 };
                 peers: {
                     Input: import("../../../_mixins").Theme<"Input", {
@@ -1462,6 +1466,8 @@ declare const _default: import("vue").DefineComponent<{
                 calendarLeftPaddingYear: string;
                 calendarLeftPaddingQuarter: string;
                 calendarLeftPaddingMonthrange: string;
+                calendarLeftPaddingQuarterrange: string;
+                calendarLeftPaddingYearrange: string;
                 calendarRightPaddingDate: string;
                 calendarRightPaddingDatetime: string;
                 calendarRightPaddingDaterange: string;
@@ -1470,6 +1476,8 @@ declare const _default: import("vue").DefineComponent<{
                 calendarRightPaddingYear: string;
                 calendarRightPaddingQuarter: string;
                 calendarRightPaddingMonthrange: string;
+                calendarRightPaddingQuarterrange: string;
+                calendarRightPaddingYearrange: string;
             };
             peers: {
                 Input: import("../../../_mixins").Theme<"Input", {

package/lib/date-picker/src/panel/use-calendar.d.ts

@@ -209,6 +209,8 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
             calendarLeftPaddingYear: string;
             calendarLeftPaddingQuarter: string;
             calendarLeftPaddingMonthrange: string;
+            calendarLeftPaddingQuarterrange: string;
+            calendarLeftPaddingYearrange: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
@@ -217,6 +219,8 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
             calendarRightPaddingYear: string;
             calendarRightPaddingQuarter: string;
             calendarRightPaddingMonthrange: string;
+            calendarRightPaddingQuarterrange: string;
+            calendarRightPaddingYearrange: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {

package/lib/date-picker/src/panel/use-dual-calendar.d.ts

@@ -1,6 +1,6 @@
 import { ExtractPropTypes } from 'vue';
 import { VirtualListInst } from 'vueuc';
-import { DateItem, MonthItem, YearItem } from '../utils';
+import { DateItem, MonthItem, YearItem, QuarterItem } from '../utils';
 import { Shortcuts } from '../interface';
 import { ScrollbarInst } from '../../../_internal';
 declare const useDualCalendarProps: {
@@ -35,7 +35,7 @@ declare const useDualCalendarProps: {
     readonly onRender: import("vue").PropType<(() => void) | undefined>;
     readonly panel: BooleanConstructor;
 };
-declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarProps>, type: 'daterange' | 'datetimerange' | 'monthrange'): {
+declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarProps>, type: 'daterange' | 'datetimerange' | 'monthrange' | 'quarterrange' | 'yearrange'): {
     startDateDisplayString: import("vue").Ref<string>;
     endDateInput: import("vue").Ref<string>;
     timePickerSize: import("vue").Ref<"small" | "medium" | "large">;
@@ -240,6 +240,8 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
             calendarLeftPaddingYear: string;
             calendarLeftPaddingQuarter: string;
             calendarLeftPaddingMonthrange: string;
+            calendarLeftPaddingQuarterrange: string;
+            calendarLeftPaddingYearrange: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
@@ -248,6 +250,8 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
             calendarRightPaddingYear: string;
             calendarRightPaddingQuarter: string;
             calendarRightPaddingMonthrange: string;
+            calendarRightPaddingQuarterrange: string;
+            calendarRightPaddingYearrange: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {
@@ -1149,7 +1153,7 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
     resetSelectingStatus: (e: MouseEvent) => void;
     handleDateClick: (dateItem: DateItem) => void;
-    handleColItemClick: (dateItem: MonthItem | YearItem, clickType: 'start' | 'end') => void;
+    handleColItemClick: (dateItem: MonthItem | QuarterItem | YearItem, clickType: 'start' | 'end') => void;
     handleDateMouseEnter: (dateItem: DateItem) => void;
     handleConfirmClick: () => void;
     startCalendarPrevYear: () => void;
@@ -1172,8 +1176,10 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     endDateArray: import("vue").ComputedRef<DateItem[]>;
     startYearArray: import("vue").ComputedRef<YearItem[]>;
     startMonthArray: import("vue").ComputedRef<MonthItem[]>;
+    startQuarterArray: import("vue").ComputedRef<QuarterItem[]>;
     endYearArray: import("vue").ComputedRef<YearItem[]>;
     endMonthArray: import("vue").ComputedRef<MonthItem[]>;
+    endQuarterArray: import("vue").ComputedRef<QuarterItem[]>;
     isSelecting: import("vue").Ref<boolean>;
     handleRangeShortcutMouseenter: (shortcut: Shortcuts[string]) => void;
     handleRangeShortcutClick: (shortcut: Shortcuts[string]) => void;

package/lib/date-picker/src/panel/use-dual-calendar.js

@@ -117,6 +117,14 @@ function useDualCalendar(props, type) {
     const endYearArrayRef = (0, vue_1.computed)(() => {
         return (0, utils_1.yearArray)((0, utils_1.pluckValueFromRange)(props.value, 'end'), nowRef.value);
     });
+    const startQuarterArrayRef = (0, vue_1.computed)(() => {
+        const startValue = (0, utils_1.pluckValueFromRange)(props.value, 'start');
+        return (0, utils_1.quarterArray)(startValue !== null && startValue !== void 0 ? startValue : Date.now(), startValue, nowRef.value);
+    });
+    const endQuarterArrayRef = (0, vue_1.computed)(() => {
+        const endValue = (0, utils_1.pluckValueFromRange)(props.value, 'end');
+        return (0, utils_1.quarterArray)(endValue !== null && endValue !== void 0 ? endValue : Date.now(), endValue, nowRef.value);
+    });
     const startMonthArrayRef = (0, vue_1.computed)(() => {
         const startValue = (0, utils_1.pluckValueFromRange)(props.value, 'start');
         return (0, utils_1.monthArray)(startValue !== null && startValue !== void 0 ? startValue : Date.now(), startValue, nowRef.value);
@@ -545,11 +553,17 @@ function useDualCalendar(props, type) {
     function handleColItemClick(dateItem, clickType) {
         const { value } = props;
         const noCurrentValue = !Array.isArray(value);
-        const itemTs = dateItem.type === 'year'
+        const itemTs = dateItem.type === 'year' && type !== 'yearrange'
             ? noCurrentValue
-                ? (0, date_fns_1.set)(dateItem.ts, { month: (0, date_fns_1.getMonth)(new Date()) }).valueOf()
+                ? (0, date_fns_1.set)(dateItem.ts, {
+                    month: (0, date_fns_1.getMonth)(type === 'quarterrange'
+                        ? (0, date_fns_1.startOfQuarter)(new Date())
+                        : new Date())
+                }).valueOf()
                 : (0, date_fns_1.set)(dateItem.ts, {
-                    month: (0, date_fns_1.getMonth)(value[clickType === 'start' ? 0 : 1])
+                    month: (0, date_fns_1.getMonth)(type === 'quarterrange'
+                        ? (0, date_fns_1.startOfQuarter)(value[clickType === 'start' ? 0 : 1])
+                        : value[clickType === 'start' ? 0 : 1])
                 }).valueOf()
             : dateItem.ts;
         if (noCurrentValue) {
@@ -558,6 +572,7 @@ function useDualCalendar(props, type) {
             panelCommon.doUpdateValue(nextValue, props.panel);
             justifyColumnsScrollState(nextValue, 'start');
             justifyColumnsScrollState(nextValue, 'end');
+            panelCommon.disableTransitionOneTick();
             return;
         }
         const nextValue = [value[0], value[1]];
@@ -579,6 +594,7 @@ function useDualCalendar(props, type) {
         panelCommon.doUpdateValue(nextValue, props.panel);
         switch (type) {
             case 'monthrange':
+            case 'quarterrange':
                 panelCommon.disableTransitionOneTick();
                 if (otherPartsChanged) {
                     justifyColumnsScrollState(nextValue, 'start');
@@ -588,6 +604,10 @@ function useDualCalendar(props, type) {
                     justifyColumnsScrollState(nextValue, clickType);
                 }
                 break;
+            case 'yearrange':
+                panelCommon.disableTransitionOneTick();
+                justifyColumnsScrollState(nextValue, 'start');
+                justifyColumnsScrollState(nextValue, 'end');
         }
     }
     function handleStartYearVlScroll() {
@@ -640,7 +660,7 @@ function useDualCalendar(props, type) {
         endCalendarNextMonth,
         endCalendarNextYear,
         mergedIsDateDisabled,
-        changeStartEndTime, ranges: rangesRef, startCalendarMonth: startCalendarMonthRef, startCalendarYear: startCalendarYearRef, endCalendarMonth: endCalendarMonthRef, endCalendarYear: endCalendarYearRef, weekdays: weekdaysRef, startDateArray: startDateArrayRef, endDateArray: endDateArrayRef, startYearArray: startYearArrayRef, startMonthArray: startMonthArrayRef, endYearArray: endYearArrayRef, endMonthArray: endMonthArrayRef, isSelecting: isSelectingRef, handleRangeShortcutMouseenter,
+        changeStartEndTime, ranges: rangesRef, startCalendarMonth: startCalendarMonthRef, startCalendarYear: startCalendarYearRef, endCalendarMonth: endCalendarMonthRef, endCalendarYear: endCalendarYearRef, weekdays: weekdaysRef, startDateArray: startDateArrayRef, endDateArray: endDateArrayRef, startYearArray: startYearArrayRef, startMonthArray: startMonthArrayRef, startQuarterArray: startQuarterArrayRef, endYearArray: endYearArrayRef, endMonthArray: endMonthArrayRef, endQuarterArray: endQuarterArrayRef, isSelecting: isSelectingRef, handleRangeShortcutMouseenter,
         handleRangeShortcutClick }, panelCommon), validation), childComponentRefs), { 
         // datetimerangeonly
         startDateDisplayString: startDateInput, endDateInput: endDateInputRef, timePickerSize: panelCommon.timePickerSize, startTimeValue: startTimeValueRef, endTimeValue: endTimeValueRef, datePickerSlots, shortcuts: shortcutsRef, startCalendarDateTime: startCalendarDateTimeRef, endCalendarDateTime: endCalendarDateTimeRef, justifyColumnsScrollState, handleFocusDetectorFocus: panelCommon.handleFocusDetectorFocus, handleStartTimePickerChange,

package/lib/date-picker/src/panel/use-panel-common.d.ts

@@ -183,6 +183,8 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
             calendarLeftPaddingYear: string;
             calendarLeftPaddingQuarter: string;
             calendarLeftPaddingMonthrange: string;
+            calendarLeftPaddingQuarterrange: string;
+            calendarLeftPaddingYearrange: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
@@ -191,6 +193,8 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
             calendarRightPaddingYear: string;
             calendarRightPaddingQuarter: string;
             calendarRightPaddingMonthrange: string;
+            calendarRightPaddingQuarterrange: string;
+            calendarRightPaddingYearrange: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {

package/lib/date-picker/src/utils.d.ts

@@ -51,7 +51,7 @@ export interface QuarterItem {
  */
 declare function dateArray(monthTs: number, valueTs: number | [number, number] | null, currentTs: number, startDay: 0 | 1 | 2 | 3 | 4 | 5 | 6, strip?: boolean): DateItem[];
 declare function monthArray(yearAnchorTs: number, valueTs: number | null, currentTs: number): MonthItem[];
-declare function quarterArray(quarterTs: number, valueTs: number | null, currentTs: number): QuarterItem[];
+declare function quarterArray(yearAnchorTs: number, valueTs: number | null, currentTs: number): QuarterItem[];
 declare function yearArray(valueTs: number | null, currentTs: number): YearItem[];
 declare function strictParse(string: string, pattern: string, backup: Date, option: {
     locale: NDateLocale['locale'];

package/lib/date-picker/src/utils.js

@@ -151,9 +151,9 @@ function monthArray(yearAnchorTs, valueTs, currentTs) {
     return calendarMonths;
 }
 exports.monthArray = monthArray;
-function quarterArray(quarterTs, valueTs, currentTs) {
+function quarterArray(yearAnchorTs, valueTs, currentTs) {
     const calendarQuarters = [];
-    const yearStart = (0, date_fns_1.startOfYear)(quarterTs);
+    const yearStart = (0, date_fns_1.startOfYear)(yearAnchorTs);
     for (let i = 0; i < 4; i++) {
         calendarQuarters.push(quarterItem((0, date_fns_1.getTime)((0, date_fns_1.addQuarters)(yearStart, i)), valueTs, currentTs));
     }

package/lib/date-picker/styles/_common.d.ts

@@ -20,6 +20,8 @@ declare const _default: {
     calendarLeftPaddingYear: string;
     calendarLeftPaddingQuarter: string;
     calendarLeftPaddingMonthrange: string;
+    calendarLeftPaddingQuarterrange: string;
+    calendarLeftPaddingYearrange: string;
     calendarRightPaddingDate: string;
     calendarRightPaddingDatetime: string;
     calendarRightPaddingDaterange: string;
@@ -28,5 +30,7 @@ declare const _default: {
     calendarRightPaddingYear: string;
     calendarRightPaddingQuarter: string;
     calendarRightPaddingMonthrange: string;
+    calendarRightPaddingQuarterrange: string;
+    calendarRightPaddingYearrange: string;
 };
 export default _default;

package/lib/date-picker/styles/_common.js

@@ -23,6 +23,8 @@ exports.default = {
     calendarLeftPaddingYear: '0',
     calendarLeftPaddingQuarter: '0',
     calendarLeftPaddingMonthrange: '0',
+    calendarLeftPaddingQuarterrange: '0',
+    calendarLeftPaddingYearrange: '0',
     calendarRightPaddingDate: '6px 12px 4px 12px',
     calendarRightPaddingDatetime: '4px 12px',
     calendarRightPaddingDaterange: '6px 12px 4px 12px',
@@ -30,5 +32,7 @@ exports.default = {
     calendarRightPaddingMonth: '0',
     calendarRightPaddingYear: '0',
     calendarRightPaddingQuarter: '0',
-    calendarRightPaddingMonthrange: '0'
+    calendarRightPaddingMonthrange: '0',
+    calendarRightPaddingQuarterrange: '0',
+    calendarRightPaddingYearrange: '0'
 };

package/lib/date-picker/styles/light.d.ts

@@ -49,6 +49,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     calendarLeftPaddingYear: string;
     calendarLeftPaddingQuarter: string;
     calendarLeftPaddingMonthrange: string;
+    calendarLeftPaddingQuarterrange: string;
+    calendarLeftPaddingYearrange: string;
     calendarRightPaddingDate: string;
     calendarRightPaddingDatetime: string;
     calendarRightPaddingDaterange: string;
@@ -57,6 +59,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     calendarRightPaddingYear: string;
     calendarRightPaddingQuarter: string;
     calendarRightPaddingMonthrange: string;
+    calendarRightPaddingQuarterrange: string;
+    calendarRightPaddingYearrange: string;
 };
 export declare type DatePickerThemeVars = ReturnType<typeof self>;
 declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
@@ -109,6 +113,8 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     calendarLeftPaddingYear: string;
     calendarLeftPaddingQuarter: string;
     calendarLeftPaddingMonthrange: string;
+    calendarLeftPaddingQuarterrange: string;
+    calendarLeftPaddingYearrange: string;
     calendarRightPaddingDate: string;
     calendarRightPaddingDatetime: string;
     calendarRightPaddingDaterange: string;
@@ -117,6 +123,8 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     calendarRightPaddingYear: string;
     calendarRightPaddingQuarter: string;
     calendarRightPaddingMonthrange: string;
+    calendarRightPaddingQuarterrange: string;
+    calendarRightPaddingYearrange: string;
 }, {
     Input: import("../../_mixins").Theme<"Input", {
         countTextColor: string;

package/lib/drawer/src/DrawerBodyWrapper.js

@@ -40,7 +40,7 @@ exports.default = (0, vue_1.defineComponent)({
             default: true
         },
         showMask: {
-            type: Boolean,
+            type: [Boolean, String],
             required: true
         },
         onClickoutside: Function,

package/lib/grid/src/Grid.js

@@ -137,7 +137,7 @@ exports.default = (0, vue_1.defineComponent)({
                         clonedNode.props.privateShow = false;
                     }
                     else {
-                        clonedNode.props = { pirvateShow: false };
+                        clonedNode.props = { privateShow: false };
                     }
                     childrenAndRawSpan.push({
                         child: clonedNode,

package/lib/locales/common/viVN.d.ts

@@ -0,0 +1,3 @@
+import type { NLocale } from './enUS';
+declare const viVN: NLocale;
+export default viVN;