naive-ui 2.25.2 → 2.25.5

package/lib/modal/src/Modal.js

@@ -40,7 +40,7 @@ const modalProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _
     // events
     onEsc: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onAfterEnter: Function, onBeforeLeave: Function, onAfterLeave: Function, onClose: Function, onPositiveClick: Function, onNegativeClick: Function, onMaskClick: Function, 
     // private
-    dialog: Boolean, appear: {
+    internalDialog: Boolean, internalAppear: {
         type: Boolean,
         default: undefined
     }, 
@@ -66,12 +66,12 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         const containerRef = (0, vue_1.ref)(null);
-        const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Modal', '-modal', index_cssr_1.default, styles_1.modalLight, props, mergedClsPrefixRef);
         const clickedRef = (0, vooks_1.useClicked)(64);
         const clickedPositionRef = (0, vooks_1.useClickPosition)();
         const isMountedRef = (0, vooks_1.useIsMounted)();
-        const NDialogProvider = props.dialog
+        const NDialogProvider = props.internalDialog
             ? (0, vue_1.inject)(context_1.dialogProviderInjectionKey, null)
             : null;
         function doUpdateShow(show) {
@@ -174,9 +174,21 @@ exports.default = (0, vue_1.defineComponent)({
             mergedClsPrefixRef,
             mergedThemeRef: themeRef,
             isMountedRef,
-            appearRef: (0, vue_1.toRef)(props, 'appear'),
+            appearRef: (0, vue_1.toRef)(props, 'internalAppear'),
             transformOriginRef: (0, vue_1.toRef)(props, 'transformOrigin')
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseOut }, self: { boxShadow, color, textColor } } = themeRef.value;
+            return {
+                '--n-bezier-ease-out': cubicBezierEaseOut,
+                '--n-box-shadow': boxShadow,
+                '--n-color': color,
+                '--n-text-color': textColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('theme-class', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             namespace: namespaceRef,
@@ -195,39 +207,36 @@ exports.default = (0, vue_1.defineComponent)({
             handleNegativeClick,
             handlePositiveClick,
             handleCloseClick,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseOut }, self: { boxShadow, color, textColor } } = themeRef.value;
-                return {
-                    '--n-bezier-ease-out': cubicBezierEaseOut,
-                    '--n-box-shadow': boxShadow,
-                    '--n-color': color,
-                    '--n-text-color': textColor
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : inlineThemeDisabled,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
         const { mergedClsPrefix } = this;
         return ((0, vue_1.h)(vueuc_1.VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
-                var _a;
-                return [
-                    (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", ref: "containerRef", class: [`${mergedClsPrefix}-modal-container`, this.namespace], style: this.cssVars },
-                        this.unstableShowMask ? ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", key: "mask", appear: (_a = this.appear) !== null && _a !== void 0 ? _a : this.isMounted }, {
-                            default: () => {
-                                return this.show ? ((0, vue_1.h)("div", { "aria-hidden": true, ref: "containerRef", class: `${mergedClsPrefix}-modal-mask` })) : null;
-                            }
-                        })) : null,
-                        (0, vue_1.h)(BodyWrapper_1.default, Object.assign({ style: this.overlayStyle }, this.$attrs, { ref: 'bodyWrapper', displayDirective: this.displayDirective, show: this.show, preset: this.preset, autoFocus: this.autoFocus, trapFocus: this.trapFocus }, this.presetProps, { onEsc: this.handleEsc, onClose: this.handleCloseClick, onNegativeClick: this.handleNegativeClick, onPositiveClick: this.handlePositiveClick, onBeforeLeave: this.handleBeforeLeave, onAfterEnter: this.onAfterEnter, onAfterLeave: this.handleAfterLeave, onClickoutside: this.handleClickoutside }), this.$slots)), [
-                        [
-                            vdirs_1.zindexable,
-                            {
-                                zIndex: this.zIndex,
-                                enabled: this.show
-                            }
-                        ]
-                    ])
-                ];
+                var _a, _b;
+                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", ref: "containerRef", class: [
+                        `${mergedClsPrefix}-modal-container`,
+                        this.themeClass,
+                        this.namespace
+                    ], style: this.cssVars },
+                    this.unstableShowMask ? ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", key: "mask", appear: (_b = this.internalAppear) !== null && _b !== void 0 ? _b : this.isMounted }, {
+                        default: () => {
+                            return this.show ? ((0, vue_1.h)("div", { "aria-hidden": true, ref: "containerRef", class: `${mergedClsPrefix}-modal-mask` })) : null;
+                        }
+                    })) : null,
+                    (0, vue_1.h)(BodyWrapper_1.default, Object.assign({ style: this.overlayStyle }, this.$attrs, { ref: "bodyWrapper", displayDirective: this.displayDirective, show: this.show, preset: this.preset, autoFocus: this.autoFocus, trapFocus: this.trapFocus }, this.presetProps, { onEsc: this.handleEsc, onClose: this.handleCloseClick, onNegativeClick: this.handleNegativeClick, onPositiveClick: this.handlePositiveClick, onBeforeLeave: this.handleBeforeLeave, onAfterEnter: this.onAfterEnter, onAfterLeave: this.handleAfterLeave, onClickoutside: this.handleClickoutside }), this.$slots)), [
+                    [
+                        vdirs_1.zindexable,
+                        {
+                            zIndex: this.zIndex,
+                            enabled: this.show
+                        }
+                    ]
+                ]);
             }
         }));
     }

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

