naive-ui 2.18.0 → 2.19.1

package/es/dialog/src/Dialog.d.ts

@@ -20,14 +20,8 @@ declare const dialogProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly loading: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    readonly bordered: {
-        readonly type: BooleanConstructor;
-        readonly default: boolean;
-    };
+    readonly loading: BooleanConstructor;
+    readonly bordered: BooleanConstructor;
     readonly iconPlacement: PropType<IconPlacement>;
     readonly onPositiveClick: PropType<(e: MouseEvent) => void>;
     readonly onNegativeClick: PropType<(e: MouseEvent) => void>;
@@ -55,14 +49,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    loading: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    bordered: {
-        readonly type: BooleanConstructor;
-        readonly default: boolean;
-    };
+    loading: BooleanConstructor;
+    bordered: BooleanConstructor;
     iconPlacement: PropType<IconPlacement>;
     onPositiveClick: PropType<(e: MouseEvent) => void>;
     onNegativeClick: PropType<(e: MouseEvent) => void>;

package/es/dialog/src/Dialog.js

@@ -33,14 +33,8 @@ const dialogProps = {
         type: Boolean,
         default: true
     },
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    bordered: {
-        type: Boolean,
-        default: false
-    },
+    loading: Boolean,
+    bordered: Boolean,
     iconPlacement: String,
     onPositiveClick: Function,
     onNegativeClick: Function,

package/es/dialog/src/DialogEnvironment.d.ts

