naive-ui 2.23.1 → 2.24.2

package/es/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/es/date-picker/src/panel/date.js

@@ -1,9 +1,10 @@
-import { h, defineComponent, renderSlot, watchEffect } from 'vue';
-import { NButton, NxButton } from '../../../button';
+import { h, defineComponent, watchEffect } from 'vue';
 import { BackwardIcon, FastBackwardIcon, ForwardIcon, FastForwardIcon } from '../../../_internal/icons';
+import { NButton, NxButton } from '../../../button';
 import { NBaseFocusDetector } from '../../../_internal';
-import { useCalendar, useCalendarProps } from './use-calendar';
 import { warnOnce } from '../../../_utils';
+import { useCalendar, useCalendarProps } from './use-calendar';
+import PanelHeader from './panelHeader';
 /**
  * Date Panel
  * Update picker value on:
@@ -34,9 +35,7 @@ export default defineComponent({
                         h(FastBackwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.prevMonth },
                         h(BackwardIcon, null)),
-                    h("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.calendarMonth} ${this.calendarYear}`
-                        : `${this.calendarYear} ${this.calendarMonth}`),
+                    h(PanelHeader, { monthBeforeYear: this.locale.monthBeforeYear, value: this.calendarValue, onUpdateValue: this.onUpdateCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear }),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.nextMonth },
                         h(ForwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.nextYear },
@@ -53,7 +52,7 @@ export default defineComponent({
                     ], onClick: () => this.handleDateClick(dateItem) },
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? (h("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),
-            this.datePickerSlots.footer ? (h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, renderSlot(this.datePickerSlots, 'footer'))) : null,
+            this.datePickerSlots.footer ? (h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer())) : null,
             ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) || shortcuts ? (h("div", { class: `${mergedClsPrefix}-date-panel-actions` },
                 h("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts &&
                     Object.keys(shortcuts).map((key) => {

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

@@ -39,6 +39,10 @@ declare const _default: import("vue").DefineComponent<{
         [name: string]: import("vue").Slot | undefined;
     }>;
     shortcuts: import("vue").ComputedRef<import("../interface").Shortcuts | undefined>;
+    startCalendarDateTime: import("vue").Ref<number>;
+    endCalendarDateTime: import("vue").Ref<number>;
+    onUpdateStartCalendarValue: (value: number) => void;
+    onUpdateEndCalendarValue: (value: number) => void;
     isDateDisabled: import("vue").Ref<import("../interface").IsDateDisabled | undefined>;
     isStartHourDisabled: import("vue").ComputedRef<import("../../../time-picker/src/interface").IsHourDisabled | undefined>;
     isEndHourDisabled: import("vue").ComputedRef<import("../../../time-picker/src/interface").IsHourDisabled | undefined>;
@@ -1104,6 +1108,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;
     startDatesElRef: import("vue").Ref<HTMLElement | null>;
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
     resetSelectingStatus: (e: MouseEvent) => void;
@@ -1130,32 +1136,31 @@ declare const _default: import("vue").DefineComponent<{
     endDateArray: import("vue").ComputedRef<import("../utils").DateItem[]>;
     handleRangeShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
     handleRangeShortcutClick: (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: unknown[];
-} & {
-    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: ArrayConstructor;
+        readonly default: () => string[];
+    };
+    readonly active: BooleanConstructor;
+    readonly dateFormat: StringConstructor;
+    readonly timeFormat: {
+        readonly type: StringConstructor;
+        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: unknown[];

package/es/date-picker/src/panel/daterange.js

@@ -1,9 +1,10 @@
-import { defineComponent, h, renderSlot, watchEffect } from 'vue';
+import { defineComponent, h, watchEffect } from 'vue';
 import { NButton, NxButton } from '../../../button';
 import { BackwardIcon, FastBackwardIcon, ForwardIcon, FastForwardIcon } from '../../../_internal/icons';
 import { NBaseFocusDetector } from '../../../_internal';
-import { useDualCalendar, useDualCalendarProps } from './use-dual-calendar';
 import { warnOnce } from '../../../_utils';
+import PanelHeader from './panelHeader';
+import { useDualCalendar, useDualCalendarProps } from './use-dual-calendar';
 export default defineComponent({
     name: 'DateRangePanel',
     props: useDualCalendarProps,
@@ -28,9 +29,7 @@ export default defineComponent({
                         h(FastBackwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.startCalendarPrevMonth },
                         h(BackwardIcon, null)),
-                    h("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.startCalendarMonth} ${this.startCalendarYear}`
-                        : `${this.startCalendarYear} ${this.startCalendarMonth}`),
+                    h(PanelHeader, { monthBeforeYear: this.locale.monthBeforeYear, value: this.startCalendarDateTime, onUpdateValue: this.onUpdateStartCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.startCalendarMonth, calendarYear: this.startCalendarYear }),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.startCalendarNextMonth },
                         h(ForwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.startCalendarNextYear },
@@ -58,9 +57,7 @@ export default defineComponent({
                         h(FastBackwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.endCalendarPrevMonth },
                         h(BackwardIcon, null)),
-                    h("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.endCalendarMonth} ${this.endCalendarYear}`
-                        : `${this.endCalendarYear} ${this.endCalendarMonth}`),
+                    h(PanelHeader, { monthBeforeYear: this.locale.monthBeforeYear, value: this.endCalendarDateTime, onUpdateValue: this.onUpdateEndCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.endCalendarMonth, calendarYear: this.endCalendarYear }),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.endCalendarNextMonth },
                         h(ForwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.endCalendarNextYear },
@@ -81,7 +78,7 @@ export default defineComponent({
                     ], onClick: () => this.handleDateClick(dateItem), onMouseenter: () => this.handleDateMouseEnter(dateItem) },
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? (h("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),
-            this.datePickerSlots.footer ? (h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, renderSlot(this.datePickerSlots, 'footer'))) : null,
+            this.datePickerSlots.footer ? (h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer())) : null,
             ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) || shortcuts ? (h("div", { class: `${mergedClsPrefix}-date-panel-actions` },
                 h("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts &&
                     Object.keys(shortcuts).map((key) => {

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

@@ -37,11 +37,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 +52,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;
@@ -1107,6 +1117,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 +1143,31 @@ 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;
+        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/es/date-picker/src/panel/datetime.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, renderSlot } from 'vue';
+import { h, defineComponent } from 'vue';
 import { NButton, NxButton } from '../../../button';
 import { NTimePicker } from '../../../time-picker';
 import { NInput } from '../../../input';
 import { BackwardIcon, FastBackwardIcon, ForwardIcon, FastForwardIcon } from '../../../_internal/icons';
 import { NBaseFocusDetector } from '../../../_internal';
 import { useCalendar, useCalendarProps } from './use-calendar';
+import PanelHeader from './panelHeader';
 /**
  * DateTime Panel
  * Update picker value on:
@@ -30,9 +31,7 @@ export default defineComponent({
                         h(FastBackwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.prevMonth },
                         h(BackwardIcon, null)),
-                    h("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.calendarMonth} ${this.calendarYear}`
-                        : `${this.calendarYear} ${this.calendarMonth}`),
+                    h(PanelHeader, { monthBeforeYear: this.locale.monthBeforeYear, value: this.calendarValue, onUpdateValue: this.onUpdateCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear }),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.nextMonth },
                         h(ForwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.nextYear },
@@ -49,7 +48,7 @@ export default defineComponent({
                     ], onClick: () => this.handleDateClick(dateItem) },
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? (h("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),
-            this.datePickerSlots.footer ? (h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, renderSlot(this.datePickerSlots, 'footer'))) : null,
+            this.datePickerSlots.footer ? (h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer())) : null,
             ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) || shortcuts ? (h("div", { class: `${mergedClsPrefix}-date-panel-actions` },
                 h("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts &&
                     Object.keys(shortcuts).map((key) => {

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

@@ -39,6 +39,10 @@ declare const _default: import("vue").DefineComponent<{
         [name: string]: import("vue").Slot | undefined;
     }>;
     shortcuts: import("vue").ComputedRef<import("../interface").Shortcuts | undefined>;
+    startCalendarDateTime: import("vue").Ref<number>;
+    endCalendarDateTime: import("vue").Ref<number>;
+    onUpdateStartCalendarValue: (value: number) => void;
+    onUpdateEndCalendarValue: (value: number) => void;
     isDateDisabled: import("vue").Ref<import("../interface").IsDateDisabled | undefined>;
     isStartHourDisabled: import("vue").ComputedRef<import("../../../time-picker/src/interface").IsHourDisabled | undefined>;
     isEndHourDisabled: import("vue").ComputedRef<import("../../../time-picker/src/interface").IsHourDisabled | undefined>;
@@ -1104,6 +1108,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;
     startDatesElRef: import("vue").Ref<HTMLElement | null>;
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
     resetSelectingStatus: (e: MouseEvent) => void;
@@ -1130,32 +1136,31 @@ declare const _default: import("vue").DefineComponent<{
     endDateArray: import("vue").ComputedRef<import("../utils").DateItem[]>;
     handleRangeShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
     handleRangeShortcutClick: (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: unknown[];
-} & {
-    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: ArrayConstructor;
+        readonly default: () => string[];
+    };
+    readonly active: BooleanConstructor;
+    readonly dateFormat: StringConstructor;
+    readonly timeFormat: {
+        readonly type: StringConstructor;
+        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: unknown[];

package/es/date-picker/src/panel/datetimerange.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, renderSlot, watchEffect } from 'vue';
+import { defineComponent, h, watchEffect } from 'vue';
 import { NButton, NxButton } from '../../../button';
 import { NInput } from '../../../input';
 import { NTimePicker } from '../../../time-picker';
@@ -6,6 +6,7 @@ import { BackwardIcon, FastBackwardIcon, ForwardIcon, FastForwardIcon } from '..
 import { NBaseFocusDetector } from '../../../_internal';
 import { warnOnce } from '../../../_utils';
 import { useDualCalendar, useDualCalendarProps } from './use-dual-calendar';
+import PanelHeader from './panelHeader';
 export default defineComponent({
     name: 'DateTimeRangePanel',
     props: useDualCalendarProps,
@@ -35,9 +36,7 @@ export default defineComponent({
                         h(FastBackwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.startCalendarPrevMonth },
                         h(BackwardIcon, null)),
-                    h("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.startCalendarMonth} ${this.startCalendarYear}`
-                        : `${this.startCalendarYear} ${this.startCalendarMonth}`),
+                    h(PanelHeader, { monthBeforeYear: this.locale.monthBeforeYear, value: this.startCalendarDateTime, onUpdateValue: this.onUpdateStartCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.startCalendarMonth, calendarYear: this.startCalendarYear }),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.startCalendarNextMonth },
                         h(ForwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.startCalendarNextYear },
@@ -65,9 +64,7 @@ export default defineComponent({
                         h(FastBackwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.endCalendarPrevMonth },
                         h(BackwardIcon, null)),
-                    h("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.endCalendarMonth} ${this.endCalendarYear}`
-                        : `${this.endCalendarYear} ${this.endCalendarMonth}`),
+                    h(PanelHeader, { monthBeforeYear: this.locale.monthBeforeYear, value: this.endCalendarDateTime, onUpdateValue: this.onUpdateEndCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.endCalendarMonth, calendarYear: this.endCalendarYear }),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.endCalendarNextMonth },
                         h(ForwardIcon, null)),
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.endCalendarNextYear },
@@ -88,7 +85,7 @@ export default defineComponent({
                     ], onClick: () => this.handleDateClick(dateItem), onMouseenter: () => this.handleDateMouseEnter(dateItem) },
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? (h("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),
-            this.datePickerSlots.footer ? (h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, renderSlot(this.datePickerSlots, 'footer'))) : null,
+            this.datePickerSlots.footer ? (h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer())) : null,
             ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) || shortcuts ? (h("div", { class: `${mergedClsPrefix}-date-panel-actions` },
                 h("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts &&
                     Object.keys(shortcuts).map((key) => {