@sdata/web-vue 1.14.0 → 1.18.0

package/es/layout/style/index.scss

@@ -15,44 +15,57 @@ $layout-prefix-cls: string.unquote('#{theme.$prefix}-layout');
     position: relative;
     flex: none; // flex: 0 0 auto; 当右侧文字过长的时候不会被压缩。
     width: auto;
+    max-width: 100%;
     margin: 0;
     padding: 0;
+    overflow: hidden;
     background: $layout-sider-background;
-    transition: width theme.$transition-duration-2 theme.$transition-timing-function-standard;
+    transition:
+      width theme.$transition-duration-2 theme.$transition-timing-function-standard,
+      height theme.$transition-duration-2 theme.$transition-timing-function-standard,
+      transform theme.$transition-duration-2 theme.$transition-timing-function-standard;
+
+    &-image,
+    &-prepend,
+    &-append {
+      flex: none;
+    }
 
     &-children {
+      flex: 1;
       height: 100%;
       overflow: auto;
     }
 
+    &-mask {
+      position: fixed;
+      inset: 0;
+      background: $layout-sider-mask-color;
+    }
+
     &-collapsed &-children {
       /* width */
       &::-webkit-scrollbar {
         width: 0;
       }
-
-      // /* Track */
-      // &::-webkit-scrollbar-track {
-      //   background: #f1f1f1;
-      // }
-
-      // /* Handle */
-      // &::-webkit-scrollbar-thumb {
-      //   background: #888;
-      // }
-
-      // /* Handle on hover */
-      // &::-webkit-scrollbar-thumb:hover {
-      //   background: #555;
-      // }
     }
 
     &-has-trigger {
+      display: flex;
+      flex-direction: column;
       box-sizing: border-box;
       padding-bottom: $layout-trigger-height;
     }
 
+    &-rail {
+      width: $layout-rail-width;
+    }
+
     &-trigger {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
       z-index: 1;
       display: flex;
       align-items: center;
@@ -71,6 +84,53 @@ $layout-prefix-cls: string.unquote('#{theme.$prefix}-layout');
         border-top: 1px solid $layout-trigger-light-color-border;
       }
     }
