28a7fd95b36b6f17dfc2f43ffb13dcfd9a87a2be9259c937de2059e8c250b5cce5dd70a0eb9aa9050ddec217a8066dcc57454046aac4516c55daa56b7069bd 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. import { defineComponent, ref, provide, watch, unref, onMounted, onBeforeUnmount, nextTick, renderSlot } from 'vue';
  2. import { isNil } from 'lodash-unified';
  3. import { useFocusReason, tryFocus, createFocusOutPreventedEvent, getEdges, focusableStack, focusFirstDescendant, obtainAllFocusableElements, isFocusCausedByUserEvent } from './utils.mjs';
  4. import { ON_TRAP_FOCUS_EVT, ON_RELEASE_FOCUS_EVT, FOCUS_TRAP_INJECTION_KEY, FOCUS_AFTER_TRAPPED, FOCUS_AFTER_TRAPPED_OPTS, FOCUS_AFTER_RELEASED } from './tokens.mjs';
  5. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  6. import { useEscapeKeydown } from '../../../hooks/use-escape-keydown/index.mjs';
  7. import { EVENT_CODE } from '../../../constants/aria.mjs';
  8. import { isString } from '@vue/shared';
  9. const _sfc_main = defineComponent({
  10. name: "ElFocusTrap",
  11. inheritAttrs: false,
  12. props: {
  13. loop: Boolean,
  14. trapped: Boolean,
  15. focusTrapEl: Object,
  16. focusStartEl: {
  17. type: [Object, String],
  18. default: "first"
  19. }
  20. },
  21. emits: [
  22. ON_TRAP_FOCUS_EVT,
  23. ON_RELEASE_FOCUS_EVT,
  24. "focusin",
  25. "focusout",
  26. "focusout-prevented",
  27. "release-requested"
  28. ],
  29. setup(props, { emit }) {
  30. const forwardRef = ref();
  31. let lastFocusBeforeTrapped;
  32. let lastFocusAfterTrapped;
  33. const { focusReason } = useFocusReason();
  34. useEscapeKeydown((event) => {
  35. if (props.trapped && !focusLayer.paused) {
  36. emit("release-requested", event);
  37. }
  38. });
  39. const focusLayer = {
  40. paused: false,
  41. pause() {
  42. this.paused = true;
  43. },
  44. resume() {
  45. this.paused = false;
  46. }
  47. };
  48. const onKeydown = (e) => {
  49. if (!props.loop && !props.trapped)
  50. return;
  51. if (focusLayer.paused)
  52. return;
  53. const { code, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e;
  54. const { loop } = props;
  55. const isTabbing = code === EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey;
  56. const currentFocusingEl = document.activeElement;
  57. if (isTabbing && currentFocusingEl) {
  58. const container = currentTarget;
  59. const [first, last] = getEdges(container);
  60. const isTabbable = first && last;
  61. if (!isTabbable) {
  62. if (currentFocusingEl === container) {
  63. const focusoutPreventedEvent = createFocusOutPreventedEvent({
  64. focusReason: focusReason.value
  65. });
  66. emit("focusout-prevented", focusoutPreventedEvent);
  67. if (!focusoutPreventedEvent.defaultPrevented) {
  68. e.preventDefault();
  69. }
  70. }
  71. } else {
  72. if (!shiftKey && currentFocusingEl === last) {
  73. const focusoutPreventedEvent = createFocusOutPreventedEvent({
  74. focusReason: focusReason.value
  75. });
  76. emit("focusout-prevented", focusoutPreventedEvent);
  77. if (!focusoutPreventedEvent.defaultPrevented) {
  78. e.preventDefault();
  79. if (loop)
  80. tryFocus(first, true);
  81. }
  82. } else if (shiftKey && [first, container].includes(currentFocusingEl)) {
  83. const focusoutPreventedEvent = createFocusOutPreventedEvent({
  84. focusReason: focusReason.value
  85. });
  86. emit("focusout-prevented", focusoutPreventedEvent);
  87. if (!focusoutPreventedEvent.defaultPrevented) {
  88. e.preventDefault();
  89. if (loop)
  90. tryFocus(last, true);
  91. }
  92. }
  93. }
  94. }
  95. };
  96. provide(FOCUS_TRAP_INJECTION_KEY, {
  97. focusTrapRef: forwardRef,
  98. onKeydown
  99. });
  100. watch(() => props.focusTrapEl, (focusTrapEl) => {
  101. if (focusTrapEl) {
  102. forwardRef.value = focusTrapEl;
  103. }
  104. }, { immediate: true });
  105. watch([forwardRef], ([forwardRef2], [oldForwardRef]) => {
  106. if (forwardRef2) {
  107. forwardRef2.addEventListener("keydown", onKeydown);
  108. forwardRef2.addEventListener("focusin", onFocusIn);
  109. forwardRef2.addEventListener("focusout", onFocusOut);
  110. }
  111. if (oldForwardRef) {
  112. oldForwardRef.removeEventListener("keydown", onKeydown);
  113. oldForwardRef.removeEventListener("focusin", onFocusIn);
  114. oldForwardRef.removeEventListener("focusout", onFocusOut);
  115. }
  116. });
  117. const trapOnFocus = (e) => {
  118. emit(ON_TRAP_FOCUS_EVT, e);
  119. };
  120. const releaseOnFocus = (e) => emit(ON_RELEASE_FOCUS_EVT, e);
  121. const onFocusIn = (e) => {
  122. const trapContainer = unref(forwardRef);
  123. if (!trapContainer)
  124. return;
  125. const target = e.target;
  126. const relatedTarget = e.relatedTarget;
  127. const isFocusedInTrap = target && trapContainer.contains(target);
  128. if (!props.trapped) {
  129. const isPrevFocusedInTrap = relatedTarget && trapContainer.contains(relatedTarget);
  130. if (!isPrevFocusedInTrap) {
  131. lastFocusBeforeTrapped = relatedTarget;
  132. }
  133. }
  134. if (isFocusedInTrap)
  135. emit("focusin", e);
  136. if (focusLayer.paused)
  137. return;
  138. if (props.trapped) {
  139. if (isFocusedInTrap) {
  140. lastFocusAfterTrapped = target;
  141. } else {
  142. tryFocus(lastFocusAfterTrapped, true);
  143. }
  144. }
  145. };
  146. const onFocusOut = (e) => {
  147. const trapContainer = unref(forwardRef);
  148. if (focusLayer.paused || !trapContainer)
  149. return;
  150. if (props.trapped) {
  151. const relatedTarget = e.relatedTarget;
  152. if (!isNil(relatedTarget) && !trapContainer.contains(relatedTarget)) {
  153. setTimeout(() => {
  154. if (!focusLayer.paused && props.trapped) {
  155. const focusoutPreventedEvent = createFocusOutPreventedEvent({
  156. focusReason: focusReason.value
  157. });
  158. emit("focusout-prevented", focusoutPreventedEvent);
  159. if (!focusoutPreventedEvent.defaultPrevented) {
  160. tryFocus(lastFocusAfterTrapped, true);
  161. }
  162. }
  163. }, 0);
  164. }
  165. } else {
  166. const target = e.target;
  167. const isFocusedInTrap = target && trapContainer.contains(target);
  168. if (!isFocusedInTrap)
  169. emit("focusout", e);
  170. }
  171. };
  172. async function startTrap() {
  173. await nextTick();
  174. const trapContainer = unref(forwardRef);
  175. if (trapContainer) {
  176. focusableStack.push(focusLayer);
  177. const prevFocusedElement = trapContainer.contains(document.activeElement) ? lastFocusBeforeTrapped : document.activeElement;
  178. lastFocusBeforeTrapped = prevFocusedElement;
  179. const isPrevFocusContained = trapContainer.contains(prevFocusedElement);
  180. if (!isPrevFocusContained) {
  181. const focusEvent = new Event(FOCUS_AFTER_TRAPPED, FOCUS_AFTER_TRAPPED_OPTS);
  182. trapContainer.addEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus);
  183. trapContainer.dispatchEvent(focusEvent);
  184. if (!focusEvent.defaultPrevented) {
  185. nextTick(() => {
  186. let focusStartEl = props.focusStartEl;
  187. if (!isString(focusStartEl)) {
  188. tryFocus(focusStartEl);
  189. if (document.activeElement !== focusStartEl) {
  190. focusStartEl = "first";
  191. }
  192. }
  193. if (focusStartEl === "first") {
  194. focusFirstDescendant(obtainAllFocusableElements(trapContainer), true);
  195. }
  196. if (document.activeElement === prevFocusedElement || focusStartEl === "container") {
  197. tryFocus(trapContainer);
  198. }
  199. });
  200. }
  201. }
  202. }
  203. }
  204. function stopTrap() {
  205. const trapContainer = unref(forwardRef);
  206. if (trapContainer) {
  207. trapContainer.removeEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus);
  208. const releasedEvent = new CustomEvent(FOCUS_AFTER_RELEASED, {
  209. ...FOCUS_AFTER_TRAPPED_OPTS,
  210. detail: {
  211. focusReason: focusReason.value
  212. }
  213. });
  214. trapContainer.addEventListener(FOCUS_AFTER_RELEASED, releaseOnFocus);
  215. trapContainer.dispatchEvent(releasedEvent);
  216. if (!releasedEvent.defaultPrevented && (focusReason.value == "keyboard" || !isFocusCausedByUserEvent() || trapContainer.contains(document.activeElement))) {
  217. tryFocus(lastFocusBeforeTrapped != null ? lastFocusBeforeTrapped : document.body);
  218. }
  219. trapContainer.removeEventListener(FOCUS_AFTER_RELEASED, releaseOnFocus);
  220. focusableStack.remove(focusLayer);
  221. lastFocusBeforeTrapped = null;
  222. lastFocusAfterTrapped = null;
  223. }
  224. }
  225. onMounted(() => {
  226. if (props.trapped) {
  227. startTrap();
  228. }
  229. watch(() => props.trapped, (trapped) => {
  230. if (trapped) {
  231. startTrap();
  232. } else {
  233. stopTrap();
  234. }
  235. });
  236. });
  237. onBeforeUnmount(() => {
  238. if (props.trapped) {
  239. stopTrap();
  240. }
  241. if (forwardRef.value) {
  242. forwardRef.value.removeEventListener("keydown", onKeydown);
  243. forwardRef.value.removeEventListener("focusin", onFocusIn);
  244. forwardRef.value.removeEventListener("focusout", onFocusOut);
  245. forwardRef.value = void 0;
  246. }
  247. });
  248. return {
  249. onKeydown
  250. };
  251. }
  252. });
  253. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  254. return renderSlot(_ctx.$slots, "default", { handleKeydown: _ctx.onKeydown });
  255. }
  256. var ElFocusTrap = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "focus-trap.vue"]]);
  257. export { ElFocusTrap as default };
  258. //# sourceMappingURL=focus-trap.mjs.map