vft 0.0.1

package/src/web/menu/sub-menu.vue

@@ -0,0 +1,440 @@
+<script lang="tsx" setup>
+import { renderTNode, singleAttrToObj } from '@vri/utils';
+import { useTimeoutFn } from '@vueuse/core';
+import { Tooltip, type ToolTipProps } from '../tooltip';
+import type { Placement } from 'element-plus/es/components/popper';
+import { Icon, type IconProps } from '../../common';
+import { useNamespace } from '../../use';
+import { throwError } from '../../utils';
+import type { CSSProperties, VNodeArrayChildren } from 'vue';
+import {
+  computed,
+  Fragment,
+  getCurrentInstance,
+  h,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  vShow,
+  watch,
+  withDirectives,
+  useSlots
+} from 'vue';
+import CollapseTransition from '../transition/collapse-transition.vue';
+import type { MenuProvider, SubMenuProvider } from './types';
+import useMenu from './use-menu';
+import { useMenuCssVar } from './use-menu-css-var';
+
+interface Props {
+  /** 唯一标志 */
+  index: string;
+  /** 展开 sub-menu 的延时 */
+  showTimeout?: number;
+  /** 收起 sub-menu 的延时 */
+  hideTimeout?: number;
+  /** 为 popper 添加类名 */
+  popperClass?: ClassType;
+  /** 是否禁用 */
+  disabled?: boolean;
+  popperAppendToBody?: boolean;
+  /** 弹出窗口偏移 */
+  popperOffset?: number;
+  expandIcon?: IconProps;
+  collapseIcon?: IconProps;
+  title?: string;
+  icon?: IconProps | string;
+  showArrow?: boolean;
+  toolTipCfg?: ToolTipProps;
+}
+
+const {
+  index,
+  showTimeout = 300,
+  hideTimeout = 300,
+  popperClass,
+  disabled,
+  popperAppendToBody = undefined,
+  popperOffset = 6,
+  expandIcon = {},
+  collapseIcon = {},
+  icon,
+  showArrow = true,
+  toolTipCfg
+} = defineProps<Props>();
+
+const ns = /* hoist-static*/ useNamespace('sub-menu');
+
+defineOptions({
+  name: ns.b()
+});
+
+const instance = getCurrentInstance()!;
+
+// 返回当前 sub-menu 对应的 indexPath 页面中对 submenu 定义的 index parentMenu -> vri-menu 组件
+const { indexPath, parentMenu } = useMenu(instance, computed(() => index));
+
+const nsMenu = useNamespace('menu');
+const nsSubMenu = useNamespace('sub-menu');
+
+// 接受 vri-menu 组件中注入的数据
+const rootMenu = inject<MenuProvider>('rootMenu');
+if (!rootMenu) throwError(ns.b(), 'can not inject root menu');
+
+// 接受 vri-menu 组件中注入的数据 parentMenu.value!.uid 当前 sub-menu 组件对应的 menu.vue 组件
+const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value!.uid}`);
+if (!subMenu) throwError(ns.b(), 'can not inject sub menu');
+
+/**
+ * 格式如下
+ * ```
+ * {
+ *  1-1:{index: '1-1', indexPath: ['mio', '1-1'], active: false},
+ *  1-2:{index: '1-2', indexPath: ['mio', '1-2'], active: false}
+ * }
+ * ```
+ * @param {MenuItemRegistered} item
+ */
+const subMenus = ref<MenuProvider['subMenus']>({});
+
+let timeout: (() => void) | undefined;
+const mouseInChild = ref(false);
+
+// sub-menu-title 的 ref
+const verticalTitleRef = ref<HTMLDivElement>();
+// tooltip 的实例
+const vPopper = ref(null);
+
+// toolTop 的展示位置
+const currentPlacement = computed<Placement>(
+  () => (mode.value === 'horizontal' && isFirstLevel.value ? 'bottom-start' : 'right-start'));
+
+// 是否为第一级的 subMenu
+const isFirstLevel = computed(() => {
+  return subMenu.level === 0;
+});
+
+const appendToBody = computed(() => {
+  return popperAppendToBody === undefined ? isFirstLevel.value : Boolean(popperAppendToBody);
+});
+
+// toolTip 弹出的动画名称
+const menuTransitionName = computed(
+  () => (rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`));
+
+const fallbackPlacements = computed<Placement[]>(() =>
+  mode.value === 'horizontal' && isFirstLevel.value
+    ? ['bottom-start', 'bottom-end', 'top-start', 'top-end', 'right-start', 'left-start']
+    : ['right-start', 'left-start', 'bottom-start', 'bottom-end', 'top-start', 'top-end']
+);
+
+// 获取当前的 index 是否包含在 openedMenus 中，表示当前 sub-menu 是否已经展开，子节点就是通过这个使用 v-show 来显隐
+const opened = computed(() => rootMenu.openedMenus.includes(index));
+
+const active = computed(() => {
+  let isActive = false;
+  Object.values(subMenus.value).forEach((subItem) => {
+    if (subItem.active) {
+      isActive = true;
+    }
+  });
+  if (index === rootMenu.activeIndex) {
+    isActive = true;
+  }
+  return isActive;
+});
+
+const backgroundColor = computed(() => rootMenu.props.backgroundColor || '');
+
+const activeTextColor = computed(() => rootMenu.props.activeTextColor || '');
+
+const textColor = computed(() => rootMenu.props.textColor || '');
+
+const mode = computed(() => rootMenu.props.mode);
+
+const item = reactive({
+  index,
+  indexPath,
+  active
+});
+
+//
+const titleStyle = computed<CSSProperties>(() => {
+  if (mode.value !== 'horizontal') {
+    return {
+      color: textColor.value
+    };
+  }
+  return {
+    borderBottomColor: active.value ? (rootMenu.props.activeTextColor ? activeTextColor.value : '') : 'transparent',
+    color: active.value ? activeTextColor.value : textColor.value
+  };
+});
+
+// 销毁 toolTip
+const doDestroy = () => vPopper.value?.popperRef?.popperInstanceRef?.destroy();
+
+// 当菜单收缩展开时执行销毁 toolTip
+const handleCollapseToggle = (value: boolean) => {
+  if (!value) {
+    doDestroy();
+  }
+};
+
+// sub-menu 菜单点击事件
+const handleClick = () => {
+  // 以下几种情况不执行点击事件操作
+  if ((rootMenu.props.menuTrigger === 'hover' && rootMenu.props.mode === 'horizontal') || (rootMenu.props.collapse && rootMenu.props.mode === 'vertical') || disabled) return;
+
+  // 调用 menn.vue 中的 handleSubMenuClick 点击事件，传入参数
+  rootMenu.handleSubMenuClick({
+    index: index,
+    indexPath: indexPath.value,
+    active: active.value
+  });
+};
+
+// 滑入 sub-menu 菜单事件
+const handleMouseenter = (event: MouseEvent | FocusEvent, _showTimeout = showTimeout) => {
+  if (event.type === 'focus') {
+    return;
+  }
+  if ((rootMenu.props.menuTrigger === 'click' && rootMenu.props.mode === 'horizontal') || (!rootMenu.props.collapse && rootMenu.props.mode === 'vertical') || disabled) {
+    return;
+  }
+  subMenu.mouseInChild.value = true;
+
+  // 根据 _showTimeout 展开滑入的菜单子项
+  timeout?.();
+  ({ stop: timeout } = useTimeoutFn(() => {
+    rootMenu.openMenu(index, indexPath.value);
+  }, _showTimeout));
+
+  if (appendToBody.value) {
+    parentMenu.value.vnode.el?.dispatchEvent(new MouseEvent('mouseenter'));
+  }
+};
+
+// 离开滑入的菜单
+const handleMouseleave = (deepDispatch = false) => {
+  if ((rootMenu.props.menuTrigger === 'click' && rootMenu.props.mode === 'horizontal') || (!rootMenu.props.collapse && rootMenu.props.mode === 'vertical')) {
+    return;
+  }
+  timeout?.();
+  subMenu.mouseInChild.value = false;
+  ({ stop: timeout } = useTimeoutFn(
+    () => !mouseInChild.value && rootMenu.closeMenu(index, indexPath.value),
+    hideTimeout));
+
+  if (appendToBody.value && deepDispatch) {
+    if (instance.parent?.type.name === 'vri-sub-menu') {
+      subMenu.handleMouseleave?.(true);
+    }
+  }
+};
+
+// 监听菜单的收缩展开决定是否销毁 ToolTip
+watch(
+  () => rootMenu.props.collapse,
+  (value) => handleCollapseToggle(Boolean(value))
+);
+
+// 以下代码在 menu-item.vue 中触发
+{
+  /**
+   * 此函数在 menu-item 中触发，items.value 默认为空对象
+   * 最后添加后的 items 格式如下
+   * ```
+   * {
+   *  1-1:{index: '1-1', indexPath: ['mio', '1-1'], active: false},
+   *  1-2:{index: '1-2', indexPath: ['mio', '1-2'], active: false}
+   * }
+   * ```
+   * @param {MenuItemRegistered} item
+   */
+  const addSubMenu: SubMenuProvider['addSubMenu'] = (item) => {
+    subMenus.value[item.index] = item;
+  };
+  const removeSubMenu: SubMenuProvider['removeSubMenu'] = (item) => {
+    delete subMenus.value[item.index];
+  };
+  provide<SubMenuProvider>(`subMenu:${instance.uid}`, {
+    addSubMenu,
+    removeSubMenu,
+    handleMouseleave,
+    mouseInChild,
+    level: subMenu.level + 1
+  });
+}
+
+defineExpose({
+  opened
+});
+
+onMounted(() => {
+  rootMenu.addSubMenu(item);
+  subMenu.addSubMenu(item);
+});
+
+onBeforeUnmount(() => {
+  subMenu.removeSubMenu(item);
+  rootMenu.removeSubMenu(item);
+});
+
+const slots = useSlots();
+
+// 箭头设置
+const subMenuIcon = computed(() => {
+  // 水平模式第一级 或者 竖直非折叠
+  return (mode.value === 'horizontal' && isFirstLevel.value) || (mode.value === 'vertical' && !rootMenu.props.collapse)
+    ? { icon: 'vi-arrow-down', size: 20, ...expandIcon } :
+    { icon: 'vi-arrow-right', size: 18, ...collapseIcon };
+});
+
+const _icon = computed(() => {
+  return singleAttrToObj(icon, 'icon') as IconProps;
+});
+
+const titleCon = computed(() => {
+  return renderTNode(instance, 'title');
+});
+
+defineRender(() => {
+  // sub-menu 的标题以及展开箭头 icon 相关
+  const titleTag: VNodeArrayChildren = [
+    _icon.value?.icon ? h(Icon, { ..._icon.value }) : null,
+    h(
+      'span',
+      {
+        class: showArrow ? nsSubMenu.e('text') : '',
+        title: instance.props.title
+      },
+      titleCon.value
+    ),
+    showArrow ? h(
+      Icon,
+      {
+        class: nsSubMenu.e('icon-arrow'),
+        ...subMenuIcon.value,
+        style: { transform: opened.value ? 'rotateZ(180deg)' : 'none' }
+      }
+    ) : false
+  ];
+
+  // 给 vri-menu class 这一栏加入 level 等级，以此来区分当前的 level: --vri-menu-level:2;
+  const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1);
+
+  /**
+   * rootMenu.isMenuPopup 是否需要 tooltip 1.水平模式的菜单需要 2.竖直类型的菜单在收缩时需要
+   * 如果需要 tooltip 用 h 函数渲染时，则采用 ElTooltip 组件
+   * @type {VNode}
+   */
+  const child = rootMenu.isMenuPopup
+    ? h(
+      Tooltip,
+      {
+        ref: vPopper,
+        visible: opened.value,
+        effect: 'light',
+        pure: true,
+        offset: popperOffset,
+        showArrow: false,
+        persistent: true,
+        popperClass,
+        placement: currentPlacement.value,
+        teleported: appendToBody.value,
+        fallbackPlacements: fallbackPlacements.value,
+        transition: menuTransitionName.value,
+        gpuAcceleration: false,
+        ...toolTipCfg
+      },
+      {
+        content: () =>
+          h(
+            'div',
+            {
+              class: [nsMenu.m(mode.value), nsMenu.m('popup-container'), popperClass],
+              onMouseenter: (evt: MouseEvent) => handleMouseenter(evt, 100),
+              onMouseleave: () => handleMouseleave(true),
+              onFocus: (evt: FocusEvent) => handleMouseenter(evt, 100)
+            },
+            [
+              h(
+                'ul',
+                {
+                  class: [nsMenu.b(), nsMenu.m('popup'), nsMenu.m(
+                    `popup-${currentPlacement.value}`)],
+                  style: ulStyle.value
+                },
+                [slots.default?.()]
+              )
+            ]
+          ),
+        default: () =>
+          h(
+            'div',
+            {
+              class: nsSubMenu.e('title'),
+              style: [titleStyle.value, { backgroundColor: backgroundColor.value }],
+              onClick: handleClick
+            },
+            titleTag
+          )
+      }
+    )
+    :
+    /**
+     *  Fragment 碎片化节点，可以让 dom 没有根节点
+     *
+     *  以下是无需 tooltip 渲染的组件，通常是侧边栏没有折叠的时候
+     */
+    h(Fragment, {}, [
+      titleCon.value ? h(
+        'div',
+        {
+          class: nsSubMenu.e('title'),
+          style: [titleStyle.value, { backgroundColor: backgroundColor.value }],
+          ref: verticalTitleRef,
+          onClick: handleClick
+        },
+        titleTag
+      ) : null,
+      h(
+        CollapseTransition,
+        {},
+        {
+          default: () =>
+            withDirectives(
+              h(
+                'ul',
+                {
+                  role: 'menu',
+                  class: [nsMenu.b(), nsMenu.m('inline')],
+                  style: ulStyle.value
+                },
+                [slots.default?.()]
+              ),
+              [[vShow, opened.value]]
+            )
+        }
+      )
+    ]);
+
+  return h(
+    'li',
+    {
+      class: [nsSubMenu.b(), nsSubMenu.is('active', active.value),
+        nsSubMenu.is('opened', opened.value), nsSubMenu.is('disabled', disabled)],
+      role: 'menuitem',
+      ariaHaspopup: true,
+      ariaExpanded: opened.value,
+      onMouseenter: handleMouseenter,
+      onMouseleave: () => handleMouseleave(true),
+      onFocus: handleMouseenter
+    },
+    [child]
+  );
+});
+</script>

