naive-ui 2.23.1 → 2.24.2

package/lib/modal/src/Modal.js

@@ -27,9 +27,18 @@ const modalProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _
     }, transformOrigin: {
         type: String,
         default: 'mouse'
+    }, zIndex: Number, autoFocus: {
+        type: Boolean,
+        default: true
+    }, trapFocus: {
+        type: Boolean,
+        default: true
+    }, closeOnEsc: {
+        type: Boolean,
+        default: true
     } }), presetProps_1.presetProps), { 
     // events
-    'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onAfterEnter: Function, onBeforeLeave: Function, onAfterLeave: Function, onClose: Function, onPositiveClick: Function, onNegativeClick: Function, onMaskClick: Function, 
+    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: {
         type: Boolean,
@@ -142,6 +151,13 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
+        function handleEsc(e) {
+            var _a;
+            (_a = props.onEsc) === null || _a === void 0 ? void 0 : _a.call(props);
+            if (props.closeOnEsc) {
+                doUpdateShow(false);
+            }
+        }
         (0, vue_1.provide)(interface_1.modalInjectionKey, {
             getMousePosition: () => {
                 if (NDialogProvider) {
@@ -168,8 +184,10 @@ exports.default = (0, vue_1.defineComponent)({
             containerRef,
             presetProps: (0, vue_1.computed)(() => {
                 const pickedProps = (0, _utils_1.keep)(props, presetProps_1.presetPropsKeys);
+                // TODO: remove as any after vue fix the issue introduced in 3.2.27
                 return pickedProps;
             }),
+            handleEsc,
             handleAfterLeave,
             handleClickoutside,
             handleBeforeLeave,
@@ -180,10 +198,10 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseOut }, self: { boxShadow, color, textColor } } = themeRef.value;
                 return {
-                    '--bezier-ease-out': cubicBezierEaseOut,
-                    '--box-shadow': boxShadow,
-                    '--color': color,
-                    '--text-color': textColor
+                    '--n-bezier-ease-out': cubicBezierEaseOut,
+                    '--n-box-shadow': boxShadow,
+                    '--n-color': color,
+                    '--n-text-color': textColor
                 };
             })
         };
@@ -194,16 +212,17 @@ exports.default = (0, vue_1.defineComponent)({
             default: () => {
                 var _a;
                 return [
-                    (0, vue_1.withDirectives)((0, vue_1.h)("div", { ref: "containerRef", class: [`${mergedClsPrefix}-modal-container`, this.namespace], style: this.cssVars },
+                    (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", { ref: "containerRef", class: `${mergedClsPrefix}-modal-mask` })) : null;
+                                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 }, this.presetProps, { onClose: this.handleCloseClick, onNegativeClick: this.handleNegativeClick, onPositiveClick: this.handlePositiveClick, onBeforeLeave: this.handleBeforeLeave, onAfterEnter: this.onAfterEnter, onAfterLeave: this.handleAfterLeave, onClickoutside: this.handleClickoutside }), this.$slots)), [
+                        (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/modal/src/interface.d.ts

@@ -1,8 +1,8 @@
-import { Ref, ComponentPublicInstance, InjectionKey } from 'vue';
+import { Ref, ComponentPublicInstance } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import type { ModalTheme } from '../styles';
 export declare type ModalBodyInjection = Ref<HTMLElement | ComponentPublicInstance | null> | null;
-export declare const modalBodyInjectionKey: InjectionKey<ModalBodyInjection>;
+export declare const modalBodyInjectionKey: import("vue").InjectionKey<ModalBodyInjection>;
 export interface ModalInjection {
     getMousePosition: () => {
         x: number;
@@ -14,4 +14,4 @@ export interface ModalInjection {
     appearRef: Ref<boolean | undefined>;
     transformOriginRef: Ref<'mouse' | 'center'>;
 }
-export declare const modalInjectionKey: InjectionKey<ModalInjection>;
+export declare const modalInjectionKey: import("vue").InjectionKey<ModalInjection>;

package/lib/modal/src/interface.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.modalInjectionKey = exports.modalBodyInjectionKey = void 0;
-exports.modalBodyInjectionKey = Symbol('modalBody');
-exports.modalInjectionKey = Symbol('modal');
+const create_injection_key_1 = require("../../_utils/vue/create-injection-key");
+exports.modalBodyInjectionKey = (0, create_injection_key_1.createInjectionKey)('n-modal-body');
+exports.modalInjectionKey = (0, create_injection_key_1.createInjectionKey)('n-modal');

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

@@ -36,6 +36,7 @@ declare const presetProps: {
         readonly default: "medium";
     };
     hoverable: BooleanConstructor;
+    role: StringConstructor;
 };
-declare const presetPropsKeys: ("type" | "content" | "size" | "icon" | "title" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "contentStyle" | "onClose" | "closable" | "showIcon" | "iconPlacement" | "hoverable" | "headerStyle" | "footerStyle" | "embedded" | "segmented" | "onPositiveClick" | "onNegativeClick")[];
+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")[];
 export { presetProps, presetPropsKeys };

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

@@ -15,10 +15,10 @@ const cssr_1 = require("../../../_utils/cssr");
 const fade_in_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in.cssr"));
 
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
-// --bezier-ease-out
-// --box-shadow
-// --color
-// --text-color
+// --n-bezier-ease-out
+// --n-box-shadow
+// --n-color
+// --n-text-color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('modal-container', `
@@ -38,8 +38,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('modal-container', `
  `, [(0, fade_in_cssr_1.default)({
   enterDuration: '.25s',
   leaveDuration: '.25s',
-  enterCubicBezier: 'var(--bezier-ease-out)',
-  leaveCubicBezier: 'var(--bezier-ease-out)'
+  enterCubicBezier: 'var(--n-bezier-ease-out)',
+  leaveCubicBezier: 'var(--n-bezier-ease-out)'
 })]), (0, cssr_1.cB)('modal-body-wrapper', `
  position: fixed;
  left: 0;
@@ -53,9 +53,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('modal-container', `
  position: relative;
  `)]), (0, cssr_1.cB)('modal', `
  align-self: center;
- color: var(--text-color);
+ color: var(--n-text-color);
  margin: auto;
- box-shadow: var(--box-shadow);
+ box-shadow: var(--n-box-shadow);
  `, [(0, fade_in_scale_up_cssr_1.default)({
   duration: '.25s',
   enterScale: '.5'

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

@@ -44,53 +44,51 @@ declare const _default: import("vue").DefineComponent<{
     showAvatar: import("vue").ComputedRef<boolean | (() => VNodeChild)>;
     handleCloseClick(): void;
     cssVars: import("vue").ComputedRef<{
-        '--color': string;
-        '--font-size': string;
-        '--text-color': string;
-        '--description-text-color': string;
-        '--action-text-color': string;
-        '--title-text-color': string;
-        '--title-font-weight': string;
-        '--bezier': string;
-        '--bezier-ease-out': string;
-        '--bezier-ease-in': string;
-        '--border-radius': string;
-        '--box-shadow': string;
-        '--close-color': string;
-        '--close-color-hover': string;
-        '--close-color-pressed': string;
-        '--line-height': string;
-        '--icon-color': string;
-        '--close-margin': string;
-        '--close-size': string;
-        '--width': string;
-        '--padding-left': string;
-        '--padding-right': string;
-        '--padding-top': string;
-        '--padding-bottom': string;
+        '--n-color': string;
+        '--n-font-size': string;
+        '--n-text-color': string;
+        '--n-description-text-color': string;
+        '--n-action-text-color': string;
+        '--n-title-text-color': string;
+        '--n-title-font-weight': string;
+        '--n-bezier': string;
+        '--n-bezier-ease-out': string;
+        '--n-bezier-ease-in': string;
+        '--n-border-radius': string;
+        '--n-box-shadow': string;
+        '--n-close-color': string;
+        '--n-close-color-hover': string;
+        '--n-close-color-pressed': string;
+        '--n-line-height': string;
+        '--n-icon-color': string;
+        '--n-close-margin': string;
+        '--n-close-size': string;
+        '--n-width': string;
+        '--n-padding-left': string;
+        '--n-padding-right': string;
+        '--n-padding-top': string;
+        '--n-padding-bottom': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly closable?: unknown;
-    readonly type?: unknown;
-    readonly avatar?: unknown;
-    readonly title?: unknown;
-    readonly description?: unknown;
-    readonly content?: unknown;
-    readonly meta?: unknown;
-    readonly action?: unknown;
-    readonly onClose?: unknown;
-} & {
-    type: "default" | "error" | "info" | "success" | "warning";
-    onClose: () => void;
-    closable: boolean;
-} & {
-    meta?: string | (() => VNodeChild) | undefined;
-    content?: string | (() => VNodeChild) | undefined;
-    description?: string | (() => VNodeChild) | undefined;
-    title?: string | (() => VNodeChild) | undefined;
-    action?: string | (() => VNodeChild) | undefined;
-    avatar?: (() => VNodeChild) | 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 closable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly type: {
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly default: "default";
+    };
+    readonly avatar: PropType<() => VNodeChild>;
+    readonly title: PropType<string | (() => VNodeChild)>;
+    readonly description: PropType<string | (() => VNodeChild)>;
+    readonly content: PropType<string | (() => VNodeChild)>;
+    readonly meta: PropType<string | (() => VNodeChild)>;
+    readonly action: PropType<string | (() => VNodeChild)>;
+    readonly onClose: {
+        readonly type: PropType<() => void>;
+        readonly required: true;
+    };
+}>>, {
     type: "default" | "error" | "info" | "success" | "warning";
     closable: boolean;
 }>;

package/lib/notification/src/Notification.js

@@ -56,30 +56,30 @@ exports.default = (0, vue_1.defineComponent)({
                 const { self: { color, textColor, closeColor, closeColorHover, closeColorPressed, headerTextColor, descriptionTextColor, actionTextColor, borderRadius, headerFontWeight, boxShadow, lineHeight, fontSize, closeMargin, closeSize, width, padding, [(0, _utils_1.createKey)('iconColor', type)]: iconColor }, common: { cubicBezierEaseOut, cubicBezierEaseIn, cubicBezierEaseInOut } } = mergedThemeRef.value;
                 const { left, right, top, bottom } = (0, seemly_1.getPadding)(padding);
                 return {
-                    '--color': color,
-                    '--font-size': fontSize,
-                    '--text-color': textColor,
-                    '--description-text-color': descriptionTextColor,
-                    '--action-text-color': actionTextColor,
-                    '--title-text-color': headerTextColor,
-                    '--title-font-weight': headerFontWeight,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--bezier-ease-out': cubicBezierEaseOut,
-                    '--bezier-ease-in': cubicBezierEaseIn,
-                    '--border-radius': borderRadius,
-                    '--box-shadow': boxShadow,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--line-height': lineHeight,
-                    '--icon-color': iconColor,
-                    '--close-margin': closeMargin,
-                    '--close-size': closeSize,
-                    '--width': width,
-                    '--padding-left': left,
-                    '--padding-right': right,
-                    '--padding-top': top,
-                    '--padding-bottom': bottom
+                    '--n-color': color,
+                    '--n-font-size': fontSize,
+                    '--n-text-color': textColor,
+                    '--n-description-text-color': descriptionTextColor,
+                    '--n-action-text-color': actionTextColor,
+                    '--n-title-text-color': headerTextColor,
+                    '--n-title-font-weight': headerFontWeight,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-bezier-ease-out': cubicBezierEaseOut,
+                    '--n-bezier-ease-in': cubicBezierEaseIn,
+                    '--n-border-radius': borderRadius,
+                    '--n-box-shadow': boxShadow,
+                    '--n-close-color': closeColor,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-line-height': lineHeight,
+                    '--n-icon-color': iconColor,
+                    '--n-close-margin': closeMargin,
+                    '--n-close-size': closeSize,
+                    '--n-width': width,
+                    '--n-padding-left': left,
+                    '--n-padding-right': right,
+                    '--n-padding-top': top,
+                    '--n-padding-bottom': bottom
                 };
             })
         };

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

@@ -152,11 +152,14 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     mergedClsPrefix: import("vue").Ref<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    scrollable?: unknown;
-    placement?: unknown;
-} & {
-    placement: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    scrollable: boolean;
-} & {}>, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    scrollable: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    placement: {
+        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        required: true;
+    };
+}>>, {}>;
 export default _default;

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

@@ -66,46 +66,38 @@ declare const _default: import("vue").DefineComponent<{
     handleBeforeLeave: (el: HTMLElement) => void;
     handleAfterEnter: (el: HTMLElement) => void;
     handleBeforeEnter: (el: HTMLElement) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    internalKey?: unknown;
-    onInternalAfterLeave?: unknown;
-    duration?: unknown;
-    onClose?: unknown;
-    onLeave?: unknown;
-    onAfterEnter?: unknown;
-    onAfterLeave?: unknown;
-    onHide?: unknown;
-    onAfterShow?: unknown;
-    onAfterHide?: unknown;
-    closable?: unknown;
-    type?: unknown;
-    avatar?: unknown;
-    title?: unknown;
-    description?: unknown;
-    content?: unknown;
-    meta?: unknown;
-    action?: unknown;
-} & {
-    type: "default" | "error" | "info" | "success" | "warning";
-    closable: boolean;
-    internalKey: string;
-    onInternalAfterLeave: (key: string) => void;
-} & {
-    meta?: string | (() => import("vue").VNodeChild) | undefined;
-    content?: string | (() => import("vue").VNodeChild) | undefined;
-    description?: string | (() => import("vue").VNodeChild) | undefined;
-    duration?: number | undefined;
-    onAfterEnter?: (() => void) | undefined;
-    onLeave?: (() => void) | undefined;
-    onAfterLeave?: (() => void) | undefined;
-    title?: string | (() => import("vue").VNodeChild) | undefined;
-    action?: string | (() => import("vue").VNodeChild) | undefined;
-    avatar?: (() => import("vue").VNodeChild) | undefined;
-    onClose?: (() => any) | undefined;
-    onHide?: (() => void) | undefined;
-    onAfterHide?: (() => void) | undefined;
-    onAfterShow?: (() => 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<{
+    internalKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    onInternalAfterLeave: {
+        type: PropType<(key: string) => void>;
+        required: true;
+    };
+    duration: NumberConstructor;
+    onClose: PropType<() => any>;
+    onLeave: PropType<() => void>;
+    onAfterEnter: PropType<() => void>;
+    onAfterLeave: PropType<() => void>;
+    onHide: PropType<() => void>;
+    onAfterShow: PropType<() => void>;
+    onAfterHide: PropType<() => void>;
+    closable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    type: {
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly default: "default";
+    };
+    avatar: PropType<() => import("vue").VNodeChild>;
+    title: PropType<string | (() => import("vue").VNodeChild)>;
+    description: PropType<string | (() => import("vue").VNodeChild)>;
+    content: PropType<string | (() => import("vue").VNodeChild)>;
+    meta: PropType<string | (() => import("vue").VNodeChild)>;
+    action: PropType<string | (() => import("vue").VNodeChild)>;
+}>>, {
     type: "default" | "error" | "info" | "success" | "warning";
     closable: boolean;
 }>;

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

@@ -1,4 +1,4 @@
-import { PropType, ExtractPropTypes, InjectionKey, Ref } from 'vue';
+import { PropType, ExtractPropTypes, Ref } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import { ExtractPublicPropTypes, Mutable } from '../../_utils';
 import { NotificationTheme } from '../styles';
@@ -8,7 +8,7 @@ export interface NotificationProviderInjection {
     mergedClsPrefixRef: Ref<string>;
     mergedThemeRef: Ref<MergedTheme<NotificationTheme>>;
 }
-export declare const notificationProviderInjectionKey: InjectionKey<NotificationProviderInjection>;
+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 {
@@ -22,7 +22,7 @@ export interface NotificationApiInjection {
     destroyAll: () => void;
 }
 export declare type NotificationProviderInst = NotificationApiInjection;
-export declare const notificationApiInjectionKey: InjectionKey<NotificationApiInjection>;
+export declare const notificationApiInjectionKey: import("vue").InjectionKey<NotificationApiInjection>;
 export declare type NotificationReactive = {
     readonly key: string;
     readonly destroy: () => void;
@@ -239,22 +239,22 @@ declare const _default: import("vue").DefineComponent<{
         readonly destroy: () => void;
         readonly hide: () => void;
         readonly deactivate: () => void;
+        type?: "default" | "error" | "info" | "success" | "warning" | undefined;
+        closable?: boolean | undefined;
+        meta?: string | (() => import("vue").VNodeChild) | undefined;
+        content?: string | (() => import("vue").VNodeChild) | undefined;
+        description?: string | (() => import("vue").VNodeChild) | undefined;
         duration?: number | undefined;
-        onClose?: (() => any) | undefined;
-        onLeave?: (() => void) | undefined;
         onAfterEnter?: (() => void) | undefined;
+        onLeave?: (() => void) | undefined;
         onAfterLeave?: (() => void) | undefined;
-        onHide?: (() => void) | undefined;
-        onAfterShow?: (() => void) | undefined;
-        onAfterHide?: (() => void) | undefined;
-        closable?: boolean | undefined;
-        type?: "default" | "error" | "info" | "success" | "warning" | undefined;
-        avatar?: (() => import("vue").VNodeChild) | undefined;
         title?: string | (() => import("vue").VNodeChild) | undefined;
-        description?: string | (() => import("vue").VNodeChild) | undefined;
-        content?: string | (() => import("vue").VNodeChild) | undefined;
-        meta?: string | (() => import("vue").VNodeChild) | undefined;
         action?: string | (() => import("vue").VNodeChild) | undefined;
+        avatar?: (() => import("vue").VNodeChild) | undefined;
+        onClose?: (() => any) | undefined;
+        onHide?: (() => void) | undefined;
+        onAfterHide?: (() => void) | undefined;
+        onAfterShow?: (() => void) | undefined;
     }[]>;
     notificationRefs: Record<string, NotificationRef>;
     handleAfterLeave: (key: string) => void;
@@ -266,21 +266,18 @@ declare const _default: import("vue").DefineComponent<{
     error: (options: Omit<NotificationOptions, 'type'>) => NotificationReactive;
     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<{
-    to?: unknown;
-    scrollable?: unknown;
-    max?: unknown;
-    placement?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    placement: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    scrollable: boolean;
-} & {
-    max?: number | undefined;
-    to?: string | HTMLElement | undefined;
-    theme?: import("../../_mixins").Theme<"Notification", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    to: PropType<string | HTMLElement>;
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    max: NumberConstructor;
+    placement: {
+        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        default: string;
+    };
+    theme: PropType<import("../../_mixins").Theme<"Notification", {
         borderRadius: string;
         lineHeight: string;
         fontSize: string;
@@ -308,8 +305,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Notification", {
+    }>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Notification", {
         borderRadius: string;
         lineHeight: string;
         fontSize: string;
@@ -337,8 +334,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Notification", {
+    }>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Notification", {
         borderRadius: string;
         lineHeight: string;
         fontSize: string;
@@ -366,8 +363,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-}>, {
+    }>>>;
+}>>, {
     placement: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     scrollable: boolean;
 }>;

package/lib/notification/src/NotificationProvider.js

@@ -13,8 +13,8 @@ const styles_1 = require("../styles");
 const NotificationContainer_1 = __importDefault(require("./NotificationContainer"));
 const NotificationEnvironment_1 = __importDefault(require("./NotificationEnvironment"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.notificationProviderInjectionKey = Symbol('notificationProvider');
-exports.notificationApiInjectionKey = Symbol('notificationApi');
+exports.notificationProviderInjectionKey = (0, _utils_1.createInjectionKey)('n-notification-provider');
+exports.notificationApiInjectionKey = (0, _utils_1.createInjectionKey)('n-notification-api');
 const notificationProviderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: [String, Object], scrollable: {
         type: Boolean,
         default: true
@@ -101,10 +101,10 @@ exports.default = (0, vue_1.defineComponent)({
         }, api);
     },
     render() {
-        var _a;
-        return ((0, vue_1.h)(vue_1.Fragment, null,
-            (0, vue_1.renderSlot)(this.$slots, 'default'),
-            this.notificationList.length ? ((0, vue_1.h)(vue_1.Teleport, { to: (_a = this.to) !== null && _a !== void 0 ? _a : 'body' },
+        var _a, _b, _c;
+        return ((0, vue_1.h)(vue_1.Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
+            _b.call(_a),
+            this.notificationList.length ? ((0, vue_1.h)(vue_1.Teleport, { to: (_c = this.to) !== null && _c !== void 0 ? _c : 'body' },
                 (0, vue_1.h)(NotificationContainer_1.default, { scrollable: this.scrollable, placement: this.placement }, {
                     default: () => {
                         return this.notificationList.map((notification) => {