@type-dom/ui 0.1.0 → 0.1.2

package/src/components/navigation/td-menu/td-sub-menu/td-sub-menu.class.js

@@ -0,0 +1,301 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSubMenu = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const svgs_1 = require("@type-dom/svgs");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const td_tooltip_class_1 = require("../../../feedback/td-tooltip/td-tooltip.class");
+const td_collapse_transition_class_1 = require("../../../data/td-collapse-transition/td-collapse-transition.class");
+const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
+const use_menu_1 = require("../use-menu");
+const use_menu_css_var_1 = require("../use-menu-css-var");
+const COMPONENT_NAME = 'TdSubMenu';
+class TdSubMenu extends framework_1.TypeFragment {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdSubMenu';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d, _e;
+        const props = this.props;
+        const instance = (0, framework_1.getCurrentInstance)();
+        const { indexPath, parentMenu } = (0, use_menu_1.default)(instance, (0, signals_1.computed)(() => props.sIndex));
+        const nsMenu = (0, use_namespace_1.useNamespace)('menu');
+        const nsSubMenu = (0, use_namespace_1.useNamespace)('sub-menu');
+        // inject
+        const rootMenu = (0, framework_1.inject)('rootMenu');
+        if (!rootMenu)
+            (0, utils_1.throwError)(COMPONENT_NAME, 'can not inject root menu');
+        const subMenu = (0, framework_1.inject)(`subMenu:${parentMenu.get().uid}`);
+        if (!subMenu)
+            (0, utils_1.throwError)(COMPONENT_NAME, 'can not inject sub menu');
+        const items = (0, signals_1.signal)({});
+        const subMenus = (0, signals_1.signal)({});
+        let timeout;
+        const mouseInChild = (0, signals_1.signal)(false);
+        const verticalTitleRef = (0, signals_1.signal)();
+        const vPopper = (0, signals_1.signal)();
+        // computed
+        const currentPlacement = (0, signals_1.computed)(() => mode.get() === 'horizontal' && isFirstLevel.get()
+            ? 'bottom-start'
+            : 'right-start');
+        const subMenuTitleIcon = (0, signals_1.computed)(() => {
+            return (mode.get() === 'horizontal' && isFirstLevel.get()) ||
+                (mode.get() === 'vertical' && !rootMenu.props.collapse)
+                ? props.expandCloseIcon && props.expandOpenIcon
+                    ? opened.get()
+                        ? props.expandOpenIcon
+                        : props.expandCloseIcon
+                    : svgs_1.ElArrowDownSvg
+                : props.collapseCloseIcon && props.collapseOpenIcon
+                    ? opened.get()
+                        ? props.collapseOpenIcon
+                        : props.collapseCloseIcon
+                    : svgs_1.ElArrowRightSvg;
+        });
+        const isFirstLevel = (0, signals_1.computed)(() => subMenu.level === 0);
+        const appendToBody = (0, signals_1.computed)(() => {
+            const value = props.teleported;
+            return value === undefined ? isFirstLevel.get() : value;
+        });
+        const menuTransitionName = (0, signals_1.computed)(() => (0, signals_1.unref)(rootMenu.props.collapse)
+            ? `${nsMenu.namespace.get()}-zoom-in-left`
+            : `${nsMenu.namespace.get()}-zoom-in-top`);
+        const fallbackPlacements = (0, signals_1.computed)(() => mode.get() === 'horizontal' && isFirstLevel.get()
+            ? [
+                'bottom-start',
+                'bottom-end',
+                'top-start',
+                'top-end',
+                'right-start',
+                'left-start',
+            ]
+            : [
+                'right-start',
+                'right',
+                'right-end',
+                'left-start',
+                'bottom-start',
+                'bottom-end',
+                'top-start',
+                'top-end',
+            ]);
+        const opened = (0, signals_1.computed)(() => rootMenu.openedMenus.get().includes(props.sIndex));
+        const active = (0, signals_1.computed)(() => [...Object.values(items.get()), ...Object.values(subMenus.get())].some(({ active }) => active));
+        const mode = (0, signals_1.computed)(() => rootMenu.props.mode);
+        const persistent = (0, signals_1.computed)(() => rootMenu.props.persistent);
+        const item = (0, signals_1.signal)({
+            index: props.sIndex,
+            indexPath: indexPath.get(),
+            active: active.get(),
+        });
+        const ulStyle = (0, use_menu_css_var_1.useMenuCssVar)(rootMenu.props, subMenu.level + 1);
+        const subMenuPopperOffset = (0, signals_1.computed)(() => { var _a; return (_a = props.popperOffset) !== null && _a !== void 0 ? _a : rootMenu.props.popperOffset; });
+        const subMenuPopperClass = (0, signals_1.computed)(() => { var _a; return (_a = props.popperClass) !== null && _a !== void 0 ? _a : rootMenu.props.popperClass; });
+        const subMenuShowTimeout = (0, signals_1.computed)(() => { var _a; return (_a = props.showTimeout) !== null && _a !== void 0 ? _a : rootMenu.props.showTimeout; });
+        const subMenuHideTimeout = (0, signals_1.computed)(() => { var _a; return (_a = props.hideTimeout) !== null && _a !== void 0 ? _a : rootMenu.props.hideTimeout; });
+        // methods
+        const doDestroy = () => { var _a, _b, _c, _d, _e; return (_e = (_d = (_c = (_b = (_a = vPopper.get()) === null || _a === void 0 ? void 0 : _a.popperRef) === null || _b === void 0 ? void 0 : _b.get()) === null || _c === void 0 ? void 0 : _c.popperInstanceRef) === null || _d === void 0 ? void 0 : _d.get()) === null || _e === void 0 ? void 0 : _e.destroy(); };
+        const handleCollapseToggle = (value) => {
+            if (!value) {
+                doDestroy();
+            }
+        };
+        const handleClick = () => {
+            if ((rootMenu.props.menuTrigger === 'hover' &&
+                rootMenu.props.mode === 'horizontal') ||
+                (rootMenu.props.collapse && rootMenu.props.mode === 'vertical') ||
+                props.disabled)
+                return;
+            rootMenu.handleSubMenuClick({
+                index: props.sIndex,
+                indexPath: indexPath.get(),
+                active: active.get(),
+            });
+        };
+        const handleMouseenter = (event, showTimeout = subMenuShowTimeout.get()) => {
+            var _a;
+            console.log('handleMouseenter');
+            if ((event === null || event === void 0 ? void 0 : event.type) === 'focus')
+                return;
+            if ((rootMenu.props.menuTrigger === 'click' &&
+                rootMenu.props.mode === 'horizontal') ||
+                (!rootMenu.props.collapse && rootMenu.props.mode === 'vertical') ||
+                props.disabled) {
+                subMenu.mouseInChild.set(true);
+                return;
+            }
+            subMenu.mouseInChild.set(true);
+            timeout === null || timeout === void 0 ? void 0 : timeout();
+            ({ stop: timeout } = (0, framework_1.useTimeoutFn)(() => {
+                rootMenu.openMenu(props.sIndex, indexPath.get());
+            }, showTimeout));
+            if (appendToBody.get()) {
+                (_a = parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.get().dom) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('mouseenter'));
+            }
+        };
+        const handleMouseleave = (deepDispatch = false) => {
+            var _a;
+            if ((rootMenu.props.menuTrigger === 'click' &&
+                rootMenu.props.mode === 'horizontal') ||
+                (!(0, signals_1.unref)(rootMenu.props.collapse) && rootMenu.props.mode === 'vertical')) {
+                subMenu.mouseInChild.set(false);
+                return;
+            }
+            timeout === null || timeout === void 0 ? void 0 : timeout();
+            subMenu.mouseInChild.set(false);
+            ({ stop: timeout } = (0, framework_1.useTimeoutFn)(() => !mouseInChild.get() &&
+                rootMenu.closeMenu(props.sIndex, indexPath.get()), subMenuHideTimeout.get()));
+            if (appendToBody.get() && deepDispatch) {
+                (_a = subMenu.handleMouseleave) === null || _a === void 0 ? void 0 : _a.call(subMenu, true);
+            }
+        };
+        (0, signals_1.watch)(() => (0, signals_1.unref)(rootMenu.props.collapse), (value) => handleCollapseToggle(Boolean(value)));
+        // provide
+        // {
+        const addSubMenu = (item) => {
+            const menus = subMenus.get();
+            console.warn('menus is ', menus);
+            menus[(0, signals_1.unref)(item).index] = item;
+        };
+        const removeSubMenu = (item) => {
+            delete subMenus.get()[(0, signals_1.unref)(item).index];
+        };
+        (0, framework_1.provide)(`subMenu:${instance.uid}`, {
+            addSubMenu,
+            removeSubMenu,
+            handleMouseleave,
+            mouseInChild,
+            level: subMenu.level + 1,
+        });
+        // }
+        // expose
+        (0, framework_1.defineExpose)({
+            opened,
+        });
+        // lifecycle
+        (0, framework_1.onMounted)(() => {
+            rootMenu.addSubMenu(item);
+            subMenu.addSubMenu(item);
+        });
+        (0, framework_1.onBeforeUnmount)(() => {
+            subMenu.removeSubMenu(item);
+            rootMenu.removeSubMenu(item);
+        });
+        const titleTag = [
+            new framework_1.Fragment({
+                slot: (_a = props.slots) === null || _a === void 0 ? void 0 : _a.title,
+            }),
+            new td_icon_class_1.TdIcon({
+                class: nsSubMenu.e('icon-arrow'),
+                styleObj: {
+                    transform: (0, signals_1.computed)(() => opened.get()
+                        ? (props.expandCloseIcon && props.expandOpenIcon) ||
+                            (props.collapseCloseIcon &&
+                                props.collapseOpenIcon &&
+                                (0, signals_1.unref)(rootMenu.props.collapse))
+                            ? 'none'
+                            : 'rotateZ(180deg)'
+                        : 'none'),
+                },
+                // slot: isString(subMenuTitleIcon.get())
+                //     ? h(instance.appContext.components[subMenuTitleIcon.get()])
+                //     : h(subMenuTitleIcon.get()),
+                slot: new (subMenuTitleIcon.get())(),
+            }),
+        ];
+        // this render function is only used for bypass `Vue`'s compiler caused patching issue.
+        const child = rootMenu.isMenuPopup
+            ? new td_tooltip_class_1.TdTooltip({
+                refEl: vPopper,
+                visible: opened.get(),
+                effect: 'light',
+                pure: true,
+                offset: subMenuPopperOffset.get(),
+                showArrow: false,
+                persistent: persistent.get(),
+                popperClass: subMenuPopperClass.get(),
+                placement: currentPlacement.get(),
+                teleported: appendToBody.get(),
+                fallbackPlacements: fallbackPlacements.get(),
+                transition: menuTransitionName.get(),
+                gpuAcceleration: false,
+                slots: {
+                    content: new framework_1.Div({
+                        class: [
+                            nsMenu.m(mode.get()),
+                            nsMenu.m('popup-container'),
+                            subMenuPopperClass.get(),
+                        ],
+                        events: {
+                            mouseenter: (evt) => handleMouseenter(evt, 100),
+                            mouseleave: () => handleMouseleave(true),
+                            focus: (evt) => handleMouseenter(evt, 100),
+                        },
+                        slot: new framework_1.UL({
+                            class: [
+                                nsMenu.b(),
+                                nsMenu.m('popup'),
+                                nsMenu.m(`popup-${currentPlacement.get()}`),
+                            ],
+                            styleObj: ulStyle.get(),
+                            slot: (_b = this.props.slot) !== null && _b !== void 0 ? _b : (_c = props.slots) === null || _c === void 0 ? void 0 : _c.default
+                        })
+                    }),
+                },
+                slot: new framework_1.Div({
+                    class: nsSubMenu.e('title'),
+                    events: {
+                        click: handleClick,
+                    },
+                    slot: titleTag
+                })
+            })
+            : new framework_1.Fragment({
+                slot: [
+                    new framework_1.Div({
+                        class: nsSubMenu.e('title'),
+                        refDom: verticalTitleRef,
+                        events: {
+                            click: handleClick,
+                        },
+                        slot: titleTag,
+                    }),
+                    new td_collapse_transition_class_1.TdCollapseTransition({
+                        slot: new framework_1.UL({
+                            vShow: opened.get(),
+                            class: [nsMenu.b(), nsMenu.m('inline')],
+                            attrObj: {
+                                role: 'menu',
+                            },
+                            styleObj: ulStyle.get(),
+                            slot: (_d = props.slot) !== null && _d !== void 0 ? _d : (_e = props.slots) === null || _e === void 0 ? void 0 : _e.default
+                        })
+                    }),
+                ]
+            });
+        this.addChild(new framework_1.LI({
+            class: [
+                nsSubMenu.b(),
+                nsSubMenu.is('active', active.get()),
+                nsSubMenu.is('opened', opened.get()),
+                nsSubMenu.is('disabled', props.disabled),
+            ],
+            attrObj: {
+                role: 'menuitem',
+                ariaHaspopup: true,
+                ariaExpanded: opened.get()
+            },
+            events: {
+                mouseenter: (evt) => handleMouseenter(evt),
+                mouseleave: () => handleMouseleave(),
+                focus: (evt) => handleMouseenter(evt),
+            },
+            slot: child,
+        }));
+    }
+}
+exports.TdSubMenu = TdSubMenu;