package/src/web/menu/types.ts

@@ -0,0 +1,66 @@
+import type { Ref } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+
+export interface MenuItemRegistered {
+  index: string;
+  indexPath: string[];
+  active: boolean;
+}
+export interface MenuItemClicked {
+  index: string;
+  indexPath: string[];
+  route?: RouteLocationRaw;
+}
+
+export interface MenuProps {
+  /** 菜单展示模式 */
+  mode?: 'horizontal' | 'vertical';
+  /** 页面加载时默认激活菜单的 index（menu-item 的index） */
+  defaultActive?: string;
+  /** 默认打开的 sub-menu 的 index 的数组 */
+  defaultOpeneds?: string[];
+  /** 是否只保持一个子菜单的展开 */
+  uniqueOpened?: boolean;
+  /** 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项 */
+  router?: boolean;
+  /** 子菜单打开的触发方式，只在 mode 为 horizontal 时有效 */
+  menuTrigger?: 'hover' | 'click';
+  collapse?: boolean;
+  /** 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用) */
+  backgroundColor?: string;
+  textColor?: string;
+  activeTextColor?: string;
+  /** 是否开启折叠动画 */
+  collapseTransition?: boolean;
+  /** 是否省略多余的子项（仅在横向模式生效） */
+  ellipsis?: boolean;
+}
+
+export interface MenuProvider {
+  openedMenus: string[];
+  items: Record<string, MenuItemRegistered>;
+  subMenus: Record<string, MenuItemRegistered>;
+  activeIndex?: string;
+  /** 是否需要 tooltip 1.水平模式的菜单需要 2.竖直类型的菜单在收缩时需要 */
+  isMenuPopup: boolean;
+  props: MenuProps;
+
+  addMenuItem: (item: MenuItemRegistered) => void;
+  removeMenuItem: (item: MenuItemRegistered) => void;
+  addSubMenu: (item: MenuItemRegistered) => void;
+  removeSubMenu: (item: 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: MenuItemRegistered) => void;
+  removeSubMenu: (item: MenuItemRegistered) => void;
+  handleMouseleave?: (deepDispatch: boolean) => void;
+  mouseInChild: Ref<boolean>;
+  level: number;
+}