@@ -1,40 +1,35 @@
-import { PropType } from 'vue';
+import { PropType, CSSProperties } from 'vue';
 export declare const exposedDialogEnvProps: {
-    maskClosable: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly internalStyle: PropType<string | CSSProperties>;
+    readonly maskClosable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
-    onPositiveClick: PropType<(e: MouseEvent) => Promise<boolean> | boolean | unknown>;
-    onNegativeClick: PropType<(e: MouseEvent) => Promise<boolean> | boolean | unknown>;
-    onClose: PropType<() => Promise<boolean> | boolean | unknown>;
-    onMaskClick: PropType<(e: MouseEvent) => void>;
-    icon: PropType<() => import("vue").VNodeChild>;
-    type: {
+    readonly onPositiveClick: PropType<(e: MouseEvent) => Promise<unknown> | unknown>;
+    readonly onNegativeClick: PropType<(e: MouseEvent) => Promise<unknown> | unknown>;
+    readonly onClose: PropType<() => Promise<unknown> | unknown>;
+    readonly onMaskClick: PropType<(e: MouseEvent) => void>;
+    readonly icon: PropType<() => import("vue").VNodeChild>;
+    readonly type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
-    title: PropType<string | (() => import("vue").VNodeChild)>;
-    closable: {
+    readonly title: PropType<string | (() => import("vue").VNodeChild)>;
+    readonly closable: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    negativeText: StringConstructor;
-    positiveText: StringConstructor;
-    content: PropType<string | (() => import("vue").VNodeChild)>;
-    action: PropType<() => import("vue").VNodeChild>;
-    showIcon: {
+    readonly negativeText: StringConstructor;
+    readonly positiveText: StringConstructor;
+    readonly content: PropType<string | (() => import("vue").VNodeChild)>;
+    readonly action: PropType<() => import("vue").VNodeChild>;
+    readonly showIcon: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    loading: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    bordered: {
-        readonly type: BooleanConstructor;
-        readonly default: boolean;
-    };
-    iconPlacement: PropType<import("./interface").IconPlacement>;
+    readonly loading: BooleanConstructor;
+    readonly bordered: BooleanConstructor;
+    readonly iconPlacement: PropType<import("./interface").IconPlacement>;
 };
 declare const _default: import("vue").DefineComponent<{
     internalKey: {
@@ -46,9 +41,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(key: string) => void>;
         required: true;
     };
+    internalStyle: PropType<string | CSSProperties>;
     maskClosable: {
-        type: BooleanConstructor;
-        default: boolean;
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
     onPositiveClick: PropType<(e: MouseEvent) => unknown>;
     onNegativeClick: PropType<(e: MouseEvent) => unknown>;
@@ -72,14 +68,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    loading: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    bordered: {
-        readonly type: BooleanConstructor;
-        readonly default: boolean;
-    };
+    loading: BooleanConstructor;
+    bordered: BooleanConstructor;
     iconPlacement: PropType<import("./interface").IconPlacement>;
 }, {
     show: import("vue").Ref<boolean>;
@@ -94,6 +84,7 @@ declare const _default: import("vue").DefineComponent<{
     internalKey?: unknown;
     to?: unknown;
     onInternalAfterLeave?: unknown;
+    internalStyle?: unknown;
     maskClosable?: unknown;
     onPositiveClick?: unknown;
     onNegativeClick?: unknown;
@@ -133,6 +124,7 @@ declare const _default: import("vue").DefineComponent<{
     onPositiveClick?: ((e: MouseEvent) => unknown) | undefined;
     onNegativeClick?: ((e: MouseEvent) => unknown) | undefined;
     onMaskClick?: ((e: MouseEvent) => void) | undefined;
+    internalStyle?: string | CSSProperties | undefined;
 }>, {
     type: "default" | "error" | "info" | "success" | "warning";
     bordered: boolean;

package/es/dialog/src/DialogEnvironment.js

@@ -4,7 +4,7 @@ import { h, defineComponent, ref } from 'vue';
 import NModal from '../../modal/src/Modal';
 import { keep } from '../../_utils';
 import NDialog, { dialogProps, dialogPropKeys } from './Dialog';
-export const exposedDialogEnvProps = Object.assign(Object.assign({}, dialogProps), { maskClosable: {
+export const exposedDialogEnvProps = Object.assign(Object.assign({}, dialogProps), { internalStyle: [String, Object], maskClosable: {
         type: Boolean,
         default: true
     }, onPositiveClick: Function, onNegativeClick: Function, onClose: Function, onMaskClick: Function });
@@ -90,7 +90,7 @@ export default defineComponent({
     render() {
         const { handlePositiveClick, handleUpdateShow, handleNegativeClick, handleCloseClick, handleAfterLeave, handleMaskClick, to, maskClosable, show } = this;
         return (h(NModal, { show: show, onUpdateShow: handleUpdateShow, onMaskClick: handleMaskClick, appear: true, dialog: true, to: to, maskClosable: maskClosable, onAfterLeave: handleAfterLeave }, {
-            default: () => (h(NDialog, Object.assign({}, keep(this.$props, dialogPropKeys), { onClose: handleCloseClick, onNegativeClick: handleNegativeClick, onPositiveClick: handlePositiveClick })))
+            default: () => (h(NDialog, Object.assign({}, keep(this.$props, dialogPropKeys), { style: this.internalStyle, onClose: handleCloseClick, onNegativeClick: handleNegativeClick, onPositiveClick: handlePositiveClick })))
         }));
     }
 });

package/es/dialog/src/DialogProvider.d.ts

@@ -1,7 +1,9 @@
-import { ExtractPropTypes, PropType, InjectionKey, Ref } from 'vue';
-import type { ExtractPublicPropTypes } from '../../_utils';
+import { ExtractPropTypes, PropType, InjectionKey, Ref, CSSProperties } from 'vue';
+import type { ExtractPublicPropTypes, Mutable } from '../../_utils';
 import { exposedDialogEnvProps } from './DialogEnvironment';
-export declare type DialogOptions = Partial<ExtractPropTypes<typeof exposedDialogEnvProps>>;
+export declare type DialogOptions = Mutable<Omit<Partial<ExtractPropTypes<typeof exposedDialogEnvProps>>, 'internalStyle'> & {
+    style?: string | CSSProperties;
+}>;
 export declare type DialogReactive = {
     readonly key: string;
     readonly destroy: () => void;
@@ -39,23 +41,24 @@ declare const _default: import("vue").DefineComponent<{
     dialogList: Ref<{
         readonly key: string;
         readonly destroy: () => void;
-        maskClosable?: boolean | undefined;
-        onPositiveClick?: ((e: MouseEvent) => unknown) | undefined;
-        onNegativeClick?: ((e: MouseEvent) => unknown) | undefined;
-        onClose?: (() => unknown) | undefined;
-        onMaskClick?: ((e: MouseEvent) => void) | undefined;
-        icon?: (() => import("vue").VNodeChild) | undefined;
         type?: "default" | "error" | "info" | "success" | "warning" | undefined;
-        title?: string | (() => import("vue").VNodeChild) | undefined;
-        closable?: boolean | undefined;
-        negativeText?: string | undefined;
-        positiveText?: string | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;
+        icon?: (() => import("vue").VNodeChild) | undefined;
+        title?: string | (() => import("vue").VNodeChild) | undefined;
         action?: (() => import("vue").VNodeChild) | undefined;
-        showIcon?: boolean | undefined;
-        loading?: boolean | undefined;
         bordered?: boolean | undefined;
+        loading?: boolean | undefined;
+        onClose?: (() => unknown) | undefined;
+        closable?: boolean | undefined;
+        showIcon?: boolean | undefined;
         iconPlacement?: import("./interface").IconPlacement | undefined;
+        negativeText?: string | undefined;
+        positiveText?: string | undefined;
+        onPositiveClick?: ((e: MouseEvent) => unknown) | undefined;
+        onNegativeClick?: ((e: MouseEvent) => unknown) | undefined;
+        onMaskClick?: ((e: MouseEvent) => void) | undefined;
+        maskClosable?: boolean | undefined;
+        style?: any;
     }[]>;
     dialogInstRefs: Record<string, DialogInst>;
     handleAfterLeave: (key: String) => void;

package/es/dialog/src/DialogProvider.js

@@ -52,7 +52,8 @@ export default defineComponent({
     render() {
         var _a, _b;
         return h(Fragment, null, [
-            this.dialogList.map((dialog) => h(DialogEnvironment, omit(dialog, ['destroy'], {
+            this.dialogList.map((dialog) => h(DialogEnvironment, omit(dialog, ['destroy', 'style'], {
+                internalStyle: dialog.style,
                 to: this.to,
                 ref: ((inst) => {
                     if (inst === null) {

package/es/dropdown/src/Dropdown.d.ts

@@ -297,16 +297,9 @@ declare const dropdownProps: {
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
-    readonly onShow: {
-        type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
-    readonly onHide: {
-        type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    readonly zIndex: NumberConstructor;
+    readonly onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
+    readonly onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly arrow: {
         type: PropType<boolean | undefined>;
         default: undefined;
@@ -595,16 +588,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
-    readonly onShow: {
-        type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
-    readonly onHide: {
-        type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    readonly zIndex: NumberConstructor;
+    readonly onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
+    readonly onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly arrow: {
         type: PropType<boolean | undefined>;
         default: undefined;
@@ -830,6 +816,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onClickoutside?: unknown;
     readonly 'onUpdate:show'?: unknown;
     readonly onUpdateShow?: unknown;
+    readonly zIndex?: unknown;
     readonly onShow?: unknown;
     readonly onHide?: unknown;
     readonly arrow?: unknown;
@@ -861,6 +848,7 @@ declare const _default: import("vue").DefineComponent<{
     maxWidth?: number | undefined;
     minWidth?: number | undefined;
     width?: number | "trigger" | undefined;
+    zIndex?: number | undefined;
     onSelect?: MaybeArray<OnUpdateValue> | undefined;
     theme?: import("../../_mixins").Theme<"Dropdown", {
         optionHeightSmall: string;
@@ -1072,6 +1060,7 @@ declare const _default: import("vue").DefineComponent<{
             padding: string;
         }, any>;
     }>> | undefined;
+    renderIcon?: RenderIcon | undefined;
     renderLabel?: RenderLabel | undefined;
     arrowStyle?: string | CSSProperties | undefined;
     onClickoutside?: ((e: MouseEvent) => void) | undefined;
@@ -1081,7 +1070,6 @@ declare const _default: import("vue").DefineComponent<{
     onShow?: MaybeArray<(value: boolean) => void> | undefined;
     onHide?: MaybeArray<(value: boolean) => void> | undefined;
     arrow?: boolean | undefined;
-    renderIcon?: RenderIcon | undefined;
 }>, {
     size: "small" | "medium" | "large" | "huge";
     show: boolean | undefined;
@@ -1099,8 +1087,6 @@ declare const _default: import("vue").DefineComponent<{
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
-    onShow: MaybeArray<(value: boolean) => void> | undefined;
-    onHide: MaybeArray<(value: boolean) => void> | undefined;
     arrow: boolean | undefined;
     options: DropdownMixedOption[];
     keyboard: boolean;

package/es/dynamic-tags/src/DynamicTags.js

@@ -52,7 +52,8 @@ export default defineComponent({
             return smallerSize(props.size);
         });
         const triggerDisabledRef = computed(() => {
-            return !!props.max && mergedValueRef.value.length >= props.max;
+            return (mergedDisabledRef.value ||
+                (!!props.max && mergedValueRef.value.length >= props.max));
         });
         function doChange(value) {
             const { onChange, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;

package/es/empty/src/Empty.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, VNodeChild } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
 declare const emptyProps: {
     description: {
@@ -13,6 +13,7 @@ declare const emptyProps: {
         type: PropType<"small" | "medium" | "large" | "huge">;
         default: string;
     };
+    renderIcon: PropType<() => VNodeChild>;
     theme: PropType<import("../../_mixins").Theme<"Empty", {
         fontSizeSmall: string;
         fontSizeMedium: string;
@@ -67,6 +68,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"small" | "medium" | "large" | "huge">;
         default: string;
     };
+    renderIcon: PropType<() => VNodeChild>;
     theme: PropType<import("../../_mixins").Theme<"Empty", {
         fontSizeSmall: string;
         fontSizeMedium: string;
@@ -108,6 +110,7 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedRenderIcon: import("vue").ComputedRef<() => VNodeChild>;
     localizedDescription: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
         '--icon-size': string;
@@ -121,6 +124,7 @@ declare const _default: import("vue").DefineComponent<{
     description?: unknown;
     showDescription?: unknown;
     size?: unknown;
+    renderIcon?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
@@ -168,6 +172,7 @@ declare const _default: import("vue").DefineComponent<{
         iconSizeLarge: string;
         iconSizeHuge: string;
     }, any>> | undefined;
+    renderIcon?: (() => VNodeChild) | undefined;
 }>, {
     description: string;
     size: "small" | "medium" | "large" | "huge";

package/es/empty/src/Empty.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, computed, renderSlot } from 'vue';
+import { h, defineComponent, computed, renderSlot, inject } from 'vue';
 import { EmptyIcon } from '../../_internal/icons';
 import { useConfig, useLocale, useTheme } from '../../_mixins';
 import { createKey } from '../../_utils';
 import { NBaseIcon } from '../../_internal';
 import { emptyLight } from '../styles';
 import style from './styles/index.cssr';
+import { configProviderInjectionKey } from '../../config-provider/src/ConfigProvider';
 const emptyProps = Object.assign(Object.assign({}, useTheme.props), { description: {
         type: String,
         default: undefined
@@ -14,7 +15,7 @@ const emptyProps = Object.assign(Object.assign({}, useTheme.props), { descriptio
     }, size: {
         type: String,
         default: 'medium'
-    } });
+    }, renderIcon: Function });
 export default defineComponent({
     name: 'Empty',
     props: emptyProps,
@@ -22,10 +23,21 @@ export default defineComponent({
         const { mergedClsPrefixRef } = useConfig(props);
         const themeRef = useTheme('Empty', 'Empty', style, emptyLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Empty');
+        const NConfigProvider = inject(configProviderInjectionKey, null);
+        const mergedDescriptionRef = computed(() => {
+            var _a, _b, _c;
+            return ((_a = props.description) !== null && _a !== void 0 ? _a : (_c = (_b = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _b === void 0 ? void 0 : _b.Empty) === null || _c === void 0 ? void 0 : _c.description);
+        });
+        const mergedRenderIconRef = computed(() => {
+            var _a, _b;
+            return ((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Empty) === null || _b === void 0 ? void 0 : _b.renderIcon) ||
+                (() => h(EmptyIcon, null));
+        });
         return {
             mergedClsPrefix: mergedClsPrefixRef,
+            mergedRenderIcon: mergedRenderIconRef,
             localizedDescription: computed(() => {
-                return props.description || localeRef.value.description;
+                return mergedDescriptionRef.value || localeRef.value.description;
             }),
             cssVars: computed(() => {
                 const { size } = props;
@@ -45,7 +57,7 @@ export default defineComponent({
         const { $slots, mergedClsPrefix } = this;
         return (h("div", { class: `${mergedClsPrefix}-empty`, style: this.cssVars },
             h("div", { class: `${mergedClsPrefix}-empty__icon` }, renderSlot($slots, 'icon', undefined, () => [
-                h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(EmptyIcon, null) })
+                h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })
             ])),
             this.showDescription ? (h("div", { class: `${mergedClsPrefix}-empty__description` }, renderSlot($slots, 'default', undefined, () => [
                 this.localizedDescription

package/es/form/src/FormItemGridItem.d.ts

@@ -137,7 +137,7 @@ export declare const formItemGiProps: {
         readonly default: true;
     };
 };
-export declare const formItemGiPropKeys: ("label" | "size" | "first" | "offset" | "span" | "required" | "path" | "suffix" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelPlacement" | "labelAlign" | "labelStyle" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "privateColStart" | "privateShow" | "privateSpan" | "privateOffset")[];
+export declare const formItemGiPropKeys: ("label" | "size" | "first" | "offset" | "span" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "suffix" | "labelPlacement" | "labelAlign" | "labelStyle" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "privateColStart" | "privateShow" | "privateSpan" | "privateOffset")[];
 export declare type FormItemGiProps = ExtractPublicPropTypes<typeof formItemGiProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly label: StringConstructor;

package/es/form/src/FormItemGridItem.js

@@ -9,7 +9,7 @@ export default defineComponent({
     name: 'FormItemGridItem',
     alias: ['FormItemGi'],
     props: formItemGiProps,
-    setup(props) {
+    setup() {
         const formItemInstRef = ref(null);
         const validate = ((...args) => {
             const { value } = formItemInstRef;
@@ -29,7 +29,7 @@ export default defineComponent({
         };
     },
     render() {
-        return h(NGridItem, keep(this.$props, gridItemPropKeys), {
+        return h(NGridItem, keep(this.$.vnode.props || {}, gridItemPropKeys), {
             default: () => {
                 const itemProps = keep(this.$props, formItemPropKeys);
                 return h(NFormItem, Object.assign({ ref: 'formItemInstRef' }, itemProps), this.$slots);

package/es/grid/src/GridItem.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, PropType } from 'vue';
+import { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export declare const defaultSpan = 1;
 export declare const gridItemProps: {
@@ -40,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     overflow: import("vue").Ref<boolean>;
-    itemStyle: import("vue").Ref<string | CSSProperties | undefined>;
+    itemStyle: import("vue").Ref<string | import("vue").CSSProperties | undefined>;
     deriveStyle: () => {
         display: string;
         gridColumn: string;

package/es/grid/src/GridItem.js

@@ -28,7 +28,7 @@ export default defineComponent({
     name: 'GridItem',
     alias: ['Gi'],
     props: gridItemProps,
-    setup(props) {
+    setup() {
         const { xGapRef, itemStyleRef, overflowRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(gridInjectionKey);

package/es/input-number/src/InputNumber.d.ts

@@ -28,6 +28,7 @@ declare const inputNumberProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: BooleanConstructor;
     clearable: BooleanConstructor;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -845,6 +846,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: BooleanConstructor;
     clearable: BooleanConstructor;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -2063,6 +2065,7 @@ declare const _default: import("vue").DefineComponent<{
     validator?: unknown;
     bordered?: unknown;
     showButton?: unknown;
+    readonly?: unknown;
     clearable?: unknown;
     'onUpdate:value'?: unknown;
     onUpdateValue?: unknown;
@@ -2074,6 +2077,7 @@ declare const _default: import("vue").DefineComponent<{
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
 } & {
+    readonly: boolean;
     step: string | number;
     clearable: boolean;
     defaultValue: number | null;
@@ -2871,6 +2875,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
 }>, {
+    readonly: boolean;
     disabled: boolean | undefined;
     step: string | number;
     onChange: MaybeArray<OnUpdateValue> | undefined;

package/es/input-number/src/InputNumber.js

@@ -25,7 +25,7 @@ const inputNumberProps = Object.assign(Object.assign({}, useTheme.props), { plac
     }, showButton: {
         type: Boolean,
         default: true
-    }, clearable: Boolean, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], 
+    }, readonly: Boolean, clearable: Boolean, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], 
     // deprecated
     onChange: {
         type: [Function, Array],
@@ -55,13 +55,13 @@ export default defineComponent({
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
         const displayedValueRef = ref('');
-        const precisionRef = computed(() => {
-            const precisions = [props.min, props.max, props.step].map((item) => {
+        const getMaxPrecision = (currentValue) => {
+            const precisions = [props.min, props.max, props.step, currentValue].map((item) => {
                 const fraction = String(item).split('.')[1];
                 return fraction ? fraction.length : 0;
             });
             return Math.max(...precisions);
-        });
+        };
         const mergedPlaceholderRef = useMemo(() => {
             const { placeholder } = props;
             if (placeholder !== undefined)
@@ -114,7 +114,8 @@ export default defineComponent({
                 return null;
             }
             if (validator(parsedValue)) {
-                let nextValue = parseFloat((parsedValue + offset).toFixed(precisionRef.value));
+                const precision = getMaxPrecision(parsedValue);
+                let nextValue = parseFloat((parsedValue + offset).toFixed(precision));
                 if (validator(nextValue)) {
                     const { value: mergedMax } = mergedMaxRef;
                     const { value: mergedMin } = mergedMinRef;
@@ -355,18 +356,18 @@ export default defineComponent({
     render() {
         const { mergedClsPrefix } = this;
         return (h("div", { class: `${mergedClsPrefix}-input-number` },
-            h(NInput, { ref: "inputInstRef", bordered: this.mergedBordered, value: this.displayedValue, onUpdateValue: this.handleUpdateDisplayedValue, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, builtinThemeOverrides: this.inputThemeOverrides, size: this.mergedSize, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, textDecoration: this.displayedValueInvalid ? 'line-through' : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onClear: this.handleClear, clearable: this.clearable }, {
+            h(NInput, { ref: "inputInstRef", bordered: this.mergedBordered, value: this.displayedValue, onUpdateValue: this.handleUpdateDisplayedValue, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, builtinThemeOverrides: this.inputThemeOverrides, size: this.mergedSize, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, readonly: this.readonly, textDecoration: this.displayedValueInvalid ? 'line-through' : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onClear: this.handleClear, clearable: this.clearable }, {
                 _: 2,
                 prefix: this.$slots.prefix,
                 suffix: this.showButton
                     ? () => [
                         this.$slots.suffix && (h("span", { class: `${mergedClsPrefix}-input-number-suffix` }, { default: this.$slots.suffix })),
-                        h(NButton, { text: true, disabled: !this.minusable || this.mergedDisabled, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleMinusClick, ref: "minusButtonInstRef" }, {
+                        h(NButton, { text: true, disabled: !this.minusable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleMinusClick, ref: "minusButtonInstRef" }, {
                             default: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
                                 default: () => h(RemoveIcon, null)
                             }))
                         }),
-                        h(NButton, { text: true, disabled: !this.addable || this.mergedDisabled, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleAddClick, ref: "addButtonInstRef" }, {
+                        h(NButton, { text: true, disabled: !this.addable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleAddClick, ref: "addButtonInstRef" }, {
                             default: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
                                 default: () => h(AddIcon, null)
                             }))