dropdown-menu.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var tokens = 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$1 = require('../../roving-focus-group/src/tokens.js');
  9. var rovingFocusGroup = require('../../roving-focus-group/src/roving-focus-group.js');
  10. var index = require('../../../hooks/use-namespace/index.js');
  11. var refs = require('../../../utils/vue/refs.js');
  12. var event = require('../../../utils/dom/event.js');
  13. var aria = require('../../../constants/aria.js');
  14. const _sfc_main = vue.defineComponent({
  15. name: "ElDropdownMenu",
  16. props: dropdown.dropdownMenuProps,
  17. setup(props) {
  18. const ns = index.useNamespace("dropdown");
  19. const { _elDropdownSize } = useDropdown.useDropdown();
  20. const size = _elDropdownSize.value;
  21. const { contentRef, role, triggerId, isUsingKeyboard, handleClose } = vue.inject(tokens.DROPDOWN_INJECTION_KEY, void 0);
  22. const {
  23. rovingFocusGroupRef,
  24. rovingFocusGroupRootStyle,
  25. onBlur,
  26. onFocus,
  27. onKeydown,
  28. onMousedown
  29. } = vue.inject(tokens$1.ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
  30. const { collectionRef: rovingFocusGroupCollectionRef } = vue.inject(
  31. rovingFocusGroup.ROVING_FOCUS_COLLECTION_INJECTION_KEY,
  32. void 0
  33. );
  34. const dropdownKls = vue.computed(() => {
  35. return [ns.b("menu"), ns.bm("menu", size == null ? void 0 : size.value)];
  36. });
  37. const dropdownListWrapperRef = refs.composeRefs(
  38. contentRef,
  39. rovingFocusGroupRef,
  40. rovingFocusGroupCollectionRef
  41. );
  42. const handleKeydown = event.composeEventHandlers(
  43. (e) => {
  44. var _a;
  45. (_a = props.onKeydown) == null ? void 0 : _a.call(props, e);
  46. },
  47. (e) => {
  48. const { currentTarget, target } = e;
  49. const code = event.getEventCode(e);
  50. currentTarget.contains(
  51. target
  52. );
  53. if (aria.EVENT_CODE.tab === code) {
  54. return handleClose();
  55. }
  56. onKeydown(e);
  57. }
  58. );
  59. function handleFocus(e) {
  60. isUsingKeyboard.value && onFocus(e);
  61. }
  62. return {
  63. size,
  64. rovingFocusGroupRootStyle,
  65. dropdownKls,
  66. role,
  67. triggerId,
  68. dropdownListWrapperRef,
  69. handleKeydown,
  70. onBlur,
  71. handleFocus,
  72. onMousedown
  73. };
  74. }
  75. });
  76. const _hoisted_1 = ["role", "aria-labelledby"];
  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. onFocusin: _cache[0] || (_cache[0] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
  86. onFocusout: _cache[1] || (_cache[1] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
  87. onKeydown: _cache[2] || (_cache[2] = vue.withModifiers((...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args), ["self"])),
  88. onMousedown: _cache[3] || (_cache[3] = vue.withModifiers((...args) => _ctx.onMousedown && _ctx.onMousedown(...args), ["self"]))
  89. }, [
  90. vue.renderSlot(_ctx.$slots, "default")
  91. ], 46, _hoisted_1);
  92. }
  93. var DropdownMenu = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/dropdown/src/dropdown-menu.vue"]]);
  94. exports["default"] = DropdownMenu;
  95. //# sourceMappingURL=dropdown-menu.js.map