vft 0.0.1 → 0.0.3

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

@@ -1,440 +0,0 @@
-<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

@@ -1,66 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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;