naive-ui 2.25.0 → 2.25.3

package/lib/descriptions/src/Descriptions.js

@@ -30,42 +30,58 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Descriptions',
     props: descriptionProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Descriptions', '-descriptions', index_cssr_1.default, styles_1.descriptionsLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { size, bordered } = props;
+            const { common: { cubicBezierEaseInOut }, self: { titleTextColor, thColor, thColorModal, thColorPopover, thTextColor, thFontWeight, tdTextColor, tdColor, tdColorModal, tdColorPopover, borderColor, borderColorModal, borderColorPopover, borderRadius, lineHeight, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)(bordered ? 'thPaddingBordered' : 'thPadding', size)]: thPadding, [(0, _utils_1.createKey)(bordered ? 'tdPaddingBordered' : 'tdPadding', size)]: tdPadding } } = themeRef.value;
+            return {
+                '--n-title-text-color': titleTextColor,
+                '--n-th-padding': thPadding,
+                '--n-td-padding': tdPadding,
+                '--n-font-size': fontSize,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-th-font-weight': thFontWeight,
+                '--n-line-height': lineHeight,
+                '--n-th-text-color': thTextColor,
+                '--n-td-text-color': tdTextColor,
+                '--n-th-color': thColor,
+                '--n-th-color-modal': thColorModal,
+                '--n-th-color-popover': thColorPopover,
+                '--n-td-color': tdColor,
+                '--n-td-color-modal': tdColorModal,
+                '--n-td-color-popover': tdColorPopover,
+                '--n-border-radius': borderRadius,
+                '--n-border-color': borderColor,
+                '--n-border-color-modal': borderColorModal,
+                '--n-border-color-popover': borderColorPopover
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('descriptions', (0, vue_1.computed)(() => {
+                let hash = '';
+                const { size, bordered } = props;
+                if (bordered)
+                    hash += 'a';
+                hash += size[0];
+                return hash;
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { size, bordered } = props;
-                const { common: { cubicBezierEaseInOut }, self: { thColor, thColorModal, thColorPopover, thTextColor, thFontWeight, tdTextColor, tdColor, tdColorModal, tdColorPopover, borderColor, borderColorModal, borderColorPopover, borderRadius, lineHeight, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)(bordered ? 'thPaddingBordered' : 'thPadding', size)]: thPadding, [(0, _utils_1.createKey)(bordered ? 'tdPaddingBordered' : 'tdPadding', size)]: tdPadding } } = themeRef.value;
-                return {
-                    '--n-th-padding': thPadding,
-                    '--n-td-padding': tdPadding,
-                    '--n-font-size': fontSize,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-th-font-weight': thFontWeight,
-                    '--n-line-height': lineHeight,
-                    '--n-th-text-color': thTextColor,
-                    '--n-td-text-color': tdTextColor,
-                    '--n-th-color': thColor,
-                    '--n-th-color-modal': thColorModal,
-                    '--n-th-color-popover': thColorPopover,
-                    '--n-td-color': tdColor,
-                    '--n-td-color-modal': tdColorModal,
-                    '--n-td-color-popover': tdColorPopover,
-                    '--n-border-radius': borderRadius,
-                    '--n-border-color': borderColor,
-                    '--n-border-color-modal': borderColorModal,
-                    '--n-border-color-popover': borderColorPopover
-                };
-            }),
-            compitableColumn: (0, vooks_1.useCompitable)(props, ['columns', 'column'])
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
+            compitableColumn: (0, vooks_1.useCompitable)(props, ['columns', 'column']),
+            inlineThemeDisabled
         };
     },
     render() {
         const defaultSlots = this.$slots.default;
         const children = defaultSlots ? (0, _utils_1.flatten)(defaultSlots()) : [];
         const memorizedLength = children.length;
-        const { compitableColumn, labelPlacement, labelAlign, size, bordered, title, cssVars, mergedClsPrefix, separator } = this;
+        const { compitableColumn, labelPlacement, labelAlign, size, bordered, title, cssVars, mergedClsPrefix, separator, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         const filteredChildren = children.filter((child) => (0, utils_1.isDescriptionsItem)(child));
         if (process.env.NODE_ENV !== 'production' && memorizedLength !== filteredChildren.length) {
             (0, _utils_1.warn)('descriptions', '`n-descriptions` only takes `n-descriptions-item` as children.');
@@ -130,6 +146,7 @@ exports.default = (0, vue_1.defineComponent)({
         const rows = itemState.rows.map((row) => ((0, vue_1.h)("tr", { class: `${mergedClsPrefix}-descriptions-table-row` }, row)));
         return ((0, vue_1.h)("div", { style: cssVars, class: [
                 `${mergedClsPrefix}-descriptions`,
+                this.themeClass,
                 `${mergedClsPrefix}-descriptions--${labelPlacement}-label-placement`,
                 `${mergedClsPrefix}-descriptions--${labelAlign}-label-align`,
                 `${mergedClsPrefix}-descriptions--${size}-size`,

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

@@ -23,6 +23,7 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-border-color
 // --n-border-color-modal
 // --n-border-color-popover
+// --n-title-text-color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('descriptions', {
@@ -67,7 +68,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('descriptions', {
  transition: color .3s var(--n-bezier);
  line-height: var(--n-line-height);
  margin-bottom: 16px;
- color: var(--n-th-text-color);
+ color: var(--n-title-text-color);
  `), (0, cssr_1.cB)('descriptions-table-wrapper', `
  transition:
  background-color .3s var(--n-bezier),

package/lib/descriptions/styles/light.d.ts

@@ -5,6 +5,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     fontSizeSmall: string;
     fontSizeMedium: string;
     fontSizeLarge: string;
+    titleTextColor: string;
     thColor: string;
     thColorModal: string;
     thColorPopover: string;

package/lib/descriptions/styles/light.js

@@ -8,11 +8,11 @@ const seemly_1 = require("seemly");
 const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { tableHeaderColor, textColor1, textColor2, cardColor, modalColor, popoverColor, dividerColor, borderRadius, fontWeightStrong, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge } = vars;
+    const { tableHeaderColor, textColor2, textColor1, cardColor, modalColor, popoverColor, dividerColor, borderRadius, fontWeightStrong, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge } = vars;
     return Object.assign(Object.assign({}, _common_1.default), { lineHeight,
         fontSizeSmall,
         fontSizeMedium,
-        fontSizeLarge, thColor: (0, seemly_1.composite)(cardColor, tableHeaderColor), thColorModal: (0, seemly_1.composite)(modalColor, tableHeaderColor), thColorPopover: (0, seemly_1.composite)(popoverColor, tableHeaderColor), thTextColor: textColor1, thFontWeight: fontWeightStrong, tdTextColor: textColor2, tdColor: cardColor, tdColorModal: modalColor, tdColorPopover: popoverColor, borderColor: (0, seemly_1.composite)(cardColor, dividerColor), borderColorModal: (0, seemly_1.composite)(modalColor, dividerColor), borderColorPopover: (0, seemly_1.composite)(popoverColor, dividerColor), borderRadius: borderRadius });
+        fontSizeLarge, titleTextColor: textColor1, thColor: (0, seemly_1.composite)(cardColor, tableHeaderColor), thColorModal: (0, seemly_1.composite)(modalColor, tableHeaderColor), thColorPopover: (0, seemly_1.composite)(popoverColor, tableHeaderColor), thTextColor: textColor1, thFontWeight: fontWeightStrong, tdTextColor: textColor2, tdColor: cardColor, tdColorModal: modalColor, tdColorPopover: popoverColor, borderColor: (0, seemly_1.composite)(cardColor, dividerColor), borderColorModal: (0, seemly_1.composite)(modalColor, dividerColor), borderColorPopover: (0, seemly_1.composite)(popoverColor, dividerColor), borderRadius: borderRadius });
 };
 exports.self = self;
 const descriptionsLight = {

package/lib/dialog/src/Dialog.d.ts

@@ -1,7 +1,7 @@
 export declare const NDialog: import("vue").DefineComponent<{
     icon: import("vue").PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: import("vue").PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: import("vue").PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: import("vue").PropType<string | (() => import("vue").VNodeChild)>;
@@ -1096,11 +1096,13 @@ export declare const NDialog: import("vue").DefineComponent<{
         '--n-title-font-weight': string;
         '--n-title-text-color': string;
         '--n-action-space': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: import("vue").PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: import("vue").PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: import("vue").PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: import("vue").PropType<string | (() => import("vue").VNodeChild)>;
@@ -1822,9 +1824,9 @@ export declare const NDialog: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
-    bordered: boolean;
+    type: "default" | "error" | "info" | "success" | "warning";
     loading: boolean;
+    bordered: boolean;
     showIcon: boolean;
     closable: boolean;
 }>;

package/lib/dialog/src/Dialog.js

@@ -11,8 +11,8 @@ const _utils_1 = require("../../_utils");
 const _internal_1 = require("../../_internal");
 const button_1 = require("../../button");
 const styles_1 = require("../styles");
-const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const dialogProps_1 = require("./dialogProps");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const infoIcon = (0, vue_1.h)(icons_1.InfoIcon, null);
 const iconMap = {
     default: infoIcon,
@@ -29,11 +29,13 @@ exports.NDialog = (0, vue_1.defineComponent)({
     ],
     props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), dialogProps_1.dialogProps),
     setup(props) {
-        const { NConfigProvider, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedComponentPropsRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const mergedIconPlacementRef = (0, vue_1.computed)(() => {
-            var _a, _b, _c;
+            var _a, _b;
             const { iconPlacement } = props;
-            return ((_c = iconPlacement !== null && iconPlacement !== void 0 ? iconPlacement : (_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Dialog) === null || _b === void 0 ? void 0 : _b.iconPlacement) !== null && _c !== void 0 ? _c : 'left');
+            return (iconPlacement ||
+                ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Dialog) === null || _b === void 0 ? void 0 : _b.iconPlacement) ||
+                'left');
         });
         function handlePositiveClick(e) {
             const { onPositiveClick } = props;
@@ -51,6 +53,37 @@ exports.NDialog = (0, vue_1.defineComponent)({
                 onClose();
         }
         const themeRef = (0, _mixins_1.useTheme)('Dialog', '-dialog', index_cssr_1.default, styles_1.dialogLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { type } = props;
+            const iconPlacement = mergedIconPlacementRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { fontSize, lineHeight, border, titleTextColor, textColor, color, closeColor, closeColorHover, closeColorPressed, borderRadius, titleFontWeight, titleFontSize, padding, iconSize, actionSpace, contentMargin, closeSize, [iconPlacement === 'top' ? 'iconMarginIconTop' : 'iconMargin']: iconMargin, [iconPlacement === 'top' ? 'closeMarginIconTop' : 'closeMargin']: closeMargin, [(0, _utils_1.createKey)('iconColor', type)]: iconColor } } = themeRef.value;
+            return {
+                '--n-font-size': fontSize,
+                '--n-icon-color': iconColor,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-close-margin': closeMargin,
+                '--n-icon-margin': iconMargin,
+                '--n-icon-size': iconSize,
+                '--n-close-size': closeSize,
+                '--n-close-color': closeColor,
+                '--n-close-color-hover': closeColorHover,
+                '--n-close-color-pressed': closeColorPressed,
+                '--n-color': color,
+                '--n-text-color': textColor,
+                '--n-border-radius': borderRadius,
+                '--n-padding': padding,
+                '--n-line-height': lineHeight,
+                '--n-border': border,
+                '--n-content-margin': contentMargin,
+                '--n-title-font-size': titleFontSize,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-title-text-color': titleTextColor,
+                '--n-action-space': actionSpace
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('dialog', (0, vue_1.computed)(() => `${props.type[0]}${mergedIconPlacementRef.value[0]}`), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedIconPlacement: mergedIconPlacementRef,
@@ -58,65 +91,33 @@ exports.NDialog = (0, vue_1.defineComponent)({
             handlePositiveClick,
             handleNegativeClick,
             handleCloseClick,
-            cssVars: (0, vue_1.computed)(() => {
-                const { type, iconPlacement } = props;
-                const { common: { cubicBezierEaseInOut }, self: { fontSize, lineHeight, border, titleTextColor, textColor, color, closeColor, closeColorHover, closeColorPressed, borderRadius, titleFontWeight, titleFontSize, padding, iconSize, actionSpace, contentMargin, closeSize, [iconPlacement === 'top' ? 'iconMarginIconTop' : 'iconMargin']: iconMargin, [iconPlacement === 'top' ? 'closeMarginIconTop' : 'closeMargin']: closeMargin, [(0, _utils_1.createKey)('iconColor', type)]: iconColor } } = themeRef.value;
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-icon-color': iconColor,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-close-margin': closeMargin,
-                    '--n-icon-margin': iconMargin,
-                    '--n-icon-size': iconSize,
-                    '--n-close-size': closeSize,
-                    '--n-close-color': closeColor,
-                    '--n-close-color-hover': closeColorHover,
-                    '--n-close-color-pressed': closeColorPressed,
-                    '--n-color': color,
-                    '--n-text-color': textColor,
-                    '--n-border-radius': borderRadius,
-                    '--n-padding': padding,
-                    '--n-line-height': lineHeight,
-                    '--n-border': border,
-                    '--n-content-margin': contentMargin,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-title-text-color': titleTextColor,
-                    '--n-action-space': actionSpace
-                };
-            })
+            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() {
-        const { $slots, bordered, mergedIconPlacement, cssVars, closable, showIcon, title, content, action, negativeText, positiveText, handlePositiveClick, handleNegativeClick, mergedTheme, loading, type, mergedClsPrefix } = this;
+        var _a;
+        const { bordered, mergedIconPlacement, cssVars, closable, showIcon, title, content, action, negativeText, positiveText, handlePositiveClick, handleNegativeClick, mergedTheme, loading, type, mergedClsPrefix } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const icon = showIcon ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__icon` }, {
+            default: () => (0, _utils_1.resolveWrappedSlot)(this.$slots.icon, (children) => children || (this.icon ? (0, _utils_1.render)(this.icon) : iconMap[this.type]))
+        })) : null;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-dialog`,
+                this.themeClass,
                 `${mergedClsPrefix}-dialog--icon-${mergedIconPlacement}`,
                 bordered && `${mergedClsPrefix}-dialog--bordered`
             ], style: cssVars, role: "dialog" },
             closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__close`, onClick: this.handleCloseClick })) : null,
-            showIcon && mergedIconPlacement === 'top' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog-icon-container` },
-                (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__icon` }, {
-                    default: () => $slots.icon
-                        ? $slots.icon()
-                        : this.icon
-                            ? (0, _utils_1.render)(this.icon)
-                            : iconMap[this.type]
-                }))) : null,
+            showIcon && mergedIconPlacement === 'top' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog-icon-container` }, icon)) : null,
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog__title` },
-                showIcon && mergedIconPlacement === 'left' ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__icon` }, {
-                    default: () => $slots.icon
-                        ? $slots.icon()
-                        : this.icon
-                            ? (0, _utils_1.render)(this.icon)
-                            : iconMap[this.type]
-                })) : null,
-                $slots.header ? $slots.header() : (0, _utils_1.render)(title)),
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog__content` }, $slots.default ? $slots.default() : (0, _utils_1.render)(content)),
-            $slots.action || positiveText || negativeText || action ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog__action` }, $slots.action
-                ? $slots.action()
-                : action
-                    ? (0, _utils_1.render)(action)
+                showIcon && mergedIconPlacement === 'left' ? icon : null,
+                (0, _utils_1.resolveSlot)(this.$slots.header, () => [(0, _utils_1.render)(title)])),
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog__content` }, (0, _utils_1.resolveSlot)(this.$slots.default, () => [(0, _utils_1.render)(content)])),
+            (0, _utils_1.resolveWrappedSlot)(this.$slots.action, (children) => children || positiveText || negativeText || action ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog__action` }, children ||
+                (action
+                    ? [(0, _utils_1.render)(action)]
                     : [
                         this.negativeText && ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, ghost: true, size: "small", onClick: handleNegativeClick }, {
                             default: () => (0, _utils_1.render)(this.negativeText)
@@ -124,6 +125,6 @@ exports.NDialog = (0, vue_1.defineComponent)({
                         this.positiveText && ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, disabled: loading, loading: loading, size: "small", type: type === 'default' ? 'primary' : type, onClick: handlePositiveClick }, {
                             default: () => (0, _utils_1.render)(this.positiveText)
                         }))
-                    ])) : null));
+                    ]))) : null)));
     }
 });

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

