dropdown-menu.js 3.8 KB

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