naive-ui 2.18.1 → 2.19.2

package/es/date-picker/src/panel/daterange.js

@@ -1,12 +1,21 @@
-import { defineComponent, h, renderSlot } from 'vue';
+import { defineComponent, h, renderSlot, watchEffect } from 'vue';
 import { NButton, NxButton } from '../../../button';
 import { BackwardIcon, FastBackwardIcon, ForwardIcon, FastForwardIcon } from '../../../_internal/icons';
 import { NBaseFocusDetector } from '../../../_internal';
 import { useDualCalendar } from './use-dual-calendar';
+import { warnOnce } from '../../../_utils';
 export default defineComponent({
     name: 'DateRangePanel',
     props: useDualCalendar.props,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                var _a;
+                if ((_a = props.actions) === null || _a === void 0 ? void 0 : _a.includes('now')) {
+                    warnOnce('date-picker', 'The `now` action is not supported for n-date-picker of `daterange` type');
+                }
+            });
+        }
         return useDualCalendar(props, 'daterange');
     },
     render() {

package/es/date-picker/src/panel/datetimerange.js

@@ -1,14 +1,23 @@
-import { defineComponent, h, renderSlot } from 'vue';
+import { defineComponent, h, renderSlot, watchEffect } from 'vue';
 import { NButton, NxButton } from '../../../button';
 import { NInput } from '../../../input';
 import { NTimePicker } from '../../../time-picker';
 import { BackwardIcon, FastBackwardIcon, ForwardIcon, FastForwardIcon } from '../../../_internal/icons';
 import { NBaseFocusDetector } from '../../../_internal';
 import { useDualCalendar } from './use-dual-calendar';
+import { warnOnce } from '../../../_utils';
 export default defineComponent({
     name: 'DateTimeRangePanel',
     props: useDualCalendar.props,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                var _a;
+                if ((_a = props.actions) === null || _a === void 0 ? void 0 : _a.includes('now')) {
+                    warnOnce('date-picker', 'The `now` action is not supported for n-date-picker of `datetimerange` type');
+                }
+            });
+        }
         return useDualCalendar(props, 'datetimerange');
     },
     render() {

package/es/descriptions/src/Descriptions.d.ts

@@ -6,10 +6,7 @@ declare const descriptionProps: {
         readonly type: NumberConstructor;
         readonly default: 3;
     };
-    readonly columns: {
-        readonly type: NumberConstructor;
-        readonly default: undefined;
-    };
+    readonly columns: NumberConstructor;
     readonly labelPlacement: {
         readonly type: PropType<"left" | "top">;
         readonly default: "top";
@@ -22,10 +19,7 @@ declare const descriptionProps: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
-    readonly bordered: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly bordered: BooleanConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly theme: PropType<import("../../_mixins").Theme<"Descriptions", {
@@ -129,10 +123,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 3;
     };
-    readonly columns: {
-        readonly type: NumberConstructor;
-        readonly default: undefined;
-    };
+    readonly columns: NumberConstructor;
     readonly labelPlacement: {
         readonly type: PropType<"left" | "top">;
         readonly default: "top";
@@ -145,10 +136,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
-    readonly bordered: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly bordered: BooleanConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly theme: PropType<import("../../_mixins").Theme<"Descriptions", {
@@ -387,7 +375,6 @@ declare const _default: import("vue").DefineComponent<{
 }>, {
     column: number;
     size: "small" | "medium" | "large";
-    columns: number;
     bordered: boolean;
     labelPlacement: "left" | "top";
     labelAlign: "left" | "right" | "center";

package/es/descriptions/src/Descriptions.js

@@ -8,10 +8,7 @@ import style from './styles/index.cssr';
 const descriptionProps = Object.assign(Object.assign({}, useTheme.props), { title: String, column: {
         type: Number,
         default: 3
-    }, columns: {
-        type: Number,
-        default: undefined
-    }, labelPlacement: {
+    }, columns: Number, labelPlacement: {
         type: String,
         default: 'top'
     }, labelAlign: {
@@ -20,10 +17,7 @@ const descriptionProps = Object.assign(Object.assign({}, useTheme.props), { titl
     }, size: {
         type: String,
         default: 'medium'
-    }, bordered: {
-        type: Boolean,
-        default: false
-    }, labelStyle: [Object, String], contentStyle: [Object, String] });
+    }, bordered: Boolean, labelStyle: [Object, String], contentStyle: [Object, String] });
 export default defineComponent({
     name: 'Descriptions',
     props: descriptionProps,

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

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

package/es/drawer/src/styles/index.cssr.js

@@ -58,6 +58,7 @@ export default c([cB('drawer', `
  font-size: var(--title-font-size);
  color: var(--title-text-color);
  padding: var(--header-padding);
+ transition: border .3s var(--bezier);
  border-bottom: 1px solid var(--divider-color);
  border-bottom: var(--header-border-bottom);
  display: flex;
@@ -70,6 +71,7 @@ export default c([cB('drawer', `
  display: flex;
  justify-content: flex-end;
  border-top: var(--footer-border-top);
+ transition: border .3s var(--bezier);
  padding: var(--footer-padding);
  `)]), cM('right-placement', `
  top: 0;

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/global-style/src/GlobalStyle.js

@@ -10,6 +10,7 @@ export default defineComponent({
         const { body } = document;
         const { style } = body;
         let styleApplied = false;
+        let firstApply = true;
         onBeforeMount(() => {
             watchEffect(() => {
                 var _a, _b;
@@ -17,14 +18,23 @@ export default defineComponent({
                     ? merge({}, ((_a = NConfigProvider.mergedThemeRef.value) === null || _a === void 0 ? void 0 : _a.common) || commonLight, (_b = NConfigProvider.mergedThemeOverridesRef.value) === null || _b === void 0 ? void 0 : _b.common)
                     : commonLight;
                 if (styleApplied || !body.hasAttribute('n-styled')) {
-                    body.setAttribute('n-styled', '');
-                    styleApplied = true;
                     style.backgroundColor = bodyColor;
                     style.color = textColor2;
                     style.fontSize = fontSize;
                     style.fontFamily = fontFamily;
                     style.lineHeight = lineHeight;
-                    style.transition = `color .3s ${cubicBezierEaseInOut}, background-color .3s ${cubicBezierEaseInOut}`;
+                    const transition = `color .3s ${cubicBezierEaseInOut}, background-color .3s ${cubicBezierEaseInOut}`;
+                    if (firstApply) {
+                        setTimeout(() => {
+                            style.transition = transition;
+                        }, 0);
+                    }
+                    else {
+                        style.transition = transition;
+                    }
+                    body.setAttribute('n-styled', '');
+                    styleApplied = true;
+                    firstApply = false;
                 }
                 else if (process.env.NODE_ENV !== 'production') {
                     warn('global-style', 'More than one n-global-style exist in the document.body. Only the first mounted one will work.');

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

@@ -7,7 +7,7 @@ declare const inputNumberProps: {
         type: PropType<number | null>;
         default: null;
     };
-    value: NumberConstructor;
+    value: PropType<number | null>;
     step: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
@@ -28,6 +28,7 @@ declare const inputNumberProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: BooleanConstructor;
     clearable: BooleanConstructor;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -824,7 +825,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<number | null>;
         default: null;
     };
-    value: NumberConstructor;
+    value: PropType<number | null>;
     step: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
@@ -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,12 +2077,13 @@ declare const _default: import("vue").DefineComponent<{
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
 } & {
+    readonly: boolean;
     step: string | number;
     clearable: boolean;
     defaultValue: number | null;
     showButton: boolean;
 } & {
-    value?: number | undefined;
+    value?: number | null | undefined;
     size?: "small" | "medium" | "large" | undefined;
     disabled?: boolean | undefined;
     onFocus?: MaybeArray<(e: FocusEvent) => void> | undefined;
@@ -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],
@@ -356,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)
                             }))

package/es/jest-setup.js

@@ -1,3 +1,5 @@
 "use strict";
 // https://github.com/jsdom/jsdom/issues/1422
-HTMLDivElement.prototype.scrollTo = () => { };
+if (typeof window !== 'undefined') {
+    HTMLDivElement.prototype.scrollTo = () => { };
+}