8809179e54b39b3166cdafb59516402c14c3dd8aee29ad3101d09c6d90f7d9736fb5bdd4eb5d5036372515fdd20f3963eb79effee29f376e7479d9e0432b52 4.3 KB

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