naive-ui 2.34.4 → 2.36.0

package/lib/menu/src/Menu.d.ts

@@ -1,6 +1,6 @@
 import { type PropType, type ExtractPropTypes, type VNodeChild } from 'vue';
 import { type Key } from 'treemate';
-import type { FollowerPlacement } from 'vueuc';
+import { type FollowerPlacement } from 'vueuc';
 import type { DropdownProps } from '../../dropdown';
 import type { MaybeArray } from '../../_utils';
 import type { MenuOption, MenuGroupOption, MenuIgnoredOption, MenuMixedOption, OnUpdateValue, OnUpdateKeys, MenuNodeProps } from './interface';
@@ -79,16 +79,17 @@ export declare const menuProps: {
     readonly dropdownProps: PropType<DropdownProps>;
     readonly accordion: BooleanConstructor;
     readonly nodeProps: PropType<MenuNodeProps>;
+    readonly dropdownPlacement: {
+        readonly type: PropType<FollowerPlacement>;
+        readonly default: "bottom";
+    };
+    readonly responsive: BooleanConstructor;
     readonly items: PropType<(MenuOption | MenuGroupOption)[]>;
     readonly onOpenNamesChange: PropType<MaybeArray<OnUpdateKeys>>;
     readonly onSelect: PropType<MaybeArray<OnUpdateValue>>;
     readonly onExpandedNamesChange: PropType<MaybeArray<OnUpdateKeys>>;
     readonly expandedNames: PropType<Key[]>;
     readonly defaultExpandedNames: PropType<Key[]>;
-    readonly dropdownPlacement: {
-        readonly type: PropType<FollowerPlacement>;
-        readonly default: "bottom";
-    };
     readonly theme: PropType<import("../../_mixins").Theme<"Menu", {
         itemColorHoverInverted: string;
         itemColorActiveInverted: string;
@@ -689,16 +690,17 @@ declare const _default: import("vue").DefineComponent<{
     readonly dropdownProps: PropType<DropdownProps>;
     readonly accordion: BooleanConstructor;
     readonly nodeProps: PropType<MenuNodeProps>;
+    readonly dropdownPlacement: {
+        readonly type: PropType<FollowerPlacement>;
+        readonly default: "bottom";
+    };
+    readonly responsive: BooleanConstructor;
     readonly items: PropType<(MenuOption | MenuGroupOption)[]>;
     readonly onOpenNamesChange: PropType<MaybeArray<OnUpdateKeys>>;
     readonly onSelect: PropType<MaybeArray<OnUpdateValue>>;
     readonly onExpandedNamesChange: PropType<MaybeArray<OnUpdateKeys>>;
     readonly expandedNames: PropType<Key[]>;
     readonly defaultExpandedNames: PropType<Key[]>;
-    readonly dropdownPlacement: {
-        readonly type: PropType<FollowerPlacement>;
-        readonly default: "bottom";
-    };
     readonly theme: PropType<import("../../_mixins").Theme<"Menu", {
         itemColorHoverInverted: string;
         itemColorActiveInverted: string;
@@ -1222,7 +1224,7 @@ declare const _default: import("vue").DefineComponent<{
         }>;
     }>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     controlledExpandedKeys: import("vue").ComputedRef<Key[] | undefined>;
     uncontrolledExpanededKeys: import("vue").Ref<Key[]>;
     mergedExpandedKeys: import("vue").ComputedRef<Key[]>;
@@ -1553,8 +1555,21 @@ declare const _default: import("vue").DefineComponent<{
     mergedCollapsed: import("vue").ComputedRef<boolean>;
     cssVars: import("vue").ComputedRef<any> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
+    overflowRef: import("vue").Ref<{
+        sync: (options: {
+            showAllItemsBeforeCalculate: boolean;
+        }) => void;
+    } | null>;
+    counterRef: import("vue").Ref<HTMLElement | null>;
+    updateCounter: () => void;
+    onResize: () => void;
+    onUpdateOverflow: (overflow: boolean) => void;
+    onUpdateCount: (count: number) => void;
+    renderCounter: () => VNodeChild;
+    getCounter: () => HTMLElement | null;
     onRender: (() => void) | undefined;
     showOption: (key?: import("./interface").Key | undefined) => void;
+    deriveResponsiveState: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     readonly options: {
         readonly type: PropType<MenuMixedOption[]>;
@@ -1630,16 +1645,17 @@ declare const _default: import("vue").DefineComponent<{
     readonly dropdownProps: PropType<DropdownProps>;
     readonly accordion: BooleanConstructor;
     readonly nodeProps: PropType<MenuNodeProps>;
+    readonly dropdownPlacement: {
+        readonly type: PropType<FollowerPlacement>;
+        readonly default: "bottom";
+    };
+    readonly responsive: BooleanConstructor;
     readonly items: PropType<(MenuOption | MenuGroupOption)[]>;
     readonly onOpenNamesChange: PropType<MaybeArray<OnUpdateKeys>>;
     readonly onSelect: PropType<MaybeArray<OnUpdateValue>>;
     readonly onExpandedNamesChange: PropType<MaybeArray<OnUpdateKeys>>;
     readonly expandedNames: PropType<Key[]>;
     readonly defaultExpandedNames: PropType<Key[]>;
-    readonly dropdownPlacement: {
-        readonly type: PropType<FollowerPlacement>;
-        readonly default: "bottom";
-    };
     readonly theme: PropType<import("../../_mixins").Theme<"Menu", {
         itemColorHoverInverted: string;
         itemColorActiveInverted: string;
@@ -2170,6 +2186,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly iconSize: number;
     readonly keyField: string;
     readonly labelField: string;
+    readonly responsive: boolean;
     readonly defaultValue: Key | null;
     readonly childrenField: string;
     readonly defaultExpandAll: boolean;
@@ -2182,5 +2199,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly collapsedIconSize: number;
     readonly watchProps: ("defaultValue" | "defaultExpandedKeys")[];
     readonly dropdownPlacement: FollowerPlacement;
-}>;
+}, {}>;
 export default _default;

package/lib/menu/src/Menu.js

@@ -7,6 +7,8 @@ exports.menuProps = void 0;
 const vue_1 = require("vue");
 const treemate_1 = require("treemate");
 const vooks_1 = require("vooks");
+const vueuc_1 = require("vueuc");
+const seemly_1 = require("seemly");
 const interface_1 = require("../../layout/src/interface");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
@@ -14,6 +16,7 @@ const utils_1 = require("./utils");
 const styles_1 = require("../styles");
 const useCheckDeprecated_1 = require("./useCheckDeprecated");
 const context_1 = require("./context");
+const Submenu_1 = require("./Submenu");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.menuProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { options: {
         type: Array,
@@ -57,12 +60,12 @@ exports.menuProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, disabled: Boolean, show: {
         type: Boolean,
         default: true
-    }, inverted: Boolean, 'onUpdate:expandedKeys': [Function, Array], onUpdateExpandedKeys: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], expandIcon: Function, renderIcon: Function, renderLabel: Function, renderExtra: Function, dropdownProps: Object, accordion: Boolean, nodeProps: Function, 
-    // deprecated
-    items: Array, onOpenNamesChange: [Function, Array], onSelect: [Function, Array], onExpandedNamesChange: [Function, Array], expandedNames: Array, defaultExpandedNames: Array, dropdownPlacement: {
+    }, inverted: Boolean, 'onUpdate:expandedKeys': [Function, Array], onUpdateExpandedKeys: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], expandIcon: Function, renderIcon: Function, renderLabel: Function, renderExtra: Function, dropdownProps: Object, accordion: Boolean, nodeProps: Function, dropdownPlacement: {
         type: String,
         default: 'bottom'
-    } });
+    }, responsive: Boolean, 
+    // deprecated
+    items: Array, onOpenNamesChange: [Function, Array], onSelect: [Function, Array], onExpandedNamesChange: [Function, Array], expandedNames: Array, defaultExpandedNames: Array });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Menu',
     props: exports.menuProps,
