element-plus
Version:
A Component Library for Vue 3
1 lines • 4.63 kB
Source Map (JSON)
{"version":3,"file":"dropdown-menu.vue2.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-menu.vue"],"sourcesContent":["<template>\n <ul\n :ref=\"dropdownListWrapperRef\"\n :class=\"dropdownKls\"\n :style=\"rovingFocusGroupRootStyle\"\n :tabindex=\"-1\"\n :role=\"role\"\n :aria-labelledby=\"triggerId\"\n @focusin=\"handleFocus\"\n @focusout=\"onBlur\"\n @keydown.self=\"handleKeydown\"\n @mousedown.self=\"onMousedown\"\n >\n <slot />\n </ul>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n composeEventHandlers,\n composeRefs,\n getEventCode,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport {\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n ROVING_FOCUS_GROUP_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { useNamespace } from '@element-plus/hooks'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\nimport { dropdownMenuProps } from './dropdown'\nimport { useDropdown } from './useDropdown'\n\nexport default defineComponent({\n name: 'ElDropdownMenu',\n props: dropdownMenuProps,\n setup(props) {\n const ns = useNamespace('dropdown')\n const { _elDropdownSize } = useDropdown()\n const size = _elDropdownSize.value\n\n const { contentRef, role, triggerId, isUsingKeyboard, handleClose } =\n inject(DROPDOWN_INJECTION_KEY, undefined)!\n\n const {\n rovingFocusGroupRef,\n rovingFocusGroupRootStyle,\n onBlur,\n onFocus,\n onKeydown,\n onMousedown,\n } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, undefined)!\n\n const { collectionRef: rovingFocusGroupCollectionRef } = inject(\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n undefined\n )!\n\n const dropdownKls = computed(() => {\n return [ns.b('menu'), ns.bm('menu', size?.value)]\n })\n\n const dropdownListWrapperRef = composeRefs(\n contentRef,\n rovingFocusGroupRef,\n rovingFocusGroupCollectionRef\n )\n\n const handleKeydown = composeEventHandlers(\n (e: KeyboardEvent) => {\n props.onKeydown?.(e)\n },\n (e) => {\n const { currentTarget, target } = e\n const code = getEventCode(e)\n\n const isKeydownContained = (currentTarget as Node).contains(\n target as Node\n )\n\n if (isKeydownContained) {\n // TODO: implement typeahead search\n }\n\n if (EVENT_CODE.tab === code) {\n return handleClose()\n }\n\n onKeydown(e)\n }\n )\n\n function handleFocus(e: FocusEvent) {\n isUsingKeyboard.value && onFocus(e)\n }\n\n return {\n size,\n rovingFocusGroupRootStyle,\n dropdownKls,\n role,\n triggerId,\n dropdownListWrapperRef,\n handleKeydown,\n onBlur,\n handleFocus,\n onMousedown,\n }\n },\n})\n</script>\n"],"names":["ROVING_FOCUS_COLLECTION_INJECTION_KEY"],"mappings":";;;;;;;;;;;AAkCA,gBAAe,eAAA,CAAgB;AAAA,EAC7B,IAAA,EAAM,gBAAA;AAAA,EACN,KAAA,EAAO,iBAAA;AAAA,EACP,MAAM,KAAA,EAAO;AACX,IAAA,MAAM,EAAA,GAAK,aAAa,UAAU,CAAA;AAClC,IAAA,MAAM,EAAE,eAAA,EAAgB,GAAI,WAAA,EAAY;AACxC,IAAA,MAAM,OAAO,eAAA,CAAgB,KAAA;AAE7B,IAAA,MAAM,EAAE,YAAY,IAAA,EAAM,SAAA,EAAW,iBAAiB,WAAA,EAAY,GAChE,MAAA,CAAO,sBAAA,EAAwB,MAAS,CAAA;AAE1C,IAAA,MAAM;AAAA,MACJ,mBAAA;AAAA,MACA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACF,GAAI,MAAA,CAAO,gCAAA,EAAkC,MAAS,CAAA;AAEtD,IAAA,MAAM,EAAE,aAAA,EAAe,6BAAA,EAA8B,GAAI,MAAA;AAAA,MACvDA,wBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,WAAA,GAAc,SAAS,MAAM;AACjC,MAAA,OAAO,CAAC,EAAA,CAAG,CAAA,CAAE,MAAM,CAAA,EAAG,GAAG,EAAA,CAAG,MAAA,EAAQ,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,KAAK,CAAC,CAAA;AAAA,IAClD,CAAC,CAAA;AAED,IAAA,MAAM,sBAAA,GAAyB,WAAA;AAAA,MAC7B,UAAA;AAAA,MACA,mBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,aAAA,GAAgB,oBAAA;AAAA,MACpB,CAAC,CAAA,KAAqB;;AACpB,QAAA,CAAA,EAAA,GAAA,KAAA,CAAM,cAAN,IAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,KAAA,EAAkB,CAAA,CAAA;AAAA,MACpB,CAAA;AAAA,MACA,CAAC,CAAA,KAAM;AACL,QAAA,MAAM,EAAE,aAAA,EAAe,MAAA,EAAO,GAAI,CAAA;AAClC,QAAA,MAAM,IAAA,GAAO,aAAa,CAAC,CAAA;AAE3B,QAA4B,aAAA,CAAuB,QAAA;AAAA,UACjD;AAAA;AAOF,QAAA,IAAI,UAAA,CAAW,QAAQ,IAAA,EAAM;AAC3B,UAAA,OAAO,WAAA,EAAY;AAAA,QACrB;AAEA,QAAA,SAAA,CAAU,CAAC,CAAA;AAAA,MACb;AAAA,KACF;AAEA,IAAA,SAAS,YAAY,CAAA,EAAe;AAClC,MAAA,eAAA,CAAgB,KAAA,IAAS,QAAQ,CAAC,CAAA;AAAA,IACpC;AAEA,IAAA,OAAO;AAAA,MACL,IAAA;AAAA,MACA,yBAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,KACF;AAAA,EACF;AACF,CAAC,CAAA;;;;"}