naive-ui 2.30.8 → 2.31.0

package/lib/descriptions/src/Descriptions.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.descriptionsProps = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const _mixins_1 = require("../../_mixins");
@@ -10,7 +11,7 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const utils_1 = require("./utils");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const descriptionProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { title: String, column: {
+exports.descriptionsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { title: String, column: {
         type: Number,
         default: 3
     }, columns: Number, labelPlacement: {
@@ -28,7 +29,7 @@ const descriptionProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, bordered: Boolean, labelStyle: [Object, String], contentStyle: [Object, String] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Descriptions',
-    props: descriptionProps,
+    props: exports.descriptionsProps,
     setup(props) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Descriptions', '-descriptions', index_cssr_1.default, styles_1.descriptionsLight, props, mergedClsPrefixRef);

package/lib/descriptions/src/DescriptionsItem.d.ts

@@ -1,6 +1,6 @@
 import { PropType, CSSProperties } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const descriptionItemProps: {
+export declare const descriptionsItemProps: {
     readonly label: StringConstructor;
     readonly span: {
         readonly type: NumberConstructor;
@@ -9,7 +9,7 @@ declare const descriptionItemProps: {
     readonly labelStyle: PropType<string | CSSProperties>;
     readonly contentStyle: PropType<string | CSSProperties>;
 };
-export declare type DescriptionItemProps = ExtractPublicPropTypes<typeof descriptionItemProps>;
+export declare type DescriptionItemProps = ExtractPublicPropTypes<typeof descriptionsItemProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly label: StringConstructor;
     readonly span: {

package/lib/descriptions/src/DescriptionsItem.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.descriptionsItemProps = void 0;
 const vue_1 = require("vue");
 const utils_1 = require("./utils");
-const descriptionItemProps = {
+exports.descriptionsItemProps = {
     label: String,
     span: {
         type: Number,
@@ -14,7 +15,7 @@ const descriptionItemProps = {
 exports.default = (0, vue_1.defineComponent)({
     name: 'DescriptionsItem',
     [utils_1.DESCRIPTION_ITEM_FLAG]: true,
-    props: descriptionItemProps,
+    props: exports.descriptionsItemProps,
     render() {
         return null;
     }

package/lib/dialog/index.d.ts

@@ -1,5 +1,6 @@
 export { NDialog } from './src/Dialog';
+export { dialogProps } from './src/dialogProps';
 export type { DialogProps } from './src/dialogProps';
-export { NDialogProvider } from './src/DialogProvider';
+export { NDialogProvider, dialogProviderProps } from './src/DialogProvider';
 export type { DialogProviderProps, DialogProviderInst, DialogOptions, DialogReactive, DialogApiInjection as DialogApi } from './src/DialogProvider';
 export { useDialog } from './src/use-dialog';

package/lib/dialog/index.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDialog = exports.NDialogProvider = exports.NDialog = void 0;
+exports.useDialog = exports.dialogProviderProps = exports.NDialogProvider = exports.dialogProps = exports.NDialog = void 0;
 var Dialog_1 = require("./src/Dialog");
 Object.defineProperty(exports, "NDialog", { enumerable: true, get: function () { return Dialog_1.NDialog; } });
+var dialogProps_1 = require("./src/dialogProps");
+Object.defineProperty(exports, "dialogProps", { enumerable: true, get: function () { return dialogProps_1.dialogProps; } });
 var DialogProvider_1 = require("./src/DialogProvider");
 Object.defineProperty(exports, "NDialogProvider", { enumerable: true, get: function () { return DialogProvider_1.NDialogProvider; } });
+Object.defineProperty(exports, "dialogProviderProps", { enumerable: true, get: function () { return DialogProvider_1.dialogProviderProps; } });
 var use_dialog_1 = require("./src/use-dialog");
 Object.defineProperty(exports, "useDialog", { enumerable: true, get: function () { return use_dialog_1.useDialog; } });

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

@@ -27,7 +27,7 @@ interface DialogInst {
     hide: () => void;
 }
 export declare type DialogProviderInst = DialogApiInjection;
-declare const dialogProviderProps: {
+export declare const dialogProviderProps: {
     injectionKey: StringConstructor;
     to: PropType<string | HTMLElement>;
 };

package/lib/dialog/src/DialogProvider.js

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NDialogProvider = void 0;
+exports.NDialogProvider = exports.dialogProviderProps = void 0;
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vooks_1 = require("vooks");
 const _utils_1 = require("../../_utils");
 const DialogEnvironment_1 = require("./DialogEnvironment");
 const context_1 = require("./context");
-const dialogProviderProps = {
+exports.dialogProviderProps = {
     injectionKey: String,
     to: [String, Object]
 };
 exports.NDialogProvider = (0, vue_1.defineComponent)({
     name: 'DialogProvider',
-    props: dialogProviderProps,
+    props: exports.dialogProviderProps,
     setup() {
         const dialogListRef = (0, vue_1.ref)([]);
         const dialogInstRefs = {};

package/lib/divider/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NDivider } from './src/Divider';
+export { default as NDivider, dividerProps } from './src/Divider';
 export type { DividerProps } from './src/Divider';

package/lib/divider/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NDivider = void 0;
+exports.dividerProps = exports.NDivider = void 0;
 var Divider_1 = require("./src/Divider");
 Object.defineProperty(exports, "NDivider", { enumerable: true, get: function () { return __importDefault(Divider_1).default; } });
+Object.defineProperty(exports, "dividerProps", { enumerable: true, get: function () { return Divider_1.dividerProps; } });

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

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const dividerProps: {
+export declare const dividerProps: {
     readonly titlePlacement: {
         readonly type: PropType<"left" | "right" | "center">;
         readonly default: "center";

package/lib/divider/src/Divider.js

@@ -3,17 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.dividerProps = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const dividerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { titlePlacement: {
+exports.dividerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { titlePlacement: {
         type: String,
         default: 'center'
     }, dashed: Boolean, vertical: Boolean });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Divider',
-    props: dividerProps,
+    props: exports.dividerProps,
     setup(props) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Divider', '-divider', index_cssr_1.default, styles_1.dividerLight, props, mergedClsPrefixRef);

package/lib/drawer/index.d.ts

@@ -1,5 +1,5 @@
-export { default as NDrawer } from './src/Drawer';
+export { default as NDrawer, drawerProps } from './src/Drawer';
 export type { DrawerProps } from './src/Drawer';
-export { default as NDrawerContent } from './src/DrawerContent';
+export { default as NDrawerContent, drawerContentProps } from './src/DrawerContent';
 export type { DrawerContentProps } from './src/DrawerContent';
 export type { Placement as DrawerPlacement } from './src/DrawerBodyWrapper';

package/lib/drawer/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NDrawerContent = exports.NDrawer = void 0;
+exports.drawerContentProps = exports.NDrawerContent = exports.drawerProps = exports.NDrawer = void 0;
 var Drawer_1 = require("./src/Drawer");
 Object.defineProperty(exports, "NDrawer", { enumerable: true, get: function () { return __importDefault(Drawer_1).default; } });
+Object.defineProperty(exports, "drawerProps", { enumerable: true, get: function () { return Drawer_1.drawerProps; } });
 var DrawerContent_1 = require("./src/DrawerContent");
 Object.defineProperty(exports, "NDrawerContent", { enumerable: true, get: function () { return __importDefault(DrawerContent_1).default; } });
+Object.defineProperty(exports, "drawerContentProps", { enumerable: true, get: function () { return DrawerContent_1.drawerContentProps; } });

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

@@ -2,16 +2,10 @@ import { PropType, CSSProperties } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import { ScrollbarProps } from '../../_internal';
 import type { Placement } from './DrawerBodyWrapper';
-declare const drawerProps: {
+export declare const drawerProps: {
     readonly show: BooleanConstructor;
-    readonly width: {
-        readonly type: PropType<string | number>;
-        readonly default: 251;
-    };
-    readonly height: {
-        readonly type: PropType<string | number>;
-        readonly default: 251;
-    };
+    readonly width: PropType<string | number>;
+    readonly height: PropType<string | number>;
     readonly placement: {
         readonly type: PropType<Placement>;
         readonly default: "right";
@@ -54,6 +48,19 @@ declare const drawerProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly resizable: BooleanConstructor;
+    readonly defaultWidth: {
+        readonly type: NumberConstructor;
+        readonly default: 251;
+    };
+    readonly defaultHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 251;
+    };
+    readonly onUpdateWidth: PropType<MaybeArray<(value: number) => void>>;
+    readonly onUpdateHeight: PropType<MaybeArray<(value: number) => void>>;
+    readonly 'onUpdate:width': PropType<MaybeArray<(value: number) => void>>;
+    readonly 'onUpdate:height': PropType<MaybeArray<(value: number) => void>>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     readonly onAfterEnter: PropType<() => void>;
@@ -85,6 +92,7 @@ declare const drawerProps: {
         closeColorHover: string;
         closeColorPressed: string;
         closeBorderRadius: string;
+        resizableTriggerColorHover: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
             color: string;
@@ -112,6 +120,7 @@ declare const drawerProps: {
         closeColorHover: string;
         closeColorPressed: string;
         closeBorderRadius: string;
+        resizableTriggerColorHover: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
             color: string;
@@ -139,6 +148,7 @@ declare const drawerProps: {
         closeColorHover: string;
         closeColorPressed: string;
         closeBorderRadius: string;
+        resizableTriggerColorHover: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
             color: string;
@@ -149,14 +159,8 @@ declare const drawerProps: {
 export declare type DrawerProps = ExtractPublicPropTypes<typeof drawerProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly show: BooleanConstructor;
-    readonly width: {
-        readonly type: PropType<string | number>;
-        readonly default: 251;
-    };
-    readonly height: {
-        readonly type: PropType<string | number>;
-        readonly default: 251;
-    };
+    readonly width: PropType<string | number>;
+    readonly height: PropType<string | number>;
     readonly placement: {
         readonly type: PropType<Placement>;
         readonly default: "right";
@@ -199,6 +203,19 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly resizable: BooleanConstructor;
+    readonly defaultWidth: {
+        readonly type: NumberConstructor;
+        readonly default: 251;
+    };
+    readonly defaultHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 251;
+    };
+    readonly onUpdateWidth: PropType<MaybeArray<(value: number) => void>>;
+    readonly onUpdateHeight: PropType<MaybeArray<(value: number) => void>>;
+    readonly 'onUpdate:width': PropType<MaybeArray<(value: number) => void>>;
+    readonly 'onUpdate:height': PropType<MaybeArray<(value: number) => void>>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     readonly onAfterEnter: PropType<() => void>;
@@ -230,6 +247,7 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         closeBorderRadius: string;
+        resizableTriggerColorHover: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
             color: string;
@@ -257,6 +275,7 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         closeBorderRadius: string;
+        resizableTriggerColorHover: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
             color: string;
@@ -284,6 +303,7 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         closeBorderRadius: string;
+        resizableTriggerColorHover: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
             color: string;
@@ -423,6 +443,7 @@ declare const _default: import("vue").DefineComponent<{
             closeColorHover: string;
             closeColorPressed: string;
             closeBorderRadius: string;
+            resizableTriggerColorHover: string;
         };
         peers: {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
@@ -462,20 +483,15 @@ declare const _default: import("vue").DefineComponent<{
         '--n-close-color-pressed': string;
         '--n-close-icon-size': string;
         '--n-close-border-radius': string;
+        '--n-resize-trigger-color-hover': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
     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<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 width: PropType<string | number>;
+    readonly height: PropType<string | number>;
     readonly placement: {
         readonly type: PropType<Placement>;
         readonly default: "right";
@@ -518,6 +534,19 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly resizable: BooleanConstructor;
+    readonly defaultWidth: {
+        readonly type: NumberConstructor;
+        readonly default: 251;
+    };
+    readonly defaultHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 251;
+    };
+    readonly onUpdateWidth: PropType<MaybeArray<(value: number) => void>>;
+    readonly onUpdateHeight: PropType<MaybeArray<(value: number) => void>>;
+    readonly 'onUpdate:width': PropType<MaybeArray<(value: number) => void>>;
+    readonly 'onUpdate:height': PropType<MaybeArray<(value: number) => void>>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     readonly onAfterEnter: PropType<() => void>;
@@ -549,6 +578,7 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         closeBorderRadius: string;
+        resizableTriggerColorHover: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
             color: string;
@@ -576,6 +606,7 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         closeBorderRadius: string;
+        resizableTriggerColorHover: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
             color: string;
@@ -603,6 +634,7 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         closeBorderRadius: string;
+        resizableTriggerColorHover: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
             color: string;
@@ -611,16 +643,17 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }>>, {
     readonly show: boolean;
-    readonly height: string | number;
-    readonly width: string | number;
     readonly autoFocus: boolean;
     readonly placement: Placement;
     readonly displayDirective: "show" | "if";
+    readonly resizable: boolean;
     readonly trapFocus: boolean;
     readonly blockScroll: boolean;
     readonly maskClosable: boolean;
     readonly closeOnEsc: boolean;
     readonly nativeScrollbar: boolean;
     readonly showMask: boolean | "transparent";
+    readonly defaultWidth: number;
+    readonly defaultHeight: number;
 }>;
 export default _default;

package/lib/drawer/src/Drawer.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawerProps = void 0;
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
 const vdirs_1 = require("vdirs");
@@ -13,13 +14,7 @@ const styles_1 = require("../styles");
 const DrawerBodyWrapper_1 = __importDefault(require("./DrawerBodyWrapper"));
 const interface_1 = require("./interface");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const drawerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { show: Boolean, width: {
-        type: [Number, String],
-        default: 251
-    }, height: {
-        type: [Number, String],
-        default: 251
-    }, placement: {
+exports.drawerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { show: Boolean, width: [Number, String], height: [Number, String], placement: {
         type: String,
         default: 'right'
     }, maskClosable: {
@@ -46,13 +41,19 @@ const drawerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, blockScroll: {
         type: Boolean,
         default: true
-    }, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onAfterEnter: Function, onAfterLeave: Function, 
+    }, resizable: Boolean, defaultWidth: {
+        type: Number,
+        default: 251
+    }, defaultHeight: {
+        type: Number,
+        default: 251
+    }, onUpdateWidth: [Function, Array], onUpdateHeight: [Function, Array], 'onUpdate:width': [Function, Array], 'onUpdate:height': [Function, Array], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onAfterEnter: Function, onAfterLeave: Function, 
     /** @deprecated */
     drawerStyle: [String, Object], drawerClass: String, target: null, onShow: Function, onHide: Function });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Drawer',
     inheritAttrs: false,
-    props: drawerProps,
+    props: exports.drawerProps,
     setup(props) {
         if (process.env.NODE_ENV !== 'production') {
             (0, vue_1.watchEffect)(() => {
@@ -76,20 +77,38 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = (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);
+        const uncontrolledWidthRef = (0, vue_1.ref)(props.defaultWidth);
+        const uncontrolledHeightRef = (0, vue_1.ref)(props.defaultHeight);
+        const mergedWidthRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'width'), uncontrolledWidthRef);
+        const mergedHeightRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'height'), uncontrolledHeightRef);
         const styleWidthRef = (0, vue_1.computed)(() => {
             const { placement } = props;
             if (placement === 'top' || placement === 'bottom')
                 return '';
-            const { width } = props;
-            return (0, _utils_1.formatLength)(width);
+            return (0, _utils_1.formatLength)(mergedWidthRef.value);
         });
         const styleHeightRef = (0, vue_1.computed)(() => {
             const { placement } = props;
             if (placement === 'left' || placement === 'right')
                 return '';
-            const { height } = props;
-            return (0, _utils_1.formatLength)(height);
+            return (0, _utils_1.formatLength)(mergedHeightRef.value);
         });
+        const doUpdateWidth = (value) => {
+            const { onUpdateWidth, 'onUpdate:width': _onUpdateWidth } = props;
+            if (onUpdateWidth)
+                (0, _utils_1.call)(onUpdateWidth, value);
+            if (_onUpdateWidth)
+                (0, _utils_1.call)(_onUpdateWidth, value);
+            uncontrolledWidthRef.value = value;
+        };
+        const doUpdateHeight = (value) => {
+            const { onUpdateHeight, 'onUpdate:width': _onUpdateHeight } = props;
+            if (onUpdateHeight)
+                (0, _utils_1.call)(onUpdateHeight, value);
+            if (_onUpdateHeight)
+                (0, _utils_1.call)(_onUpdateHeight, value);
+            uncontrolledHeightRef.value = value;
+        };
         const mergedBodyStyleRef = (0, vue_1.computed)(() => {
             return [
                 {
@@ -129,10 +148,12 @@ exports.default = (0, vue_1.defineComponent)({
             isMountedRef: isMountedRef,
             mergedThemeRef: themeRef,
             mergedClsPrefixRef,
-            doUpdateShow
+            doUpdateShow,
+            doUpdateHeight,
+            doUpdateWidth
         });
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { color, textColor, boxShadow, lineHeight, headerPadding, footerPadding, bodyPadding, titleFontSize, titleTextColor, titleFontWeight, headerBorderBottom, footerBorderTop, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, closeIconSize, closeSize, closeBorderRadius } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { color, textColor, boxShadow, lineHeight, headerPadding, footerPadding, bodyPadding, titleFontSize, titleTextColor, titleFontWeight, headerBorderBottom, footerBorderTop, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, closeIconSize, closeSize, closeBorderRadius, resizableTriggerColorHover } } = themeRef.value;
             return {
                 '--n-line-height': lineHeight,
                 '--n-color': color,
@@ -156,7 +177,8 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-close-color-hover': closeColorHover,
                 '--n-close-color-pressed': closeColorPressed,
                 '--n-close-icon-size': closeIconSize,
-                '--n-close-border-radius': closeBorderRadius
+                '--n-close-border-radius': closeBorderRadius,
+                '--n-resize-trigger-color-hover': resizableTriggerColorHover
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -193,7 +215,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     `${mergedClsPrefix}-drawer-mask--invisible`
                             ], onClick: this.handleMaskClick })) : null
                     })) : null,
-                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], blockScroll: this.blockScroll, contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar, onAfterEnter: this.onAfterEnter, onAfterLeave: this.onAfterLeave, trapFocus: this.trapFocus, autoFocus: this.autoFocus, showMask: this.showMask, onEsc: this.handleEsc, onClickoutside: this.handleMaskClick }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, 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], blockScroll: this.blockScroll, contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar, onAfterEnter: this.onAfterEnter, onAfterLeave: this.onAfterLeave, trapFocus: this.trapFocus, autoFocus: this.autoFocus, resizable: this.resizable, showMask: this.showMask, onEsc: this.handleEsc, onClickoutside: this.handleMaskClick }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
             }
         }));
     }

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

@@ -33,6 +33,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | "transparent">;
         required: true;
     };
+    resizable: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
     onAfterLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
@@ -168,6 +169,7 @@ declare const _default: import("vue").DefineComponent<{
             closeColorHover: string;
             closeColorPressed: string;
             closeBorderRadius: string;
+            resizableTriggerColorHover: string;
         };
         peers: {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
@@ -187,6 +189,11 @@ declare const _default: import("vue").DefineComponent<{
     transitionName: import("vue").ComputedRef<string>;
     handleAfterLeave: () => void;
     bodyDirectives: import("vue").ComputedRef<DirectiveArguments>;
+    handleMousedownResizeTrigger: (e: MouseEvent) => void;
+    handleMouseenterResizeTrigger: () => void;
+    handleMouseleaveResizeTrigger: () => void;
+    isDragging: import("vue").Ref<boolean>;
+    isHoverOnResizeTrigger: 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<import("vue").ExtractPropTypes<{
     blockScroll: BooleanConstructor;
     show: {
@@ -219,6 +226,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | "transparent">;
         required: true;
     };
+    resizable: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
     onAfterLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
@@ -226,6 +234,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     show: boolean | undefined;
     autoFocus: boolean;
+    resizable: boolean;
     trapFocus: boolean;
     blockScroll: boolean;
 }>;