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

fes-design for PC

import { defineComponent, getCurrentInstance, computed, onMounted, onBeforeUnmount, createVNode } from 'vue';
import Ellipsis from '../ellipsis/ellipsis';
import getPrefixCls from '../_util/getPrefixCls';
import { COMPONENT_NAME } from './const';
import useChildren from './useChildren';
import useParent from './useParent';
import useMenu from './useMenu';

const prefixCls = getPrefixCls('menu-group');
const menuGroupProps = {
  // 分组标题
  label: {
    type: String
  }
};
var menuGroup = defineComponent({
  name: COMPONENT_NAME.MENU_GROUP,
  props: menuGroupProps,
  setup(props, _ref) {
    let {
      slots
    } = _ref;
    const instance = getCurrentInstance();
    const {
      indexPath
    } = useMenu(instance);
    const {
      rootMenu,
      parentMenu,
      paddingStyle
    } = useChildren(indexPath);
    // 根节点 menu
    if (!rootMenu) {
      console.warn(`[${COMPONENT_NAME.MENU_GROUP}] must be a child of ${COMPONENT_NAME.MENU}`);
    }
    // 父级组件，可能为 menu 或者 sub-menu
    if (!parentMenu) {
      console.warn(`[${COMPONENT_NAME.MENU_GROUP}] must be a child of ${COMPONENT_NAME.MENU} or ${COMPONENT_NAME.SUB_MENU}`);
    }
    const {
      children
    } = useParent();
    const isActive = computed(() => children.some(child => child === null || child === void 0 ? void 0 : child.isActive));
    const subMenu = {
      uid: instance.uid,
      type: 'menuGroup',
      children,
      isActive
    };
    onMounted(() => {
      parentMenu.addChild(subMenu);
    });
    onBeforeUnmount(() => {
      parentMenu.removeChild(subMenu);
    });
    const renderTitle = () => {
      var _slots$label;
      return createVNode(Ellipsis, {
        "class": `${prefixCls}-label`,
        "style": paddingStyle.value
      }, {
        default: () => [((_slots$label = slots.label) === null || _slots$label === void 0 ? void 0 : _slots$label.call(slots)) || props.label]
      });
    };
    return () => {
      var _slots$default;
      return createVNode("div", {
        "class": prefixCls
      }, [renderTitle(), (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
    };
  }
});

export { menuGroup as default, menuGroupProps };