@@ -356,6 +359,76 @@ exports.default = (0, vue_1.defineComponent)({
         const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('menu', (0, vue_1.computed)(() => (props.inverted ? 'a' : 'b')), cssVarsRef, props)
             : undefined;
+        const ellipsisNodeId = (0, seemly_1.createId)();
+        const overflowRef = (0, vue_1.ref)(null);
+        const counterRef = (0, vue_1.ref)(null);
+        let isFirstResize = true;
+        const onResize = () => {
+            var _a;
+            if (isFirstResize) {
+                isFirstResize = false;
+            }
+            else {
+                (_a = overflowRef.value) === null || _a === void 0 ? void 0 : _a.sync({
+                    showAllItemsBeforeCalculate: true
+                });
+            }
+        };
+        function getCounter() {
+            return document.getElementById(ellipsisNodeId);
+        }
+        const ellipsisFromIndexRef = (0, vue_1.ref)(-1);
+        function onUpdateCount(count) {
+            ellipsisFromIndexRef.value = props.options.length - count;
+        }
+        function onUpdateOverflow(overflow) {
+            if (!overflow) {
+                ellipsisFromIndexRef.value = -1;
+            }
+        }
+        const ellipsisOptionRef = (0, vue_1.computed)(() => {
+            const ellipsisFromIndex = ellipsisFromIndexRef.value;
+            const option = {
+                children: ellipsisFromIndex === -1 ? [] : props.options.slice(ellipsisFromIndex)
+            };
+            return option;
+        });
+        const ellipsisTreeMateRef = (0, vue_1.computed)(() => {
+            const { childrenField, disabledField, keyField } = props;
+            return (0, treemate_1.createTreeMate)([ellipsisOptionRef.value], {
+                getIgnored(node) {
+                    return (0, utils_1.isIgnoredNode)(node);
+                },
+                getChildren(node) {
+                    return node[childrenField];
+                },
+                getDisabled(node) {
+                    return node[disabledField];
+                },
+                getKey(node) {
+                    var _a;
+                    return (_a = node[keyField]) !== null && _a !== void 0 ? _a : node.name;
+                }
+            });
+        });
+        const emptyTmNodeRef = (0, vue_1.computed)(() => {
+            return (0, treemate_1.createTreeMate)([
+                {}
+            ]).treeNodes[0];
+        });
+        function renderCounter() {
+            var _a;
+            if (ellipsisFromIndexRef.value === -1) {
+                // Only a placeholder
+                return ((0, vue_1.h)(Submenu_1.NSubmenu, { root: true, level: 0, key: "__ellpisisGroupPlaceholder__", internalKey: "__ellpisisGroupPlaceholder__", title: "\u00B7\u00B7\u00B7", tmNode: emptyTmNodeRef.value, domId: ellipsisNodeId, isEllipsisPlaceholder: true }));
+            }
+            const tmNode = ellipsisTreeMateRef.value.treeNodes[0];
+            const activePath = activePathRef.value;
+            const childActive = !!((_a = tmNode.children) === null || _a === void 0 ? void 0 : _a.some((tmNode) => {
+                return activePath.includes(tmNode.key);
+            }));
+            return ((0, vue_1.h)(Submenu_1.NSubmenu, { level: 0, root: true, key: "__ellpisisGroup__", internalKey: "__ellpisisGroup__", title: "\u00B7\u00B7\u00B7", virtualChildActive: childActive, tmNode: tmNode, domId: ellipsisNodeId, rawNodes: tmNode.rawNode.children || [], tmNodes: tmNode.children || [], isEllipsisPlaceholder: true }));
+        }
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             controlledExpandedKeys: controlledExpandedKeysRef,
@@ -369,18 +442,39 @@ exports.default = (0, vue_1.defineComponent)({
             mergedCollapsed: mergedCollapsedRef,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            overflowRef,
+            counterRef,
+            updateCounter: () => { },
+            onResize,
+            onUpdateOverflow,
+            onUpdateCount,
+            renderCounter,
+            getCounter,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
-            showOption
+            showOption,
+            deriveResponsiveState: onResize
         };
     },
     render() {
         const { mergedClsPrefix, mode, themeClass, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
-        return ((0, vue_1.h)("div", { role: mode === 'horizontal' ? 'menubar' : 'menu', class: [
+        const renderMenuItemNodes = () => this.tmNodes.map((tmNode) => (0, utils_1.itemRenderer)(tmNode, this.$props));
+        const horizontal = mode === 'horizontal';
+        const finalResponsive = horizontal && this.responsive;
+        const renderMainNode = () => ((0, vue_1.h)("div", { role: mode === 'horizontal' ? 'menubar' : 'menu', class: [
                 `${mergedClsPrefix}-menu`,
                 themeClass,
                 `${mergedClsPrefix}-menu--${mode}`,
+                finalResponsive && `${mergedClsPrefix}-menu--responsive`,
                 this.mergedCollapsed && `${mergedClsPrefix}-menu--collapsed`
-            ], style: this.cssVars }, this.tmNodes.map((tmNode) => (0, utils_1.itemRenderer)(tmNode, this.$props))));
+            ], style: this.cssVars }, finalResponsive ? ((0, vue_1.h)(vueuc_1.VOverflow, { ref: "overflowRef", onUpdateOverflow: this.onUpdateOverflow, getCounter: this.getCounter, onUpdateCount: this.onUpdateCount, updateCounter: this.updateCounter, style: {
+                width: '100%',
+                display: 'flex',
+                overflow: 'hidden'
+            } }, {
+            default: renderMenuItemNodes,
+            counter: this.renderCounter
+        })) : (renderMenuItemNodes())));
+        return finalResponsive ? ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.onResize }, { default: renderMainNode })) : (renderMainNode());
     }
 });