package/src/web/menu/use-menu-css-var.ts

@@ -0,0 +1,11 @@
+import { computed } from 'vue';
+import { useNamespace } from '../../use';
+
+export const useMenuCssVar = (props: any, level: number) => {
+  const ns = useNamespace('menu');
+  return computed(() => {
+    return ns.cssVarBlock({
+      level: `${level}`
+    });
+  });
+};

package/src/web/menu/use-menu.ts

@@ -0,0 +1,60 @@
+import { computed } from 'vue';
+
+import type { ComponentInternalInstance, Ref } from 'vue';
+
+/**
+ * @description menu-item 与 sub-menu 都会调用此方法
+ * @author wfd
+ * @date 2022/11/8 14:02
+ * @example
+ * @param {ComponentInternalInstance} instance
+ * @param {Ref<string>} currentIndex
+ * @returns {{indexPath: ComputedRef<string[]>, parentMenu: ComputedRef<ComponentInternalInstance>}}
+ */
+export default function useMenu(
+  instance: ComponentInternalInstance,
+  currentIndex: Ref<string>
+) {
+  
+  /**
+   * 这个 indexPath 是如何查找的，一般我们会给 vri-sub-menu 组件一个 index 属性，由于这个文件只有 menu-item 与 sub-menu 调用，
+   * 由于 sub-menu 向上查询，不会有 index 属性了，主要是不断去找 menu-item 的父组件的 props 中的 index 属性
+   *
+   * 所以最终 indexPath 返回 menu-item：[自身的 index，sub-menu 的 index]，sub-menu: [自身的index]
+   *
+   * sub-menu:['mio'] menu-item:['mio', '1-2']
+   * @type {ComputedRef<string[]>}
+   */
+  const indexPath = computed(() => {
+    let parent = instance.parent!;
+    
+    const path = [currentIndex.value];
+    while (parent.type.name !== 'vri-menu') {
+      if (parent.props.index) {
+        path.unshift(parent.props.index as string);
+      }
+      parent = parent.parent!;
+    }
+    return path;
+  });
+  
+  /**
+   * @description 如果是 sub-menu 文件最终返回的 parent 是 vri-menu 组件，如果是 menu-item 最终返回的是 vri-sub-menu 组件
+   * @author wfd
+   * @date 2022/11/8 16:23
+   * @example
+   * @type {ComputedRef<ComponentInternalInstance>}
+   */
+  const parentMenu = computed(() => {
+    let parent = instance.parent;
+    while (parent && !['vri-menu', 'vri-sub-menu'].includes(parent.type.name!)) {
+      parent = parent.parent;
+    }
+    return parent!;
+  });
+  
+  return {
+    parentMenu,
+    indexPath
+  };
+}

