@type-dom/ui 0.1.1 → 0.1.3

package/src/components/navigation/td-menu/td-menu-collapse-transition/td-menu-collapse-transition.class.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMenuCollapseTransition = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+class TdMenuCollapseTransition extends framework_1.TypeFragment {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdMenuCollapseTransition';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b;
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('menu');
+        const listeners = {
+            onBeforeEnter: (el) => (el.style.opacity = '0.2'),
+            onEnter(el, done) {
+                (0, utils_1.addClass)(el, `${ns.namespace.get()}-opacity-transition`);
+                el.style.opacity = '1';
+                done === null || done === void 0 ? void 0 : done();
+            },
+            onAfterEnter(el) {
+                (0, utils_1.removeClass)(el, `${ns.namespace.get()}-opacity-transition`);
+                el.style.opacity = '';
+            },
+            onBeforeLeave(el) {
+                if (!el)
+                    return;
+                if (!el.dataset)
+                    el.dataset = {};
+                if ((0, utils_1.hasClass)(el, ns.m('collapse'))) {
+                    (0, utils_1.removeClass)(el, ns.m('collapse'));
+                    el.dataset.oldOverflow = el.style.overflow;
+                    el.dataset.scrollWidth = el.clientWidth.toString();
+                    (0, utils_1.addClass)(el, ns.m('collapse'));
+                }
+                else {
+                    (0, utils_1.addClass)(el, ns.m('collapse'));
+                    el.dataset.oldOverflow = el.style.overflow;
+                    el.dataset.scrollWidth = el.clientWidth.toString();
+                    (0, utils_1.removeClass)(el, ns.m('collapse'));
+                }
+                el.style.width = `${el.scrollWidth}px`;
+                el.style.overflow = 'hidden';
+            },
+            onLeave(el) {
+                (0, utils_1.addClass)(el, 'horizontal-collapse-transition');
+                el.style.width = `${el.dataset.scrollWidth}px`;
+            },
+        };
+        this.addChild(new framework_1.Transition(Object.assign(Object.assign({ mode: 'out-in' }, listeners), { slot: (_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default })));
+    }
+}
+exports.TdMenuCollapseTransition = TdMenuCollapseTransition;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style/css");
+require("@element-plus/theme-chalk/el-menu-item.css");

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

@@ -0,0 +1,2 @@
+import '../../../../../components/base/style';
+import '../../../../../theme-chalk/menu-item.scss';

package/src/components/navigation/td-menu/td-menu-item/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../../components/base/style");
+require("../../../../../theme-chalk/menu-item.scss");

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

