naive-ui 2.38.2 → 2.40.0

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

@@ -3,11 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.datePickerProps = void 0;
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
 const vdirs_1 = require("vdirs");
-const date_fns_1 = require("date-fns"); //
+const date_fns_1 = require("date-fns");
 const vooks_1 = require("vooks");
 const seemly_1 = require("seemly");
 const icons_1 = require("../../_internal/icons");
@@ -26,27 +25,10 @@ const daterange_1 = __importDefault(require("./panel/daterange"));
 const month_1 = __importDefault(require("./panel/month"));
 const monthrange_1 = __importDefault(require("./panel/monthrange"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.datePickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, bordered: {
-        type: Boolean,
-        default: undefined
-    }, 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], formattedValue: [String, Array], size: String, type: {
-        type: String,
-        default: 'date'
-    }, valueFormat: String, separator: String, placeholder: String, startPlaceholder: String, endPlaceholder: String, format: String, dateFormat: String, timerPickerFormat: String, actions: Array, shortcuts: Object, isDateDisabled: Function, isTimeDisabled: Function, show: {
-        type: Boolean,
-        default: undefined
-    }, panel: Boolean, ranges: Object, firstDayOfWeek: Number, inputReadonly: Boolean, closeOnSelect: Boolean, status: String, timePickerProps: [Object, Array], onClear: Function, onConfirm: Function, defaultCalendarStartTime: Number, defaultCalendarEndTime: Number, bindCalendarMonths: Boolean, monthFormat: { type: String, default: 'M' }, yearFormat: { type: String, default: 'y' }, quarterFormat: { type: String, default: "'Q'Q" }, '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], onNextMonth: Function, onPrevMonth: Function, onNextYear: Function, onPrevYear: Function, 
-    // deprecated
-    onChange: [Function, Array] });
+const props_1 = require("./props");
 exports.default = (0, vue_1.defineComponent)({
     name: 'DatePicker',
-    props: exports.datePickerProps,
+    props: props_1.datePickerProps,
     setup(props, { slots }) {
         var _a;
         if (process.env.NODE_ENV !== 'production') {
@@ -68,7 +50,8 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedShowRef = (0, vooks_1.useMergedState)(controlledShowRef, uncontrolledShowRef);
         const dateFnsOptionsRef = (0, vue_1.computed)(() => {
             return {
-                locale: dateLocaleRef.value.locale
+                locale: dateLocaleRef.value.locale,
+                useAdditionalWeekYearTokens: true
             };
         });
         const mergedFormatRef = (0, vue_1.computed)(() => {
@@ -249,7 +232,7 @@ exports.default = (0, vue_1.defineComponent)({
                     return result;
                 }
                 default: {
-                    (0, _utils_1.warn)('date-picker', "The type is wrong, n-date-picker's type only supports `date`, `datetime`, `daterange` and `datetimerange`.");
+                    (0, _utils_1.warn)('date-picker', 'The type is wrong, n-date-picker\'s type only supports `date`, `datetime`, `daterange` and `datetimerange`.');
                     break;
                 }
             }
@@ -373,8 +356,8 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleClickOutside(e) {
             var _a;
-            if (mergedShowRef.value &&
-                !((_a = triggerElRef.value) === null || _a === void 0 ? void 0 : _a.contains((0, seemly_1.getPreciseEventTarget)(e)))) {
+            if (mergedShowRef.value
+                && !((_a = triggerElRef.value) === null || _a === void 0 ? void 0 : _a.contains((0, seemly_1.getPreciseEventTarget)(e)))) {
                 closeCalendar({
                     returnFocus: false
                 });
@@ -535,9 +518,9 @@ exports.default = (0, vue_1.defineComponent)({
             var _a;
             if (mergedShowRef.value) {
                 doUpdateShow(false);
-                if (props.type !== 'date' &&
-                    props.updateValueOnClose &&
-                    !disableUpdateOnClose) {
+                if (props.type !== 'date'
+                    && props.updateValueOnClose
+                    && !disableUpdateOnClose) {
                     handlePanelConfirm();
                 }
                 if (returnFocus) {
@@ -566,7 +549,7 @@ exports.default = (0, vue_1.defineComponent)({
         const dualValidation = (0, validation_utils_1.dualCalendarValidation)(props, pendingValueRef);
         (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'), timePickerPropsRef: (0, vue_1.toRef)(props, 'timePickerProps'), closeOnSelectRef: (0, vue_1.toRef)(props, 'closeOnSelect'), updateValueOnCloseRef: (0, vue_1.toRef)(props, 'updateValueOnClose'), monthFormatRef: (0, vue_1.toRef)(props, 'monthFormat'), yearFormatRef: (0, vue_1.toRef)(props, 'yearFormat'), quarterFormatRef: (0, vue_1.toRef)(props, 'quarterFormat') }, uniVaidation), dualValidation), { datePickerSlots: slots }));
+            dateLocaleRef, firstDayOfWeekRef: (0, vue_1.toRef)(props, 'firstDayOfWeek'), isDateDisabledRef: (0, vue_1.toRef)(props, 'isDateDisabled'), rangesRef: (0, vue_1.toRef)(props, 'ranges'), timePickerPropsRef: (0, vue_1.toRef)(props, 'timePickerProps'), closeOnSelectRef: (0, vue_1.toRef)(props, 'closeOnSelect'), updateValueOnCloseRef: (0, vue_1.toRef)(props, 'updateValueOnClose'), monthFormatRef: (0, vue_1.toRef)(props, 'monthFormat'), yearFormatRef: (0, vue_1.toRef)(props, 'yearFormat'), quarterFormatRef: (0, vue_1.toRef)(props, 'quarterFormat'), yearRangeRef: (0, vue_1.toRef)(props, 'yearRange') }, uniVaidation), dualValidation), { datePickerSlots: slots }));
         const exposedMethods = {
             focus: () => {
                 var _a;
@@ -686,6 +669,7 @@ exports.default = (0, vue_1.defineComponent)({
             defaultTime: this.defaultTime,
             themeClass: this.themeClass,
             panel: this.panel,
+            inputReadonly: this.inputReadonly || this.mergedDisabled,
             onRender: this.onRender,
             onNextMonth: this.onNextMonth,
             onPrevMonth: this.onPrevMonth,
@@ -695,9 +679,9 @@ exports.default = (0, vue_1.defineComponent)({
         };
         const renderPanel = () => {
             const { type } = this;
-            return type === 'datetime' ? ((0, vue_1.h)(datetime_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime }), $slots)) : type === 'daterange' ? ((0, vue_1.h)(daterange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : type === 'datetimerange' ? ((0, vue_1.h)(datetimerange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : type === 'month' || type === 'year' || type === 'quarter' ? ((0, vue_1.h)(month_1.default, Object.assign({}, commonPanelProps, { type: type, key: type }))) : type === 'monthrange' ||
-                type === 'yearrange' ||
-                type === 'quarterrange' ? ((0, vue_1.h)(monthrange_1.default, Object.assign({}, commonPanelProps, { type: type }))) : ((0, vue_1.h)(date_1.default, Object.assign({}, commonPanelProps, { type: type, defaultCalendarStartTime: this.defaultCalendarStartTime }), $slots));
+            return type === 'datetime' ? ((0, vue_1.h)(datetime_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime }), $slots)) : type === 'daterange' ? ((0, vue_1.h)(daterange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : type === 'datetimerange' ? ((0, vue_1.h)(datetimerange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : type === 'month' || type === 'year' || type === 'quarter' ? ((0, vue_1.h)(month_1.default, Object.assign({}, commonPanelProps, { type: type, key: type }))) : type === 'monthrange'
+                || type === 'yearrange'
+                || type === 'quarterrange' ? ((0, vue_1.h)(monthrange_1.default, Object.assign({}, commonPanelProps, { type: type }))) : ((0, vue_1.h)(date_1.default, Object.assign({}, commonPanelProps, { type: type, defaultCalendarStartTime: this.defaultCalendarStartTime }), $slots));
         };
         if (this.panel) {
             return renderPanel();

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

@@ -1,3 +1,2 @@
-export declare const START_YEAR = 1901;
 export declare const MONTH_ITEM_HEIGHT = 40;
 export type DatePickerType = 'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month' | 'year' | 'quarter' | 'monthrange' | 'quarterrange' | 'yearrange' | 'week';

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

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MONTH_ITEM_HEIGHT = exports.START_YEAR = void 0;
-exports.START_YEAR = 1901;
+exports.MONTH_ITEM_HEIGHT = void 0;
 // TODO: we need to remove it to make height customizable
 exports.MONTH_ITEM_HEIGHT = 40;

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

@@ -1,15 +1,19 @@
 import type { Ref, Slots, UnwrapNestedRefs } from 'vue';
-import { type VirtualListInst } from 'vueuc';
-import type { NLocale, NDateLocale } from '../../locales';
+import type { VirtualListInst } from 'vueuc';
+import type { NDateLocale, NLocale } from '../../locales';
 import type { ScrollbarInst } from '../../_internal';
 import type { IsHourDisabled, IsMinuteDisabled, IsSecondDisabled } from '../../time-picker/src/interface';
 import type { TimePickerProps } from '../../time-picker/src/TimePicker';
 import type { MergedTheme } from '../../_mixins';
 import type { DatePickerTheme } from '../styles/light';
-import type { uniCalendarValidation, dualCalendarValidation } from './validation-utils';
+import type { ButtonProps } from '../../button';
+import type { dualCalendarValidation, uniCalendarValidation } from './validation-utils';
 export type Value = number | [number, number];
 export type DefaultTime = string | [string | undefined, string | undefined];
 export type FormattedValue = string | [string, string];
+export type NowButtonProps = Pick<ButtonProps, 'size' | 'onClick'>;
+export type ClearButtonProps = Pick<ButtonProps, 'size' | 'onClick'>;
+export type ConfirmButtonProps = Pick<ButtonProps, 'size' | 'onClick' | 'type' | 'disabled'>;
 export type Shortcuts = Record<string, number | (() => number)> | Record<string, [number, number] | readonly [number, number] | (() => [number, number] | readonly [number, number])>;
 export type OnUpdateValue = (value: number & (number | null) & [
     number,
@@ -68,6 +72,7 @@ export type DatePickerInjection = {
     yearFormatRef: Ref<string>;
     quarterFormatRef: Ref<string>;
     datePickerSlots: Slots;
+    yearRangeRef: Ref<[number, number]>;
 } & ReturnType<typeof uniCalendarValidation> & ReturnType<typeof dualCalendarValidation>;
 export declare const datePickerInjectionKey: import("vue").InjectionKey<DatePickerInjection>;
 export type IsDateDisabled = IsSingleDateDisabled | IsRangeDateDisabled;
@@ -100,7 +105,3 @@ export interface TimeValidator {
 export type IsTimeDisabled = IsSingleTimeDisabled | IsRangeTimeDisabled;
 export type IsSingleTimeDisabled = (date: number) => TimeValidator;
 export type IsRangeTimeDisabled = (date: number, position: 'start' | 'end', value: [number, number]) => TimeValidator;
-export interface DatePickerInst {
-    focus: () => void;
-    blur: () => void;
-}

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

@@ -18,12 +18,6 @@ declare const _default: import("vue").DefineComponent<{
     active: BooleanConstructor;
     dateFormat: StringConstructor;
     timerPickerFormat: {
-        /**
-         * Date Panel
-         * Update picker value on:
-         * 1. item click
-         * 2. clear click
-         */
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";
     };
@@ -33,6 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     shortcuts: PropType<import("../interface").Shortcuts>;
     defaultTime: PropType<import("../interface").DefaultTime>;
+    inputReadonly: BooleanConstructor;
     onClear: FunctionConstructor;
     onConfirm: PropType<(value: import("../interface").Value | null) => void>;
     onClose: PropType<import("../interface").OnClose>;
@@ -58,125 +53,21 @@ declare const _default: import("vue").DefineComponent<{
     clearSelectedDateTime: () => void;
     virtualListContainer: () => HTMLElement | null;
     virtualListContent: () => HTMLElement | null;
-    handleVirtualListScroll: (e: Event) => void;
+    handleVirtualListScroll: () => void;
     timePickerSize: import("vue").Ref<"small" | "medium" | "large">;
     dateInputValue: import("vue").Ref<string>;
     datePickerSlots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
     handleQuickMonthClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, updatePanelValue: (value: number) => void) => void;
-    justifyColumnsScrollState: (value?: number | undefined) => void;
+    justifyColumnsScrollState: (value?: number) => void;
     calendarValue: import("vue").Ref<number>;
     onUpdateCalendarValue: (value: number) => void;
     monthScrollbarRef: import("vue").Ref<import("../../../_internal").ScrollbarInst | null>;
     yearScrollbarRef: import("vue").Ref<import("../../../_internal").ScrollbarInst | null>;
-    yearVlRef: import("vue").Ref<import("vueuc").VirtualListInst | null>;
+    yearVlRef: import("vue").Ref<import("vueuc").VVirtualListInst | null>;
     mergedTheme: import("vue").Ref<{
-        common: {
-            baseColor: string;
-            primaryColor: string;
-            primaryColorHover: string;
-            primaryColorPressed: string;
-            primaryColorSuppl: string;
-            infoColor: string;
-            infoColorHover: string;
-            infoColorPressed: string;
-            infoColorSuppl: string;
-            successColor: string;
-            successColorHover: string;
-            successColorPressed: string;
-            successColorSuppl: string;
-            warningColor: string;
-            warningColorHover: string;
-            warningColorPressed: string;
-            warningColorSuppl: string;
-            errorColor: string;
-            errorColorHover: string;
-            errorColorPressed: string;
-            errorColorSuppl: string;
-            textColorBase: string;
-            textColor1: string;
-            textColor2: string;
-            textColor3: string;
-            textColorDisabled: string;
-            placeholderColor: string;
-            placeholderColorDisabled: string;
-            iconColor: string;
-            iconColorHover: string;
-            iconColorPressed: string;
-            iconColorDisabled: string;
-            opacity1: string;
-            opacity2: string;
-            opacity3: string;
-            opacity4: string;
-            opacity5: string;
-            dividerColor: string;
-            borderColor: string;
-            closeIconColor: string;
-            closeIconColorHover: string;
-            closeIconColorPressed: string;
-            closeColorHover: string;
-            closeColorPressed: string;
-            clearColor: string;
-            clearColorHover: string;
-            clearColorPressed: string;
-            scrollbarColor: string;
-            scrollbarColorHover: string;
-            scrollbarWidth: string;
-            scrollbarHeight: string;
-            scrollbarBorderRadius: string;
-            progressRailColor: string;
-            railColor: string;
-            popoverColor: string;
-            tableColor: string;
-            cardColor: string;
-            modalColor: string;
-            bodyColor: string;
-            tagColor: string;
-            avatarColor: string;
-            invertedColor: string;
-            inputColor: string;
-            codeColor: string;
-            tabColor: string;
-            actionColor: string;
-            tableHeaderColor: string;
-            hoverColor: string;
-            tableColorHover: string;
-            tableColorStriped: string;
-            pressedColor: string;
-            opacityDisabled: string;
-            inputColorDisabled: string;
-            buttonColor2: string;
-            buttonColor2Hover: string;
-            buttonColor2Pressed: string;
-            boxShadow1: string;
-            boxShadow2: string;
-            boxShadow3: string;
-            fontFamily: string;
-            fontFamilyMono: string;
-            fontWeight: string;
-            fontWeightStrong: string;
-            cubicBezierEaseInOut: string;
-            cubicBezierEaseOut: string;
-            cubicBezierEaseIn: string;
-            borderRadius: string;
-            borderRadiusSmall: string;
-            fontSize: string;
-            fontSizeMini: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            lineHeight: string;
-            heightMini: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            heightHuge: string;
-            name: "common";
-        };
+        common: import("../../..").ThemeCommonVars;
         self: {
             itemFontSize: string;
             calendarDaysFontSize: string;
@@ -506,12 +397,6 @@ declare const _default: import("vue").DefineComponent<{
                 iconSizeSmall: string;
                 iconSizeMedium: string;
                 iconSizeLarge: string;
-                /**
-                 * Date Panel
-                 * Update picker value on:
-                 * 1. item click
-                 * 2. clear click
-                 */
                 rippleDuration: string;
             }, any>;
             TimePicker: import("../../../_mixins").Theme<"TimePicker", {
@@ -537,8 +422,10 @@ declare const _default: import("vue").DefineComponent<{
                     borderRadius: string;
                     color: string;
                     colorHover: string;
-                    railInsetHorizontal: string;
-                    railInsetVertical: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
                     railColor: string;
                 }, any>;
                 Button: import("../../../_mixins").Theme<"Button", {
@@ -743,12 +630,6 @@ declare const _default: import("vue").DefineComponent<{
                     iconSizeSmall: string;
                     iconSizeMedium: string;
                     iconSizeLarge: string;
-                    /**
-                     * Date Panel
-                     * Update picker value on:
-                     * 1. item click
-                     * 2. clear click
-                     */
                     rippleDuration: string;
                 }, any>;
                 Input: import("../../../_mixins").Theme<"Input", {
@@ -819,8 +700,10 @@ declare const _default: import("vue").DefineComponent<{
                 borderRadius: string;
                 color: string;
                 colorHover: string;
-                railInsetHorizontal: string;
-                railInsetVertical: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
                 railColor: string;
             }, any>;
         };
@@ -843,8 +726,10 @@ declare const _default: import("vue").DefineComponent<{
                         borderRadius: string;
                         color: string;
                         colorHover: string;
-                        railInsetHorizontal: string;
-                        railInsetVertical: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
                         railColor: string;
                     }, any>> | undefined;
                     Button?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Button", {
@@ -1049,12 +934,6 @@ declare const _default: import("vue").DefineComponent<{
                         iconSizeSmall: string;
                         iconSizeMedium: string;
                         iconSizeLarge: string;
-                        /**
-                         * Date Panel
-                         * Update picker value on:
-                         * 1. item click
-                         * 2. clear click
-                         */
                         rippleDuration: string;
                     }, any>> | undefined;
                     Input?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Input", {
@@ -1129,9 +1008,9 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     mergedClsPrefix: import("vue").Ref<string>;
     dateFnsOptions: import("vue").ComputedRef<{
-        locale: Locale;
+        locale: import("date-fns").Locale;
     }>;
-    timePickerProps: import("vue").Ref<import("naive-ui").TimePickerProps | [import("naive-ui").TimePickerProps, import("naive-ui").TimePickerProps] | undefined>;
+    timePickerProps: import("vue").Ref<import("../../..").TimePickerProps | [import("../../..").TimePickerProps, import("../../..").TimePickerProps] | undefined>;
     selfRef: import("vue").Ref<HTMLElement | null>;
     locale: import("vue").Ref<{
         yearFormat: string;
@@ -1161,7 +1040,7 @@ declare const _default: import("vue").DefineComponent<{
         startMonthPlaceholder: string;
         endMonthPlaceholder: string;
         monthBeforeYear: boolean;
-        firstDayOfWeek: 0 | 1 | 3 | 2 | 4 | 6 | 5;
+        firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
         today: string;
     }>;
     doConfirm: () => void;
@@ -1176,7 +1055,7 @@ declare const _default: import("vue").DefineComponent<{
     cachePendingValue: () => void;
     clearPendingValue: () => void;
     restorePendingValue: () => void;
-    getShortcutValue: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => number | [number, number] | readonly [number, number];
+    getShortcutValue: (shortcut: import("../interface").Shortcuts[string]) => number | [number, number] | readonly [number, number];
     handleShortcutMouseleave: () => void;
     showMonthYearPanel: import("vue").Ref<boolean>;
     handleOpenQuickSelectMonthPanel: () => void;
@@ -1202,8 +1081,8 @@ declare const _default: import("vue").DefineComponent<{
     prevMonth: () => void;
     handleNowClick: () => void;
     handleConfirmClick: () => void;
-    handleSingleShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;
-    handleSingleShortcutClick: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;
+    handleSingleShortcutMouseenter: (shortcut: import("../interface").Shortcuts[string]) => void;
+    handleSingleShortcutClick: (shortcut: import("../interface").Shortcuts[string]) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
         type: PropType<"date" | "week">;
@@ -1217,12 +1096,6 @@ declare const _default: import("vue").DefineComponent<{
     active: BooleanConstructor;
     dateFormat: StringConstructor;
     timerPickerFormat: {
-        /**
-         * Date Panel
-         * Update picker value on:
-         * 1. item click
-         * 2. clear click
-         */
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";
     };
@@ -1232,6 +1105,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     shortcuts: PropType<import("../interface").Shortcuts>;
     defaultTime: PropType<import("../interface").DefaultTime>;
+    inputReadonly: BooleanConstructor;
     onClear: FunctionConstructor;
     onConfirm: PropType<(value: import("../interface").Value | null) => void>;
     onClose: PropType<import("../interface").OnClose>;
@@ -1251,6 +1125,7 @@ declare const _default: import("vue").DefineComponent<{
     value: import("../interface").Value | null;
     active: boolean;
     actions: string[];
+    inputReadonly: boolean;
     panel: boolean;
 }, {}>;
 export default _default;

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

@@ -50,7 +50,7 @@ exports.default = (0, vue_1.defineComponent)({
                     (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, _utils_1.resolveSlot)($slots['next-month'], () => [(0, vue_1.h)(icons_1.ForwardIcon, null)])),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.nextYear }, (0, _utils_1.resolveSlot)($slots['next-year'], () => [(0, vue_1.h)(icons_1.FastForwardIcon, null)]))),
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => ((0, vue_1.h)("div", { key: weekday, class: `${mergedClsPrefix}-date-panel-weekdays__day` }, weekday)))),
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map(weekday => ((0, vue_1.h)("div", { key: weekday, class: `${mergedClsPrefix}-date-panel-weekdays__day` }, weekday)))),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-dates` }, this.dateArray.map((dateItem, i) => ((0, vue_1.h)("div", { "data-n-date": true, key: i, class: [
                         `${mergedClsPrefix}-date-panel-date`,
                         {
@@ -76,8 +76,8 @@ exports.default = (0, vue_1.defineComponent)({
                     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` }, 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) => {
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts
+                    && Object.keys(shortcuts).map((key) => {
                         const shortcut = shortcuts[key];
                         return Array.isArray(shortcut) ? null : ((0, vue_1.h)(button_1.NxButton, { size: "tiny", onMouseenter: () => {
                                 this.handleSingleShortcutMouseenter(shortcut);
@@ -88,8 +88,22 @@ exports.default = (0, vue_1.defineComponent)({
                             } }, { default: () => key }));
                     })),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions__suffix` },
-                    ((_b = this.actions) === null || _b === void 0 ? void 0 : _b.includes('clear')) ? ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: "tiny", onClick: this.handleClearClick }, { default: () => this.locale.clear })) : null,
-                    ((_c = this.actions) === null || _c === void 0 ? void 0 : _c.includes('now')) ? ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: "tiny", onClick: this.handleNowClick }, { default: () => this.locale.now })) : null))) : null,
+                    ((_b = this.actions) === null || _b === void 0 ? void 0 : _b.includes('clear'))
+                        ? (0, _utils_1.resolveSlotWithProps)(this.$slots.clear, {
+                            onClear: this.handleClearClick,
+                            text: this.locale.clear
+                        }, () => [
+                            (0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: "tiny", onClick: this.handleClearClick }, { default: () => this.locale.clear })
+                        ])
+                        : null,
+                    ((_c = this.actions) === null || _c === void 0 ? void 0 : _c.includes('now'))
+                        ? (0, _utils_1.resolveSlotWithProps)(this.$slots.now, {
+                            onNow: this.handleNowClick,
+                            text: this.locale.now
+                        }, () => [
+                            (0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: "tiny", onClick: this.handleNowClick }, { default: () => this.locale.now })
+                        ])
+                        : null))) : null,
             (0, vue_1.h)(_internal_1.NBaseFocusDetector, { onFocus: this.handleFocusDetectorFocus })));
     }
 });