naive-ui 2.32.2 → 2.33.0

package/lib/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/lib/card/src/Card.js

@@ -55,14 +55,17 @@ exports.default = (0, vue_1.defineComponent)({
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Card', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.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, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.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, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = (0, seemly_1.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,
@@ -103,11 +106,12 @@ exports.default = (0, vue_1.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 ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-card`,
                 this.themeClass,
+                embedded && `${mergedClsPrefix}-card--embedded`,
                 {
                     [`${mergedClsPrefix}-card--rtl`]: rtlEnabled,
                     [`${mergedClsPrefix}-card--content${typeof segmented !== 'boolean' && segmented.content === 'soft'
@@ -124,7 +128,7 @@ exports.default = (0, vue_1.defineComponent)({
             (0, _utils_1.resolveWrappedSlot)($slots.cover, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, children))),
             (0, _utils_1.resolveWrappedSlot)($slots.header, (children) => {
                 return children || this.title || this.closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, children || [this.title]),
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, children || this.title),
                     (0, _utils_1.resolveWrappedSlot)($slots['header-extra'], (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, children))),
                     this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick, absolute: true })) : null)) : null;
             }),

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

@@ -29,6 +29,9 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-close-icon-color-pressed
 // --n-border-color
 // --n-box-shadow
+// --n-color-embedded
+// --n-color-embedded-modal
+// --n-color-embedded-popover
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
@@ -48,7 +51,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
  background-color .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier),
  border-color .3s var(--n-bezier);
