naive-ui 2.22.0 → 2.24.0

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

@@ -1,14 +1,6 @@
 import { VNodeChild, InjectionKey, ExtractPropTypes, Ref, PropType, CSSProperties } from 'vue';
-import { ExtractPublicPropTypes } from '../../_utils';
-export interface MessageOptions {
-    duration?: number;
-    closable?: boolean;
-    keepAliveOnHover?: boolean;
-    icon?: () => VNodeChild;
-    onClose?: () => void;
-    onLeave?: () => void;
-    onAfterLeave?: () => void;
-}
+import type { ExtractPublicPropTypes } from '../../_utils';
+import type { MessageOptions, MessageType } from './types';
 declare type ContentType = string | (() => VNodeChild);
 export interface MessageApiInjection {
     info: (content: ContentType, options?: MessageOptions) => MessageReactive;
@@ -24,6 +16,7 @@ export interface MessageReactive {
     duration?: number;
     closable?: boolean;
     keepAliveOnHover?: boolean;
+    type: MessageType;
     icon?: () => VNodeChild;
     onClose?: () => void;
     destroy: () => void;
@@ -368,6 +361,7 @@ declare const _default: import("vue").DefineComponent<{
             duration?: number | undefined;
             closable?: boolean | undefined;
             keepAliveOnHover?: boolean | undefined;
+            type: MessageType;
             icon?: (() => VNodeChild) | undefined;
             onClose?: (() => void) | undefined;
             destroy: () => void;
@@ -379,6 +373,7 @@ declare const _default: import("vue").DefineComponent<{
         duration?: number | undefined;
         closable?: boolean | undefined;
         keepAliveOnHover?: boolean | undefined;
+        type: MessageType;
         icon?: (() => VNodeChild) | undefined;
         onClose?: (() => void) | undefined;
         destroy: () => void;

package/lib/message/src/MessageProvider.js

@@ -48,7 +48,7 @@ exports.default = (0, vue_1.defineComponent)({
             mergedClsPrefixRef
         });
         (0, vue_1.provide)(exports.messageApiInjectionKey, api);
-        function create(content, options = {}) {
+        function create(content, options) {
             const key = (0, seemly_1.createId)();
             const messageReactive = (0, vue_1.reactive)(Object.assign(Object.assign({}, options), { content,
                 key, destroy: () => {

package/lib/message/src/message-props.d.ts

@@ -1,5 +1,6 @@
-import { PropType, VNodeChild } from 'vue';
-export declare type MessageType = 'info' | 'success' | 'warning' | 'error' | 'loading';
+import { ExtractPropTypes, PropType, VNodeChild } from 'vue';
+import { ExtractPublicPropTypes } from '../../_utils';
+import { MessageType } from './types';
 export declare const messageProps: {
     readonly icon: PropType<() => VNodeChild>;
     readonly type: {
@@ -13,3 +14,5 @@ export declare const messageProps: {
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
 };
+export declare type MessageProps = ExtractPublicPropTypes<typeof messageProps>;
+export declare type MessageSetupProps = ExtractPropTypes<typeof messageProps>;

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

@@ -15,37 +15,37 @@ const cssr_1 = require("../../../_utils/cssr");
 const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr"));
 
 const fade_in_height_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-height-expand.cssr")); // vars:
-// --margin
-// --bezier
-// --padding
-// --max-width
-// --font-size
-// --icon-margin
-// --icon-size
-// --close-size
-// --close-margin
-// --text-color
-// --color
-// --box-shadow
-// --icon-color-info
-// --icon-color-success
-// --icon-color-warning
-// --icon-color-error
-// --icon-color-loading
-// --close-color
-// --close-color-pressed
-// --close-color-hover
-// --border-radius
+// --n-margin
+// --n-bezier
+// --n-padding
+// --n-max-width
+// --n-font-size
+// --n-icon-margin
+// --n-icon-size
+// --n-close-size
+// --n-close-margin
+// --n-text-color
+// --n-color
+// --n-box-shadow
+// --n-icon-color-info
+// --n-icon-color-success
+// --n-icon-color-warning
+// --n-icon-color-error
+// --n-icon-color-loading
+// --n-close-color
+// --n-close-color-pressed
+// --n-close-color-hover
+// --n-border-radius
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('message-wrapper', `
- margin: var(--margin);
+ margin: var(--n-margin);
  z-index: 0;
  transform-origin: top center;
  display: flex;
  `, [(0, fade_in_height_expand_cssr_1.default)({
   overflow: 'visible',
-  originalTransition: 'transform .3s var(--bezier)',
+  originalTransition: 'transform .3s var(--n-bezier)',
   enterToProps: {
     transform: 'scale(1)'
   },
@@ -57,34 +57,34 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('message-wrapper', `
  display: flex;
  align-items: center;
  transition:
- color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier),
- opacity .3s var(--bezier),
- transform .3s var(--bezier),
- margin-bottom .3s var(--bezier);
- padding: var(--padding);
- border-radius: var(--border-radius);
+ color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ transform .3s var(--n-bezier),
+ margin-bottom .3s var(--n-bezier);
+ padding: var(--n-padding);
+ border-radius: var(--n-border-radius);
  flex-wrap: nowrap;
  overflow: hidden;
- max-width: var(--max-width);
- color: var(--text-color);
- background-color: var(--color);
- box-shadow: var(--box-shadow);
+ max-width: var(--n-max-width);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
+ box-shadow: var(--n-box-shadow);
  `, [(0, cssr_1.cE)('content', `
  display: inline-block;
- line-height: var(--line-height);
- font-size: var(--font-size);
+ line-height: var(--n-line-height);
+ font-size: var(--n-font-size);
  `), (0, cssr_1.cE)('icon', `
  position: relative;
- margin: var(--icon-margin);
- height: var(--icon-size);
- width: var(--icon-size);
- font-size: var(--icon-size);
+ margin: var(--n-icon-margin);
+ height: var(--n-icon-size);
+ width: var(--n-icon-size);
+ font-size: var(--n-icon-size);
  flex-shrink: 0;
  `, [['info', 'success', 'warning', 'error', 'loading'].map(type => (0, cssr_1.cM)(`${type}-type`, [(0, cssr_1.c)('> *', `
- color: var(--icon-color-${type});
- transition: color .3s var(--bezier);
+ color: var(--n-icon-color-${type});
+ transition: color .3s var(--n-bezier);
  `)])), (0, cssr_1.c)('> *', `
  position: absolute;
  left: 0;
@@ -92,14 +92,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('message-wrapper', `
  right: 0;
  bottom: 0;
  `, [(0, icon_switch_cssr_1.default)()])]), (0, cssr_1.cE)('close', `
- font-size: var(--close-size);
- margin: var(--close-margin);
- transition: color .3s var(--bezier);
+ font-size: var(--n-close-size);
+ margin: var(--n-close-margin);
+ transition: color .3s var(--n-bezier);
  flex-shrink: 0;
  `, [(0, cssr_1.c)('&:hover', `
- color: var(--close-color-hover);
+ color: var(--n-close-color-hover);
  `), (0, cssr_1.c)('&:active', `
- color: var(--close-color-pressed);
+ color: var(--n-close-color-pressed);
  `)])]), (0, cssr_1.cB)('message-container', `
  z-index: 6000;
  position: fixed;

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

@@ -0,0 +1,15 @@
+import { VNodeChild } from 'vue';
+import { 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;
+export interface MessageOptions {
+    render?: MessageRenderMessage;
+    duration?: number;
+    closable?: boolean;
+    keepAliveOnHover?: boolean;
+    icon?: () => VNodeChild;
+    onClose?: () => void;
+    onLeave?: () => void;
+    onAfterLeave?: () => void;
+}

package/lib/message/src/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -24,6 +24,10 @@ declare const _default: import("vue").DefineComponent<{
         type: FunctionConstructor;
         required: true;
     };
+    onKeyup: {
+        type: PropType<(e: KeyboardEvent) => void>;
+        required: true;
+    };
     onAfterEnter: PropType<() => void>;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
@@ -59,6 +63,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "medium";
     };
     hoverable: BooleanConstructor;
+    role: StringConstructor;
     show: {
         type: BooleanConstructor;
         required: true;
@@ -695,6 +700,7 @@ declare const _default: import("vue").DefineComponent<{
     onPositiveClick?: unknown;
     onNegativeClick?: unknown;
     onClose?: unknown;
+    onKeyup?: unknown;
     onAfterEnter?: unknown;
     icon?: unknown;
     type?: unknown;
@@ -715,6 +721,7 @@ declare const _default: import("vue").DefineComponent<{
     segmented?: unknown;
     size?: unknown;
     hoverable?: unknown;
+    role?: unknown;
     show?: unknown;
     preset?: unknown;
     displayDirective?: unknown;
@@ -724,13 +731,14 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean;
     onBeforeLeave: Function;
     onAfterLeave: Function;
+    onKeyup: (e: KeyboardEvent) => void;
     loading: boolean;
+    showIcon: boolean;
     bordered: boolean;
     onClose: Function;
     closable: boolean;
     displayDirective: "show" | "if";
     onClickoutside: Function;
-    showIcon: boolean;
     hoverable: boolean;
     embedded: boolean;
     segmented: boolean | import("../../card/src/Card").Segmented;
@@ -741,6 +749,7 @@ declare const _default: import("vue").DefineComponent<{
     icon?: (() => import("vue").VNodeChild) | undefined;
     onAfterEnter?: (() => void) | undefined;
     title?: string | (() => import("vue").VNodeChild) | undefined;
+    role?: string | undefined;
     action?: (() => import("vue").VNodeChild) | undefined;
     positiveText?: string | undefined;
     negativeText?: string | undefined;
@@ -753,9 +762,9 @@ declare const _default: import("vue").DefineComponent<{
     type: "default" | "error" | "info" | "success" | "warning";
     size: "small" | "medium" | "large" | "huge";
     loading: boolean;
+    showIcon: boolean;
     bordered: boolean;
     closable: boolean;
-    showIcon: boolean;
     hoverable: boolean;
     embedded: boolean;
     segmented: boolean | import("../../card/src/Card").Segmented;

package/lib/modal/src/BodyWrapper.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const vdirs_1 = require("vdirs");
+const vueuc_1 = require("vueuc");
 const Dialog_1 = require("../../dialog/src/Dialog");
 const Card_1 = require("../../card/src/Card");
 const _internal_1 = require("../../_internal");
@@ -41,6 +42,9 @@ exports.default = (0, vue_1.defineComponent)({
         }, onClose: {
             type: Function,
             required: true
+        }, onKeyup: {
+            type: Function,
+            required: true
         }, onAfterEnter: Function }),
     setup(props) {
         const bodyRef = (0, vue_1.ref)(null);
@@ -154,24 +158,26 @@ exports.default = (0, vue_1.defineComponent)({
             }, $attrs, childNode.props || {});
         }
         return this.displayDirective === 'show' || this.displayed || this.show
-            ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal-body-wrapper` },
+            ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", class: `${mergedClsPrefix}-modal-body-wrapper`, onKeyup: this.onKeyup },
                 (0, vue_1.h)(_internal_1.NScrollbar, { ref: "scrollbarRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-scroll-content` }, {
-                    default: () => {
-                        var _a;
-                        return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: (_a = this.appear) !== null && _a !== void 0 ? _a : this.isMounted, onEnter: handleEnter, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, onBeforeLeave: handleBeforeLeave }, {
-                            default: () => (0, vue_1.withDirectives)((this.preset === 'confirm' ||
-                                this.preset === 'dialog' ? ((0, vue_1.h)(dialog_1.NDialog, Object.assign({}, this.$attrs, { class: [
-                                    `${mergedClsPrefix}-modal`,
-                                    this.$attrs.class
-                                ], ref: "bodyRef", theme: this.mergedTheme.peers.Dialog, themeOverrides: this.mergedTheme.peerOverrides.Dialog }, (0, _utils_1.keep)(this.$props, Dialog_1.dialogPropKeys)), $slots)) : this.preset === 'card' ? ((0, vue_1.h)(card_1.NCard, Object.assign({}, this.$attrs, { ref: "bodyRef", class: [
-                                    `${mergedClsPrefix}-modal`,
-                                    this.$attrs.class
-                                ], theme: this.mergedTheme.peers.Card, themeOverrides: this.mergedTheme.peerOverrides.Card }, (0, _utils_1.keep)(this.$props, Card_1.cardBasePropKeys)), $slots)) : (childNode)), [
-                                [vue_1.vShow, this.show],
-                                [vdirs_1.clickoutside, handleClickOutside]
-                            ])
-                        }));
-                    }
+                    default: () => ((0, vue_1.h)(vueuc_1.VFocusTrap, { active: this.show, focusFirstDescendant: true }, {
+                        default: () => {
+                            var _a;
+                            return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: (_a = this.appear) !== null && _a !== void 0 ? _a : this.isMounted, onEnter: handleEnter, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, onBeforeLeave: handleBeforeLeave }, {
+                                default: () => (0, vue_1.withDirectives)((this.preset === 'confirm' ||
+                                    this.preset === 'dialog' ? ((0, vue_1.h)(dialog_1.NDialog, Object.assign({}, this.$attrs, { class: [
+                                        `${mergedClsPrefix}-modal`,
+                                        this.$attrs.class
+                                    ], ref: "bodyRef", theme: this.mergedTheme.peers.Dialog, themeOverrides: this.mergedTheme.peerOverrides.Dialog }, (0, _utils_1.keep)(this.$props, Dialog_1.dialogPropKeys), { "aria-modal": "true" }), $slots)) : this.preset === 'card' ? ((0, vue_1.h)(card_1.NCard, Object.assign({}, this.$attrs, { ref: "bodyRef", class: [
+                                        `${mergedClsPrefix}-modal`,
+                                        this.$attrs.class
+                                    ], theme: this.mergedTheme.peers.Card, themeOverrides: this.mergedTheme.peerOverrides.Card }, (0, _utils_1.keep)(this.$props, Card_1.cardBasePropKeys), { "aria-modal": "true", role: "dialog" }), $slots)) : (childNode)), [
+                                    [vue_1.vShow, this.show],
+                                    [vdirs_1.clickoutside, handleClickOutside]
+                                ])
+                            }));
+                        }
+                    }))
                 })), [
                 [
                     vue_1.vShow,

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

@@ -53,6 +53,7 @@ declare const modalProps: {
         readonly default: "medium";
     };
     hoverable: BooleanConstructor;
+    role: StringConstructor;
     show: BooleanConstructor;
     unstableShowMask: {
         type: BooleanConstructor;
@@ -72,6 +73,7 @@ declare const modalProps: {
         type: PropType<"center" | "mouse">;
         default: string;
     };
+    zIndex: NumberConstructor;
     theme: PropType<import("../../_mixins").Theme<"Modal", {
         color: string;
         textColor: string;
@@ -949,6 +951,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "medium";
     };
     hoverable: BooleanConstructor;
+    role: StringConstructor;
     show: BooleanConstructor;
     unstableShowMask: {
         type: BooleanConstructor;
@@ -968,6 +971,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"center" | "mouse">;
         default: string;
     };
+    zIndex: NumberConstructor;
     theme: PropType<import("../../_mixins").Theme<"Modal", {
         color: string;
         textColor: string;
@@ -1803,12 +1807,14 @@ declare const _default: import("vue").DefineComponent<{
         show: boolean;
         icon: (() => import("vue").VNodeChild) | undefined;
         transformOrigin: "center" | "mouse";
+        zIndex: number | undefined;
         appear: boolean | undefined;
         onAfterEnter: (() => void) | undefined;
         onBeforeLeave: (() => void) | undefined;
         onAfterLeave: (() => void) | undefined;
         dialog: boolean;
         title: string | (() => import("vue").VNodeChild) | undefined;
+        role: string | undefined;
         action: (() => import("vue").VNodeChild) | undefined;
         to: string | HTMLElement | undefined;
         theme: import("../../_mixins").Theme<"Modal", {
@@ -2636,6 +2642,7 @@ declare const _default: import("vue").DefineComponent<{
         positiveText: string | undefined;
         negativeText: string | undefined;
         loading: boolean;
+        showIcon: boolean;
         bordered: boolean;
         contentStyle: string | CSSProperties | undefined;
         onClose: (() => any) | undefined;
@@ -2644,7 +2651,6 @@ declare const _default: import("vue").DefineComponent<{
         "onUpdate:show": MaybeArray<(value: boolean) => void> | undefined;
         onUpdateShow: MaybeArray<(value: boolean) => void> | undefined;
         onHide: ((value: false) => void) | undefined;
-        showIcon: boolean;
         iconPlacement: import("../../dialog/src/interface").IconPlacement | undefined;
         onAfterHide: (() => void) | undefined;
         hoverable: boolean;
@@ -2660,7 +2666,8 @@ declare const _default: import("vue").DefineComponent<{
         onBeforeHide: (() => void) | undefined;
         unstableShowMask: boolean;
         maskClosable: boolean;
-    }>, "type" | "content" | "size" | "icon" | "title" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "contentStyle" | "onClose" | "closable" | "showIcon" | "iconPlacement" | "hoverable" | "headerStyle" | "footerStyle" | "embedded" | "segmented" | "onPositiveClick" | "onNegativeClick">>;
+    }>, "type" | "content" | "size" | "icon" | "title" | "role" | "action" | "positiveText" | "negativeText" | "loading" | "showIcon" | "bordered" | "contentStyle" | "onClose" | "closable" | "iconPlacement" | "hoverable" | "headerStyle" | "footerStyle" | "embedded" | "segmented" | "onPositiveClick" | "onNegativeClick">>;
+    handleKeyup: (e: KeyboardEvent) => void;
     handleAfterLeave: () => void;
     handleClickoutside: (e: MouseEvent) => void;
     handleBeforeLeave: () => void;
@@ -2669,10 +2676,10 @@ declare const _default: import("vue").DefineComponent<{
     handlePositiveClick: () => void;
     handleCloseClick: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier-ease-out': string;
-        '--box-shadow': string;
-        '--color': string;
-        '--text-color': string;
+        '--n-bezier-ease-out': string;
+        '--n-box-shadow': string;
+        '--n-color': string;
+        '--n-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     'onUpdate:show'?: unknown;
@@ -2709,6 +2716,7 @@ declare const _default: import("vue").DefineComponent<{
     segmented?: unknown;
     size?: unknown;
     hoverable?: unknown;
+    role?: unknown;
     show?: unknown;
     unstableShowMask?: unknown;
     maskClosable?: unknown;
@@ -2716,6 +2724,7 @@ declare const _default: import("vue").DefineComponent<{
     to?: unknown;
     displayDirective?: unknown;
     transformOrigin?: unknown;
+    zIndex?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
@@ -2726,10 +2735,10 @@ declare const _default: import("vue").DefineComponent<{
     transformOrigin: "center" | "mouse";
     dialog: boolean;
     loading: boolean;
+    showIcon: boolean;
     bordered: boolean;
     closable: boolean;
     displayDirective: "show" | "if";
-    showIcon: boolean;
     hoverable: boolean;
     embedded: boolean;
     segmented: boolean | import("../../card/src/Card").Segmented;
@@ -2738,11 +2747,13 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     content?: string | (() => import("vue").VNodeChild) | undefined;
     icon?: (() => import("vue").VNodeChild) | undefined;
+    zIndex?: number | undefined;
     appear?: boolean | undefined;
     onAfterEnter?: (() => void) | undefined;
     onBeforeLeave?: (() => void) | undefined;
     onAfterLeave?: (() => void) | undefined;
     title?: string | (() => import("vue").VNodeChild) | undefined;
+    role?: string | undefined;
     action?: (() => import("vue").VNodeChild) | undefined;
     to?: string | HTMLElement | undefined;
     theme?: import("../../_mixins").Theme<"Modal", {
@@ -3592,10 +3603,10 @@ declare const _default: import("vue").DefineComponent<{
     appear: boolean | undefined;
     dialog: boolean;
     loading: boolean;
+    showIcon: boolean;
     bordered: boolean;
     closable: boolean;
     displayDirective: "show" | "if";
-    showIcon: boolean;
     hoverable: boolean;
     embedded: boolean;
     segmented: boolean | import("../../card/src/Card").Segmented;

package/lib/modal/src/Modal.js

@@ -27,7 +27,7 @@ const modalProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _
     }, transformOrigin: {
         type: String,
         default: 'mouse'
-    } }), presetProps_1.presetProps), { 
+    }, zIndex: Number }), 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, 
     // private
@@ -142,6 +142,11 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
+        function handleKeyup(e) {
+            if (e.code === 'Escape') {
+                doUpdateShow(false);
+            }
+        }
         (0, vue_1.provide)(interface_1.modalInjectionKey, {
             getMousePosition: () => {
                 if (NDialogProvider) {
@@ -170,6 +175,7 @@ exports.default = (0, vue_1.defineComponent)({
                 const pickedProps = (0, _utils_1.keep)(props, presetProps_1.presetPropsKeys);
                 return pickedProps;
             }),
+            handleKeyup,
             handleAfterLeave,
             handleClickoutside,
             handleBeforeLeave,
@@ -180,10 +186,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 +200,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 }, this.presetProps, { onClose: this.handleCloseClick, onNegativeClick: this.handleNegativeClick, onPositiveClick: this.handlePositiveClick, onBeforeLeave: this.handleBeforeLeave, onAfterEnter: this.onAfterEnter, onAfterLeave: this.handleAfterLeave, onClickoutside: this.handleClickoutside, onKeyup: this.handleKeyup }), this.$slots)), [
                         [
                             vdirs_1.zindexable,
                             {
+                                zIndex: this.zIndex,
                                 enabled: this.show
                             }
                         ]

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'