@type-dom/ui 0.1.0 → 0.1.2

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);
         }
     }
 }

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 { ITypeConfig, ITypeUL, 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 ITdMenuConfig extends ITypeConfig {
+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;
+}