naive-ui 2.30.7 → 2.32.0

package/es/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/es/drawer/src/Drawer.js

@@ -1,20 +1,14 @@
-import { h, defineComponent, computed, provide, withDirectives, Transition, watchEffect } from 'vue';
+import { h, ref, defineComponent, computed, provide, withDirectives, Transition, watchEffect, toRef } from 'vue';
 import { VLazyTeleport } from 'vueuc';
 import { zindexable } from 'vdirs';
-import { useIsMounted } from 'vooks';
+import { useIsMounted, useMergedState } from 'vooks';
 import { useTheme, useConfig, useThemeClass } from '../../_mixins';
 import { formatLength, call, warnOnce, useIsComposing, eventEffectNotPerformed } from '../../_utils';
 import { drawerLight } from '../styles';
 import NDrawerBodyWrapper from './DrawerBodyWrapper';
 import { drawerInjectionKey } from './interface';
 import style from './styles/index.cssr';
-const drawerProps = Object.assign(Object.assign({}, useTheme.props), { show: Boolean, width: {
-        type: [Number, String],
-        default: 251
-    }, height: {
-        type: [Number, String],
-        default: 251
-    }, placement: {
+export const drawerProps = Object.assign(Object.assign({}, useTheme.props), { show: Boolean, width: [Number, String], height: [Number, String], placement: {
         type: String,
         default: 'right'
     }, maskClosable: {
@@ -41,7 +35,13 @@ const drawerProps = Object.assign(Object.assign({}, useTheme.props), { show: Boo
     }, 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 });
 export default defineComponent({
@@ -71,20 +71,38 @@ export default defineComponent({
         const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const isMountedRef = useIsMounted();
         const themeRef = useTheme('Drawer', '-drawer', style, drawerLight, props, mergedClsPrefixRef);
+        const uncontrolledWidthRef = ref(props.defaultWidth);
+        const uncontrolledHeightRef = ref(props.defaultHeight);
+        const mergedWidthRef = useMergedState(toRef(props, 'width'), uncontrolledWidthRef);
+        const mergedHeightRef = useMergedState(toRef(props, 'height'), uncontrolledHeightRef);
         const styleWidthRef = computed(() => {
             const { placement } = props;
             if (placement === 'top' || placement === 'bottom')
                 return '';
-            const { width } = props;
-            return formatLength(width);
+            return formatLength(mergedWidthRef.value);
         });
         const styleHeightRef = computed(() => {
             const { placement } = props;
             if (placement === 'left' || placement === 'right')
                 return '';
-            const { height } = props;
-            return formatLength(height);
+            return formatLength(mergedHeightRef.value);
         });
+        const doUpdateWidth = (value) => {
+            const { onUpdateWidth, 'onUpdate:width': _onUpdateWidth } = props;
+            if (onUpdateWidth)
+                call(onUpdateWidth, value);
+            if (_onUpdateWidth)
+                call(_onUpdateWidth, value);
+            uncontrolledWidthRef.value = value;
+        };
+        const doUpdateHeight = (value) => {
+            const { onUpdateHeight, 'onUpdate:width': _onUpdateHeight } = props;
+            if (onUpdateHeight)
+                call(onUpdateHeight, value);
+            if (_onUpdateHeight)
+                call(_onUpdateHeight, value);
+            uncontrolledHeightRef.value = value;
+        };
         const mergedBodyStyleRef = computed(() => {
             return [
                 {
@@ -124,10 +142,12 @@ export default defineComponent({
             isMountedRef: isMountedRef,
             mergedThemeRef: themeRef,
             mergedClsPrefixRef,
-            doUpdateShow
+            doUpdateShow,
+            doUpdateHeight,
+            doUpdateWidth
         });
         const cssVarsRef = 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,
@@ -151,7 +171,8 @@ export default 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
@@ -188,7 +209,7 @@ export default defineComponent({
                                     `${mergedClsPrefix}-drawer-mask--invisible`
                             ], onClick: this.handleMaskClick })) : null
                     })) : null,
-                    h(NDrawerBodyWrapper, 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)), [[zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
+                    h(NDrawerBodyWrapper, 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)), [[zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
             }
         }));
     }

package/es/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;
 }>;

package/es/drawer/src/DrawerBodyWrapper.js

@@ -1,4 +1,4 @@
-import { h, Transition, defineComponent, ref, computed, watchEffect, provide, inject, withDirectives, vShow, mergeProps } from 'vue';
+import { h, Transition, defineComponent, ref, computed, watchEffect, provide, inject, withDirectives, vShow, mergeProps, watch, onBeforeUnmount } from 'vue';
 import { VFocusTrap } from 'vueuc';
 import { clickoutside } from 'vdirs';
 import { popoverBodyInjectionKey } from '../../popover/src/interface';
@@ -41,6 +41,7 @@ export default defineComponent({
             type: [Boolean, String],
             required: true
         },
+        resizable: Boolean,
         onClickoutside: Function,
         onAfterLeave: Function,
         onAfterEnter: Function,
@@ -51,10 +52,87 @@ export default defineComponent({
         const bodyRef = ref(null); // used for detached content
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NDrawer = inject(drawerInjectionKey);
+        let startPosition = 0;
+        let memoizedBodyStyleCursor = '';
+        let hoverTimerId = null;
+        const isHoverOnResizeTriggerRef = ref(false);
+        const isDraggingRef = ref(false);
+        const isVertical = computed(() => {
+            return props.placement === 'top' || props.placement === 'bottom';
+        });
+        const handleMousedownResizeTrigger = (e) => {
+            isDraggingRef.value = true;
+            startPosition = isVertical.value ? e.clientY : e.clientX;
+            memoizedBodyStyleCursor = document.body.style.cursor;
+            document.body.style.cursor = isVertical.value ? 'ns-resize' : 'ew-resize';
+            document.body.addEventListener('mousemove', handleBodyMousemove);
+            document.body.addEventListener('mouseleave', handleBodyMouseleave);
+            document.body.addEventListener('mouseup', handleBodyMouseup);
+        };
+        const handleMouseenterResizeTrigger = () => {
+            if (hoverTimerId !== null) {
+                window.clearTimeout(hoverTimerId);
+                hoverTimerId = null;
+            }
+            if (isDraggingRef.value) {
+                isHoverOnResizeTriggerRef.value = true;
+            }
+            else {
+                hoverTimerId = window.setTimeout(() => {
+                    isHoverOnResizeTriggerRef.value = true;
+                }, 300);
+            }
+        };
+        const handleMouseleaveResizeTrigger = () => {
+            if (hoverTimerId !== null) {
+                window.clearTimeout(hoverTimerId);
+                hoverTimerId = null;
+            }
+            isHoverOnResizeTriggerRef.value = false;
+        };
+        const { doUpdateHeight, doUpdateWidth } = NDrawer;
+        const handleBodyMousemove = (e) => {
+            var _a, _b;
+            if (isDraggingRef.value) {
+                if (isVertical.value) {
+                    let height = ((_a = bodyRef.value) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+                    const increment = startPosition - e.clientY;
+                    height += props.placement === 'bottom' ? increment : -increment;
+                    doUpdateHeight(height);
+                    startPosition = e.clientY;
+                }
+                else {
+                    let width = ((_b = bodyRef.value) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
+                    const increment = startPosition - e.clientX;
+                    width += props.placement === 'right' ? increment : -increment;
+                    doUpdateWidth(width);
+                    startPosition = e.clientX;
+                }
+            }
+        };
+        const handleBodyMouseup = () => {
+            if (isDraggingRef.value) {
+                startPosition = 0;
+                isDraggingRef.value = false;
+                document.body.style.cursor = memoizedBodyStyleCursor;
+                document.body.removeEventListener('mousemove', handleBodyMousemove);
+                document.body.removeEventListener('mouseup', handleBodyMouseup);
+                document.body.removeEventListener('mouseleave', handleBodyMouseleave);
+            }
+        };
+        const handleBodyMouseleave = handleBodyMouseup;
         watchEffect(() => {
             if (props.show)
                 displayedRef.value = true;
         });
+        watch(() => props.show, (value) => {
+            if (!value) {
+                handleBodyMouseup();
+            }
+        });
+        onBeforeUnmount(() => {
+            handleBodyMouseup();
+        });
         const bodyDirectivesRef = computed(() => {
             const { show } = props;
             const directives = [[vShow, show]];
@@ -92,7 +170,12 @@ export default defineComponent({
                 }[props.placement];
             }),
             handleAfterLeave,
-            bodyDirectives: bodyDirectivesRef
+            bodyDirectives: bodyDirectivesRef,
+            handleMousedownResizeTrigger,
+            handleMouseenterResizeTrigger,
+            handleMouseleaveResizeTrigger,
+            isDragging: isDraggingRef,
+            isHoverOnResizeTrigger: isHoverOnResizeTriggerRef
         };
     },
     render() {
@@ -111,10 +194,22 @@ export default defineComponent({
                             class: [
                                 `${mergedClsPrefix}-drawer`,
                                 `${mergedClsPrefix}-drawer--${this.placement}-placement`,
+                                /**
+                                 * When the mouse is pressed to resize the drawer,
+                                 * disable text selection
+                                 */
+                                this.isDragging &&
+                                    `${mergedClsPrefix}-drawer--unselectable`,
                                 this.nativeScrollbar &&
                                     `${mergedClsPrefix}-drawer--native-scrollbar`
                             ]
                         }), [
+                            this.resizable ? (h("div", { class: [
+                                    `${mergedClsPrefix}-drawer__resize-trigger`,
+                                    (this.isDragging ||
+                                        this.isHoverOnResizeTrigger) &&
+                                        `${mergedClsPrefix}-drawer__resize-trigger--hover`
+                                ], onMouseenter: this.handleMouseenterResizeTrigger, onMouseleave: this.handleMouseleaveResizeTrigger, onMousedown: this.handleMousedownResizeTrigger })) : null,
                             this.nativeScrollbar ? (h("div", { class: `${mergedClsPrefix}-drawer-content-wrapper`, style: this.contentStyle, role: "none" }, $slots)) : (h(NScrollbar, Object.assign({}, this.scrollbarProps, { contentStyle: this.contentStyle, contentClass: `${mergedClsPrefix}-drawer-content-wrapper`, theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar }), $slots))
                         ]), this.bodyDirectives)
                     }))

package/es/drawer/src/DrawerContent.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, PropType } from 'vue';
 import type { ScrollbarProps } from '../../_internal';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const drawerContentProps: {
+export declare const drawerContentProps: {
     title: {
         type: StringConstructor;
     };
@@ -160,6 +160,7 @@ declare const _default: import("vue").DefineComponent<{
             closeColorHover: string;
             closeColorPressed: string;
             closeBorderRadius: string;
+            resizableTriggerColorHover: string;
         };
         peers: {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {

package/es/drawer/src/DrawerContent.js

@@ -2,7 +2,7 @@ import { defineComponent, h, inject } from 'vue';
 import { NBaseClose, NScrollbar } from '../../_internal';
 import { throwError } from '../../_utils';
 import { drawerInjectionKey } from './interface';
-const drawerContentProps = {
+export const drawerContentProps = {
     title: {
         type: String
     },

package/es/drawer/src/interface.d.ts

@@ -8,5 +8,7 @@ export interface DrawerInjection {
     mergedThemeRef: Ref<MergedTheme<DrawerTheme>>;
     mergedClsPrefixRef: Ref<string>;
     doUpdateShow: (show: boolean) => void;
+    doUpdateWidth: (value: number) => void;
+    doUpdateHeight: (value: number) => void;
 }
 export declare const drawerInjectionKey: import("vue").InjectionKey<DrawerInjection>;

package/es/drawer/src/styles/index.cssr.js

@@ -40,9 +40,18 @@ export default c([cB('drawer', `
  background-color: var(--n-color);
  color: var(--n-text-color);
  box-sizing: border-box;
- `, [slideInFromRightTransition(), slideInFromLeftTransition(), slideInFromTopTransition(), slideInFromBottomTransition(), cM('native-scrollbar', [cB('drawer-content-wrapper', `
+ `, [slideInFromRightTransition(), slideInFromLeftTransition(), slideInFromTopTransition(), slideInFromBottomTransition(), cM('unselectable', `
+ user-select: none; 
+ -webkit-user-select: none;
+ `), cM('native-scrollbar', [cB('drawer-content-wrapper', `
  overflow: auto;
  height: 100%;
+ `)]), cE('resize-trigger', `
+ position: absolute;
+ background-color: #0000;
+ transition: background-color .3s var(--n-bezier);
+ `, [cM('hover', `
+ background-color: var(--n-resize-trigger-color-hover);
  `)]), cB('drawer-content-wrapper', `
  box-sizing: border-box;
  `), cB('drawer-content', `
@@ -85,19 +94,47 @@ export default c([cB('drawer', `
  top: 0;
  bottom: 0;
  right: 0;
- `), cM('left-placement', `
+ `, [cE('resize-trigger', `
+ width: 3px;
+ height: 100%;
+ top: 0;
+ left: 0;
+ transform: translateX(-1.5px);
+ cursor: ew-resize;
+ `)]), cM('left-placement', `
  top: 0;
  bottom: 0;
  left: 0;
- `), cM('top-placement', `
+ `, [cE('resize-trigger', `
+ width: 3px;
+ height: 100%;
+ top: 0;
+ right: 0;
+ transform: translateX(1.5px);
+ cursor: ew-resize;
+ `)]), cM('top-placement', `
  top: 0;
  left: 0;
  right: 0;
- `), cM('bottom-placement', `
+ `, [cE('resize-trigger', `
+ width: 100%;
+ height: 3px;
+ bottom: 0;
+ left: 0;
+ transform: translateY(1.5px);
+ cursor: ns-resize;
+ `)]), cM('bottom-placement', `
  left: 0;
  bottom: 0;
  right: 0;
- `)]), c('body', [c('>', [cB('drawer-container', {
+ `, [cE('resize-trigger', `
+ width: 100%;
+ height: 3px;
+ top: 0;
+ left: 0;
+ transform: translateY(-1.5px);
+ cursor: ns-resize;
+ `)])]), c('body', [c('>', [cB('drawer-container', {
   position: 'fixed'
 })])]), cB('drawer-container', `
  position: relative;

package/es/drawer/styles/light.d.ts

@@ -20,6 +20,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     closeColorHover: string;
     closeColorPressed: string;
     closeBorderRadius: string;
+    resizableTriggerColorHover: string;
 };
 export declare type DrawerThemeVars = ReturnType<typeof self>;
 declare const drawerLight: import("../../_mixins").Theme<"Drawer", {
@@ -43,6 +44,7 @@ declare const drawerLight: import("../../_mixins").Theme<"Drawer", {
     closeColorHover: string;
     closeColorPressed: string;
     closeBorderRadius: string;
+    resizableTriggerColorHover: string;
 }, {
     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
         color: string;

package/es/drawer/styles/light.js

@@ -2,7 +2,7 @@ import { commonLight } from '../../_styles/common';
 import { scrollbarLight } from '../../_internal/scrollbar/styles';
 import { createTheme } from '../../_mixins';
 export const self = (vars) => {
-    const { modalColor, textColor1, textColor2, boxShadow3, lineHeight, fontWeightStrong, dividerColor, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, borderRadius } = vars;
+    const { modalColor, textColor1, textColor2, boxShadow3, lineHeight, fontWeightStrong, dividerColor, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, borderRadius, primaryColorHover } = vars;
     return {
         bodyPadding: '16px 24px',
         headerPadding: '16px 24px',
@@ -23,7 +23,8 @@ export const self = (vars) => {
         closeIconSize: '18px',
         closeColorHover,
         closeColorPressed,
-        closeBorderRadius: borderRadius
+        closeBorderRadius: borderRadius,
+        resizableTriggerColorHover: primaryColorHover
     };
 };
 const drawerLight = createTheme({

package/es/dropdown/index.d.ts

@@ -1,3 +1,3 @@
-export { default as NDropdown } from './src/Dropdown';
+export { default as NDropdown, dropdownProps } from './src/Dropdown';
 export type { DropdownProps } from './src/Dropdown';
-export type { DropdownOption, DropdownGroupOption, DropdownDividerOption, DropdownRenderOption, NodeProps as DropdownNodeProps } from './src/interface';
+export type { DropdownOption, DropdownGroupOption, DropdownDividerOption, DropdownRenderOption, NodeProps as DropdownNodeProps, DropdownMenuProps } from './src/interface';