naive-ui 2.24.1 → 2.24.5

package/es/data-table/src/TableParts/ExpandTrigger.d.ts

@@ -9,15 +9,17 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<() => void>;
         required: true;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    clsPrefix?: unknown;
-    expanded?: unknown;
-    onClick?: unknown;
-} & {
-    expanded: boolean;
-    onClick: () => void;
-    clsPrefix: string;
-} & {}>, {
+}, unknown, 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: {
+        type: StringConstructor;
+        required: true;
+    };
+    expanded: BooleanConstructor;
+    onClick: {
+        type: PropType<() => void>;
+        required: true;
+    };
+}>>, {
     expanded: boolean;
 }>;
 export default _default;

package/es/data-table/src/TableParts/Header.d.ts

@@ -539,6 +539,7 @@ declare const _default: import("vue").DefineComponent<{
                         clearColorHover: string;
                         clearColorPressed: string;
                         paddingSingle: string;
+                        paddingMultiple: string;
                         clearSize: string;
                         arrowSize: string;
                     }, {
@@ -798,6 +799,7 @@ declare const _default: import("vue").DefineComponent<{
                             clearColorHover: string;
                             clearColorPressed: string;
                             paddingSingle: string;
+                            paddingMultiple: string;
                             clearSize: string;
                             arrowSize: string;
                         }, {
@@ -981,11 +983,12 @@ declare const _default: import("vue").DefineComponent<{
     handleCheckboxUpdateChecked: () => void;
     handleColHeaderClick: (e: MouseEvent, column: TableBaseColumn) => void;
     handleTableHeaderScroll: (e: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    discrete?: unknown;
-} & {
-    discrete: boolean;
-} & {}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    discrete: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
     discrete: boolean;
 }>;
 export default _default;

package/es/data-table/src/TableParts/SelectionMenu.d.ts

@@ -10,9 +10,10 @@ declare const _default: import("vue").DefineComponent<{
         label: string;
         key: string | number;
     }[]>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    clsPrefix?: unknown;
-} & {
-    clsPrefix: string;
-} & {}>, {}>;
+}, 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: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
 export default _default;

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

@@ -1,5 +1,5 @@
 import { TreeNode } from 'treemate';
-import { CSSProperties, InjectionKey, Ref, VNodeChild, HTMLAttributes, Slots } from 'vue';
+import { CSSProperties, Ref, VNodeChild, HTMLAttributes, Slots } from 'vue';
 import { EllipsisProps } from '../../ellipsis/src/Ellipsis';
 import { NLocale } from '../../locales';
 import { MergedTheme } from '../../_mixins';
@@ -65,9 +65,10 @@ export declare type TableBaseColumn<T = InternalRowData> = {
     defaultFilterOptionValue?: FilterOptionValue | null;
     filterMultiple?: boolean;
     render?: (rowData: T, rowIndex: number) => VNodeChild;
-    renderSorter?: RenderSorter;
     renderFilter?: RenderFilter;
-    renderFilterIcon?: RenderFilter;
+    renderFilterIcon?: RenderFilterIcon;
+    renderSorter?: RenderSorter;
+    renderSorterIcon?: RenderSorterIcon;
     renderFilterMenu?: RenderFilterMenu;
     colSpan?: (rowData: T, rowIndex: number) => number;
     rowSpan?: (rowData: T, rowIndex: number) => number;
@@ -92,7 +93,7 @@ export interface TableExpandColumn<T = InternalRowData> extends Omit<TableSelect
     renderExpand: RenderExpand<T>;
     expandable?: Expandable<T>;
 }
