naive-ui 2.23.2 → 2.24.0

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

@@ -82,31 +82,11 @@ export declare const dataTableProps: {
     readonly onUpdateCheckedRowKeys: PropType<MaybeArray<OnUpdateCheckedRowKeys>>;
     readonly 'onUpdate:expandedRowKeys': PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onUpdateExpandedRowKeys: PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
-    readonly onPageChange: {
-        readonly type: PropType<MaybeArray<(page: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onPageSizeChange: {
-        readonly type: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onSorterChange: {
-        readonly type: PropType<MaybeArray<OnUpdateSorter> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onFiltersChange: {
-        readonly type: PropType<MaybeArray<OnUpdateFilters> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onCheckedRowKeysChange: {
-        readonly type: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onPageChange: PropType<MaybeArray<(page: number) => void> | undefined>;
+    readonly onPageSizeChange: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly onSorterChange: PropType<MaybeArray<OnUpdateSorter> | undefined>;
+    readonly onFiltersChange: PropType<MaybeArray<OnUpdateFilters> | undefined>;
+    readonly onCheckedRowKeysChange: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"DataTable", {
         actionDividerColor: string;
         lineHeight: string;
@@ -1990,31 +1970,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly onUpdateCheckedRowKeys: PropType<MaybeArray<OnUpdateCheckedRowKeys>>;
     readonly 'onUpdate:expandedRowKeys': PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onUpdateExpandedRowKeys: PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
-    readonly onPageChange: {
-        readonly type: PropType<MaybeArray<(page: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onPageSizeChange: {
-        readonly type: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onSorterChange: {
-        readonly type: PropType<MaybeArray<OnUpdateSorter> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onFiltersChange: {
-        readonly type: PropType<MaybeArray<OnUpdateFilters> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onCheckedRowKeysChange: {
-        readonly type: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onPageChange: PropType<MaybeArray<(page: number) => void> | undefined>;
+    readonly onPageSizeChange: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly onSorterChange: PropType<MaybeArray<OnUpdateSorter> | undefined>;
+    readonly onFiltersChange: PropType<MaybeArray<OnUpdateFilters> | undefined>;
+    readonly onCheckedRowKeysChange: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"DataTable", {
         actionDividerColor: string;
         lineHeight: string;
@@ -6731,7 +6691,6 @@ declare const _default: import("vue").DefineComponent<{
     virtualScroll: boolean;
     remote: boolean;
     pagination: false | PaginationProps;
-    onPageSizeChange: MaybeArray<(pageSize: number) => void> | undefined;
     bottomBordered: boolean | undefined;
     striped: boolean;
     defaultCheckedRowKeys: RowKey[];
@@ -6742,9 +6701,5 @@ declare const _default: import("vue").DefineComponent<{
     childrenKey: string;
     indent: number;
     flexHeight: boolean;
-    onPageChange: MaybeArray<(page: number) => void> | undefined;
-    onSorterChange: MaybeArray<OnUpdateSorter> | undefined;
-    onFiltersChange: MaybeArray<OnUpdateFilters> | undefined;
-    onCheckedRowKeysChange: MaybeArray<OnUpdateCheckedRowKeys> | undefined;
 }>;
 export default _default;

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

@@ -16,9 +16,9 @@ const use_check_1 = require("./use-check");
 const use_table_data_1 = require("./use-table-data");
 const use_scroll_1 = require("./use-scroll");
 const interface_1 = require("./interface");
-const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const use_group_header_1 = require("./use-group-header");
 const use_expand_1 = require("./use-expand");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { pagination: {
         type: [Object, Boolean],
         default: false
@@ -62,57 +62,31 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
         default: 16
     }, flexHeight: Boolean, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], 
     // deprecated
-    onPageChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-table', '`on-page-change` is deprecated, please use `on-update:page` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onPageSizeChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-table', '`on-page-size-change` is deprecated, please use `on-update:page-size` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onSorterChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-table', '`on-sorter-change` is deprecated, please use `on-update:sorter` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onFiltersChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-table', '`on-filters-change` is deprecated, please use `on-update:filters` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onCheckedRowKeysChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-table', '`on-checked-row-keys-change` is deprecated, please use `on-update:checked-row-keys` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'DataTable',
     alias: ['AdvancedTable'],
     props: exports.dataTableProps,
     setup(props, { slots }) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onPageChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-table', '`on-page-change` is deprecated, please use `on-update:page` instead.');
+                }
+                if (props.onPageSizeChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-table', '`on-page-size-change` is deprecated, please use `on-update:page-size` instead.');
+                }
+                if (props.onSorterChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-table', '`on-sorter-change` is deprecated, please use `on-update:sorter` instead.');
+                }
+                if (props.onFiltersChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-table', '`on-filters-change` is deprecated, please use `on-update:filters` instead.');
+                }
+                if (props.onCheckedRowKeysChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-table', '`on-checked-row-keys-change` is deprecated, please use `on-update:checked-row-keys` instead.');
+                }
+            });
+        }
         const { mergedBorderedRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const mergedBottomBorderedRef = (0, vue_1.computed)(() => {
             const { bottomBordered } = props;

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

@@ -33,7 +33,7 @@ export declare type SortOrder = 'ascend' | 'descend' | false;
 export declare type Ellipsis = boolean | EllipsisProps;
 export interface CommonColumnInfo {
     fixed?: 'left' | 'right';
-    width?: number;
+    width?: number | string;
     className?: string;
     align?: 'left' | 'center' | 'right';
     ellipsis?: Ellipsis;

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

@@ -239,7 +239,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  border-top-left-radius: var(--n-border-radius);
  border-top-right-radius: var(--n-border-radius);
  line-height: var(--n-line-height);
- `), (0, cssr_1.cM)('loading', [(0, cssr_1.cB)('data-table-wrapper', 'opacity: var(--n-opacity-loading);')]), (0, cssr_1.cM)('single-column', [(0, cssr_1.cB)('data-table-td', {
+ `), (0, cssr_1.cM)('loading', [(0, cssr_1.cB)('data-table-wrapper', `
+ opacity: var(--n-opacity-loading);
+ pointer-events: none;
+ `)]), (0, cssr_1.cM)('single-column', [(0, cssr_1.cB)('data-table-td', {
   borderBottom: '0 solid var(--n-merged-border-color)'
 }, [(0, cssr_1.c)('&::after, &::before', {
   bottom: '0 !important'

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

@@ -11,6 +11,9 @@ function getColWidth(col) {
         return exports.expandColWidth;
     if ('children' in col)
         return undefined;
+    if (typeof col.width === 'string') {
+        return (0, seemly_1.depx)(col.width);
+    }
     return col.width;
 }
 exports.getColWidth = getColWidth;

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

@@ -2,7 +2,7 @@ import { PropType, ExtractPropTypes, Ref } from 'vue';
 import { FollowerPlacement } from 'vueuc';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import { DatePickerType } from './config';
-import type { OnUpdateValue, Value, IsDateDisabled, IsTimeDisabled, Shortcuts, FirstDayOfWeek, DefaultTime } from './interface';
+import type { OnUpdateValue, Value, IsDateDisabled, IsTimeDisabled, Shortcuts, FirstDayOfWeek, DefaultTime, FormattedValue, OnUpdateFormattedValue } from './interface';
 declare const datePickerProps: {
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -14,10 +14,8 @@ declare const datePickerProps: {
     };
     readonly clearable: BooleanConstructor;
     readonly updateValueOnClose: BooleanConstructor;
-    readonly defaultValue: {
-        readonly type: PropType<Value | null>;
-        readonly default: null;
-    };
+    readonly defaultValue: PropType<Value | null>;
+    readonly defaultFormattedValue: PropType<FormattedValue | null>;
     readonly defaultTime: PropType<DefaultTime>;
     readonly disabled: {
         readonly type: PropType<boolean | undefined>;
@@ -28,11 +26,13 @@ declare const datePickerProps: {
         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;
@@ -54,15 +54,13 @@ declare const datePickerProps: {
     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: {
-        readonly type: PropType<MaybeArray<OnUpdateValue>>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onChange: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"DatePicker", {
         itemFontSize: string;
         calendarDaysFontSize: string;
@@ -1910,10 +1908,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly clearable: BooleanConstructor;
     readonly updateValueOnClose: BooleanConstructor;
-    readonly defaultValue: {
-        readonly type: PropType<Value | null>;
-        readonly default: null;
-    };
+    readonly defaultValue: PropType<Value | null>;
+    readonly defaultFormattedValue: PropType<FormattedValue | null>;
     readonly defaultTime: PropType<DefaultTime>;
     readonly disabled: {
         readonly type: PropType<boolean | undefined>;
@@ -1924,11 +1920,13 @@ declare const _default: import("vue").DefineComponent<{
         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;
@@ -1950,15 +1948,13 @@ declare const _default: import("vue").DefineComponent<{
     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: {
-        readonly type: PropType<MaybeArray<OnUpdateValue>>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onChange: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"DatePicker", {
         itemFontSize: string;
         calendarDaysFontSize: string;
@@ -4916,12 +4912,15 @@ declare const _default: import("vue").DefineComponent<{
     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;
@@ -4940,6 +4939,8 @@ declare const _default: import("vue").DefineComponent<{
     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;
@@ -4952,7 +4953,6 @@ declare const _default: import("vue").DefineComponent<{
     type: DatePickerType;
     placement: FollowerPlacement;
     clearable: boolean;
-    defaultValue: Value | null;
     updateValueOnClose: boolean;
     inputReadonly: boolean;
     closeOnSelect: boolean;
@@ -6806,27 +6806,31 @@ declare const _default: import("vue").DefineComponent<{
     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;
-    onChange: MaybeArray<OnUpdateValue>;
     to: string | boolean | HTMLElement;
     placement: FollowerPlacement;
     bordered: boolean | undefined;
     clearable: boolean;
-    defaultValue: Value | null;
     updateValueOnClose: boolean;
     inputReadonly: boolean;
     closeOnSelect: boolean;

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

@@ -28,37 +28,33 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const datePickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, bordered: {
         type: Boolean,
         default: undefined
-    }, clearable: Boolean, updateValueOnClose: Boolean, defaultValue: {
-        type: [Number, Array],
-        default: null
-    }, defaultTime: [Number, String, Array], disabled: {
+    }, clearable: Boolean, updateValueOnClose: Boolean, defaultValue: [Number, Array], defaultFormattedValue: [String, Array], defaultTime: [Number, String, Array], disabled: {
         type: Boolean,
         default: undefined
     }, placement: {
         type: String,
         default: 'bottom-start'
-    }, value: [Number, Array], size: String, type: {
+    }, value: [Number, Array], formattedValue: [String, Array], size: String, type: {
         type: String,
         default: 'date'
-    }, separator: String, placeholder: String, startPlaceholder: String, endPlaceholder: String, format: String, dateFormat: String, timeFormat: String, actions: Array, shortcuts: Object, isDateDisabled: Function, isTimeDisabled: Function, show: {
+    }, valueFormat: String, separator: String, placeholder: String, startPlaceholder: String, endPlaceholder: String, format: String, dateFormat: String, timeFormat: String, actions: Array, shortcuts: Object, isDateDisabled: Function, isTimeDisabled: Function, show: {
         type: Boolean,
         default: undefined
-    }, ranges: Object, firstDayOfWeek: Number, inputReadonly: Boolean, closeOnSelect: Boolean, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], 
+    }, ranges: Object, firstDayOfWeek: Number, inputReadonly: Boolean, closeOnSelect: Boolean, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:formattedValue': [Function, Array], onUpdateFormattedValue: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], 
     // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-picker', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'DatePicker',
     props: datePickerProps,
     setup(props, { slots }) {
+        var _a;
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-picker', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { localeRef, dateLocaleRef } = (0, _mixins_1.useLocale)('DatePicker');
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
@@ -69,8 +65,58 @@ exports.default = (0, vue_1.defineComponent)({
         const uncontrolledShowRef = (0, vue_1.ref)(false);
         const controlledShowRef = (0, vue_1.toRef)(props, 'show');
         const mergedShowRef = (0, vooks_1.useMergedState)(controlledShowRef, uncontrolledShowRef);
-        const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
-        const controlledValueRef = (0, vue_1.computed)(() => props.value);
+        const dateFnsOptionsRef = (0, vue_1.computed)(() => {
+            return {
+                locale: dateLocaleRef.value.locale
+            };
+        });
+        const mergedFormatRef = (0, vue_1.computed)(() => {
+            const { format } = props;
+            if (format)
+                return format;
+            switch (props.type) {
+                case 'date':
+                case 'daterange':
+                    return localeRef.value.dateFormat;
+                case 'datetime':
+                case 'datetimerange':
+                    return localeRef.value.dateTimeFormat;
+                case 'year':
+                    return localeRef.value.yearTypeFormat;
+                case 'month':
+                    return localeRef.value.monthTypeFormat;
+                case 'quarter':
+                    return localeRef.value.quarterFormat;
+            }
+        });
+        const mergedValueFormatRef = (0, vue_1.computed)(() => {
+            var _a;
+            return (_a = props.valueFormat) !== null && _a !== void 0 ? _a : mergedFormatRef.value;
+        });
+        function getTimestampValue(value) {
+            if (value === null)
+                return null;
+            const { value: mergedValueFormat } = mergedValueFormatRef;
+            const { value: dateFnsOptions } = dateFnsOptionsRef;
+            if (Array.isArray(value)) {
+                return [
+                    (0, utils_1.strictParse)(value[0], mergedValueFormat, new Date(), dateFnsOptions).getTime(),
+                    (0, utils_1.strictParse)(value[1], mergedValueFormat, new Date(), dateFnsOptions).getTime()
+                ];
+            }
+            return (0, utils_1.strictParse)(value, mergedValueFormat, new Date(), dateFnsOptions).getTime();
+        }
+        const { defaultFormattedValue, defaultValue } = props;
+        const uncontrolledValueRef = (0, vue_1.ref)((_a = (defaultFormattedValue !== undefined
+            ? getTimestampValue(defaultFormattedValue)
+            : defaultValue)) !== null && _a !== void 0 ? _a : null);
+        const controlledValueRef = (0, vue_1.computed)(() => {
+            const { formattedValue } = props;
+            if (formattedValue !== undefined) {
+                return getTimestampValue(formattedValue);
+            }
+            return props.value;
+        });
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
         // We don't change value unless blur or confirm is called
         const pendingValueRef = (0, vue_1.ref)(null);
@@ -81,11 +127,6 @@ exports.default = (0, vue_1.defineComponent)({
         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 dateFnsOptionsRef = (0, vue_1.computed)(() => {
-            return {
-                locale: dateLocaleRef.value.locale
-            };
-        });
         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');
@@ -144,25 +185,6 @@ exports.default = (0, vue_1.defineComponent)({
                 return props.endPlaceholder;
             }
         });
-        const mergedFormatRef = (0, vue_1.computed)(() => {
-            const { format } = props;
-            if (format)
-                return format;
-            switch (props.type) {
-                case 'date':
-                case 'daterange':
-                    return localeRef.value.dateFormat;
-                case 'datetime':
-                case 'datetimerange':
-                    return localeRef.value.dateTimeFormat;
-                case 'year':
-                    return localeRef.value.yearTypeFormat;
-                case 'month':
-                    return localeRef.value.monthTypeFormat;
-                case 'quarter':
-                    return localeRef.value.quarterFormat;
-            }
-        });
         const mergedActionsRef = (0, vue_1.computed)(() => {
             const { actions, type } = props;
             if (actions !== undefined)
@@ -195,19 +217,47 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         });
+        function getFormattedValue(value) {
+            if (value === null)
+                return null;
+            if (Array.isArray(value)) {
+                const { value: mergedValueFormat } = mergedValueFormatRef;
+                const { value: dateFnsOptions } = dateFnsOptionsRef;
+                return [
+                    (0, date_fns_1.format)(value[0], mergedValueFormat, dateFnsOptions),
+                    (0, date_fns_1.format)(value[1], mergedValueFormat, dateFnsOptionsRef.value)
+                ];
+            }
+            else {
+                return (0, date_fns_1.format)(value, mergedValueFormatRef.value, dateFnsOptionsRef.value);
+            }
+        }
         function doUpdatePendingValue(value) {
             pendingValueRef.value = value;
         }
+        function doUpdateFormattedValue(value, timestampValue) {
+            const { 'onUpdate:formattedValue': _onUpdateFormattedValue, onUpdateFormattedValue } = props;
+            if (_onUpdateFormattedValue) {
+                (0, _utils_1.call)(_onUpdateFormattedValue, value, timestampValue);
+            }
+            if (onUpdateFormattedValue) {
+                (0, _utils_1.call)(onUpdateFormattedValue, value, timestampValue);
+            }
+        }
         function doUpdateValue(value) {
             const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onChange } = props;
             const { nTriggerFormChange, nTriggerFormInput } = formItem;
-            if (onUpdateValue)
-                (0, _utils_1.call)(onUpdateValue, value);
-            if (_onUpdateValue)
-                (0, _utils_1.call)(_onUpdateValue, value);
+            const formattedValue = getFormattedValue(value);
+            if (onUpdateValue) {
+                (0, _utils_1.call)(onUpdateValue, value, formattedValue);
+            }
+            if (_onUpdateValue) {
+                (0, _utils_1.call)(_onUpdateValue, value, formattedValue);
+            }
             if (onChange)
-                (0, _utils_1.call)(onChange, value);
+                (0, _utils_1.call)(onChange, value, formattedValue);
             uncontrolledValueRef.value = value;
+            doUpdateFormattedValue(formattedValue, value);
             nTriggerFormChange();
             nTriggerFormInput();
         }

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

@@ -8,9 +8,24 @@ import { DatePickerTheme } from '../styles/light';
 import { uniCalendarValidation, dualCalendarValidation } from './validation-utils';
 export declare type Value = number | [number, number];
 export declare type DefaultTime = string | [string | undefined, string | undefined];
+export declare type FormattedValue = string | [string, string];
 export declare type Shortcuts = Record<string, number | (() => number)> | Record<string, [number, number] | (() => [number, number])>;
-export declare type OnUpdateValue = (value: number & (number | null) & [number, number] & ([number, number] | null)) => void;
-export declare type OnUpdateValueImpl = (value: Value | null) => void;
+export declare type OnUpdateValue = (value: number & (number | null) & [
+    number,
+    number
+] & ([number, number] | null), formattedValue: string & (string | null) & [
+    string,
+    string
+] & ([string, string] | null)) => void;
+export declare type OnUpdateFormattedValue = (value: string & (string | null) & [
+    string,
+    string
+] & ([string, string] | null), timestampValue: number & (number | null) & [
+    number,
+    number
+] & ([number, number] | null)) => void;
+export declare type OnUpdateFormattedValueImpl = (value: string | [string, string] | null, timestampValue: number | [number, number] | null) => void;
+export declare type OnUpdateValueImpl = (value: Value | null, formattedValue: string | [string, string] | null) => void;
 export declare type OnPanelUpdateValue = (value: number & (number | null) & [
     number,
     number

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

@@ -48,7 +48,7 @@ function useCalendar(props, type) {
     const yearArrayRef = (0, vue_1.computed)(() => {
         return (0, utils_1.yearArray)(calendarValueRef.value, props.value, nowRef.value);
     });
-    const querterArrayRef = (0, vue_1.computed)(() => {
+    const quarterArrayRef = (0, vue_1.computed)(() => {
         return (0, utils_1.quarterArray)(calendarValueRef.value, props.value, nowRef.value);
     });
     const weekdaysRef = (0, vue_1.computed)(() => {
@@ -250,7 +250,7 @@ function useCalendar(props, type) {
         panelCommon.clearPendingValue();
         handleConfirmClick();
     }
-    return Object.assign(Object.assign(Object.assign({ dateArray: dateArrayRef, monthArray: monthArrayRef, yearArray: yearArrayRef, quarterArray: querterArrayRef, calendarYear: calendarYearRef, calendarMonth: calendarMonthRef, weekdays: weekdaysRef, mergedIsDateDisabled,
+    return Object.assign(Object.assign(Object.assign({ dateArray: dateArrayRef, monthArray: monthArrayRef, yearArray: yearArrayRef, quarterArray: quarterArrayRef, calendarYear: calendarYearRef, calendarMonth: calendarMonthRef, weekdays: weekdaysRef, mergedIsDateDisabled,
         nextYear,
         prevYear,
         nextMonth,