element-plus
Version:
A Component Library for Vue 3
1 lines • 3.26 kB
Source Map (JSON)
{"version":3,"file":"menu-item2.mjs","names":[],"sources":["../../../../../../packages/components/menu/src/menu-item.vue"],"sourcesContent":["<template>\n <li\n :class=\"[\n nsMenuItem.b(),\n nsMenuItem.is('active', active),\n nsMenuItem.is('disabled', disabled),\n ]\"\n role=\"menuitem\"\n tabindex=\"-1\"\n @click=\"handleClick\"\n >\n <el-tooltip\n v-if=\"\n parentMenu.type.name === 'ElMenu' &&\n rootMenu.props.collapse &&\n $slots.title\n \"\n :effect=\"rootMenu.props.popperEffect\"\n placement=\"right\"\n :fallback-placements=\"['left']\"\n :popper-class=\"rootMenu.props.popperClass\"\n :popper-style=\"rootMenu.props.popperStyle\"\n :persistent=\"rootMenu.props.persistent\"\n focus-on-target\n >\n <template #content>\n <slot name=\"title\" />\n </template>\n <div :class=\"nsMenu.be('tooltip', 'trigger')\">\n <slot />\n </div>\n </el-tooltip>\n <template v-else>\n <slot />\n <slot name=\"title\" />\n </template>\n </li>\n</template>\n\n<script lang=\"ts\" setup>\n// @ts-nocheck\nimport {\n computed,\n getCurrentInstance,\n inject,\n onBeforeUnmount,\n onMounted,\n reactive,\n toRef,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { debugWarn, isPropAbsent, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport useMenu from './use-menu'\nimport { menuItemEmits } from './menu-item'\nimport { MENU_INJECTION_KEY, SUB_MENU_INJECTION_KEY } from './tokens'\n\nimport type { MenuItemProps } from './menu-item'\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\ndefineOptions({\n name: COMPONENT_NAME,\n})\nconst props = withDefaults(defineProps<MenuItemProps>(), {\n index: null,\n})\nconst emit = defineEmits(menuItemEmits)\n\nisPropAbsent(props.index) &&\n debugWarn(COMPONENT_NAME, 'Missing required prop: \"index\"')\n\nconst instance = getCurrentInstance()!\nconst rootMenu = inject<MenuProvider>(MENU_INJECTION_KEY)\nconst nsMenu = useNamespace('menu')\nconst nsMenuItem = useNamespace('menu-item')\nif (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\nconst { parentMenu, indexPath } = useMenu(instance, toRef(props, 'index'))\n\nconst subMenu = inject<SubMenuProvider>(\n `${SUB_MENU_INJECTION_KEY}${parentMenu.value.uid}`\n)\nif (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\nconst active = computed(() => props.index === rootMenu.activeIndex)\nconst item: MenuItemRegistered = reactive({\n index: props.index,\n indexPath,\n active,\n})\n\nconst handleClick = () => {\n if (!props.disabled) {\n rootMenu.handleMenuItemClick({\n index: props.index,\n indexPath: indexPath.value,\n route: props.route,\n })\n emit('click', item)\n }\n}\n\nonMounted(() => {\n subMenu.addSubMenu(item)\n rootMenu.addMenuItem(item)\n})\n\nonBeforeUnmount(() => {\n subMenu.removeSubMenu(item)\n rootMenu.removeMenuItem(item)\n})\n\ndefineExpose({\n parentMenu,\n rootMenu,\n active,\n nsMenu,\n nsMenuItem,\n handleClick,\n})\n</script>\n"],"mappings":""}