naive-ui 2.23.2 → 2.24.3

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

@@ -80,52 +80,47 @@ declare const _default: import("vue").DefineComponent<{
     handleNegativeClick: (e: MouseEvent) => void;
     handlePositiveClick: (e: MouseEvent) => void;
     handleMaskClick: (e: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    internalKey?: unknown;
-    to?: unknown;
-    onInternalAfterLeave?: unknown;
-    internalStyle?: unknown;
-    maskClosable?: unknown;
-    onPositiveClick?: unknown;
-    onNegativeClick?: unknown;
-    onClose?: unknown;
-    onMaskClick?: unknown;
-    icon?: unknown;
-    type?: unknown;
-    title?: unknown;
-    closable?: unknown;
-    negativeText?: unknown;
-    positiveText?: unknown;
-    content?: unknown;
-    action?: unknown;
-    showIcon?: unknown;
-    loading?: unknown;
-    bordered?: unknown;
-    iconPlacement?: unknown;
-} & {
-    type: "default" | "error" | "info" | "success" | "warning";
-    loading: boolean;
-    showIcon: boolean;
-    bordered: boolean;
-    closable: boolean;
-    maskClosable: boolean;
-    internalKey: string;
-    onInternalAfterLeave: (key: string) => void;
-} & {
-    content?: string | (() => import("vue").VNodeChild) | undefined;
-    icon?: (() => import("vue").VNodeChild) | undefined;
-    title?: string | (() => import("vue").VNodeChild) | undefined;
-    action?: (() => import("vue").VNodeChild) | undefined;
-    to?: string | HTMLElement | undefined;
-    positiveText?: string | undefined;
-    negativeText?: string | undefined;
-    onClose?: (() => unknown) | undefined;
-    iconPlacement?: import("./interface").IconPlacement | undefined;
-    onPositiveClick?: ((e: MouseEvent) => unknown) | undefined;
-    onNegativeClick?: ((e: MouseEvent) => unknown) | undefined;
-    onMaskClick?: ((e: MouseEvent) => void) | undefined;
-    internalStyle?: string | CSSProperties | 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;
+    };
+    to: PropType<string | HTMLElement>;
+    onInternalAfterLeave: {
+        type: PropType<(key: string) => void>;
+        required: true;
+    };
+    internalStyle: PropType<string | CSSProperties>;
+    maskClosable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    onPositiveClick: PropType<(e: MouseEvent) => unknown>;
+    onNegativeClick: PropType<(e: MouseEvent) => unknown>;
+    onClose: PropType<() => unknown>;
+    onMaskClick: PropType<(e: MouseEvent) => void>;
+    icon: PropType<() => import("vue").VNodeChild>;
+    type: {
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly default: "default";
+    };
+    title: PropType<string | (() => import("vue").VNodeChild)>;
+    closable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    negativeText: StringConstructor;
+    positiveText: StringConstructor;
+    content: PropType<string | (() => import("vue").VNodeChild)>;
+    action: PropType<() => import("vue").VNodeChild>;
+    showIcon: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    loading: BooleanConstructor;
+    bordered: BooleanConstructor;
+    iconPlacement: PropType<import("./interface").IconPlacement>;
+}>>, {
     type: "default" | "error" | "info" | "success" | "warning";
     loading: boolean;
     showIcon: boolean;

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

@@ -1,4 +1,4 @@
-import { ExtractPropTypes, PropType, InjectionKey, Ref, CSSProperties } from 'vue';
+import { ExtractPropTypes, PropType, Ref, CSSProperties } from 'vue';
 import type { ExtractPublicPropTypes, Mutable } from '../../_utils';
 import { exposedDialogEnvProps } from './DialogEnvironment';
 export declare type DialogOptions = Mutable<Omit<Partial<ExtractPropTypes<typeof exposedDialogEnvProps>>, 'internalStyle'> & {
@@ -16,7 +16,7 @@ export interface DialogApiInjection {
     error: (options: DialogOptions) => DialogReactive;
     info: (options: DialogOptions) => DialogReactive;
 }
-export declare const dialogApiInjectionKey: InjectionKey<DialogApiInjection>;
+export declare const dialogApiInjectionKey: import("vue").InjectionKey<DialogApiInjection>;
 export interface DialogProviderInjection {
     clickedRef: Ref<boolean>;
     clickPositionRef: Ref<{
@@ -24,7 +24,7 @@ export interface DialogProviderInjection {
         y: number;
     } | null>;
 }
-export declare const dialogProviderInjectionKey: InjectionKey<DialogProviderInjection>;
+export declare const dialogProviderInjectionKey: import("vue").InjectionKey<DialogProviderInjection>;
 interface DialogInst {
     hide: () => void;
 }
@@ -68,11 +68,8 @@ declare const _default: import("vue").DefineComponent<{
     success: (options: DialogOptions) => DialogReactive;
     warning: (options: DialogOptions) => DialogReactive;
     error: (options: DialogOptions) => DialogReactive;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    injectionKey?: unknown;
-    to?: unknown;
-} & {} & {
-    to?: string | HTMLElement | undefined;
-    injectionKey?: string | undefined;
-}>, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    injectionKey: StringConstructor;
+    to: PropType<string | HTMLElement>;
+}>>, {}>;
 export default _default;

package/lib/dialog/src/DialogProvider.js

@@ -9,8 +9,8 @@ const seemly_1 = require("seemly");
 const _utils_1 = require("../../_utils");
 const DialogEnvironment_1 = __importDefault(require("./DialogEnvironment"));
 const vooks_1 = require("vooks");
-exports.dialogApiInjectionKey = Symbol('dialogApi');
-exports.dialogProviderInjectionKey = Symbol('dialogProvider');
+exports.dialogApiInjectionKey = (0, _utils_1.createInjectionKey)('n-dialog-api');
+exports.dialogProviderInjectionKey = (0, _utils_1.createInjectionKey)('n-dialog-provider');
 const dialogProviderProps = {
     injectionKey: String,
     to: [String, Object]

package/lib/divider/src/Divider.d.ts

@@ -54,34 +54,29 @@ declare const _default: import("vue").DefineComponent<{
         '--n-text-color': string;
         '--n-font-weight': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly titlePlacement?: unknown;
-    readonly dashed?: unknown;
-    readonly vertical?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    dashed: boolean;
-    vertical: boolean;
-    titlePlacement: "left" | "right" | "center";
-} & {
-    theme?: import("../../_mixins").Theme<"Divider", {
+}, 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 titlePlacement: {
+        readonly type: PropType<"left" | "right" | "center">;
+        readonly default: "center";
+    };
+    readonly dashed: BooleanConstructor;
+    readonly vertical: BooleanConstructor;
+    readonly theme: PropType<import("../../_mixins").Theme<"Divider", {
         textColor: string;
         color: string;
         fontWeight: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Divider", {
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Divider", {
         textColor: string;
         color: string;
         fontWeight: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Divider", {
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Divider", {
         textColor: string;
         color: string;
         fontWeight: string;
-    }, any>> | undefined;
-}>, {
+    }, any>>>;
+}>>, {
     dashed: boolean;
     vertical: boolean;
     titlePlacement: "left" | "right" | "center";

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

@@ -29,37 +29,31 @@ 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 trapFocus: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
-    readonly onShow: {
-        readonly type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
+    readonly onEsc: PropType<() => void>;
+    readonly autoFocus: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
-    readonly onHide: {
-        readonly type: PropType<MaybeArray<(value: false) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
+    readonly closeOnEsc: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
+    readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
+    readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    /** @deprecated */
+    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 +152,31 @@ 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 trapFocus: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
-    readonly onShow: {
-        readonly type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
+    readonly onEsc: PropType<() => void>;
+    readonly autoFocus: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
-    readonly onHide: {
-        readonly type: PropType<MaybeArray<(value: false) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
+    readonly closeOnEsc: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
+    readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
+    readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    /** @deprecated */
+    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 +251,7 @@ declare const _default: import("vue").DefineComponent<{
     namespace: import("vue").ComputedRef<string | undefined>;
     mergedBodyStyle: import("vue").ComputedRef<(string | CSSProperties | undefined)[]>;
     handleMaskClick: (e: MouseEvent) => void;
+    handleEsc: () => void;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;
@@ -421,40 +410,59 @@ declare const _default: import("vue").DefineComponent<{
         '--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<{
-    readonly show?: unknown;
-    readonly width?: unknown;
-    readonly height?: unknown;
-    readonly placement?: unknown;
-    readonly maskClosable?: unknown;
-    readonly to?: unknown;
-    readonly displayDirective?: unknown;
-    readonly nativeScrollbar?: unknown;
-    readonly onMaskClick?: unknown;
-    readonly scrollbarProps?: unknown;
-    readonly contentStyle?: unknown;
-    readonly 'onUpdate:show'?: unknown;
-    readonly onUpdateShow?: unknown;
-    readonly drawerStyle?: unknown;
-    readonly drawerClass?: unknown;
-    readonly target?: unknown;
-    readonly onShow?: unknown;
-    readonly onHide?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    show: boolean;
-    height: string | number;
-    width: string | number;
-    placement: Placement;
-    displayDirective: "show" | "if";
-    maskClosable: boolean;
-    nativeScrollbar: boolean;
-} & {
-    target?: undefined;
-    to?: string | HTMLElement | undefined;
-    theme?: import("../../_mixins").Theme<"Drawer", {
+}, 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 show: BooleanConstructor;
+    readonly width: {
+        readonly type: PropType<string | number>;
+        readonly default: 251;
+    };
+    readonly height: {
+        readonly type: PropType<string | number>;
+        readonly default: 251;
+    };
+    readonly placement: {
+        readonly type: PropType<Placement>;
+        readonly default: "right";
+    };
+    readonly maskClosable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly to: PropType<string | HTMLElement>;
+    readonly displayDirective: {
+        readonly type: PropType<"show" | "if">;
+        readonly default: "if";
+    };
+    readonly nativeScrollbar: {
+        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 trapFocus: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly onEsc: PropType<() => void>;
+    readonly autoFocus: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly closeOnEsc: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
+    readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    /** @deprecated */
+    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;
         footerPadding: string;
@@ -476,8 +484,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Drawer", {
+    }>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Drawer", {
         bodyPadding: string;
         headerPadding: string;
         footerPadding: string;
@@ -499,8 +507,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Drawer", {
+    }>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Drawer", {
         bodyPadding: string;
         headerPadding: string;
         footerPadding: string;
@@ -522,28 +530,17 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    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;
-    onMaskClick?: ((e: MouseEvent) => void) | undefined;
-    scrollbarProps?: ScrollbarProps | undefined;
-    drawerStyle?: string | CSSProperties | undefined;
-    drawerClass?: string | undefined;
-}>, {
+    }>>>;
+}>>, {
     show: boolean;
     height: string | number;
     width: string | number;
-    target: undefined;
+    autoFocus: boolean;
     placement: Placement;
     displayDirective: "show" | "if";
-    onShow: MaybeArray<(value: boolean) => void> | undefined;
-    onHide: MaybeArray<(value: false) => void> | undefined;
+    trapFocus: boolean;
     maskClosable: boolean;
+    closeOnEsc: boolean;
     nativeScrollbar: boolean;
-    drawerStyle: string | CSSProperties | undefined;
-    drawerClass: string | undefined;
 }>;
 export default _default;

package/lib/drawer/src/Drawer.js

@@ -31,56 +31,42 @@ 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], 
-    /** @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
-    }, 
+    }, zIndex: Number, onMaskClick: Function, scrollbarProps: Object, contentStyle: [Object, String], trapFocus: {
+        type: Boolean,
+        default: true
+    }, onEsc: Function, autoFocus: {
+        type: Boolean,
+        default: true
+    }, closeOnEsc: {
+        type: Boolean,
+        default: true
+    }, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 
     /** @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 +101,13 @@ exports.default = (0, vue_1.defineComponent)({
             if (onMaskClick)
                 onMaskClick(e);
         }
+        function handleEsc() {
+            var _a;
+            (_a = props.onEsc) === null || _a === void 0 ? void 0 : _a.call(props);
+            if (props.closeOnEsc) {
+                doUpdateShow(false);
+            }
+        }
         function doUpdateShow(show) {
             const { onHide, onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
             if (onUpdateShow)
@@ -136,6 +129,7 @@ exports.default = (0, vue_1.defineComponent)({
             namespace: namespaceRef,
             mergedBodyStyle: mergedBodyStyleRef,
             handleMaskClick,
+            handleEsc,
             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;
@@ -168,11 +162,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, 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, trapFocus: this.trapFocus, autoFocus: this.autoFocus, onEsc: this.handleEsc }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
             }
         }));
     }