package/src/components/navigation/td-menu/td-sub-menu/td-sub-menu.interface.d.ts

@@ -0,0 +1,53 @@
+import { ITypeFragment, TypeFragmentProps, TypeSvgSvg } from '@type-dom/framework';
+export interface ITdSubMenu extends ITypeFragment {
+    className: 'TdSubMenu';
+}
+export interface TdSubMenuProps extends TypeFragmentProps {
+    /**
+     * @description unique identification
+     *     required: true,
+     */
+    sIndex?: string;
+    /**
+     * @description timeout before showing a sub-menu(inherit `show-timeout` of the menu by default.)
+     */
+    showTimeout?: number;
+    /**
+     * @description timeout before hiding a sub-menu(inherit `hide-timeout` of the menu by default.)
+     */
+    hideTimeout?: number;
+    /**
+     * @description custom class name for the popup menu
+     */
+    popperClass?: string;
+    /**
+     * @description whether the sub-menu is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description whether popup menu is teleported to the body
+     *     default: undefined,
+     */
+    teleported?: boolean;
+    /**
+     * @description offset of the popper (overrides the `popper` of menu)
+     */
+    popperOffset?: number;
+    /**
+     * @description Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect
+     * type: iconPropType,
+     */
+    expandCloseIcon?: typeof TypeSvgSvg;
+    /**
+     * @description Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect
+     */
+    expandOpenIcon?: typeof TypeSvgSvg;
+    /**
+     * @description Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect
+     */
+    collapseCloseIcon?: typeof TypeSvgSvg;
+    /**
+     * @description Icon when menu are collapsed and submenu are opened, `collapse-open-icon` and `collapse-close-icon` need to be passed together to take effect
+     */
+    collapseOpenIcon?: typeof TypeSvgSvg;
+}

