naive-ui 2.32.2 → 2.33.0

package/es/_internal/select-menu/src/SelectOption.js

@@ -4,11 +4,10 @@ import { render, mergeEventHandlers } from '../../../_utils';
 import { CheckmarkIcon } from '../../icons';
 import { NBaseIcon } from '../../icon';
 import { internalSelectionMenuInjectionKey } from './interface';
-const checkMarkIcon = h(CheckmarkIcon);
 function renderCheckMark(show, clsPrefix) {
     return (h(Transition, { name: "fade-in-scale-up-transition" }, {
         default: () => show ? (h(NBaseIcon, { clsPrefix: clsPrefix, class: `${clsPrefix}-base-select-option__check` }, {
-            default: () => checkMarkIcon
+            default: () => h(CheckmarkIcon)
         })) : null
     }));
 }

package/es/_utils/cssr/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { CssRender } from 'css-render';
-import BemPlugin from '@css-render/plugin-bem';
+import { plugin as BemPlugin } from '@css-render/plugin-bem';
 const namespace = 'n';
 const prefix = `.${namespace}-`;
 const elementPrefix = '__';

package/es/card/src/Card.d.ts

@@ -32,7 +32,7 @@ export declare const cardBaseProps: {
     readonly role: StringConstructor;
     readonly onClose: PropType<MaybeArray<() => void>>;
 };
