naive-ui 2.30.8 → 2.31.0

package/lib/drawer/src/DrawerBodyWrapper.js

@@ -43,6 +43,7 @@ exports.default = (0, vue_1.defineComponent)({
             type: [Boolean, String],
             required: true
         },
+        resizable: Boolean,
         onClickoutside: Function,
         onAfterLeave: Function,
         onAfterEnter: Function,
@@ -53,10 +54,87 @@ exports.default = (0, vue_1.defineComponent)({
         const bodyRef = (0, vue_1.ref)(null); // used for detached content
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NDrawer = (0, vue_1.inject)(interface_3.drawerInjectionKey);
+        let startPosition = 0;
+        let memoizedBodyStyleCursor = '';
+        let hoverTimerId = null;
+        const isHoverOnResizeTriggerRef = (0, vue_1.ref)(false);
+        const isDraggingRef = (0, vue_1.ref)(false);
+        const isVertical = (0, vue_1.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;
         (0, vue_1.watchEffect)(() => {
             if (props.show)
                 displayedRef.value = true;
         });
+        (0, vue_1.watch)(() => props.show, (value) => {
+            if (!value) {
+                handleBodyMouseup();
+            }
+        });
+        (0, vue_1.onBeforeUnmount)(() => {
+            handleBodyMouseup();
+        });
         const bodyDirectivesRef = (0, vue_1.computed)(() => {
             const { show } = props;
             const directives = [[vue_1.vShow, show]];
@@ -94,7 +172,12 @@ exports.default = (0, vue_1.defineComponent)({
                 }[props.placement];
             }),
             handleAfterLeave,
-            bodyDirectives: bodyDirectivesRef
+            bodyDirectives: bodyDirectivesRef,
+            handleMousedownResizeTrigger,
+            handleMouseenterResizeTrigger,
+            handleMouseleaveResizeTrigger,
+            isDragging: isDraggingRef,
+            isHoverOnResizeTrigger: isHoverOnResizeTriggerRef
         };
     },
     render() {
@@ -113,10 +196,22 @@ exports.default = (0, vue_1.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 ? ((0, vue_1.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 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-content-wrapper`, style: this.contentStyle, role: "none" }, $slots)) : ((0, vue_1.h)(_internal_1.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/lib/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/lib/drawer/src/DrawerContent.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawerContentProps = void 0;
 const vue_1 = require("vue");
 const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const interface_1 = require("./interface");
-const drawerContentProps = {
+exports.drawerContentProps = {
     title: {
         type: String
     },
@@ -18,7 +19,7 @@ const drawerContentProps = {
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'DrawerContent',
-    props: drawerContentProps,
+    props: exports.drawerContentProps,
     setup() {
         const NDrawer = (0, vue_1.inject)(interface_1.drawerInjectionKey, null);
         if (!NDrawer) {

package/lib/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/lib/drawer/src/styles/index.cssr.js

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

package/lib/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/lib/drawer/styles/light.js

@@ -5,7 +5,7 @@ const common_1 = require("../../_styles/common");
 const styles_1 = require("../../_internal/scrollbar/styles");
 const _mixins_1 = require("../../_mixins");
 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',
@@ -26,7 +26,8 @@ const self = (vars) => {
         closeIconSize: '18px',
         closeColorHover,
         closeColorPressed,
-        closeBorderRadius: borderRadius
+        closeBorderRadius: borderRadius,
+        resizableTriggerColorHover: primaryColorHover
     };
 };
 exports.self = self;

package/lib/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';

package/lib/dropdown/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.NDropdown = void 0;
+exports.dropdownProps = exports.NDropdown = void 0;
 var Dropdown_1 = require("./src/Dropdown");
 Object.defineProperty(exports, "NDropdown", { enumerable: true, get: function () { return __importDefault(Dropdown_1).default; } });
+Object.defineProperty(exports, "dropdownProps", { enumerable: true, get: function () { return Dropdown_1.dropdownProps; } });

package/lib/dropdown/src/Dropdown.d.ts

@@ -2,11 +2,12 @@ import { PropType, Ref } from 'vue';
 import { Key, TreeNode } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
 import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import { DropdownMixedOption, OnUpdateValue, OnUpdateValueImpl, RenderLabel, RenderIcon, RenderLabelImpl, RenderIconImpl, RenderOption, NodeProps, RenderOptionImpl } from './interface';
+import { DropdownMixedOption, OnUpdateValue, OnUpdateValueImpl, RenderLabel, RenderIcon, RenderLabelImpl, RenderIconImpl, RenderOption, NodeProps, RenderOptionImpl, DropdownMenuProps } from './interface';
 export interface DropdownInjection {
     renderLabelRef: Ref<RenderLabelImpl | undefined>;
     renderIconRef: Ref<RenderIconImpl | undefined>;
     renderOptionRef: Ref<RenderOptionImpl | undefined>;
+    menuPropsRef: Ref<DropdownMenuProps | undefined>;
     nodePropsRef: Ref<NodeProps | undefined>;
     hoverKeyRef: Ref<Key | null>;
     keyboardKeyRef: Ref<Key | null>;
@@ -20,7 +21,7 @@ export interface DropdownInjection {
     doSelect: OnUpdateValueImpl;
     doUpdateShow: (value: boolean) => void;
 }
-declare const dropdownProps: {
+export declare const dropdownProps: {
     readonly theme: PropType<import("../../_mixins").Theme<"Dropdown", {
         optionHeightSmall: string;
         optionHeightMedium: string;
@@ -253,6 +254,7 @@ declare const dropdownProps: {
         readonly type: PropType<DropdownMixedOption[]>;
         readonly default: () => never[];
     };
+    readonly menuProps: PropType<DropdownMenuProps>;
     readonly showArrow: BooleanConstructor;
     readonly renderLabel: PropType<RenderLabel>;
     readonly renderIcon: PropType<RenderIcon>;
@@ -320,6 +322,7 @@ declare const dropdownProps: {
     readonly scrollable: BooleanConstructor;
     readonly contentStyle: PropType<string | import("vue").CSSProperties>;
     readonly headerStyle: PropType<string | import("vue").CSSProperties>;
+    readonly footerStyle: PropType<string | import("vue").CSSProperties>;
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
@@ -577,6 +580,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<DropdownMixedOption[]>;
         readonly default: () => never[];
     };
+    readonly menuProps: PropType<DropdownMenuProps>;
     readonly showArrow: BooleanConstructor;
     readonly renderLabel: PropType<RenderLabel>;
     readonly renderIcon: PropType<RenderIcon>;
@@ -644,6 +648,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly scrollable: BooleanConstructor;
     readonly contentStyle: PropType<string | import("vue").CSSProperties>;
     readonly headerStyle: PropType<string | import("vue").CSSProperties>;
+    readonly footerStyle: PropType<string | import("vue").CSSProperties>;
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
@@ -855,6 +860,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     tmNodes: import("vue").ComputedRef<TreeNode<import("../..").MenuOption | import("../../menu/src/interface").MenuRenderOption, import("../..").MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>[]>;
     mergedShow: import("vue").ComputedRef<boolean>;
+    handleAfterLeave: () => void;
     doUpdateShow: (value: boolean) => void;
     cssVars: import("vue").ComputedRef<any> | undefined;
     themeClass: Ref<string> | undefined;
@@ -1092,6 +1098,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<DropdownMixedOption[]>;
         readonly default: () => never[];
     };
+    readonly menuProps: PropType<DropdownMenuProps>;
     readonly showArrow: BooleanConstructor;
     readonly renderLabel: PropType<RenderLabel>;
     readonly renderIcon: PropType<RenderIcon>;
@@ -1159,6 +1166,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly scrollable: BooleanConstructor;
     readonly contentStyle: PropType<string | import("vue").CSSProperties>;
     readonly headerStyle: PropType<string | import("vue").CSSProperties>;
+    readonly footerStyle: PropType<string | import("vue").CSSProperties>;
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;

package/lib/dropdown/src/Dropdown.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.dropdownProps = void 0;
 const vue_1 = require("vue");
 const treemate_1 = require("treemate");
 const vooks_1 = require("vooks");
@@ -37,6 +38,7 @@ const dropdownBaseProps = {
         type: Array,
         default: () => []
     },
+    menuProps: Function,
     showArrow: Boolean,
     renderLabel: Function,
     renderIcon: Function,
@@ -58,11 +60,11 @@ const dropdownBaseProps = {
     value: [String, Number]
 };
 const popoverPropKeys = Object.keys(Popover_1.popoverBaseProps);
-const dropdownProps = Object.assign(Object.assign(Object.assign({}, Popover_1.popoverBaseProps), dropdownBaseProps), _mixins_1.useTheme.props);
+exports.dropdownProps = Object.assign(Object.assign(Object.assign({}, Popover_1.popoverBaseProps), dropdownBaseProps), _mixins_1.useTheme.props);
 exports.default = (0, vue_1.defineComponent)({
     name: 'Dropdown',
     inheritAttrs: false,
-    props: dropdownProps,
+    props: exports.dropdownProps,
     setup(props) {
         const uncontrolledShowRef = (0, vue_1.ref)(false);
         const mergedShowRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'show'), uncontrolledShowRef);
@@ -138,13 +140,15 @@ exports.default = (0, vue_1.defineComponent)({
             mergedShowRef: mergedShowRef,
             nodePropsRef: (0, vue_1.toRef)(props, 'nodeProps'),
             renderOptionRef: (0, vue_1.toRef)(props, 'renderOption'),
+            menuPropsRef: (0, vue_1.toRef)(props, 'menuProps'),
             doSelect,
             doUpdateShow
         });
         // watch
         (0, vue_1.watch)(mergedShowRef, (value) => {
-            if (!value)
+            if (!props.animated && !value) {
                 clearPendingState();
+            }
         });
         // methods
         function doSelect(key, node) {
@@ -291,6 +295,11 @@ exports.default = (0, vue_1.defineComponent)({
             // show
             mergedShow: mergedShowRef,
             // methods
+            handleAfterLeave: () => {
+                if (!props.animated)
+                    return;
+                clearPendingState();
+            },
             doUpdateShow,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
@@ -300,8 +309,9 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         const renderPopoverBody = (className, ref, style, onMouseenter, onMouseleave) => {
             var _a;
-            const { mergedClsPrefix } = this;
+            const { mergedClsPrefix, menuProps } = this;
             (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+            const menuNodeProps = (menuProps === null || menuProps === void 0 ? void 0 : menuProps(undefined, this.tmNodes.map((v) => v.rawNode))) || {};
             const dropdownProps = {
                 ref: (0, _utils_1.createRefSetter)(ref),
                 class: [className, `${mergedClsPrefix}-dropdown`, this.themeClass],
@@ -310,16 +320,18 @@ exports.default = (0, vue_1.defineComponent)({
                 style: [style, this.cssVars],
                 showArrow: this.showArrow,
                 arrowStyle: this.arrowStyle,
+                scrollable: this.scrollable,
                 onMouseenter,
                 onMouseleave
             };
-            return (0, vue_1.h)(DropdownMenu_1.default, (0, vue_1.mergeProps)(this.$attrs, dropdownProps));
+            return (0, vue_1.h)(DropdownMenu_1.default, (0, vue_1.mergeProps)(this.$attrs, dropdownProps, menuNodeProps));
         };
         const { mergedTheme } = this;
         const popoverProps = {
             show: this.mergedShow,
             theme: mergedTheme.peers.Popover,
             themeOverrides: mergedTheme.peerOverrides.Popover,
+            internalOnAfterLeave: this.handleAfterLeave,
             internalRenderBody: renderPopoverBody,
             onUpdateShow: this.doUpdateShow,
             'onUpdate:show': undefined

package/lib/dropdown/src/DropdownMenu.d.ts

@@ -5,6 +5,7 @@ export interface NDropdownMenuInjection {
     hasSubmenuRef: Ref<boolean>;
 }
 declare const _default: import("vue").DefineComponent<{
+    scrollable: BooleanConstructor;
     showArrow: BooleanConstructor;
     arrowStyle: PropType<string | CSSProperties>;
     clsPrefix: {
@@ -22,6 +23,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     bodyRef: Ref<HTMLElement | null>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    scrollable: BooleanConstructor;
     showArrow: BooleanConstructor;
     arrowStyle: PropType<string | CSSProperties>;
     clsPrefix: {
@@ -37,6 +39,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
 }>>, {
+    scrollable: boolean;
     showArrow: boolean;
     parentKey: string | number;
     tmNodes: TreeNode<import("../..").MenuOption, import("../..").MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>[];

package/lib/dropdown/src/DropdownMenu.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const PopoverBody_1 = require("../../popover/src/PopoverBody");
+const scrollbar_1 = require("../../_internal/scrollbar");
 const DropdownDivider_1 = __importDefault(require("./DropdownDivider"));
 // eslint-disable-next-line import/no-cycle
 const DropdownGroup_1 = __importDefault(require("./DropdownGroup"));
@@ -19,6 +20,7 @@ const interface_3 = require("../../popover/src/interface");
 exports.default = (0, vue_1.defineComponent)({
     name: 'DropdownMenu',
     props: {
+        scrollable: Boolean,
         showArrow: Boolean,
         arrowStyle: [String, Object],
         clsPrefix: {
@@ -70,21 +72,27 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { parentKey, clsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: `${clsPrefix}-dropdown-menu`, ref: "bodyRef" },
-            this.tmNodes.map((tmNode) => {
-                const { rawNode } = tmNode;
-                if ((0, utils_1.isRenderNode)(rawNode)) {
-                    return ((0, vue_1.h)(DropdownRenderOption_1.default, { tmNode: tmNode, key: tmNode.key }));
-                }
-                if ((0, utils_1.isDividerNode)(rawNode)) {
-                    return (0, vue_1.h)(DropdownDivider_1.default, { clsPrefix: clsPrefix, key: tmNode.key });
-                }
-                if ((0, utils_1.isGroupNode)(rawNode)) {
-                    return ((0, vue_1.h)(DropdownGroup_1.default, { clsPrefix: clsPrefix, tmNode: tmNode, parentKey: parentKey, key: tmNode.key }));
-                }
-                return ((0, vue_1.h)(DropdownOption_1.default, { clsPrefix: clsPrefix, tmNode: tmNode, parentKey: parentKey, key: tmNode.key, props: rawNode.props }));
-            }),
+        const { parentKey, clsPrefix, scrollable } = this;
+        const menuOptionsNode = this.tmNodes.map((tmNode) => {
+            const { rawNode } = tmNode;
+            if ((0, utils_1.isRenderNode)(rawNode)) {
+                return ((0, vue_1.h)(DropdownRenderOption_1.default, { tmNode: tmNode, key: tmNode.key }));
+            }
+            if ((0, utils_1.isDividerNode)(rawNode)) {
+                return (0, vue_1.h)(DropdownDivider_1.default, { clsPrefix: clsPrefix, key: tmNode.key });
+            }
+            if ((0, utils_1.isGroupNode)(rawNode)) {
+                return ((0, vue_1.h)(DropdownGroup_1.default, { clsPrefix: clsPrefix, tmNode: tmNode, parentKey: parentKey, key: tmNode.key }));
+            }
+            return ((0, vue_1.h)(DropdownOption_1.default, { clsPrefix: clsPrefix, tmNode: tmNode, parentKey: parentKey, key: tmNode.key, props: rawNode.props, scrollable: scrollable }));
+        });
+        return ((0, vue_1.h)("div", { class: [
+                `${clsPrefix}-dropdown-menu`,
+                scrollable && `${clsPrefix}-dropdown-menu--scrollable`
+            ], ref: "bodyRef" },
+            scrollable ? ((0, vue_1.h)(scrollbar_1.NxScrollbar, { contentClass: `${clsPrefix}-dropdown-menu__content` }, {
+                default: () => menuOptionsNode
+            })) : (menuOptionsNode),
             this.showArrow
                 ? (0, PopoverBody_1.renderArrow)({
                     clsPrefix,

package/lib/dropdown/src/DropdownOption.d.ts

@@ -22,12 +22,15 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     props: PropType<HTMLAttributes>;
+    scrollable: BooleanConstructor;
 }, {
     labelField: Ref<string>;
     renderLabel: Ref<import("./interface").RenderLabelImpl | undefined>;
     renderIcon: Ref<import("./interface").RenderIconImpl | undefined>;
     siblingHasIcon: Ref<boolean>;
     siblingHasSubmenu: Ref<boolean>;
+    menuProps: Ref<import("./interface").DropdownMenuProps | undefined>;
+    popoverBody: Ref<HTMLElement | null>;
     animated: Ref<boolean>;
     mergedShowSubmenu: import("vue").ComputedRef<boolean>;
     rawNode: import("vue").ComputedRef<import("../..").MenuOption | import("../..").MenuGroupOption | import("../../menu/src/interface").MenuIgnoredOption>;
@@ -62,8 +65,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     props: PropType<HTMLAttributes>;
+    scrollable: BooleanConstructor;
 }>>, {
     placement: FollowerPlacement;
+    scrollable: boolean;
     parentKey: string | number | null;
 }>;
 export default _default;