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

fes-design for PC

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

const prefixCls = getPrefixCls('menu-item');
const menuItemProps = {
  value: {
    type: [String, Number],
    required: true
  },
  label: String,
  disabled: Boolean
};
var menuItem = defineComponent({
  name: COMPONENT_NAME.MENU_ITEM,
  components: {
    Ellipsis
  },
  props: {
    value: {
      type: [String, Number],
      required: true
    },
    label: String,
    disabled: Boolean
  },
  setup(props, _ref) {
    let {
      slots
    } = _ref;
    const instance = getCurrentInstance();
    const {
      indexPath
    } = useMenu(instance);
    const {
      rootMenu,
      parentMenu,
      paddingStyle,
      onlyIcon
    } = useChildren(indexPath);
    const {
      handleItemClick
    } = inject(SUB_MENU_KEY, {
      handleItemClick: noop
    });
    // 根节点 menu
    if (!rootMenu) {
      console.warn(`[${COMPONENT_NAME.MENU_ITEM}] must be a child of ${COMPONENT_NAME.MENU}`);
    }
    // 父级组件，可能为 menu 或者 sub-menu
    if (!parentMenu) {
      console.warn(`[${COMPONENT_NAME.MENU_ITEM}] must be a child of ${COMPONENT_NAME.MENU} or ${COMPONENT_NAME.SUB_MENU}`);
    }
    const isActive = computed(() => rootMenu.currentValue.value === props.value);
    const isDisabled = computed(() => props.disabled);
    const menuItem = {
      uid: instance.uid,
      type: 'menu',
      value: props.value,
      isActive,
      isDisabled
    };
    onMounted(() => {
      parentMenu.addChild(menuItem);
    });
    onBeforeUnmount(() => {
      parentMenu.removeChild(menuItem);
    });
    const classList = computed(() => [prefixCls, isActive.value && 'is-active', isDisabled.value && 'is-disabled'].filter(Boolean).join(' '));
    const handleClick = () => {
      if (isDisabled.value) {
        return;
      }
      rootMenu.clickMenuItem(props.value);
      handleItemClick();
    };
    const renderTitle = () => {
      var _slots$label;
      return createVNode(Ellipsis, {
        "class": `${prefixCls}-label`
      }, {
        default: () => [((_slots$label = slots.label) === null || _slots$label === void 0 ? void 0 : _slots$label.call(slots)) || props.label]
      });
    };
    const renderIcon = () => {
      if (slots.icon) {
        return createVNode("span", {
          "class": `${prefixCls}-icon`
        }, [slots.icon()]);
      }
      if (onlyIcon.value) {
        return renderTitle();
      }
      return null;
    };
    return () => createVNode("div", {
      "class": classList.value,
      "onClick": handleClick
    }, [createVNode("div", {
      "class": `${prefixCls}-wrapper`,
      "style": paddingStyle.value
    }, [renderIcon(), !onlyIcon.value ? renderTitle() : null])]);
  }
});

export { menuItem as default, menuItemProps };