-export declare const cardBasePropKeys: ("size" | "title" | "role" | "bordered" | "closable" | "contentStyle" | "onClose" | "headerStyle" | "footerStyle" | "hoverable" | "headerExtraStyle" | "embedded" | "segmented")[];
+export declare const cardBasePropKeys: ("size" | "title" | "role" | "bordered" | "closable" | "contentStyle" | "onClose" | "headerStyle" | "footerStyle" | "hoverable" | "embedded" | "headerExtraStyle" | "segmented")[];
 export declare const cardProps: {
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
@@ -66,6 +66,8 @@ export declare const cardProps: {
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -101,6 +103,8 @@ export declare const cardProps: {
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -136,6 +140,8 @@ export declare const cardProps: {
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -199,6 +205,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -234,6 +242,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -269,6 +279,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -413,6 +425,8 @@ declare const _default: import("vue").DefineComponent<{
             colorPopover: string;
             colorTarget: string;
             colorEmbedded: string;
+            colorEmbeddedModal: string;
+            colorEmbeddedPopover: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -453,6 +467,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-color': string;
         '--n-color-modal': string;
         '--n-color-popover': string;
+        '--n-color-embedded': string;
+        '--n-color-embedded-modal': string;
+        '--n-color-embedded-popover': string;
         '--n-color-target': string;
         '--n-text-color': string;
         '--n-line-height': string;
@@ -510,6 +527,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -545,6 +564,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -580,6 +601,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;

package/es/card/src/Card.js

@@ -49,14 +49,17 @@ export default defineComponent({
         const rtlEnabledRef = useRtl('Card', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { size } = props;
-            const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, lineHeight, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, closeBorderRadius, closeIconSize, closeSize, boxShadow, colorPopover, colorEmbedded, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, lineHeight, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, closeBorderRadius, closeIconSize, closeSize, boxShadow, colorPopover, colorEmbedded, colorEmbeddedModal, colorEmbeddedPopover, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = getPadding(padding);
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-border-radius': borderRadius,
-                '--n-color': props.embedded ? colorEmbedded : color,
+                '--n-color': color,
                 '--n-color-modal': colorModal,
                 '--n-color-popover': colorPopover,
+                '--n-color-embedded': colorEmbedded,
+                '--n-color-embedded-modal': colorEmbeddedModal,
+                '--n-color-embedded-popover': colorEmbeddedPopover,
                 '--n-color-target': colorTarget,
                 '--n-text-color': textColor,
                 '--n-line-height': lineHeight,
@@ -97,11 +100,12 @@ export default defineComponent({
         };
     },
     render() {
-        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, onRender, $slots } = this;
+        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, onRender, embedded, $slots } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { class: [
                 `${mergedClsPrefix}-card`,
                 this.themeClass,
+                embedded && `${mergedClsPrefix}-card--embedded`,
                 {
                     [`${mergedClsPrefix}-card--rtl`]: rtlEnabled,
                     [`${mergedClsPrefix}-card--content${typeof segmented !== 'boolean' && segmented.content === 'soft'
@@ -118,7 +122,7 @@ export default defineComponent({
             resolveWrappedSlot($slots.cover, (children) => children && (h("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, children))),
             resolveWrappedSlot($slots.header, (children) => {
                 return children || this.title || this.closable ? (h("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
-                    h("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, children || [this.title]),
+                    h("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, children || this.title),
                     resolveWrappedSlot($slots['header-extra'], (children) => children && (h("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, children))),
                     this.closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick, absolute: true })) : null)) : null;
             }),

package/es/card/src/styles/index.cssr.js

@@ -23,6 +23,9 @@ import { asModal, c, cB, cE, cM, insideModal, insidePopover } from '../../../_ut
 // --n-close-icon-color-pressed
 // --n-border-color
 // --n-box-shadow
+// --n-color-embedded
+// --n-color-embedded-modal
+// --n-color-embedded-popover
 
 export default c([cB('card', `
  font-size: var(--n-font-size);
@@ -41,7 +44,9 @@ export default c([cB('card', `
  background-color .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier),
  border-color .3s var(--n-bezier);
- `, [cM('hoverable', [c('&:hover', 'box-shadow: var(--n-box-shadow);')]), cM('content-segmented', [c('>', [cE('content', {
+ `, [asModal({
+  background: 'var(--n-color-modal)'
+}), cM('hoverable', [c('&:hover', 'box-shadow: var(--n-box-shadow);')]), cM('content-segmented', [c('>', [cE('content', {
   paddingTop: 'var(--n-padding-bottom)'
 })])]), cM('content-soft-segmented', [c('>', [cE('content', `
  margin: 0 var(--n-padding-left);
@@ -115,10 +120,14 @@ export default c([cB('card', `
   transition: 'border-color 0.3s var(--n-bezier)'
 }, [c('&:not(:first-child)', {
   borderTop: '1px solid var(--n-border-color)'
-})])])])]), insideModal(cB('card', {
-  background: 'var(--n-color-modal)'
-})), insidePopover(cB('card', {
-  background: 'var(--n-color-popover)'
-})), cB('card', [asModal({
-  background: 'var(--n-color-modal)'
-})])]);
+})])])]), cM('embedded', `
+ background-color: var(--n-color-embedded);
+ `)]), insideModal(cB('card', `
+ background: var(--n-color-modal);
+ `, [cM('embedded', `
+ background-color: var(--n-color-embedded-modal);
+ `)])), insidePopover(cB('card', `
+ background: var(--n-color-popover);
+ `, [cM('embedded', `
+ background-color: var(--n-color-embedded-popover);
+ `)]))]);

package/es/card/styles/dark.js

@@ -5,8 +5,10 @@ const cardDark = {
     common: commonDark,
     self(vars) {
         const commonSelf = self(vars);
-        const { cardColor } = vars;
+        const { cardColor, modalColor, popoverColor } = vars;
         commonSelf.colorEmbedded = cardColor;
+        commonSelf.colorEmbeddedModal = modalColor;
+        commonSelf.colorEmbeddedPopover = popoverColor;
         return commonSelf;
     }
 };

package/es/card/styles/light.d.ts

@@ -7,6 +7,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     colorPopover: string;
     colorTarget: string;
     colorEmbedded: string;
+    colorEmbeddedModal: string;
+    colorEmbeddedPopover: string;
     textColor: string;
     titleTextColor: string;
     borderColor: string;

package/es/card/styles/light.js

@@ -2,7 +2,7 @@ import { commonLight } from '../../_styles/common';
 import commonVariables from './_common';
 export const self = (vars) => {
     const { primaryColor, borderRadius, lineHeight, fontSize, cardColor, textColor2, textColor1, dividerColor, fontWeightStrong, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, modalColor, boxShadow1, popoverColor, actionColor } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, colorEmbedded: actionColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor, titleFontWeight: fontWeightStrong, closeColorHover,
+    return Object.assign(Object.assign({}, commonVariables), { lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, colorEmbedded: actionColor, colorEmbeddedModal: actionColor, colorEmbeddedPopover: actionColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor, titleFontWeight: fontWeightStrong, closeColorHover,
         closeColorPressed, closeBorderRadius: borderRadius, closeIconColor,
         closeIconColorHover,
         closeIconColorPressed, fontSizeSmall: fontSize, fontSizeMedium: fontSize, fontSizeLarge: fontSize, fontSizeHuge: fontSize, boxShadow: boxShadow1, borderRadius });

package/es/countdown/src/Countdown.js

@@ -20,7 +20,6 @@ export default defineComponent({
     props: countdownProps,
     setup(props) {
         let timerId = null;
-        let rafId = null;
         let elapsed = 0;
         let finished = false;
         // in ms
@@ -89,10 +88,6 @@ export default defineComponent({
                 window.clearTimeout(timerId);
                 timerId = null;
             }
-            if (rafId !== null) {
-                window.cancelAnimationFrame(rafId);
-                rafId = null;
-            }
         };
         onMounted(() => {
             watchEffect(() => {

package/es/data-table/src/use-sorter.js

@@ -159,7 +159,7 @@ export function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
             const columnToSort = dataRelatedColsRef.value.find((column) => column.type !== 'selection' &&
                 column.type !== 'expand' &&
                 column.key === columnKey);
-            if (!columnToSort || !columnToSort.sorter)
+            if (!(columnToSort === null || columnToSort === void 0 ? void 0 : columnToSort.sorter))
                 return;
             const sorter = columnToSort.sorter;
             deriveNextSorter({

package/es/dialog/index.d.ts

@@ -3,4 +3,4 @@ export { dialogProps } from './src/dialogProps';
 export type { DialogProps } from './src/dialogProps';
 export { NDialogProvider, dialogProviderProps } from './src/DialogProvider';
 export type { DialogProviderProps, DialogProviderInst, DialogOptions, DialogReactive, DialogApiInjection as DialogApi } from './src/DialogProvider';
-export { useDialog } from './src/use-dialog';
+export { useDialog, useDialogReactiveList } from './src/composables';

package/es/dialog/index.js

@@ -1,4 +1,4 @@
 export { NDialog } from './src/Dialog';
 export { dialogProps } from './src/dialogProps';
 export { NDialogProvider, dialogProviderProps } from './src/DialogProvider';
-export { useDialog } from './src/use-dialog';
+export { useDialog, useDialogReactiveList } from './src/composables';

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

@@ -1,5 +1,6 @@
 import { PropType, CSSProperties } from 'vue';
 export declare const exposedDialogEnvProps: {
+    readonly onAfterEnter: PropType<() => void>;
     readonly blockScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -56,6 +57,7 @@ export declare const NDialogEnvironment: import("vue").DefineComponent<{
         type: PropType<(key: string) => void>;
         required: true;
     };
+    onAfterEnter: PropType<() => void>;
     blockScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -121,6 +123,7 @@ export declare const NDialogEnvironment: import("vue").DefineComponent<{
         type: PropType<(key: string) => void>;
         required: true;
     };
+    onAfterEnter: PropType<() => void>;
     blockScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;

package/es/dialog/src/DialogEnvironment.js

@@ -5,7 +5,7 @@ import NModal from '../../modal/src/Modal';
 import { keep } from '../../_utils';
 import { NDialog } from './Dialog';
 import { dialogProps, dialogPropKeys } from './dialogProps';
-export const exposedDialogEnvProps = Object.assign(Object.assign({}, dialogProps), { blockScroll: { type: Boolean, default: true }, closeOnEsc: { type: Boolean, default: true }, onEsc: Function, autoFocus: {
+export const exposedDialogEnvProps = Object.assign(Object.assign({}, dialogProps), { onAfterEnter: Function, blockScroll: { type: Boolean, default: true }, closeOnEsc: { type: Boolean, default: true }, onEsc: Function, autoFocus: {
         type: Boolean,
         default: true
     }, internalStyle: [String, Object], maskClosable: {
@@ -100,7 +100,7 @@ export const NDialogEnvironment = defineComponent({
     },
     render() {
         const { handlePositiveClick, handleUpdateShow, handleNegativeClick, handleCloseClick, handleAfterLeave, handleMaskClick, handleEsc, to, maskClosable, show } = this;
-        return (h(NModal, { show: show, onUpdateShow: handleUpdateShow, onMaskClick: handleMaskClick, onEsc: handleEsc, to: to, maskClosable: maskClosable, onAfterLeave: handleAfterLeave, closeOnEsc: this.closeOnEsc, blockScroll: this.blockScroll, autoFocus: this.autoFocus, internalAppear: true, internalDialog: true }, {
+        return (h(NModal, { show: show, onUpdateShow: handleUpdateShow, onMaskClick: handleMaskClick, onEsc: handleEsc, to: to, maskClosable: maskClosable, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, closeOnEsc: this.closeOnEsc, blockScroll: this.blockScroll, autoFocus: this.autoFocus, internalAppear: true, internalDialog: true }, {
             default: () => (h(NDialog, Object.assign({}, keep(this.$props, dialogPropKeys), { style: this.internalStyle, onClose: handleCloseClick, onNegativeClick: handleNegativeClick, onPositiveClick: handlePositiveClick })))
         }));
     }

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

@@ -2,6 +2,7 @@ import { ExtractPropTypes, PropType, Ref, CSSProperties } from 'vue';
 import type { ExtractPublicPropTypes, Mutable } from '../../_utils';
 import { exposedDialogEnvProps } from './DialogEnvironment';
 export declare type DialogOptions = Mutable<Omit<Partial<ExtractPropTypes<typeof exposedDialogEnvProps>>, 'internalStyle'> & {
+    class?: any;
     style?: string | CSSProperties;
 }>;
 export declare type DialogReactive = {
@@ -23,6 +24,7 @@ export interface DialogProviderInjection {
         y: number;
     } | null>;
 }
+export declare type DialogReactiveListInjection = Ref<DialogReactive[]>;
 interface DialogInst {
     hide: () => void;
 }
@@ -42,6 +44,7 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
         type?: "default" | "error" | "info" | "success" | "warning" | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;
         icon?: (() => import("vue").VNodeChild) | undefined;
+        onAfterEnter?: (() => void) | undefined;
         title?: string | (() => import("vue").VNodeChild) | undefined;
         action?: (() => import("vue").VNodeChild) | undefined;
         autoFocus?: boolean | undefined;
@@ -736,6 +739,7 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
         onMaskClick?: ((e: MouseEvent) => void) | undefined;
         maskClosable?: boolean | undefined;
         closeOnEsc?: boolean | undefined;
+        class?: any;
         style?: any;
     }[]>;
     dialogInstRefs: Record<string, DialogInst>;

package/es/dialog/src/DialogProvider.js

@@ -3,7 +3,7 @@ import { createId } from 'seemly';
 import { useClicked, useClickPosition } from 'vooks';
 import { omit } from '../../_utils';
 import { NDialogEnvironment } from './DialogEnvironment';
-import { dialogApiInjectionKey, dialogProviderInjectionKey } from './context';
+import { dialogApiInjectionKey, dialogProviderInjectionKey, dialogReactiveListInjectionKey } from './context';
 export const dialogProviderProps = {
     injectionKey: String,
     to: [String, Object]
@@ -45,6 +45,7 @@ export const NDialogProvider = defineComponent({
             clickedRef: useClicked(64),
             clickPositionRef: useClickPosition()
         });
+        provide(dialogReactiveListInjectionKey, dialogListRef);
         return Object.assign(Object.assign({}, api), { dialogList: dialogListRef, dialogInstRefs,
             handleAfterLeave });
     },

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

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+import type { DialogApiInjection, DialogReactive } from './DialogProvider';
+export declare function useDialog(): DialogApiInjection;
+export declare function useDialogReactiveList(): Ref<readonly DialogReactive[]>;

package/es/dialog/src/composables.js

@@ -0,0 +1,17 @@
+import { inject } from 'vue';
+import { dialogApiInjectionKey, dialogReactiveListInjectionKey } from './context';
+import { throwError } from '../../_utils';
+export function useDialog() {
+    const dialog = inject(dialogApiInjectionKey, null);
+    if (dialog === null) {
+        throwError('use-dialog', 'No outer <n-dialog-provider /> founded.');
+    }
+    return dialog;
+}
+export function useDialogReactiveList() {
+    const dialogReactiveList = inject(dialogReactiveListInjectionKey, null);
+    if (dialogReactiveList === null) {
+        throwError('use-dialog-reactive-list', 'No outer <n-dialog-provider /> founded.');
+    }
+    return dialogReactiveList;
+}

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

@@ -1,3 +1,4 @@
-import type { DialogApiInjection, DialogProviderInjection } from './DialogProvider';
+import type { DialogApiInjection, DialogProviderInjection, DialogReactiveListInjection } from './DialogProvider';
 export declare const dialogProviderInjectionKey: import("vue").InjectionKey<DialogProviderInjection>;
 export declare const dialogApiInjectionKey: import("vue").InjectionKey<DialogApiInjection>;
+export declare const dialogReactiveListInjectionKey: import("vue").InjectionKey<DialogReactiveListInjection>;

package/es/dialog/src/context.js

@@ -1,3 +1,4 @@
 import { createInjectionKey } from '../../_utils';
 export const dialogProviderInjectionKey = createInjectionKey('n-dialog-provider');
 export const dialogApiInjectionKey = createInjectionKey('n-dialog-api');
+export const dialogReactiveListInjectionKey = createInjectionKey('n-dialog-reactive-list');

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

@@ -283,6 +283,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedValidationStatus: import("vue").ComputedRef<"error" | "success" | "warning" | undefined>;
     mergedShowFeedback: import("vue").ComputedRef<boolean>;
     mergedShowLabel: import("vue").ComputedRef<boolean>;
+    isAutoLabelWidth: import("vue").ComputedRef<boolean>;
     labelElementRef: import("vue").Ref<HTMLLabelElement | null>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedRequired: import("vue").ComputedRef<boolean>;

package/es/form/src/FormItem.js

@@ -249,8 +249,15 @@ export default defineComponent({
         };
         const labelElementRef = ref(null);
         onMounted(() => {
-            if (labelElementRef.value !== null) {
-                NForm === null || NForm === void 0 ? void 0 : NForm.deriveMaxChildLabelWidth(Number(getComputedStyle(labelElementRef.value).width.slice(0, -2)));
+            if (!formItemMiscRefs.isAutoLabelWidth.value)
+                return;
+            const labelElement = labelElementRef.value;
+            if (labelElement !== null) {
+                const memoizedWhitespace = labelElement.style.whiteSpace;
+                labelElement.style.whiteSpace = 'nowrap';
+                labelElement.style.width = '';
+                NForm === null || NForm === void 0 ? void 0 : NForm.deriveMaxChildLabelWidth(Number(getComputedStyle(labelElement).width.slice(0, -2)));
+                labelElement.style.whiteSpace = memoizedWhitespace;
             }
         });
         const cssVarsRef = computed(() => {
@@ -290,34 +297,37 @@ export default defineComponent({
         return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef, mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, feedbackId: feedbackIdRef, renderExplains: renderExplainsRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
-        var _a;
         const { $slots, mergedClsPrefix, mergedShowLabel, mergedShowRequireMark, mergedRequireMarkPlacement, onRender } = this;
         const renderedShowRequireMark = mergedShowRequireMark !== undefined
             ? mergedShowRequireMark
             : this.mergedRequired;
         onRender === null || onRender === void 0 ? void 0 : onRender();
+        const renderLabel = () => {
+            const labelText = this.$slots.label ? this.$slots.label() : this.label;
+            if (!labelText)
+                return null;
+            const textNode = (h("span", { class: `${mergedClsPrefix}-form-item-label__text` }, labelText));
+            const markNode = renderedShowRequireMark ? (h("span", { class: `${mergedClsPrefix}-form-item-label__asterisk` }, mergedRequireMarkPlacement !== 'left' ? '\u00A0*' : '*\u00A0')) : (mergedRequireMarkPlacement === 'right-hanging' && (h("span", { class: `${mergedClsPrefix}-form-item-label__asterisk-placeholder` }, '\u00A0*')));
+            let labelContent;
+            if (mergedRequireMarkPlacement === 'left') {
+                labelContent = [markNode, textNode];
+            }
+            else {
+                labelContent = [textNode, markNode];
+            }
+            const { labelProps } = this;
+            return (h("label", Object.assign({}, labelProps, { class: [labelProps === null || labelProps === void 0 ? void 0 : labelProps.class, `${mergedClsPrefix}-form-item-label`], style: this.mergedLabelStyle, ref: "labelElementRef" }), labelContent));
+        };
         return (h("div", { class: [
                 `${mergedClsPrefix}-form-item`,
                 this.themeClass,
                 `${mergedClsPrefix}-form-item--${this.mergedSize}-size`,
                 `${mergedClsPrefix}-form-item--${this.mergedLabelPlacement}-labelled`,
+                this.isAutoLabelWidth &&
+                    `${mergedClsPrefix}-form-item--auto-label-width`,
                 !mergedShowLabel && `${mergedClsPrefix}-form-item--no-label`
             ], style: this.cssVars },
-            mergedShowLabel && (this.label || $slots.label) ? (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'
-                    ? $slots.label
-                        ? $slots.label()
-                        : this.label
-                    : null,
-                renderedShowRequireMark ? (h("span", { class: `${mergedClsPrefix}-form-item-label__asterisk` }, mergedRequireMarkPlacement !== 'left' ? '\u00A0*' : '*\u00A0')) : (mergedRequireMarkPlacement === 'right-hanging' && (h("span", { class: `${mergedClsPrefix}-form-item-label__asterisk-placeholder` }, '\u00A0*'))),
-                mergedRequireMarkPlacement === 'left'
-                    ? $slots.label
-                        ? $slots.label()
-                        : this.label
-                    : null)) : null,
+            mergedShowLabel && renderLabel(),
             h("div", { class: [
                     `${mergedClsPrefix}-form-item-blank`,
                     this.mergedValidationStatus &&

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

@@ -17,21 +17,22 @@ import { fadeDownTransition } from '../../../_styles/transitions/fade-down.cssr'
 // --n-label-text-align
 // --n-label-padding
 
-export default cB('form-item', {
-  display: 'grid',
-  lineHeight: 'var(--n-line-height)'
-}, [cB('form-item-label', `
+export default cB('form-item', `
+ display: grid;
+ line-height: var(--n-line-height);
+`, [cB('form-item-label', `
  grid-area: label;
  align-items: center;
  line-height: 1.25;
  text-align: var(--n-label-text-align);
  font-size: var(--n-label-font-size);
- height: var(--n-label-height);
+ min-height: var(--n-label-height);
  padding: var(--n-label-padding);
  color: var(--n-label-text-color);
  transition: color .3s var(--n-bezier);
  box-sizing: border-box;
  `, [cE('asterisk', `
+ white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  color: var(--n-asterisk-color);
@@ -40,38 +41,49 @@ export default cB('form-item', {
  user-select: none;
  -webkit-user-select: none;
  visibility: hidden; 
- `)]), cB('form-item-blank', {
-  gridArea: 'blank',
-  minHeight: 'var(--n-blank-height)'
-}), cM('left-labelled', `
+ `)]), cB('form-item-blank', `
+ grid-area: blank;
+ min-height: var(--n-blank-height);
+ `), cM('auto-label-width', [cB('form-item-label', 'white-space: nowrap;')]), cM('left-labelled', `
  grid-template-areas:
  "label blank"
  "label feedback";
  grid-template-columns: auto minmax(0, 1fr);
+ grid-template-rows: auto 1fr;
+ align-items: start;
  `, [cB('form-item-label', `
- height: var(--n-blank-height);
- line-height: var(--n-blank-height);
+ display: grid;
+ grid-template-areas:
+ "text star"
+ "text .";
+ grid-template-columns: 1fr auto;
+ min-height: var(--n-blank-height);
+ height: auto;
  box-sizing: border-box;
- white-space: nowrap;
  flex-shrink: 0;
  flex-grow: 0;
- `)]), cM('top-labelled', `
+ `, [cE('text', `
+ grid-area: text; 
+ `), cE('asterisk', `
+ grid-area: star; 
+ align-self: end;
+ `)])]), cM('top-labelled', `
  grid-template-areas:
  "label"
  "blank"
  "feedback";
- grid-template-rows: var(--n-label-height) 1fr;
+ grid-template-rows: minmax(var(--n-label-height), auto) 1fr;
  grid-template-columns: minmax(0, 100%);
  `, [cM('no-label', `
  grid-template-areas:
  "blank"
  "feedback";
  grid-template-rows: 1fr;
- `), cB('form-item-label', {
-  display: 'flex',
-  alignItems: 'flex-end',
-  justifyContent: 'var(--n-label-text-align)'
-})]), cB('form-item-blank', `
+ `), cB('form-item-label', `
+ display: flex;
+ align-items: flex-start;
+ justify-content: var(--n-label-text-align);
+ `)]), cB('form-item-blank', `
  box-sizing: border-box;
  display: flex;
  align-items: center;

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

@@ -14,6 +14,7 @@ export declare function formItemMisc(props: FormItemSetupProps): {
     mergedValidationStatus: ComputedRef<"error" | "success" | "warning" | undefined>;
     mergedShowFeedback: ComputedRef<boolean>;
     mergedShowLabel: ComputedRef<boolean>;
+    isAutoLabelWidth: ComputedRef<boolean>;
 };
 export declare function formItemRule(props: FormItemSetupProps): {
     mergedRules: ComputedRef<FormItemRule[]>;