index.mjs 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import { getCurrentInstance, shallowRef, ref, watch, onMounted } from 'vue';
  2. import { useEventListener } from '@vueuse/core';
  3. import { useProp } from '../use-prop/index.mjs';
  4. import { isElement } from '../../utils/types.mjs';
  5. import { isFunction } from '@vue/shared';
  6. function useFocusController(target, {
  7. beforeFocus,
  8. afterFocus,
  9. beforeBlur,
  10. afterBlur
  11. } = {}) {
  12. const instance = getCurrentInstance();
  13. const { emit } = instance;
  14. const wrapperRef = shallowRef();
  15. const disabled = useProp("disabled");
  16. const isFocused = ref(false);
  17. const handleFocus = (event) => {
  18. const cancelFocus = isFunction(beforeFocus) ? beforeFocus(event) : false;
  19. if (cancelFocus || isFocused.value)
  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 (cancelBlur || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget)))
  29. return;
  30. isFocused.value = false;
  31. emit("blur", event);
  32. afterBlur == null ? void 0 : afterBlur();
  33. };
  34. const handleClick = () => {
  35. var _a, _b;
  36. if (((_a = wrapperRef.value) == null ? void 0 : _a.contains(document.activeElement)) && wrapperRef.value !== document.activeElement || disabled.value)
  37. return;
  38. (_b = target.value) == null ? void 0 : _b.focus();
  39. };
  40. watch([wrapperRef, 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