@sdata/web-vue 1.14.0 → 1.18.0

package/es/menu/item-group.vue_vue_type_script_lang.js

@@ -1,3 +1,4 @@
+import Ellipsis from "../ellipsis/index.js";
 import useLevel, { provideLevel } from "./hooks/use-level.js";
 import useMenuContext from "./hooks/use-menu-context.js";
 import indent_default from "./indent.js";
@@ -5,7 +6,10 @@ import { computed, defineComponent } from "vue";
 //#region components/menu/item-group.vue?vue&type=script&lang.ts
 var item_group_vue_vue_type_script_lang_default = defineComponent({
 	name: "MenuItemGroup",
-	components: { MenuIndent: indent_default },
+	components: {
+		Ellipsis,
+		MenuIndent: indent_default
+	},
 	props: { 
 	/**
 	* @zh 菜单组的标题
@@ -25,7 +29,8 @@ title: { type: String } },
 		return {
 			prefixCls,
 			classNames: computed(() => [`${prefixCls.value}-group`]),
-			level
+			level,
+			menuContext
 		};
 	}
 });

package/es/menu/item.d.ts

@@ -4,7 +4,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
 }>, {
-    menuContext: Partial<Readonly<Pick<import("./interface").InternalMenuProps, "mode" | "triggerProps" | "popupMaxHeight" | "theme" | "tooltipProps" | "levelIndent" | "autoScrollIntoView" | "scrollConfig" | "inTrigger"> & {
+    menuContext: Partial<Readonly<Pick<import("./interface").InternalMenuProps, "ellipsis" | "triggerProps" | "mode" | "theme" | "popupMaxHeight" | "tooltipProps" | "levelIndent" | "autoScrollIntoView" | "scrollConfig" | "inTrigger" | "ellipsisProps"> & {
         selectedKeys: string[];
         openKeys: string[];
         prefixCls: string;

package/es/menu/item.js

@@ -1,14 +1,18 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
 import { omit } from "../_utils/omit.js";
 import Tooltip from "../tooltip/index.js";
+import Ellipsis from "../ellipsis/index.js";
 import useLevel from "./hooks/use-level.js";
 import useMenu from "./hooks/use-menu.js";
 import useMenuContext from "./hooks/use-menu-context.js";
 import { useMenuDataCollectorContext } from "./hooks/use-menu-data-collector.js";
 import indent_default from "./indent.js";
-import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, onMounted, onUnmounted, ref, watch } from "vue";
 import scrollIntoView from "scroll-into-view-if-needed";
 //#region components/menu/item.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 var item_default = /* @__PURE__ */ defineComponent({
 	name: "MenuItem",
 	inheritAttrs: false,
@@ -82,17 +86,20 @@ disabled: {
 		const children = ((_this$$slots$default = (_this$$slots = this.$slots).default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || [];
 		const showIndent = needTextIndent && !inTrigger && !collapsed;
 		const iconElement = this.$slots.icon && this.$slots.icon();
+		const titleClassNames = [`${prefixCls}-item-inner`, { [`${prefixCls}-title`]: iconElement }];
+		const titleElement = menuContext.ellipsis ? createVNode("span", { "class": [titleClassNames, `${prefixCls}-ellipsis-wrapper`] }, [createVNode(Ellipsis, mergeProps({ "class": `${prefixCls}-ellipsis` }, menuContext.ellipsisProps || {}), _isSlot(children) ? children : { default: () => [children] })]) : showIndent || iconElement ? createVNode("span", { "class": titleClassNames }, [children]) : children;
 		const content = [
 			showIndent && createVNode(indent_default, { "level": level }, null),
 			iconElement && createVNode("span", { "class": `${prefixCls}-icon` }, [iconElement]),
-			showIndent || iconElement ? createVNode("span", { "class": [`${prefixCls}-item-inner`, { [`${prefixCls}-title`]: iconElement }] }, [children]) : children
+			titleElement
 		].filter(Boolean);
 		const itemElement = createVNode("div", mergeProps({
 			"ref": "refItemElement",
 			"class": [`${prefixCls}-item`, {
 				[`${prefixCls}-disabled`]: disabled,
 				[`${prefixCls}-selected`]: isSelected,
-				[`${prefixCls}-has-icon`]: iconElement
+				[`${prefixCls}-has-icon`]: iconElement,
+				[`${prefixCls}-item-indented`]: showIndent
 			}]
 		}, this.$attrs, { "onClick": onClick }), [content, isSelected && mode === "horizontal" && createVNode("div", { "class": `${prefixCls}-selected-label` }, null)]);
 		if (needTooltip) return createVNode(Tooltip, mergeProps({

package/es/menu/menu.d.ts

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { EllipsisTooltipProps } from '../ellipsis';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     theme: {
         type: PropType<"light" | "dark">;
@@ -7,6 +8,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<"vertical" | "horizontal" | "pop" | "popButton">;
         default: string;
     };
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ellipsisProps: {
+        type: PropType<{
+            lineClamp?: number | string;
+            expandTrigger?: "click";
+            tooltip?: boolean | EllipsisTooltipProps;
+        }>;
+        default: undefined;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     theme: {
         type: PropType<"light" | "dark">;
@@ -15,8 +28,26 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<"vertical" | "horizontal" | "pop" | "popButton">;
         default: string;
     };
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ellipsisProps: {
+        type: PropType<{
+            lineClamp?: number | string;
+            expandTrigger?: "click";
+            tooltip?: boolean | EllipsisTooltipProps;
+        }>;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {
+    ellipsis: boolean;
     mode: "pop" | "horizontal" | "vertical" | "popButton";
+    ellipsisProps: {
+        lineClamp?: number | string;
+        expandTrigger?: "click";
+        tooltip?: boolean | EllipsisTooltipProps;
+    };
 }, {}, {
     BaseMenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         style: {
@@ -80,6 +111,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         tooltipProps: {
             type: ObjectConstructor;
         };
+        ellipsis: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        ellipsisProps: {
+            type: PropType<import("./interface").MenuEllipsisProps>;
+            default: undefined;
+        };
         autoOpenSelected: {
             type: BooleanConstructor;
         };
@@ -113,7 +152,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         computedCollapsed: import("vue").ComputedRef<boolean>;
         computedHasCollapseButton: import("vue").ComputedRef<boolean>;
         onCollapseBtnClick: () => void;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("collapse" | "update:collapsed" | "update:selectedKeys" | "update:openKeys" | "menu-item-click" | "sub-menu-click")[], "collapse" | "update:collapsed" | "update:selectedKeys" | "update:openKeys" | "menu-item-click" | "sub-menu-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("collapse" | "update:selectedKeys" | "update:collapsed" | "update:openKeys" | "menu-item-click" | "sub-menu-click")[], "collapse" | "update:selectedKeys" | "update:collapsed" | "update:openKeys" | "menu-item-click" | "sub-menu-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         style: {
             type: PropType<import("vue").StyleValue>;
         };
@@ -175,6 +214,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         tooltipProps: {
             type: ObjectConstructor;
         };
+        ellipsis: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        ellipsisProps: {
+            type: PropType<import("./interface").MenuEllipsisProps>;
+            default: undefined;
+        };
         autoOpenSelected: {
             type: BooleanConstructor;
         };
@@ -198,25 +245,27 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: BooleanConstructor;
         };
     }>> & Readonly<{
+        "onUpdate:selectedKeys"?: ((...args: any[]) => any) | undefined;
         onCollapse?: ((...args: any[]) => any) | undefined;
         "onUpdate:collapsed"?: ((...args: any[]) => any) | undefined;
-        "onUpdate:selectedKeys"?: ((...args: any[]) => any) | undefined;
         "onUpdate:openKeys"?: ((...args: any[]) => any) | undefined;
         "onMenu-item-click"?: ((...args: any[]) => any) | undefined;
         "onSub-menu-click"?: ((...args: any[]) => any) | undefined;
     }>, {
+        ellipsis: boolean;
         mode: "pop" | "horizontal" | "vertical" | "popButton";
+        collapsed: boolean;
+        defaultSelectedKeys: string[];
+        theme: "dark" | "light";
         popupMaxHeight: number | boolean;
         accordion: boolean;
-        theme: "dark" | "light";
-        collapsed: boolean;
         defaultCollapsed: boolean;
         autoScrollIntoView: boolean;
         inTrigger: boolean;
+        ellipsisProps: import("./interface").MenuEllipsisProps;
         autoOpen: boolean;
         autoOpenSelected: boolean;
         showCollapseButton: boolean;
-        defaultSelectedKeys: string[];
         defaultOpenKeys: string[];
         siderCollapsed: boolean;
         isRoot: boolean;

package/es/menu/menu.js

@@ -15,6 +15,14 @@ var menu_default = /* @__PURE__ */ defineComponent({
 		mode: {
 			type: String,
 			default: "vertical"
+		},
+		ellipsis: {
+			type: Boolean,
+			default: false
+		},
+		ellipsisProps: {
+			type: Object,
+			default: void 0
 		}
 	},
 	setup(props, { attrs, slots }) {

package/es/menu/style/css.js

@@ -1,3 +1,4 @@
 import "../../dropdown/style/index.js";
+import "../../ellipsis/style/index.js";
 import "../../style/index.css";
 import "./index.css";

package/es/menu/style/index.css

@@ -61,6 +61,15 @@
   display: inline-block;
   width: 20px;
 }
+.sd-menu-ellipsis-wrapper {
+  display: inline-flex;
+  flex: 1;
+  min-width: 0;
+}
+.sd-menu-ellipsis {
+  width: 100%;
+  min-width: 0;
+}
 .sd-menu .sd-menu-item,
 .sd-menu .sd-menu-group-title,
 .sd-menu .sd-menu-pop-header,
@@ -108,6 +117,86 @@
 .sd-menu-light {
   background-color: var(--color-menu-light-bg);
 }
+.sd-menu-light .sd-menu-item,
+.sd-menu-light .sd-menu-group-title,
+.sd-menu-light .sd-menu-pop-header,
+.sd-menu-light .sd-menu-inline-header {
+  color: var(--color-text-2);
+  background-color: var(--color-menu-light-bg);
+}
+.sd-menu-light .sd-menu-item .sd-icon,
+.sd-menu-light .sd-menu-item .sd-menu-icon,
+.sd-menu-light .sd-menu-group-title .sd-icon,
+.sd-menu-light .sd-menu-group-title .sd-menu-icon,
+.sd-menu-light .sd-menu-pop-header .sd-icon,
+.sd-menu-light .sd-menu-pop-header .sd-menu-icon,
+.sd-menu-light .sd-menu-inline-header .sd-icon,
+.sd-menu-light .sd-menu-inline-header .sd-menu-icon {
+  color: var(--color-text-3);
+}
+.sd-menu-light .sd-menu-item:hover,
+.sd-menu-light .sd-menu-group-title:hover,
+.sd-menu-light .sd-menu-pop-header:hover,
+.sd-menu-light .sd-menu-inline-header:hover {
+  color: var(--color-text-2);
+  background-color: var(--color-fill-2);
+}
+.sd-menu-light .sd-menu-item:hover .sd-icon,
+.sd-menu-light .sd-menu-item:hover .sd-menu-icon,
+.sd-menu-light .sd-menu-group-title:hover .sd-icon,
+.sd-menu-light .sd-menu-group-title:hover .sd-menu-icon,
+.sd-menu-light .sd-menu-pop-header:hover .sd-icon,
+.sd-menu-light .sd-menu-pop-header:hover .sd-menu-icon,
+.sd-menu-light .sd-menu-inline-header:hover .sd-icon,
+.sd-menu-light .sd-menu-inline-header:hover .sd-menu-icon {
+  color: var(--color-text-3);
+}
+.sd-menu-light .sd-menu-item.sd-menu-selected,
+.sd-menu-light .sd-menu-group-title.sd-menu-selected,
+.sd-menu-light .sd-menu-pop-header.sd-menu-selected,
+.sd-menu-light .sd-menu-inline-header.sd-menu-selected {
+  color: rgb(var(--primary-6));
+}
+.sd-menu-light .sd-menu-item.sd-menu-selected .sd-icon,
+.sd-menu-light .sd-menu-item.sd-menu-selected .sd-menu-icon,
+.sd-menu-light .sd-menu-group-title.sd-menu-selected .sd-icon,
+.sd-menu-light .sd-menu-group-title.sd-menu-selected .sd-menu-icon,
+.sd-menu-light .sd-menu-pop-header.sd-menu-selected .sd-icon,
+.sd-menu-light .sd-menu-pop-header.sd-menu-selected .sd-menu-icon,
+.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-icon,
+.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
+  color: rgb(var(--primary-6));
+}
+.sd-menu-light .sd-menu-item.sd-menu-disabled,
+.sd-menu-light .sd-menu-group-title.sd-menu-disabled,
+.sd-menu-light .sd-menu-pop-header.sd-menu-disabled,
+.sd-menu-light .sd-menu-inline-header.sd-menu-disabled {
+  color: var(--color-text-4);
+  background-color: var(--color-menu-light-bg);
+}
+.sd-menu-light .sd-menu-item.sd-menu-disabled .sd-icon,
+.sd-menu-light .sd-menu-item.sd-menu-disabled .sd-menu-icon,
+.sd-menu-light .sd-menu-group-title.sd-menu-disabled .sd-icon,
+.sd-menu-light .sd-menu-group-title.sd-menu-disabled .sd-menu-icon,
+.sd-menu-light .sd-menu-pop-header.sd-menu-disabled .sd-icon,
+.sd-menu-light .sd-menu-pop-header.sd-menu-disabled .sd-menu-icon,
+.sd-menu-light .sd-menu-inline-header.sd-menu-disabled .sd-icon,
+.sd-menu-light .sd-menu-inline-header.sd-menu-disabled .sd-menu-icon {
+  color: var(--color-text-4);
+}
+.sd-menu-light .sd-menu-item.sd-menu-selected {
+  background-color: var(--color-fill-2);
+}
+.sd-menu-light .sd-menu-inline-header.sd-menu-selected {
+  color: rgb(var(--primary-6));
+}
+.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-icon,
+.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
+  color: rgb(var(--primary-6));
+}
+.sd-menu-light .sd-menu-inline-header.sd-menu-selected:hover {
+  background-color: var(--color-fill-2);
+}
 .sd-menu-light.sd-menu-horizontal .sd-menu-item.sd-menu-selected,
 .sd-menu-light.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected,
 .sd-menu-light.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected,
@@ -115,6 +204,12 @@
   background: none;
   transition: color 0.2s cubic-bezier(0, 0, 1, 1);
 }
+.sd-menu-light.sd-menu-horizontal .sd-menu-item.sd-menu-selected:hover,
+.sd-menu-light.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected:hover,
+.sd-menu-light.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected:hover,
+.sd-menu-light.sd-menu-horizontal .sd-menu-inline-header.sd-menu-selected:hover {
+  background-color: var(--color-fill-2);
+}
 .sd-menu-light .sd-menu-group-title {
   color: var(--color-text-3);
   pointer-events: none;
@@ -123,9 +218,92 @@
   color: var(--color-text-3);
   background-color: var(--color-fill-1);
 }
+.sd-menu-light .sd-menu-collapse-button:hover {
+  background-color: var(--color-fill-3);
+}
 .sd-menu-dark {
   background-color: var(--color-menu-dark-bg);
 }
+.sd-menu-dark .sd-menu-item,
+.sd-menu-dark .sd-menu-group-title,
+.sd-menu-dark .sd-menu-pop-header,
+.sd-menu-dark .sd-menu-inline-header {
+  color: var(--color-text-4);
+  background-color: var(--color-menu-dark-bg);
+}
+.sd-menu-dark .sd-menu-item .sd-icon,
+.sd-menu-dark .sd-menu-item .sd-menu-icon,
+.sd-menu-dark .sd-menu-group-title .sd-icon,
+.sd-menu-dark .sd-menu-group-title .sd-menu-icon,
+.sd-menu-dark .sd-menu-pop-header .sd-icon,
+.sd-menu-dark .sd-menu-pop-header .sd-menu-icon,
+.sd-menu-dark .sd-menu-inline-header .sd-icon,
+.sd-menu-dark .sd-menu-inline-header .sd-menu-icon {
+  color: var(--color-text-3);
+}
+.sd-menu-dark .sd-menu-item:hover,
+.sd-menu-dark .sd-menu-group-title:hover,
+.sd-menu-dark .sd-menu-pop-header:hover,
+.sd-menu-dark .sd-menu-inline-header:hover {
+  color: var(--color-text-4);
+  background-color: var(--color-menu-dark-hover);
+}
+.sd-menu-dark .sd-menu-item:hover .sd-icon,
+.sd-menu-dark .sd-menu-item:hover .sd-menu-icon,
+.sd-menu-dark .sd-menu-group-title:hover .sd-icon,
+.sd-menu-dark .sd-menu-group-title:hover .sd-menu-icon,
+.sd-menu-dark .sd-menu-pop-header:hover .sd-icon,
+.sd-menu-dark .sd-menu-pop-header:hover .sd-menu-icon,
+.sd-menu-dark .sd-menu-inline-header:hover .sd-icon,
+.sd-menu-dark .sd-menu-inline-header:hover .sd-menu-icon {
+  color: var(--color-text-3);
+}
+.sd-menu-dark .sd-menu-item.sd-menu-selected,
+.sd-menu-dark .sd-menu-group-title.sd-menu-selected,
+.sd-menu-dark .sd-menu-pop-header.sd-menu-selected,
+.sd-menu-dark .sd-menu-inline-header.sd-menu-selected {
+  color: var(--color-white);
+}
+.sd-menu-dark .sd-menu-item.sd-menu-selected .sd-icon,
+.sd-menu-dark .sd-menu-item.sd-menu-selected .sd-menu-icon,
+.sd-menu-dark .sd-menu-group-title.sd-menu-selected .sd-icon,
+.sd-menu-dark .sd-menu-group-title.sd-menu-selected .sd-menu-icon,
+.sd-menu-dark .sd-menu-pop-header.sd-menu-selected .sd-icon,
+.sd-menu-dark .sd-menu-pop-header.sd-menu-selected .sd-menu-icon,
+.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-icon,
+.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
+  color: var(--color-white);
+}
+.sd-menu-dark .sd-menu-item.sd-menu-disabled,
+.sd-menu-dark .sd-menu-group-title.sd-menu-disabled,
+.sd-menu-dark .sd-menu-pop-header.sd-menu-disabled,
+.sd-menu-dark .sd-menu-inline-header.sd-menu-disabled {
+  color: var(--color-text-2);
+  background-color: var(--color-menu-dark-bg);
+}
+.sd-menu-dark .sd-menu-item.sd-menu-disabled .sd-icon,
+.sd-menu-dark .sd-menu-item.sd-menu-disabled .sd-menu-icon,
+.sd-menu-dark .sd-menu-group-title.sd-menu-disabled .sd-icon,
+.sd-menu-dark .sd-menu-group-title.sd-menu-disabled .sd-menu-icon,
+.sd-menu-dark .sd-menu-pop-header.sd-menu-disabled .sd-icon,
+.sd-menu-dark .sd-menu-pop-header.sd-menu-disabled .sd-menu-icon,
+.sd-menu-dark .sd-menu-inline-header.sd-menu-disabled .sd-icon,
+.sd-menu-dark .sd-menu-inline-header.sd-menu-disabled .sd-menu-icon {
+  color: var(--color-text-2);
+}
+.sd-menu-dark .sd-menu-item.sd-menu-selected {
+  background-color: var(--color-menu-dark-hover);
+}
+.sd-menu-dark .sd-menu-inline-header.sd-menu-selected {
+  color: rgb(var(--primary-6));
+}
+.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-icon,
+.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
+  color: rgb(var(--primary-6));
+}
+.sd-menu-dark .sd-menu-inline-header.sd-menu-selected:hover {
+  background-color: var(--color-menu-dark-hover);
+}
 .sd-menu-dark.sd-menu-horizontal .sd-menu-item.sd-menu-selected,
 .sd-menu-dark.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected,
 .sd-menu-dark.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected,
@@ -133,6 +311,12 @@
   background: none;
   transition: color 0.2s cubic-bezier(0, 0, 1, 1);
 }
+.sd-menu-dark.sd-menu-horizontal .sd-menu-item.sd-menu-selected:hover,
+.sd-menu-dark.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected:hover,
+.sd-menu-dark.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected:hover,
+.sd-menu-dark.sd-menu-horizontal .sd-menu-inline-header.sd-menu-selected:hover {
+  background-color: var(--color-menu-dark-hover);
+}
 .sd-menu-dark .sd-menu-group-title {
   color: var(--color-text-3);
   pointer-events: none;
@@ -141,6 +325,9 @@
   color: var(--color-white);
   background-color: rgb(var(--primary-6));
 }
+.sd-menu-dark .sd-menu-collapse-button:hover {
+  background-color: rgb(var(--primary-7));
+}
 .sd-menu a,
 .sd-menu a:hover,
 .sd-menu a:focus,
@@ -243,11 +430,18 @@
 }
 .sd-menu-vertical .sd-menu-item.sd-menu-item-indented {
   display: flex;
+  align-items: center;
 }
 .sd-menu-vertical .sd-menu-pop-header,
 .sd-menu-vertical .sd-menu-inline-header {
   padding-right: 28px;
 }
+.sd-menu-vertical .sd-menu-pop-header.sd-menu-ellipsis-enabled,
+.sd-menu-vertical .sd-menu-inline-header.sd-menu-ellipsis-enabled,
+.sd-menu-vertical .sd-menu-group-title.sd-menu-ellipsis-enabled {
+  display: flex;
+  align-items: center;
+}
 .sd-menu-horizontal {
   width: 100%;
   height: auto;

package/es/menu/style/index.d.ts

@@ -1,4 +1,5 @@
 import '../../style/index.scss';
 import '../../dropdown/style';
+import '../../ellipsis/style';
 import '../../tooltip/style';
 import './index.scss';

package/es/menu/style/index.js

@@ -1,3 +1,4 @@
 import "../../dropdown/style/index.js";
+import "../../ellipsis/style/index.js";
 import "../../style/index.scss";
 import "./index.scss";

package/es/menu/style/index.scss

@@ -14,8 +14,36 @@ $trigger-menu-prefix-cls: string.unquote('#{theme.$prefix}-trigger-menu');
 
 $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-variables('token'));
 
+@function str-replace($input, $search, $replace: '') {
+  $index: string.index($input, $search);
+
+  @if $index == null {
+    @return $input;
+  }
+
+  @return string.slice($input, 1, $index - 1) + $replace +
+    str-replace(string.slice($input, $index + string.length($search)), $search, $replace);
+}
+
 @function token-var($name, $fallback: null) {
-  $value: map.get($token-vars, $name);
+  $lookup-name: string.unquote('#{$name}');
+  $value: map.get($token-vars, $lookup-name);
+
+  @if $value == null {
+    $dash-key: str-replace($lookup-name, '_', '-');
+
+    @if $dash-key != $lookup-name {
+      $value: map.get($token-vars, $dash-key);
+    }
+  }
+
+  @if $value == null {
+    $underscore-key: str-replace($lookup-name, '-', '_');
+
+    @if $underscore-key != $lookup-name {
+      $value: map.get($token-vars, $underscore-key);
+    }
+  }
 
   @if $value == null {
     @return $fallback;
@@ -249,6 +277,17 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
     width: $menu-item-indent-spacing;
   }
 
+  &-ellipsis-wrapper {
+    display: inline-flex;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &-ellipsis {
+    width: 100%;
+    min-width: 0;
+  }
+
   @include menu-item-base();
   @include menu-theme(light);
   @include menu-theme(dark);
@@ -286,6 +325,7 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
 
     .#{$menu-prefix-cls}-item.#{$menu-prefix-cls}-item-indented {
       display: flex;
+      align-items: center;
     }
 
     // 为 header 右侧预留下放置 suffixIcon 的空间
@@ -293,6 +333,13 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
     .#{$menu-prefix-cls}-inline-header {
       padding-right: $menu-vertical-item-padding-horizontal + 16;
     }
+
+    .#{$menu-prefix-cls}-pop-header.#{$menu-prefix-cls}-ellipsis-enabled,
+    .#{$menu-prefix-cls}-inline-header.#{$menu-prefix-cls}-ellipsis-enabled,
+    .#{$menu-prefix-cls}-group-title.#{$menu-prefix-cls}-ellipsis-enabled {
+      display: flex;
+      align-items: center;
+    }
   }
 
   // 水平菜单中，仅允许出现普通 item 和 popSubMenu

package/es/menu/sub-menu-inline.js

@@ -1,19 +1,40 @@
 import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
 import sub_menu_inline_vue_vue_type_script_lang_default from "./sub-menu-inline.vue_vue_type_script_lang.js";
-import { Fragment, createElementBlock, createElementVNode, createTextVNode, createVNode, normalizeClass, openBlock, renderSlot, resolveComponent, toDisplayString, vShow, withCtx, withDirectives } from "vue";
+import { Fragment, createElementBlock, createElementVNode, createTextVNode, createVNode, mergeProps, normalizeClass, openBlock, renderSlot, resolveComponent, toDisplayString, vShow, withCtx, withDirectives } from "vue";
 //#region components/menu/sub-menu-inline.vue
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_MenuIndent = resolveComponent("MenuIndent");
+	const _component_Ellipsis = resolveComponent("Ellipsis");
 	const _component_ExpandTransition = resolveComponent("ExpandTransition");
 	return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.classNames) }, [createElementVNode("div", {
 		class: normalizeClass([`${_ctx.prefixCls}-header`, {
 			[`${_ctx.menuPrefixCls}-selected`]: _ctx.isSelected,
-			[`${_ctx.menuPrefixCls}-has-icon`]: _ctx.$slots.icon
+			[`${_ctx.menuPrefixCls}-has-icon`]: _ctx.$slots.icon,
+			[`${_ctx.menuPrefixCls}-ellipsis-enabled`]: _ctx.menuContext.ellipsis
 		}]),
 		onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onHeaderClick && _ctx.onHeaderClick(...args))
 	}, [
 		createVNode(_component_MenuIndent, { level: _ctx.level }, null, 8, ["level"]),
-		_ctx.$slots.icon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", { class: normalizeClass(`${_ctx.menuPrefixCls}-icon`) }, [renderSlot(_ctx.$slots, "icon")], 2), createElementVNode("span", { class: normalizeClass(`${_ctx.menuPrefixCls}-title`) }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(_ctx.title), 1)])], 2)], 64)) : renderSlot(_ctx.$slots, "title", { key: 1 }, () => [createTextVNode(toDisplayString(_ctx.title), 1)]),
+		_ctx.$slots.icon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", { class: normalizeClass(`${_ctx.menuPrefixCls}-icon`) }, [renderSlot(_ctx.$slots, "icon")], 2), _ctx.menuContext.ellipsis ? (openBlock(), createElementBlock("span", {
+			key: 0,
+			class: normalizeClass([
+				`${_ctx.menuPrefixCls}-item-inner`,
+				`${_ctx.menuPrefixCls}-title`,
+				`${_ctx.menuPrefixCls}-ellipsis-wrapper`
+			])
+		}, [createVNode(_component_Ellipsis, mergeProps({ class: `${_ctx.menuPrefixCls}-ellipsis` }, _ctx.menuContext.ellipsisProps), {
+			default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(_ctx.title), 1)])]),
+			_: 3
+		}, 16, ["class"])], 2)) : (openBlock(), createElementBlock("span", {
+			key: 1,
+			class: normalizeClass(`${_ctx.menuPrefixCls}-title`)
+		}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(_ctx.title), 1)])], 2))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [_ctx.menuContext.ellipsis ? (openBlock(), createElementBlock("span", {
+			key: 0,
+			class: normalizeClass([`${_ctx.menuPrefixCls}-item-inner`, `${_ctx.menuPrefixCls}-ellipsis-wrapper`])
+		}, [createVNode(_component_Ellipsis, mergeProps({ class: `${_ctx.menuPrefixCls}-ellipsis` }, _ctx.menuContext.ellipsisProps), {
+			default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(_ctx.title), 1)])]),
+			_: 3
+		}, 16, ["class"])], 2)) : renderSlot(_ctx.$slots, "title", { key: 1 }, () => [createTextVNode(toDisplayString(_ctx.title), 1)])], 64)),
 		createElementVNode("span", { class: normalizeClass([`${_ctx.menuPrefixCls}-icon-suffix`, { [`is-open`]: _ctx.isOpen }]) }, [renderSlot(_ctx.$slots, "expand-icon-down")], 2)
 	], 2), createVNode(_component_ExpandTransition, null, {
 		default: withCtx(() => [withDirectives(createElementVNode("div", { class: normalizeClass(`${_ctx.prefixCls}-content`) }, [renderSlot(_ctx.$slots, "default")], 2), [[vShow, _ctx.isOpen]])]),