naive-ui 2.19.7 → 2.19.11

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

@@ -30,6 +30,7 @@ const timePickerPanelProps = {
     isHourInvalid: Boolean,
     isMinuteInvalid: Boolean,
     isSecondInvalid: Boolean,
+    isAmPmInvalid: Boolean,
     isValueInvalid: Boolean,
     hourValue: {
         type: Number,
@@ -43,6 +44,10 @@ const timePickerPanelProps = {
         type: Number,
         default: null
     },
+    amPmValue: {
+        type: String,
+        default: null
+    },
     isHourDisabled: Function,
     isMinuteDisabled: Function,
     isSecondDisabled: Function,
@@ -58,6 +63,10 @@ const timePickerPanelProps = {
         type: Function,
         required: true
     },
+    onAmPmClick: {
+        type: Function,
+        required: true
+    },
     onNowClick: Function,
     nowText: String,
     confirmText: String,
@@ -69,7 +78,8 @@ const timePickerPanelProps = {
     onKeydown: Function,
     hours: [Number, Array],
     minutes: [Number, Array],
-    seconds: [Number, Array]
+    seconds: [Number, Array],
+    use12Hours: Boolean
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'TimePickerPanel',
@@ -79,19 +89,39 @@ exports.default = (0, vue_1.defineComponent)({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.timePickerInjectionKey);
         const hoursRef = (0, vue_1.computed)(() => {
-            const { isHourDisabled, hours } = props;
-            return (0, utils_1.getTimeUnits)(utils_1.time.hours, hours).map((hour) => {
-                return {
-                    value: hour,
-                    disabled: isHourDisabled ? isHourDisabled(Number(hour)) : false
-                };
-            });
+            const { isHourDisabled, hours, use12Hours, amPmValue } = props;
+            if (!use12Hours) {
+                return (0, utils_1.getTimeUnits)(utils_1.time.hours, hours).map((hour) => {
+                    return {
+                        label: hour,
+                        value: Number(hour),
+                        disabled: isHourDisabled ? isHourDisabled(Number(hour)) : false
+                    };
+                });
+            }
+            else {
+                const mergedAmPmValue = amPmValue !== null && amPmValue !== void 0 ? amPmValue : (0, utils_1.getAmPm)(Date.now());
+                return (0, utils_1.getTimeUnits)(utils_1.time.hours, hours, mergedAmPmValue).map((hour) => {
+                    const hourAs12FormattedNumber = Number(hour);
+                    const hourAs24FormattedNumber = mergedAmPmValue === 'pm' && hourAs12FormattedNumber !== 12
+                        ? hourAs12FormattedNumber + 12
+                        : hourAs12FormattedNumber;
+                    return {
+                        label: hour,
+                        value: hourAs24FormattedNumber,
+                        disabled: isHourDisabled
+                            ? isHourDisabled(hourAs24FormattedNumber)
+                            : false
+                    };
+                });
+            }
         });
         const minutesRef = (0, vue_1.computed)(() => {
             const { isMinuteDisabled, minutes } = props;
             return (0, utils_1.getTimeUnits)(utils_1.time.minutes, minutes).map((minute) => {
                 return {
-                    value: minute,
+                    label: minute,
+                    value: Number(minute),
                     disabled: isMinuteDisabled
                         ? isMinuteDisabled(Number(minute), props.hourValue)
                         : false
@@ -102,41 +132,67 @@ exports.default = (0, vue_1.defineComponent)({
             const { isSecondDisabled, seconds } = props;
             return (0, utils_1.getTimeUnits)(utils_1.time.seconds, seconds).map((second) => {
                 return {
-                    value: second,
+                    label: second,
+                    value: Number(second),
                     disabled: isSecondDisabled
                         ? isSecondDisabled(Number(second), props.minuteValue, props.hourValue)
                         : false
                 };
             });
         });
+        const amPmRef = (0, vue_1.computed)(() => {
+            const { isHourDisabled } = props;
+            let amDisabled = true;
+            let pmDisabled = true;
+            for (let i = 0; i < 12; ++i) {
+                if (!(isHourDisabled === null || isHourDisabled === void 0 ? void 0 : isHourDisabled(i))) {
+                    amDisabled = false;
+                    break;
+                }
+            }
+            for (let i = 12; i < 24; ++i) {
+                if (!(isHourDisabled === null || isHourDisabled === void 0 ? void 0 : isHourDisabled(i))) {
+                    pmDisabled = false;
+                    break;
+                }
+            }
+            return [
+                {
+                    label: 'AM',
+                    value: 'am',
+                    disabled: amDisabled
+                },
+                {
+                    label: 'PM',
+                    value: 'pm',
+                    disabled: pmDisabled
+                }
+            ];
+        });
         return {
             mergedTheme: mergedThemeRef,
             mergedClsPrefix: mergedClsPrefixRef,
             hours: hoursRef,
             minutes: minutesRef,
             seconds: secondsRef,
+            amPm: amPmRef,
             hourScrollRef: (0, vue_1.ref)(null),
             minuteScrollRef: (0, vue_1.ref)(null),
-            secondScrollRef: (0, vue_1.ref)(null)
+            secondScrollRef: (0, vue_1.ref)(null),
+            amPmScrollRef: (0, vue_1.ref)(null)
         };
     },
     render() {
         var _a, _b;
         const { mergedClsPrefix, mergedTheme } = this;
-        return (0, vue_1.h)('div', {
-            tabindex: 0,
-            class: `${mergedClsPrefix}-time-picker-panel`,
-            onFocusin: this.onFocusin,
-            onFocusout: this.onFocusout,
-            onKeydown: this.onKeydown
-        }, [
+        return ((0, vue_1.h)("div", { tabindex: 0, class: `${mergedClsPrefix}-time-picker-panel`, onFocusin: this.onFocusin, onFocusout: this.onFocusout, onKeydown: this.onKeydown },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-cols` },
                 this.showHour ? ((0, vue_1.h)("div", { class: [
                         `${mergedClsPrefix}-time-picker-col`,
-                        {
-                            [`${mergedClsPrefix}-time-picker-col--invalid`]: this.isHourInvalid,
-                            [`${mergedClsPrefix}-time-picker-col--transition-disabled`]: this.transitionDisabled
-                        }
+                        this.isHourInvalid &&
+                            `${mergedClsPrefix}-time-picker-col--invalid`,
+                        this.transitionDisabled &&
+                            `${mergedClsPrefix}-time-picker-col--transition-disabled`
                     ] },
                     (0, vue_1.h)(_internal_1.NScrollbar, { ref: "hourScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                         default: () => [
@@ -146,10 +202,10 @@ exports.default = (0, vue_1.defineComponent)({
                     }))) : null,
                 this.showMinute ? ((0, vue_1.h)("div", { class: [
                         `${mergedClsPrefix}-time-picker-col`,
-                        {
-                            [`${mergedClsPrefix}-time-picker-col--transition-disabled`]: this.transitionDisabled,
-                            [`${mergedClsPrefix}-time-picker-col--invalid`]: this.isMinuteInvalid
-                        }
+                        this.transitionDisabled &&
+                            `${mergedClsPrefix}-time-picker-col--transition-disabled`,
+                        this.isMinuteInvalid &&
+                            `${mergedClsPrefix}-time-picker-col--invalid`
                     ] },
                     (0, vue_1.h)(_internal_1.NScrollbar, { ref: "minuteScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                         default: () => [
@@ -159,21 +215,33 @@ exports.default = (0, vue_1.defineComponent)({
                     }))) : null,
                 this.showSecond ? ((0, vue_1.h)("div", { class: [
                         `${mergedClsPrefix}-time-picker-col`,
-                        {
-                            [`${mergedClsPrefix}-time-picker-col--invalid`]: this.isSecondInvalid,
-                            [`${mergedClsPrefix}-time-picker-col--transition-disabled`]: this.transitionDisabled
-                        }
+                        this.isSecondInvalid &&
+                            `${mergedClsPrefix}-time-picker-col--invalid`,
+                        this.transitionDisabled &&
+                            `${mergedClsPrefix}-time-picker-col--transition-disabled`
                     ] },
                     (0, vue_1.h)(_internal_1.NScrollbar, { ref: "secondScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                         default: () => [
                             (0, vue_1.h)(PanelCol_1.default, { clsPrefix: mergedClsPrefix, data: this.seconds, activeValue: this.secondValue, onItemClick: this.onSecondClick }),
                             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
                         ]
+                    }))) : null,
+                this.use12Hours ? ((0, vue_1.h)("div", { class: [
+                        `${mergedClsPrefix}-time-picker-col`,
+                        this.isAmPmInvalid &&
+                            `${mergedClsPrefix}-time-picker-col--invalid`,
+                        this.transitionDisabled &&
+                            `${mergedClsPrefix}-time-picker-col--transition-disabled`
+                    ] },
+                    (0, vue_1.h)(_internal_1.NScrollbar, { ref: "amPmScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
+                        default: () => [
+                            (0, vue_1.h)(PanelCol_1.default, { clsPrefix: mergedClsPrefix, data: this.amPm, activeValue: this.amPmValue, onItemClick: this.onAmPmClick }),
+                            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
+                        ]
                     }))) : null),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-actions` },
                 ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.includes('now')) ? ((0, vue_1.h)(button_1.NButton, { size: "tiny", theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.onNowClick }, { default: () => this.nowText })) : null,
                 ((_b = this.actions) === null || _b === void 0 ? void 0 : _b.includes('confirm')) ? ((0, vue_1.h)(button_1.NButton, { size: "tiny", type: "primary", class: `${mergedClsPrefix}-time-picker-actions__confirm`, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, disabled: this.isValueInvalid, onClick: this.onConfirmClick }, { default: () => this.confirmText })) : null),
-            (0, vue_1.h)(_internal_1.NBaseFocusDetector, { onFocus: this.onFocusDetectorFocus })
-        ]);
+            (0, vue_1.h)(_internal_1.NBaseFocusDetector, { onFocus: this.onFocusDetectorFocus })));
     }
 });

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

@@ -1,8 +1,5 @@
 import { PropType } from 'vue';
-export interface Item {
-    value: string;
-    disabled: boolean;
-}
+import { Item } from './interface';
 declare const _default: import("vue").DefineComponent<{
     clsPrefix: {
         type: StringConstructor;
@@ -13,10 +10,10 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     activeValue: {
-        type: PropType<number | null>;
+        type: PropType<number | "am" | "pm" | null>;
         default: null;
     };
-    onItemClick: PropType<(value: number) => void>;
+    onItemClick: PropType<(value: number | 'am' | 'pm') => void>;
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     clsPrefix?: unknown;
     data?: unknown;
@@ -25,10 +22,10 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     data: Item[];
     clsPrefix: string;
-    activeValue: number | null;
+    activeValue: number | "am" | "pm" | null;
 } & {
-    onItemClick?: ((value: number) => void) | undefined;
+    onItemClick?: ((value: number | 'am' | 'pm') => void) | undefined;
 }>, {
-    activeValue: number | null;
+    activeValue: number | "am" | "pm" | null;
 }>;
 export default _default;

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

@@ -16,21 +16,19 @@ exports.default = (0, vue_1.defineComponent)({
             type: Number,
             default: null
         },
+        // It should be required but vue's type seems to have bugs
         onItemClick: Function
     },
     render() {
         const { activeValue, onItemClick, clsPrefix } = this;
         return this.data.map((item) => {
-            const { value, disabled } = item;
-            const numValue = Number(value);
-            const active = activeValue === numValue;
-            return ((0, vue_1.h)("div", { key: value, "data-active": active ? '' : null, class: [
+            const { label, disabled, value } = item;
+            const active = activeValue === value;
+            return ((0, vue_1.h)("div", { key: label, "data-active": active ? '' : null, class: [
                     `${clsPrefix}-time-picker-col__item`,
-                    {
-                        [`${clsPrefix}-time-picker-col__item--active`]: active,
-                        [`${clsPrefix}-time-picker-col__item--disabled`]: disabled
-                    }
-                ], onClick: onItemClick && !disabled ? () => onItemClick(numValue) : undefined }, value));
+                    active && `${clsPrefix}-time-picker-col__item--active`,
+                    disabled && `${clsPrefix}-time-picker-col__item--disabled`
+                ], onClick: onItemClick && !disabled ? () => onItemClick(value) : undefined }, label));
         });
     }
 });

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, OnUpdateValue, Size } from './interface';
+import { IsHourDisabled, IsMinuteDisabled, IsSecondDisabled, ItemValue, OnUpdateValue, Size } from './interface';
 declare const timePickerProps: {
     to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -51,11 +51,6 @@ declare const timePickerProps: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
-    onChange: {
-        type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
     hours: {
         type: PropType<MaybeArray<number>>;
         validator: (value: MaybeArray<number>) => boolean;
@@ -68,6 +63,8 @@ declare const timePickerProps: {
         type: PropType<MaybeArray<number>>;
         validator: (value: MaybeArray<number>) => boolean;
     };
+    use12Hours: BooleanConstructor;
+    onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     theme: PropType<import("../../_mixins").Theme<"TimePicker", {
         panelColor: string;
         panelBoxShadow: string;
@@ -951,11 +948,6 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | undefined>;
         default: undefined;
     };
-    onChange: {
-        type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
     hours: {
         type: PropType<MaybeArray<number>>;
         validator: (value: MaybeArray<number>) => boolean;
@@ -968,6 +960,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<MaybeArray<number>>;
         validator: (value: MaybeArray<number>) => boolean;
     };
+    use12Hours: BooleanConstructor;
+    onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     theme: PropType<import("../../_mixins").Theme<"TimePicker", {
         panelColor: string;
         panelBoxShadow: string;
@@ -1839,6 +1833,13 @@ declare const _default: import("vue").DefineComponent<{
             contentRef: HTMLElement | null;
             containerScrollTop: number;
         } | undefined;
+        amPmScrollRef?: {
+            scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+            sync: () => void;
+            containerRef: HTMLElement | null;
+            contentRef: HTMLElement | null;
+            containerScrollTop: number;
+        } | undefined;
     } | null>;
     adjustedTo: import("vue").ComputedRef<string | HTMLElement>;
     mergedShow: import("vue").ComputedRef<boolean>;
@@ -1861,6 +1862,7 @@ declare const _default: import("vue").DefineComponent<{
     hourValue: import("vue").ComputedRef<number | null>;
     minuteValue: import("vue").ComputedRef<number | null>;
     secondValue: import("vue").ComputedRef<number | null>;
+    amPmValue: import("vue").ComputedRef<"am" | "pm" | null>;
     handleTimeInputFocus: (e: FocusEvent) => void;
     handleTimeInputBlur: (e: FocusEvent) => void;
     handleNowClick: () => void;
@@ -1871,9 +1873,10 @@ declare const _default: import("vue").DefineComponent<{
     handleClickOutside: (e: MouseEvent) => void;
     handleTimeInputActivate: () => void;
     handleTimeInputDeactivate: () => void;
-    handleHourClick: (hour: number) => void;
-    handleMinuteClick: (minute: number) => void;
-    handleSecondClick: (second: number) => void;
+    handleHourClick: (hour: ItemValue) => void;
+    handleMinuteClick: (minute: ItemValue) => void;
+    handleSecondClick: (second: ItemValue) => void;
+    handleAmPmClick: (amPm: ItemValue) => void;
     handleTimeInputClear: (e: MouseEvent) => void;
     handleFocusDetectorFocus: () => void;
     handleMenuKeyDown: (e: KeyboardEvent) => void;
@@ -2318,10 +2321,11 @@ declare const _default: import("vue").DefineComponent<{
     showIcon?: unknown;
     disabled?: unknown;
     show?: unknown;
-    onChange?: unknown;
     hours?: unknown;
     minutes?: unknown;
     seconds?: unknown;
+    use12Hours?: unknown;
+    onChange?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
@@ -2333,6 +2337,7 @@ declare const _default: import("vue").DefineComponent<{
     stateful: boolean;
     showIcon: boolean;
     inputReadonly: boolean;
+    use12Hours: boolean;
 } & {
     value?: number | null | undefined;
     size?: Size | undefined;
@@ -3187,7 +3192,6 @@ declare const _default: import("vue").DefineComponent<{
 }>, {
     show: boolean | undefined;
     disabled: boolean | undefined;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
     format: string;
     to: string | boolean | HTMLElement;
     placement: string;
@@ -3197,5 +3201,6 @@ declare const _default: import("vue").DefineComponent<{
     stateful: boolean;
     showIcon: boolean;
     inputReadonly: boolean;
+    use12Hours: boolean;
 }>;
 export default _default;

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

@@ -4,6 +4,7 @@ const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const vueuc_1 = require("vueuc");
 const vdirs_1 = require("vdirs");
+const seemly_1 = require("seemly");
 const date_fns_1 = require("date-fns");
 const utils_1 = require("../../date-picker/src/utils");
 const icons_1 = require("../../_internal/icons");
@@ -13,10 +14,9 @@ const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const Panel_1 = require("./Panel");
-const index_cssr_1 = require("./styles/index.cssr");
 const interface_1 = require("./interface");
-const seemly_1 = require("seemly");
 const utils_2 = require("./utils");
+const index_cssr_1 = require("./styles/index.cssr");
 // validate hours, minutes, seconds prop
 function validateUnits(value, max) {
     if (value === undefined) {
@@ -55,17 +55,6 @@ const timePickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props
     }, show: {
         type: Boolean,
         default: undefined
-    }, 
-    // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('time-picker', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
     }, hours: {
         type: [Number, Array],
         validator: (value) => validateUnits(value, 23)
@@ -75,11 +64,20 @@ const timePickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props
     }, seconds: {
         type: [Number, Array],
         validator: (value) => validateUnits(value, 59)
-    } });
+    }, use12Hours: Boolean, 
+    // deprecated
+    onChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'TimePicker',
     props: timePickerProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warnOnce)('time-picker', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
         const { localeRef, dateLocaleRef } = (0, _mixins_1.useLocale)('TimePicker');
         const formItem = (0, _mixins_1.useFormItem)(props);
@@ -172,6 +170,12 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedAttrSizeRef = (0, vue_1.computed)(() => {
             return props.format.length + 4;
         });
+        const amPmValueRef = (0, vue_1.computed)(() => {
+            const { value } = mergedValueRef;
+            if (value === null)
+                return null;
+            return (0, date_fns_1.getHours)(value) < 12 ? 'am' : 'pm';
+        });
         const hourValueRef = (0, vue_1.computed)(() => {
             const { value } = mergedValueRef;
             if (value === null)
@@ -259,6 +263,8 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         function handleHourClick(hour) {
+            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)));
             }
@@ -267,6 +273,8 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         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)));
             }
@@ -275,6 +283,8 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         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)));
             }
