c3bd2c6b4421bdce52630f393e892f828ae6de426e838b0ead1cfe03ddb8ed5fc464a2f39127664c47e1f0eef2e81f06b0b070f8aeea19e4bf40d2b91cc2be 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var rovingFocusGroup = require('./roving-focus-group.js');
  5. var tokens = require('./tokens.js');
  6. var utils = require('./utils.js');
  7. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  8. var index = require('../../../hooks/use-id/index.js');
  9. var event = require('../../../utils/dom/event.js');
  10. var aria = require('../../../constants/aria.js');
  11. const _sfc_main = vue.defineComponent({
  12. components: {
  13. ElRovingFocusCollectionItem: rovingFocusGroup.ElCollectionItem
  14. },
  15. props: {
  16. focusable: {
  17. type: Boolean,
  18. default: true
  19. },
  20. active: Boolean
  21. },
  22. emits: ["mousedown", "focus", "keydown"],
  23. setup(props, { emit }) {
  24. const { currentTabbedId, loop, onItemFocus, onItemShiftTab } = vue.inject(tokens.ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
  25. const { getItems } = vue.inject(rovingFocusGroup.ROVING_FOCUS_COLLECTION_INJECTION_KEY, void 0);
  26. const id = index.useId();
  27. const rovingFocusGroupItemRef = vue.ref();
  28. const handleMousedown = event.composeEventHandlers((e) => {
  29. emit("mousedown", e);
  30. }, (e) => {
  31. if (!props.focusable) {
  32. e.preventDefault();
  33. } else {
  34. onItemFocus(vue.unref(id));
  35. }
  36. });
  37. const handleFocus = event.composeEventHandlers((e) => {
  38. emit("focus", e);
  39. }, () => {
  40. onItemFocus(vue.unref(id));
  41. });
  42. const handleKeydown = event.composeEventHandlers((e) => {
  43. emit("keydown", e);
  44. }, (e) => {
  45. const { code, shiftKey, target, currentTarget } = e;
  46. if (code === aria.EVENT_CODE.tab && shiftKey) {
  47. onItemShiftTab();
  48. return;
  49. }
  50. if (target !== currentTarget)
  51. return;
  52. const focusIntent = utils.getFocusIntent(e);
  53. if (focusIntent) {
  54. e.preventDefault();
  55. const items = getItems().filter((item) => item.focusable);
  56. let elements = items.map((item) => item.ref);
  57. switch (focusIntent) {
  58. case "last": {
  59. elements.reverse();
  60. break;
  61. }
  62. case "prev":
  63. case "next": {
  64. if (focusIntent === "prev") {
  65. elements.reverse();
  66. }
  67. const currentIdx = elements.indexOf(currentTarget);
  68. elements = loop.value ? utils.reorderArray(elements, currentIdx + 1) : elements.slice(currentIdx + 1);
  69. break;
  70. }
  71. }
  72. vue.nextTick(() => {
  73. utils.focusFirst(elements);
  74. });
  75. }
  76. });
  77. const isCurrentTab = vue.computed(() => currentTabbedId.value === vue.unref(id));
  78. vue.provide(tokens.ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {
  79. rovingFocusGroupItemRef,
  80. tabIndex: vue.computed(() => vue.unref(isCurrentTab) ? 0 : -1),
  81. handleMousedown,
  82. handleFocus,
  83. handleKeydown
  84. });
  85. return {
  86. id,
  87. handleKeydown,
  88. handleFocus,
  89. handleMousedown
  90. };
  91. }
  92. });
  93. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  94. const _component_el_roving_focus_collection_item = vue.resolveComponent("el-roving-focus-collection-item");
  95. return vue.openBlock(), vue.createBlock(_component_el_roving_focus_collection_item, {
  96. id: _ctx.id,
  97. focusable: _ctx.focusable,
  98. active: _ctx.active
  99. }, {
  100. default: vue.withCtx(() => [
  101. vue.renderSlot(_ctx.$slots, "default")
  102. ]),
  103. _: 3
  104. }, 8, ["id", "focusable", "active"]);
  105. }
  106. var ElRovingFocusItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "roving-focus-item.vue"]]);
  107. exports["default"] = ElRovingFocusItem;
  108. //# sourceMappingURL=roving-focus-item.js.map