naive-ui 2.21.2 → 2.22.0

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

@@ -4,8 +4,8 @@ const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
 const button_1 = require("../../../button");
 const _internal_1 = require("../../../_internal");
-const use_calendar_1 = require("./use-calendar");
 const config_1 = require("../config");
+const use_calendar_1 = require("./use-calendar");
 /**
  * Month Panel
  * Update picker value on:
@@ -14,32 +14,41 @@ const config_1 = require("../config");
  */
 exports.default = (0, vue_1.defineComponent)({
     name: 'MonthPanel',
-    props: Object.assign(Object.assign({}, use_calendar_1.useCalendar.props), { type: {
+    props: Object.assign(Object.assign({}, use_calendar_1.useCalendarProps), { type: {
             type: String,
             required: true
         } }),
     setup(props) {
         const useCalendarRef = (0, use_calendar_1.useCalendar)(props, props.type);
+        const getRenderContent = (item) => {
+            switch (item.type) {
+                case 'year':
+                    return item.dateObject.year;
+                case 'month':
+                    return item.dateObject.month + 1;
+                case 'quarter':
+                    return `Q ${item.dateObject.quarter}`;
+            }
+        };
         const renderItem = (item, i, mergedClsPrefix) => {
             const { mergedIsDateDisabled, handleDateClick } = useCalendarRef;
             return ((0, vue_1.h)("div", { "data-n-date": true, key: i, class: [
                     `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item`,
                     {
-                        [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`]: item.type === 'month'
-                            ? item.isCurrentMonth
-                            : item.isCurrentYear,
+                        [`${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`]: mergedIsDateDisabled(item.ts)
                     }
-                ], onClick: () => handleDateClick(item) }, item.type === 'month'
-                ? item.dateObject.month + 1
-                : item.dateObject.year));
+                ], onClick: () => handleDateClick(item) }, getRenderContent(item)));
         };
         return Object.assign(Object.assign({}, useCalendarRef), { renderItem });
     },
     render() {
         const { mergedClsPrefix, mergedTheme, shortcuts, actions, renderItem, type } = this;
-        return ((0, vue_1.h)("div", { ref: "selfRef", tabindex: 0, class: `${mergedClsPrefix}-date-panel ${mergedClsPrefix}-date-panel--month`, onFocus: this.handlePanelFocus, onKeydown: this.handlePanelKeyDown },
+        return ((0, vue_1.h)("div", { ref: "selfRef", tabindex: 0, class: [
+                `${mergedClsPrefix}-date-panel`,
+                `${mergedClsPrefix}-date-panel--month`
+            ], onFocus: this.handlePanelFocus, onKeydown: this.handlePanelKeyDown },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar` },
                 (0, vue_1.h)(_internal_1.NScrollbar, { ref: "scrollbarInstRef", class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col`, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, container: this.virtualListContainer, content: this.virtualListContent, horizontalRailStyle: { zIndex: 1 }, verticalRailStyle: { zIndex: 1 } }, {
                     default: () => ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "yearScrollRef", items: this.yearArray, itemSize: config_1.MONTH_ITEM_HEIGHT, showScrollbar: false, keyField: "ts", onScroll: this.handleVirtualListScroll, paddingBottom: 4 }, {
@@ -48,11 +57,13 @@ exports.default = (0, vue_1.defineComponent)({
                         }
                     }))
                 }),
-                type === 'month' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col` },
+                type === 'month' || type === 'quarter' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col` },
                     (0, vue_1.h)(_internal_1.NScrollbar, { ref: "monthScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                         default: () => [
-                            this.monthArray.map((monthItem, i) => renderItem(monthItem, i, mergedClsPrefix)),
-                            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__padding` })
+                            (type === 'month'
+                                ? this.monthArray
+                                : this.quarterArray).map((item, i) => renderItem(item, i, mergedClsPrefix)),
+                            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-${type}-calendar__padding` })
                         ]
                     }))) : null),
             this.datePickerSlots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-footer` }, {

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

@@ -1,6 +1,6 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { Shortcuts } from '../interface';
-import type { DateItem, MonthItem, YearItem } from '../utils';
+import type { Shortcuts } from '../interface';
+import type { DateItem, MonthItem, YearItem, QuarterItem } from '../utils';
 declare const useCalendarProps: {
     readonly actions: {
         readonly type: PropType<string[]>;
@@ -20,6 +20,7 @@ declare const useCalendarProps: {
         readonly default: null;
     };
     readonly shortcuts: PropType<Shortcuts>;
+    readonly defaultTime: PropType<import("../interface").DefaultTime>;
     readonly onConfirm: FunctionConstructor;
     readonly onClose: PropType<import("../interface").OnClose>;
     readonly onTabOut: FunctionConstructor;
@@ -28,8 +29,8 @@ declare const useCalendarProps: {
         readonly required: true;
     };
 };
-declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, type: 'date' | 'datetime' | 'month' | 'year'): {
-    handleDateClick: (dateItem: DateItem | MonthItem | YearItem) => void;
+declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, type: 'date' | 'datetime' | 'month' | 'year' | 'quarter'): {
+    handleDateClick: (dateItem: DateItem | MonthItem | YearItem | QuarterItem) => void;
     handleDateInputBlur: () => void;
     handleDateInput: (value: string) => void;
     handleTimePickerChange: (value: number | null) => void;
@@ -212,12 +213,14 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
             calendarLeftPaddingDatetimerange: string;
             calendarLeftPaddingMonth: string;
             calendarLeftPaddingYear: string;
+            calendarLeftPaddingQuarter: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
             calendarRightPaddingDatetimerange: string;
             calendarRightPaddingMonth: string;
             calendarRightPaddingYear: string;
+            calendarRightPaddingQuarter: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {
@@ -294,9 +297,9 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -519,9 +522,9 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
-                    colorOpacitySecondary: number;
-                    colorOpacitySecondaryHover: number;
-                    colorOpacitySecondaryPressed: number;
+                    colorOpacitySecondary: string;
+                    colorOpacitySecondaryHover: string;
+                    colorOpacitySecondaryPressed: string;
                     colorSecondary: string;
                     colorSecondaryHover: string;
                     colorSecondaryPressed: string;
@@ -806,9 +809,9 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                         fontSizeMedium: string;
                         fontSizeLarge: string;
                         opacityDisabled: string;
-                        colorOpacitySecondary: number;
-                        colorOpacitySecondaryHover: number;
-                        colorOpacitySecondaryPressed: number;
+                        colorOpacitySecondary: string;
+                        colorOpacitySecondaryHover: string;
+                        colorOpacitySecondaryPressed: string;
                         colorSecondary: string;
                         colorSecondaryHover: string;
                         colorSecondaryPressed: string;
@@ -1074,6 +1077,11 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
         yearFormat: string;
         monthFormat: string;
         dayFormat: string;
+        yearTypeFormat: string;
+        monthTypeFormat: string;
+        dateFormat: string;
+        dateTimeFormat: string;
+        quarterFormat: string;
         clear: string;
         now: string;
         confirm: string;
@@ -1082,6 +1090,8 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
         datePlaceholder: string;
         datetimePlaceholder: string;
         monthPlaceholder: string;
+        yearPlaceholder: string;
+        quarterPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;
@@ -1115,6 +1125,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
     dateArray: import("vue").ComputedRef<DateItem[]>;
     monthArray: import("vue").ComputedRef<MonthItem[]>;
     yearArray: import("vue").ComputedRef<YearItem[]>;
+    quarterArray: import("vue").ComputedRef<QuarterItem[]>;
     calendarYear: import("vue").ComputedRef<string>;
     calendarMonth: import("vue").ComputedRef<string>;
     weekdays: import("vue").ComputedRef<string[]>;
@@ -1128,33 +1139,4 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
     handleSingleShortcutMouseenter: (shortcut: Shortcuts[string]) => void;
     handleSingleShortcutClick: (shortcut: Shortcuts[string]) => void;
 };
-declare namespace useCalendar {
-    var props: {
-        readonly actions: {
-            readonly type: PropType<string[]>;
-            readonly default: () => string[];
-        };
-        readonly active: BooleanConstructor;
-        readonly dateFormat: {
-            readonly type: StringConstructor;
-            readonly default: "yyyy-MM-dd";
-        };
-        readonly timeFormat: {
-            readonly type: StringConstructor;
-            readonly default: "HH:mm:ss";
-        };
-        readonly value: {
-            readonly type: PropType<import("../interface").Value | null>;
-            readonly default: null;
-        };
-        readonly shortcuts: PropType<Shortcuts>;
-        readonly onConfirm: FunctionConstructor;
-        readonly onClose: PropType<import("../interface").OnClose>;
-        readonly onTabOut: FunctionConstructor;
-        readonly onUpdateValue: {
-            readonly type: PropType<import("../interface").OnPanelUpdateValue>;
-            readonly required: true;
-        };
-    };
-}
-export { useCalendar };
+export { useCalendar, useCalendarProps };

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

@@ -1,19 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCalendar = void 0;
+exports.useCalendarProps = exports.useCalendar = void 0;
 const vue_1 = require("vue");
 const date_fns_1 = require("date-fns");
 const utils_1 = require("../utils");
-const use_panel_common_1 = require("./use-panel-common");
 const interface_1 = require("../interface");
-const useCalendarProps = Object.assign(Object.assign({}, use_panel_common_1.usePanelCommon.props), { actions: {
+const use_panel_common_1 = require("./use-panel-common");
+const useCalendarProps = Object.assign(Object.assign({}, use_panel_common_1.usePanelCommonProps), { actions: {
         type: Array,
         default: () => ['now', 'clear', 'confirm']
     } });
+exports.useCalendarProps = useCalendarProps;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useCalendar(props, type) {
     const panelCommon = (0, use_panel_common_1.usePanelCommon)(props);
-    const { isValueInvalidRef, isDateDisabledRef, isDateInvalidRef, isTimeInvalidRef, isDateTimeInvalidRef, isHourDisabledRef, isMinuteDisabledRef, isSecondDisabledRef, localeRef, firstDayOfWeekRef, datePickerSlots, scrollYearMonth
+    const { isValueInvalidRef, isDateDisabledRef, isDateInvalidRef, isTimeInvalidRef, isDateTimeInvalidRef, isHourDisabledRef, isMinuteDisabledRef, isSecondDisabledRef, localeRef, firstDayOfWeekRef, datePickerSlots, scrollPickerColumns
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      } = (0, vue_1.inject)(interface_1.datePickerInjectionKey);
     const validation = {
@@ -46,6 +47,9 @@ function useCalendar(props, type) {
     const yearArrayRef = (0, vue_1.computed)(() => {
         return (0, utils_1.yearArray)(calendarValueRef.value, props.value, nowRef.value);
     });
+    const querterArrayRef = (0, vue_1.computed)(() => {
+        return (0, utils_1.quarterArray)(calendarValueRef.value, props.value, nowRef.value);
+    });
     const weekdaysRef = (0, vue_1.computed)(() => {
         return dateArrayRef.value.slice(0, 7).map((dateItem) => {
             const { ts } = dateItem;
@@ -79,6 +83,8 @@ function useCalendar(props, type) {
             return (0, date_fns_1.getTime)((0, date_fns_1.startOfMonth)(value));
         if (type === 'year')
             return (0, date_fns_1.getTime)((0, date_fns_1.startOfYear)(value));
+        if (type === 'quarter')
+            return (0, date_fns_1.getTime)((0, date_fns_1.startOfQuarter)(value));
         return (0, date_fns_1.getTime)((0, date_fns_1.startOfDay)(value));
     }
     function mergedIsDateDisabled(ts) {
@@ -146,17 +152,30 @@ function useCalendar(props, type) {
         else {
             newValue = Date.now();
         }
-        newValue = (0, date_fns_1.getTime)((0, date_fns_1.set)(newValue, dateItem.dateObject));
-        panelCommon.doUpdateValue(sanitizeValue(newValue), type === 'date' || type === 'year');
-        if (type === 'date') {
-            panelCommon.doClose();
-        }
-        else if (type === 'month') {
-            panelCommon.disableTransitionOneTick();
-            scrollYearMonth(newValue);
+        if (type === 'datetime' &&
+            props.defaultTime !== null &&
+            !Array.isArray(props.defaultTime)) {
+            const time = (0, utils_1.getDefaultTime)(props.defaultTime);
+            if (time) {
+                newValue = (0, date_fns_1.getTime)((0, date_fns_1.set)(newValue, time)); // setDate getTime(addMilliseconds(startOfDay(newValue), time))
+            }
         }
-        else if (type === 'year') {
-            panelCommon.doClose();
+        newValue = (0, date_fns_1.getTime)(dateItem.type === 'quarter' && dateItem.dateObject.quarter
+            ? (0, date_fns_1.setQuarter)((0, date_fns_1.setYear)(newValue, dateItem.dateObject.year), dateItem.dateObject.quarter)
+            : (0, date_fns_1.set)(newValue, dateItem.dateObject));
+        panelCommon.doUpdateValue(sanitizeValue(newValue), type === 'date' || type === 'year');
+        switch (type) {
+            case 'date':
+            case 'year':
+                panelCommon.doClose();
+                break;
+            case 'month':
+                panelCommon.disableTransitionOneTick();
+                scrollPickerColumns(newValue);
+                break;
+            case 'quarter':
+                scrollPickerColumns(newValue);
+                break;
         }
     }
     function deriveDateInputValue(time) {
@@ -230,7 +249,7 @@ function useCalendar(props, type) {
         panelCommon.clearPendingValue();
         handleConfirmClick();
     }
-    return Object.assign(Object.assign(Object.assign({ dateArray: dateArrayRef, monthArray: monthArrayRef, yearArray: yearArrayRef, calendarYear: calendarYearRef, calendarMonth: calendarMonthRef, weekdays: weekdaysRef, mergedIsDateDisabled,
+    return Object.assign(Object.assign(Object.assign({ dateArray: dateArrayRef, monthArray: monthArrayRef, yearArray: yearArrayRef, quarterArray: querterArrayRef, calendarYear: calendarYearRef, calendarMonth: calendarMonthRef, weekdays: weekdaysRef, mergedIsDateDisabled,
         nextYear,
         prevYear,
         nextMonth,
@@ -253,4 +272,3 @@ function useCalendar(props, type) {
         scrollbarInstRef });
 }
 exports.useCalendar = useCalendar;
-useCalendar.props = useCalendarProps;

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

@@ -1,6 +1,6 @@
 import { ExtractPropTypes } from 'vue';
 import { DateItem } from '../utils';
-import { Shortcuts } from '../interface';
+import type { Shortcuts } from '../interface';
 declare const useDualCalendarProps: {
     readonly actions: {
         readonly type: ArrayConstructor;
@@ -20,6 +20,7 @@ declare const useDualCalendarProps: {
         readonly default: null;
     };
     readonly shortcuts: import("vue").PropType<Shortcuts>;
+    readonly defaultTime: import("vue").PropType<import("../interface").DefaultTime>;
     readonly onConfirm: FunctionConstructor;
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
     readonly onTabOut: FunctionConstructor;
@@ -210,12 +211,14 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
             calendarLeftPaddingDatetimerange: string;
             calendarLeftPaddingMonth: string;
             calendarLeftPaddingYear: string;
+            calendarLeftPaddingQuarter: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
             calendarRightPaddingDatetimerange: string;
             calendarRightPaddingMonth: string;
             calendarRightPaddingYear: string;
+            calendarRightPaddingQuarter: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {
@@ -292,9 +295,9 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -517,9 +520,9 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
-                    colorOpacitySecondary: number;
-                    colorOpacitySecondaryHover: number;
-                    colorOpacitySecondaryPressed: number;
+                    colorOpacitySecondary: string;
+                    colorOpacitySecondaryHover: string;
+                    colorOpacitySecondaryPressed: string;
                     colorSecondary: string;
                     colorSecondaryHover: string;
                     colorSecondaryPressed: string;
@@ -804,9 +807,9 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                         fontSizeMedium: string;
                         fontSizeLarge: string;
                         opacityDisabled: string;
-                        colorOpacitySecondary: number;
-                        colorOpacitySecondaryHover: number;
-                        colorOpacitySecondaryPressed: number;
+                        colorOpacitySecondary: string;
+                        colorOpacitySecondaryHover: string;
+                        colorOpacitySecondaryPressed: string;
                         colorSecondary: string;
                         colorSecondaryHover: string;
                         colorSecondaryPressed: string;
@@ -1072,6 +1075,11 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
         yearFormat: string;
         monthFormat: string;
         dayFormat: string;
+        yearTypeFormat: string;
+        monthTypeFormat: string;
+        dateFormat: string;
+        dateTimeFormat: string;
+        quarterFormat: string;
         clear: string;
         now: string;
         confirm: string;
@@ -1080,6 +1088,8 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
         datePlaceholder: string;
         datetimePlaceholder: string;
         monthPlaceholder: string;
+        yearPlaceholder: string;
+        quarterPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;
@@ -1128,33 +1138,4 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     handleRangeShortcutMouseenter: (shortcut: Shortcuts[string]) => void;
     handleRangeShortcutClick: (shortcut: Shortcuts[string]) => void;
 };
-declare namespace useDualCalendar {
-    var props: {
-        readonly actions: {
-            readonly type: ArrayConstructor;
-            readonly default: () => string[];
-        };
-        readonly active: BooleanConstructor;
-        readonly dateFormat: {
-            readonly type: StringConstructor;
-            readonly default: "yyyy-MM-dd";
-        };
-        readonly timeFormat: {
-            readonly type: StringConstructor;
-            readonly default: "HH:mm:ss";
-        };
-        readonly value: {
-            readonly type: import("vue").PropType<import("../interface").Value | null>;
-            readonly default: null;
-        };
-        readonly shortcuts: import("vue").PropType<Shortcuts>;
-        readonly onConfirm: FunctionConstructor;
-        readonly onClose: import("vue").PropType<import("../interface").OnClose>;
-        readonly onTabOut: FunctionConstructor;
-        readonly onUpdateValue: {
-            readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
-            readonly required: true;
-        };
-    };
-}
-export { useDualCalendar };
+export { useDualCalendar, useDualCalendarProps };

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

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDualCalendar = void 0;
+exports.useDualCalendarProps = exports.useDualCalendar = void 0;
 const vue_1 = require("vue");
 const date_fns_1 = require("date-fns");
 const utils_1 = require("../utils");
-const use_panel_common_1 = require("./use-panel-common");
 const interface_1 = require("../interface");
-const useDualCalendarProps = Object.assign(Object.assign({}, use_panel_common_1.usePanelCommon.props), { actions: {
+const use_panel_common_1 = require("./use-panel-common");
+const useDualCalendarProps = Object.assign(Object.assign({}, use_panel_common_1.usePanelCommonProps), { actions: {
         type: Array,
         default: () => ['clear', 'confirm']
     } });
+exports.useDualCalendarProps = useDualCalendarProps;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useDualCalendar(props, type = 'datetime') {
     const { isDateDisabledRef, isStartHourDisabledRef, isEndHourDisabledRef, isStartMinuteDisabledRef, isEndMinuteDisabledRef, isStartSecondDisabledRef, isEndSecondDisabledRef, isStartDateInvalidRef, isEndDateInvalidRef, isStartTimeInvalidRef, isEndTimeInvalidRef, isStartValueInvalidRef, isEndValueInvalidRef, isRangeInvalidRef, localeRef, rangesRef, closeOnSelectRef, updateValueOnCloseRef, firstDayOfWeekRef, datePickerSlots
@@ -290,8 +291,24 @@ function useDualCalendar(props, type = 'datetime') {
         if (typeof startTime !== 'number') {
             startTime = (0, date_fns_1.getTime)(startTime);
         }
-        if (typeof endTime !== 'number') {
-            endTime = (0, date_fns_1.getTime)(endTime);
+        let startDefaultTime;
+        let endDefaultTime;
+        if (type === 'datetimerange') {
+            const { defaultTime } = props;
+            if (Array.isArray(defaultTime)) {
+                startDefaultTime = (0, utils_1.getDefaultTime)(defaultTime[0]);
+                endDefaultTime = (0, utils_1.getDefaultTime)(defaultTime[1]);
+            }
+            else {
+                startDefaultTime = (0, utils_1.getDefaultTime)(defaultTime);
+                endDefaultTime = startDefaultTime;
+            }
+        }
+        if (startDefaultTime) {
+            startTime = (0, date_fns_1.getTime)((0, date_fns_1.set)(startTime, startDefaultTime));
+        }
+        if (endDefaultTime) {
+            endTime = (0, date_fns_1.getTime)((0, date_fns_1.set)(endTime, endDefaultTime));
         }
         panelCommon.doUpdateValue([startTime, endTime], false);
     }
@@ -471,4 +488,3 @@ function useDualCalendar(props, type = 'datetime') {
         datePickerSlots, shortcuts: shortcutsRef });
 }
 exports.useDualCalendar = useDualCalendar;
-useDualCalendar.props = useDualCalendarProps;

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

@@ -1,5 +1,5 @@
 import { PropType, ExtractPropTypes } from 'vue';
-import { Value, OnPanelUpdateValue, OnClose, Shortcuts } from '../interface';
+import { Value, OnPanelUpdateValue, OnClose, Shortcuts, DefaultTime } from '../interface';
 declare const usePanelCommonProps: {
     readonly active: BooleanConstructor;
     readonly dateFormat: {
@@ -15,6 +15,7 @@ declare const usePanelCommonProps: {
         readonly default: null;
     };
     readonly shortcuts: PropType<Shortcuts>;
+    readonly defaultTime: PropType<DefaultTime>;
     readonly onConfirm: FunctionConstructor;
     readonly onClose: PropType<OnClose>;
     readonly onTabOut: FunctionConstructor;
@@ -176,12 +177,14 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
             calendarLeftPaddingDatetimerange: string;
             calendarLeftPaddingMonth: string;
             calendarLeftPaddingYear: string;
+            calendarLeftPaddingQuarter: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
             calendarRightPaddingDatetimerange: string;
             calendarRightPaddingMonth: string;
             calendarRightPaddingYear: string;
+            calendarRightPaddingQuarter: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {
@@ -258,9 +261,9 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -483,9 +486,9 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
-                    colorOpacitySecondary: number;
-                    colorOpacitySecondaryHover: number;
-                    colorOpacitySecondaryPressed: number;
+                    colorOpacitySecondary: string;
+                    colorOpacitySecondaryHover: string;
+                    colorOpacitySecondaryPressed: string;
                     colorSecondary: string;
                     colorSecondaryHover: string;
                     colorSecondaryPressed: string;
@@ -770,9 +773,9 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
                         fontSizeMedium: string;
                         fontSizeLarge: string;
                         opacityDisabled: string;
-                        colorOpacitySecondary: number;
-                        colorOpacitySecondaryHover: number;
-                        colorOpacitySecondaryPressed: number;
+                        colorOpacitySecondary: string;
+                        colorOpacitySecondaryHover: string;
+                        colorOpacitySecondaryPressed: string;
                         colorSecondary: string;
                         colorSecondaryHover: string;
                         colorSecondaryPressed: string;
@@ -1039,6 +1042,11 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
         yearFormat: string;
         monthFormat: string;
         dayFormat: string;
+        yearTypeFormat: string;
+        monthTypeFormat: string;
+        dateFormat: string;
+        dateTimeFormat: string;
+        quarterFormat: string;
         clear: string;
         now: string;
         confirm: string;
@@ -1047,6 +1055,8 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
         datePlaceholder: string;
         datetimePlaceholder: string;
         monthPlaceholder: string;
+        yearPlaceholder: string;
+        quarterPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;
@@ -1070,29 +1080,4 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
     getShortcutValue: (shortcut: Shortcuts[string]) => number | [number, number];
     handleShortcutMouseleave: () => void;
 };
-declare namespace usePanelCommon {
-    var props: {
-        readonly active: BooleanConstructor;
-        readonly dateFormat: {
-            readonly type: StringConstructor;
-            readonly default: "yyyy-MM-dd";
-        };
-        readonly timeFormat: {
-            readonly type: StringConstructor;
-            readonly default: "HH:mm:ss";
-        };
-        readonly value: {
-            readonly type: PropType<Value | null>;
-            readonly default: null;
-        };
-        readonly shortcuts: PropType<Shortcuts>;
-        readonly onConfirm: FunctionConstructor;
-        readonly onClose: PropType<OnClose>;
-        readonly onTabOut: FunctionConstructor;
-        readonly onUpdateValue: {
-            readonly type: PropType<OnPanelUpdateValue>;
-            readonly required: true;
-        };
-    };
-}
-export { usePanelCommon };
+export { usePanelCommon, usePanelCommonProps };

package/lib/date-picker/src/panel/use-panel-common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePanelCommon = void 0;
+exports.usePanelCommonProps = exports.usePanelCommon = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const interface_1 = require("../interface");
@@ -21,6 +21,7 @@ const usePanelCommonProps = {
         default: null
     },
     shortcuts: Object,
+    defaultTime: [Number, String, Array],
     onConfirm: Function,
     onClose: Function,
     onTabOut: Function,
@@ -29,6 +30,7 @@ const usePanelCommonProps = {
         required: true
     }
 };
+exports.usePanelCommonProps = usePanelCommonProps;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function usePanelCommon(props) {
     const { dateLocaleRef, timePickerSizeRef, localeRef, mergedClsPrefixRef, mergedThemeRef
@@ -143,4 +145,3 @@ function usePanelCommon(props) {
     };
 }
 exports.usePanelCommon = usePanelCommon;
-usePanelCommon.props = usePanelCommonProps;