+
+    &-floating {
+      box-shadow: none;
+    }
+
+    &-sticky {
+      z-index: 1;
+    }
+
+    &-temporary {
+      position: fixed;
+      box-shadow: $layout-sider-shadow;
+
+      &.#{$layout-prefix-cls}-sider-left {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        transform: translateX(-100%);
+      }
+
+      &.#{$layout-prefix-cls}-sider-right {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        transform: translateX(100%);
+      }
+
+      &.#{$layout-prefix-cls}-sider-top {
+        top: 0;
+        right: 0;
+        left: 0;
+        width: 100%;
+        transform: translateY(-100%);
+      }
+
+      &.#{$layout-prefix-cls}-sider-bottom {
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        transform: translateY(100%);
+      }
+
+      &.#{$layout-prefix-cls}-sider-active {
+        transform: translate(0, 0);
+      }
+    }
   }
 
   &-sider-light {
@@ -79,9 +139,131 @@ $layout-prefix-cls: string.unquote('#{theme.$prefix}-layout');
   }
 
   &-header {
+    position: relative;
     flex: 0 0 auto;
     box-sizing: border-box;
     margin: 0;
+    overflow: hidden;
+    color: $layout-header-color;
+    background: $layout-header-background;
+    border-bottom: 1px solid $layout-header-border-color;
+    transition:
+      height theme.$transition-duration-2 theme.$transition-timing-function-standard,
+      transform theme.$transition-duration-2 theme.$transition-timing-function-standard,
+      box-shadow theme.$transition-duration-2 theme.$transition-timing-function-standard;
+
+    &-wrapper {
+      width: 100%;
+    }
+
+    &-bar,
+    &-extension,
+    &-prepend,
+    &-append,
+    &-content {
+      display: flex;
+      align-items: center;
+    }
+
+    &-bar {
+      position: relative;
+      z-index: 1;
+      gap: $layout-header-gap;
+      min-height: var(--sd-layout-header-content-height, 64px);
+      padding: 0 $layout-header-padding-inline;
+    }
+
+    &-prepend,
+    &-append {
+      flex: none;
+      gap: calc($layout-header-gap / 2);
+    }
+
+    &-title {
+      position: relative;
+      z-index: 1;
+      flex: none;
+      max-width: min(40%, 480px);
+      overflow: hidden;
+      color: inherit;
+      font-weight: $layout-header-title-font-weight;
+      font-size: $layout-header-title-font-size;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &-content {
+      position: relative;
+      z-index: 1;
+      flex: 1;
+      gap: calc($layout-header-gap / 2);
+      min-width: 0;
+    }
+
+    &-extension {
+      position: relative;
+      z-index: 1;
+      gap: calc($layout-header-gap / 2);
+      min-height: var(--sd-layout-header-extension-height, 48px);
+      padding: 0 $layout-header-padding-inline;
+      border-top: 1px solid $layout-header-border-color;
+    }
+
+    &-image {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+
+      &::after {
+        position: absolute;
+        inset: 0;
+        background: $layout-header-image-overlay;
+        content: '';
+      }
+    }
+
+    &-image-inner,
+    &-image :is(img, picture, video) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      opacity: var(--sd-layout-header-image-opacity, 1);
+      transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
+    }
+
+    &-flat {
+      box-shadow: none;
+    }
+
+    &:not(&-flat) {
+      box-shadow: $layout-header-shadow;
+    }
+
+    &-floating {
+      box-shadow: $layout-header-floating-shadow;
+    }
+
+    &-hidden {
+      pointer-events: none;
+    }
+
+    &-collapsed &-extension {
+      display: none;
+    }
+
+    &-with-image {
+      color: $layout-font-color-dark;
+      border-bottom-color: transparent;
+    }
+
+    &-with-image &-extension {
+      border-top-color: rgb(255 255 255 / 16%);
+    }
+
+    &-bottom {
+      border-top: 1px solid $layout-header-border-color;
+      border-bottom: 0;
+    }
   }
 
   &-content {

package/es/layout/style/token.scss

@@ -7,6 +7,19 @@
 @use '@style/theme/index.scss' as *;
 
 $layout-trigger-height: 48px;
+$layout-rail-width: 56px;
+$layout-sider-mask-color: rgb(0 0 0 / 45%);
+$layout-sider-shadow: 0 12px 32px rgb(0 0 0 / 18%);
+$layout-header-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+$layout-header-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$layout-header-border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));
+$layout-header-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+$layout-header-floating-shadow: 0 16px 32px rgb(0 0 0 / 14%);
+$layout-header-padding-inline: 20px;
+$layout-header-gap: 16px;
+$layout-header-title-font-size: 18px;
+$layout-header-title-font-weight: 600;
+$layout-header-image-overlay: linear-gradient(180deg, rgb(0 0 0 / 18%), rgb(0 0 0 / 36%));
 
 // Layout Theme Dark(Default)
 $layout-sider-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-bg'));

package/es/link/index.d.ts

@@ -8,14 +8,14 @@ declare const Link: {
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         click: (ev: MouseEvent) => any;
     }, import("vue").PublicProps, {
-        status: import("..").Status;
         disabled: boolean;
-        loading: boolean;
-        icon: boolean;
         ellipsis: boolean;
+        icon: boolean;
+        loading: boolean;
         ellipsisLineClamp: number | string;
         ellipsisExpandTrigger: "click";
         ellipsisTooltip: boolean | import("..").EllipsisTooltipProps;
+        status: import("..").Status;
         iconTooltip: string;
     }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
@@ -27,14 +27,14 @@ declare const Link: {
     }, Readonly<LinkProps> & Readonly<{
         onClick?: ((ev: MouseEvent) => any) | undefined;
     }>, {}, {}, {}, {}, {
-        status: import("..").Status;
         disabled: boolean;
-        loading: boolean;
-        icon: boolean;
         ellipsis: boolean;
+        icon: boolean;
+        loading: boolean;
         ellipsisLineClamp: number | string;
         ellipsisExpandTrigger: "click";
         ellipsisTooltip: boolean | import("..").EllipsisTooltipProps;
+        status: import("..").Status;
         iconTooltip: string;
     }>;
     __isFragment?: never;
