naive-ui 2.23.1 → 2.24.2

package/lib/form/src/Form.js

@@ -45,6 +45,15 @@ exports.default = (0, vue_1.defineComponent)({
         (0, _mixins_1.useTheme)('Form', 'Form', form_cssr_1.default, styles_1.formLight, props, mergedClsPrefixRef);
         // from path to form-item
         const formItems = {};
+        // for label-width = 'auto'
+        const maxChildLabelWidthRef = (0, vue_1.ref)(undefined);
+        const deriveMaxChildLabelWidth = (currentWidth) => {
+            const currentMaxChildLabelWidth = maxChildLabelWidthRef.value;
+            if (currentMaxChildLabelWidth === undefined ||
+                currentWidth >= currentMaxChildLabelWidth) {
+                maxChildLabelWidthRef.value = currentWidth;
+            }
+        };
         function validate(validateCallback, shouldRuleBeApplied = () => true) {
             return __awaiter(this, void 0, void 0, function* () {
                 return yield new Promise((resolve, reject) => {
@@ -65,16 +74,12 @@ exports.default = (0, vue_1.defineComponent)({
                             if (validateCallback) {
                                 validateCallback(errors);
                             }
-                            else {
-                                reject(errors);
-                            }
+                            reject(errors);
                         }
                         else {
                             if (validateCallback)
                                 validateCallback();
-                            else {
-                                resolve();
-                            }
+                            resolve();
                         }
                     });
                 });
@@ -88,7 +93,11 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
-        (0, vue_1.provide)(interface_1.formInjectionKey, props);
+        (0, vue_1.provide)(interface_1.formInjectionKey, {
+            props,
+            maxChildLabelWidthRef,
+            deriveMaxChildLabelWidth
+        });
         (0, vue_1.provide)(interface_1.formItemInstsInjectionKey, { formItems });
         const formExposedMethod = {
             validate,

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

@@ -1,4 +1,4 @@
-import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import { PropType, CSSProperties, ExtractPropTypes, LabelHTMLAttributes } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import { FormItemRule, LabelAlign, LabelPlacement, FormItemInternalValidate } from './interface';
 export declare const formItemProps: {
@@ -15,7 +15,7 @@ export declare const formItemProps: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly requireMarkPlacement: PropType<"left" | "right">;
+    readonly requireMarkPlacement: PropType<"left" | "right" | "right-hanging">;
     readonly showFeedback: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -29,6 +29,7 @@ export declare const formItemProps: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly labelProps: PropType<LabelHTMLAttributes>;
     readonly theme: PropType<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
@@ -125,7 +126,7 @@ export declare const formItemProps: {
 };
 export declare type FormItemSetupProps = ExtractPropTypes<typeof formItemProps>;
 export declare type FormItemProps = ExtractPublicPropTypes<typeof formItemProps>;
-export declare const formItemPropKeys: ("label" | "size" | "first" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelPlacement" | "labelAlign" | "labelStyle" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback")[];
+export declare const formItemPropKeys: ("label" | "size" | "first" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelPlacement" | "labelAlign" | "labelStyle" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "labelProps")[];
 declare const _default: import("vue").DefineComponent<{
     readonly label: StringConstructor;
     readonly labelWidth: PropType<string | number>;
@@ -140,7 +141,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly requireMarkPlacement: PropType<"left" | "right">;
+    readonly requireMarkPlacement: PropType<"left" | "right" | "right-hanging">;
     readonly showFeedback: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -154,6 +155,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly labelProps: PropType<LabelHTMLAttributes>;
     readonly theme: PropType<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
@@ -249,21 +251,21 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--line-height': string;
-        '--blank-height': string;
-        '--label-font-size': string;
-        '--label-text-align': string;
-        '--label-height': string;
-        '--label-padding': string;
-        '--asterisk-color': string;
-        '--label-text-color': string;
-        '--feedback-padding': string;
-        '--feedback-font-size': string;
-        '--feedback-height': string;
-        '--feedback-text-color': string;
-        '--feedback-text-color-warning': string;
-        '--feedback-text-color-error': string;
+        '--n-bezier': string;
+        '--n-line-height': string;
+        '--n-blank-height': string;
+        '--n-label-font-size': string;
+        '--n-label-text-align': string;
+        '--n-label-height': string;
+        '--n-label-padding': string;
+        '--n-asterisk-color': string;
+        '--n-label-text-color': string;
+        '--n-feedback-padding': string;
+        '--n-feedback-font-size': string;
+        '--n-feedback-height': string;
+        '--n-feedback-text-color': string;
+        '--n-feedback-text-color-warning': string;
+        '--n-feedback-text-color-error': string;
     }>;
     validate: import("./interface").FormItemValidate;
     restoreValidation: () => void;
@@ -271,50 +273,50 @@ declare const _default: import("vue").DefineComponent<{
     internalValidate: FormItemInternalValidate;
     mergedSize: import("vue").ComputedRef<import("./interface").Size>;
     validationErrored: import("vue").Ref<boolean>;
-    mergedLabelStyle: import("vue").ComputedRef<(string | CSSProperties | undefined)[]>;
+    mergedLabelStyle: import("vue").ComputedRef<(import("vue").StyleValue | undefined)[]>;
     mergedLabelPlacement: import("vue").ComputedRef<LabelPlacement>;
     mergedLabelAlign: import("vue").ComputedRef<LabelAlign | undefined>;
     mergedShowRequireMark: import("vue").ComputedRef<boolean | undefined>;
-    mergedRequireMarkPlacement: import("vue").ComputedRef<"left" | "right" | undefined>;
+    mergedRequireMarkPlacement: import("vue").ComputedRef<"left" | "right" | "right-hanging">;
     mergedValidationStatus: import("vue").ComputedRef<"error" | "success" | "warning" | undefined>;
     mergedShowFeedback: import("vue").ComputedRef<boolean>;
     mergedShowLabel: import("vue").ComputedRef<boolean>;
+    labelElementRef: import("vue").Ref<HTMLLabelElement | null>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedRequired: import("vue").ComputedRef<boolean>;
     hasFeedback: import("vue").ComputedRef<number | true>;
     feedbackId: import("vue").Ref<string>;
     explains: import("vue").Ref<string[]>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly label?: unknown;
-    readonly labelWidth?: unknown;
-    readonly labelStyle?: unknown;
-    readonly labelAlign?: unknown;
-    readonly labelPlacement?: unknown;
-    readonly path?: unknown;
-    readonly first?: unknown;
-    readonly rulePath?: unknown;
-    readonly required?: unknown;
-    readonly showRequireMark?: unknown;
-    readonly requireMarkPlacement?: unknown;
-    readonly showFeedback?: unknown;
-    readonly rule?: unknown;
-    readonly size?: unknown;
-    readonly ignorePathChange?: unknown;
-    readonly validationStatus?: unknown;
-    readonly feedback?: unknown;
-    readonly showLabel?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    first: boolean;
-    required: boolean;
-    ignorePathChange: boolean;
-} & {
-    label?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    path?: string | undefined;
-    theme?: import("../../_mixins").Theme<"Form", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    readonly label: StringConstructor;
+    readonly labelWidth: PropType<string | number>;
+    readonly labelStyle: PropType<string | CSSProperties>;
+    readonly labelAlign: PropType<LabelAlign>;
+    readonly labelPlacement: PropType<LabelPlacement>;
+    readonly path: StringConstructor;
+    readonly first: BooleanConstructor;
+    readonly rulePath: StringConstructor;
+    readonly required: BooleanConstructor;
+    readonly showRequireMark: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly requireMarkPlacement: PropType<"left" | "right" | "right-hanging">;
+    readonly showFeedback: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly rule: PropType<FormItemRule | FormItemRule[]>;
+    readonly size: PropType<"small" | "medium" | "large">;
+    readonly ignorePathChange: BooleanConstructor;
+    readonly validationStatus: PropType<"error" | "success" | "warning">;
+    readonly feedback: StringConstructor;
+    readonly showLabel: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly labelProps: PropType<LabelHTMLAttributes>;
+    readonly theme: PropType<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
         blankHeightLarge: string;
@@ -344,8 +346,8 @@ declare const _default: import("vue").DefineComponent<{
         labelPaddingHorizontal: string;
         labelTextAlignVertical: string;
         labelTextAlignHorizontal: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
         blankHeightLarge: string;
@@ -375,8 +377,8 @@ declare const _default: import("vue").DefineComponent<{
         labelPaddingHorizontal: string;
         labelTextAlignVertical: string;
         labelTextAlignHorizontal: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
         blankHeightLarge: string;
@@ -406,20 +408,8 @@ declare const _default: import("vue").DefineComponent<{
         labelPaddingHorizontal: string;
         labelTextAlignVertical: string;
         labelTextAlignHorizontal: string;
-    }, any>> | undefined;
-    labelPlacement?: LabelPlacement | undefined;
-    labelAlign?: LabelAlign | undefined;
-    labelStyle?: string | CSSProperties | undefined;
-    labelWidth?: string | number | undefined;
-    showRequireMark?: boolean | undefined;
-    requireMarkPlacement?: "left" | "right" | undefined;
-    showFeedback?: boolean | undefined;
-    showLabel?: boolean | undefined;
-    rulePath?: string | undefined;
-    rule?: FormItemRule | FormItemRule[] | undefined;
-    validationStatus?: "error" | "success" | "warning" | undefined;
-    feedback?: string | undefined;
-}>, {
+    }, any>>>;
+}>>, {
     first: boolean;
     required: boolean;
     showRequireMark: boolean | undefined;

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;
@@ -243,42 +250,51 @@ exports.default = (0, vue_1.defineComponent)({
                         mergedLabelTextAlign === 'right' ? 'flex-end' : 'flex-start';
                 }
                 const cssVars = {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--line-height': lineHeight,
-                    '--blank-height': blankHeight,
-                    '--label-font-size': labelFontSize,
-                    '--label-text-align': mergedLabelTextAlign,
-                    '--label-height': labelHeight,
-                    '--label-padding': labelPadding,
-                    '--asterisk-color': asteriskColor,
-                    '--label-text-color': labelTextColor,
-                    '--feedback-padding': feedbackPadding,
-                    '--feedback-font-size': feedbackFontSize,
-                    '--feedback-height': feedbackHeight,
-                    '--feedback-text-color': feedbackTextColor,
-                    '--feedback-text-color-warning': feedbackTextColorWarning,
-                    '--feedback-text-color-error': feedbackTextColorError
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-line-height': lineHeight,
+                    '--n-blank-height': blankHeight,
+                    '--n-label-font-size': labelFontSize,
+                    '--n-label-text-align': mergedLabelTextAlign,
+                    '--n-label-height': labelHeight,
+                    '--n-label-padding': labelPadding,
+                    '--n-asterisk-color': asteriskColor,
+                    '--n-label-text-color': labelTextColor,
+                    '--n-feedback-padding': feedbackPadding,
+                    '--n-feedback-font-size': feedbackFontSize,
+                    '--n-feedback-height': feedbackHeight,
+                    '--n-feedback-text-color': feedbackTextColor,
+                    '--n-feedback-text-color-warning': feedbackTextColorWarning,
+                    '--n-feedback-text-color-error': feedbackTextColorError
                 };
                 return cssVars;
             }) });
     },
     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])
+                    ? $slots.label
+                        ? $slots.label()
+                        : 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])
+                    ? $slots.label
+                        ? $slots.label()
+                        : this.label
                     : null)) : null,
             (0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-form-item-blank`,
@@ -288,9 +304,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;
@@ -277,47 +279,44 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: 0;
     };
 }, {
+    formItemInstRef: import("vue").Ref<{
+        validate: import("./interface").FormItemValidate;
+        restoreValidation: () => void;
+        path?: string | undefined;
+        internalValidate: import("./interface").FormItemInternalValidate;
+    } | null>;
     validate: import("./interface").FormItemValidate;
     restoreValidation: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly label?: unknown;
-    readonly labelWidth?: unknown;
-    readonly labelStyle?: unknown;
-    readonly labelAlign?: unknown;
-    readonly labelPlacement?: unknown;
-    readonly path?: unknown;
-    readonly first?: unknown;
-    readonly rulePath?: unknown;
-    readonly required?: unknown;
-    readonly showRequireMark?: unknown;
-    readonly requireMarkPlacement?: unknown;
-    readonly showFeedback?: unknown;
-    readonly rule?: unknown;
-    readonly size?: unknown;
-    readonly ignorePathChange?: unknown;
-    readonly validationStatus?: unknown;
-    readonly feedback?: unknown;
-    readonly showLabel?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-    readonly span?: unknown;
-    readonly push?: unknown;
-    readonly pull?: unknown;
-    readonly offset?: unknown;
-} & {
-    push: import("../../legacy-grid/src/interface").Span;
-    first: boolean;
-    offset: import("../../legacy-grid/src/interface").Span;
-    span: import("../../legacy-grid/src/interface").Span;
-    required: boolean;
-    ignorePathChange: boolean;
-    pull: import("../../legacy-grid/src/interface").Span;
-} & {
-    label?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    path?: string | undefined;
-    theme?: import("../../_mixins").Theme<"Form", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly label: StringConstructor;
+    readonly labelWidth: import("vue").PropType<string | number>;
+    readonly labelStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    readonly labelAlign: import("vue").PropType<import("./interface").LabelAlign>;
+    readonly labelPlacement: import("vue").PropType<import("./interface").LabelPlacement>;
+    readonly path: StringConstructor;
+    readonly first: BooleanConstructor;
+    readonly rulePath: StringConstructor;
+    readonly required: BooleanConstructor;
+    readonly showRequireMark: {
+        readonly type: import("vue").PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly requireMarkPlacement: import("vue").PropType<"left" | "right" | "right-hanging">;
+    readonly showFeedback: {
+        readonly type: import("vue").PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
+    readonly size: import("vue").PropType<"small" | "medium" | "large">;
+    readonly ignorePathChange: BooleanConstructor;
+    readonly validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    readonly feedback: StringConstructor;
+    readonly showLabel: {
+        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;
         blankHeightLarge: string;
@@ -347,8 +346,8 @@ declare const _default: import("vue").DefineComponent<{
         labelPaddingHorizontal: string;
         labelTextAlignVertical: string;
         labelTextAlignHorizontal: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+    }, any>>;
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
         blankHeightLarge: string;
@@ -378,8 +377,8 @@ declare const _default: import("vue").DefineComponent<{
         labelPaddingHorizontal: string;
         labelTextAlignVertical: string;
         labelTextAlignHorizontal: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+    }, any>>>;
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
         blankHeightLarge: string;
@@ -409,20 +408,24 @@ declare const _default: import("vue").DefineComponent<{
         labelPaddingHorizontal: string;
         labelTextAlignVertical: string;
         labelTextAlignHorizontal: string;
-    }, any>> | undefined;
-    labelPlacement?: import("./interface").LabelPlacement | undefined;
-    labelAlign?: import("./interface").LabelAlign | undefined;
-    labelStyle?: string | import("vue").CSSProperties | undefined;
-    labelWidth?: string | number | undefined;
-    showRequireMark?: boolean | undefined;
-    requireMarkPlacement?: "left" | "right" | 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;
-}>, {
+    }, any>>>;
+    readonly span: {
+        readonly type: import("vue").PropType<import("../../legacy-grid/src/interface").Span>;
+        readonly default: 1;
+    };
+    readonly push: {
+        readonly type: import("vue").PropType<import("../../legacy-grid/src/interface").Span>;
+        readonly default: 0;
+    };
+    readonly pull: {
+        readonly type: import("vue").PropType<import("../../legacy-grid/src/interface").Span>;
+        readonly default: 0;
+    };
+    readonly offset: {
+        readonly type: import("vue").PropType<import("../../legacy-grid/src/interface").Span>;
+        readonly default: 0;
+    };
+}>>, {
     push: import("../../legacy-grid/src/interface").Span;
     first: boolean;
     offset: import("../../legacy-grid/src/interface").Span;

package/lib/form/src/FormItemCol.js

@@ -44,6 +44,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
         };
         return {
+            formItemInstRef,
             validate,
             restoreValidation
         };