naive-ui 2.23.2 → 2.24.0

package/lib/form/src/FormItem.js

@@ -34,7 +34,7 @@ exports.formItemProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props
     }, rule: [Object, Array], size: String, ignorePathChange: Boolean, validationStatus: String, feedback: String, showLabel: {
         type: Boolean,
         default: undefined
-    } });
+    }, labelProps: Object });
 exports.formItemPropKeys = (0, _utils_1.keysOf)(exports.formItemProps);
 // wrap sync validator
 function wrapValidator(validator, async) {
@@ -92,7 +92,9 @@ exports.default = (0, vue_1.defineComponent)({
                 return true;
             return explainsRef.value.length;
         });
-        const mergedDisabledRef = NForm ? (0, vue_1.toRef)(NForm, 'disabled') : (0, vue_1.ref)(false);
+        const mergedDisabledRef = NForm
+            ? (0, vue_1.toRef)(NForm.props, 'disabled')
+            : (0, vue_1.ref)(false);
         const themeRef = (0, _mixins_1.useTheme)('Form', 'FormItem', form_item_cssr_1.default, styles_1.formLight, props, mergedClsPrefixRef);
         (0, vue_1.watch)((0, vue_1.toRef)(props, 'path'), () => {
             if (props.ignorePathChange)
@@ -147,7 +149,6 @@ exports.default = (0, vue_1.defineComponent)({
                             if (validateCallback) {
                                 validateCallback(errors);
                             }
-                            // eslint-disable-next-line prefer-promise-reject-errors
                             reject(errors);
                         }
                     });
@@ -167,7 +168,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
             const { value: rules } = mergedRulesRef;
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const value = NForm ? (0, lodash_1.get)(NForm.model, path, null) : undefined;
+            const value = NForm ? (0, lodash_1.get)(NForm.props.model, path, null) : undefined;
             const activeRules = (!trigger
                 ? rules
                 : rules.filter((rule) => {
@@ -231,7 +232,13 @@ exports.default = (0, vue_1.defineComponent)({
             restoreValidation,
             internalValidate
         };
-        return Object.assign(Object.assign(Object.assign(Object.assign({ mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, hasFeedback: hasFeedbackRef, feedbackId: feedbackIdRef, explains: explainsRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { cssVars: (0, vue_1.computed)(() => {
+        const labelElementRef = (0, vue_1.ref)(null);
+        (0, vue_1.onMounted)(() => {
+            if (labelElementRef.value !== null) {
+                NForm === null || NForm === void 0 ? void 0 : NForm.deriveMaxChildLabelWidth(Number(getComputedStyle(labelElementRef.value).width.slice(0, -2)));
+            }
+        });
+        return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef, mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, hasFeedback: hasFeedbackRef, feedbackId: feedbackIdRef, explains: explainsRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { cssVars: (0, vue_1.computed)(() => {
                 var _a;
                 const { value: size } = mergedSizeRef;
                 const { value: labelPlacement } = labelPlacementRef;
@@ -263,20 +270,25 @@ exports.default = (0, vue_1.defineComponent)({
             }) });
     },
     render() {
+        var _a;
         const { $slots, mergedClsPrefix, mergedShowLabel, mergedShowRequireMark, mergedRequireMarkPlacement } = this;
+        const renderedShowRequireMark = mergedShowRequireMark !== undefined
+            ? mergedShowRequireMark
+            : this.mergedRequired;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-form-item`,
                 `${mergedClsPrefix}-form-item--${this.mergedSize}-size`,
                 `${mergedClsPrefix}-form-item--${this.mergedLabelPlacement}-labelled`,
                 !mergedShowLabel && `${mergedClsPrefix}-form-item--no-label`
             ], style: this.cssVars },
-            mergedShowLabel && (this.label || $slots.label) ? ((0, vue_1.h)("label", { class: `${mergedClsPrefix}-form-item-label`, style: this.mergedLabelStyle },
+            mergedShowLabel && (this.label || $slots.label) ? ((0, vue_1.h)("label", Object.assign({}, this.labelProps, { class: [
+                    (_a = this.labelProps) === null || _a === void 0 ? void 0 : _a.class,
+                    `${mergedClsPrefix}-form-item-label`
+                ], style: this.mergedLabelStyle, ref: "labelElementRef" }),
                 mergedRequireMarkPlacement !== 'left'
                     ? (0, vue_1.renderSlot)($slots, 'label', undefined, () => [this.label])
                     : null,
-                (mergedShowRequireMark !== undefined
-                    ? mergedShowRequireMark
-                    : this.mergedRequired) ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-form-item-label__asterisk` }, mergedRequireMarkPlacement !== 'left' ? '\u00A0*' : '*\u00A0')) : null,
+                renderedShowRequireMark ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-form-item-label__asterisk` }, mergedRequireMarkPlacement !== 'left' ? '\u00A0*' : '*\u00A0')) : (mergedRequireMarkPlacement === 'right-hanging' && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-form-item-label__asterisk-placeholder` }, '\u00A0*'))),
                 mergedRequireMarkPlacement === 'left'
                     ? (0, vue_1.renderSlot)($slots, 'label', undefined, () => [this.label])
                     : null)) : null,
@@ -288,9 +300,9 @@ exports.default = (0, vue_1.defineComponent)({
             this.mergedShowFeedback ? ((0, vue_1.h)("div", { key: this.feedbackId, class: `${mergedClsPrefix}-form-item-feedback-wrapper` },
                 (0, vue_1.h)(vue_1.Transition, { name: "fade-down-transition", mode: "out-in" }, {
                     default: () => {
-                        const feedbacks = ((0, vue_1.h)(Feedbacks_1.default, { clsPrefix: mergedClsPrefix, explains: this.explains, feedback: this.feedback }));
+                        const feedbacks = ((0, vue_1.h)(Feedbacks_1.default, { clsPrefix: mergedClsPrefix, explains: this.explains, feedback: this.feedback }, { default: $slots.feedback }));
                         const { hasFeedback, mergedValidationStatus } = this;
-                        return hasFeedback ? (mergedValidationStatus === 'warning' ? ((0, vue_1.h)("div", { key: "controlled-warning", class: `${mergedClsPrefix}-form-item-feedback ${mergedClsPrefix}-form-item-feedback--warning` }, feedbacks)) : mergedValidationStatus === 'error' ? ((0, vue_1.h)("div", { key: "controlled-error", class: `${mergedClsPrefix}-form-item-feedback ${mergedClsPrefix}-form-item-feedback--error` }, feedbacks)) : mergedValidationStatus === 'success' ? ((0, vue_1.h)("div", { key: "controlled-success", class: `${mergedClsPrefix}-form-item-feedback ${mergedClsPrefix}-form-item-feedback--success` }, feedbacks)) : ((0, vue_1.h)("div", { key: "controlled-default", class: `${mergedClsPrefix}-form-item-feedback` }, feedbacks))) : null;
+                        return hasFeedback || $slots.feedback ? (mergedValidationStatus === 'warning' ? ((0, vue_1.h)("div", { key: "controlled-warning", class: `${mergedClsPrefix}-form-item-feedback ${mergedClsPrefix}-form-item-feedback--warning` }, feedbacks)) : mergedValidationStatus === 'error' ? ((0, vue_1.h)("div", { key: "controlled-error", class: `${mergedClsPrefix}-form-item-feedback ${mergedClsPrefix}-form-item-feedback--error` }, feedbacks)) : mergedValidationStatus === 'success' ? ((0, vue_1.h)("div", { key: "controlled-success", class: `${mergedClsPrefix}-form-item-feedback ${mergedClsPrefix}-form-item-feedback--success` }, feedbacks)) : ((0, vue_1.h)("div", { key: "controlled-default", class: `${mergedClsPrefix}-form-item-feedback` }, feedbacks))) : null;
                     }
                 }))) : null));
     }

package/lib/form/src/FormItemCol.d.ts

@@ -13,7 +13,7 @@ export declare const formItemColProps: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly requireMarkPlacement: import("vue").PropType<"left" | "right">;
+    readonly requireMarkPlacement: import("vue").PropType<"left" | "right" | "right-hanging">;
     readonly showFeedback: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -27,6 +27,7 @@ export declare const formItemColProps: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly labelProps: import("vue").PropType<import("vue").LabelHTMLAttributes>;
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
@@ -137,7 +138,7 @@ export declare const formItemColProps: {
         readonly default: 0;
     };
 };
-export declare const formItemColPropKeys: ("label" | "push" | "size" | "first" | "offset" | "span" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelPlacement" | "labelAlign" | "labelStyle" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "pull")[];
+export declare const formItemColPropKeys: ("label" | "push" | "size" | "first" | "offset" | "span" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelPlacement" | "labelAlign" | "labelStyle" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "labelProps" | "pull")[];
 export declare type FormItemColProps = ExtractPublicPropTypes<typeof formItemColProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly label: StringConstructor;
@@ -153,7 +154,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly requireMarkPlacement: import("vue").PropType<"left" | "right">;
+    readonly requireMarkPlacement: import("vue").PropType<"left" | "right" | "right-hanging">;
     readonly showFeedback: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -167,6 +168,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly labelProps: import("vue").PropType<import("vue").LabelHTMLAttributes>;
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
@@ -304,6 +306,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly validationStatus?: unknown;
     readonly feedback?: unknown;
     readonly showLabel?: unknown;
+    readonly labelProps?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -421,13 +424,14 @@ declare const _default: import("vue").DefineComponent<{
     labelStyle?: string | import("vue").CSSProperties | undefined;
     labelWidth?: string | number | undefined;
     showRequireMark?: boolean | undefined;
-    requireMarkPlacement?: "left" | "right" | undefined;
+    requireMarkPlacement?: "left" | "right" | "right-hanging" | undefined;
     showFeedback?: boolean | undefined;
     showLabel?: boolean | undefined;
     rulePath?: string | undefined;
     rule?: import("./interface").FormItemRule | import("./interface").FormItemRule[] | undefined;
     validationStatus?: "error" | "success" | "warning" | undefined;
     feedback?: string | undefined;
+    labelProps?: import("vue").LabelHTMLAttributes | undefined;
 }>, {
     push: import("../../legacy-grid/src/interface").Span;
     first: boolean;

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

@@ -13,7 +13,7 @@ export declare const formItemGiProps: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly requireMarkPlacement: import("vue").PropType<"left" | "right">;
+    readonly requireMarkPlacement: import("vue").PropType<"left" | "right" | "right-hanging">;
     readonly showFeedback: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -27,6 +27,7 @@ export declare const formItemGiProps: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly labelProps: import("vue").PropType<import("vue").LabelHTMLAttributes>;
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
@@ -137,7 +138,7 @@ export declare const formItemGiProps: {
         readonly default: true;
     };
 };
-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" | "privateSpan" | "privateColStart" | "privateShow" | "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" | "labelProps" | "privateSpan" | "privateColStart" | "privateShow" | "privateOffset")[];
 export declare type FormItemGiProps = ExtractPublicPropTypes<typeof formItemGiProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly label: StringConstructor;
@@ -153,7 +154,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly requireMarkPlacement: import("vue").PropType<"left" | "right">;
+    readonly requireMarkPlacement: import("vue").PropType<"left" | "right" | "right-hanging">;
     readonly showFeedback: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -167,6 +168,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly labelProps: import("vue").PropType<import("vue").LabelHTMLAttributes>;
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
@@ -304,6 +306,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly validationStatus?: unknown;
     readonly feedback?: unknown;
     readonly showLabel?: unknown;
+    readonly labelProps?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -424,13 +427,14 @@ declare const _default: import("vue").DefineComponent<{
     labelStyle?: string | import("vue").CSSProperties | undefined;
     labelWidth?: string | number | undefined;
     showRequireMark?: boolean | undefined;
-    requireMarkPlacement?: "left" | "right" | undefined;
+    requireMarkPlacement?: "left" | "right" | "right-hanging" | undefined;
     showFeedback?: boolean | undefined;
     showLabel?: boolean | undefined;
     rulePath?: string | undefined;
     rule?: import("./interface").FormItemRule | import("./interface").FormItemRule[] | undefined;
     validationStatus?: "error" | "success" | "warning" | undefined;
     feedback?: string | undefined;
+    labelProps?: import("vue").LabelHTMLAttributes | undefined;
     privateSpan?: number | undefined;
     privateColStart?: number | undefined;
     privateOffset?: number | undefined;

package/lib/form/src/FormItemRow.d.ts

@@ -13,7 +13,7 @@ declare const formItemRowProps: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    requireMarkPlacement: import("vue").PropType<"left" | "right">;
+    requireMarkPlacement: import("vue").PropType<"left" | "right" | "right-hanging">;
     showFeedback: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -27,6 +27,7 @@ declare const formItemRowProps: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    labelProps: import("vue").PropType<import("vue").LabelHTMLAttributes>;
     theme: import("vue").PropType<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
@@ -158,7 +159,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    requireMarkPlacement: import("vue").PropType<"left" | "right">;
+    requireMarkPlacement: import("vue").PropType<"left" | "right" | "right-hanging">;
     showFeedback: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -172,6 +173,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    labelProps: import("vue").PropType<import("vue").LabelHTMLAttributes>;
     theme: import("vue").PropType<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
@@ -315,6 +317,7 @@ declare const _default: import("vue").DefineComponent<{
     validationStatus?: unknown;
     feedback?: unknown;
     showLabel?: unknown;
+    labelProps?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
@@ -438,13 +441,14 @@ declare const _default: import("vue").DefineComponent<{
     labelStyle?: string | import("vue").CSSProperties | undefined;
     labelWidth?: string | number | undefined;
     showRequireMark?: boolean | undefined;
-    requireMarkPlacement?: "left" | "right" | undefined;
+    requireMarkPlacement?: "left" | "right" | "right-hanging" | undefined;
     showFeedback?: boolean | undefined;
     showLabel?: boolean | undefined;
     rulePath?: string | undefined;
     rule?: import("./interface").FormItemRule | import("./interface").FormItemRule[] | undefined;
     validationStatus?: "error" | "success" | "warning" | undefined;
     feedback?: string | undefined;
+    labelProps?: import("vue").LabelHTMLAttributes | undefined;
 }>, {
     push: import("../../legacy-grid/src/interface").Span;
     first: boolean;

package/lib/form/src/interface.d.ts

@@ -1,4 +1,4 @@
-import { InjectionKey } from 'vue';
+import { InjectionKey, Ref } from 'vue';
 import { ValidateError, RuleItem, ValidateOption } from 'async-validator';
 import { FormSetupProps } from './Form';
 export interface FormRules {
@@ -32,7 +32,11 @@ export interface FormItemInst {
 }
 export declare type FormItemColRef = FormItemInst;
 export declare type FormItemRowRef = FormItemInst;
-export declare type FormInjection = FormSetupProps;
+export interface FormInjection {
+    props: FormSetupProps;
+    maxChildLabelWidthRef: Ref<number | undefined>;
+    deriveMaxChildLabelWidth: (currentWidth: number) => void;
+}
 export declare const formInjectionKey: InjectionKey<FormInjection>;
 export declare const formItemInstsInjectionKey: InjectionKey<unknown>;
 export declare type LabelAlign = 'left' | 'center' | 'right';

package/lib/form/src/styles/form-item.cssr.js

@@ -48,6 +48,8 @@ exports.default = (0, cssr_1.cB)('form-item', {
  `, [(0, cssr_1.cE)('asterisk', `
  color: var(--n-asterisk-color);
  transition: color .3s var(--n-bezier);
+ `), (0, cssr_1.cE)('asterisk-placeholder', `
+ visibility: hidden; 
  `)]), (0, cssr_1.cB)('form-item-blank', {
   gridArea: 'blank',
   minHeight: 'var(--n-blank-height)'

package/lib/form/src/utils.d.ts

@@ -6,11 +6,11 @@ export declare function formItemSize(props: FormItemSetupProps): {
 };
 export declare function formItemMisc(props: FormItemSetupProps): {
     validationErrored: import("vue").Ref<boolean>;
-    mergedLabelStyle: ComputedRef<(string | import("vue").CSSProperties | undefined)[]>;
+    mergedLabelStyle: ComputedRef<(import("vue").StyleValue | undefined)[]>;
     mergedLabelPlacement: ComputedRef<import("./interface").LabelPlacement>;
     mergedLabelAlign: ComputedRef<import("./interface").LabelAlign | undefined>;
     mergedShowRequireMark: ComputedRef<boolean | undefined>;
-    mergedRequireMarkPlacement: ComputedRef<"left" | "right" | undefined>;
+    mergedRequireMarkPlacement: ComputedRef<"left" | "right" | "right-hanging">;
     mergedValidationStatus: ComputedRef<"error" | "success" | "warning" | undefined>;
     mergedShowFeedback: ComputedRef<boolean>;
     mergedShowLabel: ComputedRef<boolean>;

package/lib/form/src/utils.js

@@ -11,8 +11,8 @@ function formItemSize(props) {
         mergedSize: (0, vue_1.computed)(() => {
             if (props.size !== undefined)
                 return props.size;
-            if ((NForm === null || NForm === void 0 ? void 0 : NForm.size) !== undefined)
-                return NForm.size;
+            if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.size) !== undefined)
+                return NForm.props.size;
             return 'medium';
         })
     };
@@ -25,11 +25,20 @@ function formItemMisc(props) {
         if (mergedLabelPlacementRef.value === 'top')
             return;
         const { labelWidth } = props;
-        if (labelWidth !== undefined) {
+        if (labelWidth !== undefined && labelWidth !== 'auto') {
             return (0, _utils_1.formatLength)(labelWidth);
         }
-        if ((NForm === null || NForm === void 0 ? void 0 : NForm.labelWidth) !== undefined) {
-            return (0, _utils_1.formatLength)(NForm.labelWidth);
+        if (labelWidth === 'auto' || (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelWidth) === 'auto') {
+            const autoComputedWidth = NForm === null || NForm === void 0 ? void 0 : NForm.maxChildLabelWidthRef.value;
+            if (autoComputedWidth !== undefined) {
+                return (0, _utils_1.formatLength)(autoComputedWidth);
+            }
+            else {
+                return undefined;
+            }
+        }
+        if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.labelWidth) !== undefined) {
+            return (0, _utils_1.formatLength)(NForm.props.labelWidth);
         }
         return undefined;
     });
@@ -37,37 +46,39 @@ function formItemMisc(props) {
         const { labelPlacement } = props;
         if (labelPlacement !== undefined)
             return labelPlacement;
-        if (NForm === null || NForm === void 0 ? void 0 : NForm.labelPlacement)
-            return NForm.labelPlacement;
+        if (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelPlacement)
+            return NForm.props.labelPlacement;
         return 'top';
     });
     const mergedLabelAlignRef = (0, vue_1.computed)(() => {
         const { labelAlign } = props;
         if (labelAlign)
             return labelAlign;
-        if (NForm === null || NForm === void 0 ? void 0 : NForm.labelAlign)
-            return NForm.labelAlign;
+        if (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelAlign)
+            return NForm.props.labelAlign;
         return undefined;
     });
     const mergedLabelStyleRef = (0, vue_1.computed)(() => {
+        var _a;
         return [
+            (_a = props.labelProps) === null || _a === void 0 ? void 0 : _a.style,
+            props.labelStyle,
             {
                 width: mergedLabelWidthRef.value
-            },
-            props.labelStyle
+            }
         ];
     });
     const mergedShowRequireMarkRef = (0, vue_1.computed)(() => {
         const { showRequireMark } = props;
         if (showRequireMark !== undefined)
             return showRequireMark;
-        return NForm === null || NForm === void 0 ? void 0 : NForm.showRequireMark;
+        return NForm === null || NForm === void 0 ? void 0 : NForm.props.showRequireMark;
     });
     const mergedRequireMarkPlacementRef = (0, vue_1.computed)(() => {
         const { requireMarkPlacement } = props;
         if (requireMarkPlacement !== undefined)
             return requireMarkPlacement;
-        return NForm === null || NForm === void 0 ? void 0 : NForm.requireMarkPlacement;
+        return (NForm === null || NForm === void 0 ? void 0 : NForm.props.requireMarkPlacement) || 'right';
     });
     const validationErroredRef = (0, vue_1.ref)(false);
     const mergedValidationStatusRef = (0, vue_1.computed)(() => {
@@ -82,16 +93,16 @@ function formItemMisc(props) {
         const { showFeedback } = props;
         if (showFeedback !== undefined)
             return showFeedback;
-        if ((NForm === null || NForm === void 0 ? void 0 : NForm.showFeedback) !== undefined)
-            return NForm.showFeedback;
+        if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.showFeedback) !== undefined)
+            return NForm.props.showFeedback;
         return true;
     });
     const mergedShowLabelRef = (0, vue_1.computed)(() => {
         const { showLabel } = props;
         if (showLabel !== undefined)
             return showLabel;
-        if ((NForm === null || NForm === void 0 ? void 0 : NForm.showLabel) !== undefined)
-            return NForm.showLabel;
+        if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.showLabel) !== undefined)
+            return NForm.props.showLabel;
         return true;
     });
     return {
@@ -129,7 +140,7 @@ function formItemRule(props) {
                 rules.push(rule);
         }
         if (NForm) {
-            const { rules: formRules } = NForm;
+            const { rules: formRules } = NForm.props;
             const { value: rulePath } = compatibleRulePathRef;
             if (formRules !== undefined && rulePath !== undefined) {
                 const formRule = (0, lodash_1.get)(formRules, rulePath);