@fesjs/fes-design/es/menu/menu.js

fes-design for PC

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { defineComponent, computed, onMounted, watch, provide, createVNode } from 'vue';
import { isFunction } from 'lodash-es';
import getPrefixCls from '../_util/getPrefixCls';
import { useNormalModel, useArrayModel } from '../_util/use/useModel';
import { UPDATE_MODEL_EVENT } from '../_util/constants';
import { concat } from '../_util/utils';
import { useTheme } from '../_theme/useTheme';
import { COMPONENT_NAME, menuProps, ROOT_MENU_KEY } from './const';
import useParent from './useParent';
import useMenu from './useMenu';
import MenuGroup from './menuGroup';
import MenuItem from './menuItem';
import SubMenu from './subMenu';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const prefixCls = getPrefixCls('menu');
var menu = defineComponent({
  name: COMPONENT_NAME.MENU,
  props: menuProps,
  emits: ['select', UPDATE_MODEL_EVENT, 'update:expandedKeys'],
  setup(props, _ref) {
    let {
      emit,
      slots
    } = _ref;
    useTheme();
    useMenu();
    const [currentValue, updateCurrentValue] = useNormalModel(props, emit);
    const [currentExpandedKeys, updateExpandedKeys] = useArrayModel(props, emit, {
      prop: 'expandedKeys'
    });

    // 水平模式一定是采用Popper的
    const renderWithPopper = computed(() => {
      if (props.mode === 'horizontal') {
        return true;
      }
      return props.collapsed;
    });
    const {
      children
    } = useParent();
    const clickMenuItem = value => {
      updateCurrentValue(value);
      emit('select', {
        value
      });
      // 选择后，关闭所有的子菜单
      if (renderWithPopper.value) {
        children.forEach(item => {
          if (item.type === 'subMenu') {
            item.isOpened = false;
          }
        });
      }
    };
    const flatNodes = function () {
      let nodes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
      return nodes.reduce((res, node) => {
        var _node$children;
        if (node.type === 'subMenu') {
          res.push(node.value || node.uid);
        }
        if ((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length) {
          const keys = flatNodes(node.children);
          // 比Array.concat快
          concat(res, keys);
        }
        return res;
      }, []);
    };
    onMounted(() => {
      if (props.defaultExpandAll && currentExpandedKeys.value.length === 0) {
        const keys = flatNodes(children);
        updateExpandedKeys(keys);
      }
    });
    const accordion = computed(() => {
      // 如果是水平的菜单，accordion 只能为true
      return props.mode === 'horizontal' || props.collapsed ? true : props.accordion;
    });
    watch(() => props.collapsed, value => {
      if (value) {
        updateExpandedKeys([]);
      }
    });
    const handleSubMenuExpand = (subMenu, indexPath) => {
      if (subMenu.isOpened.value && accordion.value) {
        updateExpandedKeys(currentExpandedKeys.value.filter(uid => indexPath.value.some(node => {
          return node.uid === uid;
        })));
      }
      updateExpandedKeys(subMenu.value || subMenu.uid);
    };
    provide(ROOT_MENU_KEY, {
      props,
      currentValue,
      clickMenuItem,
      renderWithPopper,
      currentExpandedKeys,
      accordion,
      updateExpandedKeys,
      handleSubMenuExpand
    });
    const classList = computed(() => [prefixCls, `is-${props.mode}`, props.inverted && 'is-inverted', props.mode === 'vertical' && props.collapsed && 'is-collapsed'].filter(Boolean));
    const renderChildren = arr => arr.map(item => {
      const itemSlots = {};
      if (isFunction(item.icon)) {
        itemSlots.icon = item.icon;
      }
      itemSlots.label = () => isFunction(item.label) ? item.label() : item.label;
      // 没有子菜单
      if (!item.children) {
        return createVNode(MenuItem, {
          "value": item.value,
          "disabled": item.disabled
        }, itemSlots);
      }
      // 分组
      if (item.isGroup) {
        return createVNode(MenuGroup, null, _objectSpread({
          default: () => [renderChildren(item.children)]
        }, itemSlots));
      }
      return createVNode(SubMenu, {
        "value": item.value
      }, _objectSpread({
        default: () => [renderChildren(item.children)]
      }, itemSlots));
    });
    const render = () => {
      if (props.options.length === 0) {
        var _slots$default;
        return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
      }
      return renderChildren(props.options);
    };
    return () => createVNode("div", {
      "class": classList.value
    }, [render()]);
  }
});

export { menu as default };