naive-ui 2.23.1 → 2.23.2

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

@@ -13,37 +13,37 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_height_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-height-expand.cssr")); // vars:
-// --color
-// --group-text-color
-// --bezier
-// --font-size
-// --border-color-horizontal
-// --border-radius
-// --item-color-active
-// --item-color-active-collapsed
-// --arrow-color
-// --arrow-color-hover
-// --arrow-color-active
-// --arrow-color-child-active
-// --item-text-color
-// --item-text-color-hover
-// --item-text-color-active
-// --item-text-color-child-active
-// --item-icon-color
-// --item-icon-color-hover
-// --item-icon-color-active
-// --item-icon-color-collapsed
-// --item-icon-color-child-active
-// --item-height
+// --n-color
+// --n-group-text-color
+// --n-bezier
+// --n-font-size
+// --n-border-color-horizontal
+// --n-border-radius
+// --n-item-color-active
+// --n-item-color-active-collapsed
+// --n-arrow-color
+// --n-arrow-color-hover
+// --n-arrow-color-active
+// --n-arrow-color-child-active
+// --n-item-text-color
+// --n-item-text-color-hover
+// --n-item-text-color-active
+// --n-item-text-color-child-active
+// --n-item-icon-color
+// --n-item-icon-color-hover
+// --n-item-icon-color-active
+// --n-item-icon-color-collapsed
+// --n-item-icon-color-child-active
+// --n-item-height
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
- background-color: var(--color);
- color: var(--item-text-color);
+ background-color: var(--n-color);
+ color: var(--n-item-text-color);
  overflow: hidden;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  box-sizing: border-box;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  padding-bottom: 6px;
  `, [(0, cssr_1.cM)('horizontal', {
   display: 'inline-flex',
@@ -55,25 +55,25 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
 }, [(0, cssr_1.c)('&::before', {
   backgroundColor: '#0000 !important'
 }), (0, cssr_1.cM)('selected', [(0, cssr_1.cB)('menu-item-content', {
-  borderBottom: '2px solid var(--border-color-horizontal)'
+  borderBottom: '2px solid var(--n-border-color-horizontal)'
 })])]), (0, cssr_1.cB)('menu-item-content', {
   padding: '0 20px',
   borderBottom: '2px solid #0000'
 }, [(0, cssr_1.cM)('child-active', {
-  borderBottom: '2px solid var(--border-color-horizontal)'
+  borderBottom: '2px solid var(--n-border-color-horizontal)'
 }), (0, cssr_1.cNotM)('disabled', [hoverStyle({
-  borderBottom: '2px solid var(--border-color-horizontal)'
+  borderBottom: '2px solid var(--n-border-color-horizontal)'
 }, null)])])]), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cB)('menu-item', [(0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', {
-  backgroundColor: 'var(--item-color-active-collapsed) !important'
+  backgroundColor: 'var(--n-item-color-active-collapsed) !important'
 })])]), (0, cssr_1.cB)('menu-item-content', [(0, cssr_1.cB)('menu-item-content-header', {
   opacity: 0
 }), (0, cssr_1.cE)('arrow', {
   opacity: 0
 }), (0, cssr_1.cE)('icon', {
-  color: 'var(--item-icon-color-collapsed)'
+  color: 'var(--n-item-icon-color-collapsed)'
 })])]), (0, cssr_1.cB)('menu-item', `
- transition: background-color .3s var(--bezier);
- height: var(--item-height);
+ transition: background-color .3s var(--n-bezier);
+ height: var(--n-item-height);
  margin-top: 6px;
  position: relative;
  `, [(0, cssr_1.c)('&::before', `
@@ -86,20 +86,20 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  top: 0;
  bottom: 0;
  pointer-events: none;
- border-radius: var(--border-radius);
- transition: background-color .3s var(--bezier);
+ border-radius: var(--n-border-radius);
+ transition: background-color .3s var(--n-bezier);
  `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:active::before', {
-  backgroundColor: 'var(--item-color-active)'
+  backgroundColor: 'var(--n-item-color-active)'
 })]), (0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', {
-  backgroundColor: 'var(--item-color-active)'
+  backgroundColor: 'var(--n-item-color-active)'
 }), (0, cssr_1.cB)('menu-item-content', [(0, cssr_1.cE)('arrow', {
-  color: 'var(--arrow-color-active)'
+  color: 'var(--n-arrow-color-active)'
 }), (0, cssr_1.cE)('icon', {
-  color: 'var(--item-icon-color-active)'
+  color: 'var(--n-item-icon-color-active)'
 }), (0, cssr_1.cB)('menu-item-content-header', {
-  color: 'var(--item-text-color-active)'
+  color: 'var(--n-item-text-color-active)'
 }, [(0, cssr_1.cE)('extra', {
-  color: 'var(--item-text-color-active)'
+  color: 'var(--n-item-text-color-active)'
 })])])])]), (0, cssr_1.cB)('menu-item-content', `
  box-sizing: border-box;
  line-height: 1.75;
