naive-ui 2.19.7 → 2.19.11

package/es/scrollbar/src/ScrollBar.js

@@ -1,12 +1,22 @@
-import { h, defineComponent } from 'vue';
+import { h, defineComponent, ref } from 'vue';
 import { NScrollbar } from '../../_internal';
 import { useTheme } from '../../_mixins';
 const scrollbarProps = Object.assign(Object.assign({}, useTheme.props), { xScrollable: Boolean, onScroll: Function });
 const Scrollbar = defineComponent({
     name: 'Scrollbar',
     props: scrollbarProps,
-    setup(props, { slots }) {
-        return () => h(NScrollbar, props, slots);
+    setup() {
+        const scrollbarInstRef = ref(null);
+        const exposedMethods = {
+            scrollTo: (...args) => {
+                var _a;
+                (_a = scrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(args[0], args[1]);
+            }
+        };
+        return Object.assign(Object.assign({}, exposedMethods), { scrollbarInstRef });
+    },
+    render() {
+        return (h(NScrollbar, Object.assign({ ref: "scrollbarInstRef" }, this.$props), this.$slots));
     }
 });
 export default Scrollbar;

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, InputHTMLAttributes } from 'vue';
 import { TreeNode } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
 import { RenderLabel, RenderOption } from '../../_internal/select-menu/src/interface';
@@ -84,6 +84,7 @@ declare const selectProps: {
     readonly renderOption: PropType<RenderOption>;
     readonly renderTag: PropType<RenderTag>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue> | undefined>;
+    readonly inputProps: PropType<InputHTMLAttributes>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void> | undefined>;
     readonly onClear: PropType<MaybeArray<() => void> | undefined>;
@@ -558,6 +559,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderOption: PropType<RenderOption>;
     readonly renderTag: PropType<RenderTag>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue> | undefined>;
+    readonly inputProps: PropType<InputHTMLAttributes>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void> | undefined>;
     readonly onClear: PropType<MaybeArray<() => void> | undefined>;
@@ -1303,6 +1305,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderOption?: unknown;
     readonly renderTag?: unknown;
     readonly 'onUpdate:value'?: unknown;
+    readonly inputProps?: unknown;
     readonly onUpdateValue?: unknown;
     readonly onBlur?: unknown;
     readonly onClear?: unknown;
@@ -1725,6 +1728,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:show"?: MaybeArray<(value: boolean) => void> | undefined;
     onUpdateShow?: MaybeArray<(value: boolean) => void> | undefined;
     onClear?: MaybeArray<() => void> | undefined;
+    inputProps?: InputHTMLAttributes | undefined;
     renderTag?: RenderTag | undefined;
     maxTagCount?: number | "responsive" | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;

package/es/select/src/Select.js

@@ -55,7 +55,7 @@ const selectProps = Object.assign(Object.assign({}, useTheme.props), { to: useAd
     }, virtualScroll: {
         type: Boolean,
         default: true
-    }, renderLabel: Function, renderOption: Function, renderTag: Function, 'onUpdate:value': [Function, Array], 
+    }, 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 */
@@ -586,7 +586,7 @@ export default defineComponent({
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {
-                        default: () => (h(NInternalSelection, { ref: "triggerRef", clsPrefix: mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, active: this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeyDown, onKeyup: this.handleKeyUp }))
+                        default: () => (h(NInternalSelection, { ref: "triggerRef", inputProps: this.inputProps, clsPrefix: mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, active: this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeyDown, onKeyup: this.handleKeyUp }))
                     }),
                     h(VFollower, { ref: "followerRef", show: this.mergedShow, to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, containerClass: this.namespace, width: this.consistentMenuWidth ? 'target' : undefined, minWidth: "target", placement: this.placement }, {
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onLeave: this.handleMenuLeave }, {

package/es/table/src/Table.d.ts

@@ -13,10 +13,7 @@ declare const tableProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    singleColumn: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    singleColumn: BooleanConstructor;
     size: {
         type: PropType<"small" | "medium" | "large">;
         default: string;
@@ -111,10 +108,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    singleColumn: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    singleColumn: BooleanConstructor;
     size: {
         type: PropType<"small" | "medium" | "large">;
         default: string;

package/es/table/src/Table.js

@@ -12,10 +12,7 @@ const tableProps = Object.assign(Object.assign({}, useTheme.props), { bordered:
     }, singleLine: {
         type: Boolean,
         default: true
-    }, singleColumn: {
-        type: Boolean,
-        default: false
-    }, size: {
+    }, singleColumn: Boolean, size: {
         type: String,
         default: 'medium'
     } });

package/es/tabs/src/Tab.js

@@ -11,7 +11,7 @@ export default defineComponent({
         addable: Boolean
     }, tabPaneProps),
     setup(props) {
-        const { mergedClsPrefixRef, valueRef, typeRef, closableRef, tabStyleRef, handleAdd, handleTabClick, handleClose
+        const { mergedClsPrefixRef, valueRef, typeRef, closableRef, tabStyleRef, nextTabNameRef, onBeforeLeaveRef, handleAdd, handleTabClick, handleClose
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(tabsInjectionKey);
         return {
@@ -40,7 +40,23 @@ export default defineComponent({
                     handleAdd();
                     return;
                 }
-                handleTabClick(props.name);
+                const { name: nameProp } = props;
+                if (nameProp !== valueRef.value) {
+                    if (nameProp === nextTabNameRef.value)
+                        return;
+                    nextTabNameRef.value = nameProp;
+                    const { value: onBeforeLeave } = onBeforeLeaveRef;
+                    if (!onBeforeLeave) {
+                        handleTabClick(nameProp);
+                    }
+                    else {
+                        void Promise.resolve(onBeforeLeave(props.name, valueRef.value)).then((allowLeave) => {
+                            if (allowLeave) {
+                                handleTabClick(nameProp);
+                            }
+                        });
+                    }
+                }
             }
         };
     },

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

@@ -2,7 +2,7 @@
 import { PropType, CSSProperties, ComponentPublicInstance, nextTick } from 'vue';
 import { VXScrollInst } from 'vueuc';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import { Addable, OnClose, TabsType } from './interface';
+import { Addable, OnClose, OnBeforeLeave, TabsType } from './interface';
 import type { OnUpdateValue } from './interface';
 declare const tabsProps: {
     readonly value: PropType<string | number>;
@@ -24,6 +24,7 @@ declare const tabsProps: {
         readonly type: NumberConstructor;
         readonly default: 0;
     };
+    readonly onBeforeLeave: PropType<OnBeforeLeave>;
     readonly onAdd: PropType<() => void>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -239,6 +240,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 0;
     };
+    readonly onBeforeLeave: PropType<OnBeforeLeave>;
     readonly onAdd: PropType<() => void>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -521,6 +523,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly paneStyle?: unknown;
     readonly addable?: unknown;
     readonly tabsPadding?: unknown;
+    readonly onBeforeLeave?: unknown;
     readonly onAdd?: unknown;
     readonly 'onUpdate:value'?: unknown;
     readonly onUpdateValue?: unknown;
@@ -539,6 +542,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     value?: string | number | undefined;
     justifyContent?: "space-around" | "space-between" | "space-evenly" | undefined;
+    onBeforeLeave?: OnBeforeLeave | undefined;
     theme?: import("../../_mixins").Theme<"Tabs", {
         colorSegment: string;
         tabFontSizeCard: string;

package/es/tabs/src/Tabs.js

@@ -17,7 +17,7 @@ const tabsProps = Object.assign(Object.assign({}, useTheme.props), { value: [Str
     }, tabStyle: [String, Object], paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
         type: Number,
         default: 0
-    }, onAdd: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onClose: [Function, Array], 
+    }, onBeforeLeave: Function, onAdd: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onClose: [Function, Array], 
     // deprecated
     labelSize: String, activeName: [String, Number], onActiveNameChange: [Function, Array] });
 export default defineComponent({
@@ -53,6 +53,7 @@ export default defineComponent({
             ? flatten(slots.default())[0].props.name
             : null));
         const mergedValueRef = useMergedState(compitableValueRef, uncontrolledValueRef);
+        const nextTabNameRef = { value: mergedValueRef.value };
         const tabWrapperStyleRef = computed(() => {
             if (!props.justifyContent || props.type === 'card')
                 return undefined;
@@ -195,6 +196,8 @@ export default defineComponent({
             typeRef: toRef(props, 'type'),
             closableRef: toRef(props, 'closable'),
             valueRef: mergedValueRef,
+            nextTabNameRef,
+            onBeforeLeaveRef: toRef(props, 'onBeforeLeave'),
             handleTabClick,
             handleClose,
             handleAdd

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

@@ -4,6 +4,8 @@ export declare type OnUpdateValue = (value: string & number) => void;
 export declare type OnUpdateValueImpl = (value: string | number) => void;
 export declare type OnClose = (name: string & number) => void;
 export declare type OnCloseImpl = (name: string | number) => void;
+export declare type OnBeforeLeave = (name: string & number, oldName: string & number & null) => boolean | Promise<boolean>;
+export declare type OnBeforeLeaveImpl = (name: string | number, oldName: string | number | null) => boolean | Promise<boolean>;
 export interface TabsInjection {
     mergedClsPrefixRef: Ref<string>;
     valueRef: Ref<string | number | null>;
@@ -11,6 +13,10 @@ export interface TabsInjection {
     closableRef: Ref<boolean>;
     tabStyleRef: Ref<string | CSSProperties | undefined>;
     paneStyleRef: Ref<string | CSSProperties | undefined>;
+    nextTabNameRef: {
+        value: string | number | null;
+    };
+    onBeforeLeaveRef: Ref<OnBeforeLeave | undefined>;
     handleTabClick: (panelName: string | number) => void;
     handleClose: (panelName: string | number) => void;
     handleAdd: () => void;

package/es/time-picker/src/Panel.d.ts

@@ -1,6 +1,5 @@
 import { PropType } from 'vue';
-import { IsHourDisabled, IsMinuteDisabled, IsSecondDisabled } from './interface';
-import { Item } from './PanelCol';
+import { IsHourDisabled, IsMinuteDisabled, IsSecondDisabled, ItemValue, Item } from './interface';
 import { MaybeArray } from '../../_utils';
 declare const _default: import("vue").DefineComponent<{
     actions: {
@@ -26,6 +25,7 @@ declare const _default: import("vue").DefineComponent<{
     isHourInvalid: BooleanConstructor;
     isMinuteInvalid: BooleanConstructor;
     isSecondInvalid: BooleanConstructor;
+    isAmPmInvalid: BooleanConstructor;
     isValueInvalid: BooleanConstructor;
     hourValue: {
         type: PropType<number | null>;
@@ -39,19 +39,27 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<number | null>;
         default: null;
     };
+    amPmValue: {
+        type: PropType<"am" | "pm" | null>;
+        default: null;
+    };
     isHourDisabled: PropType<IsHourDisabled>;
     isMinuteDisabled: PropType<IsMinuteDisabled>;
     isSecondDisabled: PropType<IsSecondDisabled>;
     onHourClick: {
-        type: PropType<(value: number) => void>;
+        type: PropType<(value: ItemValue) => void>;
         required: boolean;
     };
     onMinuteClick: {
-        type: PropType<(value: number) => void>;
+        type: PropType<(value: ItemValue) => void>;
         required: boolean;
     };
     onSecondClick: {
-        type: PropType<(value: number) => void>;
+        type: PropType<(value: ItemValue) => void>;
+        required: boolean;
+    };
+    onAmPmClick: {
+        type: PropType<(value: ItemValue) => void>;
         required: boolean;
     };
     onNowClick: PropType<() => void>;
@@ -66,6 +74,7 @@ declare const _default: import("vue").DefineComponent<{
     hours: PropType<MaybeArray<number>>;
     minutes: PropType<MaybeArray<number>>;
     seconds: PropType<MaybeArray<number>>;
+    use12Hours: BooleanConstructor;
 }, {
     mergedTheme: import("vue").Ref<{
         common: {
@@ -467,9 +476,11 @@ declare const _default: import("vue").DefineComponent<{
     hours: import("vue").ComputedRef<Item[]>;
     minutes: import("vue").ComputedRef<Item[]>;
     seconds: import("vue").ComputedRef<Item[]>;
+    amPm: import("vue").ComputedRef<Item[]>;
     hourScrollRef: import("vue").Ref<null>;
     minuteScrollRef: import("vue").Ref<null>;
     secondScrollRef: import("vue").Ref<null>;
+    amPmScrollRef: import("vue").Ref<null>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     actions?: unknown;
     showHour?: unknown;
@@ -479,16 +490,19 @@ declare const _default: import("vue").DefineComponent<{
     isHourInvalid?: unknown;
     isMinuteInvalid?: unknown;
     isSecondInvalid?: unknown;
+    isAmPmInvalid?: unknown;
     isValueInvalid?: unknown;
     hourValue?: unknown;
     minuteValue?: unknown;
     secondValue?: unknown;
+    amPmValue?: unknown;
     isHourDisabled?: unknown;
     isMinuteDisabled?: unknown;
     isSecondDisabled?: unknown;
     onHourClick?: unknown;
     onMinuteClick?: unknown;
     onSecondClick?: unknown;
+    onAmPmClick?: unknown;
     onNowClick?: unknown;
     nowText?: unknown;
     confirmText?: unknown;
@@ -501,6 +515,7 @@ declare const _default: import("vue").DefineComponent<{
     hours?: unknown;
     minutes?: unknown;
     seconds?: unknown;
+    use12Hours?: unknown;
 } & {
     transitionDisabled: boolean;
     actions: ("confirm" | "now")[];
@@ -511,10 +526,13 @@ declare const _default: import("vue").DefineComponent<{
     isHourInvalid: boolean;
     isMinuteInvalid: boolean;
     isSecondInvalid: boolean;
+    isAmPmInvalid: boolean;
     isValueInvalid: boolean;
     hourValue: number | null;
     minuteValue: number | null;
     secondValue: number | null;
+    amPmValue: "am" | "pm" | null;
+    use12Hours: boolean;
 } & {
     onFocusin?: ((e: FocusEvent) => void) | undefined;
     onFocusout?: ((e: FocusEvent) => void) | undefined;
@@ -525,9 +543,10 @@ declare const _default: import("vue").DefineComponent<{
     isHourDisabled?: IsHourDisabled | undefined;
     isMinuteDisabled?: IsMinuteDisabled | undefined;
     isSecondDisabled?: IsSecondDisabled | undefined;
-    onHourClick?: ((value: number) => void) | undefined;
-    onMinuteClick?: ((value: number) => void) | undefined;
-    onSecondClick?: ((value: number) => void) | undefined;
+    onHourClick?: ((value: ItemValue) => void) | undefined;
+    onMinuteClick?: ((value: ItemValue) => void) | undefined;
+    onSecondClick?: ((value: ItemValue) => void) | undefined;
+    onAmPmClick?: ((value: ItemValue) => void) | undefined;
     onNowClick?: (() => void) | undefined;
     nowText?: string | undefined;
     confirmText?: string | undefined;
@@ -543,9 +562,12 @@ declare const _default: import("vue").DefineComponent<{
     isHourInvalid: boolean;
     isMinuteInvalid: boolean;
     isSecondInvalid: boolean;
+    isAmPmInvalid: boolean;
     isValueInvalid: boolean;
     hourValue: number | null;
     minuteValue: number | null;
     secondValue: number | null;
+    amPmValue: "am" | "pm" | null;
+    use12Hours: boolean;
 }>;
 export default _default;

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

@@ -1,7 +1,7 @@
 import { h, ref, defineComponent, inject, computed } from 'vue';
 import { NScrollbar, NBaseFocusDetector } from '../../_internal';
 import { NButton } from '../../button';
-import { getTimeUnits, time } from './utils';
+import { getTimeUnits, time, getAmPm } from './utils';
 import { timePickerInjectionKey } from './interface';
 import PanelCol from './PanelCol';
 const timePickerPanelProps = {
@@ -28,6 +28,7 @@ const timePickerPanelProps = {
     isHourInvalid: Boolean,
     isMinuteInvalid: Boolean,
     isSecondInvalid: Boolean,
+    isAmPmInvalid: Boolean,
     isValueInvalid: Boolean,
     hourValue: {
         type: Number,
@@ -41,6 +42,10 @@ const timePickerPanelProps = {
         type: Number,
         default: null
     },
+    amPmValue: {
+        type: String,
+        default: null
+    },
     isHourDisabled: Function,
     isMinuteDisabled: Function,
     isSecondDisabled: Function,
@@ -56,6 +61,10 @@ const timePickerPanelProps = {
         type: Function,
         required: true
     },
+    onAmPmClick: {
+        type: Function,
+        required: true
+    },
     onNowClick: Function,
     nowText: String,
     confirmText: String,
@@ -67,7 +76,8 @@ const timePickerPanelProps = {
     onKeydown: Function,
     hours: [Number, Array],
     minutes: [Number, Array],
-    seconds: [Number, Array]
+    seconds: [Number, Array],
+    use12Hours: Boolean
 };
 export default defineComponent({
     name: 'TimePickerPanel',
@@ -77,19 +87,39 @@ export default defineComponent({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(timePickerInjectionKey);
         const hoursRef = computed(() => {
-            const { isHourDisabled, hours } = props;
-            return getTimeUnits(time.hours, hours).map((hour) => {
-                return {
-                    value: hour,
-                    disabled: isHourDisabled ? isHourDisabled(Number(hour)) : false
-                };
-            });
+            const { isHourDisabled, hours, use12Hours, amPmValue } = props;
+            if (!use12Hours) {
+                return getTimeUnits(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 : getAmPm(Date.now());
+                return getTimeUnits(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 = computed(() => {
             const { isMinuteDisabled, minutes } = props;
             return getTimeUnits(time.minutes, minutes).map((minute) => {
                 return {
-                    value: minute,
+                    label: minute,
+                    value: Number(minute),
                     disabled: isMinuteDisabled
                         ? isMinuteDisabled(Number(minute), props.hourValue)
                         : false
@@ -100,41 +130,67 @@ export default defineComponent({
             const { isSecondDisabled, seconds } = props;
             return getTimeUnits(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 = 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: ref(null),
             minuteScrollRef: ref(null),
-            secondScrollRef: ref(null)
+            secondScrollRef: ref(null),
+            amPmScrollRef: ref(null)
         };
     },
     render() {
         var _a, _b;
         const { mergedClsPrefix, mergedTheme } = this;
-        return h('div', {
-            tabindex: 0,
-            class: `${mergedClsPrefix}-time-picker-panel`,
-            onFocusin: this.onFocusin,
-            onFocusout: this.onFocusout,
-            onKeydown: this.onKeydown
-        }, [
+        return (h("div", { tabindex: 0, class: `${mergedClsPrefix}-time-picker-panel`, onFocusin: this.onFocusin, onFocusout: this.onFocusout, onKeydown: this.onKeydown },
             h("div", { class: `${mergedClsPrefix}-time-picker-cols` },
                 this.showHour ? (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`
                     ] },
                     h(NScrollbar, { ref: "hourScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                         default: () => [
@@ -144,10 +200,10 @@ export default defineComponent({
                     }))) : null,
                 this.showMinute ? (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`
                     ] },
                     h(NScrollbar, { ref: "minuteScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                         default: () => [
@@ -157,21 +213,33 @@ export default defineComponent({
                     }))) : null,
                 this.showSecond ? (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`
                     ] },
                     h(NScrollbar, { ref: "secondScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                         default: () => [
                             h(PanelCol, { clsPrefix: mergedClsPrefix, data: this.seconds, activeValue: this.secondValue, onItemClick: this.onSecondClick }),
                             h("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
                         ]
+                    }))) : null,
+                this.use12Hours ? (h("div", { class: [
+                        `${mergedClsPrefix}-time-picker-col`,
+                        this.isAmPmInvalid &&
+                            `${mergedClsPrefix}-time-picker-col--invalid`,
+                        this.transitionDisabled &&
+                            `${mergedClsPrefix}-time-picker-col--transition-disabled`
+                    ] },
+                    h(NScrollbar, { ref: "amPmScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
+                        default: () => [
+                            h(PanelCol, { clsPrefix: mergedClsPrefix, data: this.amPm, activeValue: this.amPmValue, onItemClick: this.onAmPmClick }),
+                            h("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
+                        ]
                     }))) : null),
             h("div", { class: `${mergedClsPrefix}-time-picker-actions` },
                 ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.includes('now')) ? (h(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')) ? (h(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),
-            h(NBaseFocusDetector, { onFocus: this.onFocusDetectorFocus })
-        ]);
+            h(NBaseFocusDetector, { onFocus: this.onFocusDetectorFocus })));
     }
 });

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