dropdown-item-impl.mjs 4.7 KB

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