package/src/components/navigation/td-menu/td-sub-menu/td-sub-menu.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/navigation/td-menu/types.d.ts

@@ -0,0 +1,36 @@
+import { Ref, Signal } from '@type-dom/signals';
+import { RouteRecordRaw } from '@type-dom/router';
+import { MenuProps } from './td-menu.interface';
+export interface MenuItemRegistered {
+    index: string;
+    indexPath: string[];
+    active: boolean;
+}
+export interface MenuItemClicked {
+    index: string;
+    indexPath: string[];
+    route?: RouteRecordRaw;
+}
+export interface MenuProvider {
+    openedMenus: Signal<string[]>;
+    items: Record<string, MenuItemRegistered>;
+    subMenus: Record<string, MenuItemRegistered>;
+    activeIndex?: string;
+    isMenuPopup?: boolean;
+    props: MenuProps;
+    addMenuItem: (item: Signal<MenuItemRegistered>) => void;
+    removeMenuItem: (item: Signal<MenuItemRegistered>) => void;
+    addSubMenu: (item: Signal<MenuItemRegistered>) => void;
+    removeSubMenu: (item: Signal<MenuItemRegistered>) => void;
+    openMenu: (index: string, indexPath: string[]) => void;
+    closeMenu: (index: string, indexPath: string[]) => void;
+    handleMenuItemClick: (item: MenuItemClicked) => void;
+    handleSubMenuClick: (subMenu: MenuItemRegistered) => void;
+}
+export interface SubMenuProvider {
+    addSubMenu: (item: Signal<MenuItemRegistered>) => void;
+    removeSubMenu: (item: Signal<MenuItemRegistered>) => void;
+    handleMouseleave?: (deepDispatch: boolean) => void;
+    mouseInChild: Ref<boolean>;
+    level: number;
+}