@@ -282,6 +292,29 @@ exports.default = (0, vue_1.defineComponent)({
                 doChange((0, date_fns_1.getTime)((0, date_fns_1.setSeconds)(mergedValueRef.value, second)));
             }
         }
+        function handleAmPmClick(amPm) {
+            const { value: mergedValue } = mergedValueRef;
+            if (mergedValue === null) {
+                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)));
+                }
+                else if (amPm === 'am' && hours >= 12) {
+                    doChange((0, date_fns_1.getTime)((0, date_fns_1.setHours)(now, hours - 12)));
+                }
+                doChange((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)));
+                }
+                else if (amPm === 'am' && hours >= 12) {
+                    doChange((0, date_fns_1.getTime)((0, date_fns_1.setHours)(mergedValue, hours - 12)));
+                }
+            }
+        }
         function deriveInputValue(time) {
             if (time === undefined)
                 time = mergedValueRef.value;
@@ -326,28 +359,20 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         function scrollTimer() {
-            var _a, _b, _c;
             if (!panelInstRef.value)
                 return;
-            const { hourScrollRef, minuteScrollRef, secondScrollRef } = panelInstRef.value;
-            if (hourScrollRef) {
-                const hour = (_a = hourScrollRef.contentRef) === null || _a === void 0 ? void 0 : _a.querySelector('[data-active]');
-                if (hour) {
-                    hourScrollRef.scrollTo({ top: hour.offsetTop });
-                }
-            }
-            if (minuteScrollRef) {
-                const minute = (_b = minuteScrollRef.contentRef) === null || _b === void 0 ? void 0 : _b.querySelector('[data-active]');
-                if (minute) {
-                    minuteScrollRef.scrollTo({ top: minute.offsetTop });
-                }
-            }
-            if (secondScrollRef) {
-                const second = (_c = secondScrollRef.contentRef) === null || _c === void 0 ? void 0 : _c.querySelector('[data-active]');
-                if (second) {
-                    secondScrollRef.scrollTo({ top: second.offsetTop });
+            const { hourScrollRef, minuteScrollRef, secondScrollRef, amPmScrollRef } = panelInstRef.value;
+            [hourScrollRef, minuteScrollRef, secondScrollRef, amPmScrollRef].forEach((itemScrollRef) => {
+                var _a;
+                if (!itemScrollRef)
+                    return;
+                const activeItemEl = (_a = itemScrollRef.contentRef) === null || _a === void 0 ? void 0 : _a.querySelector('[data-active]');
+                if (activeItemEl) {
+                    itemScrollRef.scrollTo({
+                        top: activeItemEl.offsetTop
+                    });
                 }
-            }
+            });
         }
         function doUpdateShow(value) {
             uncontrolledShowRef.value = value;
@@ -477,6 +502,7 @@ exports.default = (0, vue_1.defineComponent)({
             hourValue: hourValueRef,
             minuteValue: minuteValueRef,
             secondValue: secondValueRef,
+            amPmValue: amPmValueRef,
             handleTimeInputFocus,
             handleTimeInputBlur,
             handleNowClick,
@@ -490,6 +516,7 @@ exports.default = (0, vue_1.defineComponent)({
             handleHourClick,
             handleMinuteClick,
             handleSecondClick,
+            handleAmPmClick,
             handleTimeInputClear,
             handleFocusDetectorFocus,
             handleMenuKeyDown,
@@ -541,7 +568,7 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, vue_1.h)(vueuc_1.VFollower, { teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, show: this.mergedShow, to: this.adjustedTo, containerClass: this.namespace, placement: "bottom-start" }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => this.mergedShow
-                                ? (0, vue_1.withDirectives)((0, vue_1.h)(Panel_1.default, { ref: "panelInstRef", actions: this.actions, style: this.cssVars, seconds: this.seconds, minutes: this.minutes, hours: this.hours, transitionDisabled: this.transitionDisabled, hourValue: this.hourValue, showHour: this.hourInFormat, isHourInvalid: this.isHourInvalid, isHourDisabled: this.isHourDisabled, minuteValue: this.minuteValue, showMinute: this.minuteInFormat, isMinuteInvalid: this.isMinuteInvalid, isMinuteDisabled: this.isMinuteDisabled, secondValue: this.secondValue, showSecond: this.secondInFormat, isSecondInvalid: this.isSecondInvalid, isSecondDisabled: this.isSecondDisabled, isValueInvalid: this.isValueInvalid, nowText: this.localizedNow, confirmText: this.localizedPositiveText, onFocusout: this.handleMenuFocusOut, onKeydown: this.handleMenuKeyDown, onHourClick: this.handleHourClick, onMinuteClick: this.handleMinuteClick, onSecondClick: this.handleSecondClick, onNowClick: this.handleNowClick, onConfirmClick: this.handleConfirmClick, onFocusDetectorFocus: this.handleFocusDetectorFocus }), [[vdirs_1.clickoutside, this.handleClickOutside]])
+                                ? (0, vue_1.withDirectives)((0, vue_1.h)(Panel_1.default, { ref: "panelInstRef", actions: this.actions, style: this.cssVars, seconds: this.seconds, minutes: this.minutes, hours: this.hours, transitionDisabled: this.transitionDisabled, hourValue: this.hourValue, showHour: this.hourInFormat, isHourInvalid: this.isHourInvalid, isHourDisabled: this.isHourDisabled, minuteValue: this.minuteValue, showMinute: this.minuteInFormat, isMinuteInvalid: this.isMinuteInvalid, isMinuteDisabled: this.isMinuteDisabled, secondValue: this.secondValue, amPmValue: this.amPmValue, showSecond: this.secondInFormat, isSecondInvalid: this.isSecondInvalid, isSecondDisabled: this.isSecondDisabled, isValueInvalid: this.isValueInvalid, nowText: this.localizedNow, confirmText: this.localizedPositiveText, use12Hours: this.use12Hours, onFocusout: this.handleMenuFocusOut, onKeydown: this.handleMenuKeyDown, onHourClick: this.handleHourClick, onMinuteClick: this.handleMinuteClick, onSecondClick: this.handleSecondClick, onAmPmClick: this.handleAmPmClick, onNowClick: this.handleNowClick, onConfirmClick: this.handleConfirmClick, onFocusDetectorFocus: this.handleFocusDetectorFocus }), [[vdirs_1.clickoutside, this.handleClickOutside]])
                                 : null
                         }))
                     })

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

@@ -2,6 +2,12 @@ import { InjectionKey, Ref } from 'vue';
 import { ScrollbarInst } from '../../_internal';
 import type { MergedTheme } from '../../_mixins';
 import type { TimePickerTheme } from '../styles';
+export declare type ItemValue = number | 'am' | 'pm';
+export interface Item {
+    label: string;
+    value: ItemValue;
+    disabled: boolean;
+}
 export interface TimePickerInjection {
     mergedThemeRef: Ref<MergedTheme<TimePickerTheme>>;
     mergedClsPrefixRef: Ref<string>;
@@ -12,6 +18,7 @@ export interface PanelRef {
     hourScrollRef?: ScrollbarInst;
     minuteScrollRef?: ScrollbarInst;
     secondScrollRef?: ScrollbarInst;
+    amPmScrollRef?: ScrollbarInst;
 }
 export declare type OnUpdateValue = <T extends number & (number | null)>(value: T) => void;
 export declare type OnUpdateValueImpl = (value: number | null) => void;

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

@@ -1,11 +1,14 @@
 import { MaybeArray } from '../../_utils';
 export declare const time: {
+    amHours: string[];
+    pmHours: string[];
     hours: string[];
     minutes: string[];
     seconds: string[];
     period: string[];
 };
 export declare function getFixValue(value: number): string;
-export declare function getTimeUnits(defaultValue: string[], stepOrList: MaybeArray<number> | undefined): string[];
+export declare function getTimeUnits(defaultValue: string[], stepOrList: MaybeArray<number> | undefined, isHourWithAmPm?: 'am' | 'pm'): string[];
 export declare function isTimeInStep(value: number, type: 'hours' | 'minutes' | 'seconds', stepOrList: MaybeArray<number> | undefined): boolean;
 export declare function findSimilarTime(value: number, type: 'hours' | 'minutes' | 'seconds', stepOrList: MaybeArray<number> | undefined): number;
+export declare function getAmPm(value: number): 'am' | 'pm';