Newer
Older
KaiFengPC / scripts / new_node_modules / element-plus / es / components / roving-focus-group / src / roving-focus-group-impl.mjs
@zhangdeliang zhangdeliang on 23 May 4 KB 初始化项目
  1. import { defineComponent, ref, inject, computed, unref, provide, readonly, toRef, watch, renderSlot } from 'vue';
  2. import { useEventListener } from '@vueuse/core';
  3. import '../../../utils/index.mjs';
  4. import {
  5. rovingFocusGroupProps,
  6. ROVING_FOCUS_COLLECTION_INJECTION_KEY as COLLECTION_INJECTION_KEY,
  7. } from './roving-focus-group.mjs';
  8. import { ROVING_FOCUS_GROUP_INJECTION_KEY } from './tokens.mjs';
  9. import { focusFirst } from './utils.mjs';
  10. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  11. import { composeEventHandlers } from '../../../utils/dom/event.mjs';
  12.  
  13. const CURRENT_TAB_ID_CHANGE_EVT = 'currentTabIdChange';
  14. const ENTRY_FOCUS_EVT = 'rovingFocusGroup.entryFocus';
  15. const EVT_OPTS = { bubbles: true, cancelable: false };
  16. const _sfc_main = defineComponent({
  17. name: 'ElRovingFocusGroupImpl',
  18. inheritAttrs: false,
  19. props: rovingFocusGroupProps,
  20. emits: [CURRENT_TAB_ID_CHANGE_EVT, 'entryFocus'],
  21. setup(props, { emit }) {
  22. var _a;
  23. const currentTabbedId = ref((_a = props.currentTabId || props.defaultCurrentTabId) != null ? _a : null);
  24. const isBackingOut = ref(false);
  25. const isClickFocus = ref(false);
  26. const rovingFocusGroupRef = ref(null);
  27. const { getItems } = inject(COLLECTION_INJECTION_KEY, void 0);
  28. const rovingFocusGroupRootStyle = computed(() => {
  29. return [
  30. {
  31. outline: 'none',
  32. },
  33. props.style,
  34. ];
  35. });
  36. const onItemFocus = tabbedId => {
  37. emit(CURRENT_TAB_ID_CHANGE_EVT, tabbedId);
  38. };
  39. const onItemShiftTab = () => {
  40. isBackingOut.value = true;
  41. };
  42. const onMousedown = composeEventHandlers(
  43. e => {
  44. var _a2;
  45. (_a2 = props.onMousedown) == null ? void 0 : _a2.call(props, e);
  46. },
  47. () => {
  48. isClickFocus.value = true;
  49. }
  50. );
  51. const onFocus = composeEventHandlers(
  52. e => {
  53. var _a2;
  54. (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, e);
  55. },
  56. e => {
  57. const isKeyboardFocus = !unref(isClickFocus);
  58. const { target, currentTarget } = e;
  59. if (target === currentTarget && isKeyboardFocus && !unref(isBackingOut)) {
  60. const entryFocusEvt = new Event(ENTRY_FOCUS_EVT, EVT_OPTS);
  61. // 解决报错 failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'
  62. if (entryFocusEvt && entryFocusEvt.originalEvent) {
  63. currentTarget == null ? void 0 : currentTarget.dispatchEvent(entryFocusEvt);
  64. }
  65. if (!entryFocusEvt.defaultPrevented) {
  66. const items = getItems().filter(item => item.focusable);
  67. const activeItem = items.find(item => item.active);
  68. const currentItem = items.find(item => item.id === unref(currentTabbedId));
  69. const candidates = [activeItem, currentItem, ...items].filter(Boolean);
  70. const candidateNodes = candidates.map(item => item.ref);
  71. focusFirst(candidateNodes);
  72. }
  73. }
  74. isClickFocus.value = false;
  75. }
  76. );
  77. const onBlur = composeEventHandlers(
  78. e => {
  79. var _a2;
  80. (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
  81. },
  82. () => {
  83. isBackingOut.value = false;
  84. }
  85. );
  86. const handleEntryFocus = (...args) => {
  87. emit('entryFocus', ...args);
  88. };
  89. provide(ROVING_FOCUS_GROUP_INJECTION_KEY, {
  90. currentTabbedId: readonly(currentTabbedId),
  91. loop: toRef(props, 'loop'),
  92. tabIndex: computed(() => {
  93. return unref(isBackingOut) ? -1 : 0;
  94. }),
  95. rovingFocusGroupRef,
  96. rovingFocusGroupRootStyle,
  97. orientation: toRef(props, 'orientation'),
  98. dir: toRef(props, 'dir'),
  99. onItemFocus,
  100. onItemShiftTab,
  101. onBlur,
  102. onFocus,
  103. onMousedown,
  104. });
  105. watch(
  106. () => props.currentTabId,
  107. val => {
  108. currentTabbedId.value = val != null ? val : null;
  109. }
  110. );
  111. useEventListener(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus);
  112. },
  113. });
  114. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  115. return renderSlot(_ctx.$slots, 'default');
  116. }
  117. var ElRovingFocusGroupImpl = /* @__PURE__ */ _export_sfc(_sfc_main, [
  118. ['render', _sfc_render],
  119. [
  120. '__file',
  121. '/home/runner/work/element-plus/element-plus/packages/components/roving-focus-group/src/roving-focus-group-impl.vue',
  122. ],
  123. ]);
  124.  
  125. export { ElRovingFocusGroupImpl as default };
  126. //# sourceMappingURL=roving-focus-group-impl.mjs.map