package/src/components/navigation/td-menu/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/navigation/td-menu/use-menu-color.d.ts

@@ -0,0 +1,2 @@
+import type { MenuProps } from './td-menu.interface';
+export default function useMenuColor(props: MenuProps): import("@type-dom/signals").Computed<string>;

package/src/components/navigation/td-menu/use-menu-color.js

@@ -0,0 +1,14 @@
+"use strict";
+// import { computed } from 'vue'
+// import { TinyColor } from '@ctrl/tinycolor'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useMenuColor;
+const signals_1 = require("@type-dom/signals");
+const color_1 = require("@type-dom/color");
+function useMenuColor(props) {
+    const menuBarColor = (0, signals_1.computed)(() => {
+        const color = props.backgroundColor;
+        return color ? new color_1.TinyColor(color).shade(20).toString() : '';
+    });
+    return menuBarColor;
+}

package/src/components/navigation/td-menu/use-menu-css-var.d.ts

@@ -0,0 +1,2 @@
+import type { MenuProps } from './td-menu.interface';
+export declare const useMenuCssVar: (props: MenuProps, level: number) => import("@type-dom/signals").Computed<Record<string, string>>;

package/src/components/navigation/td-menu/use-menu-css-var.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuCssVar = void 0;
+// import { computed } from 'vue'
+const signals_1 = require("@type-dom/signals");
+// import { useNamespace } from '@element-plus/hooks'
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_menu_color_1 = require("./use-menu-color");
+const useMenuCssVar = (props, level) => {
+    const ns = (0, use_namespace_1.useNamespace)('menu');
+    return (0, signals_1.computed)(() => ns.cssVarBlock({
+        'text-color': props.textColor || '',
+        'hover-text-color': props.textColor || '',
+        'bg-color': props.backgroundColor || '',
+        'hover-bg-color': (0, use_menu_color_1.default)(props).get() || '',
+        'active-color': props.activeTextColor || '',
+        level: `${level}`,
+    }));
+};
+exports.useMenuCssVar = useMenuCssVar;