@@ -0,0 +1,11 @@
+import { TypeFragment } from '@type-dom/framework';
+import { ITdMenuItem, TdMenuItemProps } from './td-menu-item.interface';
+import './style/index';
+declare const COMPONENT_NAME = "TdMenuItem";
+export declare class TdMenuItem extends TypeFragment implements ITdMenuItem {
+    className: typeof COMPONENT_NAME;
+    props: TdMenuItemProps;
+    constructor(params?: TdMenuItemProps);
+    setup(): void;
+}
+export {};

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

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMenuItem = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const td_tooltip_class_1 = require("../../../feedback/td-tooltip/td-tooltip.class");
+const use_menu_1 = require("../use-menu");
+const td_menu_item_const_1 = require("./td-menu-item.const");
+require("./style/index");
+const COMPONENT_NAME = 'TdMenuItem';
+class TdMenuItem extends framework_1.TypeFragment {
+    constructor(params = {}) {
+        super();
+        this.className = COMPONENT_NAME;
+        this.addEmits(td_menu_item_const_1.menuItemEmits);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d, _e, _f;
+        const props = this.props;
+        const emit = this.emit;
+        const instance = (0, framework_1.getCurrentInstance)();
+        const rootMenu = (0, framework_1.inject)('rootMenu');
+        const nsMenu = (0, use_namespace_1.useNamespace)('menu');
+        const nsMenuItem = (0, use_namespace_1.useNamespace)('menu-item');
+        if (!rootMenu)
+            (0, utils_1.throwError)(COMPONENT_NAME, 'can not inject root menu');
+        const { parentMenu, indexPath } = (0, use_menu_1.default)(instance, (0, signals_1.toRef)(props.mIndex));
+        const subMenu = (0, framework_1.inject)(`subMenu:${parentMenu.get().uid}`);
+        if (!subMenu)
+            (0, utils_1.throwError)(COMPONENT_NAME, 'can not inject sub menu');
+        console.warn('TdMenuItem props.mIndex is ', props.mIndex, 'rootMenu.activeIndex is ', rootMenu.activeIndex);
+        const active = (0, signals_1.computed)(() => props.mIndex === rootMenu.activeIndex);
+        const item = (0, signals_1.signal)({
+            index: props.mIndex,
+            indexPath: indexPath.get(),
+            active: active.get(),
+        });
+        const handleClick = () => {
+            if (!props.disabled) {
+                rootMenu.handleMenuItemClick({
+                    index: props.mIndex,
+                    indexPath: indexPath.get(),
+                    route: props.route,
+                });
+                emit('click', item.get());
+            }
+        };
+        (0, framework_1.onMounted)(() => {
+            subMenu.addSubMenu(item);
+            rootMenu.addMenuItem(item);
+        });
+        (0, framework_1.onBeforeUnmount)(() => {
+            subMenu.removeSubMenu(item);
+            rootMenu.removeMenuItem(item);
+        });
+        (0, framework_1.defineExpose)({
+            parentMenu,
+            rootMenu,
+            active,
+            nsMenu,
+            nsMenuItem,
+            handleClick,
+        });
+        this.addChild(new framework_1.LI({
+            class: (0, signals_1.computed)(() => [
+                nsMenuItem.b(),
+                nsMenuItem.is('active', active.get()), // todo computed
+                nsMenuItem.is('disabled', props.disabled),
+            ]),
+            attrObj: {
+                role: 'menuitem',
+                tabindex: '-1',
+            },
+            events: {
+                click: handleClick,
+            },
+            slot: ((_a = parentMenu.get()) === null || _a === void 0 ? void 0 : _a.className) === 'TdMenu' &&
+                (0, signals_1.unref)(rootMenu.props.collapse) &&
+                ((_b = props.slots) === null || _b === void 0 ? void 0 : _b.title)
+                ? new td_tooltip_class_1.TdTooltip({
+                    effect: rootMenu.props.popperEffect,
+                    placement: 'right',
+                    fallbackPlacements: ['left'],
+                    persistent: rootMenu.props.persistent,
+                    slot: new framework_1.Div({
+                        class: nsMenu.be('tooltip', 'trigger'),
+                        slot: props.slot,
+                    }),
+                    slots: {
+                        content: (_c = props.slots) === null || _c === void 0 ? void 0 : _c.title,
+                    }
+                })
+                : [
+                    new framework_1.Fragment({
+                        slot: (_d = props.slot) !== null && _d !== void 0 ? _d : (_e = props.slots) === null || _e === void 0 ? void 0 : _e.default,
+                    }),
+                    new framework_1.Fragment({
+                        slot: (_f = props.slots) === null || _f === void 0 ? void 0 : _f.title,
+                    })
+                ]
+        }));
+    }
+}
+exports.TdMenuItem = TdMenuItem;

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

