naive-ui 2.22.0 → 2.24.0

package/lib/tag/src/styles/index.cssr.js

@@ -5,30 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --border-radius
-// --border
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --close-margin
-// --close-size
-// --color
-// --color-checkable
-// --color-checked
-// --color-checked-hover
-// --color-checked-pressed
-// --color-hover-checkable
-// --color-pressed-checkable
-// --font-size
-// --height
-// --opacity-disabled
-// --padding
-// --text-color
-// --text-color-checkable
-// --text-color-checked
-// --text-color-hover-checkable
-// --text-color-pressed-checkable
+// --n-bezier
+// --n-border-radius
+// --n-border
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-close-margin
+// --n-close-size
+// --n-color
+// --n-color-checkable
+// --n-color-checked
+// --n-color-checked-hover
+// --n-color-checked-pressed
+// --n-color-hover-checkable
+// --n-color-pressed-checkable
+// --n-font-size
+// --n-height
+// --n-opacity-disabled
+// --n-padding
+// --n-text-color
+// --n-text-color-checkable
+// --n-text-color-checked
+// --n-text-color-hover-checkable
+// --n-text-color-pressed-checkable
 
 
 exports.default = (0, cssr_1.cB)('tag', `
@@ -39,19 +39,19 @@ exports.default = (0, cssr_1.cB)('tag', `
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
- padding: var(--padding);
- border-radius: var(--border-radius);
- color: var(--text-color);
- background-color: var(--color);
+ padding: var(--n-padding);
+ border-radius: var(--n-border-radius);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
  transition: 
- border-color .3s var(--bezier),
- background-color .3s var(--bezier),
- color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- opacity .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ opacity .3s var(--n-bezier);
  line-height: 1.2;
- height: var(--height);
- font-size: var(--font-size);
+ height: var(--n-height);
+ font-size: var(--n-font-size);
 `, [(0, cssr_1.cE)('border', `
  pointer-events: none;
  position: absolute;
@@ -60,42 +60,42 @@ exports.default = (0, cssr_1.cB)('tag', `
  top: 0;
  bottom: 0;
  border-radius: inherit;
- border: var(--border);
- transition: border-color .3s var(--bezier);
+ border: var(--n-border);
+ transition: border-color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('avatar', `
  display: flex;
  margin-right: 6px;
  `), (0, cssr_1.cE)('close', `
- font-size: var(--close-size);
- margin: var(--close-margin);
- transition: color .3s var(--bezier);
+ font-size: var(--n-close-size);
+ margin: var(--n-close-margin);
+ transition: color .3s var(--n-bezier);
  cursor: pointer;
  `), (0, cssr_1.cM)('round', `
- padding: 0 calc(var(--height) / 2);
- border-radius: calc(var(--height) / 2);
+ padding: 0 calc(var(--n-height) / 2);
+ border-radius: calc(var(--n-height) / 2);
  `, [(0, cssr_1.cE)('avatar', `
- margin-left: calc((var(--height) - 8px) / -2);
+ margin-left: calc((var(--n-height) - 8px) / -2);
  `)]), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed !important;
- opacity: var(--opacity-disabled);
+ opacity: var(--n-opacity-disabled);
  `), (0, cssr_1.cM)('checkable', `
  cursor: pointer;
  box-shadow: none;
- color: var(--text-color-checkable);
- background-color: var(--color-checkable);
+ color: var(--n-text-color-checkable);
+ background-color: var(--n-color-checkable);
  `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--color-hover-checkable)'
+  backgroundColor: 'var(--n-color-hover-checkable)'
 }, [(0, cssr_1.cNotM)('checked', {
-  color: 'var(--text-color-hover-checkable)'
+  color: 'var(--n-text-color-hover-checkable)'
 })]), (0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--color-pressed-checkable)'
+  backgroundColor: 'var(--n-color-pressed-checkable)'
 }, [(0, cssr_1.cNotM)('checked', {
-  color: 'var(--text-color-pressed-checkable)'
+  color: 'var(--n-text-color-pressed-checkable)'
 })])]), (0, cssr_1.cM)('checked', {
-  color: 'var(--text-color-checked)',
-  backgroundColor: 'var(--color-checked)'
+  color: 'var(--n-text-color-checked)',
+  backgroundColor: 'var(--n-color-checked)'
 }, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--color-checked-hover)'
