naive-ui 2.25.2 → 2.25.3

package/lib/log/src/Log.js

@@ -37,7 +37,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Log',
     props: logProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const slientRef = (0, vue_1.ref)(false);
         const highlightRef = (0, vue_1.computed)(() => {
             return props.language !== undefined;
@@ -152,25 +152,30 @@ exports.default = (0, vue_1.defineComponent)({
         const exportedMethods = {
             scrollTo
         };
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { loaderFontSize, loaderTextColor, loaderColor, loaderBorder, loadingColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-loader-font-size': loaderFontSize,
+                '--n-loader-border': loaderBorder,
+                '--n-loader-color': loaderColor,
+                '--n-loader-text-color': loaderTextColor,
+                '--n-loading-color': loadingColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('log', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign({}, exportedMethods), { mergedClsPrefix: mergedClsPrefixRef, scrollbarRef, mergedTheme: themeRef, styleHeight: styleHeightRef, mergedLines: mergedLinesRef, scrollToTop,
             scrollToBottom,
             handleWheel,
-            handleScroll, cssVars: (0, vue_1.computed)(() => {
-                const { self: { loaderFontSize, loaderTextColor, loaderColor, loaderBorder, loadingColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-loader-font-size': loaderFontSize,
-                    '--n-loader-border': loaderBorder,
-                    '--n-loader-color': loaderColor,
-                    '--n-loader-text-color': loaderTextColor,
-                    '--n-loading-color': loadingColor
-                };
-            }) });
+            handleScroll, 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, mergedTheme } = this;
+        const { mergedClsPrefix, mergedTheme, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (0, vue_1.h)('div', {
-            class: `${mergedClsPrefix}-log`,
+            class: [`${mergedClsPrefix}-log`, this.themeClass],
             style: [
                 {
                     lineHeight: this.lineHeight,

package/lib/mention/index.d.ts

@@ -1,3 +1,3 @@
 export { default as NMention } from './src/Mention';
 export type { MentionProps } from './src/Mention';
-export type { MentionOption } from './src/interface';
+export type { MentionOption, MentionInst } from './src/interface';

package/lib/mention/src/interface.d.ts

@@ -1,2 +1,6 @@
 import type { SelectBaseOption } from '../../select/src/interface';
 export declare type MentionOption = SelectBaseOption<string>;
+export interface MentionInst {
+    focus: () => void;
+    blur: () => void;
+}

package/lib/menu/src/Menu.d.ts

@@ -745,7 +745,9 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     mergedCollapsed: import("vue").ComputedRef<boolean>;
-    cssVars: import("vue").ComputedRef<any>;
+    cssVars: import("vue").ComputedRef<any> | 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<ExtractPropTypes<{
     readonly options: {
         readonly type: PropType<MenuMixedOption[]>;

package/lib/menu/src/Menu.js

@@ -65,7 +65,7 @@ exports.default = (0, vue_1.defineComponent)({
         if (process.env.NODE_ENV !== 'production') {
             (0, useCheckDeprecated_1.useCheckDeprecated)(props);
         }
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Menu', '-menu', index_cssr_1.default, styles_1.menuLight, props, mergedClsPrefixRef);
         const layoutSider = (0, vue_1.inject)(interface_1.layoutSiderInjectionKey, null);
         const mergedCollapsedRef = (0, vue_1.computed)(() => {
@@ -193,6 +193,66 @@ exports.default = (0, vue_1.defineComponent)({
             }
             doUpdateExpandedKeys(currentExpandedKeys);
         }
+        const cssVarsRef = (0, vue_1.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
+            ? (0, _mixins_1.useThemeClass)('menu', (0, vue_1.computed)(() => (props.inverted ? 'a' : 'b')), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             controlledExpandedKeys: controlledExpandedKeysRef,
@@ -204,72 +264,17 @@ exports.default = (0, vue_1.defineComponent)({
             tmNodes: tmNodesRef,
             mergedTheme: themeRef,
             mergedCollapsed: mergedCollapsedRef,
-            cssVars: (0, vue_1.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 ((0, vue_1.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) => (0, utils_1.itemRenderer)(tmNode, this.$props))));

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