index.mjs 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import { getCurrentInstance, shallowRef, ref, watch, unref, onMounted } from 'vue';
  2. import { useEventListener } from '@vueuse/core';
  3. import { isElement } from '../../utils/types.mjs';
  4. import { isFocusable } from '../../utils/dom/aria.mjs';
  5. import { isFunction } from '@vue/shared';
  6. function useFocusController(target, {
  7. disabled,
  8. beforeFocus,
  9. afterFocus,
  10. beforeBlur,
  11. afterBlur
  12. } = {}) {
  13. const instance = getCurrentInstance();
  14. const { emit } = instance;
  15. const wrapperRef = shallowRef();
  16. const isFocused = ref(false);
  17. const handleFocus = (event) => {
  18. const cancelFocus = isFunction(beforeFocus) ? beforeFocus(event) : false;
  19. if (unref(disabled) || isFocused.value || cancelFocus)
  20. return;
  21. isFocused.value = true;
  22. emit("focus", event);
  23. afterFocus == null ? void 0 : afterFocus();
  24. };
  25. const handleBlur = (event) => {
  26. var _a;
  27. const cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false;
  28. if (unref(disabled) || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget)) || cancelBlur)
  29. return;
  30. isFocused.value = false;
  31. emit("blur", event);
  32. afterBlur == null ? void 0 : afterBlur();
  33. };
  34. const handleClick = (event) => {
  35. var _a, _b;
  36. if (unref(disabled) || isFocusable(event.target) || ((_a = wrapperRef.value) == null ? void 0 : _a.contains(document.activeElement)) && wrapperRef.value !== document.activeElement)
  37. return;
  38. (_b = target.value) == null ? void 0 : _b.focus();
  39. };
  40. watch([wrapperRef, () => unref(disabled)], ([el, disabled2]) => {
  41. if (!el)
  42. return;
  43. if (disabled2) {
  44. el.removeAttribute("tabindex");
  45. } else {
  46. el.setAttribute("tabindex", "-1");
  47. }
  48. });
  49. useEventListener(wrapperRef, "focus", handleFocus, true);
  50. useEventListener(wrapperRef, "blur", handleBlur, true);
  51. useEventListener(wrapperRef, "click", handleClick, true);
  52. if (process.env.NODE_ENV === "test") {
  53. onMounted(() => {
  54. const targetEl = isElement(target.value) ? target.value : document.querySelector("input,textarea");
  55. if (targetEl) {
  56. useEventListener(targetEl, "focus", handleFocus, true);
  57. useEventListener(targetEl, "blur", handleBlur, true);
  58. }
  59. });
  60. }
  61. return {
  62. isFocused,
  63. wrapperRef,
  64. handleFocus,
  65. handleBlur
  66. };
  67. }
  68. export { useFocusController };
  69. //# sourceMappingURL=index.mjs.map