@@ -11,7 +11,7 @@ export declare const exposedDialogEnvProps: {
     readonly onMaskClick: PropType<(e: MouseEvent) => void>;
     readonly icon: PropType<() => import("vue").VNodeChild>;
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -52,7 +52,7 @@ export declare const NDialogEnvironment: import("vue").DefineComponent<{
     onMaskClick: PropType<(e: MouseEvent) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -101,7 +101,7 @@ export declare const NDialogEnvironment: import("vue").DefineComponent<{
     onMaskClick: PropType<(e: MouseEvent) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -121,9 +121,9 @@ export declare const NDialogEnvironment: import("vue").DefineComponent<{
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("./interface").IconPlacement>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
-    bordered: boolean;
+    type: "default" | "error" | "info" | "success" | "warning";
     loading: boolean;
+    bordered: boolean;
     showIcon: boolean;
     closable: boolean;
     maskClosable: boolean;

package/lib/dialog/src/DialogEnvironment.js

@@ -96,7 +96,7 @@ exports.NDialogEnvironment = (0, vue_1.defineComponent)({
     },
     render() {
         const { handlePositiveClick, handleUpdateShow, handleNegativeClick, handleCloseClick, handleAfterLeave, handleMaskClick, to, maskClosable, show } = this;
-        return ((0, vue_1.h)(Modal_1.default, { show: show, onUpdateShow: handleUpdateShow, onMaskClick: handleMaskClick, appear: true, dialog: true, to: to, maskClosable: maskClosable, onAfterLeave: handleAfterLeave }, {
+        return ((0, vue_1.h)(Modal_1.default, { show: show, onUpdateShow: handleUpdateShow, onMaskClick: handleMaskClick, to: to, maskClosable: maskClosable, onAfterLeave: handleAfterLeave, 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

@@ -39,15 +39,15 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
     dialogList: Ref<{
         readonly key: string;
         readonly destroy: () => void;
-        type?: "default" | "success" | "error" | "warning" | "info" | undefined;
+        type?: "default" | "error" | "info" | "success" | "warning" | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;
         icon?: (() => import("vue").VNodeChild) | undefined;
         title?: string | (() => import("vue").VNodeChild) | undefined;
         action?: (() => import("vue").VNodeChild) | undefined;
-        bordered?: boolean | undefined;
         positiveText?: string | undefined;
         negativeText?: string | undefined;
         loading?: boolean | undefined;
+        bordered?: boolean | undefined;
         showIcon?: boolean | undefined;
         onClose?: (() => unknown) | undefined;
         closable?: boolean | undefined;

package/lib/dialog/src/dialogProps.d.ts

@@ -4,7 +4,7 @@ import type { IconPlacement } from './interface';
 declare const dialogProps: {
     readonly icon: PropType<() => VNodeChild>;
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly title: PropType<string | (() => VNodeChild)>;
@@ -29,4 +29,4 @@ declare const dialogProps: {
 };
 export declare type DialogProps = ExtractPublicPropTypes<typeof dialogProps>;
 export { dialogProps };
-export declare const dialogPropKeys: ("type" | "content" | "icon" | "title" | "action" | "bordered" | "positiveText" | "negativeText" | "loading" | "showIcon" | "onClose" | "closable" | "iconPlacement" | "onPositiveClick" | "onNegativeClick")[];
+export declare const dialogPropKeys: ("type" | "content" | "icon" | "title" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "showIcon" | "onClose" | "closable" | "iconPlacement" | "onPositiveClick" | "onNegativeClick")[];

package/lib/divider/src/Divider.d.ts

@@ -53,7 +53,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-color': string;
         '--n-text-color': string;
         '--n-font-weight': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly titlePlacement: {
         readonly type: PropType<"left" | "right" | "center">;

package/lib/divider/src/Divider.js

@@ -15,25 +15,34 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Divider',
     props: dividerProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Divider', '-divider', index_cssr_1.default, styles_1.dividerLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { color, textColor, fontWeight } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-color': color,
+                '--n-text-color': textColor,
+                '--n-font-weight': fontWeight
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('divider', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { color, textColor, fontWeight } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-color': color,
-                    '--n-text-color': textColor,
-                    '--n-font-weight': fontWeight
-                };
-            })
+            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, titlePlacement, vertical, dashed, cssVars, mergedClsPrefix } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)("div", { role: "separator", class: [
                 `${mergedClsPrefix}-divider`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-divider--vertical`]: vertical,
                     [`${mergedClsPrefix}-divider--no-title`]: !$slots.default,

package/lib/dynamic-input/src/DynamicInput.js

@@ -59,7 +59,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { NConfigProvider, mergedClsPrefixRef } = (0, _mixins_1.useConfig)();
+        const { mergedComponentPropsRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)();
         const NFormItem = (0, vue_1.inject)(use_form_item_1.formItemInjectionKey, null);
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
@@ -81,7 +81,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const buttonSizeRef = (0, vue_1.computed)(() => {
             var _a, _b;
-            return (_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DynamicInput) === null || _b === void 0 ? void 0 : _b.buttonSize;
+            return (_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DynamicInput) === null || _b === void 0 ? void 0 : _b.buttonSize;
         });
         function doUpdateValue(value) {
             const { onInput, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;

package/lib/dynamic-tags/src/DynamicTags.d.ts

@@ -21,7 +21,7 @@ declare const dynamicTagsProps: {
     onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     color: PropType<import("../../tag/src/common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -1059,7 +1059,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     color: PropType<import("../../tag/src/common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -2567,7 +2567,9 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     cssVars: import("vue").ComputedRef<{
         '--n-input-width': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     closable: {
         type: BooleanConstructor;
@@ -2587,7 +2589,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     color: PropType<import("../../tag/src/common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -3605,7 +3607,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info" | "primary";
+    type: "default" | "error" | "info" | "success" | "warning" | "primary";
     round: boolean;
     size: "small" | "medium" | "large";
     disabled: boolean | undefined;

package/lib/dynamic-tags/src/DynamicTags.js

@@ -36,7 +36,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const { localeRef } = (0, _mixins_1.useLocale)('DynamicTags');
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedDisabledRef } = formItem;
@@ -105,6 +105,15 @@ exports.default = (0, vue_1.defineComponent)({
                 inputForceFocusedRef.value = false;
             });
         }
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { inputWidth } } = themeRef.value;
+            return {
+                '--n-input-width': inputWidth
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('dynamic-tags', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             inputInstRef,
@@ -122,17 +131,15 @@ exports.default = (0, vue_1.defineComponent)({
             handleCloseClick,
             handleInputConfirm,
             mergedTheme: themeRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { inputWidth } } = themeRef.value;
-                return {
-                    '--n-input-width': inputWidth
-                };
-            })
+            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() {
-        const { mergedTheme, cssVars, mergedClsPrefix } = this;
-        return ((0, vue_1.h)(space_1.NSpace, { class: `${mergedClsPrefix}-dynamic-tags`, size: "small", style: cssVars, theme: mergedTheme.peers.Space, themeOverrides: mergedTheme.peerOverrides.Space, itemStyle: "display: flex;" }, {
+        const { mergedTheme, cssVars, mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return ((0, vue_1.h)(space_1.NSpace, { class: [`${mergedClsPrefix}-dynamic-tags`, this.themeClass], size: "small", style: cssVars, theme: mergedTheme.peers.Space, themeOverrides: mergedTheme.peerOverrides.Space, itemStyle: "display: flex;" }, {
             default: () => {
                 const { mergedTheme, tagStyle, type, round, size, color, closable, mergedDisabled, showInput, inputValue, inputStyle, inputSize, inputForceFocused, triggerDisabled, handleInputKeyUp, handleInputBlur, handleAddClick, handleCloseClick, handleInputConfirm, $slots } = this;
                 return this.mergedValue

package/lib/element/src/Element.d.ts

@@ -19,7 +19,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Element", {}, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    cssVars: import("vue").ComputedRef<Record<string, string | number>>;
+    cssVars: import("vue").ComputedRef<Record<string, string>> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly tag: {
         readonly type: StringConstructor;