package/lib/menu/src/MenuDivider.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/menu/src/MenuOption.d.ts

@@ -397,4 +397,4 @@ export declare const NMenuOption: import("vue").DefineComponent<{
     readonly root: boolean;
     readonly disabled: boolean;
     readonly isGroup: boolean;
-}>;
+}, {}>;

package/lib/menu/src/MenuOptionContent.d.ts

@@ -32,6 +32,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TmNode>;
         required: true;
     };
+    isEllipsisPlaceholder: BooleanConstructor;
 }, {
     menuProps: import("./Menu").MenuSetupProps;
     style: import("vue").ComputedRef<{
@@ -75,6 +76,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TmNode>;
         required: true;
     };
+    isEllipsisPlaceholder: BooleanConstructor;
 }>>, {
     disabled: boolean;
     selected: boolean;
@@ -82,5 +84,6 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     childActive: boolean;
     collapsed: boolean;
-}>;
+    isEllipsisPlaceholder: boolean;
+}, {}>;
 export default _default;

package/lib/menu/src/MenuOptionContent.js

@@ -38,7 +38,8 @@ exports.default = (0, vue_1.defineComponent)({
         tmNode: {
             type: Object,
             required: true
-        }
+        },
+        isEllipsisPlaceholder: Boolean
     },
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -78,7 +79,11 @@ exports.default = (0, vue_1.defineComponent)({
             ], style: this.style },
             icon && ((0, vue_1.h)("div", { class: `${clsPrefix}-menu-item-content__icon`, style: this.iconStyle, role: "none" }, [icon])),
             (0, vue_1.h)("div", { class: `${clsPrefix}-menu-item-content-header`, role: "none" },
-                renderLabel ? renderLabel(tmNode.rawNode) : (0, _utils_1.render)(this.title),
+                this.isEllipsisPlaceholder
+                    ? this.title
+                    : renderLabel
+                        ? renderLabel(tmNode.rawNode)
+                        : (0, _utils_1.render)(this.title),
                 this.extra || renderExtra ? ((0, vue_1.h)("span", { class: `${clsPrefix}-menu-item-content-header__extra` },
                     ' ',
                     renderExtra ? renderExtra(tmNode.rawNode) : (0, _utils_1.render)(this.extra))) : null),

