naive-ui 2.23.2 → 2.24.0

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

@@ -29,37 +29,18 @@ declare const drawerProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly zIndex: NumberConstructor;
     readonly onMaskClick: PropType<(e: MouseEvent) => void>;
     readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     /** @deprecated */
-    readonly drawerStyle: {
-        readonly type: PropType<string | CSSProperties | undefined>;
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    /** @deprecated */
-    readonly drawerClass: {
-        readonly type: PropType<string | undefined>;
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    readonly target: {
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    readonly onShow: {
-        readonly type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onHide: {
-        readonly type: PropType<MaybeArray<(value: false) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly drawerStyle: PropType<string | CSSProperties>;
+    readonly drawerClass: StringConstructor;
+    readonly target: null;
+    readonly onShow: PropType<(value: boolean) => void>;
+    readonly onHide: PropType<(value: boolean) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Drawer", {
         bodyPadding: string;
         headerPadding: string;
@@ -158,37 +139,18 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly zIndex: NumberConstructor;
     readonly onMaskClick: PropType<(e: MouseEvent) => void>;
     readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     /** @deprecated */
-    readonly drawerStyle: {
-        readonly type: PropType<string | CSSProperties | undefined>;
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    /** @deprecated */
-    readonly drawerClass: {
-        readonly type: PropType<string | undefined>;
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    readonly target: {
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    readonly onShow: {
-        readonly type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onHide: {
-        readonly type: PropType<MaybeArray<(value: false) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly drawerStyle: PropType<string | CSSProperties>;
+    readonly drawerClass: StringConstructor;
+    readonly target: null;
+    readonly onShow: PropType<(value: boolean) => void>;
+    readonly onHide: PropType<(value: boolean) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Drawer", {
         bodyPadding: string;
         headerPadding: string;
@@ -263,6 +225,7 @@ declare const _default: import("vue").DefineComponent<{
     namespace: import("vue").ComputedRef<string | undefined>;
     mergedBodyStyle: import("vue").ComputedRef<(string | CSSProperties | undefined)[]>;
     handleMaskClick: (e: MouseEvent) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;
@@ -430,6 +393,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly to?: unknown;
     readonly displayDirective?: unknown;
     readonly nativeScrollbar?: unknown;
+    readonly zIndex?: unknown;
     readonly onMaskClick?: unknown;
     readonly scrollbarProps?: unknown;
     readonly contentStyle?: unknown;
@@ -452,7 +416,8 @@ declare const _default: import("vue").DefineComponent<{
     maskClosable: boolean;
     nativeScrollbar: boolean;
 } & {
-    target?: undefined;
+    zIndex?: number | undefined;
+    target?: any;
     to?: string | HTMLElement | undefined;
     theme?: import("../../_mixins").Theme<"Drawer", {
         bodyPadding: string;
@@ -526,8 +491,8 @@ declare const _default: import("vue").DefineComponent<{
     contentStyle?: string | CSSProperties | undefined;
     "onUpdate:show"?: MaybeArray<(value: boolean) => void> | undefined;
     onUpdateShow?: MaybeArray<(value: boolean) => void> | undefined;
-    onShow?: MaybeArray<(value: boolean) => void> | undefined;
-    onHide?: MaybeArray<(value: false) => void> | undefined;
+    onShow?: ((value: boolean) => void) | undefined;
+    onHide?: ((value: boolean) => void) | undefined;
     onMaskClick?: ((e: MouseEvent) => void) | undefined;
     scrollbarProps?: ScrollbarProps | undefined;
     drawerStyle?: string | CSSProperties | undefined;
@@ -536,14 +501,9 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean;
     height: string | number;
     width: string | number;
-    target: undefined;
     placement: Placement;
     displayDirective: "show" | "if";
-    onShow: MaybeArray<(value: boolean) => void> | undefined;
-    onHide: MaybeArray<(value: false) => void> | undefined;
     maskClosable: boolean;
     nativeScrollbar: boolean;
-    drawerStyle: string | CSSProperties | undefined;
-    drawerClass: string | undefined;
 }>;
 export default _default;

package/lib/drawer/src/Drawer.js

@@ -31,56 +31,33 @@ const drawerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, nativeScrollbar: {
         type: Boolean,
         default: true
-    }, onMaskClick: Function, scrollbarProps: Object, contentStyle: [Object, String], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 
+    }, zIndex: Number, onMaskClick: Function, scrollbarProps: Object, contentStyle: [Object, String], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 
     /** @deprecated */
-    drawerStyle: {
-        type: [Object, String],
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                (0, _utils_1.warn)('drawer', '`drawer-style` is deprecated, please use `style` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, 
-    /** @deprecated */
-    drawerClass: {
-        type: String,
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                (0, _utils_1.warn)('drawer', '`drawer-class` is deprecated, please use `class` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, target: {
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                (0, _utils_1.warn)('drawer', '`target` is deprecated, please use `to` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, onShow: {
-        type: [Function, Array],
-        validator: () => {
-            (0, _utils_1.warn)('drawer', '`on-show` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    }, onHide: {
-        type: [Function, Array],
-        validator: () => {
-            (0, _utils_1.warn)('drawer', '`on-hide` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    } });
+    drawerStyle: [String, Object], drawerClass: String, target: null, onShow: Function, onHide: Function });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Drawer',
     inheritAttrs: false,
     props: drawerProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.drawerStyle !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`drawer-style` is deprecated, please use `style` instead.');
+                }
+                if (props.drawerClass !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`drawer-class` is deprecated, please use `class` instead.');
+                }
+                if (props.target !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`target` is deprecated, please use `to` instead.');
+                }
+                if (props.onShow !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`on-show` is deprecated, please use `on-update:show` instead.');
+                }
+                if (props.onHide !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`on-hide` is deprecated, please use `on-update:show` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
         const isMountedRef = (0, vooks_1.useIsMounted)();
         const themeRef = (0, _mixins_1.useTheme)('Drawer', 'Drawer', index_cssr_1.default, styles_1.drawerLight, props, mergedClsPrefixRef);
@@ -115,6 +92,11 @@ exports.default = (0, vue_1.defineComponent)({
             if (onMaskClick)
                 onMaskClick(e);
         }
+        function handleKeydown(e) {
+            if (e.code === 'Escape') {
+                doUpdateShow(false);
+            }
+        }
         function doUpdateShow(show) {
             const { onHide, onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
             if (onUpdateShow)
@@ -136,6 +118,7 @@ exports.default = (0, vue_1.defineComponent)({
             namespace: namespaceRef,
             mergedBodyStyle: mergedBodyStyleRef,
             handleMaskClick,
+            handleKeydown,
             mergedTheme: themeRef,
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { color, textColor, boxShadow, lineHeight, headerPadding, footerPadding, bodyPadding, titleFontSize, titleTextColor, titleFontWeight, headerBorderBottom, footerBorderTop, closeColor, closeColorHover, closeColorPressed, closeSize } } = themeRef.value;
@@ -168,11 +151,11 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefix } = this;
         return ((0, vue_1.h)(vueuc_1.VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
-                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-drawer-container`, this.namespace], style: this.cssVars },
+                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-drawer-container`, this.namespace], style: this.cssVars, onKeydown: this.handleKeydown, role: "none" },
                     (0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.isMounted }, {
-                        default: () => this.show ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-mask`, onClick: this.handleMaskClick })) : null
+                        default: () => this.show ? ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-drawer-mask`, onClick: this.handleMaskClick })) : null
                     }),
-                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar }), this.$slots)), [[vdirs_1.zindexable, { enabled: this.show }]]);
+                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
             }
         }));
     }

package/lib/drawer/src/DrawerBodyWrapper.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
+const vueuc_1 = require("vueuc");
 const _internal_1 = require("../../_internal");
 const interface_1 = require("../../popover/src/interface");
 const interface_2 = require("../../modal/src/interface");
@@ -63,19 +64,26 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         const { $slots, mergedClsPrefix } = this;
         return this.displayDirective === 'show' || this.displayed || this.show
-            ? (0, vue_1.withDirectives)((0, vue_1.h)("div", null,
-                (0, vue_1.h)(vue_1.Transition, { name: this.transitionName, appear: this.isMounted, onAfterLeave: this.handleAfterLeave }, {
-                    default: () => (0, vue_1.withDirectives)((0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
-                        ref: 'bodyRef',
-                        class: [
-                            `${mergedClsPrefix}-drawer`,
-                            `${mergedClsPrefix}-drawer--${this.placement}-placement`,
-                            this.nativeScrollbar &&
-                                `${mergedClsPrefix}-drawer--native-scrollbar`
-                        ]
-                    }), [
-                        this.nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-content-wrapper`, style: this.contentStyle }, $slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { contentStyle: this.contentStyle, contentClass: `${mergedClsPrefix}-drawer-content-wrapper`, theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar }), $slots))
-                    ]), [[vue_1.vShow, this.show]])
+            ? (0, vue_1.withDirectives)(
+            /* Keep the wrapper dom. Make sure the drawer has a host.
+              Nor the detached content will disappear without transition */
+            (0, vue_1.h)("div", { role: "none" },
+                (0, vue_1.h)(vueuc_1.VFocusTrap, { active: this.show, focusFirstDescendant: true }, {
+                    default: () => ((0, vue_1.h)(vue_1.Transition, { name: this.transitionName, appear: this.isMounted, onAfterLeave: this.handleAfterLeave }, {
+                        default: () => (0, vue_1.withDirectives)((0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
+                            role: 'dialog',
+                            ref: 'bodyRef',
+                            'aria-modal': 'true',
+                            class: [
+                                `${mergedClsPrefix}-drawer`,
+                                `${mergedClsPrefix}-drawer--${this.placement}-placement`,
+                                this.nativeScrollbar &&
+                                    `${mergedClsPrefix}-drawer--native-scrollbar`
+                            ]
+                        }), [
+                            this.nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-content-wrapper`, style: this.contentStyle, role: "none" }, $slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { contentStyle: this.contentStyle, contentClass: `${mergedClsPrefix}-drawer-content-wrapper`, theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar }), $slots))
+                        ]), [[vue_1.vShow, this.show]])
+                    }))
                 })), [
                 [
                     vue_1.vShow,

package/lib/drawer/src/DrawerContent.js

@@ -36,16 +36,16 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { title, mergedClsPrefix, nativeScrollbar, mergedTheme, bodyStyle, bodyContentStyle, headerStyle, footerStyle, scrollbarProps, closable, $slots } = this;
-        return ((0, vue_1.h)("div", { class: [
+        return ((0, vue_1.h)("div", { role: "none", class: [
                 `${mergedClsPrefix}-drawer-content`,
                 nativeScrollbar &&
                     `${mergedClsPrefix}-drawer-content--native-scrollbar`
             ] },
-            $slots.header || title || closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header`, style: headerStyle },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header__main` }, $slots.header !== undefined ? $slots.header() : title),
+            $slots.header || title || closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header`, style: headerStyle, role: "none" },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header__main`, role: "heading", "aria-level": "1" }, $slots.header !== undefined ? $slots.header() : title),
                 closable && ((0, vue_1.h)(_internal_1.NBaseClose, { onClick: this.handleCloseClick, clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-drawer-header__close` })))) : null,
-            nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body`, style: bodyStyle },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body-content-wrapper`, style: bodyContentStyle }, $slots))) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({ themeOverrides: mergedTheme.peerOverrides.Scrollbar, theme: mergedTheme.peers.Scrollbar }, scrollbarProps, { class: `${mergedClsPrefix}-drawer-body`, contentClass: `${mergedClsPrefix}-drawer-body-content-wrapper`, contentStyle: bodyContentStyle }), $slots)),
-            $slots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-footer`, style: footerStyle }, $slots.footer())) : null));
+            nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body`, style: bodyStyle, role: "none" },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body-content-wrapper`, style: bodyContentStyle, role: "none" }, $slots))) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({ themeOverrides: mergedTheme.peerOverrides.Scrollbar, theme: mergedTheme.peers.Scrollbar }, scrollbarProps, { class: `${mergedClsPrefix}-drawer-body`, contentClass: `${mergedClsPrefix}-drawer-body-content-wrapper`, contentStyle: bodyContentStyle }), $slots)),
+            $slots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-footer`, style: footerStyle, role: "none" }, $slots.footer())) : null));
     }
 });

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

@@ -321,6 +321,7 @@ declare const dropdownProps: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    readonly internalTrapFocus: BooleanConstructor;
     readonly onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly arrow: {
@@ -633,6 +634,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    readonly internalTrapFocus: BooleanConstructor;
     readonly onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly arrow: {
@@ -871,6 +873,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly to?: unknown;
     readonly internalSyncTargetWithParent?: unknown;
     readonly internalInheritedEventHandlers?: unknown;
+    readonly internalTrapFocus?: unknown;
     readonly onShow?: unknown;
     readonly onHide?: unknown;
     readonly arrow?: unknown;
@@ -889,6 +892,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -1146,6 +1150,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];

package/lib/form/src/Feedbacks.js

@@ -13,7 +13,10 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         var _a;
-        const { feedback, clsPrefix } = this;
+        const { $slots, feedback, clsPrefix } = this;
+        if ($slots.default) {
+            return $slots.default();
+        }
         return feedback ? ((0, vue_1.h)("div", { key: feedback, class: `${clsPrefix}-form-item-feedback__line` }, feedback)) : ((_a = this.explains) === null || _a === void 0 ? void 0 : _a.map((explain) => ((0, vue_1.h)("div", { key: explain, class: `${clsPrefix}-form-item-feedback__line` }, explain))));
     }
 });

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

@@ -1,5 +1,5 @@
 import { PropType, ExtractPropTypes } from 'vue';
-import { FormRules, LabelAlign, LabelPlacement, FormInst } from './interface';
+import { FormRules, LabelAlign, LabelPlacement, FormInst, Size } from './interface';
 import { ExtractPublicPropTypes } from '../../_utils';
 declare const formProps: {
     readonly inline: BooleanConstructor;
@@ -15,12 +15,12 @@ declare const formProps: {
     };
     readonly rules: PropType<FormRules>;
     readonly disabled: BooleanConstructor;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<Size>;
     readonly showRequireMark: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly requireMarkPlacement: PropType<"left" | "right">;
+    readonly requireMarkPlacement: PropType<"left" | "right" | "right-hanging">;
     readonly showFeedback: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -143,12 +143,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly rules: PropType<FormRules>;
     readonly disabled: BooleanConstructor;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<Size>;
     readonly showRequireMark: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly requireMarkPlacement: PropType<"left" | "right">;
+    readonly requireMarkPlacement: PropType<"left" | "right" | "right-hanging">;
     readonly showFeedback: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -281,7 +281,7 @@ declare const _default: import("vue").DefineComponent<{
     model: Record<string, any>;
     showFeedback: boolean;
 } & {
-    size?: "small" | "medium" | "large" | undefined;
+    size?: Size | undefined;
     theme?: import("../../_mixins").Theme<"Form", {
         blankHeightSmall: string;
         blankHeightMedium: string;
@@ -379,7 +379,7 @@ declare const _default: import("vue").DefineComponent<{
     labelWidth?: string | number | undefined;
     rules?: FormRules | undefined;
     showRequireMark?: boolean | undefined;
-    requireMarkPlacement?: "left" | "right" | undefined;
+    requireMarkPlacement?: "left" | "right" | "right-hanging" | undefined;
     showLabel?: boolean | undefined;
 }>, {
     inline: boolean;

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;
@@ -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;
@@ -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;