package/src/components/navigation/td-menu/use-menu.d.ts

@@ -0,0 +1,8 @@
+import { TypeElement } from '@type-dom/framework';
+import { Ref } from '@type-dom/signals';
+import { TdSubMenu } from './td-sub-menu/td-sub-menu.class';
+import { TdMenu } from './td-menu.class';
+export default function useMenu(instance: TypeElement, currentIndex: Ref<string | undefined>): {
+    parentMenu: import("@type-dom/signals").Computed<TdMenu | TdSubMenu>;
+    indexPath: import("@type-dom/signals").Computed<string[]>;
+};

package/src/components/navigation/td-menu/use-menu.js

@@ -0,0 +1,31 @@
+"use strict";
+// import { computed } from 'vue'
+// import type { ComponentInternalInstance, Ref } from 'vue'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useMenu;
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+function useMenu(instance, currentIndex) {
+    const indexPath = (0, signals_1.computed)(() => {
+        let parent = instance.parent;
+        const path = (0, utils_1.ensureArray)(currentIndex.get());
+        while (parent.className !== 'TdMenu') {
+            if (parent.props.sIndex) { // todo
+                path.unshift(parent.props.sIndex);
+            }
+            parent = parent.parent;
+        }
+        return path;
+    });
+    const parentMenu = (0, signals_1.computed)(() => {
+        let parent = instance.parent;
+        while (parent && !['TdMenu', 'TdSubMenu'].includes(parent.className)) {
+            parent = parent.parent;
+        }
+        return parent;
+    });
+    return {
+        parentMenu,
+        indexPath,
+    };
+}

