naive-ui 2.23.0 → 2.24.1

package/lib/dialog/src/Dialog.d.ts

@@ -29,7 +29,7 @@ declare const dialogProps: {
 };
 export declare type DialogProps = ExtractPublicPropTypes<typeof dialogProps>;
 export { dialogProps };
-export declare const dialogPropKeys: ("type" | "content" | "icon" | "title" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "onClose" | "closable" | "showIcon" | "iconPlacement" | "onPositiveClick" | "onNegativeClick")[];
+export declare const dialogPropKeys: ("type" | "content" | "icon" | "title" | "action" | "positiveText" | "negativeText" | "loading" | "showIcon" | "bordered" | "onClose" | "closable" | "iconPlacement" | "onPositiveClick" | "onNegativeClick")[];
 declare const _default: import("vue").DefineComponent<{
     icon: PropType<() => VNodeChild>;
     type: {
@@ -1107,27 +1107,27 @@ declare const _default: import("vue").DefineComponent<{
     handleNegativeClick: (e: MouseEvent) => void;
     handleCloseClick: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--icon-color': string;
-        '--bezier': string;
-        '--close-margin': string;
-        '--icon-margin': string;
-        '--icon-size': string;
-        '--close-size': string;
-        '--close-color': string;
-        '--close-color-hover': string;
-        '--close-color-pressed': string;
-        '--color': string;
-        '--text-color': string;
-        '--border-radius': string;
-        '--padding': string;
-        '--line-height': string;
-        '--border': string;
-        '--content-margin': string;
-        '--title-font-size': string;
-        '--title-font-weight': string;
-        '--title-text-color': string;
-        '--action-space': string;
+        '--n-font-size': string;
+        '--n-icon-color': string;
+        '--n-bezier': string;
+        '--n-close-margin': string;
+        '--n-icon-margin': string;
+        '--n-icon-size': string;
+        '--n-close-size': string;
+        '--n-close-color': string;
+        '--n-close-color-hover': string;
+        '--n-close-color-pressed': string;
+        '--n-color': string;
+        '--n-text-color': string;
+        '--n-border-radius': string;
+        '--n-padding': string;
+        '--n-line-height': string;
+        '--n-border': string;
+        '--n-content-margin': string;
+        '--n-title-font-size': string;
+        '--n-title-font-weight': string;
+        '--n-title-text-color': string;
+        '--n-action-space': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     icon?: unknown;
@@ -1151,9 +1151,9 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     type: "default" | "error" | "info" | "success" | "warning";
     loading: boolean;
+    showIcon: boolean;
     bordered: boolean;
     closable: boolean;
-    showIcon: boolean;
 } & {
     content?: string | (() => VNodeChild) | undefined;
     icon?: (() => VNodeChild) | undefined;
@@ -1867,8 +1867,8 @@ declare const _default: import("vue").DefineComponent<{
 }>, {
     type: "default" | "error" | "info" | "success" | "warning";
     loading: boolean;
+    showIcon: boolean;
     bordered: boolean;
     closable: boolean;
-    showIcon: boolean;
 }>;
 export default _default;

package/lib/dialog/src/Dialog.js

@@ -89,27 +89,27 @@ exports.default = (0, vue_1.defineComponent)({
                 const { type, iconPlacement } = props;
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, lineHeight, border, titleTextColor, textColor, color, closeColor, closeColorHover, closeColorPressed, borderRadius, titleFontWeight, titleFontSize, padding, iconSize, actionSpace, contentMargin, closeSize, [iconPlacement === 'top' ? 'iconMarginIconTop' : 'iconMargin']: iconMargin, [iconPlacement === 'top' ? 'closeMarginIconTop' : 'closeMargin']: closeMargin, [(0, _utils_1.createKey)('iconColor', type)]: iconColor } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--icon-color': iconColor,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--close-margin': closeMargin,
-                    '--icon-margin': iconMargin,
-                    '--icon-size': iconSize,
-                    '--close-size': closeSize,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--color': color,
-                    '--text-color': textColor,
-                    '--border-radius': borderRadius,
-                    '--padding': padding,
-                    '--line-height': lineHeight,
-                    '--border': border,
-                    '--content-margin': contentMargin,
-                    '--title-font-size': titleFontSize,
-                    '--title-font-weight': titleFontWeight,
-                    '--title-text-color': titleTextColor,
-                    '--action-space': actionSpace
+                    '--n-font-size': fontSize,
+                    '--n-icon-color': iconColor,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-close-margin': closeMargin,
+                    '--n-icon-margin': iconMargin,
+                    '--n-icon-size': iconSize,
+                    '--n-close-size': closeSize,
+                    '--n-close-color': closeColor,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-color': color,
+                    '--n-text-color': textColor,
+                    '--n-border-radius': borderRadius,
+                    '--n-padding': padding,
+                    '--n-line-height': lineHeight,
+                    '--n-border': border,
+                    '--n-content-margin': contentMargin,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-action-space': actionSpace
                 };
             })
         };
