naive-ui 2.24.6 → 2.25.2

package/es/message/src/MessageProvider.d.ts

@@ -1,4 +1,4 @@
-import { VNodeChild, ExtractPropTypes, Ref, PropType, CSSProperties } from 'vue';
+import { VNodeChild, ExtractPropTypes, PropType, CSSProperties } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import type { MessageOptions, MessageType } from './types';
 declare type ContentType = string | (() => VNodeChild);
@@ -10,7 +10,6 @@ export interface MessageApiInjection {
     loading: (content: ContentType, options?: MessageOptions) => MessageReactive;
     destroyAll: () => void;
 }
-export declare const messageApiInjectionKey: import("vue").InjectionKey<MessageApiInjection>;
 export interface MessageReactive {
     content?: ContentType;
     duration?: number;
@@ -185,11 +184,7 @@ declare const messageProviderProps: {
     }, any>>>;
 };
 export declare type MessageProviderProps = ExtractPublicPropTypes<typeof messageProviderProps>;
-declare type MessageProviderSetupProps = ExtractPropTypes<typeof messageProviderProps>;
-export declare const messageProviderInjectionKey: import("vue").InjectionKey<{
-    props: MessageProviderSetupProps;
-    mergedClsPrefixRef: Ref<string>;
-}>;
+export declare type MessageProviderSetupProps = ExtractPropTypes<typeof messageProviderProps>;
 declare const _default: import("vue").DefineComponent<{
     to: PropType<string | HTMLElement>;
     duration: {
@@ -353,7 +348,7 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    messageRefs: Ref<{
+    messageRefs: import("vue").Ref<{
         [x: string]: {
             key: string;
             hide: () => void;
@@ -367,7 +362,7 @@ declare const _default: import("vue").DefineComponent<{
             destroy: () => void;
         };
     }>;
-    messageList: Ref<{
+    messageList: import("vue").Ref<{
         key: string;
         content?: ContentType | undefined;
         duration?: number | undefined;

package/es/message/src/MessageProvider.js

@@ -1,9 +1,9 @@
 import { Fragment, ref, h, reactive, Teleport, defineComponent, provide } from 'vue';
 import { createId } from 'seemly';
-import { createInjectionKey, omit } from '../../_utils';
+import { omit } from '../../_utils';
 import { useConfig, useTheme } from '../../_mixins';
 import MessageEnvironment from './MessageEnvironment';
-export const messageApiInjectionKey = createInjectionKey('n-message-api');
+import { messageApiInjectionKey, messageProviderInjectionKey } from './context';
 const messageProviderProps = Object.assign(Object.assign({}, useTheme.props), { to: [String, Object], duration: {
         type: Number,
         default: 3000
@@ -11,7 +11,6 @@ const messageProviderProps = Object.assign(Object.assign({}, useTheme.props), {
         type: String,
         default: 'top'
     }, closable: Boolean, containerStyle: [String, Object] });
-export const messageProviderInjectionKey = createInjectionKey('n-message-provider');
 export default defineComponent({
     name: 'MessageProvider',
     props: messageProviderProps,

package/es/message/src/context.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+import type { MessageApiInjection, MessageProviderSetupProps } from './MessageProvider';
+export declare const messageApiInjectionKey: import("vue").InjectionKey<MessageApiInjection>;
+export declare const messageProviderInjectionKey: import("vue").InjectionKey<{
+    props: MessageProviderSetupProps;
+    mergedClsPrefixRef: Ref<string>;
+}>;

package/es/message/src/context.js

@@ -0,0 +1,3 @@
+import { createInjectionKey } from '../../_utils';
+export const messageApiInjectionKey = createInjectionKey('n-message-api');
+export const messageProviderInjectionKey = createInjectionKey('n-message-provider');

package/es/message/src/types.d.ts

@@ -1,5 +1,5 @@
 import { VNodeChild } from 'vue';
-import { MessageSetupProps } from './message-props';
+import type { MessageSetupProps } from './message-props';
 export declare type MessageType = 'info' | 'success' | 'warning' | 'error' | 'loading';
 export declare type RenderMessageProps = Pick<MessageSetupProps, 'closable' | 'content' | 'icon' | 'onClose' | 'type'>;
 export declare type MessageRenderMessage = (props: RenderMessageProps) => VNodeChild;

package/es/message/src/use-message.js

@@ -1,6 +1,6 @@
 import { inject } from 'vue';
 import { throwError } from '../../_utils';
-import { messageApiInjectionKey } from './MessageProvider';
+import { messageApiInjectionKey } from './context';
 export function useMessage() {
     const api = inject(messageApiInjectionKey, null);
     if (api === null) {

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

@@ -49,6 +49,7 @@ declare const _default: import("vue").DefineComponent<{
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
     contentStyle: PropType<string | import("vue").CSSProperties>;
     headerStyle: PropType<string | import("vue").CSSProperties>;
+    headerExtraStyle: PropType<string | import("vue").CSSProperties>;
     footerStyle: PropType<string | import("vue").CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -65,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;
@@ -751,6 +752,7 @@ declare const _default: import("vue").DefineComponent<{
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
     contentStyle: PropType<string | import("vue").CSSProperties>;
     headerStyle: PropType<string | import("vue").CSSProperties>;
+    headerExtraStyle: PropType<string | import("vue").CSSProperties>;
     footerStyle: PropType<string | import("vue").CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -767,7 +769,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;
@@ -785,8 +787,8 @@ declare const _default: import("vue").DefineComponent<{
     size: "small" | "medium" | "large" | "huge";
     autoFocus: boolean;
     loading: boolean;
-    showIcon: boolean;
     bordered: boolean;
+    showIcon: boolean;
     closable: boolean;
     hoverable: boolean;
     embedded: boolean;

package/es/modal/src/BodyWrapper.js

@@ -1,12 +1,12 @@
 import { h, nextTick, toRef, watch, ref, inject, defineComponent, provide, withDirectives, vShow, Transition, mergeProps, cloneVNode } from 'vue';
 import { clickoutside } from 'vdirs';
 import { VFocusTrap } from 'vueuc';
-import { dialogPropKeys } from '../../dialog/src/Dialog';
+import { dialogPropKeys } from '../../dialog/src/dialogProps';
+import { NDialog } from '../../dialog/src/Dialog';
 import { cardBasePropKeys } from '../../card/src/Card';
 import { drawerBodyInjectionKey } from '../../drawer/src/interface';
 import { popoverBodyInjectionKey } from '../../popover/src/interface';
 import { NScrollbar } from '../../_internal';
-import { NDialog } from '../../dialog';
 import { NCard } from '../../card';
 import { getFirstSlotVNode, keep, warn } from '../../_utils';
 import { modalBodyInjectionKey, modalInjectionKey } from './interface';

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

@@ -43,6 +43,7 @@ declare const modalProps: {
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
+    headerExtraStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -64,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">;
@@ -954,6 +955,7 @@ declare const _default: import("vue").DefineComponent<{
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
+    headerExtraStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -975,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">;
@@ -1883,6 +1885,7 @@ declare const _default: import("vue").DefineComponent<{
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
+    headerExtraStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -1904,7 +1907,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">;
@@ -2758,8 +2761,8 @@ declare const _default: import("vue").DefineComponent<{
     dialog: boolean;
     autoFocus: boolean;
     loading: boolean;
-    showIcon: boolean;
     bordered: boolean;
+    showIcon: boolean;
     closable: boolean;
     displayDirective: "show" | "if";
     hoverable: boolean;

package/es/modal/src/Modal.js

@@ -2,7 +2,7 @@ import { h, withDirectives, Transition, ref, computed, defineComponent, provide,
 import { zindexable } from 'vdirs';
 import { useIsMounted, useClicked, useClickPosition } from 'vooks';
 import { VLazyTeleport } from 'vueuc';
-import { dialogProviderInjectionKey } from '../../dialog/src/DialogProvider';
+import { dialogProviderInjectionKey } from '../../dialog/src/context';
 import { useConfig, useTheme } from '../../_mixins';
 import { keep, call, warnOnce } from '../../_utils';
 import { modalLight } from '../styles';
@@ -62,7 +62,7 @@ export default defineComponent({
         }
         const containerRef = ref(null);
         const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
-        const themeRef = useTheme('Modal', 'Modal', style, modalLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Modal', '-modal', style, modalLight, props, mergedClsPrefixRef);
         const clickedRef = useClicked(64);
         const clickedPositionRef = useClickPosition();
         const isMountedRef = useIsMounted();

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

@@ -25,6 +25,7 @@ declare const presetProps: {
     onClose: import("vue").PropType<() => void>;
     contentStyle: import("vue").PropType<string | import("vue").CSSProperties>;
     headerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    headerExtraStyle: import("vue").PropType<string | import("vue").CSSProperties>;
     footerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -38,5 +39,5 @@ declare const presetProps: {
     hoverable: BooleanConstructor;
     role: StringConstructor;
 };
-declare const presetPropsKeys: ("type" | "content" | "size" | "icon" | "title" | "role" | "action" | "positiveText" | "negativeText" | "loading" | "showIcon" | "bordered" | "contentStyle" | "onClose" | "closable" | "iconPlacement" | "hoverable" | "headerStyle" | "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/modal/src/presetProps.js

@@ -1,4 +1,4 @@
-import { dialogProps } from '../../dialog/src/Dialog';
+import { dialogProps } from '../../dialog/src/dialogProps';
 import { cardBaseProps } from '../../card/src/Card';
 import { keysOf } from '../../_utils';
 const presetProps = Object.assign(Object.assign({}, cardBaseProps), dialogProps);

package/es/notification/index.d.ts

@@ -1,3 +1,3 @@
 export { default as NNotificationProvider } from './src/NotificationProvider';
-export type { NotificationProviderProps, NotificationProviderInst, NotificationApiInjection as NotificationApi, NotificationOptions, NotificationReactive } from './src/NotificationProvider';
+export type { NotificationProviderProps, NotificationProviderInst, NotificationApiInjection as NotificationApi, NotificationOptions, NotificationReactive, NotificationPlacement, NotificationType } from './src/NotificationProvider';
 export { useNotification } from './src/use-notification';

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

@@ -20,7 +20,7 @@ export declare const notificationProps: {
     };
 };
 export declare const notificationPropKeys: ("type" | "meta" | "content" | "description" | "title" | "action" | "avatar" | "onClose" | "closable")[];
-declare const _default: import("vue").DefineComponent<{
+export declare const Notification: import("vue").DefineComponent<{
     readonly closable: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -92,4 +92,3 @@ declare const _default: import("vue").DefineComponent<{
     type: "default" | "error" | "info" | "success" | "warning";
     closable: boolean;
 }>;
-export default _default;

package/es/notification/src/Notification.js

@@ -1,9 +1,9 @@
 import { h, defineComponent, computed, inject } from 'vue';
 import { getPadding } from 'seemly';
+import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../_internal/icons';
 import { createKey, keysOf, render } from '../../_utils';
 import { NBaseIcon, NBaseClose } from '../../_internal';
-import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../_internal/icons';
-import { notificationProviderInjectionKey } from './NotificationProvider';
+import { notificationProviderInjectionKey } from './context';
 const iconMap = {
     info: h(InfoIcon, null),
     success: h(SuccessIcon, null),
@@ -21,8 +21,6 @@ export const notificationProps = {
         default: 'default'
     },
     avatar: Function,
-    // BUG
-    // Wired Case, can't be set to [String, Function] as PropType<string | (() => VNodeChild)>,
     title: [String, Function],
     description: [String, Function],
     content: [String, Function],
@@ -34,7 +32,7 @@ export const notificationProps = {
     }
 };
 export const notificationPropKeys = keysOf(notificationProps);
-export default defineComponent({
+export const Notification = defineComponent({
     name: 'Notification',
     props: notificationProps,
     setup(props) {

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
+export declare const NotificationContainer: import("vue").DefineComponent<{
     scrollable: {
         type: BooleanConstructor;
         required: true;
@@ -162,4 +162,3 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }>>, {}>;
-export default _default;

package/es/notification/src/NotificationContainer.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, inject } from 'vue';
 import { NScrollbar } from '../../_internal';
-import { notificationProviderInjectionKey } from './NotificationProvider';
-export default defineComponent({
+import { notificationProviderInjectionKey } from './context';
+export const NotificationContainer = defineComponent({
     name: 'NotificationContainer',
     props: {
         scrollable: {

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

@@ -26,7 +26,7 @@ export declare const notificationEnvOptions: {
     readonly meta: PropType<string | (() => import("vue").VNodeChild)>;
     readonly action: PropType<string | (() => import("vue").VNodeChild)>;
 };
-declare const _default: import("vue").DefineComponent<{
+export declare const NotificationEnvironment: import("vue").DefineComponent<{
     internalKey: {
         type: StringConstructor;
         required: true;
@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     duration: NumberConstructor;
-    onClose: PropType<() => any>;
+    onClose: PropType<() => Promise<boolean> | boolean | any>;
     onLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
     onAfterLeave: PropType<() => void>;
@@ -76,7 +76,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     duration: NumberConstructor;
-    onClose: PropType<() => any>;
+    onClose: PropType<() => Promise<boolean> | boolean | any>;
     onLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
     onAfterLeave: PropType<() => void>;
@@ -101,4 +101,3 @@ declare const _default: import("vue").DefineComponent<{
     type: "default" | "error" | "info" | "success" | "warning";
     closable: boolean;
 }>;
-export default _default;

package/es/notification/src/NotificationEnvironment.js

@@ -1,6 +1,6 @@
 import { nextTick, Transition, h, defineComponent, ref, onMounted } from 'vue';
 import { keep } from '../../_utils';
-import NNotification, { notificationProps, notificationPropKeys } from './Notification';
+import { Notification, notificationProps, notificationPropKeys } from './Notification';
 export const notificationEnvOptions = Object.assign(Object.assign({}, notificationProps), { duration: Number, onClose: Function, onLeave: Function, onAfterEnter: Function, onAfterLeave: Function, 
     /** @deprecated */
     onHide: Function, 
@@ -8,7 +8,7 @@ export const notificationEnvOptions = Object.assign(Object.assign({}, notificati
     onAfterShow: Function, 
     /** @deprecated */
     onAfterHide: Function });
-export default defineComponent({
+export const NotificationEnvironment = defineComponent({
     name: 'NotificationEnvironment',
     props: Object.assign(Object.assign({}, notificationEnvOptions), { 
         // private
@@ -103,7 +103,7 @@ export default defineComponent({
             // convert to any since Element is not compitable with HTMLElement
             onBeforeEnter: this.handleBeforeEnter, onAfterEnter: this.handleAfterEnter, onBeforeLeave: this.handleBeforeLeave, onLeave: this.handleLeave, onAfterLeave: this.handleAfterLeave }, {
             default: () => {
-                return this.show ? (h(NNotification, Object.assign({}, keep(this.$props, notificationPropKeys), { onClose: this.handleClose }))) : null;
+                return this.show ? (h(Notification, Object.assign({}, keep(this.$props, notificationPropKeys), { onClose: this.handleClose }))) : null;
             }
         }));
     }

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

@@ -1,14 +1,14 @@
-import { PropType, ExtractPropTypes, Ref } from 'vue';
+import { PropType, ExtractPropTypes, Ref, CSSProperties } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import { ExtractPublicPropTypes, Mutable } from '../../_utils';
 import { NotificationTheme } from '../styles';
 import { notificationEnvOptions } from './NotificationEnvironment';
+export declare type NotificationPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export declare type NotificationOptions = Partial<ExtractPropTypes<typeof notificationEnvOptions>>;
 export interface NotificationProviderInjection {
     mergedClsPrefixRef: Ref<string>;
     mergedThemeRef: Ref<MergedTheme<NotificationTheme>>;
 }
-export declare const notificationProviderInjectionKey: import("vue").InjectionKey<NotificationProviderInjection>;
 declare type Create = (options: NotificationOptions) => NotificationReactive;
 declare type TypedCreate = (options: Omit<NotificationOptions, 'type'>) => NotificationReactive;
 export interface NotificationApiInjection {
@@ -23,6 +23,7 @@ export interface NotificationApiInjection {
 }
 export declare type NotificationProviderInst = NotificationApiInjection;
 export declare const notificationApiInjectionKey: import("vue").InjectionKey<NotificationApiInjection>;
+export declare type NotificationType = 'info' | 'success' | 'warning' | 'error';
 export declare type NotificationReactive = {
     readonly key: string;
     readonly destroy: () => void;
@@ -35,6 +36,7 @@ interface NotificationRef {
     hide: () => void;
 }
 declare const notificationProviderProps: {
+    containerStyle: PropType<string | CSSProperties>;
     to: PropType<string | HTMLElement>;
     scrollable: {
         type: BooleanConstructor;
@@ -42,7 +44,7 @@ declare const notificationProviderProps: {
     };
     max: NumberConstructor;
     placement: {
-        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<NotificationPlacement>;
         default: string;
     };
     theme: PropType<import("../../_mixins").Theme<"Notification", {
@@ -135,6 +137,7 @@ declare const notificationProviderProps: {
 };
 export declare type NotificationProviderProps = ExtractPublicPropTypes<typeof notificationProviderProps>;
 declare const _default: import("vue").DefineComponent<{
+    containerStyle: PropType<string | CSSProperties>;
     to: PropType<string | HTMLElement>;
     scrollable: {
         type: BooleanConstructor;
@@ -142,7 +145,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     max: NumberConstructor;
     placement: {
-        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<NotificationPlacement>;
         default: string;
     };
     theme: PropType<import("../../_mixins").Theme<"Notification", {
@@ -267,6 +270,7 @@ declare const _default: import("vue").DefineComponent<{
     open: (options: NotificationOptions) => NotificationReactive;
     destroyAll: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    containerStyle: PropType<string | CSSProperties>;
     to: PropType<string | HTMLElement>;
     scrollable: {
         type: BooleanConstructor;
@@ -274,7 +278,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     max: NumberConstructor;
     placement: {
-        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<NotificationPlacement>;
         default: string;
     };
     theme: PropType<import("../../_mixins").Theme<"Notification", {
@@ -365,7 +369,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }>>, {
-    placement: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    placement: NotificationPlacement;
     scrollable: boolean;
 }>;
 export default _default;

package/es/notification/src/NotificationProvider.js

@@ -4,12 +4,12 @@ import { createId } from 'seemly';
 import { useConfig, useTheme } from '../../_mixins';
 import { omit, createInjectionKey } from '../../_utils';
 import { notificationLight } from '../styles';
-import NotificationContainer from './NotificationContainer';
-import NotificationEnvironment from './NotificationEnvironment';
+import { NotificationContainer } from './NotificationContainer';
+import { NotificationEnvironment } from './NotificationEnvironment';
+import { notificationProviderInjectionKey } from './context';
 import style from './styles/index.cssr';
-export const notificationProviderInjectionKey = createInjectionKey('n-notification-provider');
 export const notificationApiInjectionKey = createInjectionKey('n-notification-api');
-const notificationProviderProps = Object.assign(Object.assign({}, useTheme.props), { to: [String, Object], scrollable: {
+const notificationProviderProps = Object.assign(Object.assign({}, useTheme.props), { containerStyle: [String, Object], to: [String, Object], scrollable: {
         type: Boolean,
         default: true
     }, max: Number, placement: {
@@ -63,7 +63,7 @@ export default defineComponent({
             leavingKeySet.delete(key);
             notificationListRef.value.splice(notificationListRef.value.findIndex((notification) => notification.key === key), 1);
         }
-        const themeRef = useTheme('Notification', 'Notification', style, notificationLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Notification', '-notification', style, notificationLight, props, mergedClsPrefixRef);
         const api = {
             create,
             info: apis[0],
@@ -99,7 +99,7 @@ export default defineComponent({
         return (h(Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
             _b.call(_a),
             this.notificationList.length ? (h(Teleport, { to: (_c = this.to) !== null && _c !== void 0 ? _c : 'body' },
-                h(NotificationContainer, { scrollable: this.scrollable, placement: this.placement }, {
+                h(NotificationContainer, { style: this.containerStyle, scrollable: this.scrollable, placement: this.placement }, {
                     default: () => {
                         return this.notificationList.map((notification) => {
                             return (h(NotificationEnvironment, Object.assign({ ref: ((inst) => {

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

@@ -0,0 +1,2 @@
+import type { NotificationProviderInjection } from './NotificationProvider';
+export declare const notificationProviderInjectionKey: import("vue").InjectionKey<NotificationProviderInjection>;

package/es/notification/src/context.js

@@ -0,0 +1,2 @@
+import { createInjectionKey } from '../../_utils';
+export const notificationProviderInjectionKey = createInjectionKey('n-notification-provider');

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

@@ -12,7 +12,7 @@ export default defineComponent({
     props: pageHeaderProps,
     setup(props) {
         const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
-        const themeRef = useTheme('PageHeader', 'PageHeader', style, pageHeaderLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('PageHeader', '-page-header', style, pageHeaderLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('PageHeader', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
         return {
             rtlEnabled: rtlEnabledRef,