naive-ui 2.22.0 → 2.24.0

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,16 +29,17 @@ 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;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -61,15 +62,15 @@ export declare const formItemProps: {
         labelTextAlignHorizontal: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -92,15 +93,15 @@ export declare const formItemProps: {
         labelTextAlignHorizontal: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: 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,16 +155,17 @@ 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;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -186,15 +188,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -217,15 +219,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: 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,14 +273,15 @@ 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>;
@@ -303,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;
@@ -315,15 +319,15 @@ declare const _default: import("vue").DefineComponent<{
     size?: "small" | "medium" | "large" | undefined;
     path?: string | undefined;
     theme?: import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -346,15 +350,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any> | undefined;
     themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -377,15 +381,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any>> | undefined;
     builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -412,13 +416,14 @@ declare const _default: import("vue").DefineComponent<{
     labelStyle?: string | 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?: FormItemRule | FormItemRule[] | undefined;
     validationStatus?: "error" | "success" | "warning" | undefined;
     feedback?: string | undefined;
+    labelProps?: LabelHTMLAttributes | undefined;
 }>, {
     first: boolean;
     required: boolean;

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,40 +250,45 @@ 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])
                     : 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,16 +27,17 @@ 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;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -59,15 +60,15 @@ export declare const formItemColProps: {
         labelTextAlignHorizontal: string;
     }, any>>;
     readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -90,15 +91,15 @@ export declare const formItemColProps: {
         labelTextAlignHorizontal: string;
     }, any>>>;
     readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: 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,16 +168,17 @@ 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;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -199,15 +201,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any>>;
     readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -230,15 +232,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any>>>;
     readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -277,6 +279,12 @@ 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<{
@@ -298,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;
@@ -318,15 +327,15 @@ declare const _default: import("vue").DefineComponent<{
     size?: "small" | "medium" | "large" | undefined;
     path?: string | undefined;
     theme?: import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -349,15 +358,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any> | undefined;
     themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -380,15 +389,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any>> | undefined;
     builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -415,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/FormItemCol.js

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