naive-ui 2.25.2 → 2.25.3

package/es/menu/src/Menu.js

@@ -1,7 +1,7 @@
 import { h, ref, toRef, computed, defineComponent, provide, inject, watchEffect } from 'vue';
 import { createTreeMate } from 'treemate';
 import { useCompitable, useMergedState } from 'vooks';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { call } from '../../_utils';
 import { itemRenderer } from './utils';
 import { menuLight } from '../styles';
@@ -60,7 +60,7 @@ export default defineComponent({
         if (process.env.NODE_ENV !== 'production') {
             useCheckDeprecated(props);
         }
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Menu', '-menu', style, menuLight, props, mergedClsPrefixRef);
         const layoutSider = inject(layoutSiderInjectionKey, null);
         const mergedCollapsedRef = computed(() => {
@@ -188,6 +188,66 @@ export default defineComponent({
             }
             doUpdateExpandedKeys(currentExpandedKeys);
         }
+        const cssVarsRef = computed(() => {
+            const { inverted } = props;
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            const { borderRadius, borderColorHorizontal, fontSize, itemHeight, dividerColor } = self;
+            const vars = {
+                '--n-divider-color': dividerColor,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-font-size': fontSize,
+                '--n-border-color-horizontal': borderColorHorizontal,
+                '--n-border-radius': borderRadius,
+                '--n-item-height': itemHeight
+            };
+            if (inverted) {
+                vars['--n-group-text-color'] = self.groupTextColorInverted;
+                vars['--n-color'] = self.colorInverted;
+                vars['--n-item-text-color'] = self.itemTextColorInverted;
+                vars['--n-arrow-color'] = self.arrowColorInverted;
+                vars['--n-arrow-color-hover'] = self.arrowColorHoverInverted;
+                vars['--n-arrow-color-active'] = self.arrowColorActiveInverted;
+                vars['--n-arrow-color-child-active'] =
+                    self.arrowColorChildActiveInverted;
+                vars['--n-item-icon-color'] = self.itemIconColorInverted;
+                vars['--n-item-text-color-hover'] = self.itemTextColorHoverInverted;
+                vars['--n-item-icon-color-hover'] = self.itemIconColorHoverInverted;
+                vars['--n-item-text-color-active'] = self.itemTextColorActiveInverted;
+                vars['--n-item-icon-color-active'] = self.itemIconColorActiveInverted;
+                vars['--n-item-icon-color-collapsed'] =
+                    self.itemIconColorCollapsedInverted;
+                vars['--n-item-color-active'] = self.itemColorActiveInverted;
+                vars['--n-item-color-active-collapsed'] =
+                    self.itemColorActiveCollapsedInverted;
+                vars['--n-item-text-color-child-active'] =
+                    self.itemTextColorChildActiveInverted;
+                vars['--n-item-icon-color-child-active'] =
+                    self.itemIconColorChildActiveInverted;
+            }
+            else {
+                vars['--n-group-text-color'] = self.groupTextColor;
+                vars['--n-color'] = self.color;
+                vars['--n-item-text-color'] = self.itemTextColor;
+                vars['--n-arrow-color'] = self.arrowColor;
+                vars['--n-arrow-color-hover'] = self.arrowColorHover;
+                vars['--n-arrow-color-active'] = self.arrowColorActive;
+                vars['--n-arrow-color-child-active'] = self.arrowColorChildActive;
+                vars['--n-item-icon-color'] = self.itemIconColor;
+                vars['--n-item-text-color-hover'] = self.itemTextColorHover;
+                vars['--n-item-icon-color-hover'] = self.itemIconColorHover;
+                vars['--n-item-text-color-active'] = self.itemTextColorActive;
+                vars['--n-item-icon-color-active'] = self.itemIconColorActive;
+                vars['--n-item-icon-color-collapsed'] = self.itemIconColorCollapsed;
+                vars['--n-item-color-active'] = self.itemColorActive;
+                vars['--n-item-color-active-collapsed'] = self.itemColorActiveCollapsed;
+                vars['--n-item-text-color-child-active'] = self.itemTextColorChildActive;
+                vars['--n-item-icon-color-child-active'] = self.itemIconColorChildActive;
+            }
+            return vars;
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('menu', computed(() => (props.inverted ? 'a' : 'b')), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             controlledExpandedKeys: controlledExpandedKeysRef,
@@ -199,72 +259,17 @@ export default defineComponent({
             tmNodes: tmNodesRef,
             mergedTheme: themeRef,
             mergedCollapsed: mergedCollapsedRef,
-            cssVars: computed(() => {
-                const { inverted } = props;
-                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const { borderRadius, borderColorHorizontal, fontSize, itemHeight, dividerColor } = self;
-                const vars = {
-                    '--n-divider-color': dividerColor,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-font-size': fontSize,
-                    '--n-border-color-horizontal': borderColorHorizontal,
-                    '--n-border-radius': borderRadius,
-                    '--n-item-height': itemHeight
-                };
-                if (inverted) {
-                    vars['--n-group-text-color'] = self.groupTextColorInverted;
-                    vars['--n-color'] = self.colorInverted;
-                    vars['--n-item-text-color'] = self.itemTextColorInverted;
-                    vars['--n-arrow-color'] = self.arrowColorInverted;
-                    vars['--n-arrow-color-hover'] = self.arrowColorHoverInverted;
-                    vars['--n-arrow-color-active'] = self.arrowColorActiveInverted;
-                    vars['--n-arrow-color-child-active'] =
-                        self.arrowColorChildActiveInverted;
-                    vars['--n-item-icon-color'] = self.itemIconColorInverted;
-                    vars['--n-item-text-color-hover'] = self.itemTextColorHoverInverted;
-                    vars['--n-item-icon-color-hover'] = self.itemIconColorHoverInverted;
-                    vars['--n-item-text-color-active'] = self.itemTextColorActiveInverted;
-                    vars['--n-item-icon-color-active'] = self.itemIconColorActiveInverted;
-                    vars['--n-item-icon-color-collapsed'] =
-                        self.itemIconColorCollapsedInverted;
-                    vars['--n-item-color-active'] = self.itemColorActiveInverted;
-                    vars['--n-item-color-active-collapsed'] =
-                        self.itemColorActiveCollapsedInverted;
-                    vars['--n-item-text-color-child-active'] =
-                        self.itemTextColorChildActiveInverted;
-                    vars['--n-item-icon-color-child-active'] =
-                        self.itemIconColorChildActiveInverted;
-                }
-                else {
-                    vars['--n-group-text-color'] = self.groupTextColor;
-                    vars['--n-color'] = self.color;
-                    vars['--n-item-text-color'] = self.itemTextColor;
-                    vars['--n-arrow-color'] = self.arrowColor;
-                    vars['--n-arrow-color-hover'] = self.arrowColorHover;
-                    vars['--n-arrow-color-active'] = self.arrowColorActive;
-                    vars['--n-arrow-color-child-active'] = self.arrowColorChildActive;
-                    vars['--n-item-icon-color'] = self.itemIconColor;
-                    vars['--n-item-text-color-hover'] = self.itemTextColorHover;
-                    vars['--n-item-icon-color-hover'] = self.itemIconColorHover;
-                    vars['--n-item-text-color-active'] = self.itemTextColorActive;
-                    vars['--n-item-icon-color-active'] = self.itemIconColorActive;
-                    vars['--n-item-icon-color-collapsed'] = self.itemIconColorCollapsed;
-                    vars['--n-item-color-active'] = self.itemColorActive;
-                    vars['--n-item-color-active-collapsed'] =
-                        self.itemColorActiveCollapsed;
-                    vars['--n-item-text-color-child-active'] =
-                        self.itemTextColorChildActive;
-                    vars['--n-item-icon-color-child-active'] =
-                        self.itemIconColorChildActive;
-                }
-                return vars;
-            })
+            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 { mergedClsPrefix, mode } = this;
+        const { mergedClsPrefix, mode, themeClass, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { role: mode === 'horizontal' ? 'menubar' : 'menu', class: [
                 `${mergedClsPrefix}-menu`,
+                themeClass,
                 `${mergedClsPrefix}-menu--${mode}`,
                 this.mergedCollapsed && `${mergedClsPrefix}-menu--collapsed`
             ], style: this.cssVars }, this.tmNodes.map((tmNode) => itemRenderer(tmNode, this.$props))));

package/es/modal/src/BodyWrapper.d.ts

@@ -690,6 +690,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;

package/es/modal/src/Modal.d.ts

@@ -11,8 +11,8 @@ declare const modalProps: {
     onPositiveClick: PropType<() => Promise<boolean> | boolean | any>;
     onNegativeClick: PropType<() => Promise<boolean> | boolean | any>;
     onMaskClick: PropType<(e: MouseEvent) => void>;
-    dialog: BooleanConstructor;
-    appear: {
+    internalDialog: BooleanConstructor;
+    internalAppear: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
@@ -923,8 +923,8 @@ declare const _default: import("vue").DefineComponent<{
     onPositiveClick: PropType<() => any>;
     onNegativeClick: PropType<() => any>;
     onMaskClick: PropType<(e: MouseEvent) => void>;
-    dialog: BooleanConstructor;
-    appear: {
+    internalDialog: BooleanConstructor;
+    internalAppear: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
@@ -1836,12 +1836,9 @@ declare const _default: import("vue").DefineComponent<{
     handleNegativeClick: () => void;
     handlePositiveClick: () => void;
     handleCloseClick: () => void;
-    cssVars: import("vue").ComputedRef<{
-        '--n-bezier-ease-out': string;
-        '--n-box-shadow': string;
-        '--n-color': string;
-        '--n-text-color': string;
-    }>;
+    cssVars: false | 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<{
     onEsc: PropType<() => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
@@ -1853,8 +1850,8 @@ declare const _default: import("vue").DefineComponent<{
     onPositiveClick: PropType<() => any>;
     onNegativeClick: PropType<() => any>;
     onMaskClick: PropType<(e: MouseEvent) => void>;
-    dialog: BooleanConstructor;
-    appear: {
+    internalDialog: BooleanConstructor;
+    internalAppear: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
@@ -2757,8 +2754,6 @@ declare const _default: import("vue").DefineComponent<{
     size: "small" | "medium" | "large" | "huge";
     show: boolean;
     transformOrigin: "center" | "mouse";
-    appear: boolean | undefined;
-    dialog: boolean;
     autoFocus: boolean;
     loading: boolean;
     bordered: boolean;
@@ -2769,6 +2764,8 @@ declare const _default: import("vue").DefineComponent<{
     embedded: boolean;
     segmented: boolean | import("../../card/src/Card").Segmented;
     trapFocus: boolean;
+    internalDialog: boolean;
+    internalAppear: boolean | undefined;
     unstableShowMask: boolean;
     maskClosable: boolean;
     closeOnEsc: boolean;

package/es/modal/src/Modal.js

@@ -3,7 +3,7 @@ import { zindexable } from 'vdirs';
 import { useIsMounted, useClicked, useClickPosition } from 'vooks';
 import { VLazyTeleport } from 'vueuc';
 import { dialogProviderInjectionKey } from '../../dialog/src/context';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { keep, call, warnOnce } from '../../_utils';
 import { modalLight } from '../styles';
 import { presetProps, presetPropsKeys } from './presetProps';
@@ -35,7 +35,7 @@ const modalProps = Object.assign(Object.assign(Object.assign(Object.assign({}, u
     // 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
     }, 
@@ -61,12 +61,12 @@ export default defineComponent({
             }
         }
         const containerRef = ref(null);
-        const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
+        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Modal', '-modal', style, modalLight, props, mergedClsPrefixRef);
         const clickedRef = useClicked(64);
         const clickedPositionRef = useClickPosition();
         const isMountedRef = useIsMounted();
-        const NDialogProvider = props.dialog
+        const NDialogProvider = props.internalDialog
             ? inject(dialogProviderInjectionKey, null)
             : null;
         function doUpdateShow(show) {
@@ -169,9 +169,21 @@ export default defineComponent({
             mergedClsPrefixRef,
             mergedThemeRef: themeRef,
             isMountedRef,
-            appearRef: toRef(props, 'appear'),
+            appearRef: toRef(props, 'internalAppear'),
             transformOriginRef: toRef(props, 'transformOrigin')
         });
+        const cssVarsRef = 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
+            ? useThemeClass('theme-class', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             namespace: namespaceRef,
@@ -190,39 +202,36 @@ export default defineComponent({
             handleNegativeClick,
             handlePositiveClick,
             handleCloseClick,
-            cssVars: 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 (h(VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
-                var _a;
-                return [
-                    withDirectives(h("div", { role: "none", ref: "containerRef", class: [`${mergedClsPrefix}-modal-container`, this.namespace], style: this.cssVars },
-                        this.unstableShowMask ? (h(Transition, { name: "fade-in-transition", key: "mask", appear: (_a = this.appear) !== null && _a !== void 0 ? _a : this.isMounted }, {
-                            default: () => {
-                                return this.show ? (h("div", { "aria-hidden": true, ref: "containerRef", class: `${mergedClsPrefix}-modal-mask` })) : null;
-                            }
-                        })) : null,
-                        h(NModalBodyWrapper, 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)), [
-                        [
-                            zindexable,
-                            {
-                                zIndex: this.zIndex,
-                                enabled: this.show
-                            }
-                        ]
-                    ])
-                ];
+                var _a, _b;
+                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                return withDirectives(h("div", { role: "none", ref: "containerRef", class: [
+                        `${mergedClsPrefix}-modal-container`,
+                        this.themeClass,
+                        this.namespace
+                    ], style: this.cssVars },
+                    this.unstableShowMask ? (h(Transition, { name: "fade-in-transition", key: "mask", appear: (_b = this.internalAppear) !== null && _b !== void 0 ? _b : this.isMounted }, {
+                        default: () => {
+                            return this.show ? (h("div", { "aria-hidden": true, ref: "containerRef", class: `${mergedClsPrefix}-modal-mask` })) : null;
+                        }
+                    })) : null,
+                    h(NModalBodyWrapper, 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)), [
+                    [
+                        zindexable,
+                        {
+                            zIndex: this.zIndex,
+                            enabled: this.show
+                        }
+                    ]
+                ]);
             }
         }));
     }

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

@@ -133,6 +133,9 @@ cE('avatar', [cB('icon', {
  width: 28px;
  height: 28px;
  font-size: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
  `, [cB('icon', {
   transition: 'color .3s var(--n-bezier)'
 })]), cB('notification-main', `
@@ -179,14 +182,12 @@ cE('avatar', [cB('icon', {
 })])])])])]);
 
 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 cB('notification', [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
- transform: translate(${transformXEnter}, ${transformYEnter});
+ transform: translate(${transformXEnter}, 0);
  `), c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
- transform: translate(${transformXLeave}, ${transformYLeave});
+ transform: translate(${transformXLeave}, 0);
  `)]);
 }

package/es/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/es/page-header/src/PageHeader.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { h, defineComponent, computed } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { pageHeaderLight } from '../styles/light';
 import style from './styles/index.cssr';
 import { ArrowBackIcon } from '../../_internal/icons';
@@ -11,31 +11,39 @@ export default defineComponent({
     name: 'PageHeader',
     props: pageHeaderProps,
     setup(props) {
-        const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
+        const { mergedClsPrefixRef, mergedRtlRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('PageHeader', '-page-header', style, pageHeaderLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = useRtl('PageHeader', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = useRtl('PageHeader', mergedRtlRef, mergedClsPrefixRef);
+        const cssVarsRef = 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
+            ? useThemeClass('page-header', undefined, cssVarsRef, props)
+            : undefined;
         return {
             rtlEnabled: rtlEnabledRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: 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;
@@ -43,6 +51,7 @@ export default defineComponent({
         const showExtra = extra || extraSlot;
         return (h("div", { style: cssVars, class: [
                 `${mergedClsPrefix}-page-header-wrapper`,
+                this.themeClass,
                 this.rtlEnabled && `${mergedClsPrefix}-page-header-wrapper--rtl`
             ] },
             headerSlot ? (h("div", { class: `${mergedClsPrefix}-page-header-header`, key: "breadcrumb" }, headerSlot())) : null,

package/es/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;