package/lib/menu/src/MenuOptionGroup.d.ts

@@ -67,4 +67,4 @@ export declare const NMenuOptionGroup: import("vue").DefineComponent<{
 }>>, {
     readonly root: boolean;
     readonly isGroup: boolean;
-}>;
+}, {}>;

package/lib/menu/src/Submenu.d.ts

@@ -13,12 +13,15 @@ export declare const submenuProps: {
         readonly type: PropType<TmNode>;
         readonly required: true;
     };
-    readonly disabled: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly disabled: BooleanConstructor;
     readonly icon: PropType<() => VNodeChild>;
     readonly onClick: PropType<() => void>;
+    readonly domId: StringConstructor;
+    readonly virtualChildActive: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly isEllipsisPlaceholder: BooleanConstructor;
     readonly internalKey: {
         readonly type: PropType<import("treemate").Key>;
         readonly required: true;
@@ -45,12 +48,15 @@ export declare const NSubmenu: import("vue").DefineComponent<{
         readonly type: PropType<TmNode>;
         readonly required: true;
     };
-    readonly disabled: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly disabled: BooleanConstructor;
     readonly icon: PropType<() => VNodeChild>;
     readonly onClick: PropType<() => void>;
+    readonly domId: StringConstructor;
+    readonly virtualChildActive: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly isEllipsisPlaceholder: BooleanConstructor;
     readonly internalKey: {
         readonly type: PropType<import("treemate").Key>;
         readonly required: true;
@@ -415,12 +421,15 @@ export declare const NSubmenu: import("vue").DefineComponent<{
         readonly type: PropType<TmNode>;
         readonly required: true;
     };
-    readonly disabled: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly disabled: BooleanConstructor;
     readonly icon: PropType<() => VNodeChild>;
     readonly onClick: PropType<() => void>;
+    readonly domId: StringConstructor;
+    readonly virtualChildActive: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly isEllipsisPlaceholder: BooleanConstructor;
     readonly internalKey: {
         readonly type: PropType<import("treemate").Key>;
         readonly required: true;
@@ -438,5 +447,7 @@ export declare const NSubmenu: import("vue").DefineComponent<{
     readonly disabled: boolean;
     readonly isGroup: boolean;
     readonly tmNodes: TmNode[];
+    readonly isEllipsisPlaceholder: boolean;
     readonly rawNodes: MenuMixedOption[];
-}>;
+    readonly virtualChildActive: boolean;
+}, {}>;

package/lib/menu/src/Submenu.js

@@ -23,10 +23,10 @@ exports.submenuProps = Object.assign(Object.assign({}, use_menu_child_props_1.us
     }, tmNode: {
         type: Object,
         required: true
-    }, disabled: {
+    }, disabled: Boolean, icon: Function, onClick: Function, domId: String, virtualChildActive: {
         type: Boolean,
-        default: false
-    }, icon: Function, onClick: Function });
+        default: undefined
+    }, isEllipsisPlaceholder: Boolean });
 exports.NSubmenu = (0, vue_1.defineComponent)({
     name: 'Submenu',
     props: exports.submenuProps,
@@ -80,7 +80,8 @@ exports.NSubmenu = (0, vue_1.defineComponent)({
             mergedDisabled: mergedDisabledRef,
             mergedValue: NMenu.mergedValueRef,
             childActive: (0, vooks_1.useMemo)(() => {
-                return NMenu.activePathRef.value.includes(props.internalKey);
+                var _a;
+                return ((_a = props.virtualChildActive) !== null && _a !== void 0 ? _a : NMenu.activePathRef.value.includes(props.internalKey));
             }),
             collapsed: (0, vue_1.computed)(() => {
                 if (menuProps.mode === 'horizontal')
@@ -102,10 +103,10 @@ exports.NSubmenu = (0, vue_1.defineComponent)({
         var _a;
         const { mergedClsPrefix, menuProps: { renderIcon, renderLabel } } = this;
         const createSubmenuItem = () => {
-            const { isHorizontal, paddingLeft, collapsed, mergedDisabled, maxIconSize, activeIconSize, title, childActive, icon, handleClick, menuProps: { nodeProps }, dropdownShow, iconMarginRight, tmNode, mergedClsPrefix } = this;
+            const { isHorizontal, paddingLeft, collapsed, mergedDisabled, maxIconSize, activeIconSize, title, childActive, icon, handleClick, menuProps: { nodeProps }, dropdownShow, iconMarginRight, tmNode, mergedClsPrefix, isEllipsisPlaceholder, extra } = this;
             const attrs = nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps(tmNode.rawNode);
             return ((0, vue_1.h)("div", Object.assign({}, attrs, { class: [`${mergedClsPrefix}-menu-item`, attrs === null || attrs === void 0 ? void 0 : attrs.class], role: "menuitem" }),
-                (0, vue_1.h)(MenuOptionContent_1.default, { tmNode: tmNode, paddingLeft: paddingLeft, collapsed: collapsed, disabled: mergedDisabled, iconMarginRight: iconMarginRight, maxIconSize: maxIconSize, activeIconSize: activeIconSize, title: title, extra: this.extra, showArrow: !isHorizontal, childActive: childActive, clsPrefix: mergedClsPrefix, icon: icon, hover: dropdownShow, onClick: handleClick })));
+                (0, vue_1.h)(MenuOptionContent_1.default, { tmNode: tmNode, paddingLeft: paddingLeft, collapsed: collapsed, disabled: mergedDisabled, iconMarginRight: iconMarginRight, maxIconSize: maxIconSize, activeIconSize: activeIconSize, title: title, extra: extra, showArrow: !isHorizontal, childActive: childActive, clsPrefix: mergedClsPrefix, icon: icon, hover: dropdownShow, onClick: handleClick, isEllipsisPlaceholder: isEllipsisPlaceholder })));
         };
         const createSubmenuChildren = () => {
             return ((0, vue_1.h)(_internal_1.NFadeInExpandTransition, null, {
@@ -119,10 +120,10 @@ exports.NSubmenu = (0, vue_1.defineComponent)({
                 fontSizeLarge: '14px',
                 optionIconSizeLarge: '18px'
             }, value: this.mergedValue, disabled: !this.dropdownEnabled, placement: this.dropdownPlacement, keyField: this.menuProps.keyField, labelField: this.menuProps.labelField, childrenField: this.menuProps.childrenField, onUpdateShow: this.handlePopoverShowChange, options: this.rawNodes, onSelect: this.doSelect, inverted: this.inverted, renderIcon: renderIcon, renderLabel: renderLabel }), {
-            default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed },
+            default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed, id: this.domId },
                 createSubmenuItem(),
                 this.isHorizontal ? null : createSubmenuChildren()))
-        })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed },
+        })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed, id: this.domId },
             createSubmenuItem(),
             createSubmenuChildren()));
     }

