naive-ui 2.24.4 → 2.25.0

package/lib/composables/use-theme-vars.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useThemeVars = void 0;
 const vue_1 = require("vue");
-const ConfigProvider_1 = require("../config-provider/src/ConfigProvider");
+const context_1 = require("../config-provider/src/context");
 const common_1 = require("../_styles/common");
 function useThemeVars() {
-    const configProviderInjection = (0, vue_1.inject)(ConfigProvider_1.configProviderInjectionKey, null);
+    const configProviderInjection = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
     return (0, vue_1.computed)(() => {
         if (configProviderInjection === null)
             return common_1.commonLight;

package/lib/config-provider/src/ConfigProvider.d.ts

@@ -1,10 +1,9 @@
 import { PropType, ComputedRef } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
 import { Hljs } from '../../_mixins';
-import type { GlobalTheme, GlobalThemeOverrides, GlobalComponentConfig, GlobalIconConfig } from './interface';
-import type { ConfigProviderInjection, RtlProp, Breakpoints } from './internal-interface';
 import { NDateLocale } from '../../locales';
-export declare const configProviderInjectionKey: import("vue").InjectionKey<ConfigProviderInjection>;
+import type { GlobalTheme, GlobalThemeOverrides, GlobalComponentConfig, GlobalIconConfig } from './interface';
+import type { RtlProp, Breakpoints } from './internal-interface';
 export declare const configProviderProps: {
     readonly abstract: BooleanConstructor;
     readonly bordered: {
@@ -133,6 +132,10 @@ export declare const configProviderProps: {
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
+    readonly disableInlineTheme: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     readonly as: {
         readonly type: PropType<string | undefined>;
         readonly validator: () => boolean;
@@ -268,6 +271,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
+    readonly disableInlineTheme: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     readonly as: {
         readonly type: PropType<string | undefined>;
         readonly validator: () => boolean;
@@ -407,6 +414,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
+    readonly disableInlineTheme: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     readonly as: {
         readonly type: PropType<string | undefined>;
         readonly validator: () => boolean;
@@ -417,5 +428,6 @@ declare const _default: import("vue").DefineComponent<{
     tag: string;
     as: string | undefined;
     bordered: boolean | undefined;
+    disableInlineTheme: boolean;
 }>;
 export default _default;

package/lib/config-provider/src/ConfigProvider.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.configProviderProps = exports.configProviderInjectionKey = void 0;
+exports.configProviderProps = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const lodash_1 = require("lodash");
+const css_render_1 = require("css-render");
 const _utils_1 = require("../../_utils");
 const _mixins_1 = require("../../_mixins");
-exports.configProviderInjectionKey = (0, _utils_1.createInjectionKey)('n-config-provider');
+const context_1 = require("./context");
 exports.configProviderProps = {
     abstract: Boolean,
     bordered: {
@@ -28,6 +29,10 @@ exports.configProviderProps = {
     componentOptions: Object,
     icons: Object,
     breakpoints: Object,
+    disableInlineTheme: {
+        type: Boolean,
+        default: undefined
+    },
     // deprecated
     as: {
         type: String,
@@ -43,7 +48,7 @@ exports.default = (0, vue_1.defineComponent)({
     alias: ['App'],
     props: exports.configProviderProps,
     setup(props) {
-        const NConfigProvider = (0, vue_1.inject)(exports.configProviderInjectionKey, null);
+        const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
         const mergedThemeRef = (0, vue_1.computed)(() => {
             const { theme } = props;
             if (theme === null)
@@ -118,7 +123,27 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedBreakpointsRef = (0, vue_1.computed)(() => {
             return props.breakpoints || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef.value);
         });
-        (0, vue_1.provide)(exports.configProviderInjectionKey, {
+        const disableInlineTheme = props.disableInlineTheme || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme);
+        const mergedThemeHashRef = (0, vue_1.computed)(() => {
+            const { value: theme } = mergedThemeRef;
+            const { value: mergedThemeOverrides } = mergedThemeOverridesRef;
+            const hasThemeOverrides = mergedThemeOverrides && Object.keys(mergedThemeOverrides).length !== 0;
+            const themeName = theme === null || theme === void 0 ? void 0 : theme.name;
+            if (themeName) {
+                if (hasThemeOverrides) {
+                    return `${themeName}-${(0, css_render_1.hash)(JSON.stringify(mergedThemeOverridesRef.value))}`;
+                }
+                return themeName;
+            }
+            else {
+                if (hasThemeOverrides) {
+                    return (0, css_render_1.hash)(JSON.stringify(mergedThemeOverridesRef.value));
+                }
+                return '';
+            }
+        });
+        (0, vue_1.provide)(context_1.configProviderInjectionKey, {
+            mergedThemeHashRef,
             mergedBreakpointsRef,
             mergedRtlRef,
             mergedIconsRef,
@@ -147,7 +172,8 @@ exports.default = (0, vue_1.defineComponent)({
                 return hljs === undefined ? NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedHljsRef.value : hljs;
             }),
             mergedThemeRef,
-            mergedThemeOverridesRef
+            mergedThemeOverridesRef,
+            disableInlineTheme: disableInlineTheme || false
         });
         return {
             mergedClsPrefix: mergedClsPrefixRef,

package/lib/config-provider/src/context.d.ts

@@ -0,0 +1,2 @@
+import type { ConfigProviderInjection } from './internal-interface';
+export declare const configProviderInjectionKey: import("vue").InjectionKey<ConfigProviderInjection>;

package/lib/config-provider/src/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configProviderInjectionKey = void 0;
+const _utils_1 = require("../../_utils");
+exports.configProviderInjectionKey = (0, _utils_1.createInjectionKey)('n-config-provider');

package/lib/config-provider/src/interface.d.ts

@@ -1,10 +1,11 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { ExtractThemeOverrides } from '../../_mixins/use-theme';
 import type { GlobalThemeWithoutCommon } from './internal-interface';
-export { ThemeCommonVars };
+export type { ThemeCommonVars };
 export interface CustomThemeCommonVars {
 }
 export interface GlobalTheme extends GlobalThemeWithoutCommon {
+    name: string;
     common?: ThemeCommonVars;
 }
 export declare type GlobalThemeOverrides = {

package/lib/config-provider/src/internal-interface.d.ts

@@ -31,6 +31,7 @@ import type { EmptyTheme } from '../../empty/styles';
 import type { FormTheme } from '../../form/styles';
 import type { GradientTextTheme } from '../../gradient-text/styles';
 import type { IconTheme } from '../../icon/styles';
+import type { IconWrapperTheme } from '../../icon-wrapper/styles';
 import type { ImageTheme } from '../../image/styles';
 import type { InputTheme } from '../../input/styles';
 import type { InputNumberTheme } from '../../input-number/styles';
@@ -119,6 +120,7 @@ export interface GlobalThemeWithoutCommon {
     Form?: FormTheme;
     GradientText?: GradientTextTheme;
     Icon?: IconTheme;
+    IconWrapper?: IconWrapperTheme;
     Image?: ImageTheme;
     Input?: InputTheme;
     InputNumber?: InputNumberTheme;
@@ -226,4 +228,6 @@ export interface ConfigProviderInjection {
     mergedThemeRef: Ref<GlobalTheme | undefined>;
     mergedThemeOverridesRef: Ref<GlobalThemeOverrides | undefined>;
     mergedRtlRef: Ref<RtlEnabledState | undefined>;
+    mergedThemeHashRef: Ref<string>;
+    disableInlineTheme: boolean;
 }

package/lib/data-table/src/DataTable.d.ts

@@ -6686,8 +6686,8 @@ declare const _default: import("vue").DefineComponent<{
     size: "small" | "medium" | "large";
     tableLayout: "fixed" | "auto";
     columns: TableColumns<any>;
-    loading: boolean;
     bordered: boolean | undefined;
+    loading: boolean;
     virtualScroll: boolean;
     remote: boolean;
     pagination: false | PaginationProps;

package/lib/data-table/src/DataTable.js

@@ -98,7 +98,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return bottomBordered;
             return true;
         });
-        const themeRef = (0, _mixins_1.useTheme)('DataTable', 'DataTable', index_cssr_1.default, styles_1.dataTableLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('DataTable', '-data-table', index_cssr_1.default, styles_1.dataTableLight, props, mergedClsPrefixRef);
         const bodyWidthRef = (0, vue_1.ref)(null);
         const scrollPartRef = (0, vue_1.ref)('body');
         const mainTableInstRef = (0, vue_1.ref)(null);

package/lib/data-table/src/interface.d.ts

@@ -4,8 +4,8 @@ import { EllipsisProps } from '../../ellipsis/src/Ellipsis';
 import { NLocale } from '../../locales';
 import { MergedTheme } from '../../_mixins';
 import { DataTableTheme } from '../styles';
-import { RowItem, ColItem } from './use-group-header';
-import { DataTableSelectionOption } from './TableParts/SelectionMenu';
+import type { RowItem, ColItem } from './use-group-header';
+import type { DataTableSelectionOption } from './TableParts/SelectionMenu';
 export declare type FilterOptionValue = string | number;
 export declare type ColumnKey = string | number;
 export declare type RowKey = string | number;

package/lib/data-table/src/use-check.d.ts

@@ -1,6 +1,6 @@
 import { ComputedRef } from 'vue';
-import { DataTableSetupProps } from './DataTable';
-import { RowKey, TableSelectionColumn, InternalRowData, TmNode } from './interface';
+import type { DataTableSetupProps } from './DataTable';
+import type { RowKey, TableSelectionColumn, InternalRowData, TmNode } from './interface';
 import { TreeMate } from 'treemate';
 export declare function useCheck(props: DataTableSetupProps, data: {
     selectionColumnRef: ComputedRef<TableSelectionColumn | null>;

package/lib/data-table/src/use-group-header.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ComputedRef } from 'vue';
-import { DataTableSetupProps } from './DataTable';
+import type { DataTableSetupProps } from './DataTable';
 import type { TableExpandColumn, TableSelectionColumn, TableColumn, TableBaseColumn } from './interface';
 export interface RowItem {
     colSpan: number;

package/lib/data-table/src/use-scroll.d.ts

@@ -1,5 +1,5 @@
 import { ComputedRef, Ref } from 'vue';
-import { DataTableSetupProps } from './DataTable';
+import type { DataTableSetupProps } from './DataTable';
 import type { ColumnKey, MainTableRef, TableColumn } from './interface';
 export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef, scrollPartRef }: {
     scrollPartRef: Ref<'head' | 'body'>;

package/lib/data-table/src/use-scroll.js

@@ -33,7 +33,7 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
                     positionInfo.end = left;
                 }
                 else {
-                    left += (0, utils_1.getColWidth)(col) || 0;
+                    left += (0, utils_1.getNumberColWidth)(col) || 0;
                     positionInfo.end = left;
                 }
             });
@@ -54,7 +54,7 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
                     positionInfo.end = right;
                 }
                 else {
-                    right += (0, utils_1.getColWidth)(col) || 0;
+                    right += (0, utils_1.getNumberColWidth)(col) || 0;
                     positionInfo.end = right;
                 }
             }

package/lib/data-table/src/use-sorter.d.ts

@@ -1,5 +1,5 @@
 import { ComputedRef } from 'vue';
-import { ColumnKey, InternalRowData, SortOrder, SortState, TmNode, TableBaseColumn, TableExpandColumn, TableSelectionColumn, CompareFn } from './interface';
+import type { ColumnKey, InternalRowData, SortOrder, SortState, TmNode, TableBaseColumn, TableExpandColumn, TableSelectionColumn, CompareFn } from './interface';
 import type { DataTableSetupProps } from './DataTable';
 export declare function useSorter(props: DataTableSetupProps, { dataRelatedColsRef, filteredDataRef }: {
     dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;

package/lib/data-table/src/use-table-data.d.ts

@@ -1,6 +1,6 @@
 import { ComputedRef } from 'vue';
 import type { DataTableSetupProps } from './DataTable';
-import { ColumnKey, FilterState, TableBaseColumn, TableSelectionColumn, InternalRowData, TmNode, TableExpandColumn, RowKey } from './interface';
+import type { ColumnKey, FilterState, TableBaseColumn, TableSelectionColumn, InternalRowData, TmNode, TableExpandColumn, RowKey } from './interface';
 import { PaginationProps } from '../../pagination/src/Pagination';
 export declare function useTableData(props: DataTableSetupProps, { dataRelatedColsRef }: {
     dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;

package/lib/data-table/src/utils.d.ts

@@ -2,7 +2,8 @@ import { CSSProperties } from 'vue';
 import type { SortOrder, TableBaseColumn, InternalRowData, SortOrderFlag, SortState, CreateRowClassName, TableSelectionColumn, TableColumn, TableExpandColumn } from './interface';
 export declare const selectionColWidth = 40;
 export declare const expandColWidth = 40;
-export declare function getColWidth(col: TableColumn): number | undefined;
+export declare function getNumberColWidth(col: TableColumn): number | undefined;
+export declare function getStringColWidth(col: TableColumn): string | undefined;
 export declare function getColKey(col: TableColumn): string | number;
 export declare function createShallowClonedObject<T>(object: T): T;
 export declare function getFlagOfOrder(order: SortOrder): SortOrderFlag;

package/lib/data-table/src/utils.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isColumnSorting = exports.createNextSorter = exports.isColumnFilterable = exports.isColumnSortable = exports.shouldUseArrayInSingleMode = exports.createRowClassName = exports.createCustomWidthStyle = exports.getFlagOfOrder = exports.createShallowClonedObject = exports.getColKey = exports.getColWidth = exports.expandColWidth = exports.selectionColWidth = void 0;
+exports.isColumnSorting = exports.createNextSorter = exports.isColumnFilterable = exports.isColumnSortable = exports.shouldUseArrayInSingleMode = exports.createRowClassName = exports.createCustomWidthStyle = exports.getFlagOfOrder = exports.createShallowClonedObject = exports.getColKey = exports.getStringColWidth = exports.getNumberColWidth = exports.expandColWidth = exports.selectionColWidth = void 0;
 const seemly_1 = require("seemly");
+const _utils_1 = require("../../_utils");
 exports.selectionColWidth = 40;
 exports.expandColWidth = 40;
-function getColWidth(col) {
+function getNumberColWidth(col) {
     if (col.type === 'selection')
         return exports.selectionColWidth;
     if (col.type === 'expand')
@@ -16,7 +17,17 @@ function getColWidth(col) {
     }
     return col.width;
 }
-exports.getColWidth = getColWidth;
+exports.getNumberColWidth = getNumberColWidth;
+function getStringColWidth(col) {
+    if (col.type === 'selection')
+        return (0, _utils_1.formatLength)(exports.selectionColWidth);
+    if (col.type === 'expand')
+        return (0, _utils_1.formatLength)(exports.expandColWidth);
+    if ('children' in col)
+        return undefined;
+    return (0, _utils_1.formatLength)(col.width);
+}
+exports.getStringColWidth = getStringColWidth;
 function getColKey(col) {
     if (col.type === 'selection')
         return '__n_selection__';
@@ -43,7 +54,7 @@ function getFlagOfOrder(order) {
 }
 exports.getFlagOfOrder = getFlagOfOrder;
 function createCustomWidthStyle(column) {
-    const width = (0, seemly_1.pxfy)(getColWidth(column));
+    const width = getStringColWidth(column);
     return {
         width,
         minWidth: width

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;
@@ -3789,6 +3795,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
+    mergedStatus: import("vue").ComputedRef<import("../../form/src/interface").FormValidationStatus | undefined>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     namespace: import("vue").ComputedRef<string | undefined>;
@@ -3974,6 +3981,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;
@@ -4875,6 +4883,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 +4995,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -5597,6 +5607,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -6208,6 +6219,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -6807,8 +6819,8 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean | undefined;
     disabled: boolean | undefined;
     to: string | boolean | HTMLElement;
-    placement: FollowerPlacement;
     bordered: boolean | undefined;
+    placement: FollowerPlacement;
     clearable: boolean;
     updateValueOnClose: boolean;
     inputReadonly: boolean;

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

@@ -56,7 +56,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         const { localeRef, dateLocaleRef } = (0, _mixins_1.useLocale)('DatePicker');
         const formItem = (0, _mixins_1.useFormItem)(props);
-        const { mergedSizeRef, mergedDisabledRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         const { NConfigProvider, mergedClsPrefixRef, mergedBorderedRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
         const panelInstRef = (0, vue_1.ref)(null);
         const triggerElRef = (0, vue_1.ref)(null);
@@ -125,7 +125,7 @@ exports.default = (0, vue_1.defineComponent)({
         const singleInputValueRef = (0, vue_1.ref)('');
         const rangeStartInputValueRef = (0, vue_1.ref)('');
         const rangeEndInputValueRef = (0, vue_1.ref)('');
-        const themeRef = (0, _mixins_1.useTheme)('DatePicker', 'DatePicker', index_cssr_1.default, styles_1.datePickerLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('DatePicker', '-date-picker', index_cssr_1.default, styles_1.datePickerLight, props, mergedClsPrefixRef);
         const timePickerSizeRef = (0, vue_1.computed)(() => {
             var _a, _b;
             return (((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DatePicker) === null || _b === void 0 ? void 0 : _b.timePickerSize) || 'small');
@@ -491,7 +491,7 @@ exports.default = (0, vue_1.defineComponent)({
                 (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
-        return Object.assign(Object.assign({}, exposedMethods), { mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, pendingValue: pendingValueRef, panelInstRef,
+        return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, pendingValue: pendingValueRef, panelInstRef,
             triggerElRef,
             inputInstRef, isMounted: (0, vooks_1.useIsMounted)(), displayTime: singleInputValueRef, displayStartTime: rangeStartInputValueRef, displayEndTime: rangeEndInputValueRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), isRange: isRangeRef, localizedStartPlaceholder: localizedStartPlaceholderRef, localizedEndPlaceholder: localizedEndPlaceholderRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, localizedPlacehoder: localizedPlacehoderRef, isValueInvalid: uniVaidation.isValueInvalidRef, isStartValueInvalid: dualValidation.isStartValueInvalidRef, isEndValueInvalid: dualValidation.isEndValueInvalidRef, handleClickOutside,
             handleKeyDown,
@@ -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,
@@ -608,7 +609,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: () => this.isRange ? ((0, vue_1.h)(input_1.NInput, Object.assign({ ref: "inputInstRef", value: [this.displayStartTime, this.displayEndTime], placeholder: [
+                        default: () => this.isRange ? ((0, vue_1.h)(input_1.NInput, Object.assign({ ref: "inputInstRef", status: this.mergedStatus, value: [this.displayStartTime, this.displayEndTime], placeholder: [
                                 this.localizedStartPlaceholder,
                                 this.localizedEndPlaceholder
                             ], textDecoration: [
@@ -617,13 +618,13 @@ exports.default = (0, vue_1.defineComponent)({
                             ], pair: true, onUpdateValue: this.handleRangeUpdateValue, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, internalForceFocus: this.mergedShow, internalDeactivateOnEnter: true }, commonInputProps), {
                             separator: () => this.separator === undefined ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-date-picker-icon` }, { default: () => (0, vue_1.h)(icons_1.ToIcon, null) })) : (this.separator),
                             [clearable ? 'clear' : 'suffix']: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-date-picker-icon` }, { default: () => (0, vue_1.h)(icons_1.DateIcon, null) }))
-                        })) : ((0, vue_1.h)(input_1.NInput, Object.assign({ ref: "inputInstRef", value: this.displayTime, placeholder: this.localizedPlacehoder, textDecoration: this.isValueInvalid && !this.isRange
+                        })) : ((0, vue_1.h)(input_1.NInput, Object.assign({ ref: "inputInstRef", status: this.mergedStatus, value: this.displayTime, placeholder: this.localizedPlacehoder, textDecoration: this.isValueInvalid && !this.isRange
                                 ? 'line-through'
                                 : '', onUpdateValue: this.handleSingleUpdateValue, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, internalForceFocus: this.mergedShow, internalDeactivateOnEnter: true }, commonInputProps), {
                             [clearable ? 'clear' : 'suffix']: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-date-picker-icon` }, { default: () => (0, vue_1.h)(icons_1.DateIcon, null) }))
                         }))
                     }),
-                    (0, vue_1.h)(vueuc_1.VFollower, { show: this.mergedShow, containerClass: this.namespace, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, placement: "bottom-start" }, {
+                    (0, vue_1.h)(vueuc_1.VFollower, { show: this.mergedShow, containerClass: this.namespace, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, placement: this.placement }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => this.mergedShow
                                 ? (0, vue_1.withDirectives)(this.type === 'datetime' ? ((0, vue_1.h)(datetime_1.default, Object.assign({}, commonPanelProps))) : this.type === 'daterange' ? ((0, vue_1.h)(daterange_1.default, Object.assign({}, commonPanelProps))) : this.type === 'datetimerange' ? ((0, vue_1.h)(datetimerange_1.default, Object.assign({}, commonPanelProps))) : this.type === 'month' ? ((0, vue_1.h)(month_1.default, Object.assign({}, commonPanelProps, { type: "month", key: "month" }))) : this.type === 'year' ? ((0, vue_1.h)(month_1.default, Object.assign({}, commonPanelProps, { type: "year", key: "year" }))) : this.type === 'quarter' ? ((0, vue_1.h)(month_1.default, Object.assign({}, commonPanelProps, { type: "quarter", key: "quarter" }))) : ((0, vue_1.h)(date_1.default, Object.assign({}, commonPanelProps))), [[vdirs_1.clickoutside, this.handleClickOutside]])

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;