package/src/web/menu/utils/menu-bar.ts

@@ -0,0 +1,19 @@
+import MenuItem from './menu-item';
+
+import type { RendererNode } from 'vue';
+
+class Menu {
+  constructor(public domNode: RendererNode, namespace: string) {
+    this.init(namespace);
+  }
+  init(namespace: string): void {
+    const menuChildren = this.domNode.childNodes;
+    Array.from<Node>(menuChildren).forEach((child) => {
+      if (child.nodeType === 1) {
+        new MenuItem(child as HTMLElement, namespace);
+      }
+    });
+  }
+}
+
+export default Menu;

package/src/web/menu/utils/menu-item.ts

@@ -0,0 +1,55 @@
+import { triggerEvent } from '@vri/utils';
+import { EVENT_CODE } from '@vri/constants';
+import SubMenu from './submenu';
+
+class MenuItem {
+  public submenu: SubMenu | null = null;
+  constructor(public domNode: HTMLElement, namespace: string) {
+    this.submenu = null;
+    this.init(namespace);
+  }
+
+  init(namespace: string): void {
+    this.domNode.setAttribute('tabindex', '0');
+    const menuChild = this.domNode.querySelector(`.${namespace}-menu`);
+    if (menuChild) {
+      this.submenu = new SubMenu(this, menuChild);
+    }
+    this.addListeners();
+  }
+
+  addListeners(): void {
+    this.domNode.addEventListener('keydown', (event: KeyboardEvent) => {
+      let prevDef = false;
+      switch (event.code) {
+        case EVENT_CODE.down: {
+          triggerEvent(event.currentTarget as HTMLElement, 'mouseenter');
+          this.submenu && this.submenu.gotoSubIndex(0);
+          prevDef = true;
+          break;
+        }
+        case EVENT_CODE.up: {
+          triggerEvent(event.currentTarget as HTMLElement, 'mouseenter');
+          this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
+          prevDef = true;
+          break;
+        }
+        case EVENT_CODE.tab: {
+          triggerEvent(event.currentTarget as HTMLElement, 'mouseleave');
+          break;
+        }
+        case EVENT_CODE.enter:
+        case EVENT_CODE.space: {
+          prevDef = true;
+          (event.currentTarget as HTMLElement).click();
+          break;
+        }
+      }
+      if (prevDef) {
+        event.preventDefault();
+      }
+    });
+  }
+}
+
+export default MenuItem;