hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 4.98 kB
Source Map (JSON)
{"version":3,"file":"dropdown-menu.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 @blur=\"onBlur\"\n @focus=\"onFocus\"\n @keydown.self=\"handleKeydown\"\n @mousedown.self=\"onMousedown\"\n >\n <slot></slot>\n </ul>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, unref } from 'vue'\nimport { composeRefs, composeEventHandlers } from '@hongluan-ui/utils'\nimport { EVENT_CODE } from '@hongluan-ui/constants'\nimport { FOCUS_TRAP_INJECTION_KEY } from '@hongluan-ui/components/focus-trap'\nimport {\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n ROVING_FOCUS_GROUP_INJECTION_KEY,\n focusFirst,\n} from '@hongluan-ui/components/roving-focus-group'\nimport { useNamespace } from '@hongluan-ui/hooks'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\nimport {\n DROPDOWN_COLLECTION_INJECTION_KEY,\n dropdownMenuProps,\n FIRST_LAST_KEYS,\n LAST_KEYS,\n} from './dropdown'\nimport { useDropdown } from './useDropdown'\n\nexport default defineComponent({\n name: 'DropdownMenu',\n props: dropdownMenuProps,\n setup(props) {\n const { namespace } = useNamespace('dropdown-menu')\n const { _hlDropdownSize } = useDropdown()\n const size = _hlDropdownSize.value\n\n const { focusTrapRef, onKeydown } = inject(\n FOCUS_TRAP_INJECTION_KEY,\n undefined,\n )\n\n const { contentRef, role, triggerId } = inject(\n DROPDOWN_INJECTION_KEY,\n undefined,\n )!\n\n const { collectionRef: dropdownCollectionRef, getItems } = inject(\n DROPDOWN_COLLECTION_INJECTION_KEY,\n undefined,\n )\n\n const {\n rovingFocusGroupRef,\n rovingFocusGroupRootStyle,\n tabIndex,\n onBlur,\n onFocus,\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 [namespace.value, size?.value]\n })\n\n const dropdownListWrapperRef = composeRefs(\n contentRef,\n dropdownCollectionRef,\n focusTrapRef,\n rovingFocusGroupRef,\n rovingFocusGroupCollectionRef,\n )\n\n const composedKeydown = composeEventHandlers(\n (e: KeyboardEvent) => {\n props.onKeydown?.(e)\n },\n e => {\n const { currentTarget, code, target } = e\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 e.stopImmediatePropagation()\n }\n\n e.preventDefault()\n\n if (target !== unref(contentRef) || !FIRST_LAST_KEYS.includes(code))\n return\n const items = getItems<{ disabled: boolean; }>().filter(\n item => !item.disabled,\n )\n const targets = items.map(item => item.ref)\n if (LAST_KEYS.includes(code)) {\n targets.reverse()\n }\n focusFirst(targets)\n },\n )\n\n const handleKeydown = (e: KeyboardEvent) => {\n composedKeydown(e)\n onKeydown(e)\n }\n\n return {\n size,\n rovingFocusGroupRootStyle,\n tabIndex,\n dropdownKls,\n role,\n triggerId,\n dropdownListWrapperRef,\n handleKeydown,\n onBlur,\n onFocus,\n onMousedown,\n }\n },\n})\n</script>\n"],"names":["DROPDOWN_COLLECTION_INJECTION_KEY","ROVING_FOCUS_COLLECTION_INJECTION_KEY","_openBlock","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;AAoCA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM,OAAO;AACX,UAAM,EAAE,cAAc,aAAa,eAAe;AAClD,UAAM,EAAE,oBAAoB;AAC5B,UAAM,OAAO,gBAAgB;AAE7B,UAAM,EAAE,cAAc,cAAc,OAClC,0BACA,MACF;AAEA,UAAM,EAAE,YAAY,MAAM,cAAc,OACtC,wBACA,MACF;AAEA,UAAM,EAAE,eAAe,uBAAuB,aAAa,OACzDA,0BACA,MACF;AAEA,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,OAAO,kCAAkC,MAAS;AAEtD,UAAM,EAAE,eAAe,kCAAkC,OACvDC,4BACA,MACF;AAEA,UAAM,cAAc,SAAS,MAAM;AACjC,aAAO,CAAC,UAAU,OAAO;AAAW,KACrC;AAED,UAAM,yBAAyB,YAC7B,YACA,uBACA,cACA,qBACA,6BACF;AAEA,UAAM,kBAAkB,qBACtB,CAAC,MAAqB;AACpB,YAAM;AAAa,OAErB;AACE,cAAQ;AACR,YAAM,qBAAsB,cAAuB;AAInD,8BAAwB;AAAA,MAExB;AAEA;AACE,UAAE,yBAAyB;AAAA;AAG7B;AAEA;AACE;AACF;AAGA,YAAM,gBAAgB;AACtB,iCAA2B;AACzB;AAAgB;AAElB;AAAkB;AAItB;AACE,uBAAiB;AACjB;AAAW;AAGb;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ;;2CA3HO;AAAA,SAZGC;AAAA,IACL;AAAkB,IAClB,OAAKC,eAAE;AAAyB,IAChC;AAAU,IACV;AAAM,IACN;AAAiB,IACjB;AAAM,IACN;AAAO,IACP;AAA2B,IAC3B,6CAA2B;AAAA;;AAEf;;;;;;;"}