bdabdca8a7040a6a2dbbd3855ee8f48046d8dd41dc1417657cbdaf7ed5dc0fe66002665651c6139640889b709c1b792c4f4278e7467354577f32c2e19275e5 3.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import { defineComponent, inject, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, withModifiers, renderSlot, unref } from 'vue';
  2. import { DROPDOWN_INJECTION_KEY } from './tokens.mjs';
  3. import { dropdownMenuProps, DROPDOWN_COLLECTION_INJECTION_KEY as COLLECTION_INJECTION_KEY, FIRST_LAST_KEYS, LAST_KEYS } from './dropdown.mjs';
  4. import { useDropdown } from './useDropdown.mjs';
  5. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  6. import { ROVING_FOCUS_GROUP_INJECTION_KEY } from '../../roving-focus-group/src/tokens.mjs';
  7. import { ROVING_FOCUS_COLLECTION_INJECTION_KEY as COLLECTION_INJECTION_KEY$1 } from '../../roving-focus-group/src/roving-focus-group.mjs';
  8. import { focusFirst } from '../../roving-focus-group/src/utils.mjs';
  9. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  10. import { FOCUS_TRAP_INJECTION_KEY } from '../../focus-trap/src/tokens.mjs';
  11. import { composeRefs } from '../../../utils/vue/refs.mjs';
  12. import { composeEventHandlers } from '../../../utils/dom/event.mjs';
  13. import { EVENT_CODE } from '../../../constants/aria.mjs';
  14. const _sfc_main = defineComponent({
  15. name: "ElDropdownMenu",
  16. props: dropdownMenuProps,
  17. setup(props) {
  18. const ns = useNamespace("dropdown");
  19. const { _elDropdownSize } = useDropdown();
  20. const size = _elDropdownSize.value;
  21. const { focusTrapRef, onKeydown } = inject(FOCUS_TRAP_INJECTION_KEY, void 0);
  22. const { contentRef, role, triggerId } = inject(DROPDOWN_INJECTION_KEY, void 0);
  23. const { collectionRef: dropdownCollectionRef, getItems } = inject(COLLECTION_INJECTION_KEY, void 0);
  24. const {
  25. rovingFocusGroupRef,
  26. rovingFocusGroupRootStyle,
  27. tabIndex,
  28. onBlur,
  29. onFocus,
  30. onMousedown
  31. } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
  32. const { collectionRef: rovingFocusGroupCollectionRef } = inject(COLLECTION_INJECTION_KEY$1, void 0);
  33. const dropdownKls = computed(() => {
  34. return [ns.b("menu"), ns.bm("menu", size == null ? void 0 : size.value)];
  35. });
  36. const dropdownListWrapperRef = composeRefs(contentRef, dropdownCollectionRef, focusTrapRef, rovingFocusGroupRef, rovingFocusGroupCollectionRef);
  37. const composedKeydown = composeEventHandlers((e) => {
  38. var _a;
  39. (_a = props.onKeydown) == null ? void 0 : _a.call(props, e);
  40. }, (e) => {
  41. const { currentTarget, code, target } = e;
  42. currentTarget.contains(target);
  43. if (EVENT_CODE.tab === code) {
  44. e.stopImmediatePropagation();
  45. }
  46. e.preventDefault();
  47. if (target !== unref(contentRef) || !FIRST_LAST_KEYS.includes(code))
  48. return;
  49. const items = getItems().filter((item) => !item.disabled);
  50. const targets = items.map((item) => item.ref);
  51. if (LAST_KEYS.includes(code)) {
  52. targets.reverse();
  53. }
  54. focusFirst(targets);
  55. });
  56. const handleKeydown = (e) => {
  57. composedKeydown(e);
  58. onKeydown(e);
  59. };
  60. return {
  61. size,
  62. rovingFocusGroupRootStyle,
  63. tabIndex,
  64. dropdownKls,
  65. role,
  66. triggerId,
  67. dropdownListWrapperRef,
  68. handleKeydown,
  69. onBlur,
  70. onFocus,
  71. onMousedown
  72. };
  73. }
  74. });
  75. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  76. return openBlock(), createElementBlock("ul", {
  77. ref: _ctx.dropdownListWrapperRef,
  78. class: normalizeClass(_ctx.dropdownKls),
  79. style: normalizeStyle(_ctx.rovingFocusGroupRootStyle),
  80. tabindex: -1,
  81. role: _ctx.role,
  82. "aria-labelledby": _ctx.triggerId,
  83. onBlur: _ctx.onBlur,
  84. onFocus: _ctx.onFocus,
  85. onKeydown: withModifiers(_ctx.handleKeydown, ["self"]),
  86. onMousedown: withModifiers(_ctx.onMousedown, ["self"])
  87. }, [
  88. renderSlot(_ctx.$slots, "default")
  89. ], 46, ["role", "aria-labelledby", "onBlur", "onFocus", "onKeydown", "onMousedown"]);
  90. }
  91. var DropdownMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "dropdown-menu.vue"]]);
  92. export { DropdownMenu as default };
  93. //# sourceMappingURL=dropdown-menu.mjs.map