package/src/components/navigation/td-menu/utils/menu-bar.d.ts

@@ -0,0 +1,7 @@
+import { RendererNode } from '@type-dom/framework';
+export declare class Menu {
+    domNode: RendererNode;
+    constructor(domNode: RendererNode, namespace: string);
+    init(namespace: string): void;
+}
+export default Menu;

package/src/components/navigation/td-menu/utils/menu-bar.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+// import type { RendererNode } from 'vue'
+const menu_item_1 = require("./menu-item");
+class Menu {
+    constructor(domNode, namespace) {
+        this.domNode = domNode;
+        this.init(namespace);
+    }
+    init(namespace) {
+        const menuChildren = this.domNode.childNodes;
+        Array.from(menuChildren).forEach((child) => {
+            if (child.nodeType === 1) {
+                new menu_item_1.default(child, namespace);
+            }
+        });
+    }
+}
+exports.Menu = Menu;
+exports.default = Menu;

package/src/components/navigation/td-menu/utils/menu-item.d.ts

@@ -0,0 +1,9 @@
+import SubMenu from './submenu';
+declare class MenuItem {
+    domNode: HTMLElement;
+    submenu: SubMenu | null;
+    constructor(domNode: HTMLElement, namespace: string);
+    init(namespace: string): void;
+    addListeners(): void;
+}
+export default MenuItem;