package/lib/menu/src/context.d.ts

@@ -1,4 +1,4 @@
 import type { MenuInjection, MenuOptionGroupInjection, SubmenuInjection } from './use-menu-child';
 export declare const menuInjectionKey: import("vue").InjectionKey<MenuInjection>;
-export declare const submenuInjectionKey: import("vue").InjectionKey<SubmenuInjection>;
-export declare const menuItemGroupInjectionKey: import("vue").InjectionKey<MenuOptionGroupInjection>;
+export declare const submenuInjectionKey: import("vue").InjectionKey<SubmenuInjection | null>;
+export declare const menuItemGroupInjectionKey: import("vue").InjectionKey<MenuOptionGroupInjection | null>;

package/lib/menu/src/interface.d.ts

@@ -55,4 +55,5 @@ export type OnUpdateKeysImpl = (keys: string[] | number[] | Array<string | numbe
 export type MenuNodeProps = (option: MenuOption | MenuGroupOption) => HTMLAttributes & Record<string, string | number | undefined>;
 export interface MenuInst {
     showOption: (key?: Key) => void;
+    deriveResponsiveState: () => void;
 }

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

@@ -77,7 +77,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  font-size: var(--n-font-size);
  padding-bottom: 6px;
  `, [(0, cssr_1.cM)('horizontal', `
- display: inline-flex;
+ max-width: 100%;
+ width: 100%;
+ display: flex;
+ overflow: hidden;
  padding-bottom: 0;
  `, [(0, cssr_1.cB)('submenu', 'margin: 0;'), (0, cssr_1.cB)('menu-item', 'margin: 0;'), (0, cssr_1.cB)('menu-item-content', `
  padding: 0 20px;
@@ -98,7 +101,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  color: var(--n-item-text-color-active-hover-horizontal);
  `, [(0, cssr_1.c)('a', 'color: var(--n-item-text-color-active-hover-horizontal);'), (0, cssr_1.cE)('extra', 'color: var(--n-item-text-color-active-hover-horizontal);')])])]), (0, cssr_1.cM)('child-active', [hoverStyle(null, [(0, cssr_1.cE)('icon', 'color: var(--n-item-icon-color-child-active-hover-horizontal);'), (0, cssr_1.cB)('menu-item-content-header', `
  color: var(--n-item-text-color-child-active-hover-horizontal);
- `, [(0, cssr_1.c)('a', 'color: var(--n-item-text-color-child-active-hover-horizontal);'), (0, cssr_1.cE)('extra', 'color: var(--n-item-text-color-child-active-hover-horizontal);')])])]), hoverStyle('border-bottom: 2px solid var(--n-border-color-horizontal);', horizontalHoverStyleChildren)]), (0, cssr_1.cB)('menu-item-content-header', [(0, cssr_1.c)('a', 'color: var(--n-item-text-color-horizontal);')])])]), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cB)('menu-item-content', [(0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', `
+ `, [(0, cssr_1.c)('a', 'color: var(--n-item-text-color-child-active-hover-horizontal);'), (0, cssr_1.cE)('extra', 'color: var(--n-item-text-color-child-active-hover-horizontal);')])])]), hoverStyle('border-bottom: 2px solid var(--n-border-color-horizontal);', horizontalHoverStyleChildren)]), (0, cssr_1.cB)('menu-item-content-header', [(0, cssr_1.c)('a', 'color: var(--n-item-text-color-horizontal);')])])]), (0, cssr_1.cNotM)('responsive', [(0, cssr_1.cB)('menu-item-content-header', `
+ overflow: hidden;
+ text-overflow: ellipsis;
+ `)]), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cB)('menu-item-content', [(0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', `
  background-color: var(--n-item-color-active-collapsed) !important;
  `)]), (0, cssr_1.cB)('menu-item-content-header', 'opacity: 0;'), (0, cssr_1.cE)('arrow', 'opacity: 0;'), (0, cssr_1.cE)('icon', 'color: var(--n-item-icon-color-collapsed);')])]), (0, cssr_1.cB)('menu-item', `
  height: var(--n-item-height);
@@ -178,8 +184,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  opacity .3s var(--n-bezier);
  opacity: 1;
  white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
  color: var(--n-item-text-color);
  `, [(0, cssr_1.c)('a', `
  outline: none;

package/lib/menu/src/use-menu-child.js

@@ -46,14 +46,14 @@ function useMenuChild(props) {
             }
             return mergedRootIndent;
         }
