naive-ui 2.43.1 → 2.44.0

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

@@ -39,4 +39,4 @@ declare const dialogProps: {
 };
 export type DialogProps = ExtractPublicPropTypes<typeof dialogProps>;
 export { dialogProps };
-export declare const dialogPropKeys: ("type" | "content" | "title" | "icon" | "onClose" | "action" | "loading" | "showIcon" | "bordered" | "closable" | "iconPlacement" | "contentClass" | "contentStyle" | "closeFocusable" | "negativeText" | "positiveText" | "positiveButtonProps" | "negativeButtonProps" | "titleClass" | "titleStyle" | "actionClass" | "actionStyle" | "onPositiveClick" | "onNegativeClick")[];
+export declare const dialogPropKeys: ("type" | "title" | "showIcon" | "bordered" | "closable" | "onClose" | "icon" | "content" | "contentClass" | "contentStyle" | "loading" | "iconPlacement" | "action" | "closeFocusable" | "negativeText" | "positiveText" | "positiveButtonProps" | "negativeButtonProps" | "titleClass" | "titleStyle" | "actionClass" | "actionStyle" | "onPositiveClick" | "onNegativeClick")[];

package/es/dialog/src/styles/index.cssr.mjs

@@ -41,23 +41,23 @@ export default c([cB('dialog', `
  border-color .3s var(--n-bezier),
  background-color .3s var(--n-bezier),
  color .3s var(--n-bezier);
- `, [cE('icon', {
-  color: 'var(--n-icon-color)'
-}), cM('bordered', {
-  border: 'var(--n-border)'
-}), cM('icon-top', [cE('close', {
-  margin: 'var(--n-close-margin)'
-}), cE('icon', {
-  margin: 'var(--n-icon-margin)'
-}), cE('content', {
-  textAlign: 'center'
-}), cE('title', {
-  justifyContent: 'center'
-}), cE('action', {
-  justifyContent: 'center'
-})]), cM('icon-left', [cE('icon', {
-  margin: 'var(--n-icon-margin)'
-}), cM('closable', [cE('title', `
+ `, [cE('icon', `
+ color: var(--n-icon-color);
+ `), cM('bordered', `
+ border: var(--n-border);
+ `), cM('icon-top', [cE('close', `
+ margin: var(--n-close-margin);
+ `), cE('icon', `
+ margin: var(--n-icon-margin);
+ `), cE('content', `
+ text-align: center;
+ `), cE('title', `
+ justify-content: center;
+ `), cE('action', `
+ justify-content: center;
+ `)]), cM('icon-left', [cE('icon', `
+ margin: var(--n-icon-margin);
+ `), cM('closable', [cE('title', `
  padding-right: calc(var(--n-close-size) + 6px);
  `)])]), cE('close', `
  position: absolute;

package/es/divider/src/Divider.d.ts

@@ -79,8 +79,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         fontWeight: string;
     }, any>>>;
 }>> & Readonly<{}>, {
-    readonly dashed: boolean;
     readonly vertical: boolean;
+    readonly dashed: boolean;
     readonly titlePlacement: "left" | "right" | "center";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/drawer/src/Drawer.d.ts

@@ -645,13 +645,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, any>;
     }>>>;
 }>> & Readonly<{}>, {
-    readonly show: boolean;
-    readonly autoFocus: boolean;
     readonly placement: Placement;
+    readonly show: boolean;
     readonly displayDirective: "show" | "if";
     readonly resizable: boolean;
     readonly blockScroll: boolean;
     readonly closeOnEsc: boolean;
+    readonly autoFocus: boolean;
     readonly maskClosable: boolean;
     readonly showMask: boolean | "transparent";
     readonly nativeScrollbar: boolean;

package/es/drawer/src/DrawerBodyWrapper.d.ts

@@ -196,9 +196,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onEsc: PropType<(e: KeyboardEvent) => void>;
 }>> & Readonly<{}>, {
     show: boolean | undefined;
-    autoFocus: boolean;
     resizable: boolean;
     blockScroll: boolean;
+    autoFocus: boolean;
     trapFocus: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/dropdown/index.d.ts

@@ -1,3 +1,4 @@
 export { dropdownProps, default as NDropdown } from './src/Dropdown';
 export type { DropdownProps } from './src/Dropdown';
 export type { DropdownDividerOption, DropdownGroupOption, DropdownMenuProps, NodeProps as DropdownNodeProps, DropdownOption, DropdownRenderOption } from './src/interface';
+export type * from './src/public-types';

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

@@ -3,6 +3,7 @@ import type { PropType, Ref } from 'vue';
 import type { FollowerPlacement } from 'vueuc';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { DropdownMenuProps, DropdownMixedOption, NodeProps, OnUpdateValue, OnUpdateValueImpl, RenderIcon, RenderIconImpl, RenderLabel, RenderLabelImpl, RenderOption, RenderOptionImpl } from './interface';
+import type { DropdownSize } from './public-types';
 export interface DropdownInjection {
     renderLabelRef: Ref<RenderLabelImpl | undefined>;
     renderIconRef: Ref<RenderIconImpl | undefined>;
@@ -279,10 +280,7 @@ export declare const dropdownProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly size: {
-        readonly type: PropType<"small" | "medium" | "large" | "huge">;
-        readonly default: "medium";
-    };
+    readonly size: PropType<DropdownSize>;
     readonly inverted: BooleanConstructor;
     readonly placement: {
         readonly type: PropType<FollowerPlacement>;
@@ -650,10 +648,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly size: {
-        readonly type: PropType<"small" | "medium" | "large" | "huge">;
-        readonly default: "medium";
-    };
+    readonly size: PropType<DropdownSize>;
     readonly inverted: BooleanConstructor;
     readonly placement: {
         readonly type: PropType<FollowerPlacement>;
@@ -1133,10 +1128,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly size: {
-        readonly type: PropType<"small" | "medium" | "large" | "huge">;
-        readonly default: "medium";
-    };
+    readonly size: PropType<DropdownSize>;
     readonly inverted: BooleanConstructor;
     readonly placement: {
         readonly type: PropType<FollowerPlacement>;
@@ -1245,28 +1237,27 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly minWidth: NumberConstructor;
     readonly maxWidth: NumberConstructor;
 }>> & Readonly<{}>, {
-    readonly options: DropdownMixedOption[];
-    readonly size: "small" | "medium" | "large" | "huge";
-    readonly to: string | boolean | HTMLElement;
     readonly disabled: boolean;
-    readonly show: boolean | undefined;
-    readonly flip: boolean;
+    readonly raw: boolean;
     readonly width: number | "trigger";
     readonly duration: number;
-    readonly raw: boolean;
+    readonly scrollable: boolean;
+    readonly trigger: import("../..").PopoverTrigger;
+    readonly to: string | boolean | HTMLElement;
     readonly placement: FollowerPlacement;
+    readonly options: DropdownMixedOption[];
+    readonly show: boolean | undefined;
     readonly keyboard: boolean;
     readonly showArrow: boolean;
-    readonly trigger: import("../..").PopoverTrigger;
     readonly arrow: boolean | undefined;
     readonly defaultShow: boolean;
     readonly delay: number;
     readonly arrowPointToCenter: boolean;
     readonly displayDirective: "show" | "if";
+    readonly flip: boolean;
     readonly animated: boolean;
     readonly overlap: boolean;
     readonly keepAliveOnHover: boolean;
-    readonly scrollable: boolean;
     readonly internalDeactivateImmediately: boolean;
     readonly internalSyncTargetWithParent: boolean;
     readonly internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];

package/es/dropdown/src/Dropdown.mjs

@@ -18,10 +18,7 @@ const dropdownBaseProps = {
     type: Boolean,
     default: true
   },
-  size: {
-    type: String,
-    default: 'medium'
-  },
+  size: String,
   inverted: Boolean,
   placement: {
     type: String,
@@ -124,8 +121,13 @@ export default defineComponent({
     }, keyboardEnabledRef);
     const {
       mergedClsPrefixRef,
-      inlineThemeDisabled
+      inlineThemeDisabled,
+      mergedComponentPropsRef
     } = useConfig(props);
+    const mergedSizeRef = computed(() => {
+      var _a, _b;
+      return props.size || ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Dropdown) === null || _b === void 0 ? void 0 : _b.size) || 'medium';
+    });
     const themeRef = useTheme('Dropdown', '-dropdown', style, dropdownLight, props, mergedClsPrefixRef);
     provide(dropdownInjectionKey, {
       labelFieldRef: toRef(props, 'labelField'),
@@ -248,9 +250,9 @@ export default defineComponent({
     }
     const cssVarsRef = computed(() => {
       const {
-        size,
         inverted
       } = props;
+      const size = mergedSizeRef.value;
       const {
         common: {
           cubicBezierEaseInOut
@@ -310,7 +312,7 @@ export default defineComponent({
       }
       return vars;
     });
-    const themeClassHandle = inlineThemeDisabled ? useThemeClass('dropdown', computed(() => `${props.size[0]}${props.inverted ? 'i' : ''}`), cssVarsRef, props) : undefined;
+    const themeClassHandle = inlineThemeDisabled ? useThemeClass('dropdown', computed(() => `${mergedSizeRef.value[0]}${props.inverted ? 'i' : ''}`), cssVarsRef, props) : undefined;
     return {
       mergedClsPrefix: mergedClsPrefixRef,
       mergedTheme: themeRef,

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

@@ -40,8 +40,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: null;
     };
 }>> & Readonly<{}>, {
-    showArrow: boolean;
     scrollable: boolean;
+    showArrow: boolean;
     tmNodes: TreeNode<import("../..").MenuOption, import("../..").MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>[];
     parentKey: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -69,8 +69,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     props: PropType<HTMLAttributes>;
     scrollable: BooleanConstructor;
 }>> & Readonly<{}>, {
-    placement: FollowerPlacement;
     scrollable: boolean;
+    placement: FollowerPlacement;
     parentKey: string | number | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/dropdown/src/public-types.d.ts

@@ -0,0 +1 @@
+export type DropdownSize = 'small' | 'medium' | 'large' | 'huge';

package/es/dropdown/src/public-types.mjs

@@ -0,0 +1 @@
+export {};

package/es/dynamic-input/src/DynamicInput.d.ts

@@ -1799,7 +1799,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         create: string;
     }>;
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined, import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
-    buttonSize: import("vue").ComputedRef<import("../../button/src/interface").Size | undefined>;
+    buttonSize: import("vue").ComputedRef<import("../..").ButtonSize | undefined>;
     mergedClsPrefix: import("vue").Ref<string, string>;
     NFormItem: import("../../_mixins/use-form-item").FormItemInjection | null;
     uncontrolledValue: import("vue").Ref<any[], any[]>;
@@ -3021,10 +3021,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, any>;
     }>>>;
 }>> & Readonly<{}>, {
-    readonly placeholder: string;
     readonly disabled: boolean;
-    readonly min: number;
     readonly defaultValue: any[];
+    readonly placeholder: string;
+    readonly min: number;
     readonly preset: "input" | "pair";
     readonly keyPlaceholder: string;
     readonly valuePlaceholder: string;

package/es/dynamic-tags/index.d.ts

@@ -1,3 +1,4 @@
 export { dynamicTagsProps, default as NDynamicTags } from './src/DynamicTags';
 export type { DynamicTagsProps, DynamicTagsSlots } from './src/DynamicTags';
 export type { DynamicTagsInputSlotProps, DynamicTagsOption, DynamicTagsTriggerSlotProps } from './src/interface';
+export type * from './src/public-types';

package/es/dynamic-tags/src/DynamicTags.d.ts

@@ -2,11 +2,9 @@ import type { CSSProperties, PropType, SlotsType, VNode, VNodeChild } from 'vue'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { InputProps } from '../../input';
 import type { DynamicTagsInputSlotProps, DynamicTagsOption, DynamicTagsTriggerSlotProps, OnCreate, OnUpdateValue } from './interface';
+import type { DynamicTagsSize } from './public-types';
 export declare const dynamicTagsProps: {
-    size: {
-        type: PropType<"small" | "medium" | "large">;
-        default: string;
-    };
+    size: PropType<DynamicTagsSize>;
     closable: {
         type: BooleanConstructor;
         default: boolean;
@@ -1176,10 +1174,7 @@ export interface DynamicTagsSlots {
     default?: () => VNode[];
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    size: {
-        type: PropType<"small" | "medium" | "large">;
-        default: string;
-    };
+    size: PropType<DynamicTagsSize>;
     closable: {
         type: BooleanConstructor;
         default: boolean;
@@ -2381,7 +2376,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         scrollTo: (options: ScrollToOptions) => void;
     } | null>;
     localizedAdd: import("vue").ComputedRef<string>;
-    inputSize: import("vue").ComputedRef<"small" | "medium" | "tiny">;
+    inputSize: import("vue").ComputedRef<"tiny" | "small" | "medium">;
+    mergedSize: import("vue").ComputedRef<DynamicTagsSize>;
     inputValue: import("vue").Ref<string, string>;
     showInput: import("vue").Ref<boolean, boolean>;
     inputForceFocused: import("vue").Ref<boolean, boolean>;
@@ -2815,10 +2811,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     themeClass: import("vue").Ref<string, string> | undefined;
     onRender: (() => void) | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: PropType<"small" | "medium" | "large">;
-        default: string;
-    };
+    size: PropType<DynamicTagsSize>;
     closable: {
         type: BooleanConstructor;
         default: boolean;
@@ -3981,12 +3974,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, any>;
     }>>>;
 }>> & Readonly<{}>, {
-    type: "default" | "error" | "info" | "warning" | "success" | "primary";
-    size: "small" | "medium" | "large";
     disabled: boolean | undefined;
-    round: boolean;
+    type: "default" | "info" | "warning" | "error" | "success" | "primary";
     closable: boolean;
     defaultValue: (string | DynamicTagsOption)[];
+    round: boolean;
     onCreate: OnCreate;
 }, SlotsType<DynamicTagsSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -12,10 +12,7 @@ import commonProps from "../../tag/src/common-props.mjs";
 import { dynamicTagsLight } from "../styles/index.mjs";
 import style from "./styles/index.cssr.mjs";
 export const dynamicTagsProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), commonProps), {
-  size: {
-    type: String,
-    default: 'medium'
-  },
+  size: String,
   closable: {
     type: Boolean,
     default: true
@@ -55,8 +52,13 @@ export default defineComponent({
     }
     const {
       mergedClsPrefixRef,
-      inlineThemeDisabled
+      inlineThemeDisabled,
+      mergedComponentPropsRef
     } = useConfig(props);
+    const mergedSizeRef = computed(() => {
+      var _a, _b;
+      return props.size || ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DynamicTags) === null || _b === void 0 ? void 0 : _b.size) || 'medium';
+    });
     const {
       localeRef
     } = useLocale('DynamicTags');
@@ -76,7 +78,7 @@ export default defineComponent({
       return localeRef.value.add;
     });
     const inputSizeRef = computed(() => {
-      return smallerSize(props.size);
+      return smallerSize(mergedSizeRef.value);
     });
     const triggerDisabledRef = computed(() => {
       return mergedDisabledRef.value || !!props.max && mergedValueRef.value.length >= props.max;
@@ -147,6 +149,7 @@ export default defineComponent({
       inputInstRef,
       localizedAdd: localizedAddRef,
       inputSize: inputSizeRef,
+      mergedSize: mergedSizeRef,
       inputValue: inputValueRef,
       showInput: showInputRef,
       inputForceFocused: inputForceFocusedRef,
@@ -188,7 +191,7 @@ export default defineComponent({
           tagStyle,
           type,
           round,
-          size,
+          mergedSize,
           color,
           closable,
           mergedDisabled,
@@ -214,7 +217,7 @@ export default defineComponent({
           style: tagStyle,
           type: type,
           round: round,
-          size: size,
+          size: mergedSize,
           color: color,
           closable: closable,
           disabled: mergedDisabled,

package/es/dynamic-tags/src/public-types.d.ts

@@ -0,0 +1 @@
+export type DynamicTagsSize = 'small' | 'medium' | 'large';

package/es/dynamic-tags/src/public-types.mjs

@@ -0,0 +1 @@
+export {};

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

@@ -202,7 +202,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         iconSizeHuge: string;
     }, any>>>;
 }>> & Readonly<{}>, {
-    size: "small" | "medium" | "large" | "tiny" | "huge";
+    size: "tiny" | "small" | "medium" | "large" | "huge";
     showIcon: boolean;
     showDescription: boolean;
 }, SlotsType<EmptySlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/flex/src/Flex.d.ts

@@ -107,11 +107,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         gapLarge: string;
     }, any>>>;
 }>> & Readonly<{}>, {
-    readonly inline: boolean;
-    readonly size: number | [number, number] | "small" | "medium" | "large";
     readonly reverse: boolean;
-    readonly wrap: boolean;
+    readonly size: number | "small" | "medium" | "large" | [number, number];
     readonly vertical: boolean;
+    readonly inline: boolean;
     readonly justify: import("csstype").Property.JustifyContent;
+    readonly wrap: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,6 +1,7 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-import type { FormInst, FormRules, FormValidateMessages, LabelAlign, LabelPlacement, Size } from './interface';
+import type { FormInst, FormRules, FormValidateMessages, LabelAlign, LabelPlacement } from './interface';
+import type { FormSize } from './public-types';
 export declare const formProps: {
     readonly inline: BooleanConstructor;
     readonly labelWidth: PropType<number | string>;
@@ -15,7 +16,7 @@ export declare const formProps: {
     };
     readonly rules: PropType<FormRules>;
     readonly disabled: BooleanConstructor;
-    readonly size: PropType<Size>;
+    readonly size: PropType<FormSize>;
     readonly showRequireMark: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -147,7 +148,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     };
     readonly rules: PropType<FormRules>;
     readonly disabled: BooleanConstructor;
-    readonly size: PropType<Size>;
+    readonly size: PropType<FormSize>;
     readonly showRequireMark: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -278,7 +279,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     };
     readonly rules: PropType<FormRules>;
     readonly disabled: BooleanConstructor;
-    readonly size: PropType<Size>;
+    readonly size: PropType<FormSize>;
     readonly showRequireMark: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -394,9 +395,9 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         labelFontWeight: string;
     }, any>>>;
 }>> & Readonly<{}>, {
-    readonly inline: boolean;
     readonly disabled: boolean;
     readonly onSubmit: (e: Event) => void;
+    readonly inline: boolean;
     readonly labelPlacement: LabelPlacement;
     readonly model: Record<string, any>;
     readonly showRequireMark: boolean | undefined;

package/es/form/src/Form.mjs

@@ -85,6 +85,15 @@ export default defineComponent({
         maxChildLabelWidthRef.value = currentWidth;
       }
     };
+    function invalidateLabelWidth() {
+      var _a;
+      for (const key of keysOf(formItems)) {
+        const formItemInstances = formItems[key];
+        for (const formItemInstance of formItemInstances) {
+          (_a = formItemInstance.invalidateLabelWidth) === null || _a === void 0 ? void 0 : _a.call(formItemInstance);
+        }
+      }
+    }
     function validate(validateCallback_1) {
       return __awaiter(this, arguments, void 0, function* (validateCallback, shouldRuleBeApplied = () => true) {
         return yield new Promise((resolve, reject) => {
@@ -144,7 +153,8 @@ export default defineComponent({
     });
     const formExposedMethod = {
       validate,
-      restoreValidation
+      restoreValidation,
+      invalidateLabelWidth
     };
     return Object.assign(formExposedMethod, {
       mergedClsPrefix: mergedClsPrefixRef

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

@@ -1,6 +1,6 @@
-import type { CSSProperties, ExtractPropTypes, LabelHTMLAttributes, PropType, VNodeChild } from 'vue';
+import type { CSSProperties, ExtractPropTypes, LabelHTMLAttributes, PropType, SlotsType, VNodeChild } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-import type { FormItemInternalValidate, FormItemRule, LabelAlign, LabelPlacement } from './interface';
+import type { FormItemInternalValidate, FormItemRule, FormItemSlots, LabelAlign, LabelPlacement } from './interface';
 export declare const formItemProps: {
     readonly label: StringConstructor;
     readonly labelWidth: PropType<string | number>;
@@ -133,7 +133,7 @@ export declare const formItemProps: {
 };
 export type FormItemSetupProps = ExtractPropTypes<typeof formItemProps>;
 export type FormItemProps = ExtractPublicPropTypes<typeof formItemProps>;
-export declare const formItemPropKeys: ("label" | "size" | "first" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "contentClass" | "contentStyle" | "labelPlacement" | "labelAlign" | "labelStyle" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "feedbackClass" | "feedbackStyle" | "labelProps")[];
+export declare const formItemPropKeys: ("label" | "size" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "contentClass" | "contentStyle" | "first" | "labelPlacement" | "labelAlign" | "labelStyle" | "required" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "path" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "feedbackClass" | "feedbackStyle" | "labelProps")[];
 declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     readonly label: StringConstructor;
     readonly labelWidth: PropType<string | number>;
@@ -286,9 +286,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     onRender: (() => void) | undefined;
     validate: import("./interface").FormItemValidate;
     restoreValidation: () => void;
+    invalidateLabelWidth: () => void;
     path?: string;
     internalValidate: FormItemInternalValidate;
-    mergedSize: import("vue").ComputedRef<import("./interface").Size>;
+    mergedSize: import("vue").ComputedRef<import("./public-types").FormItemSize>;
     validationErrored: import("vue").Ref<boolean, boolean>;
     validationWarned: import("vue").Ref<boolean, boolean>;
     mergedLabelStyle: import("vue").ComputedRef<import("vue").StyleValue[]>;
@@ -296,7 +297,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     mergedLabelAlign: import("vue").ComputedRef<LabelAlign | undefined>;
     mergedShowRequireMark: import("vue").ComputedRef<boolean | undefined>;
     mergedRequireMarkPlacement: import("vue").ComputedRef<"left" | "right" | "right-hanging">;
-    mergedValidationStatus: import("vue").ComputedRef<"error" | "warning" | "success" | undefined>;
+    mergedValidationStatus: import("vue").ComputedRef<"warning" | "error" | "success" | undefined>;
     mergedShowFeedback: import("vue").ComputedRef<boolean>;
     mergedShowLabel: import("vue").ComputedRef<boolean>;
     isAutoLabelWidth: import("vue").ComputedRef<boolean>;
@@ -451,5 +452,5 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     readonly showFeedback: boolean | undefined;
     readonly showLabel: boolean | undefined;
     readonly ignorePathChange: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, SlotsType<FormItemSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/form/src/FormItem.mjs

@@ -97,6 +97,7 @@ function wrapValidator(validator, async) {
 export default defineComponent({
   name: 'FormItem',
   props: formItemProps,
+  slots: Object,
   setup(props) {
     useInjectionInstanceCollection(formItemInstsInjectionKey, 'formItems', toRef(props, 'path'));
     const {
@@ -124,12 +125,24 @@ export default defineComponent({
     } = formItemMiscRefs;
     const renderExplainsRef = ref([]);
     const feedbackIdRef = ref(createId());
+    const labelElementRef = ref(null);
     const mergedDisabledRef = NForm ? toRef(NForm.props, 'disabled') : ref(false);
     const themeRef = useTheme('Form', '-form-item', style, formLight, props, mergedClsPrefixRef);
     watch(toRef(props, 'path'), () => {
       if (props.ignorePathChange) return;
       restoreValidation();
     });
+    function invalidateLabelWidth() {
+      if (!formItemMiscRefs.isAutoLabelWidth.value) return;
+      const labelElement = labelElementRef.value;
+      if (labelElement !== null) {
+        const memoizedWhitespace = labelElement.style.whiteSpace;
+        labelElement.style.whiteSpace = 'nowrap';
+        labelElement.style.width = '';
+        NForm === null || NForm === void 0 ? void 0 : NForm.deriveMaxChildLabelWidth(Number(getComputedStyle(labelElement).width.slice(0, -2)));
+        labelElement.style.whiteSpace = memoizedWhitespace;
+      }
+    }
     function restoreValidation() {
       renderExplainsRef.value = [];
       validationErroredRef.value = false;
@@ -320,20 +333,10 @@ export default defineComponent({
     const exposedRef = {
       validate,
       restoreValidation,
-      internalValidate
+      internalValidate,
+      invalidateLabelWidth
     };
-    const labelElementRef = ref(null);
-    onMounted(() => {
-      if (!formItemMiscRefs.isAutoLabelWidth.value) return;
-      const labelElement = labelElementRef.value;
-      if (labelElement !== null) {
-        const memoizedWhitespace = labelElement.style.whiteSpace;
-        labelElement.style.whiteSpace = 'nowrap';
-        labelElement.style.width = '';
-        NForm === null || NForm === void 0 ? void 0 : NForm.deriveMaxChildLabelWidth(Number(getComputedStyle(labelElement).width.slice(0, -2)));
-        labelElement.style.whiteSpace = memoizedWhitespace;
-      }
-    });
+    onMounted(invalidateLabelWidth);
     const cssVarsRef = computed(() => {
       var _a;
       const {