@@ -140,6 +140,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  width: 28px;
  height: 28px;
  font-size: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
  `, [(0, cssr_1.cB)('icon', {
   transition: 'color .3s var(--n-bezier)'
 })]), (0, cssr_1.cB)('notification-main', `
@@ -186,14 +189,12 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
 })])])])])]);
 
 function placementTransformStyle(placement) {
-  const [position, direction] = placement.split('-');
-  const transformYEnter = position === 'top' ? '-100%' : '100%';
-  const transformYLeave = position === 'top' ? '0' : '0';
+  const direction = placement.split('-')[1];
   const transformXEnter = direction === 'left' ? 'calc(-100%)' : 'calc(100%)';
   const transformXLeave = '0';
   return (0, cssr_1.cB)('notification', [(0, cssr_1.c)('&.notification-transition-enter-from, &.notification-transition-leave-to', `
- transform: translate(${transformXEnter}, ${transformYEnter});
+ transform: translate(${transformXEnter}, 0);
  `), (0, cssr_1.c)('&.notification-transition-leave-from, &.notification-transition-enter-to', `
- transform: translate(${transformXLeave}, ${transformYLeave});
+ transform: translate(${transformXLeave}, 0);
  `)]);
 }

package/lib/page-header/src/PageHeader.d.ts

