naive-ui 2.25.0 → 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

@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
     onEsc: PropType<() => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -66,7 +66,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: true;
     };
-    preset: PropType<"dialog" | "card" | "confirm">;
+    preset: PropType<"dialog" | "confirm" | "card">;
     displayDirective: {
         type: PropType<"show" | "if">;
         required: true;
@@ -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;
@@ -731,7 +732,7 @@ declare const _default: import("vue").DefineComponent<{
     onEsc: PropType<() => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -769,7 +770,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: true;
     };
-    preset: PropType<"dialog" | "card" | "confirm">;
+    preset: PropType<"dialog" | "confirm" | "card">;
     displayDirective: {
         type: PropType<"show" | "if">;
         required: true;
@@ -783,11 +784,11 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     size: "small" | "medium" | "large" | "huge";
     autoFocus: boolean;
-    bordered: boolean;
     loading: boolean;
+    bordered: boolean;
     showIcon: boolean;
     closable: boolean;
     hoverable: boolean;

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;
     };
@@ -22,7 +22,7 @@ declare const modalProps: {
     onHide: PropType<(value: false) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -65,7 +65,7 @@ declare const modalProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    preset: PropType<"dialog" | "card" | "confirm">;
+    preset: PropType<"dialog" | "confirm" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
         type: PropType<"show" | "if">;
@@ -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;
     };
@@ -934,7 +934,7 @@ declare const _default: import("vue").DefineComponent<{
     onHide: PropType<(value: false) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -977,7 +977,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    preset: PropType<"dialog" | "card" | "confirm">;
+    preset: PropType<"dialog" | "confirm" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
         type: PropType<"show" | "if">;
@@ -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;
     };
@@ -1864,7 +1861,7 @@ declare const _default: import("vue").DefineComponent<{
     onHide: PropType<(value: false) => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: PropType<string | (() => import("vue").VNodeChild)>;
@@ -1907,7 +1904,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    preset: PropType<"dialog" | "card" | "confirm">;
+    preset: PropType<"dialog" | "confirm" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
         type: PropType<"show" | "if">;
@@ -2753,15 +2750,13 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     size: "small" | "medium" | "large" | "huge";
     show: boolean;
     transformOrigin: "center" | "mouse";
-    appear: boolean | undefined;
-    dialog: boolean;
     autoFocus: boolean;
-    bordered: boolean;
     loading: boolean;
+    bordered: boolean;
     showIcon: boolean;
     closable: boolean;
     displayDirective: "show" | "if";
@@ -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/modal/src/presetProps.d.ts

@@ -1,7 +1,7 @@
 declare const presetProps: {
     icon: import("vue").PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: import("vue").PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: import("vue").PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     title: import("vue").PropType<string | (() => import("vue").VNodeChild)>;
@@ -39,5 +39,5 @@ declare const presetProps: {
     hoverable: BooleanConstructor;
     role: StringConstructor;
 };
-declare const presetPropsKeys: ("type" | "content" | "size" | "icon" | "title" | "role" | "action" | "bordered" | "positiveText" | "negativeText" | "loading" | "showIcon" | "contentStyle" | "onClose" | "closable" | "iconPlacement" | "hoverable" | "headerStyle" | "headerExtraStyle" | "footerStyle" | "embedded" | "segmented" | "onPositiveClick" | "onNegativeClick")[];
+declare const presetPropsKeys: ("type" | "content" | "size" | "icon" | "title" | "role" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "showIcon" | "contentStyle" | "onClose" | "closable" | "iconPlacement" | "hoverable" | "headerStyle" | "headerExtraStyle" | "footerStyle" | "embedded" | "segmented" | "onPositiveClick" | "onNegativeClick")[];
 export { presetProps, presetPropsKeys };

package/es/notification/src/Notification.d.ts

@@ -5,7 +5,7 @@ export declare const notificationProps: {
         readonly default: true;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly avatar: PropType<() => VNodeChild>;
@@ -26,7 +26,7 @@ export declare const Notification: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly avatar: PropType<() => VNodeChild>;
@@ -75,7 +75,7 @@ export declare const Notification: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly avatar: PropType<() => VNodeChild>;
@@ -89,6 +89,6 @@ export declare const Notification: import("vue").DefineComponent<{
         readonly required: true;
     };
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     closable: boolean;
 }>;

package/es/notification/src/NotificationEnvironment.d.ts

@@ -16,7 +16,7 @@ export declare const notificationEnvOptions: {
         readonly default: true;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly avatar: PropType<() => import("vue").VNodeChild>;
@@ -48,7 +48,7 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<{
         readonly default: true;
     };
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     avatar: PropType<() => import("vue").VNodeChild>;
@@ -88,7 +88,7 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<{
         readonly default: true;
     };
     type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     avatar: PropType<() => import("vue").VNodeChild>;
@@ -98,6 +98,6 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<{
     meta: PropType<string | (() => import("vue").VNodeChild)>;
     action: PropType<string | (() => import("vue").VNodeChild)>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     closable: boolean;
 }>;

package/es/notification/src/NotificationProvider.d.ts

@@ -242,7 +242,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly destroy: () => void;
         readonly hide: () => void;
         readonly deactivate: () => void;
-        type?: "default" | "success" | "error" | "warning" | "info" | undefined;
+        type?: "default" | "error" | "info" | "success" | "warning" | undefined;
         closable?: boolean | undefined;
         meta?: string | (() => import("vue").VNodeChild) | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;

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;