@@ -45,14 +45,14 @@ declare const Link: {
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (ev: MouseEvent) => any;
 }, string, {
-    status: import("..").Status;
     disabled: boolean;
-    loading: boolean;
-    icon: boolean;
     ellipsis: boolean;
+    icon: boolean;
+    loading: boolean;
     ellipsisLineClamp: number | string;
     ellipsisExpandTrigger: "click";
     ellipsisTooltip: boolean | import("..").EllipsisTooltipProps;
+    status: import("..").Status;
     iconTooltip: string;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {

package/es/link/link.vue.d.ts

@@ -16,14 +16,14 @@ declare const __VLS_base: import("vue").DefineComponent<LinkProps, {}, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{
     onClick?: ((ev: MouseEvent) => any) | undefined;
 }>, {
-    status: import("..").Status;
     disabled: boolean;
-    loading: boolean;
-    icon: boolean;
     ellipsis: boolean;
+    icon: boolean;
+    loading: boolean;
     ellipsisLineClamp: number | string;
     ellipsisExpandTrigger: "click";
     ellipsisTooltip: boolean | import("..").EllipsisTooltipProps;
+    status: import("..").Status;
     iconTooltip: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/es/list/index.d.ts

@@ -67,9 +67,9 @@ declare const List: {
     }, import("vue").PublicProps, {
         split: boolean;
         size: "small" | "medium" | "large";
+        scrollbar: boolean | import("..").ScrollbarProps;
         loading: boolean;
         maxHeight: string | number;
-        scrollbar: boolean | import("..").ScrollbarProps;
         bordered: boolean;
         bottomOffset: number;
         hoverable: boolean;
@@ -138,9 +138,9 @@ declare const List: {
     }, {
         split: boolean;
         size: "small" | "medium" | "large";
+        scrollbar: boolean | import("..").ScrollbarProps;
         loading: boolean;
         maxHeight: string | number;
-        scrollbar: boolean | import("..").ScrollbarProps;
         bordered: boolean;
         bottomOffset: number;
         hoverable: boolean;
@@ -211,9 +211,9 @@ declare const List: {
 }, string, {
     split: boolean;
     size: "small" | "medium" | "large";
+    scrollbar: boolean | import("..").ScrollbarProps;
     loading: boolean;
     maxHeight: string | number;
-    scrollbar: boolean | import("..").ScrollbarProps;
     bordered: boolean;
     bottomOffset: number;
     hoverable: boolean;

package/es/list/list.d.ts

@@ -110,9 +110,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     split: boolean;
     size: "small" | "medium" | "large";
+    scrollbar: boolean | ScrollbarProps;
     loading: boolean;
     maxHeight: string | number;
-    scrollbar: boolean | ScrollbarProps;
     bordered: boolean;
     bottomOffset: number;
     hoverable: boolean;

package/es/mention/index.d.ts

@@ -35,9 +35,9 @@ declare const Mention: {
     }>> & Readonly<{
         onSearch?: ((_value: string, _prefix: string) => any) | undefined;
         onFocus?: ((_ev: FocusEvent) => any) | undefined;
-        onChange?: ((_value: string) => any) | undefined;
-        onBlur?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: Event) => any) | undefined;
+        onBlur?: ((_ev: FocusEvent) => any) | undefined;
+        onChange?: ((_value: string) => any) | undefined;
         onSelect?: ((_value: string | number | Record<string, any> | undefined) => any) | undefined;
         "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
     }>, {
@@ -57,10 +57,10 @@ declare const Mention: {
     }, import("vue").PublicProps, {
         type: "input" | "textarea";
         split: string;
-        disabled: boolean;
-        defaultValue: string;
         data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
+        disabled: boolean;
         prefix: string | string[];
+        defaultValue: string;
         allowClear: boolean;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
@@ -102,9 +102,9 @@ declare const Mention: {
     }>> & Readonly<{
         onSearch?: ((_value: string, _prefix: string) => any) | undefined;
         onFocus?: ((_ev: FocusEvent) => any) | undefined;
-        onChange?: ((_value: string) => any) | undefined;
-        onBlur?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: Event) => any) | undefined;
+        onBlur?: ((_ev: FocusEvent) => any) | undefined;
+        onChange?: ((_value: string) => any) | undefined;
         onSelect?: ((_value: string | number | Record<string, any> | undefined) => any) | undefined;
         "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
     }>, {
@@ -116,10 +116,10 @@ declare const Mention: {
     }, {
         type: "input" | "textarea";
         split: string;
-        disabled: boolean;
-        defaultValue: string;
         data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
+        disabled: boolean;
         prefix: string | string[];
+        defaultValue: string;
         allowClear: boolean;
     }>;
     __isFragment?: never;
@@ -158,9 +158,9 @@ declare const Mention: {
 }>> & Readonly<{
     onSearch?: ((_value: string, _prefix: string) => any) | undefined;
     onFocus?: ((_ev: FocusEvent) => any) | undefined;
-    onChange?: ((_value: string) => any) | undefined;
-    onBlur?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: Event) => any) | undefined;
+    onBlur?: ((_ev: FocusEvent) => any) | undefined;
+    onChange?: ((_value: string) => any) | undefined;
     onSelect?: ((_value: string | number | Record<string, any> | undefined) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
 }>, {
@@ -180,10 +180,10 @@ declare const Mention: {
 }, string, {
     type: "input" | "textarea";
     split: string;
-    disabled: boolean;
-    defaultValue: string;
     data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
+    disabled: boolean;
     prefix: string | string[];
+    defaultValue: string;
     allowClear: boolean;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     install: (app: App, options?: SDOptions) => void;

package/es/mention/mention.d.ts

@@ -77,18 +77,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{
     onSearch?: ((_value: string, _prefix: string) => any) | undefined;
     onFocus?: ((_ev: FocusEvent) => any) | undefined;
-    onChange?: ((_value: string) => any) | undefined;
-    onBlur?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: Event) => any) | undefined;
+    onBlur?: ((_ev: FocusEvent) => any) | undefined;
+    onChange?: ((_value: string) => any) | undefined;
     onSelect?: ((_value: string | number | Record<string, any> | undefined) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
 }>, {
     type: "input" | "textarea";
     split: string;
-    disabled: boolean;
-    defaultValue: string;
     data: (string | number | SelectOptionData | SelectOptionGroup)[];
+    disabled: boolean;
     prefix: string | string[];
+    defaultValue: string;
     allowClear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/menu/base-menu.vue.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, PropType, StyleValue } from 'vue';
 import { TriggerProps } from '../trigger';
+import { MenuEllipsisProps } from './interface';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -64,6 +65,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     tooltipProps: {
         type: ObjectConstructor;
     };
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ellipsisProps: {
+        type: PropType<MenuEllipsisProps>;
+        default: undefined;
+    };
     autoOpenSelected: {
         type: BooleanConstructor;
     };
@@ -97,7 +106,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     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<StyleValue>;
     };
@@ -159,6 +168,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     tooltipProps: {
         type: ObjectConstructor;
     };
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ellipsisProps: {
+        type: PropType<MenuEllipsisProps>;
+        default: undefined;
+    };
     autoOpenSelected: {
         type: BooleanConstructor;
     };
@@ -182,25 +199,27 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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: MenuEllipsisProps;
     autoOpen: boolean;
     autoOpenSelected: boolean;
     showCollapseButton: boolean;
-    defaultSelectedKeys: string[];
     defaultOpenKeys: string[];
     siderCollapsed: boolean;
     isRoot: boolean;

package/es/menu/base-menu.vue_vue_type_script_lang.js

@@ -128,6 +128,22 @@ var base_menu_vue_vue_type_script_lang_default = defineComponent({
 		*/
 		tooltipProps: { type: Object },
 		/**
+		* @zh 是否使用 Ellipsis 组件渲染菜单标题
+		* @en Whether to render menu titles with the Ellipsis component
+		*/
+		ellipsis: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh `ellipsis` 开启时透传给 Ellipsis 组件的属性
+		* @en Props passed to the Ellipsis component when `ellipsis` is enabled
+		*/
+		ellipsisProps: {
+			type: Object,
+			default: void 0
+		},
+		/**
 		* @zh 默认展开选中的菜单
 		* @en Expand the selected menus by default
 		* @version 2.8.0
@@ -178,7 +194,7 @@ var base_menu_vue_vue_type_script_lang_default = defineComponent({
 	* @slot expand-icon-right
 	*/
 	setup(props, { emit, slots }) {
-		const { style, mode, theme, levelIndent, accordion, showCollapseButton, scrollConfig, autoScrollIntoView, collapsedWidth, autoOpen, collapsed: propCollapsed, defaultCollapsed, selectedKeys: propSelectedKeys, defaultSelectedKeys, openKeys: propOpenKeys, defaultOpenKeys, triggerProps, tooltipProps, autoOpenSelected, breakpoint, popupMaxHeight, prefixCls, inTrigger, siderCollapsed, isRoot } = toRefs(props);
+		const { style, mode, theme, levelIndent, accordion, showCollapseButton, scrollConfig, autoScrollIntoView, collapsedWidth, autoOpen, collapsed: propCollapsed, defaultCollapsed, selectedKeys: propSelectedKeys, defaultSelectedKeys, openKeys: propOpenKeys, defaultOpenKeys, triggerProps, tooltipProps, ellipsis, ellipsisProps, autoOpenSelected, breakpoint, popupMaxHeight, prefixCls, inTrigger, siderCollapsed, isRoot } = toRefs(props);
 		const { subMenuKeys, menuData } = useMenuDataCollector({ type: isRoot.value ? "menu" : "popupMenu" });
 		const [selectedKeys, setSelectedKeys] = useMergeState(defaultSelectedKeys.value, reactive({ value: propSelectedKeys }));
 		const { openKeys, setOpenKeys, open } = useMenuOpenState(reactive({
@@ -237,6 +253,8 @@ var base_menu_vue_vue_type_script_lang_default = defineComponent({
 			collapsed: computedCollapsed,
 			triggerProps,
 			tooltipProps,
+			ellipsis,
+			ellipsisProps,
 			popupMaxHeight,
 			expandIconDown: usePickSlots(slots, "expand-icon-down"),
 			expandIconRight: usePickSlots(slots, "expand-icon-right"),

package/es/menu/context.d.ts

@@ -1,7 +1,7 @@
 import { InjectionKey, VNodeTypes } from 'vue';
 import { InternalMenuProps, MenuData } from './interface';
 export declare const MenuInjectionKey: InjectionKey<MenuContext>;
-export type MenuContext = Readonly<Pick<InternalMenuProps, 'mode' | 'theme' | 'levelIndent' | 'autoScrollIntoView' | 'scrollConfig' | 'inTrigger' | 'triggerProps' | 'tooltipProps' | 'popupMaxHeight'> & {
+export type MenuContext = Readonly<Pick<InternalMenuProps, 'mode' | 'theme' | 'levelIndent' | 'autoScrollIntoView' | 'scrollConfig' | 'inTrigger' | 'triggerProps' | 'tooltipProps' | 'ellipsis' | 'ellipsisProps' | 'popupMaxHeight'> & {
     selectedKeys: string[];
     openKeys: string[];
     prefixCls: string;

package/es/menu/index.d.ts

@@ -5,7 +5,7 @@ import _MenuItem from './item';
 import _MenuItemGroup from './item-group.vue';
 import _Menu from './menu';
 import _MenuSubMenu from './sub-menu';
-export type { MenuData, MenuDataItem, MenuItemGroupProps, MenuItemProps, MenuMode, MenuProps, MenuTheme, PopupMenuMaxHeightType, SubMenuChildDataType, SubMenuProps, } from './interface';
+export type { MenuData, MenuDataItem, MenuEllipsisProps, MenuItemGroupProps, MenuItemProps, MenuMode, MenuProps, MenuTheme, PopupMenuMaxHeightType, SubMenuChildDataType, SubMenuProps, } from './interface';
 export type MenuCollapseTrigger = 'clickTrigger' | 'responsive';
 export type MenuCollapseHandler = (collapsed: boolean, type: MenuCollapseTrigger) => void;
 export type MenuItemClickHandler = (key: string) => void;

package/es/menu/interface.d.ts

@@ -1,6 +1,7 @@
 import { StyleValue } from 'vue';
 import { Breakpoint } from '../_utils/responsive-observe';
 import { Data } from '../_utils/types';
+import { EllipsisTooltipProps } from '../ellipsis';
 import { TriggerProps } from '../trigger';
 export type MenuTheme = 'light' | 'dark';
 export type MenuMode = 'vertical' | 'horizontal' | 'pop' | 'popButton';
@@ -9,6 +10,11 @@ export interface SubMenuChildDataType {
     children?: SubMenuChildDataType[];
 }
 export type PopupMenuMaxHeightType = boolean | number;
+export interface MenuEllipsisProps {
+    lineClamp?: number | string;
+    expandTrigger?: 'click';
+    tooltip?: boolean | EllipsisTooltipProps;
+}
 export interface MenuProps {
     style: StyleValue | undefined;
     theme: MenuTheme | undefined;
@@ -30,6 +36,8 @@ export interface MenuProps {
     } | undefined;
     triggerProps: TriggerProps | undefined;
     tooltipProps: Data | undefined;
+    ellipsis: boolean;
+    ellipsisProps: MenuEllipsisProps | undefined;
     autoOpenSelected: boolean;
     breakpoint: Breakpoint | undefined;
     popupMaxHeight: PopupMenuMaxHeightType;