vft 0.0.1 → 0.0.3

package/src/web/menu/menu.vue

@@ -1,459 +0,0 @@
-<script lang="ts" setup>
-import {
-  computed,
-  getCurrentInstance,
-  h,
-  nextTick,
-  onMounted,
-  provide,
-  reactive,
-  ref,
-  watch,
-  watchEffect,
-  useSlots
-} from 'vue';
-import { useResizeObserver } from '@vueuse/core';
-import { flattedChildren } from '../../utils';
-import { useNamespace } from '../../use';
-import Menubar from './utils/menu-bar';
-import MenuCollapseTransition from './menu-collapse-transition.vue';
-import VriSubMenu from './sub-menu.vue';
-import { useMenuCssVar } from './use-menu-css-var';
-import type { MenuProvider, SubMenuProvider } from './types';
-import type { Router } from 'vue-router';
-import type { VNode, VNodeArrayChildren } from 'vue';
-import type { UseResizeObserverReturn } from '@vueuse/core';
-import './index.scss';
-import Icon from '../../common/icon/index.vue';
-
-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;
-}
-
-const {
-  mode = 'vertical',
-  defaultActive = '',
-  defaultOpeneds = [],
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  menuTrigger = 'hover',
-  collapseTransition = true,
-  ellipsis = true,
-  uniqueOpened,
-  collapse,
-  router
-} = defineProps<MenuProps>();
-
-const emit = defineEmits([
-  'close',
-  'open',
-  'select'
-]);
-
-const ns = /* hoist-static*/ useNamespace('menu');
-
-defineOptions({
-  name: ns.b()
-});
-
-const slots = useSlots();
-
-const instance = getCurrentInstance()!;
-
-// get router instance
-const _router = instance.appContext.config.globalProperties.$router as Router;
-
-const menu = ref<HTMLUListElement>();
-
-const nsSubMenu = useNamespace('sub-menu');
-
-// data
-const sliceIndex = ref(-1);
-
-// 展开的菜单项数组 defaultOpeneds 配置的对应 sub-menu 中的数组，并且菜单不能是收缩状态
-const openedMenus = ref<MenuProvider['openedMenus']>(
-  defaultOpeneds && !collapse ? defaultOpeneds.slice(0) : []
-);
-
-// 页面加载时默认激活菜单的 index，最终提供给 menu-item 去使用
-const activeIndex = ref<MenuProvider['activeIndex']>(defaultActive);
-
-/**
- * 主要是存储 menu-item 中的菜单项
- * 格式如下
- * ```
- * {
- *  1-1:{index: '1-1', indexPath: ['mio', '1-1'], active: false},
- *  1-2:{index: '1-2', indexPath: ['mio', '1-2'], active: false}
- * }
- * ```
- */
-const items = ref<MenuProvider['items']>({});
-
-/**
- * 主要是存储 sub-menu 中的菜单项
- * 格式如下
- * ```
- * {
- *  mio:{index: 'mio', indexPath: ['mio'], active: false},
- *  test:{index: 'test', indexPath: ['test'], active: false}
- * }
- * ```
- */
-const subMenus = ref<MenuProvider['subMenus']>({});
-
-/**
- * @description 是否需要 tooltip 1.水平模式的菜单需要 2.竖直类型的菜单在收缩时需要
- * @author wfd
- * @date 2022/11/8 13:22
- * @example
- * @type {ComputedRef<MenuProvider["isMenuPopup"]>}
- */
-const isMenuPopup = computed<MenuProvider['isMenuPopup']>(() => {
-  return mode === 'horizontal' || (mode === 'vertical' && collapse) as MenuProvider['isMenuPopup'];
-});
-
-// 当配置了 defaultActive 时菜单的展开设置
-const initMenu = () =>  {
-  // 如果设置了 activeIndex 且当前的 activeIndex 项在 items 中存在
-  // 获取当前激活菜单的 item {index: '1-1', indexPath: ['mio', '1-1'], active: false}
-  const activeItem = activeIndex.value && items.value[activeIndex.value];
-  // 只在竖直模式，且非折叠模式，且子菜单配置为激活时触发
-  if (!activeItem || mode === 'horizontal' || collapse) return;
-  // ['mio', '1-1']
-  const indexPath = activeItem.indexPath;
-  
-  // 展开该菜单项的路径上所有子菜单
-  indexPath.forEach((index) => {
-    // {index: 'mio', indexPath: ['mio'], active: false}
-    const subMenu = subMenus.value[index];
-    subMenu && openMenu(index, subMenu.indexPath);
-  });
-};
-
-/**
- * @description 展开子菜单
- * @author wfd
- * @date 2022/11/8 16:44
- * @example
- * @param {string} index
- * @param {string[]} indexPath
- */
-const openMenu: MenuProvider['openMenu'] = (index: string, indexPath: string[]) => {
-  // 如果当前点击的 index 在 openedMenus 中，则不向下执行操作
-  if (openedMenus.value.includes(index)) return;
-  // 将不在该菜单路径下的其余菜单收起
-  if (uniqueOpened) {
-    openedMenus.value = openedMenus.value.filter((index: string) => indexPath.includes(index));
-  }
-  // 将点击的 index 加入到 openedMenus 中
-  openedMenus.value.push(index);
-  emit('open', index, indexPath);
-};
-
-/**
- * @description 关闭当前点击的 sub-menu 对应的 index，主要是从 openedMenus 移除该项
- * @author wfd
- * @date 2022/11/8 16:43
- * @example
- * @param {string} index
- * @param {string[]} indexPath
- */
-const closeMenu: MenuProvider['closeMenu'] = (index, indexPath) => {
-  const i = openedMenus.value.indexOf(index);
-  if (i !== -1) {
-    openedMenus.value.splice(i, 1);
-  }
-  emit('close', index, indexPath);
-};
-
-// sub-menu 点击事件，主要是展开收缩菜单，通过控制 openedMenus 的值
-const handleSubMenuClick: MenuProvider['handleSubMenuClick'] = ({ index, indexPath }) => {
-  // 判断当前点击的 sub-menu 菜单是否已经在 openedMenus 中
-  const isOpened = openedMenus.value.includes(index);
-  
-  // 如果已经在 openedMenus 中，代表当前菜单已经展开（展开则调用 close 关闭），否则未打开（则调用 open 给展开）
-  if (isOpened) {
-    closeMenu(index, indexPath);
-  } else {
-    openMenu(index, indexPath);
-  }
-};
-
-/**
- * @description 子项点击跳转事件，如果 menu.vue 配置了 route 为 true，则执行路由跳转，否则触发
- * emit('select') 只返回数据
- * @author wfd
- * @date 2022/11/8 18:30
- * @example
- * @param {MenuItemClicked} menuItem
- */
-const handleMenuItemClick: MenuProvider['handleMenuItemClick'] = (menuItem) => {
-  
-  if (mode === 'horizontal' || collapse) {
-    openedMenus.value = [];
-  }
-  const { index, indexPath } = menuItem;
-  if (index === undefined || indexPath === undefined) return;
-  
-  if (router && _router) {
-    // 路由跳转的路径如果 menu-item 配置了则，采用 menu-item 的，否则采用 index 为 router 路径
-    const route = menuItem.route || index;
-    const routerResult = _router.push(route).then((res) => {
-      if (!res) activeIndex.value = index;
-      return res;
-    });
-    emit('select', menuItem, routerResult);
-  } else {
-    activeIndex.value = index;
-    
-    emit('select', menuItem);
-  }
-};
-
-/**
- * 更新 activeIndex
- * @param {string} val
- */
-const updateActiveIndex = (val: string) => {
-  const itemsInData = items.value;
-  // 首先从最新的 val 中去 items 取数据，如果没有取到再去 items 对应的 activeIndex 去取
-  const item = itemsInData[val] || (activeIndex.value && itemsInData[activeIndex.value]) || itemsInData[defaultActive];
-  
-  // 更新 activeIndex
-  if (item) {
-    activeIndex.value = item.index;
-  } else {
-    activeIndex.value = val;
-  }
-};
-
-const calcSliceIndex = () => {
-  if (!menu.value) return -1;
-  const items = Array.from(menu.value?.childNodes ?? []).filter(
-    (item) => item.nodeName !== '#text' || item.nodeValue) as HTMLElement[];
-  const moreItemWidth = 64;
-  const paddingLeft = Number.parseInt(getComputedStyle(menu.value!).paddingLeft, 10);
-  const paddingRight = Number.parseInt(getComputedStyle(menu.value!).paddingRight, 10);
-  const menuWidth = menu.value!.clientWidth - paddingLeft - paddingRight;
-  let calcWidth = 0;
-  let sliceIndex = 0;
-  items.forEach((item, index) => {
-    calcWidth += item.offsetWidth || 0;
-    if (calcWidth <= menuWidth - moreItemWidth) {
-      sliceIndex = index + 1;
-    }
-  });
-  return sliceIndex === items.length ? -1 : sliceIndex;
-};
-
-// 常见的计算机监视器FPS为60Hz，这意味着每秒重画60次。计算公式：1000ms60≈ 16.67ms，为了避免“调整大小”时重复触发的特定机会，将等待设置为16.67 2=33.34
-const debounce = (fn: () => void, wait = 33.34) => {
-  let timmer: ReturnType<typeof setTimeout> | null;
-  return () => {
-    timmer && clearTimeout(timmer);
-    timmer = setTimeout(() => {
-      fn();
-    }, wait);
-  };
-};
-
-let isFirstTimeRender = true;
-const handleResize = () => {
-  const callback = () => {
-    sliceIndex.value = -1;
-    nextTick(() => {
-      sliceIndex.value = calcSliceIndex();
-    });
-  };
-  // 第一次调整大小时直接执行回调以避免抖动
-  isFirstTimeRender ? callback() : debounce(callback)();
-  isFirstTimeRender = false;
-};
-
-// defaultActive 变化时触发时更新 activeIndex
-watch(
-  () => defaultActive,
-  (currentActive) => {
-    // 如果最新的 defaultActive 在 items 中不存在则 activeIndex 更新为空
-    if (!items.value[currentActive]) {
-      activeIndex.value = '';
-    }
-    updateActiveIndex(currentActive);
-  }
-);
-
-watch(
-  () => collapse,
-  (value) => {
-    if (value) openedMenus.value = [];
-  }
-);
-
-// 监控 items 的变化(在 menu-item.vue 中的 onMounted 中执行产生变化)，然后执行 initMenu
-watch(items.value, initMenu);
-
-let resizeStopper: UseResizeObserverReturn['stop'];
-watchEffect(() => {
-  if (mode === 'horizontal' && ellipsis) resizeStopper = useResizeObserver(menu, handleResize).stop;
-  else resizeStopper?.();
-});
-
-// 提供给 sub-menu.vue 使用，将每一个 sub-menu 的数据存储在 subMenus 中
-const addSubMenu: MenuProvider['addSubMenu'] = (item) => {
-  subMenus.value[item.index] = item;
-};
-
-const removeSubMenu: MenuProvider['removeSubMenu'] = (item) => {
-  delete subMenus.value[item.index];
-};
-
-/**
- * 此函数在 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 addMenuItem: MenuProvider['addMenuItem'] = (item) => {
-  items.value[item.index] = item;
-};
-
-const removeMenuItem: MenuProvider['removeMenuItem'] = (item) => {
-  delete items.value[item.index];
-};
-
-/**
- * 提供以下方法与属性给 sub-menu.vue 使用
- */
-provide<MenuProvider>(
-  'rootMenu',
-  reactive({
-    props: instance.props,
-    openedMenus,
-    items,
-    subMenus,
-    activeIndex,
-    isMenuPopup,
-    
-    addMenuItem,
-    removeMenuItem,
-    addSubMenu,
-    removeSubMenu,
-    openMenu,
-    closeMenu,
-    handleMenuItemClick,
-    handleSubMenuClick
-  })
-);
-
-provide<SubMenuProvider>(`subMenu:${instance.uid}`, {
-  addSubMenu,
-  removeSubMenu,
-  mouseInChild: ref(false),
-  // 表示当前是第一级的 sub-menu
-  level: 0
-});
-
-onMounted(() => {
-  if (mode === 'horizontal') {
-    new Menubar(instance.vnode.el!, ns.namespace.value);
-  }
-});
-
-// 触发展开菜单事件
-const open = (index: string) => {
-  const { indexPath } = subMenus.value[index];
-  indexPath.forEach((i) => openMenu(i, indexPath));
-};
-
-defineExpose({
-  open,
-  close: closeMenu,
-  handleResize
-});
-
-defineRender(() => {
-  let slot: VNodeArrayChildren = slots.default?.() ?? [];
-  const vShowMore: VNode[] = [];
-  
-  // 水平默认下执行
-  if (mode === 'horizontal' && menu.value) {
-    const originalSlot = flattedChildren(slot) as VNodeArrayChildren;
-    const slotDefault = sliceIndex.value === -1 ? originalSlot : originalSlot.slice(0,
-      sliceIndex.value);
-    
-    const slotMore = sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value);
-    
-    if (slotMore?.length && ellipsis) {
-      slot = slotDefault;
-      vShowMore.push(
-        h(
-          VriSubMenu,
-          {
-            index: 'sub-menu-more',
-            class: nsSubMenu.e('hide-arrow')
-          },
-          {
-            title: () => h(
-              Icon,
-              {
-                icon: 'vi-item',
-                class: nsSubMenu.e('icon-more')
-              }
-            ),
-            default: () => slotMore
-          }
-        )
-      );
-    }
-  }
-  
-  const ulStyle = useMenuCssVar(instance.props, 0);
-  
-  const vMenu = h(
-    'ul',
-    {
-      key: String(collapse),
-      role: 'menubar',
-      ref: menu,
-      style: ulStyle.value,
-      class: {
-        [ns.b()]: true,
-        [ns.m(mode)]: true,
-        [ns.m('collapse')]: collapse
-      }
-    },
-    [...slot, ...vShowMore]
-  );
-  
-  if (collapseTransition && mode === 'vertical') {
-    return h(MenuCollapseTransition, () => vMenu);
-  }
-  
-  return vMenu;
-});
-</script>