-        if (NMenuOptionGroup) {
+        if (NMenuOptionGroup &&
+            typeof NMenuOptionGroup.paddingLeftRef.value === 'number') {
             return indent / 2 + NMenuOptionGroup.paddingLeftRef.value;
         }
-        if (NSubmenu) {
-            return ((isGroup ? indent / 2 : indent) +
-                NSubmenu.paddingLeftRef.value);
+        if (NSubmenu && typeof NSubmenu.paddingLeftRef.value === 'number') {
+            return (isGroup ? indent / 2 : indent) + NSubmenu.paddingLeftRef.value;
         }
-        return undefined;
+        return 0;
     });
     const iconMarginRightRef = (0, vue_1.computed)(() => {
         const { collapsedWidth, indent, rootIndent } = menuProps;

package/lib/message/src/Message.d.ts

@@ -52,7 +52,7 @@ declare const _default: import("vue").DefineComponent<{
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
-    placement: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    placement: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     render: PropType<MessageRenderMessage>;
     icon: PropType<() => VNodeChild>;
@@ -75,5 +75,5 @@ declare const _default: import("vue").DefineComponent<{
     showIcon: boolean;
     closable: boolean;
     keepAliveOnHover: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/message/src/MessageEnvironment.d.ts

@@ -71,5 +71,5 @@ declare const _default: import("vue").DefineComponent<{
     showIcon: boolean;
     closable: boolean;
     keepAliveOnHover: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/message/src/MessageProvider.d.ts

@@ -36,10 +36,11 @@ export declare const messageProviderProps: {
     keepAliveOnHover: BooleanConstructor;
     max: NumberConstructor;
     placement: {
-        type: PropType<"bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<"top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
         default: string;
     };
     closable: BooleanConstructor;
+    containerClass: StringConstructor;
     containerStyle: PropType<string | CSSProperties>;
     theme: PropType<import("../../_mixins").Theme<"Message", {
         closeBorderRadius: string;
@@ -263,10 +264,11 @@ declare const _default: import("vue").DefineComponent<{
     keepAliveOnHover: BooleanConstructor;
     max: NumberConstructor;
     placement: {
-        type: PropType<"bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<"top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
         default: string;
     };
     closable: BooleanConstructor;
+    containerClass: StringConstructor;
     containerStyle: PropType<string | CSSProperties>;
     theme: PropType<import("../../_mixins").Theme<"Message", {
         closeBorderRadius: string;
@@ -479,7 +481,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSize: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     messageRefs: import("vue").Ref<Record<string, PrivateMessageRef>>;
     messageList: import("vue").Ref<{
         key: string;
@@ -503,10 +505,11 @@ declare const _default: import("vue").DefineComponent<{
     keepAliveOnHover: BooleanConstructor;
     max: NumberConstructor;
     placement: {
-        type: PropType<"bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<"top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
         default: string;
     };
     closable: BooleanConstructor;
+    containerClass: StringConstructor;
     containerStyle: PropType<string | CSSProperties>;
     theme: PropType<import("../../_mixins").Theme<"Message", {
         closeBorderRadius: string;
@@ -721,7 +724,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     duration: number;
     closable: boolean;
-    placement: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    placement: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
     keepAliveOnHover: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/message/src/MessageProvider.js

@@ -16,7 +16,7 @@ exports.messageProviderProps = Object.assign(Object.assign({}, _mixins_1.useThem
     }, keepAliveOnHover: Boolean, max: Number, placement: {
         type: String,
         default: 'top'
-    }, closable: Boolean, containerStyle: [String, Object] });
+    }, closable: Boolean, containerClass: String, containerStyle: [String, Object] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'MessageProvider',
     props: exports.messageProviderProps,
@@ -88,7 +88,8 @@ exports.default = (0, vue_1.defineComponent)({
             this.messageList.length ? ((0, vue_1.h)(vue_1.Teleport, { to: (_c = this.to) !== null && _c !== void 0 ? _c : 'body' },
                 (0, vue_1.h)("div", { class: [
                         `${this.mergedClsPrefix}-message-container`,
-                        `${this.mergedClsPrefix}-message-container--${this.placement}`
+                        `${this.mergedClsPrefix}-message-container--${this.placement}`,
+                        this.containerClass
                     ], key: "message-container", style: this.containerStyle }, this.messageList.map((message) => {
                     return ((0, vue_1.h)(MessageEnvironment_1.default, Object.assign({ ref: ((inst) => {
                             if (inst) {