@type-dom/ui 0.1.1 → 0.1.2

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

@@ -0,0 +1,8 @@
+import { MenuProps } from './td-menu.interface';
+import { MenuItemClicked } from './types';
+export declare const menuProps: MenuProps;
+export declare const menuEmits: {
+    close: (index: string, indexPath: string[]) => boolean;
+    open: (index: string, indexPath: string[]) => boolean;
+    select: (index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void>) => boolean;
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuEmits = exports.menuProps = void 0;
+const svgs_1 = require("@type-dom/svgs");
+const utils_1 = require("@type-dom/utils");
+exports.menuProps = {
+    mode: 'vertical',
+    defaultActive: '',
+    defaultOpeneds: [],
+    menuTrigger: 'hover',
+    collapseTransition: true,
+    ellipsis: true,
+    popperOffset: 6,
+    ellipsisIcon: svgs_1.ElMoreSvg,
+    popperEffect: 'dark',
+    showTimeout: 300,
+    hideTimeout: 300,
+    persistent: true,
+};
+const checkIndexPath = (indexPath) => (0, utils_1.isArray)(indexPath) && indexPath.every((path) => (0, utils_1.isString)(path));
+exports.menuEmits = {
+    close: (index, indexPath) => (0, utils_1.isString)(index) && checkIndexPath(indexPath),
+    open: (index, indexPath) => (0, utils_1.isString)(index) && checkIndexPath(indexPath),
+    select: (index, indexPath, item, routerResult // | NavigationFailure>
+    ) => (0, utils_1.isString)(index) &&
+        checkIndexPath(indexPath) &&
+        (0, utils_1.isObject)(item) &&
+        (routerResult === undefined || routerResult instanceof Promise),
+};

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

@@ -1,23 +1,102 @@
-import { ITypeUL, TypeULProps, Router } from '@type-dom/framework';
-export interface ITdMenu extends ITypeUL {
+import { TypeSvgSvg, ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+import { PopperEffect } from '../../feedback/td-popper/td-popper.const';
+import { MaybeRef } from '@type-dom/signals';
+export interface ITdMenu extends ITypeFragment {
     className: 'TdMenu';
 }
-export interface MenuProps extends TypeULProps {
+export interface MenuProps extends TypeFragmentProps {
+    /**
+     * @description menu display mode
+     */
     mode?: 'horizontal' | 'vertical';
-    defaultActive?: string;
+    /**
+     * @description index of active menu on page load
+     *     default: '',
+     */
+    defaultActive?: MaybeRef<string>;
+    /**
+     * @description array that contains indexes of currently active sub-menus
+     */
+    defaultOpeneds?: string[];
+    /**
+     * @description whether only one sub-menu can be active
+     */
     uniqueOpened?: boolean;
-    router?: Router;
+    /**
+     * @description whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action. Use with `default-active` to set the active item on load.
+     */
+    router?: boolean;
+    /**
+     * @description how sub-menus are triggered, only works when `mode` is 'horizontal'
+     */
     menuTrigger?: 'hover' | 'click';
-    collapse?: boolean;
+    /**
+     * @description whether the menu is collapsed (available only in vertical mode)
+     */
+    collapse?: MaybeRef<boolean>;
+    /**
+     * @description background color of Menu (hex format) (deprecated, use `--bg-color` instead)
+     * @deprecated use `--bg-color` instead
+     */
     backgroundColor?: string;
+    /**
+     * @description text color of Menu (hex format) (deprecated, use `--text-color` instead)
+     * @deprecated use `--text-color` instead
+     */
     textColor?: string;
+    /**
+     * @description text color of currently active menu item (hex format) (deprecated, use `--active-color` instead)
+     * @deprecated use `--active-color` instead
+     */
     activeTextColor?: string;
+    /**
+     * @description optional, whether menu is collapsed when clicking outside
+     */
     closeOnClickOutside?: boolean;
+    /**
+     * @description whether to enable the collapse transition
+     *     default: true,
+     */
     collapseTransition?: boolean;
+    /**
+     * @description whether the menu is ellipsis (available only in horizontal mode)
+     *     default: true,
+     */
     ellipsis?: boolean;
+    /**
+     * @description offset of the popper (effective for all submenus)
+     *     default: 6,
+     */
     popperOffset?: number;
-    popperEffect?: 'dark' | 'light';
+    /**
+     * @description custom ellipsis icon (available only in horizontal mode and ellipsis is true)
+     *     type: iconPropType,
+     *     default: () => ElMoreSvg,
+     *   },
+     */
+    ellipsisIcon?: typeof TypeSvgSvg;
+    /**
+     * @description Tooltip theme, built-in theme: `dark` / `light` when menu is collapsed
+     *     default: 'dark',
+     */
+    popperEffect?: PopperEffect;
+    /**
+     * @description custom class name for all popup menus
+     */
     popperClass?: string;
+    /**
+     * @description control timeout for all menus before showing
+     *     default: 300,
+     */
     showTimeout?: number;
+    /**
+     * @description control timeout for all menus before hiding
+     *     default: 300,
+     */
     hideTimeout?: number;
+    /**
+     * @description when menu inactive and `persistent` is `false` , dropdown menu will be destroyed
+     *     default: true,
+     */
+    persistent?: boolean;
 }

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

@@ -0,0 +1,10 @@
+import { TypeFragment } from '@type-dom/framework';
+import { Computed } from '@type-dom/signals';
+import { ITdSubMenu, TdSubMenuProps } from './td-sub-menu.interface';
+export declare class TdSubMenu extends TypeFragment implements ITdSubMenu {
+    className: 'TdSubMenu';
+    props: TdSubMenuProps;
+    opened?: Computed<boolean>;
+    constructor(params?: TdSubMenuProps);
+    setup(): void;
+}

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;