@@ -113,37 +113,37 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  z-index: auto;
  padding-right: 18px;
  transition:
- background-color .3s var(--bezier),
- padding-left .3s var(--bezier),
- border-color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ padding-left .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('disabled', {
   opacity: '.45',
   cursor: 'not-allowed'
 }), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cE)('arrow', {
   transform: 'rotate(0)'
 })]), (0, cssr_1.cM)('child-active', [(0, cssr_1.cB)('menu-item-content-header', {
-  color: 'var(--item-text-color-child-active)'
+  color: 'var(--n-item-text-color-child-active)'
 }, [(0, cssr_1.cE)('extra', {
-  color: 'var(--item-text-color-child-active)'
+  color: 'var(--n-item-text-color-child-active)'
 })]), (0, cssr_1.cE)('arrow', {
-  color: 'var(--arrow-color-child-active)'
+  color: 'var(--n-arrow-color-child-active)'
 }), (0, cssr_1.cE)('icon', {
-  color: 'var(--item-icon-color-child-active)'
+  color: 'var(--n-item-icon-color-child-active)'
 })]), (0, cssr_1.cNotM)('disabled', [hoverStyle(null, [(0, cssr_1.cE)('arrow', {
-  color: 'var(--arrow-color-hover)'
+  color: 'var(--n-arrow-color-hover)'
 }), (0, cssr_1.cE)('icon', {
-  color: 'var(--item-icon-color-hover)'
+  color: 'var(--n-item-icon-color-hover)'
 }), (0, cssr_1.cB)('menu-item-content-header', {
-  color: 'var(--item-text-color-hover)'
+  color: 'var(--n-item-text-color-hover)'
 }, [(0, cssr_1.cE)('extra', {
-  color: 'var(--item-text-color-hover)'
+  color: 'var(--n-item-text-color-hover)'
 })])])]), (0, cssr_1.cE)('icon', `
  grid-area: icon;
- color: var(--item-icon-color);
+ color: var(--n-item-icon-color);
  transition:
- color .3s var(--bezier),
- font-size .3s var(--bezier),
- margin-right .3s var(--bezier);
+ color .3s var(--n-bezier),
+ font-size .3s var(--n-bezier),
+ margin-right .3s var(--n-bezier);
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
@@ -151,23 +151,23 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  `), (0, cssr_1.cE)('arrow', `
  grid-area: arrow;
  font-size: 16px;
- color: var(--arrow-color);
+ color: var(--n-arrow-color);
  transform: rotate(180deg);
  opacity: 1;
  transition:
- color .3s var(--bezier),
- transform 0.2s var(--bezier),
- opacity 0.2s var(--bezier);
+ color .3s var(--n-bezier),
+ transform 0.2s var(--n-bezier),
+ opacity 0.2s var(--n-bezier);
  `), (0, cssr_1.cB)('menu-item-content-header', `
  grid-area: content;
  transition:
- color .3s var(--bezier),
- opacity .3s var(--bezier);
+ color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier);
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
- color: var(--item-text-color);
+ color: var(--n-item-text-color);
  `, [(0, cssr_1.c)('a', `
  text-decoration: none;
  color: inherit;
@@ -180,14 +180,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  bottom: 0;
  `)]), (0, cssr_1.cE)('extra', `
  font-size: .93em;
- color: var(--group-text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-group-text-color);
+ transition: color .3s var(--n-bezier);
  `)])]), (0, cssr_1.cB)('submenu', {
   cursor: 'pointer',
   position: 'relative',
   marginTop: '6px'
 }, [(0, cssr_1.cB)('menu-item-content', `
- height: var(--item-height);
+ height: var(--n-item-height);
  `), (0, cssr_1.cB)('submenu-children', {
   overflow: 'hidden',
   padding: 0
@@ -195,21 +195,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
   duration: '.2s'
 })])]), (0, cssr_1.cB)('menu-item-group', [(0, cssr_1.cB)('menu-item-group-title', `
  margin-top: 6px;
- color: var(--group-text-color);
+ color: var(--n-group-text-color);
  cursor: default;
  font-size: .93em;
  height: 36px;
  display: flex;
  align-items: center;
  transition:
- padding-left .3s var(--bezier),
- color .3s var(--bezier);
+ padding-left .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  `)])]), (0, cssr_1.cB)('menu-tooltip', [(0, cssr_1.c)('a', `
  color: inherit;
  text-decoration: none;
  `)]), (0, cssr_1.cB)('menu-divider', `
- transition: background-color .3s var(--bezier);
- background-color: var(--divider-color);
+ transition: background-color .3s var(--n-bezier);
+ background-color: var(--n-divider-color);
  height: 1px;
  margin: 6px 18px;
  `)]);

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