+  backgroundColor: 'var(--n-color-checked-hover)'
 }), (0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--color-checked-pressed)'
+  backgroundColor: 'var(--n-color-checked-pressed)'
 })])])])]);

package/lib/tag/src/styles/rtl.cssr.js

@@ -9,7 +9,7 @@ const cssr_1 = require("../../../_utils/cssr");
 exports.default = (0, cssr_1.cB)('tag', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
  `, [(0, cssr_1.cE)('close', `
- margin: var(--close-margin-rtl);
+ margin: var(--n-close-margin-rtl);
  `), (0, cssr_1.cE)('avatar', `
  margin-left: 6px;
  margin-right: 0;

package/lib/thing/src/Thing.js

@@ -20,11 +20,11 @@ exports.default = (0, vue_1.defineComponent)({
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { self: { titleTextColor, textColor, titleFontWeight, fontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
-                '--bezier': cubicBezierEaseInOut,
-                '--font-size': fontSize,
-                '--text-color': textColor,
-                '--title-font-weight': titleFontWeight,
-                '--title-text-color': titleTextColor
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-font-size': fontSize,
+                '--n-text-color': textColor,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-title-text-color': titleTextColor
             };
         });
         return () => {

package/lib/thing/src/styles/index.cssr.js

@@ -5,18 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --font-size
-// --text-color
-// --title-font-weight
-// --title-text-color
+// --n-bezier
+// --n-font-size
+// --n-text-color
+// --n-title-font-weight
+// --n-title-text-color
 
 
 exports.default = (0, cssr_1.cB)('thing', `
  display: flex;
- transition: color .3s var(--bezier);
- font-size: var(--font-size);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
 `, [(0, cssr_1.cB)('thing-avatar', `
  margin-right: 12px;
  margin-top: 2px;
@@ -34,9 +34,9 @@ exports.default = (0, cssr_1.cB)('thing', `
  align-items: center;
  `, [(0, cssr_1.cE)('title', `
  font-size: 16px;
- font-weight: var(--title-font-weight);
- transition: color .3s var(--bezier);
- color: var(--title-text-color);
+ font-weight: var(--n-title-font-weight);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-title-text-color);
  `)]), (0, cssr_1.cE)('description', [(0, cssr_1.c)('&:not(:last-child)', `
  margin-bottom: 4px;
  `)]), (0, cssr_1.cE)('content', [(0, cssr_1.c)('&:not(:first-child)', `

package/lib/time-picker/src/TimePicker.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
-import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import { IsHourDisabled, IsMinuteDisabled, IsSecondDisabled, ItemValue, OnUpdateValue, Size } from './interface';
+import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
+import { IsHourDisabled, IsMinuteDisabled, IsSecondDisabled, ItemValue, OnUpdateFormattedValue, OnUpdateValue, Size } from './interface';
 declare const timePickerProps: {
     to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -15,6 +15,7 @@ declare const timePickerProps: {
         type: PropType<number | null>;
         default: null;
     };
+    defaultFormattedValue: StringConstructor;
     placeholder: StringConstructor;
     placement: {
         type: StringConstructor;
@@ -25,6 +26,8 @@ declare const timePickerProps: {
         type: StringConstructor;
         default: string;
     };
+    valueFormat: StringConstructor;
+    formattedValue: PropType<string | null>;
     isHourDisabled: PropType<IsHourDisabled>;
     size: PropType<Size>;
     isMinuteDisabled: PropType<IsMinuteDisabled>;
@@ -33,6 +36,8 @@ declare const timePickerProps: {
     clearable: BooleanConstructor;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
+    onUpdateFormattedValue: PropType<MaybeArray<OnUpdateFormattedValue>>;
+    'onUpdate:formattedValue': PropType<MaybeArray<OnUpdateFormattedValue>>;
     onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
     stateful: {
@@ -939,6 +944,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<number | null>;
         default: null;
     };
+    defaultFormattedValue: StringConstructor;
     placeholder: StringConstructor;
     placement: {
         type: StringConstructor;
@@ -949,6 +955,8 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    valueFormat: StringConstructor;
+    formattedValue: PropType<string | null>;
     isHourDisabled: PropType<IsHourDisabled>;
     size: PropType<Size>;
     isMinuteDisabled: PropType<IsMinuteDisabled>;
@@ -957,6 +965,8 @@ declare const _default: import("vue").DefineComponent<{
     clearable: BooleanConstructor;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
+    onUpdateFormattedValue: PropType<MaybeArray<OnUpdateFormattedValue>>;
+    'onUpdate:formattedValue': PropType<MaybeArray<OnUpdateFormattedValue>>;
     onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
     stateful: {
@@ -2346,35 +2356,38 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     triggerCssVars: import("vue").ComputedRef<{
-        '--icon-color': string;
-        '--icon-color-disabled': string;
-        '--bezier': string;
+        '--n-icon-color': string;
+        '--n-icon-color-disabled': string;
+        '--n-bezier': string;
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border-radius': string;
-        '--item-color-hover': string;
-        '--item-font-size': string;
-        '--item-height': string;
-        '--item-opacity-disabled': string;
-        '--item-text-color': string;
-        '--item-text-color-active': string;
-        '--item-width': string;
-        '--panel-action-padding': string;
-        '--panel-box-shadow': string;
-        '--panel-color': string;
-        '--panel-divider-color': string;
-        '--item-border-radius': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-item-color-hover': string;
+        '--n-item-font-size': string;
+        '--n-item-height': string;
+        '--n-item-opacity-disabled': string;
+        '--n-item-text-color': string;
+        '--n-item-text-color-active': string;
+        '--n-item-width': string;
+        '--n-panel-action-padding': string;
+        '--n-panel-box-shadow': string;
+        '--n-panel-color': string;
+        '--n-panel-divider-color': string;
+        '--n-item-border-radius': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     to?: unknown;
     bordered?: unknown;
     actions?: unknown;
     defaultValue?: unknown;
+    defaultFormattedValue?: unknown;
     placeholder?: unknown;
     placement?: unknown;
     value?: unknown;
     format?: unknown;
+    valueFormat?: unknown;
+    formattedValue?: unknown;
     isHourDisabled?: unknown;
     size?: unknown;
     isMinuteDisabled?: unknown;
@@ -2383,6 +2396,8 @@ declare const _default: import("vue").DefineComponent<{
     clearable?: unknown;
     'onUpdate:value'?: unknown;
     onUpdateValue?: unknown;
+    onUpdateFormattedValue?: unknown;
+    'onUpdate:formattedValue'?: unknown;
     onBlur?: unknown;
     onFocus?: unknown;
     stateful?: unknown;
@@ -2400,10 +2415,10 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     format: string;
     placement: string;
+    showIcon: boolean;
     clearable: boolean;
     defaultValue: number | null;
     stateful: boolean;
-    showIcon: boolean;
     inputReadonly: boolean;
     use12Hours: boolean;
 } & {
@@ -3281,6 +3296,11 @@ declare const _default: import("vue").DefineComponent<{
     hours?: MaybeArray<number> | undefined;
     minutes?: MaybeArray<number> | undefined;
     seconds?: MaybeArray<number> | undefined;
+    defaultFormattedValue?: string | undefined;
+    formattedValue?: string | null | undefined;
+    valueFormat?: string | undefined;
+    "onUpdate:formattedValue"?: MaybeArray<OnUpdateFormattedValue> | undefined;
+    onUpdateFormattedValue?: MaybeArray<OnUpdateFormattedValue> | undefined;
     isHourDisabled?: IsHourDisabled | undefined;
     isMinuteDisabled?: IsMinuteDisabled | undefined;
     isSecondDisabled?: IsSecondDisabled | undefined;
@@ -3290,11 +3310,11 @@ declare const _default: import("vue").DefineComponent<{
     format: string;
     to: string | boolean | HTMLElement;
     placement: string;
+    showIcon: boolean;
     bordered: boolean | undefined;
     clearable: boolean;
     defaultValue: number | null;
     stateful: boolean;
-    showIcon: boolean;
     inputReadonly: boolean;
     use12Hours: boolean;
 }>;

package/lib/time-picker/src/TimePicker.js

@@ -38,13 +38,13 @@ const timePickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props
     }, actions: Array, defaultValue: {
         type: Number,
         default: null
-    }, placeholder: String, placement: {
+    }, defaultFormattedValue: String, placeholder: String, placement: {
         type: String,
         default: 'bottom-start'
     }, value: Number, format: {
         type: String,
         default: 'HH:mm:ss'
-    }, isHourDisabled: Function, size: String, isMinuteDisabled: Function, isSecondDisabled: Function, inputReadonly: Boolean, clearable: Boolean, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onBlur: [Function, Array], onFocus: [Function, Array], 
+    }, valueFormat: String, formattedValue: String, isHourDisabled: Function, size: String, isMinuteDisabled: Function, isSecondDisabled: Function, inputReadonly: Boolean, clearable: Boolean, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onUpdateFormattedValue: [Function, Array], 'onUpdate:formattedValue': [Function, Array], onBlur: [Function, Array], onFocus: [Function, Array], 
     // private
     stateful: {
         type: Boolean,
@@ -89,14 +89,31 @@ exports.default = (0, vue_1.defineComponent)({
         const keyboardState = (0, vooks_1.useKeyboard)();
         const inputInstRef = (0, vue_1.ref)(null);
         const panelInstRef = (0, vue_1.ref)(null);
-        const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
-        const controlledValueRef = (0, vue_1.toRef)(props, 'value');
-        const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
         const dateFnsOptionsRef = (0, vue_1.computed)(() => {
             return {
                 locale: dateLocaleRef.value.locale
             };
         });
+        function getTimestampFromFormattedValue(value) {
+            if (value === null)
+                return null;
+            return (0, utils_1.strictParse)(value, props.valueFormat || props.format, new Date(), dateFnsOptionsRef.value).getTime();
+        }
+        const { defaultValue, defaultFormattedValue } = props;
+        const uncontrolledValueRef = (0, vue_1.ref)(defaultFormattedValue !== undefined
+            ? getTimestampFromFormattedValue(defaultFormattedValue)
+            : defaultValue);
+        const mergedValueRef = (0, vue_1.computed)(() => {
+            const { formattedValue } = props;
+            if (formattedValue !== undefined) {
+                return getTimestampFromFormattedValue(formattedValue);
+            }
+            const { value } = props;
+            if (value !== undefined) {
+                return value;
+            }
+            return uncontrolledValueRef.value;
+        });
         const { value: mergedValue } = mergedValueRef;
         const displayTimeStringRef = (0, vue_1.ref)(mergedValue === null
             ? ''
@@ -197,15 +214,28 @@ exports.default = (0, vue_1.defineComponent)({
                 return null;
             return Number((0, date_fns_1.format)(value, 'ss', dateFnsOptionsRef.value));
         });
-        function doChange(value) {
+        function doUpdateFormattedValue(value, timestampValue) {
+            const { onUpdateFormattedValue, 'onUpdate:formattedValue': _onUpdateFormattedValue } = props;
+            if (onUpdateFormattedValue) {
+                (0, _utils_1.call)(onUpdateFormattedValue, value, timestampValue);
+            }
+            if (_onUpdateFormattedValue) {
+                (0, _utils_1.call)(_onUpdateFormattedValue, value, timestampValue);
+            }
+        }
+        function doUpdateValue(value) {
             const { onUpdateValue, 'onUpdate:value': _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 = value === null ? null : (0, date_fns_1.format)(value, props.valueFormat || props.format);
+            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);
+            doUpdateFormattedValue(formattedValue, value);
             uncontrolledValueRef.value = value;
             nTriggerFormChange();
             nTriggerFormInput();
@@ -226,7 +256,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleTimeInputClear(e) {
             e.stopPropagation();
-            doChange(null);
+            doUpdateValue(null);
             deriveInputValue(null);
         }
         function handleFocusDetectorFocus() {
@@ -269,30 +299,30 @@ exports.default = (0, vue_1.defineComponent)({
             if (typeof hour === 'string')
                 return;
             if (mergedValueRef.value === null) {
-                doChange((0, date_fns_1.getTime)((0, date_fns_1.setHours)((0, date_fns_1.startOfHour)(new Date()), hour)));
+                doUpdateValue((0, date_fns_1.getTime)((0, date_fns_1.setHours)((0, date_fns_1.startOfHour)(new Date()), hour)));
             }
             else {
-                doChange((0, date_fns_1.getTime)((0, date_fns_1.setHours)(mergedValueRef.value, hour)));
+                doUpdateValue((0, date_fns_1.getTime)((0, date_fns_1.setHours)(mergedValueRef.value, hour)));
             }
         }
         function handleMinuteClick(minute) {
             if (typeof minute === 'string')
                 return;
             if (mergedValueRef.value === null) {
-                doChange((0, date_fns_1.getTime)((0, date_fns_1.setMinutes)((0, date_fns_1.startOfMinute)(new Date()), minute)));
+                doUpdateValue((0, date_fns_1.getTime)((0, date_fns_1.setMinutes)((0, date_fns_1.startOfMinute)(new Date()), minute)));
             }
             else {
-                doChange((0, date_fns_1.getTime)((0, date_fns_1.setMinutes)(mergedValueRef.value, minute)));
+                doUpdateValue((0, date_fns_1.getTime)((0, date_fns_1.setMinutes)(mergedValueRef.value, minute)));
             }
         }
         function handleSecondClick(second) {
             if (typeof second === 'string')
                 return;
             if (mergedValueRef.value === null) {
-                doChange((0, date_fns_1.getTime)((0, date_fns_1.setSeconds)((0, date_fns_1.startOfSecond)(new Date()), second)));
+                doUpdateValue((0, date_fns_1.getTime)((0, date_fns_1.setSeconds)((0, date_fns_1.startOfSecond)(new Date()), second)));
             }
             else {
-                doChange((0, date_fns_1.getTime)((0, date_fns_1.setSeconds)(mergedValueRef.value, second)));
+                doUpdateValue((0, date_fns_1.getTime)((0, date_fns_1.setSeconds)(mergedValueRef.value, second)));
             }
         }
         function handleAmPmClick(amPm) {
@@ -301,20 +331,20 @@ exports.default = (0, vue_1.defineComponent)({
                 const now = new Date();
                 const hours = (0, date_fns_1.getHours)(now);
                 if (amPm === 'pm' && hours < 12) {
-                    doChange((0, date_fns_1.getTime)((0, date_fns_1.setHours)(now, hours + 12)));
+                    doUpdateValue((0, date_fns_1.getTime)((0, date_fns_1.setHours)(now, hours + 12)));
                 }
                 else if (amPm === 'am' && hours >= 12) {
-                    doChange((0, date_fns_1.getTime)((0, date_fns_1.setHours)(now, hours - 12)));
+                    doUpdateValue((0, date_fns_1.getTime)((0, date_fns_1.setHours)(now, hours - 12)));
                 }
-                doChange((0, date_fns_1.getTime)(now));
+                doUpdateValue((0, date_fns_1.getTime)(now));
             }
             else {
                 const hours = (0, date_fns_1.getHours)(mergedValue);
                 if (amPm === 'pm' && hours < 12) {
-                    doChange((0, date_fns_1.getTime)((0, date_fns_1.setHours)(mergedValue, hours + 12)));
+                    doUpdateValue((0, date_fns_1.getTime)((0, date_fns_1.setHours)(mergedValue, hours + 12)));
                 }
                 else if (amPm === 'am' && hours >= 12) {
-                    doChange((0, date_fns_1.getTime)((0, date_fns_1.setHours)(mergedValue, hours - 12)));
+                    doUpdateValue((0, date_fns_1.getTime)((0, date_fns_1.setHours)(mergedValue, hours - 12)));
                 }
             }
         }
@@ -413,7 +443,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleTimeInputUpdateValue(v) {
             if (v === '') {
-                doChange(null);
+                doUpdateValue(null);
                 return;
             }
             const time = (0, utils_1.strictParse)(v, props.format, new Date(), dateFnsOptionsRef.value);
@@ -426,15 +456,15 @@ exports.default = (0, vue_1.defineComponent)({
                         minutes: (0, date_fns_1.getMinutes)(time),
                         seconds: (0, date_fns_1.getSeconds)(time)
                     });
-                    doChange((0, date_fns_1.getTime)(newTime));
+                    doUpdateValue((0, date_fns_1.getTime)(newTime));
                 }
                 else {
-                    doChange((0, date_fns_1.getTime)(time));
+                    doUpdateValue((0, date_fns_1.getTime)(time));
                 }
             }
         }
         function handleCancelClick() {
-            doChange(memorizedValueRef.value);
+            doUpdateValue(memorizedValueRef.value);
             doUpdateShow(false);
         }
         function handleNowClick() {
@@ -448,7 +478,7 @@ exports.default = (0, vue_1.defineComponent)({
                 ? getNowTime[i](now)
                 : (0, utils_2.findSimilarTime)(getNowTime[i](now), i, props[i]));
             const newValue = (0, date_fns_1.setSeconds)((0, date_fns_1.setMinutes)((0, date_fns_1.setHours)(mergedValueRef.value ? mergedValueRef.value : (0, date_fns_1.getTime)(now), mergeHours), mergeMinutes), mergeSeconds);
-            doChange((0, date_fns_1.getTime)(newValue));
+            doUpdateValue((0, date_fns_1.getTime)(newValue));
         }
         function handleConfirmClick() {
             deriveInputValue();
@@ -471,7 +501,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         (0, vue_1.watch)(mergedShowRef, () => {
             if (isValueInvalidRef.value) {
-                doChange(memorizedValueRef.value);
+                doUpdateValue(memorizedValueRef.value);
             }
         });
         (0, vue_1.provide)(interface_1.timePickerInjectionKey, {
@@ -531,28 +561,28 @@ exports.default = (0, vue_1.defineComponent)({
             triggerCssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { iconColor, iconColorDisabled } } = themeRef.value;
                 return {
-                    '--icon-color': iconColor,
-                    '--icon-color-disabled': iconColorDisabled,
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-icon-color': iconColor,
+                    '--n-icon-color-disabled': iconColorDisabled,
+                    '--n-bezier': cubicBezierEaseInOut
                 };
             }),
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { panelColor, itemTextColor, itemTextColorActive, itemColorHover, panelDividerColor, panelBoxShadow, itemOpacityDisabled, borderRadius, itemFontSize, itemWidth, itemHeight, panelActionPadding, itemBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--item-color-hover': itemColorHover,
-                    '--item-font-size': itemFontSize,
-                    '--item-height': itemHeight,
-                    '--item-opacity-disabled': itemOpacityDisabled,
-                    '--item-text-color': itemTextColor,
-                    '--item-text-color-active': itemTextColorActive,
-                    '--item-width': itemWidth,
-                    '--panel-action-padding': panelActionPadding,
-                    '--panel-box-shadow': panelBoxShadow,
-                    '--panel-color': panelColor,
-                    '--panel-divider-color': panelDividerColor,
-                    '--item-border-radius': itemBorderRadius
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-item-color-hover': itemColorHover,
+                    '--n-item-font-size': itemFontSize,
+                    '--n-item-height': itemHeight,
+                    '--n-item-opacity-disabled': itemOpacityDisabled,
+                    '--n-item-text-color': itemTextColor,
+                    '--n-item-text-color-active': itemTextColorActive,
+                    '--n-item-width': itemWidth,
+                    '--n-panel-action-padding': panelActionPadding,
+                    '--n-panel-box-shadow': panelBoxShadow,
+                    '--n-panel-color': panelColor,
+                    '--n-panel-divider-color': panelDividerColor,
+                    '--n-item-border-radius': itemBorderRadius
                 };
             })
         };

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

@@ -20,8 +20,10 @@ export interface PanelRef {
     secondScrollRef?: ScrollbarInst;
     amPmScrollRef?: ScrollbarInst;
 }
-export declare type OnUpdateValue = <T extends number & (number | null)>(value: T) => void;
-export declare type OnUpdateValueImpl = (value: number | null) => void;
+export declare type OnUpdateValue = ((value: number, formattedValue: string) => void) & ((value: number | null, formattedValue: string | null) => void);
+export declare type OnUpdateValueImpl = (value: number | null, formattedValue: string | null) => void;
+export declare type OnUpdateFormattedValue = ((value: string, timestampValue: number) => void) & ((value: string | null, timestampValue: number | null) => void);
+export declare type OnUpdateFormattedValueImpl = (value: string | null, timestampValue: number | null) => void;
 export declare type IsHourDisabled = (hour: number) => boolean;
 export declare type IsMinuteDisabled = (minute: number, hour: number | null) => boolean;
 export declare type IsSecondDisabled = (second: number, minute: number | null, hour: number | null) => boolean;