@@ -120,7 +120,7 @@ exports.default = (0, vue_1.defineComponent)({
                 `${mergedClsPrefix}-dialog`,
                 `${mergedClsPrefix}-dialog--icon-${mergedIconPlacement}`,
                 bordered && `${mergedClsPrefix}-dialog--bordered`
-            ], style: cssVars },
+            ], style: cssVars, role: "dialog" },
             closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__close`, onClick: this.handleCloseClick })) : null,
             showIcon && mergedIconPlacement === 'top' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog-icon-container` },
                 (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__icon` }, {
@@ -139,10 +139,10 @@ exports.default = (0, vue_1.defineComponent)({
             $slots.action || positiveText || negativeText || action ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog__action` }, (0, vue_1.renderSlot)($slots, 'action', undefined, action
                 ? () => [(0, _utils_1.render)(action)]
                 : () => [
-                    this.negativeText && ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, ghost: true, size: "small", onClick: handleNegativeClick, internalAutoFocus: !this.positiveText }, {
+                    this.negativeText && ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, ghost: true, size: "small", onClick: handleNegativeClick }, {
                         default: () => (0, _utils_1.render)(this.negativeText)
                     })),
-                    this.positiveText && ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, disabled: loading, loading: loading, size: "small", type: type === 'default' ? 'primary' : type, onClick: handlePositiveClick, internalAutoFocus: true }, {
+                    this.positiveText && ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, disabled: loading, loading: loading, size: "small", type: type === 'default' ? 'primary' : type, onClick: handlePositiveClick }, {
                         default: () => (0, _utils_1.render)(this.positiveText)
                     }))
                 ]))) : null));

package/lib/dialog/src/DialogEnvironment.d.ts

@@ -105,9 +105,9 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     type: "default" | "error" | "info" | "success" | "warning";
     loading: boolean;
+    showIcon: boolean;
     bordered: boolean;
     closable: boolean;
-    showIcon: boolean;
     maskClosable: boolean;
     internalKey: string;
     onInternalAfterLeave: (key: string) => void;
@@ -128,9 +128,9 @@ declare const _default: import("vue").DefineComponent<{
 }>, {
     type: "default" | "error" | "info" | "success" | "warning";
     loading: boolean;
+    showIcon: boolean;
     bordered: boolean;
     closable: boolean;
-    showIcon: boolean;
     maskClosable: boolean;
 }>;
 export default _default;

package/lib/dialog/src/DialogProvider.d.ts