@@ -16,28 +16,28 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").Ref<string>;
     handleClose(): void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--margin': string;
-        '--padding': string;
-        '--max-width': string;
-        '--font-size': string;
-        '--icon-margin': string;
-        '--icon-size': string;
-        '--close-size': string;
-        '--close-margin': string;
-        '--text-color': string;
-        '--color': string;
-        '--box-shadow': string;
-        '--icon-color-info': string;
-        '--icon-color-success': string;
-        '--icon-color-warning': string;
-        '--icon-color-error': string;
-        '--icon-color-loading': string;
-        '--close-color': string;
-        '--close-color-pressed': string;
-        '--close-color-hover': string;
-        '--line-height': string;
-        '--border-radius': string;
+        '--n-bezier': string;
+        '--n-margin': string;
+        '--n-padding': string;
+        '--n-max-width': string;
+        '--n-font-size': string;
+        '--n-icon-margin': string;
+        '--n-icon-size': string;
+        '--n-close-size': string;
+        '--n-close-margin': string;
+        '--n-text-color': string;
+        '--n-color': string;
+        '--n-box-shadow': string;
+        '--n-icon-color-info': string;
+        '--n-icon-color-success': string;
+        '--n-icon-color-warning': string;
+        '--n-icon-color-error': string;
+        '--n-icon-color-loading': string;
+        '--n-close-color': string;
+        '--n-close-color-pressed': string;
+        '--n-close-color-hover': string;
+        '--n-line-height': string;
+        '--n-border-radius': string;
     }>;
     placement: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/lib/message/src/Message.js

@@ -36,28 +36,28 @@ exports.default = (0, vue_1.defineComponent)({
                 const { type } = props;
                 const { common: { cubicBezierEaseInOut }, self: { padding, margin, maxWidth, iconMargin, closeMargin, closeSize, iconSize, fontSize, lineHeight, borderRadius, iconColorInfo, iconColorSuccess, iconColorWarning, iconColorError, iconColorLoading, [(0, _utils_1.createKey)('textColor', type)]: textColor, [(0, _utils_1.createKey)('boxShadow', type)]: boxShadow, [(0, _utils_1.createKey)('color', type)]: color, [(0, _utils_1.createKey)('closeColor', type)]: closeColor, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--margin': margin,
-                    '--padding': padding,
-                    '--max-width': maxWidth,
-                    '--font-size': fontSize,
-                    '--icon-margin': iconMargin,
-                    '--icon-size': iconSize,
-                    '--close-size': closeSize,
-                    '--close-margin': closeMargin,
-                    '--text-color': textColor,
-                    '--color': color,
-                    '--box-shadow': boxShadow,
-                    '--icon-color-info': iconColorInfo,
-                    '--icon-color-success': iconColorSuccess,
-                    '--icon-color-warning': iconColorWarning,
-                    '--icon-color-error': iconColorError,
-                    '--icon-color-loading': iconColorLoading,
-                    '--close-color': closeColor,
-                    '--close-color-pressed': closeColorPressed,
-                    '--close-color-hover': closeColorHover,
-                    '--line-height': lineHeight,
-                    '--border-radius': borderRadius
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-margin': margin,
+                    '--n-padding': padding,
+                    '--n-max-width': maxWidth,
+                    '--n-font-size': fontSize,
+                    '--n-icon-margin': iconMargin,
+                    '--n-icon-size': iconSize,
+                    '--n-close-size': closeSize,
+                    '--n-close-margin': closeMargin,
+                    '--n-text-color': textColor,
+                    '--n-color': color,
+                    '--n-box-shadow': boxShadow,
+                    '--n-icon-color-info': iconColorInfo,
+                    '--n-icon-color-success': iconColorSuccess,
+                    '--n-icon-color-warning': iconColorWarning,
+                    '--n-icon-color-error': iconColorError,
+                    '--n-icon-color-loading': iconColorLoading,
+                    '--n-close-color': closeColor,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-line-height': lineHeight,
+                    '--n-border-radius': borderRadius
                 };
             }),
             placement: messageProviderProps.placement

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/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,