naive-ui 2.23.2 → 2.24.0

package/es/select/src/Select.d.ts

@@ -3,8 +3,7 @@ import { TreeNode } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
 import { RenderLabel, RenderOption } from '../../_internal/select-menu/src/interface';
 import { RenderTag } from '../../_internal/selection/src/interface';
-import { ExtractPublicPropTypes } from '../../_utils';
-import type { MaybeArray } from '../../_utils';
+import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import { defaultFilter } from './utils';
 import type { SelectMixedOption, SelectBaseOption, SelectGroupOption, SelectIgnoredOption, OnUpdateValue, Value, Size, ValueAtom } from './interface';
 declare const selectProps: {
@@ -94,21 +93,13 @@ declare const selectProps: {
     readonly onSearch: PropType<MaybeArray<(value: string) => void> | undefined>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
-    /** deprecated */
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly items: {
-        readonly type: PropType<SelectMixedOption[] | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
     readonly displayDirective: {
         readonly type: PropType<"show" | "if">;
         readonly default: "show";
     };
+    /** deprecated */
+    readonly onChange: PropType<MaybeArray<OnUpdateValue>>;
+    readonly items: PropType<SelectMixedOption[]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Select", {
         menuBoxShadow: string;
     }, {
@@ -570,21 +561,13 @@ declare const _default: import("vue").DefineComponent<{
     readonly onSearch: PropType<MaybeArray<(value: string) => void> | undefined>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
-    /** deprecated */
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly items: {
-        readonly type: PropType<SelectMixedOption[] | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
     readonly displayDirective: {
         readonly type: PropType<"show" | "if">;
         readonly default: "show";
     };
+    /** deprecated */
+    readonly onChange: PropType<MaybeArray<OnUpdateValue>>;
+    readonly items: PropType<SelectMixedOption[]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Select", {
         menuBoxShadow: string;
     }, {
@@ -1321,9 +1304,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly onSearch?: unknown;
     readonly onUpdateShow?: unknown;
     readonly 'onUpdate:show'?: unknown;
+    readonly displayDirective?: unknown;
     readonly onChange?: unknown;
     readonly items?: unknown;
-    readonly displayDirective?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -1748,11 +1731,9 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean | undefined;
     multiple: boolean;
     disabled: boolean | undefined;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
     to: string | boolean | HTMLElement;
     loading: boolean;
     placement: FollowerPlacement;
-    items: SelectMixedOption[] | undefined;
     bordered: boolean | undefined;
     virtualScroll: boolean;
     showArrow: boolean;

package/es/select/src/Select.js

@@ -1,11 +1,11 @@
-import { h, ref, computed, toRef, defineComponent, nextTick, watch, Transition, withDirectives, vShow } from 'vue';
+import { h, ref, computed, toRef, defineComponent, nextTick, watch, Transition, withDirectives, vShow, watchEffect } from 'vue';
 import { happensIn } from 'seemly';
 import { createTreeMate } from 'treemate';
 import { VBinder, VFollower, VTarget } from 'vueuc';
 import { useIsMounted, useMergedState, useCompitable } from 'vooks';
 import { clickoutside } from 'vdirs';
 import { useTheme, useConfig, useLocale, useFormItem } from '../../_mixins';
-import { warn, call, useAdjustedTo } from '../../_utils';
+import { call, useAdjustedTo, warnOnce } from '../../_utils';
 import { NInternalSelectMenu, NInternalSelection } from '../../_internal';
 import { selectLight } from '../styles';
 import { tmOptions, createValOptMap, filterOptions, defaultFilter } from './utils';
@@ -57,34 +57,26 @@ const selectProps = Object.assign(Object.assign({}, useTheme.props), { to: useAd
         default: true
     }, renderLabel: Function, renderOption: Function, renderTag: Function, 'onUpdate:value': [Function, Array], inputProps: Object, 
     // for jsx
-    onUpdateValue: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], onFocus: [Function, Array], onScroll: [Function, Array], onSearch: [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array], 
-    /** deprecated */
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('select', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, items: {
-        type: Array,
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('select', '`items` is deprecated, please use `options` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, displayDirective: {
+    onUpdateValue: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], onFocus: [Function, Array], onScroll: [Function, Array], onSearch: [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array], displayDirective: {
         type: String,
         default: 'show'
-    } });
+    }, 
+    /** deprecated */
+    onChange: [Function, Array], items: Array });
 export default defineComponent({
     name: 'Select',
     props: selectProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.items !== undefined) {
+                    warnOnce('select', '`items` is deprecated, please use `options` instead.');
+                }
+                if (props.onChange !== undefined) {
+                    warnOnce('select', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef } = useConfig(props);
         const themeRef = useTheme('Select', 'Select', style, selectLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = ref(props.defaultValue);

package/es/slider/src/Slider.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, CSSProperties } from 'vue';
 import { FollowerPlacement } from 'vueuc';
 import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 export interface ClosestMark {
@@ -279,9 +279,7 @@ declare const _default: import("vue").DefineComponent<{
     markInfos: import("vue").ComputedRef<{
         active: boolean;
         label: string;
-        style: {
-            [x: string]: string;
-        };
+        style: CSSProperties;
     }[]>;
     isShowTooltip: (index: number) => boolean;
     isSkipCSSDetection: (index: number) => boolean;

package/es/tabs/index.d.ts

@@ -4,3 +4,4 @@ export { default as NTabPane } from './src/TabPane';
 export type { TabPaneProps } from './src/TabPane';
 export { default as NTab } from './src/Tab';
 export type { TabProps } from './src/Tab';
+export type { TabsInst } from './src/interface';

package/es/tabs/src/Tabs.d.ts

@@ -2,8 +2,7 @@
 import { PropType, CSSProperties, ComponentPublicInstance, nextTick } from 'vue';
 import { VXScrollInst } from 'vueuc';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import { Addable, OnClose, OnBeforeLeave, TabsType } from './interface';
-import type { OnUpdateValue } from './interface';
+import type { Addable, OnClose, OnBeforeLeave, TabsType, OnUpdateValue } from './interface';
 declare const tabsProps: {
     readonly value: PropType<string | number>;
     readonly defaultValue: PropType<string | number>;
@@ -437,6 +436,7 @@ declare const _default: import("vue").DefineComponent<{
         panePaddingLarge: string;
     }, any>>>;
 }, {
+    syncBarPosition: () => void;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedValue: import("vue").ComputedRef<string | number | null>;
     renderedNames: Set<string | number>;

package/es/tabs/src/Tabs.js

@@ -6,8 +6,8 @@ import { useConfig, useTheme } from '../../_mixins';
 import { createKey, call, flatten, warnOnce } from '../../_utils';
 import { tabsLight } from '../styles';
 import { tabsInjectionKey } from './interface';
-import style from './styles/index.cssr';
 import Tab from './Tab';
+import style from './styles/index.cssr';
 const tabsProps = Object.assign(Object.assign({}, useTheme.props), { value: [String, Number], defaultValue: [String, Number], type: {
         type: String,
         default: 'bar'
@@ -54,9 +54,6 @@ export default defineComponent({
             : null));
         const mergedValueRef = useMergedState(compitableValueRef, uncontrolledValueRef);
         const tabChangeIdRef = { id: 0 };
-        watch(mergedValueRef, () => {
-            tabChangeIdRef.id = 0;
-        });
         const tabWrapperStyleRef = computed(() => {
             if (!props.justifyContent || props.type === 'card')
                 return undefined;
@@ -66,6 +63,7 @@ export default defineComponent({
             };
         });
         watch(mergedValueRef, () => {
+            tabChangeIdRef.id = 0;
             updateCurrentBarStyle();
         });
         function getCurrentEl() {
@@ -230,22 +228,17 @@ export default defineComponent({
                 el.classList.add(shadowAfterClass);
             }
         });
-        return {
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedValue: mergedValueRef,
-            renderedNames: new Set(),
-            tabsElRef,
+        const exposedMethods = {
+            syncBarPosition: () => {
+                updateCurrentBarStyle();
+            }
+        };
+        return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, mergedValue: mergedValueRef, renderedNames: new Set(), tabsElRef,
             barElRef,
             addTabInstRef,
             xScrollInstRef,
-            scrollWrapperElRef,
-            addTabFixed: addTabFixedRef,
-            tabWrapperStyle: tabWrapperStyleRef,
-            handleNavResize,
-            mergedSize: compitableSizeRef,
-            handleScroll,
-            handleTabsResize,
-            cssVars: computed(() => {
+            scrollWrapperElRef, addTabFixed: addTabFixedRef, tabWrapperStyle: tabWrapperStyleRef, handleNavResize, mergedSize: compitableSizeRef, handleScroll,
+            handleTabsResize, cssVars: computed(() => {
                 const { value: size } = compitableSizeRef;
                 const { type } = props;
                 const typeSuffix = {
@@ -280,8 +273,7 @@ export default defineComponent({
                     '--font-weight-strong': fontWeightStrong,
                     '--tab-color-segment': tabColorSegment
                 };
-            })
-        };
+            }) }, exposedMethods);
     },
     render() {
         const { mergedClsPrefix, type, addTabFixed, addable, mergedSize, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
@@ -339,7 +331,7 @@ export default defineComponent({
                                     mergedJustifyContent ? null : (h("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } })),
                                     showPane
                                         ? tabPaneChildren.map((tabPaneVNode, index) => {
-                                            return (h(Tab, Object.assign({}, tabPaneVNode.props, { internalLeftPadded: index !== 0 && !mergedJustifyContent }), tabPaneVNode.children
+                                            return justifyTabDynamicProps(h(Tab, Object.assign({}, tabPaneVNode.props, { internalLeftPadded: index !== 0 && !mergedJustifyContent }), tabPaneVNode.children
                                                 ? {
                                                     default: tabPaneVNode.children.tab
                                                 }
@@ -348,10 +340,10 @@ export default defineComponent({
                                         : tabChildren.map((tabVNode, index) => {
                                             if (index !== 0 &&
                                                 !mergedJustifyContent) {
-                                                return createLeftPaddedTabVNode(tabVNode);
+                                                return justifyTabDynamicProps(createLeftPaddedTabVNode(tabVNode));
                                             }
                                             else {
-                                                return tabVNode;
+                                                return justifyTabDynamicProps(tabVNode);
                                             }
                                         }),
                                     !addTabFixed && addable && isCard
@@ -417,3 +409,14 @@ function createLeftPaddedTabVNode(tabVNode) {
     }
     return modifiedVNode;
 }
+function justifyTabDynamicProps(tabVNode) {
+    if (Array.isArray(tabVNode.dynamicProps)) {
+        if (!tabVNode.dynamicProps.includes('internalLeftPadded')) {
+            tabVNode.dynamicProps.push('internalLeftPadded');
+        }
+    }
+    else {
+        tabVNode.dynamicProps = ['internalLeftPadded'];
+    }
+    return tabVNode;
+}

package/es/tabs/src/interface.d.ts

@@ -26,3 +26,6 @@ export declare type Addable = boolean | {
     disabled?: boolean;
 };
 export declare const tabsInjectionKey: InjectionKey<TabsInjection>;
+export interface TabsInst {
+    syncBarPosition: () => void;
+}

package/es/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: {
@@ -2371,10 +2381,13 @@ declare const _default: import("vue").DefineComponent<{
     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;
@@ -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;

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

@@ -33,13 +33,13 @@ const timePickerProps = Object.assign(Object.assign({}, useTheme.props), { to: u
     }, 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,
@@ -84,14 +84,31 @@ export default defineComponent({
         const keyboardState = useKeyboard();
         const inputInstRef = ref(null);
         const panelInstRef = ref(null);
-        const uncontrolledValueRef = ref(props.defaultValue);
-        const controlledValueRef = toRef(props, 'value');
-        const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
         const dateFnsOptionsRef = computed(() => {
             return {
                 locale: dateLocaleRef.value.locale
             };
         });
+        function getTimestampFromFormattedValue(value) {
+            if (value === null)
+                return null;
+            return strictParse(value, props.valueFormat || props.format, new Date(), dateFnsOptionsRef.value).getTime();
+        }
+        const { defaultValue, defaultFormattedValue } = props;
+        const uncontrolledValueRef = ref(defaultFormattedValue !== undefined
+            ? getTimestampFromFormattedValue(defaultFormattedValue)
+            : defaultValue);
+        const mergedValueRef = 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 = ref(mergedValue === null
             ? ''
@@ -192,15 +209,28 @@ export default defineComponent({
                 return null;
             return Number(format(value, 'ss', dateFnsOptionsRef.value));
         });
-        function doChange(value) {
+        function doUpdateFormattedValue(value, timestampValue) {
+            const { onUpdateFormattedValue, 'onUpdate:formattedValue': _onUpdateFormattedValue } = props;
+            if (onUpdateFormattedValue) {
+                call(onUpdateFormattedValue, value, timestampValue);
+            }
+            if (_onUpdateFormattedValue) {
+                call(_onUpdateFormattedValue, value, timestampValue);
+            }
+        }
+        function doUpdateValue(value) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
             const { nTriggerFormChange, nTriggerFormInput } = formItem;
-            if (onUpdateValue)
-                call(onUpdateValue, value);
-            if (_onUpdateValue)
-                call(_onUpdateValue, value);
+            const formattedValue = value === null ? null : format(value, props.valueFormat || props.format);
+            if (onUpdateValue) {
+                call(onUpdateValue, value, formattedValue);
+            }
+            if (_onUpdateValue) {
+                call(_onUpdateValue, value, formattedValue);
+            }
             if (onChange)
-                call(onChange, value);
+                call(onChange, value, formattedValue);
+            doUpdateFormattedValue(formattedValue, value);
             uncontrolledValueRef.value = value;
             nTriggerFormChange();
             nTriggerFormInput();
@@ -221,7 +251,7 @@ export default defineComponent({
         }
         function handleTimeInputClear(e) {
             e.stopPropagation();
-            doChange(null);
+            doUpdateValue(null);
             deriveInputValue(null);
         }
         function handleFocusDetectorFocus() {
@@ -264,30 +294,30 @@ export default defineComponent({
             if (typeof hour === 'string')
                 return;
             if (mergedValueRef.value === null) {
-                doChange(getTime(setHours(startOfHour(new Date()), hour)));
+                doUpdateValue(getTime(setHours(startOfHour(new Date()), hour)));
             }
             else {
-                doChange(getTime(setHours(mergedValueRef.value, hour)));
+                doUpdateValue(getTime(setHours(mergedValueRef.value, hour)));
             }
         }
         function handleMinuteClick(minute) {
             if (typeof minute === 'string')
                 return;
             if (mergedValueRef.value === null) {
-                doChange(getTime(setMinutes(startOfMinute(new Date()), minute)));
+                doUpdateValue(getTime(setMinutes(startOfMinute(new Date()), minute)));
             }
             else {
-                doChange(getTime(setMinutes(mergedValueRef.value, minute)));
+                doUpdateValue(getTime(setMinutes(mergedValueRef.value, minute)));
             }
         }
         function handleSecondClick(second) {
             if (typeof second === 'string')
                 return;
             if (mergedValueRef.value === null) {
-                doChange(getTime(setSeconds(startOfSecond(new Date()), second)));
+                doUpdateValue(getTime(setSeconds(startOfSecond(new Date()), second)));
             }
             else {
-                doChange(getTime(setSeconds(mergedValueRef.value, second)));
+                doUpdateValue(getTime(setSeconds(mergedValueRef.value, second)));
             }
         }
         function handleAmPmClick(amPm) {
@@ -296,20 +326,20 @@ export default defineComponent({
                 const now = new Date();
                 const hours = getHours(now);
                 if (amPm === 'pm' && hours < 12) {
-                    doChange(getTime(setHours(now, hours + 12)));
+                    doUpdateValue(getTime(setHours(now, hours + 12)));
                 }
                 else if (amPm === 'am' && hours >= 12) {
-                    doChange(getTime(setHours(now, hours - 12)));
+                    doUpdateValue(getTime(setHours(now, hours - 12)));
                 }
-                doChange(getTime(now));
+                doUpdateValue(getTime(now));
             }
             else {
                 const hours = getHours(mergedValue);
                 if (amPm === 'pm' && hours < 12) {
-                    doChange(getTime(setHours(mergedValue, hours + 12)));
+                    doUpdateValue(getTime(setHours(mergedValue, hours + 12)));
                 }
                 else if (amPm === 'am' && hours >= 12) {
-                    doChange(getTime(setHours(mergedValue, hours - 12)));
+                    doUpdateValue(getTime(setHours(mergedValue, hours - 12)));
                 }
             }
         }
@@ -408,7 +438,7 @@ export default defineComponent({
         }
         function handleTimeInputUpdateValue(v) {
             if (v === '') {
-                doChange(null);
+                doUpdateValue(null);
                 return;
             }
             const time = strictParse(v, props.format, new Date(), dateFnsOptionsRef.value);
@@ -421,15 +451,15 @@ export default defineComponent({
                         minutes: getMinutes(time),
                         seconds: getSeconds(time)
                     });
-                    doChange(getTime(newTime));
+                    doUpdateValue(getTime(newTime));
                 }
                 else {
-                    doChange(getTime(time));
+                    doUpdateValue(getTime(time));
                 }
             }
         }
         function handleCancelClick() {
-            doChange(memorizedValueRef.value);
+            doUpdateValue(memorizedValueRef.value);
             doUpdateShow(false);
         }
         function handleNowClick() {
@@ -443,7 +473,7 @@ export default defineComponent({
                 ? getNowTime[i](now)
                 : findSimilarTime(getNowTime[i](now), i, props[i]));
             const newValue = setSeconds(setMinutes(setHours(mergedValueRef.value ? mergedValueRef.value : getTime(now), mergeHours), mergeMinutes), mergeSeconds);
-            doChange(getTime(newValue));
+            doUpdateValue(getTime(newValue));
         }
         function handleConfirmClick() {
             deriveInputValue();
@@ -466,7 +496,7 @@ export default defineComponent({
         });
         watch(mergedShowRef, () => {
             if (isValueInvalidRef.value) {
-                doChange(memorizedValueRef.value);
+                doUpdateValue(memorizedValueRef.value);
             }
         });
         provide(timePickerInjectionKey, {

package/es/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;

package/es/tooltip/src/Tooltip.d.ts

@@ -133,6 +133,7 @@ declare const tooltipProps: {
         type: import("vue").PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    internalTrapFocus: BooleanConstructor;
     onShow: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     onHide: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     arrow: {
@@ -275,6 +276,7 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    internalTrapFocus: BooleanConstructor;
     onShow: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     onHide: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     arrow: {
@@ -462,6 +464,7 @@ declare const _default: import("vue").DefineComponent<{
     to?: unknown;
     internalSyncTargetWithParent?: unknown;
     internalInheritedEventHandlers?: unknown;
+    internalTrapFocus?: unknown;
     onShow?: unknown;
     onHide?: unknown;
     arrow?: unknown;
@@ -478,6 +481,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -580,6 +584,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];