@@ -49,10 +49,10 @@ declare const _default: import("vue").DefineComponent<{
         positiveText?: string | undefined;
         negativeText?: string | undefined;
         loading?: boolean | undefined;
+        showIcon?: boolean | undefined;
         bordered?: boolean | undefined;
         onClose?: (() => unknown) | undefined;
         closable?: boolean | undefined;
-        showIcon?: boolean | undefined;
         iconPlacement?: import("./interface").IconPlacement | undefined;
         onPositiveClick?: ((e: MouseEvent) => unknown) | undefined;
         onNegativeClick?: ((e: MouseEvent) => unknown) | undefined;

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

@@ -5,49 +5,49 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --icon-color
-// --bezier
-// --close-margin
-// --icon-margin
-// --icon-size
-// --close-size
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --color
-// --text-color
-// --border-radius
-// --padding
-// --line-height
-// --border
-// --content-margin
-// --title-font-size
-// --title-font-weight
-// --title-text-color
-// --action-space
+// --n-icon-color
+// --n-bezier
+// --n-close-margin
+// --n-icon-margin
+// --n-icon-size
+// --n-close-size
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-color
+// --n-text-color
+// --n-border-radius
+// --n-padding
+// --n-line-height
+// --n-border
+// --n-content-margin
+// --n-title-font-size
+// --n-title-font-weight
+// --n-title-text-color
+// --n-action-space
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('dialog', `
- line-height: var(--line-height);
+ line-height: var(--n-line-height);
  position: relative;
- background: var(--color);
- color: var(--text-color);
+ background: var(--n-color);
+ color: var(--n-text-color);
  box-sizing: border-box;
  margin: auto;
- border-radius: var(--border-radius);
- padding: var(--padding);
+ border-radius: var(--n-border-radius);
+ padding: var(--n-padding);
  transition: 
- border-color .3s var(--bezier),
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  `, [(0, cssr_1.cE)('icon', {
-  color: 'var(--icon-color)'
+  color: 'var(--n-icon-color)'
 }), (0, cssr_1.cM)('bordered', {
-  border: 'var(--border)'
+  border: 'var(--n-border)'
 }), (0, cssr_1.cM)('icon-top', [(0, cssr_1.cE)('close', {
-  margin: 'var(--close-margin)'
+  margin: 'var(--n-close-margin)'
 }), (0, cssr_1.cE)('icon', {
-  margin: 'var(--icon-margin)'
+  margin: 'var(--n-icon-margin)'
 }), (0, cssr_1.cE)('content', {
   textAlign: 'center'
 }), (0, cssr_1.cE)('title', {
@@ -55,35 +55,35 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('dialog', `
 }), (0, cssr_1.cE)('action', {
   justifyContent: 'center'
 })]), (0, cssr_1.cM)('icon-left', [(0, cssr_1.cE)('icon', {
-  margin: 'var(--icon-margin)'
+  margin: 'var(--n-icon-margin)'
 })]), (0, cssr_1.cE)('close', `
- font-size: var(--close-size);
+ font-size: var(--n-close-size);
  position: absolute;
  right: 0;
  top: 0;
- margin: var(--close-margin);
- transition: .3s color var(--bezier);
+ margin: var(--n-close-margin);
+ transition: .3s color var(--n-bezier);
  z-index: 1;
  `), (0, cssr_1.cE)('content', `
- font-size: var(--font-size);
- margin: var(--content-margin);
+ font-size: var(--n-font-size);
+ margin: var(--n-content-margin);
  position: relative;
  word-break: break-word;
  `, [(0, cssr_1.c)('&:last-child', 'margin-bottom: 0;')]), (0, cssr_1.cE)('action', `
  display: flex;
  justify-content: flex-end;
  `, [(0, cssr_1.c)('> *:not(:last-child)', {
-  marginRight: 'var(--action-space)'
+  marginRight: 'var(--n-action-space)'
 })]), (0, cssr_1.cE)('icon', {
-  fontSize: 'var(--icon-size)',
-  transition: 'color .3s var(--bezier)'
+  fontSize: 'var(--n-icon-size)',
+  transition: 'color .3s var(--n-bezier)'
 }), (0, cssr_1.cE)('title', `
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  display: flex;
  align-items: center;
- font-size: var(--title-font-size);
- font-weight: var(--title-font-weight);
- color: var(--title-text-color);
+ font-size: var(--n-title-font-size);
+ font-weight: var(--n-title-font-weight);
+ color: var(--n-title-text-color);
  `), (0, cssr_1.cB)('dialog-icon-container', {
   display: 'flex',
   justifyContent: 'center'

package/lib/drawer/src/Drawer.d.ts

@@ -29,37 +29,18 @@ declare const drawerProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly zIndex: NumberConstructor;
     readonly onMaskClick: PropType<(e: MouseEvent) => void>;
     readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     /** @deprecated */
-    readonly drawerStyle: {
-        readonly type: PropType<string | CSSProperties | undefined>;
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    /** @deprecated */
-    readonly drawerClass: {
-        readonly type: PropType<string | undefined>;
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    readonly target: {
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    readonly onShow: {
-        readonly type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onHide: {
-        readonly type: PropType<MaybeArray<(value: false) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly drawerStyle: PropType<string | CSSProperties>;
+    readonly drawerClass: StringConstructor;
+    readonly target: null;
+    readonly onShow: PropType<(value: boolean) => void>;
+    readonly onHide: PropType<(value: boolean) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Drawer", {
         bodyPadding: string;
         headerPadding: string;
@@ -158,37 +139,18 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly zIndex: NumberConstructor;
     readonly onMaskClick: PropType<(e: MouseEvent) => void>;
     readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     /** @deprecated */
-    readonly drawerStyle: {
-        readonly type: PropType<string | CSSProperties | undefined>;
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    /** @deprecated */
-    readonly drawerClass: {
-        readonly type: PropType<string | undefined>;
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    readonly target: {
-        readonly validator: (() => boolean) | undefined;
-        readonly default: undefined;
-    };
-    readonly onShow: {
-        readonly type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onHide: {
-        readonly type: PropType<MaybeArray<(value: false) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly drawerStyle: PropType<string | CSSProperties>;
+    readonly drawerClass: StringConstructor;
+    readonly target: null;
+    readonly onShow: PropType<(value: boolean) => void>;
+    readonly onHide: PropType<(value: boolean) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Drawer", {
         bodyPadding: string;
         headerPadding: string;
@@ -263,6 +225,7 @@ declare const _default: import("vue").DefineComponent<{
     namespace: import("vue").ComputedRef<string | undefined>;
     mergedBodyStyle: import("vue").ComputedRef<(string | CSSProperties | undefined)[]>;
     handleMaskClick: (e: MouseEvent) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;
@@ -400,25 +363,25 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--line-height': string;
-        '--color': string;
-        '--text-color': string;
-        '--box-shadow': string;
-        '--bezier': string;
-        '--bezier-out': string;
-        '--bezier-in': string;
-        '--header-padding': string;
-        '--body-padding': string;
-        '--footer-padding': string;
-        '--title-text-color': string;
-        '--title-font-size': string;
-        '--title-font-weight': string;
-        '--header-border-bottom': string;
-        '--footer-border-top': string;
-        '--close-color': string;
-        '--close-color-hover': string;
-        '--close-color-pressed': string;
-        '--close-size': string;
+        '--n-line-height': string;
+        '--n-color': string;
+        '--n-text-color': string;
+        '--n-box-shadow': string;
+        '--n-bezier': string;
+        '--n-bezier-out': string;
+        '--n-bezier-in': string;
+        '--n-header-padding': string;
+        '--n-body-padding': string;
+        '--n-footer-padding': string;
+        '--n-title-text-color': string;
+        '--n-title-font-size': string;
+        '--n-title-font-weight': string;
+        '--n-header-border-bottom': string;
+        '--n-footer-border-top': string;
+        '--n-close-color': string;
+        '--n-close-color-hover': string;
+        '--n-close-color-pressed': string;
+        '--n-close-size': string;
     }>;
     isMounted: Readonly<import("vue").Ref<boolean>>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
@@ -430,6 +393,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly to?: unknown;
     readonly displayDirective?: unknown;
     readonly nativeScrollbar?: unknown;
+    readonly zIndex?: unknown;
     readonly onMaskClick?: unknown;
     readonly scrollbarProps?: unknown;
     readonly contentStyle?: unknown;
@@ -452,7 +416,8 @@ declare const _default: import("vue").DefineComponent<{
     maskClosable: boolean;
     nativeScrollbar: boolean;
 } & {
-    target?: undefined;
+    zIndex?: number | undefined;
+    target?: any;
     to?: string | HTMLElement | undefined;
     theme?: import("../../_mixins").Theme<"Drawer", {
         bodyPadding: string;
@@ -526,8 +491,8 @@ declare const _default: import("vue").DefineComponent<{
     contentStyle?: string | CSSProperties | undefined;
     "onUpdate:show"?: MaybeArray<(value: boolean) => void> | undefined;
     onUpdateShow?: MaybeArray<(value: boolean) => void> | undefined;
-    onShow?: MaybeArray<(value: boolean) => void> | undefined;
-    onHide?: MaybeArray<(value: false) => void> | undefined;
+    onShow?: ((value: boolean) => void) | undefined;
+    onHide?: ((value: boolean) => void) | undefined;
     onMaskClick?: ((e: MouseEvent) => void) | undefined;
     scrollbarProps?: ScrollbarProps | undefined;
     drawerStyle?: string | CSSProperties | undefined;
@@ -536,14 +501,9 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean;
     height: string | number;
     width: string | number;
-    target: undefined;
     placement: Placement;
     displayDirective: "show" | "if";
-    onShow: MaybeArray<(value: boolean) => void> | undefined;
-    onHide: MaybeArray<(value: false) => void> | undefined;
     maskClosable: boolean;
     nativeScrollbar: boolean;
-    drawerStyle: string | CSSProperties | undefined;
-    drawerClass: string | undefined;
 }>;
 export default _default;

package/lib/drawer/src/Drawer.js

@@ -31,56 +31,33 @@ const drawerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, nativeScrollbar: {
         type: Boolean,
         default: true
-    }, onMaskClick: Function, scrollbarProps: Object, contentStyle: [Object, String], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 
+    }, zIndex: Number, onMaskClick: Function, scrollbarProps: Object, contentStyle: [Object, String], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 
     /** @deprecated */
-    drawerStyle: {
-        type: [Object, String],
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                (0, _utils_1.warn)('drawer', '`drawer-style` is deprecated, please use `style` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, 
-    /** @deprecated */
-    drawerClass: {
-        type: String,
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                (0, _utils_1.warn)('drawer', '`drawer-class` is deprecated, please use `class` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, target: {
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                (0, _utils_1.warn)('drawer', '`target` is deprecated, please use `to` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, onShow: {
-        type: [Function, Array],
-        validator: () => {
-            (0, _utils_1.warn)('drawer', '`on-show` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    }, onHide: {
-        type: [Function, Array],
-        validator: () => {
-            (0, _utils_1.warn)('drawer', '`on-hide` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    } });
+    drawerStyle: [String, Object], drawerClass: String, target: null, onShow: Function, onHide: Function });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Drawer',
     inheritAttrs: false,
     props: drawerProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.drawerStyle !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`drawer-style` is deprecated, please use `style` instead.');
+                }
+                if (props.drawerClass !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`drawer-class` is deprecated, please use `class` instead.');
+                }
+                if (props.target !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`target` is deprecated, please use `to` instead.');
+                }
+                if (props.onShow !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`on-show` is deprecated, please use `on-update:show` instead.');
+                }
+                if (props.onHide !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`on-hide` is deprecated, please use `on-update:show` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
         const isMountedRef = (0, vooks_1.useIsMounted)();
         const themeRef = (0, _mixins_1.useTheme)('Drawer', 'Drawer', index_cssr_1.default, styles_1.drawerLight, props, mergedClsPrefixRef);
@@ -115,6 +92,11 @@ exports.default = (0, vue_1.defineComponent)({
             if (onMaskClick)
                 onMaskClick(e);
         }
+        function handleKeydown(e) {
+            if (e.code === 'Escape') {
+                doUpdateShow(false);
+            }
+        }
         function doUpdateShow(show) {
             const { onHide, onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
             if (onUpdateShow)
@@ -136,29 +118,30 @@ exports.default = (0, vue_1.defineComponent)({
             namespace: namespaceRef,
             mergedBodyStyle: mergedBodyStyleRef,
             handleMaskClick,
+            handleKeydown,
             mergedTheme: themeRef,
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { color, textColor, boxShadow, lineHeight, headerPadding, footerPadding, bodyPadding, titleFontSize, titleTextColor, titleFontWeight, headerBorderBottom, footerBorderTop, closeColor, closeColorHover, closeColorPressed, closeSize } } = themeRef.value;
                 return {
-                    '--line-height': lineHeight,
-                    '--color': color,
-                    '--text-color': textColor,
-                    '--box-shadow': boxShadow,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--bezier-out': cubicBezierEaseOut,
-                    '--bezier-in': cubicBezierEaseIn,
-                    '--header-padding': headerPadding,
-                    '--body-padding': bodyPadding,
-                    '--footer-padding': footerPadding,
-                    '--title-text-color': titleTextColor,
-                    '--title-font-size': titleFontSize,
-                    '--title-font-weight': titleFontWeight,
-                    '--header-border-bottom': headerBorderBottom,
-                    '--footer-border-top': footerBorderTop,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--close-size': closeSize
+                    '--n-line-height': lineHeight,
+                    '--n-color': color,
+                    '--n-text-color': textColor,
+                    '--n-box-shadow': boxShadow,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-bezier-out': cubicBezierEaseOut,
+                    '--n-bezier-in': cubicBezierEaseIn,
+                    '--n-header-padding': headerPadding,
+                    '--n-body-padding': bodyPadding,
+                    '--n-footer-padding': footerPadding,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-header-border-bottom': headerBorderBottom,
+                    '--n-footer-border-top': footerBorderTop,
+                    '--n-close-color': closeColor,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-close-size': closeSize
                 };
             }),
             isMounted: isMountedRef
@@ -168,11 +151,11 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefix } = this;
         return ((0, vue_1.h)(vueuc_1.VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
-                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-drawer-container`, this.namespace], style: this.cssVars },
+                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-drawer-container`, this.namespace], style: this.cssVars, onKeydown: this.handleKeydown, role: "none" },
                     (0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.isMounted }, {
-                        default: () => this.show ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-mask`, onClick: this.handleMaskClick })) : null
+                        default: () => this.show ? ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-drawer-mask`, onClick: this.handleMaskClick })) : null
                     }),
-                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar }), this.$slots)), [[vdirs_1.zindexable, { enabled: this.show }]]);
+                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
             }
         }));
     }