@@ -92,7 +92,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-back-color-hover': string;
         '--n-back-color-pressed': string;
         '--n-bezier': 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<{
     title: StringConstructor;
     subtitle: StringConstructor;

package/lib/page-header/src/PageHeader.js

@@ -16,31 +16,39 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'PageHeader',
     props: pageHeaderProps,
     setup(props) {
-        const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, mergedRtlRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('PageHeader', '-page-header', index_cssr_1.default, light_1.pageHeaderLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = (0, use_rtl_1.default)('PageHeader', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.default)('PageHeader', mergedRtlRef, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { titleTextColor, subtitleTextColor, backColor, fontSize, titleFontSize, backSize, titleFontWeight, backColorHover, backColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-title-text-color': titleTextColor,
+                '--n-title-font-size': titleFontSize,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-font-size': fontSize,
+                '--n-back-size': backSize,
+                '--n-subtitle-text-color': subtitleTextColor,
+                '--n-back-color': backColor,
+                '--n-back-color-hover': backColorHover,
+                '--n-back-color-pressed': backColorPressed,
+                '--n-bezier': cubicBezierEaseInOut
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('page-header', undefined, cssVarsRef, props)
+            : undefined;
         return {
             rtlEnabled: rtlEnabledRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { titleTextColor, subtitleTextColor, backColor, fontSize, titleFontSize, backSize, titleFontWeight, backColorHover, backColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-title-text-color': titleTextColor,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-font-size': fontSize,
-                    '--n-back-size': backSize,
-                    '--n-subtitle-text-color': subtitleTextColor,
-                    '--n-back-color': backColor,
-                    '--n-back-color-hover': backColorHover,
-                    '--n-back-color-pressed': backColorPressed,
-                    '--n-bezier': cubicBezierEaseInOut
-                };
-            })
+            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 { onBack, title, subtitle, extra, mergedClsPrefix, cssVars, $slots } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         const { title: titleSlot, subtitle: subtitleSlot, extra: extraSlot, default: defaultSlot, header: headerSlot, avatar: avatarSlot, footer: footerSlot, back: backSlot } = $slots;
         const showBack = onBack;
         const showTitle = title || titleSlot;
@@ -48,6 +56,7 @@ exports.default = (0, vue_1.defineComponent)({
         const showExtra = extra || extraSlot;
         return ((0, vue_1.h)("div", { style: cssVars, class: [
                 `${mergedClsPrefix}-page-header-wrapper`,
+                this.themeClass,
                 this.rtlEnabled && `${mergedClsPrefix}-page-header-wrapper--rtl`
             ] },
             headerSlot ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header-header`, key: "breadcrumb" }, headerSlot())) : null,

package/lib/pagination/src/Pagination.d.ts

@@ -254,6 +254,7 @@ declare const paginationProps: {
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -482,6 +483,7 @@ declare const paginationProps: {
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -710,6 +712,7 @@ declare const paginationProps: {
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -981,6 +984,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -1209,6 +1213,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -1437,6 +1442,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -1798,6 +1804,7 @@ declare const _default: import("vue").DefineComponent<{
                 loadingColorError: string;
                 borderError: string;
                 borderHoverError: string;
+                /** @deprecated */
                 colorFocusError: string;
                 borderFocusError: string;
                 boxShadowFocusError: string;
@@ -2003,7 +2010,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-button-border': string;
         '--n-button-border-hover': string;
         '--n-button-border-pressed': 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 page: NumberConstructor;
     readonly defaultPage: {
@@ -2254,6 +2263,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -2482,6 +2492,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -2710,6 +2721,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;

package/lib/pagination/src/Pagination.js

@@ -54,7 +54,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { NConfigProvider, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedComponentPropsRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Pagination', '-pagination', index_cssr_1.default, styles_1.paginationLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Pagination');
         const selfRef = (0, vue_1.ref)(null);
@@ -93,12 +93,11 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const inputSizeRef = (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.Pagination) === null || _b === void 0 ? void 0 : _b.inputSize) ||
-                'small');
+            return ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.inputSize) || 'small';
         });
         const selectSizeRef = (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.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) || 'small');
+            return ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) || 'small';
         });
         const startIndexRef = (0, vue_1.computed)(() => {
             return (mergedPageRef.value - 1) * mergedPageSizeRef.value;
@@ -252,6 +251,55 @@ exports.default = (0, vue_1.defineComponent)({
             void mergedPageSizeRef.value;
             disableTransitionOneTick();
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { itemSize, itemPadding, itemMargin, inputWidth, selectWidth, inputMargin, selectMargin, buttonBorder, buttonBorderHover, buttonBorderPressed, buttonIconColor, buttonIconColorHover, buttonIconColorPressed, buttonIconSize, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, itemTextColorDisabled, itemColor, itemColorHover, itemColorPressed, itemColorActive, itemColorActiveHover, itemColorDisabled, itemBorder, itemBorderHover, itemBorderPressed, itemBorderActive, itemBorderDisabled, itemBorderRadius, itemFontSize, jumperFontSize, jumperTextColor, jumperTextColorDisabled, prefixMargin, suffixMargin, buttonColor, buttonColorHover, buttonColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-prefix-margin': prefixMargin,
+                '--n-suffix-margin': suffixMargin,
+                '--n-item-font-size': itemFontSize,
+                '--n-select-width': selectWidth,
+                '--n-select-margin': selectMargin,
+                '--n-input-width': inputWidth,
+                '--n-input-margin': inputMargin,
+                '--n-item-size': itemSize,
+                '--n-item-text-color': itemTextColor,
+                '--n-item-text-color-disabled': itemTextColorDisabled,
+                '--n-item-text-color-hover': itemTextColorHover,
+                '--n-item-text-color-active': itemTextColorActive,
+                '--n-item-text-color-pressed': itemTextColorPressed,
+                '--n-item-color': itemColor,
+                '--n-item-color-hover': itemColorHover,
+                '--n-item-color-disabled': itemColorDisabled,
+                '--n-item-color-active': itemColorActive,
+                '--n-item-color-active-hover': itemColorActiveHover,
+                '--n-item-color-pressed': itemColorPressed,
+                '--n-item-border': itemBorder,
+                '--n-item-border-hover': itemBorderHover,
+                '--n-item-border-disabled': itemBorderDisabled,
+                '--n-item-border-active': itemBorderActive,
+                '--n-item-border-pressed': itemBorderPressed,
+                '--n-item-padding': itemPadding,
+                '--n-item-border-radius': itemBorderRadius,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-jumper-font-size': jumperFontSize,
+                '--n-jumper-text-color': jumperTextColor,
+                '--n-jumper-text-color-disabled': jumperTextColorDisabled,
+                '--n-item-margin': itemMargin,
+                '--n-button-icon-size': buttonIconSize,
+                '--n-button-icon-color': buttonIconColor,
+                '--n-button-icon-color-hover': buttonIconColorHover,
+                '--n-button-icon-color-pressed': buttonIconColorPressed,
+                '--n-button-color-hover': buttonColorHover,
+                '--n-button-color': buttonColor,
+                '--n-button-color-pressed': buttonColorPressed,
+                '--n-button-border': buttonBorder,
+                '--n-button-border-hover': buttonBorderHover,
+                '--n-button-border-pressed': buttonBorderPressed
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('pagination', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             locale: localeRef,
@@ -279,57 +327,15 @@ exports.default = (0, vue_1.defineComponent)({
             handleQuickJumperKeyUp,
             handlePageItemMouseEnter,
             handlePageItemMouseLeave,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { itemSize, itemPadding, itemMargin, inputWidth, selectWidth, inputMargin, selectMargin, buttonBorder, buttonBorderHover, buttonBorderPressed, buttonIconColor, buttonIconColorHover, buttonIconColorPressed, buttonIconSize, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, itemTextColorDisabled, itemColor, itemColorHover, itemColorPressed, itemColorActive, itemColorActiveHover, itemColorDisabled, itemBorder, itemBorderHover, itemBorderPressed, itemBorderActive, itemBorderDisabled, itemBorderRadius, itemFontSize, jumperFontSize, jumperTextColor, jumperTextColorDisabled, prefixMargin, suffixMargin, buttonColor, buttonColorHover, buttonColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-prefix-margin': prefixMargin,
-                    '--n-suffix-margin': suffixMargin,
-                    '--n-item-font-size': itemFontSize,
-                    '--n-select-width': selectWidth,
-                    '--n-select-margin': selectMargin,
-                    '--n-input-width': inputWidth,
-                    '--n-input-margin': inputMargin,
-                    '--n-item-size': itemSize,
-                    '--n-item-text-color': itemTextColor,
-                    '--n-item-text-color-disabled': itemTextColorDisabled,
-                    '--n-item-text-color-hover': itemTextColorHover,
-                    '--n-item-text-color-active': itemTextColorActive,
-                    '--n-item-text-color-pressed': itemTextColorPressed,
-                    '--n-item-color': itemColor,
-                    '--n-item-color-hover': itemColorHover,
-                    '--n-item-color-disabled': itemColorDisabled,
-                    '--n-item-color-active': itemColorActive,
-                    '--n-item-color-active-hover': itemColorActiveHover,
-                    '--n-item-color-pressed': itemColorPressed,
-                    '--n-item-border': itemBorder,
-                    '--n-item-border-hover': itemBorderHover,
-                    '--n-item-border-disabled': itemBorderDisabled,
-                    '--n-item-border-active': itemBorderActive,
-                    '--n-item-border-pressed': itemBorderPressed,
-                    '--n-item-padding': itemPadding,
-                    '--n-item-border-radius': itemBorderRadius,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-jumper-font-size': jumperFontSize,
-                    '--n-jumper-text-color': jumperTextColor,
-                    '--n-jumper-text-color-disabled': jumperTextColorDisabled,
-                    '--n-item-margin': itemMargin,
-                    '--n-button-icon-size': buttonIconSize,
-                    '--n-button-icon-color': buttonIconColor,
-                    '--n-button-icon-color-hover': buttonIconColorHover,
-                    '--n-button-icon-color-pressed': buttonIconColorPressed,
-                    '--n-button-color-hover': buttonColorHover,
-                    '--n-button-color': buttonColor,
-                    '--n-button-color-pressed': buttonColorPressed,
-                    '--n-button-border': buttonBorder,
-                    '--n-button-border-hover': buttonBorderHover,
-                    '--n-button-border-pressed': buttonBorderPressed
-                };
-            })
+            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() {
         // it's ok to expand all prop here since no slots' deps
-        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showFastBackward, showFastForward, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, prev, next, prefix, suffix, label, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handlePageItemMouseEnter, handlePageItemMouseLeave, handleForwardClick, handleQuickJumperKeyUp } = this;
+        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showFastBackward, showFastForward, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, prev, next, prefix, suffix, label, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handlePageItemMouseEnter, handlePageItemMouseLeave, handleForwardClick, handleQuickJumperKeyUp, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         const renderPrefix = $slots.prefix || prefix;
         const renderSuffix = $slots.suffix || suffix;
         const renderPrev = prev || $slots.prev;
@@ -337,6 +343,7 @@ exports.default = (0, vue_1.defineComponent)({
         const renderLabel = label || $slots.label;
         return ((0, vue_1.h)("div", { ref: "selfRef", class: [
                 `${mergedClsPrefix}-pagination`,
+                this.themeClass,
                 disabled && `${mergedClsPrefix}-pagination--disabled`
             ], style: cssVars },
             renderPrefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-prefix` }, renderPrefix({

package/lib/popover/src/PopoverBody.js

@@ -29,7 +29,7 @@ exports.default = (0, vue_1.defineComponent)({
     inheritAttrs: false,
     props: exports.popoverBodyProps,
     setup(props, { slots, attrs }) {
-        const { namespaceRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { namespaceRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Popover', '-popover', index_cssr_1.default, styles_1.popoverLight, props, mergedClsPrefixRef);
         const followerRef = (0, vue_1.ref)(null);
         const NPopover = (0, vue_1.inject)('NPopover');
@@ -62,7 +62,7 @@ exports.default = (0, vue_1.defineComponent)({
                 },
                 props.maxWidth ? { maxWidth: (0, _utils_1.formatLength)(props.maxWidth) } : {},
                 props.minWidth ? { minWidth: (0, _utils_1.formatLength)(props.minWidth) } : {},
-                cssVarsRef.value
+                inlineThemeDisabled ? undefined : cssVarsRef.value
             ];
         });
         const cssVarsRef = (0, vue_1.computed)(() => {
@@ -85,6 +85,9 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-space-arrow': spaceArrow
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('popover', undefined, cssVarsRef, props)
+            : undefined;
         NPopover.setBodyInstance({
             syncPosition
         });
@@ -137,6 +140,7 @@ exports.default = (0, vue_1.defineComponent)({
         (0, vue_1.provide)(interface_2.drawerBodyInjectionKey, null);
         (0, vue_1.provide)(interface_3.modalBodyInjectionKey, null);
         function renderContentNode() {
+            themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender();
             let contentNode;
             const { internalRenderBodyRef: { value: renderBody } } = NPopover;
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
@@ -146,7 +150,7 @@ exports.default = (0, vue_1.defineComponent)({
                 const renderContentInnerNode = () => {
                     var _a;
                     return [
-                        (0, _utils_1.resolveWrappedSlot)(slots.header, (children) => [
+                        (0, _utils_1.resolveWrappedSlot)(slots.header, (children) => children && [
                             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-popover__header` }, children),
                             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-popover__content` }, slots)
                         ]) || ((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)),
@@ -161,6 +165,7 @@ exports.default = (0, vue_1.defineComponent)({
                 contentNode = (0, vue_1.h)('div', (0, vue_1.mergeProps)({
                     class: [
                         `${mergedClsPrefix}-popover`,
+                        themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value,
                         extraClass.map((v) => `${mergedClsPrefix}-${v}`),
                         {
                             [`${mergedClsPrefix}-popover--overlap`]: props.overlap,
@@ -184,6 +189,7 @@ exports.default = (0, vue_1.defineComponent)({
                 // Shadow class exists for reuse box-shadow.
                 [
                     `${mergedClsPrefix}-popover`,
+                    themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value,
                     props.overlap && `${mergedClsPrefix}-popover--overlap`
                 ], bodyRef, styleRef.value, handleMouseEnter, handleMouseLeave);
             }

package/lib/progress/src/Progress.d.ts

@@ -240,8 +240,6 @@ declare const _default: import("vue").DefineComponent<{
         lineBgProcessing: string;
     }, any>>>;
 }, {
-    themeClass?: import("vue").Ref<string> | undefined;
-    onRender?: (() => void) | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedIndicatorPlacement: import("vue").ComputedRef<"inside" | "outside">;
     gapDeg: import("vue").ComputedRef<number | undefined>;
@@ -261,6 +259,8 @@ declare const _default: import("vue").DefineComponent<{
         '--n-text-color-line-inner': string;
         '--n-text-color-line-outer': 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 processing: BooleanConstructor;
     readonly type: {

package/lib/progress/src/Progress.js

@@ -55,8 +55,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return undefined;
         });
-        const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
-        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Progress', '-progress', index_cssr_1.default, styles_1.progressLight, props, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { status } = props;
@@ -78,10 +77,17 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-text-color-line-outer': textColorLineOuter
             };
         });
-        const themeClassHandle = disableInlineTheme
+        const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('progress', (0, vue_1.computed)(() => props.status[0]), cssVarsRef, props)
-            : _mixins_1.emptyThemeClassHandle;
-        return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, mergedIndicatorPlacement: mergedIndicatorPlacementRef, gapDeg, cssVars: disableInlineTheme ? undefined : cssVarsRef }, themeClassHandle);
+            : undefined;
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedIndicatorPlacement: mergedIndicatorPlacementRef,
+            gapDeg,
+            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() {
         // it's ok to expand all prop here since no slots' deps

package/lib/radio/src/Radio.d.ts

@@ -149,7 +149,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-text-color': string;
         '--n-text-color-disabled': string;
         '--n-label-padding': 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<{
     name: StringConstructor;
     value: {