- `, [(0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--n-box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
+ `, [(0, cssr_1.asModal)({
+  background: 'var(--n-color-modal)'
+}), (0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--n-box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
   paddingTop: 'var(--n-padding-bottom)'
 })])]), (0, cssr_1.cM)('content-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', `
  margin: 0 var(--n-padding-left);
@@ -122,10 +127,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
   transition: 'border-color 0.3s var(--n-bezier)'
 }, [(0, cssr_1.c)('&:not(:first-child)', {
   borderTop: '1px solid var(--n-border-color)'
-})])])])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('card', {
-  background: 'var(--n-color-modal)'
-})), (0, cssr_1.insidePopover)((0, cssr_1.cB)('card', {
-  background: 'var(--n-color-popover)'
-})), (0, cssr_1.cB)('card', [(0, cssr_1.asModal)({
-  background: 'var(--n-color-modal)'
-})])]);
+})])])]), (0, cssr_1.cM)('embedded', `
+ background-color: var(--n-color-embedded);
+ `)]), (0, cssr_1.insideModal)((0, cssr_1.cB)('card', `
+ background: var(--n-color-modal);
+ `, [(0, cssr_1.cM)('embedded', `
+ background-color: var(--n-color-embedded-modal);
+ `)])), (0, cssr_1.insidePopover)((0, cssr_1.cB)('card', `
+ background: var(--n-color-popover);
+ `, [(0, cssr_1.cM)('embedded', `
+ background-color: var(--n-color-embedded-popover);
+ `)]))]);

package/lib/card/styles/dark.js

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

package/lib/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/lib/card/styles/light.js

@@ -8,7 +8,7 @@ const common_1 = require("../../_styles/common");
 const _common_1 = __importDefault(require("./_common"));
 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({}, _common_1.default), { 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({}, _common_1.default), { 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/lib/countdown/src/Countdown.js

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

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

@@ -162,7 +162,7 @@ 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/lib/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/lib/dialog/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDialog = exports.dialogProviderProps = exports.NDialogProvider = exports.dialogProps = exports.NDialog = void 0;
+exports.useDialogReactiveList = exports.useDialog = exports.dialogProviderProps = exports.NDialogProvider = exports.dialogProps = exports.NDialog = void 0;
 var Dialog_1 = require("./src/Dialog");
 Object.defineProperty(exports, "NDialog", { enumerable: true, get: function () { return Dialog_1.NDialog; } });
 var dialogProps_1 = require("./src/dialogProps");
@@ -8,5 +8,6 @@ Object.defineProperty(exports, "dialogProps", { enumerable: true, get: function
 var DialogProvider_1 = require("./src/DialogProvider");
 Object.defineProperty(exports, "NDialogProvider", { enumerable: true, get: function () { return DialogProvider_1.NDialogProvider; } });
 Object.defineProperty(exports, "dialogProviderProps", { enumerable: true, get: function () { return DialogProvider_1.dialogProviderProps; } });
-var use_dialog_1 = require("./src/use-dialog");
-Object.defineProperty(exports, "useDialog", { enumerable: true, get: function () { return use_dialog_1.useDialog; } });
+var composables_1 = require("./src/composables");
+Object.defineProperty(exports, "useDialog", { enumerable: true, get: function () { return composables_1.useDialog; } });
+Object.defineProperty(exports, "useDialogReactiveList", { enumerable: true, get: function () { return composables_1.useDialogReactiveList; } });

package/lib/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/lib/dialog/src/DialogEnvironment.js

@@ -11,7 +11,7 @@ const Modal_1 = __importDefault(require("../../modal/src/Modal"));
 const _utils_1 = require("../../_utils");
 const Dialog_1 = require("./Dialog");
 const dialogProps_1 = require("./dialogProps");
-exports.exposedDialogEnvProps = Object.assign(Object.assign({}, dialogProps_1.dialogProps), { blockScroll: { type: Boolean, default: true }, closeOnEsc: { type: Boolean, default: true }, onEsc: Function, autoFocus: {
+exports.exposedDialogEnvProps = Object.assign(Object.assign({}, dialogProps_1.dialogProps), { onAfterEnter: Function, blockScroll: { type: Boolean, default: true }, closeOnEsc: { type: Boolean, default: true }, onEsc: Function, autoFocus: {
         type: Boolean,
         default: true
     }, internalStyle: [String, Object], maskClosable: {
@@ -106,7 +106,7 @@ exports.NDialogEnvironment = (0, vue_1.defineComponent)({
     },
     render() {
         const { handlePositiveClick, handleUpdateShow, handleNegativeClick, handleCloseClick, handleAfterLeave, handleMaskClick, handleEsc, to, maskClosable, show } = this;
-        return ((0, vue_1.h)(Modal_1.default, { 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 ((0, vue_1.h)(Modal_1.default, { 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: () => ((0, vue_1.h)(Dialog_1.NDialog, Object.assign({}, (0, _utils_1.keep)(this.$props, dialogProps_1.dialogPropKeys), { style: this.internalStyle, onClose: handleCloseClick, onNegativeClick: handleNegativeClick, onPositiveClick: handlePositiveClick })))
         }));
     }

package/lib/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/lib/dialog/src/DialogProvider.js

@@ -48,6 +48,7 @@ exports.NDialogProvider = (0, vue_1.defineComponent)({
             clickedRef: (0, vooks_1.useClicked)(64),
             clickPositionRef: (0, vooks_1.useClickPosition)()
         });
+        (0, vue_1.provide)(context_1.dialogReactiveListInjectionKey, dialogListRef);
         return Object.assign(Object.assign({}, api), { dialogList: dialogListRef, dialogInstRefs,
             handleAfterLeave });
     },

package/lib/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/lib/dialog/src/{use-dialog.js → composables.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDialog = void 0;
+exports.useDialogReactiveList = exports.useDialog = void 0;
 const vue_1 = require("vue");
 const context_1 = require("./context");
 const _utils_1 = require("../../_utils");
@@ -12,3 +12,11 @@ function useDialog() {
     return dialog;
 }
 exports.useDialog = useDialog;
+function useDialogReactiveList() {
+    const dialogReactiveList = (0, vue_1.inject)(context_1.dialogReactiveListInjectionKey, null);
+    if (dialogReactiveList === null) {
+        (0, _utils_1.throwError)('use-dialog-reactive-list', 'No outer <n-dialog-provider /> founded.');
+    }
+    return dialogReactiveList;
+}
+exports.useDialogReactiveList = useDialogReactiveList;

package/lib/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/lib/dialog/src/context.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogApiInjectionKey = exports.dialogProviderInjectionKey = void 0;
+exports.dialogReactiveListInjectionKey = exports.dialogApiInjectionKey = exports.dialogProviderInjectionKey = void 0;
 const _utils_1 = require("../../_utils");
 exports.dialogProviderInjectionKey = (0, _utils_1.createInjectionKey)('n-dialog-provider');
 exports.dialogApiInjectionKey = (0, _utils_1.createInjectionKey)('n-dialog-api');
+exports.dialogReactiveListInjectionKey = (0, _utils_1.createInjectionKey)('n-dialog-reactive-list');

package/lib/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/lib/form/src/FormItem.js

@@ -255,8 +255,15 @@ exports.default = (0, vue_1.defineComponent)({
         };
         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)));
+            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 = (0, vue_1.computed)(() => {
@@ -296,34 +303,37 @@ exports.default = (0, vue_1.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 = ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-form-item-label__text` }, labelText));
+            const markNode = 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*')));
+            let labelContent;
+            if (mergedRequireMarkPlacement === 'left') {
+                labelContent = [markNode, textNode];
+            }
+            else {
+                labelContent = [textNode, markNode];
+            }
+            const { labelProps } = this;
+            return ((0, vue_1.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 ((0, vue_1.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) ? ((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'
-                    ? $slots.label
-                        ? $slots.label()
-                        : this.label
-                    : 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'
-                    ? $slots.label
-                        ? $slots.label()
-                        : this.label
-                    : null)) : null,
+            mergedShowLabel && renderLabel(),
             (0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-form-item-blank`,
                     this.mergedValidationStatus &&

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

@@ -25,21 +25,22 @@ const fade_down_cssr_1 = require("../../../_styles/transitions/fade-down.cssr");
 // --n-label-padding
 
 
-exports.default = (0, cssr_1.cB)('form-item', {
-  display: 'grid',
-  lineHeight: 'var(--n-line-height)'
-}, [(0, cssr_1.cB)('form-item-label', `
+exports.default = (0, cssr_1.cB)('form-item', `
+ display: grid;
+ line-height: var(--n-line-height);
+`, [(0, cssr_1.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;
  `, [(0, cssr_1.cE)('asterisk', `
+ white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  color: var(--n-asterisk-color);
@@ -48,38 +49,49 @@ exports.default = (0, cssr_1.cB)('form-item', {
  user-select: none;
  -webkit-user-select: none;
  visibility: hidden; 
- `)]), (0, cssr_1.cB)('form-item-blank', {
-  gridArea: 'blank',
-  minHeight: 'var(--n-blank-height)'
-}), (0, cssr_1.cM)('left-labelled', `
+ `)]), (0, cssr_1.cB)('form-item-blank', `
+ grid-area: blank;
+ min-height: var(--n-blank-height);
+ `), (0, cssr_1.cM)('auto-label-width', [(0, cssr_1.cB)('form-item-label', 'white-space: nowrap;')]), (0, cssr_1.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;
  `, [(0, cssr_1.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;
- `)]), (0, cssr_1.cM)('top-labelled', `
+ `, [(0, cssr_1.cE)('text', `
+ grid-area: text; 
+ `), (0, cssr_1.cE)('asterisk', `
+ grid-area: star; 
+ align-self: end;
+ `)])]), (0, cssr_1.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%);
  `, [(0, cssr_1.cM)('no-label', `
  grid-template-areas:
  "blank"
  "feedback";
  grid-template-rows: 1fr;
- `), (0, cssr_1.cB)('form-item-label', {
-  display: 'flex',
-  alignItems: 'flex-end',
-  justifyContent: 'var(--n-label-text-align)'
-})]), (0, cssr_1.cB)('form-item-blank', `
+ `), (0, cssr_1.cB)('form-item-label', `
+ display: flex;
+ align-items: flex-start;
+ justify-content: var(--n-label-text-align);
+ `)]), (0, cssr_1.cB)('form-item-blank', `
  box-sizing: border-box;
  display: flex;
  align-items: center;

package/lib/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[]>;