-export declare type TableColumn<T = InternalRowData> = TableColumnGroup | TableBaseColumn<T> | TableSelectionColumn<T> | TableExpandColumn<T>;
+export declare type TableColumn<T = InternalRowData> = TableColumnGroup<T> | TableBaseColumn<T> | TableSelectionColumn<T> | TableExpandColumn<T>;
 export declare type TableColumns<T = InternalRowData> = Array<TableColumn<T>>;
 export declare type DataTableSelectionOptions = Array<DataTableSelectionOption | {
     label: string;
@@ -165,7 +166,7 @@ export interface DataTableInjection {
     syncScrollState: (deltaX?: number, deltaY?: number) => void;
     setHeaderScrollLeft: (scrollLeft: number) => void;
 }
-export declare const dataTableInjectionKey: InjectionKey<DataTableInjection>;
+export declare const dataTableInjectionKey: import("vue").InjectionKey<DataTableInjection>;
 export interface MainTableInjection {
     leftActiveFixedColKey: ColumnKey | null;
     rightActiveFixedColKey: ColumnKey | null;
@@ -174,9 +175,11 @@ export declare type RenderFilter = (props: {
     active: boolean;
     show: boolean;
 }) => VNodeChild;
+export declare type RenderFilterIcon = RenderFilter;
 export declare type RenderSorter = (props: {
-    order: SortOrder | false;
+    order: SortOrder;
 }) => VNodeChild;
+export declare type RenderSorterIcon = RenderSorter;
 export declare type RenderFilterMenu = (actions: {
     hide: () => void;
 }) => VNodeChild;

package/es/data-table/src/interface.js

@@ -1 +1,2 @@
-export const dataTableInjectionKey = Symbol('dataTable');
+import { createInjectionKey } from '../../_utils';
+export const dataTableInjectionKey = createInjectionKey('n-data-table');

package/es/data-table/src/styles/index.cssr.js

@@ -135,16 +135,16 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  margin-left: 4px;
  position: relative;
  display: inline-flex;
+ align-items: center;
+ justify-content: center;
  vertical-align: -0.2em;
  color: var(--n-th-icon-color);
- transition: 
- transform .3s var(--n-bezier),
- color .3s var(--n-bezier);
- `, [cM('desc', {
-  transform: 'rotate(0)'
-}), cM('asc', {
+ transition: color .3s var(--n-bezier);
+ `, [cB('base-icon', 'transition: transform .3s var(--n-bezier)'), cM('desc', [cB('base-icon', {
+  transform: 'rotate(0deg)'
+})]), cM('asc', [cB('base-icon', {
   transform: 'rotate(-180deg)'
-}), cM('asc, desc', {
+})]), cM('asc, desc', {
   color: 'var(--n-th-icon-color-active)'
 })]), cB('data-table-filter', `
  position: absolute;

package/es/data-table/styles/light.d.ts

@@ -461,6 +461,7 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
                 clearColorHover: string;
                 clearColorPressed: string;
                 paddingSingle: string;
+                paddingMultiple: string;
                 clearSize: string;
                 arrowSize: string;
             }, {

package/es/date-picker/index.d.ts

@@ -1,2 +1,3 @@
 export { default as NDatePicker } from './src/DatePicker';
 export type { DatePickerProps } from './src/DatePicker';
+export type { DatePickerInst } from './src/interface';

package/es/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;
@@ -3797,11 +3803,14 @@ declare const _default: import("vue").DefineComponent<{
     panelInstRef: Ref<{
         $el: HTMLElement;
         monthScrollRef?: {
-            scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
-            sync: () => void;
             containerRef: HTMLElement | null;
             contentRef: HTMLElement | null;
             containerScrollTop: number;
+            syncUnifiedContainer: () => void;
+            scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+            sync: () => void;
+            handleMouseEnterWrapper: () => void;
+            handleMouseLeaveWrapper: () => void;
         } | null | undefined;
         yearScrollRef?: {
             listElRef: HTMLElement;
@@ -3971,6 +3980,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;
@@ -4872,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;
@@ -4906,69 +4917,67 @@ declare const _default: import("vue").DefineComponent<{
         '--n-icon-color': string;
         '--n-icon-color-disabled': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly to?: unknown;
-    readonly bordered?: unknown;
-    readonly clearable?: unknown;
-    readonly updateValueOnClose?: unknown;
-    readonly defaultValue?: unknown;
-    readonly defaultFormattedValue?: unknown;
-    readonly defaultTime?: unknown;
-    readonly disabled?: unknown;
-    readonly placement?: unknown;
-    readonly value?: unknown;
-    readonly formattedValue?: unknown;
-    readonly size?: unknown;
-    readonly type?: unknown;
-    readonly valueFormat?: unknown;
-    readonly separator?: unknown;
-    readonly placeholder?: unknown;
-    readonly startPlaceholder?: unknown;
-    readonly endPlaceholder?: unknown;
-    readonly format?: unknown;
-    readonly dateFormat?: unknown;
-    readonly timeFormat?: unknown;
-    readonly actions?: unknown;
-    readonly shortcuts?: unknown;
-    readonly isDateDisabled?: unknown;
-    readonly isTimeDisabled?: unknown;
-    readonly show?: unknown;
-    readonly ranges?: unknown;
-    readonly firstDayOfWeek?: unknown;
-    readonly inputReadonly?: unknown;
-    readonly closeOnSelect?: unknown;
-    readonly 'onUpdate:show'?: unknown;
-    readonly onUpdateShow?: unknown;
-    readonly 'onUpdate:formattedValue'?: unknown;
-    readonly onUpdateFormattedValue?: unknown;
-    readonly 'onUpdate:value'?: unknown;
-    readonly onUpdateValue?: unknown;
-    readonly onFocus?: unknown;
-    readonly onBlur?: unknown;
-    readonly onChange?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    type: DatePickerType;
-    placement: FollowerPlacement;
-    clearable: boolean;
-    updateValueOnClose: boolean;
-    inputReadonly: boolean;
-    closeOnSelect: boolean;
-} & {
-    value?: Value | null | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    show?: boolean | undefined;
-    separator?: string | undefined;
-    disabled?: boolean | undefined;
-    onFocus?: ((e: FocusEvent) => void) | undefined;
-    onBlur?: ((e: FocusEvent) => void) | undefined;
-    onChange?: MaybeArray<OnUpdateValue> | undefined;
-    placeholder?: string | undefined;
-    format?: string | undefined;
-    to?: string | boolean | HTMLElement | undefined;
-    theme?: import("../../_mixins").Theme<"DatePicker", {
+    focus: () => void;
+    blur: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    readonly to: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: undefined;
+    };
+    readonly bordered: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly clearable: BooleanConstructor;
+    readonly updateValueOnClose: BooleanConstructor;
+    readonly defaultValue: PropType<Value | null>;
+    readonly defaultFormattedValue: PropType<FormattedValue | null>;
+    readonly defaultTime: PropType<DefaultTime>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly placement: {
+        readonly type: PropType<FollowerPlacement>;
+        readonly default: "bottom-start";
+    };
+    readonly value: PropType<Value | null>;
+    readonly formattedValue: PropType<FormattedValue | null>;
+    readonly size: PropType<"small" | "medium" | "large">;
+    readonly type: {
+        readonly type: PropType<DatePickerType>;
+        readonly default: "date";
+    };
+    readonly valueFormat: StringConstructor;
+    readonly separator: StringConstructor;
+    readonly placeholder: StringConstructor;
+    readonly startPlaceholder: StringConstructor;
+    readonly endPlaceholder: StringConstructor;
+    readonly format: StringConstructor;
+    readonly dateFormat: StringConstructor;
+    readonly timeFormat: StringConstructor;
+    readonly actions: PropType<("clear" | "confirm" | "now")[]>;
+    readonly shortcuts: PropType<Shortcuts>;
+    readonly isDateDisabled: PropType<IsDateDisabled>;
+    readonly isTimeDisabled: PropType<IsTimeDisabled>;
+    readonly show: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly ranges: PropType<Record<string, [number, number]>>;
+    readonly firstDayOfWeek: PropType<FirstDayOfWeek>;
+    readonly inputReadonly: BooleanConstructor;
+    readonly closeOnSelect: BooleanConstructor;
+    readonly 'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
+    readonly onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
+    readonly 'onUpdate:formattedValue': PropType<MaybeArray<OnUpdateFormattedValue>>;
+    readonly onUpdateFormattedValue: PropType<MaybeArray<OnUpdateFormattedValue>>;
+    readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
+    readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
+    readonly onFocus: PropType<(e: FocusEvent) => void>;
+    readonly onBlur: PropType<(e: FocusEvent) => void>;
+    readonly onChange: PropType<MaybeArray<OnUpdateValue>>;
+    readonly theme: PropType<import("../../_mixins").Theme<"DatePicker", {
         itemFontSize: string;
         calendarDaysFontSize: string;
         calendarTitleFontSize: string;
@@ -4985,6 +4994,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -5578,8 +5588,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"DatePicker", {
+    }>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"DatePicker", {
         itemFontSize: string;
         calendarDaysFontSize: string;
         calendarTitleFontSize: string;
@@ -5596,6 +5606,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -6189,8 +6200,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"DatePicker", {
+    }>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"DatePicker", {
         itemFontSize: string;
         calendarDaysFontSize: string;
         calendarTitleFontSize: string;
@@ -6207,6 +6218,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -6800,30 +6812,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    dateFormat?: string | undefined;
-    firstDayOfWeek?: FirstDayOfWeek | undefined;
-    bordered?: boolean | undefined;
-    "onUpdate:show"?: MaybeArray<(show: boolean) => void> | undefined;
-    onUpdateShow?: MaybeArray<(show: boolean) => void> | undefined;
-    defaultValue?: Value | null | undefined;
-    "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
-    onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
-    isDateDisabled?: IsDateDisabled | undefined;
-    actions?: ("clear" | "confirm" | "now")[] | undefined;
-    defaultFormattedValue?: FormattedValue | null | undefined;
-    defaultTime?: DefaultTime | undefined;
-    formattedValue?: FormattedValue | null | undefined;
-    valueFormat?: string | undefined;
-    startPlaceholder?: string | undefined;
-    endPlaceholder?: string | undefined;
-    timeFormat?: string | undefined;
-    shortcuts?: Shortcuts | undefined;
-    isTimeDisabled?: IsTimeDisabled | undefined;
-    ranges?: Record<string, [number, number]> | undefined;
-    "onUpdate:formattedValue"?: MaybeArray<OnUpdateFormattedValue> | undefined;
-    onUpdateFormattedValue?: MaybeArray<OnUpdateFormattedValue> | undefined;
-}>, {
+    }>>>;
+}>>, {
     type: DatePickerType;
     show: boolean | undefined;
     disabled: boolean | undefined;

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

@@ -1,7 +1,7 @@
-import { h, defineComponent, ref, Transition, computed, provide, watch, withDirectives, toRef, watchEffect, nextTick } from 'vue';
+import { h, defineComponent, ref, Transition, computed, provide, watch, withDirectives, toRef, watchEffect } from 'vue';
 import { VBinder, VTarget, VFollower } from 'vueuc';
 import { clickoutside } from 'vdirs';
-import { format, getTime, isValid, getYear, getMonth } from 'date-fns';
+import { format, getTime, isValid } from 'date-fns';
 import { useIsMounted, useMergedState } from 'vooks';
 import { happensIn } from 'seemly';
 import { NInput } from '../../input';
@@ -12,7 +12,6 @@ import { warn, call, useAdjustedTo, createKey, warnOnce } from '../../_utils';
 import { datePickerLight } from '../styles';
 import { strictParse } from './utils';
 import { uniCalendarValidation, dualCalendarValidation } from './validation-utils';
-import { MONTH_ITEM_HEIGHT, START_YEAR } from './config';
 import { datePickerInjectionKey } from './interface';
 import DatetimePanel from './panel/datetime';
 import DatetimerangePanel from './panel/datetimerange';
@@ -316,28 +315,6 @@ export default defineComponent({
                 disableUpdateOnClose
             });
         }
-        function scrollPickerColumns(value) {
-            if (!panelInstRef.value)
-                return;
-            const { monthScrollRef, yearScrollRef } = panelInstRef.value;
-            const { value: mergedValue } = mergedValueRef;
-            if (monthScrollRef) {
-                const monthIndex = value === undefined
-                    ? mergedValue === null
-                        ? getMonth(Date.now())
-                        : getMonth(mergedValue)
-                    : getMonth(value);
-                monthScrollRef.scrollTo({ top: monthIndex * MONTH_ITEM_HEIGHT });
-            }
-            if (yearScrollRef) {
-                const yearIndex = (value === undefined
-                    ? mergedValue === null
-                        ? getYear(Date.now())
-                        : getYear(mergedValue)
-                    : getYear(value)) - START_YEAR;
-                yearScrollRef.scrollTo({ top: yearIndex * MONTH_ITEM_HEIGHT });
-            }
-        }
         // --- Panel update value
         function handlePanelUpdateValue(value, doUpdate) {
             if (doUpdate) {
@@ -462,10 +439,6 @@ export default defineComponent({
             if (mergedDisabledRef.value || mergedShowRef.value)
                 return;
             doUpdateShow(true);
-            const { type } = props;
-            if (type === 'month' || type === 'year' || type === 'quarter') {
-                void nextTick(scrollPickerColumns);
-            }
         }
         function closeCalendar({ returnFocus, disableUpdateOnClose }) {
             var _a;
@@ -500,35 +473,22 @@ export default defineComponent({
         // use pending value to do validation
         const uniVaidation = uniCalendarValidation(props, pendingValueRef);
         const dualValidation = dualCalendarValidation(props, pendingValueRef);
-        provide(datePickerInjectionKey, Object.assign(Object.assign(Object.assign({ scrollPickerColumns,
-            mergedClsPrefixRef, mergedThemeRef: themeRef, timePickerSizeRef,
+        provide(datePickerInjectionKey, Object.assign(Object.assign(Object.assign({ mergedClsPrefixRef, mergedThemeRef: themeRef, timePickerSizeRef,
             localeRef,
             dateLocaleRef, firstDayOfWeekRef: toRef(props, 'firstDayOfWeek'), isDateDisabledRef: toRef(props, 'isDateDisabled'), rangesRef: toRef(props, 'ranges'), closeOnSelectRef: toRef(props, 'closeOnSelect'), updateValueOnCloseRef: toRef(props, 'updateValueOnClose') }, uniVaidation), dualValidation), { datePickerSlots: slots }));
-        return {
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedBordered: mergedBorderedRef,
-            namespace: namespaceRef,
-            uncontrolledValue: uncontrolledValueRef,
-            pendingValue: pendingValueRef,
-            panelInstRef,
+        const exposedMethods = {
+            focus: () => {
+                var _a;
+                (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur: () => {
+                var _a;
+                (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+        };
+        return Object.assign(Object.assign({}, exposedMethods), { mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, pendingValue: pendingValueRef, panelInstRef,
             triggerElRef,
-            inputInstRef,
-            isMounted: useIsMounted(),
-            displayTime: singleInputValueRef,
-            displayStartTime: rangeStartInputValueRef,
-            displayEndTime: rangeEndInputValueRef,
-            mergedShow: mergedShowRef,
-            adjustedTo: useAdjustedTo(props),
-            isRange: isRangeRef,
-            localizedStartPlaceholder: localizedStartPlaceholderRef,
-            localizedEndPlaceholder: localizedEndPlaceholderRef,
-            mergedSize: mergedSizeRef,
-            mergedDisabled: mergedDisabledRef,
-            localizedPlacehoder: localizedPlacehoderRef,
-            isValueInvalid: uniVaidation.isValueInvalidRef,
-            isStartValueInvalid: dualValidation.isStartValueInvalidRef,
-            isEndValueInvalid: dualValidation.isEndValueInvalidRef,
-            handleClickOutside,
+            inputInstRef, isMounted: useIsMounted(), displayTime: singleInputValueRef, displayStartTime: rangeStartInputValueRef, displayEndTime: rangeEndInputValueRef, mergedShow: mergedShowRef, adjustedTo: useAdjustedTo(props), isRange: isRangeRef, localizedStartPlaceholder: localizedStartPlaceholderRef, localizedEndPlaceholder: localizedEndPlaceholderRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, localizedPlacehoder: localizedPlacehoderRef, isValueInvalid: uniVaidation.isValueInvalidRef, isStartValueInvalid: dualValidation.isStartValueInvalidRef, isEndValueInvalid: dualValidation.isEndValueInvalidRef, handleClickOutside,
             handleKeyDown,
             handleClear,
             handleTriggerClick,
@@ -541,20 +501,16 @@ export default defineComponent({
             handleRangeUpdateValue,
             handleSingleUpdateValue,
             handlePanelUpdateValue,
-            handlePanelConfirm,
-            mergedTheme: themeRef,
-            actions: mergedActionsRef,
-            triggerCssVars: computed(() => {
+            handlePanelConfirm, mergedTheme: themeRef, actions: mergedActionsRef, triggerCssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self: { iconColor, iconColorDisabled } } = themeRef.value;
                 return {
                     '--n-bezier': cubicBezierEaseInOut,
                     '--n-icon-color': iconColor,
                     '--n-icon-color-disabled': iconColorDisabled
                 };
-            }),
-            cssVars: computed(() => {
+            }), cssVars: 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, [createKey('calendarLeftPadding', type)]: calendarLeftPadding, [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, [createKey('calendarLeftPadding', type)]: calendarLeftPadding, [createKey('calendarRightPadding', type)]: calendarRightPadding } } = themeRef.value;
                 return {
                     '--n-bezier': cubicBezierEaseInOut,
                     '--n-panel-border-radius': panelBorderRadius,
@@ -567,6 +523,7 @@ export default 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,
@@ -606,8 +563,7 @@ export default defineComponent({
                     '--n-icon-color': iconColor,
                     '--n-icon-color-disabled': iconColorDisabled
                 };
-            })
-        };
+            }) });
     },
     render() {
         const { clearable } = this;

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

@@ -1,4 +1,4 @@
-import { InjectionKey, Ref, Slots } from 'vue';
+import { Ref, Slots } from 'vue';
 import { VirtualListInst } from 'vueuc';
 import { NLocale, NDateLocale } from '../../locales';
 import type { ScrollbarInst } from '../../_internal';
@@ -50,9 +50,8 @@ export declare type DatePickerInjection = {
     updateValueOnCloseRef: Ref<boolean>;
     firstDayOfWeekRef: Ref<FirstDayOfWeek | undefined>;
     datePickerSlots: Slots;
-    scrollPickerColumns: (value?: number) => void;
 } & ReturnType<typeof uniCalendarValidation> & ReturnType<typeof dualCalendarValidation>;
-export declare const datePickerInjectionKey: InjectionKey<DatePickerInjection>;
+export declare const datePickerInjectionKey: import("vue").InjectionKey<DatePickerInjection>;
 export declare type IsDateDisabled = IsSingleDateDisabled | IsRangeDateDisabled;
 export declare type IsSingleDateDisabled = (date: number) => boolean;
 export declare type IsRangeDateDisabled = (date: number, position: 'start' | 'end', value: [number, number] | null) => boolean;
@@ -64,3 +63,7 @@ export interface TimeValidator {
 export declare type IsTimeDisabled = IsSingleTimeDisabled | IsRangeTimeDisabled;
 export declare type IsSingleTimeDisabled = (date: number) => TimeValidator;
 export declare type IsRangeTimeDisabled = (date: number, position: 'start' | 'end', value: [number, number]) => TimeValidator;
+export interface DatePickerInst {
+    focus: () => void;
+    blur: () => void;
+}

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

@@ -1 +1,2 @@
-export const datePickerInjectionKey = Symbol('datePicker');
+import { createInjectionKey } from '../../_utils';
+export const datePickerInjectionKey = createInjectionKey('n-date-picker');