package/src/components/navigation/td-menu/utils/menu-item.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// import { triggerEvent } from '@element-plus/utils'
+// import { EVENT_CODE } from '@element-plus/constants'
+const utils_1 = require("@type-dom/utils");
+const aria_1 = require("../../../../constants/aria");
+const submenu_1 = require("./submenu");
+class MenuItem {
+    constructor(domNode, namespace) {
+        this.domNode = domNode;
+        this.submenu = null;
+        this.submenu = null;
+        this.init(namespace);
+    }
+    init(namespace) {
+        this.domNode.setAttribute('tabindex', '0');
+        const menuChild = this.domNode.querySelector(`.${namespace}-menu`);
+        if (menuChild) {
+            this.submenu = new submenu_1.default(this, menuChild);
+        }
+        this.addListeners();
+    }
+    addListeners() {
+        this.domNode.addEventListener('keydown', (event) => {
+            let prevDef = false;
+            switch (event.code) {
+                case aria_1.EVENT_CODE.down: {
+                    (0, utils_1.triggerEvent)(event.currentTarget, 'mouseenter');
+                    this.submenu && this.submenu.gotoSubIndex(0);
+                    prevDef = true;
+                    break;
+                }
+                case aria_1.EVENT_CODE.up: {
+                    (0, utils_1.triggerEvent)(event.currentTarget, 'mouseenter');
+                    this.submenu &&
+                        this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
+                    prevDef = true;
+                    break;
+                }
+                case aria_1.EVENT_CODE.tab: {
+                    (0, utils_1.triggerEvent)(event.currentTarget, 'mouseleave');
+                    break;
+                }
+                case aria_1.EVENT_CODE.enter:
+                case aria_1.EVENT_CODE.numpadEnter:
+                case aria_1.EVENT_CODE.space: {
+                    prevDef = true;
+                    event.currentTarget.click();
+                    break;
+                }
+            }
+            if (prevDef) {
+                event.preventDefault();
+            }
+        });
+    }
+}
+exports.default = MenuItem;

package/src/components/navigation/td-menu/utils/submenu.d.ts

@@ -0,0 +1,12 @@
+import type MenuItem from './menu-item';
+declare class SubMenu {
+    parent: MenuItem;
+    domNode: ParentNode;
+    subMenuItems: NodeList;
+    subIndex: number;
+    constructor(parent: MenuItem, domNode: ParentNode);
+    init(): void;
+    gotoSubIndex(idx: number): void;
+    addListeners(): void;
+}
+export default SubMenu;

package/src/components/navigation/td-menu/utils/submenu.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// import { triggerEvent } from '@element-plus/utils'
+// import { EVENT_CODE } from '@element-plus/constants'
+const utils_1 = require("@type-dom/utils");
+const aria_1 = require("../../../../constants/aria");
+class SubMenu {
+    constructor(parent, domNode) {
+        this.parent = parent;
+        this.domNode = domNode;
+        this.subIndex = 0;
+        this.subIndex = 0;
+        this.init();
+    }
+    init() {
+        this.subMenuItems = this.domNode.querySelectorAll('li');
+        this.addListeners();
+    }
+    gotoSubIndex(idx) {
+        if (idx === this.subMenuItems.length) {
+            idx = 0;
+        }
+        else if (idx < 0) {
+            idx = this.subMenuItems.length - 1;
+        }
+        this.subMenuItems[idx].focus();
+        this.subIndex = idx;
+    }
+    addListeners() {
+        const parentNode = this.parent.domNode;
+        Array.prototype.forEach.call(this.subMenuItems, (el) => {
+            el === null || el === void 0 ? void 0 : el.addEventListener('keydown', (event) => {
+                let prevDef = false;
+                switch (event.code) {
+                    case aria_1.EVENT_CODE.down: {
+                        this.gotoSubIndex(this.subIndex + 1);
+                        prevDef = true;
+                        break;
+                    }
+                    case aria_1.EVENT_CODE.up: {
+                        this.gotoSubIndex(this.subIndex - 1);
+                        prevDef = true;
+                        break;
+                    }
+                    case aria_1.EVENT_CODE.tab: {
+                        (0, utils_1.triggerEvent)(parentNode, 'mouseleave');
+                        break;
+                    }
+                    case aria_1.EVENT_CODE.enter:
+                    case aria_1.EVENT_CODE.numpadEnter:
+                    case aria_1.EVENT_CODE.space: {
+                        prevDef = true;
+                        event.currentTarget.click();
+                        break;
+                    }
+                }
+                if (prevDef) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+                return false;
+            });
+        });
+    }
+}
+exports.default = SubMenu;

package/src/components/navigation/td-menu-item/style/css.d.ts

@@ -0,0 +1,2 @@
+import '../../../base/style/css';
+import '@element-plus/theme-chalk/el-menu-item.css';