naive-ui 2.23.2 → 2.24.3

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

@@ -17,7 +17,6 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const utils_1 = require("./utils");
 const validation_utils_1 = require("./validation-utils");
-const config_1 = require("./config");
 const interface_1 = require("./interface");
 const datetime_1 = __importDefault(require("./panel/datetime"));
 const datetimerange_1 = __importDefault(require("./panel/datetimerange"));
@@ -28,37 +27,33 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const datePickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, bordered: {
         type: Boolean,
         default: undefined
-    }, clearable: Boolean, updateValueOnClose: Boolean, defaultValue: {
-        type: [Number, Array],
-        default: null
-    }, defaultTime: [Number, String, Array], disabled: {
+    }, clearable: Boolean, updateValueOnClose: Boolean, defaultValue: [Number, Array], defaultFormattedValue: [String, Array], defaultTime: [Number, String, Array], disabled: {
         type: Boolean,
         default: undefined
     }, placement: {
         type: String,
         default: 'bottom-start'
-    }, value: [Number, Array], size: String, type: {
+    }, value: [Number, Array], formattedValue: [String, Array], size: String, type: {
         type: String,
         default: 'date'
-    }, separator: String, placeholder: String, startPlaceholder: String, endPlaceholder: String, format: String, dateFormat: String, timeFormat: String, actions: Array, shortcuts: Object, isDateDisabled: Function, isTimeDisabled: Function, show: {
+    }, valueFormat: String, separator: String, placeholder: String, startPlaceholder: String, endPlaceholder: String, format: String, dateFormat: String, timeFormat: String, actions: Array, shortcuts: Object, isDateDisabled: Function, isTimeDisabled: Function, show: {
         type: Boolean,
         default: undefined
-    }, ranges: Object, firstDayOfWeek: Number, inputReadonly: Boolean, closeOnSelect: Boolean, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], 
+    }, ranges: Object, firstDayOfWeek: Number, inputReadonly: Boolean, closeOnSelect: Boolean, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:formattedValue': [Function, Array], onUpdateFormattedValue: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], 
     // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-picker', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'DatePicker',
     props: datePickerProps,
     setup(props, { slots }) {
+        var _a;
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-picker', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { localeRef, dateLocaleRef } = (0, _mixins_1.useLocale)('DatePicker');
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
@@ -69,8 +64,58 @@ exports.default = (0, vue_1.defineComponent)({
         const uncontrolledShowRef = (0, vue_1.ref)(false);
         const controlledShowRef = (0, vue_1.toRef)(props, 'show');
         const mergedShowRef = (0, vooks_1.useMergedState)(controlledShowRef, uncontrolledShowRef);
-        const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
-        const controlledValueRef = (0, vue_1.computed)(() => props.value);
+        const dateFnsOptionsRef = (0, vue_1.computed)(() => {
+            return {
+                locale: dateLocaleRef.value.locale
+            };
+        });
+        const mergedFormatRef = (0, vue_1.computed)(() => {
+            const { format } = props;
+            if (format)
+                return format;
+            switch (props.type) {
+                case 'date':
+                case 'daterange':
+                    return localeRef.value.dateFormat;
+                case 'datetime':
+                case 'datetimerange':
+                    return localeRef.value.dateTimeFormat;
+                case 'year':
+                    return localeRef.value.yearTypeFormat;
+                case 'month':
+                    return localeRef.value.monthTypeFormat;
+                case 'quarter':
+                    return localeRef.value.quarterFormat;
+            }
+        });
+        const mergedValueFormatRef = (0, vue_1.computed)(() => {
+            var _a;
+            return (_a = props.valueFormat) !== null && _a !== void 0 ? _a : mergedFormatRef.value;
+        });
+        function getTimestampValue(value) {
+            if (value === null)
+                return null;
+            const { value: mergedValueFormat } = mergedValueFormatRef;
+            const { value: dateFnsOptions } = dateFnsOptionsRef;
+            if (Array.isArray(value)) {
+                return [
+                    (0, utils_1.strictParse)(value[0], mergedValueFormat, new Date(), dateFnsOptions).getTime(),
+                    (0, utils_1.strictParse)(value[1], mergedValueFormat, new Date(), dateFnsOptions).getTime()
+                ];
+            }
+            return (0, utils_1.strictParse)(value, mergedValueFormat, new Date(), dateFnsOptions).getTime();
+        }
+        const { defaultFormattedValue, defaultValue } = props;
+        const uncontrolledValueRef = (0, vue_1.ref)((_a = (defaultFormattedValue !== undefined
+            ? getTimestampValue(defaultFormattedValue)
+            : defaultValue)) !== null && _a !== void 0 ? _a : null);
+        const controlledValueRef = (0, vue_1.computed)(() => {
+            const { formattedValue } = props;
+            if (formattedValue !== undefined) {
+                return getTimestampValue(formattedValue);
+            }
+            return props.value;
+        });
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
         // We don't change value unless blur or confirm is called
         const pendingValueRef = (0, vue_1.ref)(null);
@@ -81,11 +126,6 @@ exports.default = (0, vue_1.defineComponent)({
         const rangeStartInputValueRef = (0, vue_1.ref)('');
         const rangeEndInputValueRef = (0, vue_1.ref)('');
         const themeRef = (0, _mixins_1.useTheme)('DatePicker', 'DatePicker', index_cssr_1.default, styles_1.datePickerLight, props, mergedClsPrefixRef);
-        const dateFnsOptionsRef = (0, vue_1.computed)(() => {
-            return {
-                locale: dateLocaleRef.value.locale
-            };
-        });
         const timePickerSizeRef = (0, vue_1.computed)(() => {
             var _a, _b;
             return (((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DatePicker) === null || _b === void 0 ? void 0 : _b.timePickerSize) || 'small');
@@ -144,25 +184,6 @@ exports.default = (0, vue_1.defineComponent)({
                 return props.endPlaceholder;
             }
         });
-        const mergedFormatRef = (0, vue_1.computed)(() => {
-            const { format } = props;
-            if (format)
-                return format;
-            switch (props.type) {
-                case 'date':
-                case 'daterange':
-                    return localeRef.value.dateFormat;
-                case 'datetime':
-                case 'datetimerange':
-                    return localeRef.value.dateTimeFormat;
-                case 'year':
-                    return localeRef.value.yearTypeFormat;
-                case 'month':
-                    return localeRef.value.monthTypeFormat;
-                case 'quarter':
-                    return localeRef.value.quarterFormat;
-            }
-        });
         const mergedActionsRef = (0, vue_1.computed)(() => {
             const { actions, type } = props;
             if (actions !== undefined)
@@ -195,19 +216,47 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         });
+        function getFormattedValue(value) {
+            if (value === null)
+                return null;
+            if (Array.isArray(value)) {
+                const { value: mergedValueFormat } = mergedValueFormatRef;
+                const { value: dateFnsOptions } = dateFnsOptionsRef;
+                return [
+                    (0, date_fns_1.format)(value[0], mergedValueFormat, dateFnsOptions),
+                    (0, date_fns_1.format)(value[1], mergedValueFormat, dateFnsOptionsRef.value)
+                ];
+            }
+            else {
+                return (0, date_fns_1.format)(value, mergedValueFormatRef.value, dateFnsOptionsRef.value);
+            }
+        }
         function doUpdatePendingValue(value) {
             pendingValueRef.value = value;
         }
+        function doUpdateFormattedValue(value, timestampValue) {
+            const { 'onUpdate:formattedValue': _onUpdateFormattedValue, onUpdateFormattedValue } = props;
+            if (_onUpdateFormattedValue) {
+                (0, _utils_1.call)(_onUpdateFormattedValue, value, timestampValue);
+            }
+            if (onUpdateFormattedValue) {
+                (0, _utils_1.call)(onUpdateFormattedValue, value, timestampValue);
+            }
+        }
         function doUpdateValue(value) {
             const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onChange } = props;
             const { nTriggerFormChange, nTriggerFormInput } = formItem;
-            if (onUpdateValue)
-                (0, _utils_1.call)(onUpdateValue, value);
-            if (_onUpdateValue)
-                (0, _utils_1.call)(_onUpdateValue, value);
+            const formattedValue = getFormattedValue(value);
+            if (onUpdateValue) {
+                (0, _utils_1.call)(onUpdateValue, value, formattedValue);
+            }
+            if (_onUpdateValue) {
+                (0, _utils_1.call)(_onUpdateValue, value, formattedValue);
+            }
             if (onChange)
-                (0, _utils_1.call)(onChange, value);
+                (0, _utils_1.call)(onChange, value, formattedValue);
             uncontrolledValueRef.value = value;
+            doUpdateFormattedValue(formattedValue, value);
             nTriggerFormChange();
             nTriggerFormInput();
         }
@@ -271,28 +320,6 @@ exports.default = (0, vue_1.defineComponent)({
                 disableUpdateOnClose
             });
         }
-        function scrollPickerColumns(value) {
-            if (!panelInstRef.value)
-                return;
-            const { monthScrollRef, yearScrollRef } = panelInstRef.value;
-            const { value: mergedValue } = mergedValueRef;
-            if (monthScrollRef) {
-                const monthIndex = value === undefined
-                    ? mergedValue === null
-                        ? (0, date_fns_1.getMonth)(Date.now())
-                        : (0, date_fns_1.getMonth)(mergedValue)
-                    : (0, date_fns_1.getMonth)(value);
-                monthScrollRef.scrollTo({ top: monthIndex * config_1.MONTH_ITEM_HEIGHT });
-            }
-            if (yearScrollRef) {
-                const yearIndex = (value === undefined
-                    ? mergedValue === null
-                        ? (0, date_fns_1.getYear)(Date.now())
-                        : (0, date_fns_1.getYear)(mergedValue)
-                    : (0, date_fns_1.getYear)(value)) - config_1.START_YEAR;
-                yearScrollRef.scrollTo({ top: yearIndex * config_1.MONTH_ITEM_HEIGHT });
-            }
-        }
         // --- Panel update value
         function handlePanelUpdateValue(value, doUpdate) {
             if (doUpdate) {
@@ -417,10 +444,6 @@ exports.default = (0, vue_1.defineComponent)({
             if (mergedDisabledRef.value || mergedShowRef.value)
                 return;
             doUpdateShow(true);
-            const { type } = props;
-            if (type === 'month' || type === 'year' || type === 'quarter') {
-                void (0, vue_1.nextTick)(scrollPickerColumns);
-            }
         }
         function closeCalendar({ returnFocus, disableUpdateOnClose }) {
             var _a;
@@ -455,35 +478,22 @@ exports.default = (0, vue_1.defineComponent)({
         // use pending value to do validation
         const uniVaidation = (0, validation_utils_1.uniCalendarValidation)(props, pendingValueRef);
         const dualValidation = (0, validation_utils_1.dualCalendarValidation)(props, pendingValueRef);
-        (0, vue_1.provide)(interface_1.datePickerInjectionKey, Object.assign(Object.assign(Object.assign({ scrollPickerColumns,
-            mergedClsPrefixRef, mergedThemeRef: themeRef, timePickerSizeRef,
+        (0, vue_1.provide)(interface_1.datePickerInjectionKey, Object.assign(Object.assign(Object.assign({ mergedClsPrefixRef, mergedThemeRef: themeRef, timePickerSizeRef,
             localeRef,
             dateLocaleRef, firstDayOfWeekRef: (0, vue_1.toRef)(props, 'firstDayOfWeek'), isDateDisabledRef: (0, vue_1.toRef)(props, 'isDateDisabled'), rangesRef: (0, vue_1.toRef)(props, 'ranges'), closeOnSelectRef: (0, vue_1.toRef)(props, 'closeOnSelect'), updateValueOnCloseRef: (0, vue_1.toRef)(props, 'updateValueOnClose') }, uniVaidation), dualValidation), { datePickerSlots: slots }));
-        return {
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedBordered: mergedBorderedRef,
-            namespace: namespaceRef,
-            uncontrolledValue: uncontrolledValueRef,
-            pendingValue: pendingValueRef,
-            panelInstRef,
+        const exposedMethods = {
+            focus: () => {
+                var _a;
+                (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur: () => {
+                var _a;
+                (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+        };
+        return Object.assign(Object.assign({}, exposedMethods), { mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, pendingValue: pendingValueRef, panelInstRef,
             triggerElRef,
-            inputInstRef,
-            isMounted: (0, vooks_1.useIsMounted)(),
-            displayTime: singleInputValueRef,
-            displayStartTime: rangeStartInputValueRef,
-            displayEndTime: rangeEndInputValueRef,
-            mergedShow: mergedShowRef,
-            adjustedTo: (0, _utils_1.useAdjustedTo)(props),
-            isRange: isRangeRef,
-            localizedStartPlaceholder: localizedStartPlaceholderRef,
-            localizedEndPlaceholder: localizedEndPlaceholderRef,
-            mergedSize: mergedSizeRef,
-            mergedDisabled: mergedDisabledRef,
-            localizedPlacehoder: localizedPlacehoderRef,
-            isValueInvalid: uniVaidation.isValueInvalidRef,
-            isStartValueInvalid: dualValidation.isStartValueInvalidRef,
-            isEndValueInvalid: dualValidation.isEndValueInvalidRef,
-            handleClickOutside,
+            inputInstRef, isMounted: (0, vooks_1.useIsMounted)(), displayTime: singleInputValueRef, displayStartTime: rangeStartInputValueRef, displayEndTime: rangeEndInputValueRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), isRange: isRangeRef, localizedStartPlaceholder: localizedStartPlaceholderRef, localizedEndPlaceholder: localizedEndPlaceholderRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, localizedPlacehoder: localizedPlacehoderRef, isValueInvalid: uniVaidation.isValueInvalidRef, isStartValueInvalid: dualValidation.isStartValueInvalidRef, isEndValueInvalid: dualValidation.isEndValueInvalidRef, handleClickOutside,
             handleKeyDown,
             handleClear,
             handleTriggerClick,
@@ -496,18 +506,14 @@ exports.default = (0, vue_1.defineComponent)({
             handleRangeUpdateValue,
             handleSingleUpdateValue,
             handlePanelUpdateValue,
-            handlePanelConfirm,
-            mergedTheme: themeRef,
-            actions: mergedActionsRef,
-            triggerCssVars: (0, vue_1.computed)(() => {
+            handlePanelConfirm, mergedTheme: themeRef, actions: mergedActionsRef, triggerCssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { iconColor, iconColorDisabled } } = themeRef.value;
                 return {
                     '--n-bezier': cubicBezierEaseInOut,
                     '--n-icon-color': iconColor,
                     '--n-icon-color-disabled': iconColorDisabled
                 };
-            }),
-            cssVars: (0, vue_1.computed)(() => {
+            }), cssVars: (0, vue_1.computed)(() => {
                 const { type } = props;
                 const { common: { cubicBezierEaseInOut }, self: { calendarTitleFontSize, calendarDaysFontSize, itemFontSize, itemTextColor, itemColorDisabled, itemColorIncluded, itemColorHover, itemColorActive, itemBorderRadius, itemTextColorDisabled, itemTextColorActive, panelColor, panelTextColor, arrowColor, calendarTitleTextColor, panelActionDividerColor, panelHeaderDividerColor, calendarDaysDividerColor, panelBoxShadow, panelBorderRadius, calendarTitleFontWeight, panelExtraFooterPadding, panelActionPadding, itemSize, itemCellWidth, itemCellHeight, scrollItemWidth, scrollItemHeight, calendarTitlePadding, calendarTitleHeight, calendarDaysHeight, calendarDaysTextColor, arrowSize, panelHeaderPadding, calendarDividerColor, calendarTitleGridTempateColumns, iconColor, iconColorDisabled, scrollItemBorderRadius, [(0, _utils_1.createKey)('calendarLeftPadding', type)]: calendarLeftPadding, [(0, _utils_1.createKey)('calendarRightPadding', type)]: calendarRightPadding } } = themeRef.value;
                 return {
@@ -561,8 +567,7 @@ exports.default = (0, vue_1.defineComponent)({
                     '--n-icon-color': iconColor,
                     '--n-icon-color-disabled': iconColorDisabled
                 };
-            })
-        };
+            }) });
     },
     render() {
         const { clearable } = this;

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

@@ -1,4 +1,4 @@
-import { InjectionKey, Ref, Slots } from 'vue';
+import { Ref, Slots } from 'vue';
 import { VirtualListInst } from 'vueuc';
 import { NLocale, NDateLocale } from '../../locales';
 import type { ScrollbarInst } from '../../_internal';
@@ -8,9 +8,24 @@ import { DatePickerTheme } from '../styles/light';
 import { uniCalendarValidation, dualCalendarValidation } from './validation-utils';
 export declare type Value = number | [number, number];
 export declare type DefaultTime = string | [string | undefined, string | undefined];
+export declare type FormattedValue = string | [string, string];
 export declare type Shortcuts = Record<string, number | (() => number)> | Record<string, [number, number] | (() => [number, number])>;
-export declare type OnUpdateValue = (value: number & (number | null) & [number, number] & ([number, number] | null)) => void;
-export declare type OnUpdateValueImpl = (value: Value | null) => void;
+export declare type OnUpdateValue = (value: number & (number | null) & [
+    number,
+    number
+] & ([number, number] | null), formattedValue: string & (string | null) & [
+    string,
+    string
+] & ([string, string] | null)) => void;
+export declare type OnUpdateFormattedValue = (value: string & (string | null) & [
+    string,
+    string
+] & ([string, string] | null), timestampValue: number & (number | null) & [
+    number,
+    number
+] & ([number, number] | null)) => void;
+export declare type OnUpdateFormattedValueImpl = (value: string | [string, string] | null, timestampValue: number | [number, number] | null) => void;
+export declare type OnUpdateValueImpl = (value: Value | null, formattedValue: string | [string, string] | null) => void;
 export declare type OnPanelUpdateValue = (value: number & (number | null) & [
     number,
     number
@@ -35,9 +50,8 @@ export declare type DatePickerInjection = {
     updateValueOnCloseRef: Ref<boolean>;
     firstDayOfWeekRef: Ref<FirstDayOfWeek | undefined>;
     datePickerSlots: Slots;
-    scrollPickerColumns: (value?: number) => void;
 } & ReturnType<typeof uniCalendarValidation> & ReturnType<typeof dualCalendarValidation>;
-export declare const datePickerInjectionKey: InjectionKey<DatePickerInjection>;
+export declare const datePickerInjectionKey: import("vue").InjectionKey<DatePickerInjection>;
 export declare type IsDateDisabled = IsSingleDateDisabled | IsRangeDateDisabled;
 export declare type IsSingleDateDisabled = (date: number) => boolean;
 export declare type IsRangeDateDisabled = (date: number, position: 'start' | 'end', value: [number, number] | null) => boolean;
@@ -49,3 +63,7 @@ export interface TimeValidator {
 export declare type IsTimeDisabled = IsSingleTimeDisabled | IsRangeTimeDisabled;
 export declare type IsSingleTimeDisabled = (date: number) => TimeValidator;
 export declare type IsRangeTimeDisabled = (date: number, position: 'start' | 'end', value: [number, number]) => TimeValidator;
+export interface DatePickerInst {
+    focus: () => void;
+    blur: () => void;
+}

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

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.datePickerInjectionKey = void 0;
-exports.datePickerInjectionKey = Symbol('datePicker');
+const _utils_1 = require("../../_utils");
+exports.datePickerInjectionKey = (0, _utils_1.createInjectionKey)('n-date-picker');

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

@@ -7,6 +7,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly dateFormat: StringConstructor;
     readonly timeFormat: {
         readonly type: StringConstructor;
+        /**
+         * Date Panel
+         * Update picker value on:
+         * 1. item click
+         * 2. clear click
+         */
         readonly value: "HH:mm:ss";
     };
     readonly value: {
@@ -37,11 +43,14 @@ declare const _default: import("vue").DefineComponent<{
         [name: string]: import("vue").Slot | undefined;
     }>;
     monthScrollRef: import("vue").Ref<{
-        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
-        sync: () => void;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
     } | null>;
     yearScrollRef: import("vue").Ref<{
         listElRef: HTMLElement;
@@ -49,12 +58,19 @@ declare const _default: import("vue").DefineComponent<{
         scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
     } | null>;
     scrollbarInstRef: import("vue").Ref<{
-        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
-        sync: () => void;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
     } | null>;
+    handleQuickMonthClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, updatePanelValue: (value: number) => void) => void;
+    scrollPickerColumns: (value?: number | undefined) => void;
+    calendarValue: import("vue").Ref<number>;
+    onUpdateCalendarValue: (value: number) => void;
     mergedTheme: import("vue").Ref<{
         common: {
             baseColor: string;
@@ -199,7 +215,12 @@ declare const _default: import("vue").DefineComponent<{
             arrowSize: string;
             panelHeaderPadding: string;
             calendarDaysHeight: string;
-            calendarTitleGridTempateColumns: string;
+            calendarTitleGridTempateColumns: string; /**
+             * Date Panel
+             * Update picker value on:
+             * 1. item click
+             * 2. clear click
+             */
             calendarLeftPaddingDate: string;
             calendarLeftPaddingDatetime: string;
             calendarLeftPaddingDaterange: string;
@@ -476,7 +497,12 @@ declare const _default: import("vue").DefineComponent<{
                 iconMarginLarge: string;
                 iconSizeTiny: string;
                 iconSizeSmall: string;
-                iconSizeMedium: string;
+                iconSizeMedium: string; /**
+                 * Date Panel
+                 * Update picker value on:
+                 * 1. item click
+                 * 2. clear click
+                 */
                 iconSizeLarge: string;
                 rippleDuration: string;
             }, any>;
@@ -701,7 +727,12 @@ declare const _default: import("vue").DefineComponent<{
                     iconMarginLarge: string;
                     iconSizeTiny: string;
                     iconSizeSmall: string;
-                    iconSizeMedium: string;
+                    iconSizeMedium: string; /**
+                     * Date Panel
+                     * Update picker value on:
+                     * 1. item click
+                     * 2. clear click
+                     */
                     iconSizeLarge: string;
                     rippleDuration: string;
                 }, any>;
@@ -988,7 +1019,12 @@ declare const _default: import("vue").DefineComponent<{
                         iconMarginLarge: string;
                         iconSizeTiny: string;
                         iconSizeSmall: string;
-                        iconSizeMedium: string;
+                        iconSizeMedium: string; /**
+                         * Date Panel
+                         * Update picker value on:
+                         * 1. item click
+                         * 2. clear click
+                         */
                         iconSizeLarge: string;
                         rippleDuration: string;
                     }, any>> | undefined;
@@ -1107,6 +1143,8 @@ declare const _default: import("vue").DefineComponent<{
     restorePendingValue: () => void;
     getShortcutValue: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => number | [number, number];
     handleShortcutMouseleave: () => void;
+    showMonthYearPanel: import("vue").Ref<boolean>;
+    handleOpenQuickSelectMonthPanel: () => void;
     isValueInvalid: import("vue").ComputedRef<boolean>;
     isDateDisabled: import("vue").Ref<import("../interface").IsDateDisabled | undefined>;
     isDateInvalid: import("vue").ComputedRef<boolean>;
@@ -1131,32 +1169,37 @@ declare const _default: import("vue").DefineComponent<{
     handleConfirmClick: () => void;
     handleSingleShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
     handleSingleShortcutClick: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly actions?: unknown;
-    readonly active?: unknown;
-    readonly dateFormat?: unknown;
-    readonly timeFormat?: unknown;
-    readonly value?: unknown;
-    readonly shortcuts?: unknown;
-    readonly defaultTime?: unknown;
-    readonly onConfirm?: unknown;
-    readonly onClose?: unknown;
-    readonly onTabOut?: unknown;
-    readonly onUpdateValue?: unknown;
-} & {
-    value: import("../interface").Value | null;
-    active: boolean;
-    onUpdateValue: import("../interface").OnPanelUpdateValue;
-    actions: string[];
-} & {
-    dateFormat?: string | undefined;
-    onTabOut?: Function | undefined;
-    onClose?: import("../interface").OnClose | undefined;
-    onConfirm?: Function | undefined;
-    defaultTime?: import("../interface").DefaultTime | undefined;
-    timeFormat?: string | undefined;
-    shortcuts?: import("../interface").Shortcuts | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly actions: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly default: () => string[];
+    };
+    readonly active: BooleanConstructor;
+    readonly dateFormat: StringConstructor;
+    readonly timeFormat: {
+        readonly type: StringConstructor;
+        /**
+         * Date Panel
+         * Update picker value on:
+         * 1. item click
+         * 2. clear click
+         */
+        readonly value: "HH:mm:ss";
+    };
+    readonly value: {
+        readonly type: import("vue").PropType<import("../interface").Value | null>;
+        readonly default: null;
+    };
+    readonly shortcuts: import("vue").PropType<import("../interface").Shortcuts>;
+    readonly defaultTime: import("vue").PropType<import("../interface").DefaultTime>;
+    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;
+    };
+}>>, {
     value: import("../interface").Value | null;
     active: boolean;
     actions: string[];

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

@@ -1,11 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
-const button_1 = require("../../../button");
 const icons_1 = require("../../../_internal/icons");
+const button_1 = require("../../../button");
 const _internal_1 = require("../../../_internal");
-const use_calendar_1 = require("./use-calendar");
 const _utils_1 = require("../../../_utils");
+const use_calendar_1 = require("./use-calendar");
+const panelHeader_1 = __importDefault(require("./panelHeader"));
 /**
  * Date Panel
  * Update picker value on:
@@ -36,9 +40,7 @@ exports.default = (0, vue_1.defineComponent)({
                         (0, vue_1.h)(icons_1.FastBackwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.prevMonth },
                         (0, vue_1.h)(icons_1.BackwardIcon, null)),
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.calendarMonth} ${this.calendarYear}`
-                        : `${this.calendarYear} ${this.calendarMonth}`),
+                    (0, vue_1.h)(panelHeader_1.default, { monthBeforeYear: this.locale.monthBeforeYear, value: this.calendarValue, onUpdateValue: this.onUpdateCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.nextMonth },
                         (0, vue_1.h)(icons_1.ForwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.nextYear },
@@ -55,7 +57,7 @@ exports.default = (0, vue_1.defineComponent)({
                     ], onClick: () => this.handleDateClick(dateItem) },
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),
-            this.datePickerSlots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-footer` }, (0, vue_1.renderSlot)(this.datePickerSlots, 'footer'))) : null,
+            this.datePickerSlots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer())) : null,
             ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) || shortcuts ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts &&
                     Object.keys(shortcuts).map((key) => {