dropdown-item-impl.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var index = require('../../icon/index.js');
  5. var dropdown = require('./dropdown.js');
  6. var tokens = require('./tokens.js');
  7. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  8. var rovingFocusGroup = require('../../roving-focus-group/src/roving-focus-group.js');
  9. var tokens$1 = require('../../roving-focus-group/src/tokens.js');
  10. var collection = require('../../collection/src/collection.js');
  11. var index$1 = require('../../../hooks/use-namespace/index.js');
  12. var refs = require('../../../utils/vue/refs.js');
  13. var event = require('../../../utils/dom/event.js');
  14. var aria = require('../../../constants/aria.js');
  15. const _sfc_main = vue.defineComponent({
  16. name: "DropdownItemImpl",
  17. components: {
  18. ElIcon: index.ElIcon
  19. },
  20. props: dropdown.dropdownItemProps,
  21. emits: ["pointermove", "pointerleave", "click", "clickimpl"],
  22. setup(_, { emit }) {
  23. const ns = index$1.useNamespace("dropdown");
  24. const { role: menuRole } = vue.inject(tokens.DROPDOWN_INJECTION_KEY, void 0);
  25. const { collectionItemRef: dropdownCollectionItemRef } = vue.inject(dropdown.DROPDOWN_COLLECTION_ITEM_INJECTION_KEY, void 0);
  26. const { collectionItemRef: rovingFocusCollectionItemRef } = vue.inject(rovingFocusGroup.ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY, void 0);
  27. const {
  28. rovingFocusGroupItemRef,
  29. tabIndex,
  30. handleFocus,
  31. handleKeydown: handleItemKeydown,
  32. handleMousedown
  33. } = vue.inject(tokens$1.ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, void 0);
  34. const itemRef = refs.composeRefs(dropdownCollectionItemRef, rovingFocusCollectionItemRef, rovingFocusGroupItemRef);
  35. const role = vue.computed(() => {
  36. if (menuRole.value === "menu") {
  37. return "menuitem";
  38. } else if (menuRole.value === "navigation") {
  39. return "link";
  40. }
  41. return "button";
  42. });
  43. const handleKeydown = event.composeEventHandlers((e) => {
  44. if ([aria.EVENT_CODE.enter, aria.EVENT_CODE.numpadEnter, aria.EVENT_CODE.space].includes(e.code)) {
  45. e.preventDefault();
  46. e.stopImmediatePropagation();
  47. emit("clickimpl", e);
  48. return true;
  49. }
  50. }, handleItemKeydown);
  51. return {
  52. ns,
  53. itemRef,
  54. dataset: {
  55. [collection.COLLECTION_ITEM_SIGN]: ""
  56. },
  57. role,
  58. tabIndex,
  59. handleFocus,
  60. handleKeydown,
  61. handleMousedown
  62. };
  63. }
  64. });
  65. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  66. const _component_el_icon = vue.resolveComponent("el-icon");
  67. return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
  68. _ctx.divided ? (vue.openBlock(), vue.createElementBlock("li", {
  69. key: 0,
  70. role: "separator",
  71. class: vue.normalizeClass(_ctx.ns.bem("menu", "item", "divided"))
  72. }, null, 2)) : vue.createCommentVNode("v-if", true),
  73. vue.createElementVNode("li", vue.mergeProps({ ref: _ctx.itemRef }, { ..._ctx.dataset, ..._ctx.$attrs }, {
  74. "aria-disabled": _ctx.disabled,
  75. class: [_ctx.ns.be("menu", "item"), _ctx.ns.is("disabled", _ctx.disabled)],
  76. tabindex: _ctx.tabIndex,
  77. role: _ctx.role,
  78. onClick: (e) => _ctx.$emit("clickimpl", e),
  79. onFocus: _ctx.handleFocus,
  80. onKeydown: vue.withModifiers(_ctx.handleKeydown, ["self"]),
  81. onMousedown: _ctx.handleMousedown,
  82. onPointermove: (e) => _ctx.$emit("pointermove", e),
  83. onPointerleave: (e) => _ctx.$emit("pointerleave", e)
  84. }), [
  85. _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
  86. default: vue.withCtx(() => [
  87. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
  88. ]),
  89. _: 1
  90. })) : vue.createCommentVNode("v-if", true),
  91. vue.renderSlot(_ctx.$slots, "default")
  92. ], 16, ["aria-disabled", "tabindex", "role", "onClick", "onFocus", "onKeydown", "onMousedown", "onPointermove", "onPointerleave"])
  93. ], 64);
  94. }
  95. var ElDropdownItemImpl = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "dropdown-item-impl.vue"]]);
  96. exports["default"] = ElDropdownItemImpl;
  97. //# sourceMappingURL=dropdown-item-impl.js.map