index.mjs 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import { isFocusable } from "../../utils/dom/aria.mjs";
  2. import { isFunction } from "../../utils/types.mjs";
  3. import { useEventListener } from "@vueuse/core";
  4. import { getCurrentInstance, onMounted, ref, shallowRef, unref, watch } from "vue";
  5. //#region ../../packages/hooks/use-focus-controller/index.ts
  6. function useFocusController(target, { disabled, beforeFocus, afterFocus, beforeBlur, afterBlur } = {}) {
  7. const { emit } = getCurrentInstance();
  8. const wrapperRef = shallowRef();
  9. const isFocused = ref(false);
  10. const handleFocus = (event) => {
  11. const cancelFocus = isFunction(beforeFocus) ? beforeFocus(event) : false;
  12. if (unref(disabled) || isFocused.value || cancelFocus) return;
  13. isFocused.value = true;
  14. emit("focus", event);
  15. afterFocus?.();
  16. };
  17. const handleBlur = (event) => {
  18. const cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false;
  19. if (unref(disabled) || event.relatedTarget && wrapperRef.value?.contains(event.relatedTarget) || cancelBlur) return;
  20. isFocused.value = false;
  21. emit("blur", event);
  22. afterBlur?.();
  23. };
  24. const handleClick = (event) => {
  25. if (unref(disabled) || isFocusable(event.target) || wrapperRef.value?.contains(document.activeElement) && wrapperRef.value !== document.activeElement) return;
  26. target.value?.focus();
  27. };
  28. watch([wrapperRef, () => unref(disabled)], ([el, disabled]) => {
  29. if (!el) return;
  30. if (disabled) el.removeAttribute("tabindex");
  31. else el.setAttribute("tabindex", "-1");
  32. });
  33. useEventListener(wrapperRef, "focus", handleFocus, true);
  34. useEventListener(wrapperRef, "blur", handleBlur, true);
  35. useEventListener(wrapperRef, "click", handleClick, true);
  36. return {
  37. isFocused,
  38. wrapperRef,
  39. handleFocus,
  40. handleBlur
  41. };
  42. }
  43. //#endregion
  44. export { useFocusController };
  45. //# sourceMappingURL=index.mjs.map