naive-ui 2.24.3 → 2.24.7

package/es/locales/common/jaJP.js

@@ -1,8 +1,8 @@
 const jaJP = {
     name: 'ja-JP',
     global: {
-        undo: 'undo',
-        redo: 'redo',
+        undo: '元に戻す',
+        redo: 'やり直す',
         confirm: 'OK'
     },
     Popconfirm: {
@@ -35,9 +35,8 @@ const jaJP = {
         datePlaceholder: '日付を選択',
         datetimePlaceholder: '選択',
         monthPlaceholder: '月を選択',
-        // FIXME: translation needed
-        yearPlaceholder: 'Select Year',
-        quarterPlaceholder: 'Select Quarter',
+        yearPlaceholder: '年を選択',
+        quarterPlaceholder: '四半期を選択',
         startDatePlaceholder: '開始日',
         endDatePlaceholder: '終了日',
         startDatetimePlaceholder: '開始時間',
@@ -69,7 +68,7 @@ const jaJP = {
         now: '現在'
     },
     Pagination: {
-        goto: '',
+        goto: 'ページジャンプ',
         selectionSuffix: 'ページ'
     },
     DynamicTags: {
@@ -97,15 +96,14 @@ const jaJP = {
         export: 'エクスポート',
         restore: 'デフォルト'
     },
-    // TODO: translation
     Image: {
-        tipPrevious: 'Previous picture (←)',
-        tipNext: 'Next picture (→)',
-        tipCounterclockwise: 'Counterclockwise',
-        tipClockwise: 'Clockwise',
-        tipZoomOut: 'Zoom out',
-        tipZoomIn: 'Zoom in',
-        tipClose: 'Close (Esc)'
+        tipPrevious: '前の画像 (←)',
+        tipNext: '次の画像 (→)',
+        tipCounterclockwise: '左に回転',
+        tipClockwise: '右に回転',
+        tipZoomOut: '縮小',
+        tipZoomIn: '拡大',
+        tipClose: '閉じる (Esc)'
     }
 };
 export default jaJP;

package/es/popselect/src/Popselect.d.ts

@@ -8,7 +8,6 @@ declare const popselectProps: {
         readonly default: null;
     };
     cancelable: BooleanConstructor;
-    width: PropType<string | number>;
     options: {
         readonly type: PropType<import("../../select/src/interface").SelectMixedOption[]>;
         readonly default: () => never[];
@@ -44,6 +43,10 @@ declare const popselectProps: {
     y: NumberConstructor;
     maxWidth: NumberConstructor;
     minWidth: NumberConstructor;
+    width: {
+        type: PropType<number | "trigger">;
+        default: undefined;
+    };
     zIndex: NumberConstructor;
     disabled: BooleanConstructor;
     duration: {
@@ -299,7 +302,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: null;
     };
     cancelable: BooleanConstructor;
-    width: PropType<string | number>;
     options: {
         readonly type: PropType<import("../../select/src/interface").SelectMixedOption[]>;
         readonly default: () => never[];
@@ -335,6 +337,10 @@ declare const _default: import("vue").DefineComponent<{
     y: NumberConstructor;
     maxWidth: NumberConstructor;
     minWidth: NumberConstructor;
+    width: {
+        type: PropType<number | "trigger">;
+        default: undefined;
+    };
     zIndex: NumberConstructor;
     disabled: BooleanConstructor;
     duration: {
@@ -795,7 +801,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: null;
     };
     cancelable: BooleanConstructor;
-    width: PropType<string | number>;
     options: {
         readonly type: PropType<import("../../select/src/interface").SelectMixedOption[]>;
         readonly default: () => never[];
@@ -831,6 +836,10 @@ declare const _default: import("vue").DefineComponent<{
     y: NumberConstructor;
     maxWidth: NumberConstructor;
     minWidth: NumberConstructor;
+    width: {
+        type: PropType<number | "trigger">;
+        default: undefined;
+    };
     zIndex: NumberConstructor;
     disabled: BooleanConstructor;
     duration: {
@@ -1082,6 +1091,7 @@ declare const _default: import("vue").DefineComponent<{
     size: import("./interface").PopselectSize;
     show: boolean | undefined;
     flip: boolean;
+    width: number | "trigger";
     multiple: boolean;
     disabled: boolean;
     duration: number;

package/es/popselect/src/Popselect.js

@@ -36,7 +36,7 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedTheme, $attrs, $slots } = this;
+        const { mergedTheme } = this;
         const popoverProps = {
             theme: mergedTheme.peers.Popover,
             themeOverrides: mergedTheme.peerOverrides.Popover,
@@ -45,15 +45,14 @@ export default defineComponent({
             },
             ref: 'popoverInstRef',
             internalRenderBody: (className, ref, style, onMouseenter, onMouseleave) => {
-                return (h(NPopselectPanel, Object.assign({}, mergeProps($attrs, {
+                return (h(NPopselectPanel, Object.assign({}, mergeProps(this.$attrs, {
                     class: className,
                     style
-                }), keep(this.$props, panelPropKeys), { ref: createRefSetter(ref), onMouseenter: onMouseenter, onMouseleave: onMouseleave }), $slots));
+                }), keep(this.$props, panelPropKeys), { ref: createRefSetter(ref), onMouseenter: onMouseenter, onMouseleave: onMouseleave }), { default: () => { var _a, _b; return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a); } }));
             }
         };
         return (h(NPopover, Object.assign({}, omit(this.$props, panelPropKeys), popoverProps), {
-            trigger: this.$slots.default,
-            _: 1
+            trigger: () => { var _a, _b; return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a); }
         }));
     }
 });

package/es/popselect/src/PopselectPanel.d.ts

@@ -11,7 +11,6 @@ export declare const panelProps: {
         readonly default: null;
     };
     readonly cancelable: BooleanConstructor;
-    readonly width: PropType<string | number>;
     readonly options: {
         readonly type: PropType<SelectMixedOption[]>;
         readonly default: () => never[];
@@ -28,7 +27,7 @@ export declare const panelProps: {
     readonly renderLabel: PropType<RenderLabel>;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 };
-export declare const panelPropKeys: ("value" | "size" | "width" | "multiple" | "onChange" | "onMouseenter" | "onMouseleave" | "scrollable" | "renderLabel" | "options" | "onUpdate:value" | "onUpdateValue" | "cancelable")[];
+export declare const panelPropKeys: ("value" | "size" | "multiple" | "onChange" | "onMouseenter" | "onMouseleave" | "scrollable" | "renderLabel" | "options" | "onUpdate:value" | "onUpdateValue" | "cancelable")[];
 declare const _default: import("vue").DefineComponent<{
     readonly multiple: BooleanConstructor;
     readonly value: {
@@ -36,7 +35,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: null;
     };
     readonly cancelable: BooleanConstructor;
-    readonly width: PropType<string | number>;
     readonly options: {
         readonly type: PropType<SelectMixedOption[]>;
         readonly default: () => never[];
@@ -266,7 +264,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: null;
     };
     readonly cancelable: BooleanConstructor;
-    readonly width: PropType<string | number>;
     readonly options: {
         readonly type: PropType<SelectMixedOption[]>;
         readonly default: () => never[];

package/es/popselect/src/PopselectPanel.js

@@ -14,7 +14,6 @@ export const panelProps = {
         default: null
     },
     cancelable: Boolean,
-    width: [Number, String],
     options: {
         type: Array,
         default: () => []
@@ -128,6 +127,6 @@ export default defineComponent({
         };
     },
     render() {
-        return (h(NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, focusable: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, width: this.width, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter, onMousedown: this.handleMenuMousedown }, this.$slots));
+        return (h(NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, focusable: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter, onMousedown: this.handleMenuMousedown }, this.$slots));
     }
 });

package/es/theme-editor/src/ThemeEditor.js

@@ -20,7 +20,7 @@ const ColorWandIcon = (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "ht
     h("path", { d: "M8.72956 4.56346C9.4771 3.81592 10.6891 3.81592 11.4367 4.56347C12.1842 5.31102 12.1842 6.52303 11.4367 7.27058L4.26679 14.4404C3.51924 15.1879 2.30723 15.1879 1.55968 14.4404C0.812134 13.6928 0.812138 12.4808 1.55969 11.7333L8.72956 4.56346ZM8.25002 6.4572L2.26679 12.4404C1.90977 12.7974 1.90977 13.3763 2.26679 13.7333C2.62381 14.0903 3.20266 14.0903 3.55968 13.7333L9.54292 7.75009L8.25002 6.4572ZM10.25 7.04299L10.7295 6.56347C11.0866 6.20645 11.0866 5.6276 10.7296 5.27057C10.3725 4.91355 9.79368 4.91355 9.43666 5.27057L8.95713 5.7501L10.25 7.04299Z", fill: "currentColor" })));
 // button colorOpacitySecondary var is not color
 const showColorPicker = (key) => {
-    if (key.includes('opacity'))
+    if (key.includes('pacity'))
         return false;
     if (key.includes('color') || key.includes('Color'))
         return true;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.24.3";
+declare const _default: "2.24.7";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.24.3';
+export default '2.24.7';

package/lib/color-picker/src/ColorPicker.d.ts

@@ -30,6 +30,10 @@ export declare const colorPickerPanelProps: {
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -914,6 +918,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -1773,6 +1781,7 @@ declare const _default: import("vue").DefineComponent<{
     hsla: ComputedRef<HSLA | null>;
     rgba: ComputedRef<RGBA | null>;
     mergedShow: ComputedRef<boolean>;
+    mergedDisabled: ComputedRef<boolean>;
     isMounted: Readonly<Ref<boolean>>;
     adjustedTo: ComputedRef<string | HTMLElement>;
     mergedValue: ComputedRef<string | null>;
@@ -1816,6 +1825,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -2670,6 +2683,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }>>, {
     show: boolean | undefined;
+    disabled: boolean | undefined;
     to: string | boolean | HTMLElement;
     defaultShow: boolean;
     showAlpha: boolean;

package/lib/color-picker/src/ColorPicker.js

@@ -35,7 +35,10 @@ exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useThe
     }, to: _utils_1.useAdjustedTo.propTo, showAlpha: {
         type: Boolean,
         default: true
-    }, showPreview: Boolean, swatches: Array, actions: {
+    }, showPreview: Boolean, swatches: Array, disabled: {
+        type: Boolean,
+        default: undefined
+    }, actions: {
         type: Array,
         default: null
     }, internalActions: Array, size: String, renderLabel: Function, onComplete: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
@@ -47,7 +50,7 @@ exports.default = (0, vue_1.defineComponent)({
         const selfRef = (0, vue_1.ref)(null);
         let upcomingValue = null;
         const formItem = (0, _mixins_1.useFormItem)(props);
-        const { mergedSizeRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef } = formItem;
         const { localeRef } = (0, _mixins_1.useLocale)('global');
         const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('ColorPicker', 'ColorPicker', index_cssr_1.default, styles_1.colorPickerLight, props, mergedClsPrefixRef);
@@ -383,6 +386,7 @@ exports.default = (0, vue_1.defineComponent)({
             hsla: hslaRef,
             rgba: rgbaRef,
             mergedShow: mergedShowRef,
+            mergedDisabled: mergedDisabledRef,
             isMounted: (0, vooks_1.useIsMounted)(),
             adjustedTo: (0, _utils_1.useAdjustedTo)(props),
             mergedValue: mergedValueRef,
@@ -405,7 +409,7 @@ exports.default = (0, vue_1.defineComponent)({
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)(ColorPickerTrigger_1.default, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, onClick: this.handleTriggerClick }, {
+                        default: () => ((0, vue_1.h)(ColorPickerTrigger_1.default, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, disabled: this.mergedDisabled, onClick: this.handleTriggerClick }, {
                             label: $slots.label
                         }))
                     }),

package/lib/color-picker/src/ColorPickerTrigger.d.ts

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HSLA | null>;
         default: null;
     };
+    disabled: BooleanConstructor;
     onClick: PropType<() => void>;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
@@ -27,9 +28,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HSLA | null>;
         default: null;
     };
+    disabled: BooleanConstructor;
     onClick: PropType<() => void>;
 }>>, {
     value: string | null;
+    disabled: boolean;
     hsla: HSLA | null;
 }>;
 export default _default;

package/lib/color-picker/src/ColorPickerTrigger.js

@@ -18,15 +18,19 @@ exports.default = (0, vue_1.defineComponent)({
             type: Array,
             default: null
         },
+        disabled: Boolean,
         onClick: Function
     },
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const { colorPickerSlots, renderLabelRef } = (0, vue_1.inject)(ColorPicker_1.colorPickerInjectionKey, null);
         return () => {
-            const { hsla, value, clsPrefix, onClick } = props;
+            const { hsla, value, clsPrefix, onClick, disabled } = props;
             const renderLabel = colorPickerSlots.label || renderLabelRef.value;
-            return ((0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger`, onClick: onClick },
+            return ((0, vue_1.h)("div", { class: [
+                    `${clsPrefix}-color-picker-trigger`,
+                    disabled && `${clsPrefix}-color-picker-trigger--disabled`
+                ], onClick: disabled ? undefined : onClick },
                 (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
                     (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-checkboard` }),
                     (0, vue_1.h)("div", { style: {

package/lib/color-picker/src/styles/index.cssr.js

@@ -165,7 +165,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('color-picker', `
  right: 4px;
  top: 4px;
  bottom: 4px;
- `), (0, cssr_1.cB)('color-picker-checkboard', `
+ `), (0, cssr_1.cM)('disabled', 'cursor: not-allowed'), (0, cssr_1.cB)('color-picker-checkboard', `
  border-radius: var(--n-border-radius);
  `, [(0, cssr_1.c)('&::after', `
  --n-block-size: calc((var(--n-height) - 8px) / 3);

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

@@ -78,6 +78,7 @@ declare const datePickerProps: {
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -689,6 +690,7 @@ declare const datePickerProps: {
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -1300,6 +1302,7 @@ declare const datePickerProps: {
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -1972,6 +1975,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -2583,6 +2587,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -3194,6 +3199,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -3974,6 +3980,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;
@@ -4875,6 +4882,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-panel-header-divider-color': string;
         '--n-calendar-left-padding': string;
         '--n-calendar-right-padding': string;
+        '--n-calendar-title-color-hover': string;
         '--n-calendar-title-height': string;
         '--n-calendar-title-padding': string;
         '--n-calendar-title-font-size': string;
@@ -4986,6 +4994,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -5597,6 +5606,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -6208,6 +6218,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;

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

@@ -515,7 +515,7 @@ exports.default = (0, vue_1.defineComponent)({
                 };
             }), 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;
+                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, calendarTitleColorHover, [(0, _utils_1.createKey)('calendarLeftPadding', type)]: calendarLeftPadding, [(0, _utils_1.createKey)('calendarRightPadding', type)]: calendarRightPadding } } = themeRef.value;
                 return {
                     '--n-bezier': cubicBezierEaseInOut,
                     '--n-panel-border-radius': panelBorderRadius,
@@ -528,6 +528,7 @@ exports.default = (0, vue_1.defineComponent)({
                     // panel calendar
                     '--n-calendar-left-padding': calendarLeftPadding,
                     '--n-calendar-right-padding': calendarRightPadding,
+                    '--n-calendar-title-color-hover': calendarTitleColorHover,
                     '--n-calendar-title-height': calendarTitleHeight,
                     '--n-calendar-title-padding': calendarTitlePadding,
                     '--n-calendar-title-font-size': calendarTitleFontSize,

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

@@ -192,6 +192,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -178,6 +178,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -186,6 +186,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -178,6 +178,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -194,6 +194,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -271,6 +271,7 @@ declare const _default: import("vue").DefineComponent<{
                     panelTextColor: string;
                     arrowColor: string;
                     calendarTitleTextColor: string;
+                    calendarTitleColorHover: string;
                     calendarDaysTextColor: string;
                     panelHeaderDividerColor: string;
                     calendarDaysDividerColor: string;
@@ -1449,6 +1450,7 @@ declare const _default: import("vue").DefineComponent<{
                 panelTextColor: string;
                 arrowColor: string;
                 calendarTitleTextColor: string;
+                calendarTitleColorHover: string;
                 calendarDaysTextColor: string;
                 panelHeaderDividerColor: string;
                 calendarDaysDividerColor: string;

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

@@ -58,9 +58,13 @@ exports.default = (0, vue_1.defineComponent)({
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__text`, onClick: this.handleHeaderClick }, this.monthBeforeYear
-                            ? [this.calendarMonth, this.calendarYear]
-                            : [this.calendarYear, this.calendarMonth]))
+                        default: () => ((0, vue_1.h)("div", { class: [
+                                `${mergedClsPrefix}-date-panel-month__text`,
+                                this.show &&
+                                    `${mergedClsPrefix}-date-panel-month__text--active`
+                            ], onClick: this.handleHeaderClick }, this.monthBeforeYear
+                            ? [this.calendarMonth, ' ', this.calendarYear]
+                            : [this.calendarYear, ' ', this.calendarMonth]))
                     }),
                     (0, vue_1.h)(vueuc_1.VFollower, { show: this.show, teleportDisabled: true }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: true }, {

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

@@ -190,6 +190,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -182,6 +182,7 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -144,6 +144,7 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

package/lib/date-picker/src/styles/index.cssr.js

@@ -26,6 +26,7 @@ const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transi
 // panel calendar
 // --n-calendar-left-padding
 // --n-calendar-right-padding
+// --n-calendar-title-color-hover
 // --n-calendar-title-height
 // --n-calendar-title-padding
 // --n-calendar-title-font-size
@@ -199,16 +200,24 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('date-picker', `
  height: var(--n-arrow-size);
  color: var(--n-arrow-color);
  `), (0, cssr_1.cE)('month-year', `
+ user-select: none;
  flex-grow: 1;
  position: relative;
  `, [(0, cssr_1.cE)('text', `
  font-size: var(--n-calendar-title-font-size);
+ line-height: var(--n-calendar-title-font-size);
  font-weight: var(--n-calendar-title-font-weight);
- line-height: 17px;
+ padding: 6px 8px;
  text-align: center;
  color: var(--n-calendar-title-text-color);
  cursor: pointer;
- `)])]), (0, cssr_1.cB)('date-panel-weekdays', `
+ transition: background-color .3s var(--n-bezier);
+ border-radius: var(--n-panel-border-radius);
+ `, [(0, cssr_1.cM)('active', `
+ background-color: var(--n-calendar-title-color-hover);
+ `), (0, cssr_1.c)('&:hover', `
+ background-color: var(--n-calendar-title-color-hover);
+ `)])])]), (0, cssr_1.cB)('date-panel-weekdays', `
  display: grid;
  margin: auto;
  grid-template-columns: repeat(7, var(--n-item-cell-width));
@@ -218,6 +227,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('date-picker', `
  margin-bottom: 4px;
  border-bottom: 1px solid var(--n-calendar-days-divider-color);
  `, [(0, cssr_1.cE)('day', `
+ user-select: none;
  line-height: 15px;
  width: var(--n-item-size);
  text-align: center;
@@ -232,6 +242,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('date-picker', `
  justify-items: center;
  flex-wrap: wrap;
  `, [(0, cssr_1.cB)('date-panel-date', `
+ user-select: none;
  position: relative;
  width: var(--n-item-size);
  height: var(--n-item-size);

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

@@ -16,6 +16,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     panelTextColor: string;
     arrowColor: string;
     calendarTitleTextColor: string;
+    calendarTitleColorHover: string;
     calendarDaysTextColor: string;
     panelHeaderDividerColor: string;
     calendarDaysDividerColor: string;
@@ -73,6 +74,7 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     panelTextColor: string;
     arrowColor: string;
     calendarTitleTextColor: string;
+    calendarTitleColorHover: string;
     calendarDaysTextColor: string;
     panelHeaderDividerColor: string;
     calendarDaysDividerColor: string;