@@ -0,0 +1,4 @@
+import { MenuItemRegistered } from '../types';
+export declare const menuItemEmits: {
+    click: (item: MenuItemRegistered) => boolean;
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuItemEmits = void 0;
+const utils_1 = require("@type-dom/utils");
+// export const menuItemProps: TdMenuItemProps = {
+//   index: null,
+// }
+exports.menuItemEmits = {
+    click: (item) => (0, utils_1.isString)(item.index) && (0, utils_1.isArray)(item.indexPath),
+};

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

@@ -0,0 +1,20 @@
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+import { RouteRecordRaw } from '@type-dom/router';
+export interface ITdMenuItem extends ITypeFragment {
+    className: 'TdMenuItem';
+}
+export interface TdMenuItemProps extends TypeFragmentProps {
+    /**
+     * @description unique identification
+     *     default: null,
+     */
+    mIndex?: string;
+    /**
+     * @description Vue Router object
+     */
+    route?: RouteRecordRaw;
+    /**
+     * @description whether disabled
+     */
+    disabled?: boolean;
+}

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

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

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

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

package/src/components/navigation/td-menu/td-menu-item-group/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style/css");
+require("@element-plus/theme-chalk/el-menu-item-group.css");

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

@@ -0,0 +1,2 @@
+import '../../../../../components/base/style';
+import '../../../../../theme-chalk/menu-item-group.scss';

package/src/components/navigation/td-menu/td-menu-item-group/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../../components/base/style");
+require("../../../../../theme-chalk/menu-item-group.scss");

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

@@ -0,0 +1,9 @@
+import { TypeLI } from '@type-dom/framework';
+import { ITdMenuItemGroup, MenuItemGroupProps } from './td-menu-item-group.interface';
+import './style/index';
+export declare class TdMenuItemGroup extends TypeLI implements ITdMenuItemGroup {
+    className: 'TdMenuItemGroup';
+    props: MenuItemGroupProps;
+    constructor(props?: MenuItemGroupProps);
+    setup(): void;
+}

package/src/components/navigation/td-menu/td-menu-item-group/td-menu-item-group.class.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMenuItemGroup = void 0;
+const framework_1 = require("@type-dom/framework");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+require("./style/index");
+class TdMenuItemGroup extends framework_1.TypeLI {
+    constructor(props = {}) {
+        super();
+        this.className = 'TdMenuItemGroup';
+        this.props = this.useParams(props);
+    }
+    setup() {
+        var _a, _b, _c;
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('menu-item-group');
+        this.attr.addClass(ns.b());
+        this.addChildren(new framework_1.Div({
+            class: ns.e('title'),
+            slot: !((_a = props.slots) === null || _a === void 0 ? void 0 : _a.title)
+                ? props.title
+                : props.title,
+        }), new framework_1.UL({
+            slot: (_b = props.slot) !== null && _b !== void 0 ? _b : (_c = props.slots) === null || _c === void 0 ? void 0 : _c.default,
+        }));
+    }
+}
+exports.TdMenuItemGroup = TdMenuItemGroup;

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

@@ -0,0 +1,10 @@
+import { ITypeLI, TypeLIProps } from '@type-dom/framework';
+export interface ITdMenuItemGroup extends ITypeLI {
+    className: 'TdMenuItemGroup';
+}
+export interface MenuItemGroupProps extends TypeLIProps {
+    /**
+     * @description group title
+     */
+    title?: string;
+}

package/src/components/navigation/td-menu/td-menu-item-group/td-menu-item-group.interface.js

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

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

@@ -1,6 +1,7 @@
-import { TypeUL } from '@type-dom/framework';
+import { TypeFragment } from '@type-dom/framework';
 import { ITdMenu, MenuProps } from './td-menu.interface';
-export declare class TdMenu extends TypeUL implements ITdMenu {
+import './style/index';
+export declare class TdMenu extends TypeFragment implements ITdMenu {
     className: 'TdMenu';
     props: MenuProps;
     constructor(params?: MenuProps);

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

@@ -2,42 +2,312 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdMenu = void 0;
 const framework_1 = require("@type-dom/framework");
-const var_1 = require("../../../styles/var");
-class TdMenu extends framework_1.TypeUL {
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const index_1 = require("../../../hooks/use-namespace/index");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const menu_bar_1 = require("./utils/menu-bar");
+const td_sub_menu_class_1 = require("./td-sub-menu/td-sub-menu.class");
+const td_menu_collapse_transition_class_1 = require("./td-menu-collapse-transition/td-menu-collapse-transition.class");
+const td_menu_const_1 = require("./td-menu.const");
+const use_menu_css_var_1 = require("./use-menu-css-var");
+require("./style/index");
+class TdMenu extends framework_1.TypeFragment {
     constructor(params = {}) {
         super();
-        // this.useTag('ul');
         this.className = 'TdMenu';
-        this.attr.addObj({
-            name: 'td-menu',
-            role: 'menubar',
-        });
-        this.style.addObj({
-            // border-right: solid 1px var(--el-menu-border-color),
-            borderRight: 'solid 1px ' + var_1.$borderColor.base,
-            listStyle: 'none',
-            position: 'relative',
-            margin: '0',
-            paddingLeft: '0',
-            // background-color: var(--el-menu-bg-color),
-            backgroundColor: var_1.$borderColor.base,
-            boxSizing: 'border-box',
-        });
+        this.addEmits(td_menu_const_1.menuEmits);
+        this.assignProps(td_menu_const_1.menuProps);
         this.props = this.useParams(params);
     }
     setup() {
         const props = this.props;
-        const mode = props.mode || 'vertical';
-        if (mode === 'vertical') {
-            this.style.addObj({});
+        const emit = this.emit;
+        const instance = (0, framework_1.getCurrentInstance)();
+        // const router = instance?.root?.props.globalProperties.$router as Router
+        const menu = (0, signals_1.signal)();
+        const nsMenu = (0, index_1.useNamespace)('menu');
+        const nsSubMenu = (0, index_1.useNamespace)('sub-menu');
+        // data
+        const sliceIndex = (0, signals_1.signal)(-1);
+        const openedMenus = (0, signals_1.signal)(props.defaultOpeneds && !(0, signals_1.unref)(props.collapse)
+            ? props.defaultOpeneds.slice(0)
+            : []);
+        const activeIndex = (0, signals_1.signal)((0, signals_1.unref)(props.defaultActive));
+        const items = (0, signals_1.signal)({});
+        const subMenus = (0, signals_1.signal)({});
+        // computed
+        const isMenuPopup = (0, signals_1.computed)(() => props.mode === 'horizontal' ||
+            (props.mode === 'vertical' && (0, signals_1.unref)(props.collapse)));
+        // methods
+        const initMenu = () => {
+            const activeItem = activeIndex.get() && items.get()[activeIndex.get()];
+            if (!activeItem || props.mode === 'horizontal' || props.collapse)
+                return;
+            const indexPath = (0, signals_1.unref)(activeItem.indexPath);
+            // 展开该菜单项的路径上所有子菜单
+            // expand all subMenus of the menu item
+            indexPath.forEach((index) => {
+                const subMenu = subMenus.get()[index];
+                subMenu && openMenu(index, (0, signals_1.unref)(subMenu.indexPath));
+            });
+        };
+        const openMenu = (index, indexPath) => {
+            if (openedMenus.get().includes(index))
+                return;
+            // 将不在该菜单路径下的其余菜单收起
+            // collapse all menu that are not under current menu item
+            if (props.uniqueOpened) {
+                openedMenus.set(openedMenus.get().filter((index) => indexPath.includes(index)));
+            }
+            openedMenus.get().push(index);
+            emit('open', index, indexPath);
+        };
+        const close = (index) => {
+            const i = openedMenus.get().indexOf(index);
+            if (i !== -1) {
+                openedMenus.get().splice(i, 1);
+            }
+        };
+        const closeMenu = (index, indexPath) => {
+            close(index);
+            emit('close', index, indexPath);
+        };
+        const handleSubMenuClick = ({ index, indexPath }) => {
+            console.warn('handleSubMenuClick . ');
+            const isOpened = openedMenus.get().includes(index);
+            isOpened ? closeMenu(index, (0, signals_1.unref)(indexPath)) : openMenu(index, (0, signals_1.unref)(indexPath));
+        };
+        const handleMenuItemClick = (menuItem) => {
+            console.warn('handleMenuItemClick . ');
+            if (props.mode === 'horizontal' || (0, signals_1.unref)(props.collapse)) {
+                openedMenus.set([]);
+            }
+            const { index, indexPath } = menuItem;
+            if ((0, utils_1.isNil)(index) || (0, utils_1.isNil)(indexPath))
+                return;
+            // if (props.router && router) {
+            //   const route = menuItem.route || index
+            //   const routerResult = router.push(route).then((res: any) => {
+            //     if (!res) activeIndex.set(index)
+            //     return res
+            //   })
+            //   emit(
+            //     'select',
+            //     index,
+            //     indexPath,
+            //     { index, indexPath, route },
+            //     routerResult
+            //   )
+            // } else {
+            console.warn('index is ', index);
+            activeIndex.set(index);
+            emit('select', index, indexPath, { index, indexPath });
+            // }
+        };
+        const updateActiveIndex = (val) => {
+            var _a;
+            const itemsInData = items.get();
+            const item = itemsInData[val] ||
+                (activeIndex.get() && itemsInData[activeIndex.get()]) ||
+                itemsInData[(0, signals_1.unref)(props.defaultActive)];
+            activeIndex.set((_a = item === null || item === void 0 ? void 0 : item.index) !== null && _a !== void 0 ? _a : val);
+        };
+        const calcMenuItemWidth = (menuItem) => {
+            const computedStyle = getComputedStyle(menuItem);
+            const marginLeft = Number.parseInt(computedStyle.marginLeft, 10);
+            const marginRight = Number.parseInt(computedStyle.marginRight, 10);
+            return menuItem.offsetWidth + marginLeft + marginRight || 0;
+        };
+        const calcSliceIndex = () => {
+            var _a, _b;
+            if (!menu.get())
+                return -1;
+            const items = Array.from((_b = (_a = menu.get()) === null || _a === void 0 ? void 0 : _a.childNodes) !== null && _b !== void 0 ? _b : []).filter((item) => item.nodeName !== '#text' || item.nodeValue);
+            const moreItemWidth = 64;
+            const computedMenuStyle = getComputedStyle(menu.get());
+            const paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10);
+            const paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10);
+            const menuWidth = menu.get().clientWidth - paddingLeft - paddingRight;
+            let calcWidth = 0;
+            let sliceIndex = 0;
+            items.forEach((item, index) => {
+                if (item.nodeName === '#comment')
+                    return;
+                calcWidth += calcMenuItemWidth(item);
+                if (calcWidth <= menuWidth - moreItemWidth) {
+                    sliceIndex = index + 1;
+                }
+            });
+            return sliceIndex === items.length ? -1 : sliceIndex;
+        };
+        const getIndexPath = (index) => subMenus.get()[index].indexPath;
+        // Common computer monitor FPS is 60Hz, which means 60 redraws per second. Calculation formula: 1000ms/60 ≈ 16.67ms, In order to avoid a certain chance of repeated triggering when `resize`, set wait to 16.67 * 2 = 33.34
+        const debounce = (fn, wait = 33.34) => {
+            let timmer;
+            return () => {
+                timmer && clearTimeout(timmer);
+                timmer = setTimeout(() => {
+                    fn();
+                }, wait);
+            };
+        };
+        let isFirstTimeRender = true;
+        const handleResize = () => {
+            if (sliceIndex.get() === calcSliceIndex())
+                return;
+            const callback = () => {
+                sliceIndex.set(-1);
+                (0, framework_1.nextTick)(() => {
+                    sliceIndex.set(calcSliceIndex());
+                });
+            };
+            // execute callback directly when first time resize to avoid shaking
+            isFirstTimeRender ? callback() : debounce(callback)();
+            isFirstTimeRender = false;
+        };
+        (0, signals_1.watch)(() => (0, signals_1.unref)(props.defaultActive), (currentActive) => {
+            if (!items.get()[currentActive]) {
+                activeIndex.set('');
+            }
+            updateActiveIndex(currentActive);
+        });
+        (0, signals_1.watch)(() => (0, signals_1.unref)(props.collapse), (value) => {
+            if (value)
+                openedMenus.set([]);
+        });
+        (0, signals_1.watch)(items, initMenu);
+        let resizeStopper;
+        (0, signals_1.effect)(() => {
+            if (props.mode === 'horizontal' && props.ellipsis)
+                resizeStopper = (0, framework_1.useResizeObserver)(menu, handleResize).stop;
+            else
+                resizeStopper === null || resizeStopper === void 0 ? void 0 : resizeStopper();
+        });
+        const mouseInChild = (0, signals_1.signal)(false);
+        // provide
+        // {
+        const addSubMenu = (item) => {
+            subMenus.get()[item.get().index] = item;
+        };
+        const removeSubMenu = (item) => {
+            delete subMenus.get()[item.get().index];
+        };
+        const addMenuItem = (item) => {
+            items.get()[item.get().index] = item;
+        };
+        const removeMenuItem = (item) => {
+            delete items.get()[item.get().index];
+        };
+        (0, framework_1.provide)('rootMenu', {
+            props,
+            openedMenus: openedMenus,
+            items: items.get(),
+            subMenus: subMenus.get(),
+            activeIndex: activeIndex.get(),
+            isMenuPopup: isMenuPopup.get(),
+            addMenuItem,
+            removeMenuItem,
+            addSubMenu,
+            removeSubMenu,
+            openMenu,
+            closeMenu,
+            handleMenuItemClick,
+            handleSubMenuClick,
+        });
+        (0, framework_1.provide)(`subMenu:${instance.uid}`, {
+            addSubMenu,
+            removeSubMenu,
+            mouseInChild,
+            level: 0,
+        });
+        // }
+        // lifecycle
+        (0, framework_1.onMounted)(() => {
+            if (props.mode === 'horizontal') {
+                new menu_bar_1.Menu(instance.dom, nsMenu.namespace.get());
+            }
+        });
+        // {
+        const open = (index) => {
+            const { indexPath } = subMenus.get()[index];
+            (0, signals_1.unref)(indexPath).forEach((i) => openMenu(i, (0, signals_1.unref)(indexPath)));
+        };
+        (0, framework_1.defineExpose)({
+            open,
+            close,
+            handleResize,
+        });
+        // }
+        const ulStyle = (0, use_menu_css_var_1.useMenuCssVar)(props, 0);
+        // this.slotChildren(props.slot);
+        let slot = (0, utils_1.ensureArray)(props.slot);
+        const vShowMore = [];
+        if (props.mode === 'horizontal' && menu.get()) {
+            const originalSlot = (0, framework_1.flattedChildren)(slot);
+            const slotDefault = sliceIndex.get() === -1
+                ? originalSlot
+                : originalSlot.slice(0, sliceIndex.get());
+            const slotMore = sliceIndex.get() === -1 ? [] : originalSlot.slice(sliceIndex.get());
+            if ((slotMore === null || slotMore === void 0 ? void 0 : slotMore.length) && props.ellipsis) {
+                slot = slotDefault;
+                vShowMore.push(new td_sub_menu_class_1.TdSubMenu({
+                    sIndex: 'sub-menu-more',
+                    class: nsSubMenu.e('hide-arrow'),
+                    popperOffset: props.popperOffset,
+                    slots: {
+                        title: () => new td_icon_class_1.TdIcon({
+                            class: nsSubMenu.e('icon-more'),
+                            slot: new props.ellipsisIcon(),
+                        }),
+                        default: slotMore,
+                    }
+                }));
+            }
+        }
+        // todo clickoutside
+        // const directives: DirectiveArguments = props.closeOnClickOutside
+        //   ? [
+        //     [
+        //       vClickoutside,
+        //       () => {
+        //         if (!openedMenus.value.length) return
+        //
+        //         if (!mouseInChild.value) {
+        //           openedMenus.value.forEach((openedMenu) =>
+        //             emit('close', openedMenu, getIndexPath(openedMenu))
+        //           )
+        //
+        //           openedMenus.value = []
+        //         }
+        //       },
+        //     ],
+        //   ]
+        //   : []
+        const vMenu = new framework_1.UL({
+            // key: String(props.collapse),
+            refDom: menu,
+            attrObj: {
+                role: 'menubar',
+                class: props.class,
+            },
+            styleObj: ulStyle.get(),
+            class: {
+                [nsMenu.b()]: true,
+                [nsMenu.m(props.mode)]: true,
+                [nsMenu.m('collapse')]: props.collapse,
+            },
+            slot: [...slot, ...vShowMore],
+            // directives
+        });
+        console.log('vMenu is ', vMenu);
+        if (props.collapseTransition && props.mode === 'vertical') {
+            this.addChild(new td_menu_collapse_transition_class_1.TdMenuCollapseTransition({
+                slot: vMenu
+            }));
         }
         else {
-            this.style.addObj({
-                display: 'flex',
-                flexWrap: 'nowrap',
-                borderRight: 'none',
-                // height: var(--el-menu-horizontal-height),
-            });
+            this.addChild(vMenu);
         }
     }
 }