naive-ui 2.35.0 → 2.37.0

package/lib/locales/common/svSE.js

@@ -30,6 +30,7 @@ const svSE = {
         dateFormat: 'yyyy-MM-dd',
         dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
         quarterFormat: 'yyyy-qqq',
+        weekFormat: 'yyyy-w',
         clear: 'Rensa',
         now: 'Nu',
         confirm: 'Bekräfta',
@@ -40,6 +41,7 @@ const svSE = {
         monthPlaceholder: 'Välj månad',
         yearPlaceholder: 'Välj år',
         quarterPlaceholder: 'Välj kvartal',
+        weekPlaceholder: 'Select Week',
         startDatePlaceholder: 'Startdatum',
         endDatePlaceholder: 'Slutdatum',
         startDatetimePlaceholder: 'Startdatum och -tid',
@@ -77,7 +79,8 @@ const svSE = {
         placeholder: 'Välj tid',
         positiveText: 'OK',
         negativeText: 'Avbryt',
-        now: 'Nu'
+        now: 'Nu',
+        clear: 'Rensa'
     },
     Pagination: {
         goto: 'Gå till',

package/lib/locales/common/thTH.js

@@ -30,6 +30,7 @@ const thTH = {
         dateFormat: 'dd/MMMM/yyyy',
         dateTimeFormat: 'dd/MMMM/yyyy HH:mm:ss',
         quarterFormat: 'yyyy-qqq',
+        weekFormat: 'yyyy-w',
         clear: 'ล้าง',
         now: 'วันนี้',
         confirm: 'ยืนยัน',
@@ -40,6 +41,7 @@ const thTH = {
         monthPlaceholder: 'เดือน',
         yearPlaceholder: 'ปี',
         quarterPlaceholder: 'ไตรมาส',
+        weekPlaceholder: 'Select Week',
         startDatePlaceholder: 'วันที่เริ่มต้น',
         endDatePlaceholder: 'วันที่สิ้นสุด',
         startDatetimePlaceholder: 'วันที่เริ่มต้นและสิ้นสุด',
@@ -79,7 +81,8 @@ const thTH = {
         placeholder: 'เวลา',
         positiveText: 'ตกลง',
         negativeText: 'ยกเลิก',
-        now: 'วันนี้'
+        now: 'วันนี้',
+        clear: 'ล้าง'
     },
     Pagination: {
         goto: 'ไปยัง',

package/lib/locales/common/trTR.js

@@ -30,6 +30,7 @@ const trTR = {
         dateFormat: 'yyyy-MM-dd',
         dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
         quarterFormat: 'yyyy-qqq',
+        weekFormat: 'yyyy-w',
         clear: 'Temizle',
         now: 'Şimdi',
         confirm: 'Onayla',
@@ -40,6 +41,7 @@ const trTR = {
         monthPlaceholder: 'Ay Seçin',
         yearPlaceholder: 'Yıl Seçin',
         quarterPlaceholder: 'Mevsim Seçin',
+        weekPlaceholder: 'Select Week',
         startDatePlaceholder: 'Başlangıç Tarihi',
         endDatePlaceholder: 'Bitiş Tarihi',
         startDatetimePlaceholder: 'Başlangıç Tarih ve Saati',
@@ -77,7 +79,8 @@ const trTR = {
         placeholder: 'Saat Seç',
         positiveText: 'Tamam',
         negativeText: 'İptal',
-        now: 'Şimdi'
+        now: 'Şimdi',
+        clear: 'Temizle'
     },
     Pagination: {
         goto: 'git',

package/lib/locales/common/ukUA.js

@@ -30,6 +30,7 @@ const ukUA = {
         dateFormat: 'yyyy-MM-dd',
         dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
         quarterFormat: 'yyyy-qqq',
+        weekFormat: 'yyyy-w',
         clear: 'Стерти',
         now: 'Зараз',
         confirm: 'Підтвердити',
@@ -40,6 +41,7 @@ const ukUA = {
         monthPlaceholder: 'Оберіть місяць',
         yearPlaceholder: 'Оберіть рік',
         quarterPlaceholder: 'Оберіть квартал',
+        weekPlaceholder: 'Select Week',
         startDatePlaceholder: 'Дата початку',
         endDatePlaceholder: 'Дата завершення',
         startDatetimePlaceholder: 'Дата і час початку',
@@ -78,7 +80,8 @@ const ukUA = {
         placeholder: 'Обрати час',
         positiveText: 'OK',
         negativeText: 'Скасувати',
-        now: 'Зараз'
+        now: 'Зараз',
+        clear: 'Стерти'
     },
     Pagination: {
         goto: 'Перейти',

package/lib/locales/common/viVN.js

@@ -30,6 +30,7 @@ const viVN = {
         dateFormat: 'dd-MM-yyyy',
         dateTimeFormat: 'HH:mm:ss dd-MM-yyyy',
         quarterFormat: 'qqq-yyyy',
+        weekFormat: 'yyyy-w',
         clear: 'Xóa',
         now: 'Hôm nay',
         confirm: 'Xác nhận',
@@ -40,6 +41,7 @@ const viVN = {
         monthPlaceholder: 'Chọn tháng',
         yearPlaceholder: 'Chọn năm',
         quarterPlaceholder: 'Chọn quý',
+        weekPlaceholder: 'Select Week',
         startDatePlaceholder: 'Ngày bắt đầu',
         endDatePlaceholder: 'Ngày kết thúc',
         startDatetimePlaceholder: 'Thời gian bắt đầu',
@@ -77,7 +79,8 @@ const viVN = {
         placeholder: 'Chọn thời gian',
         positiveText: 'OK',
         negativeText: 'Hủy',
-        now: 'Hiện tại'
+        now: 'Hiện tại',
+        clear: 'Xóa'
     },
     Pagination: {
         goto: 'Đi đến trang',

package/lib/locales/common/zhCN.js

@@ -30,6 +30,7 @@ const zhCN = {
         dateFormat: 'yyyy-MM-dd',
         dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
         quarterFormat: 'yyyy-qqq',
+        weekFormat: 'yyyy-w周',
         clear: '清除',
         now: '此刻',
         confirm: '确认',
@@ -40,6 +41,7 @@ const zhCN = {
         monthPlaceholder: '选择月份',
         yearPlaceholder: '选择年份',
         quarterPlaceholder: '选择季度',
+        weekPlaceholder: '选择周',
         startDatePlaceholder: '开始日期',
         endDatePlaceholder: '结束日期',
         startDatetimePlaceholder: '开始日期时间',
@@ -77,7 +79,8 @@ const zhCN = {
         placeholder: '请选择时间',
         positiveText: '确认',
         negativeText: '取消',
-        now: '此刻'
+        now: '此刻',
+        clear: '清除'
     },
     Pagination: {
         goto: '跳至',

package/lib/locales/common/zhTW.js

@@ -30,6 +30,7 @@ const zhTW = {
         dateFormat: 'yyyy-MM-dd',
         dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
         quarterFormat: 'yyyy-qqq',
+        weekFormat: 'yyyy-w',
         clear: '清除',
         now: '現在',
         confirm: '確定',
@@ -40,6 +41,7 @@ const zhTW = {
         monthPlaceholder: '選擇月份',
         yearPlaceholder: '選擇年份',
         quarterPlaceholder: '選擇季度',
+        weekPlaceholder: 'Select Week',
         startDatePlaceholder: '開始日期',
         endDatePlaceholder: '結束日期',
         startDatetimePlaceholder: '開始日期時間',
@@ -77,7 +79,8 @@ const zhTW = {
         placeholder: '請選擇時間',
         positiveText: '確定',
         negativeText: '取消',
-        now: '現在'
+        now: '現在',
+        clear: '清除'
     },
     Pagination: {
         goto: '跳至',

package/lib/log/src/Log.d.ts

@@ -165,7 +165,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly hljs: ObjectConstructor;
     readonly onReachTop: PropType<() => void>;
     readonly onReachBottom: PropType<() => void>;
-    readonly onRequireMore: PropType<(from: "bottom" | "top") => void>;
+    readonly onRequireMore: PropType<(from: "top" | "bottom") => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Log", {
         loaderFontSize: string;
         loaderTextColor: string;
@@ -426,7 +426,7 @@ declare const _default: import("vue").DefineComponent<{
     onRender: (() => void) | undefined;
     scrollTo: ((options: {
         silent?: boolean | undefined;
-        position: "bottom" | "top";
+        position: "top" | "bottom";
     }) => void) & ((options: {
         silent?: boolean | undefined;
         top: number;
@@ -463,7 +463,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly hljs: ObjectConstructor;
     readonly onReachTop: PropType<() => void>;
     readonly onReachBottom: PropType<() => void>;
-    readonly onRequireMore: PropType<(from: "bottom" | "top") => void>;
+    readonly onRequireMore: PropType<(from: "top" | "bottom") => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Log", {
         loaderFontSize: string;
         loaderTextColor: string;

package/lib/mention/src/Mention.d.ts

@@ -1104,6 +1104,7 @@ declare const _default: import("vue").DefineComponent<{
         inputElRef: HTMLInputElement | null;
         isCompositing: boolean;
         blur: () => void;
+        clear: () => void;
         focus: () => void;
         select: () => void;
         activate: () => void;
@@ -1549,8 +1550,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly separator: string;
     readonly disabled: boolean;
     readonly placeholder: string;
-    readonly to: string | boolean | HTMLElement;
     readonly loading: boolean;
+    readonly to: string | boolean | HTMLElement;
     readonly bordered: boolean | undefined;
     readonly placement: FollowerPlacement;
     readonly defaultValue: string;

package/lib/mention/src/utils.js

@@ -39,12 +39,12 @@ function getRelativePosition(element, options = {
     // into their shorthand (e.g. padding-top, padding-bottom etc. -> padding),
     // so we have to list every single property explicitly.
     const properties = [
-        'direction',
+        'direction', // RTL support
         'boxSizing',
-        'width',
+        'width', // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
         'height',
         'overflowX',
-        'overflowY',
+        'overflowY', // copy the scrollbar for IE
         'borderTopWidth',
         'borderRightWidth',
         'borderBottomWidth',
@@ -66,7 +66,7 @@ function getRelativePosition(element, options = {
         'textAlign',
         'textTransform',
         'textIndent',
-        'textDecoration',
+        'textDecoration', // might not make a difference, but better be safe
         'letterSpacing',
         'wordSpacing',
         'tabSize',

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;
@@ -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;

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/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/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;
 }, {}>;