4376b1235c13fa1a624e1caa96ef8304392130e9adcf4edd6a95be8cee1a39b3b88535981df433b324b22d52409260fd93f913e194eed683b9a98136ea69b8 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import { defineComponent, getCurrentInstance, inject, toRef, computed, reactive, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, createBlock, withCtx, renderSlot, createElementVNode, Fragment } from 'vue';
  2. import { ElTooltip } from '../../tooltip/index.mjs';
  3. import useMenu from './use-menu.mjs';
  4. import { menuItemProps, menuItemEmits } from './menu-item.mjs';
  5. import { MENU_INJECTION_KEY, SUB_MENU_INJECTION_KEY } from './tokens.mjs';
  6. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  7. import { isPropAbsent } from '../../../utils/types.mjs';
  8. import { debugWarn, throwError } from '../../../utils/error.mjs';
  9. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  10. const COMPONENT_NAME = "ElMenuItem";
  11. const __default__ = defineComponent({
  12. name: COMPONENT_NAME
  13. });
  14. const _sfc_main = /* @__PURE__ */ defineComponent({
  15. ...__default__,
  16. props: menuItemProps,
  17. emits: menuItemEmits,
  18. setup(__props, { expose, emit }) {
  19. const props = __props;
  20. isPropAbsent(props.index) && debugWarn();
  21. const instance = getCurrentInstance();
  22. const rootMenu = inject(MENU_INJECTION_KEY);
  23. const nsMenu = useNamespace("menu");
  24. const nsMenuItem = useNamespace("menu-item");
  25. if (!rootMenu)
  26. throwError(COMPONENT_NAME, "can not inject root menu");
  27. const { parentMenu, indexPath } = useMenu(instance, toRef(props, "index"));
  28. const subMenu = inject(`${SUB_MENU_INJECTION_KEY}${parentMenu.value.uid}`);
  29. if (!subMenu)
  30. throwError(COMPONENT_NAME, "can not inject sub menu");
  31. const active = computed(() => props.index === rootMenu.activeIndex);
  32. const item = reactive({
  33. index: props.index,
  34. indexPath,
  35. active
  36. });
  37. const handleClick = () => {
  38. if (!props.disabled) {
  39. rootMenu.handleMenuItemClick({
  40. index: props.index,
  41. indexPath: indexPath.value,
  42. route: props.route
  43. });
  44. emit("click", item);
  45. }
  46. };
  47. onMounted(() => {
  48. subMenu.addSubMenu(item);
  49. rootMenu.addMenuItem(item);
  50. });
  51. onBeforeUnmount(() => {
  52. subMenu.removeSubMenu(item);
  53. rootMenu.removeMenuItem(item);
  54. });
  55. expose({
  56. parentMenu,
  57. rootMenu,
  58. active,
  59. nsMenu,
  60. nsMenuItem,
  61. handleClick
  62. });
  63. return (_ctx, _cache) => {
  64. return openBlock(), createElementBlock("li", {
  65. class: normalizeClass([
  66. unref(nsMenuItem).b(),
  67. unref(nsMenuItem).is("active", unref(active)),
  68. unref(nsMenuItem).is("disabled", _ctx.disabled)
  69. ]),
  70. role: "menuitem",
  71. tabindex: "-1",
  72. onClick: handleClick
  73. }, [
  74. unref(parentMenu).type.name === "ElMenu" && unref(rootMenu).props.collapse && _ctx.$slots.title ? (openBlock(), createBlock(unref(ElTooltip), {
  75. key: 0,
  76. effect: unref(rootMenu).props.popperEffect,
  77. placement: "right",
  78. "fallback-placements": ["left"],
  79. persistent: unref(rootMenu).props.persistent,
  80. "focus-on-target": ""
  81. }, {
  82. content: withCtx(() => [
  83. renderSlot(_ctx.$slots, "title")
  84. ]),
  85. default: withCtx(() => [
  86. createElementVNode("div", {
  87. class: normalizeClass(unref(nsMenu).be("tooltip", "trigger"))
  88. }, [
  89. renderSlot(_ctx.$slots, "default")
  90. ], 2)
  91. ]),
  92. _: 3
  93. }, 8, ["effect", "persistent"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
  94. renderSlot(_ctx.$slots, "default"),
  95. renderSlot(_ctx.$slots, "title")
  96. ], 64))
  97. ], 2);
  98. };
  99. }
  100. });
  101. var MenuItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "menu-item.vue"]]);
  102. export { MenuItem as default };
  103. //# sourceMappingURL=menu-item2.mjs.map