element-plus
Version:
A Component Library for Vue 3
1 lines • 4.29 kB
Source Map (JSON)
{"version":3,"file":"dropdown-item-impl.mjs","names":[],"sources":["../../../../../../packages/components/dropdown/src/dropdown-item-impl.vue"],"sourcesContent":["<template>\n <li\n v-if=\"divided\"\n role=\"separator\"\n :class=\"ns.bem('menu', 'item', 'divided')\"\n />\n <li\n :ref=\"itemRef\"\n v-bind=\"{ ...dataset, ...$attrs }\"\n :aria-disabled=\"disabled\"\n :class=\"[ns.be('menu', 'item'), ns.is('disabled', disabled)]\"\n :tabindex=\"tabIndex\"\n :role=\"role\"\n @click=\"(e) => $emit('clickimpl', e)\"\n @focus=\"handleFocus\"\n @keydown.self=\"handleKeydown\"\n @mousedown=\"handleMousedown\"\n @pointermove=\"(e) => $emit('pointermove', e)\"\n @pointerleave=\"(e) => $emit('pointerleave', e)\"\n >\n <el-icon v-if=\"icon || $slots.icon\">\n <slot name=\"icon\">\n <component :is=\"icon\" />\n </slot>\n </el-icon>\n <slot />\n </li>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { COLLECTION_ITEM_SIGN } from '@element-plus/components/collection'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport {\n composeEventHandlers,\n composeRefs,\n getEventCode,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { dropdownItemProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n name: 'DropdownItemImpl',\n components: {\n ElIcon,\n },\n props: dropdownItemProps,\n emits: ['pointermove', 'pointerleave', 'click', 'clickimpl'],\n setup(_, { emit }) {\n const ns = useNamespace('dropdown')\n\n const { role: menuRole } = inject(DROPDOWN_INJECTION_KEY, undefined)!\n\n const { collectionItemRef: rovingFocusCollectionItemRef } = inject(\n ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n undefined\n )!\n\n const {\n rovingFocusGroupItemRef,\n tabIndex,\n handleFocus,\n handleKeydown: handleItemKeydown,\n handleMousedown,\n } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, undefined)!\n\n const itemRef = composeRefs(\n rovingFocusCollectionItemRef,\n rovingFocusGroupItemRef\n )\n\n const role = computed<string>(() => {\n if (menuRole.value === 'menu') {\n return 'menuitem'\n } else if (menuRole.value === 'navigation') {\n return 'link'\n }\n return 'button'\n })\n\n const handleKeydown = composeEventHandlers((e: KeyboardEvent) => {\n const code = getEventCode(e)\n\n if (\n [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space].includes(\n code\n )\n ) {\n e.preventDefault()\n e.stopImmediatePropagation()\n emit('clickimpl', e)\n return true\n }\n }, handleItemKeydown)\n\n return {\n ns,\n itemRef,\n dataset: {\n [COLLECTION_ITEM_SIGN]: '',\n },\n role,\n tabIndex,\n handleFocus,\n handleKeydown,\n handleMousedown,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;yDAEU,KAAA,WAAA,WAAA,EADR,mBAIE,MAAA;EAAA,KAAA;EAFA,MAAK;EACJ,OAAK,eAAE,KAAA,GAAG,IAAG,QAAA,QAAA,UAAA,CAAA;EAAA,gDAEhB,mBAoBK,MApBL,WAoBK,EAnBF,KAAK,KAAA,SAAO,EAAA;EAAA,GACA,KAAA;EAAO,GAAK,KAAA;EAAM,EAAA;EAC9B,iBAAe,KAAA;EACf,OAAK,CAAG,KAAA,GAAG,GAAE,QAAA,OAAA,EAAkB,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ,CAAA;EACzD,UAAU,KAAA;EACV,MAAM,KAAA;EACN,SAAK,OAAA,OAAA,OAAA,MAAG,MAAM,KAAA,MAAK,aAAc,EAAC;EAClC,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,eAAA,KAAA,YAAA,GAAA,KAAA;EACP,WAAO,OAAA,OAAA,OAAA,KAAA,eAAA,GAAA,SAAO,KAAA,iBAAA,KAAA,cAAA,GAAA,KAAA,EAAa,CAAA,OAAA,CAAA;EAC3B,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,mBAAA,KAAA,gBAAA,GAAA,KAAA;EACX,eAAW,OAAA,OAAA,OAAA,MAAG,MAAM,KAAA,MAAK,eAAgB,EAAC;EAC1C,gBAAY,OAAA,OAAA,OAAA,MAAG,MAAM,KAAA,MAAK,gBAAiB,EAAC;EAAA,CAAA,EAAA,CAE9B,KAAA,QAAQ,KAAA,OAAO,QAAA,WAAA,EAA9B,YAIU,oBAAA,EAAA,KAAA,GAAA,EAAA;EAAA,SAAA,cADD,CAFP,WAEO,KAAA,QAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EADL,YAAwB,wBAAR,KAAA,KAAI,CAAA,EAAA,CAAA;;yCAGxB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA"}