index.mjs 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. import { getCurrentInstance, shallowRef, ref, watch } from 'vue';
  2. import { useEventListener } from '@vueuse/core';
  3. import '../../utils/index.mjs';
  4. import { isFunction } from '@vue/shared';
  5. function useFocusController(target, { afterFocus, beforeBlur, afterBlur } = {}) {
  6. const instance = getCurrentInstance();
  7. const { emit } = instance;
  8. const wrapperRef = shallowRef();
  9. const isFocused = ref(false);
  10. const handleFocus = (event) => {
  11. if (isFocused.value)
  12. return;
  13. isFocused.value = true;
  14. emit("focus", event);
  15. afterFocus == null ? void 0 : afterFocus();
  16. };
  17. const handleBlur = (event) => {
  18. var _a;
  19. const cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false;
  20. if (cancelBlur || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget)))
  21. return;
  22. isFocused.value = false;
  23. emit("blur", event);
  24. afterBlur == null ? void 0 : afterBlur();
  25. };
  26. const handleClick = () => {
  27. var _a;
  28. (_a = target.value) == null ? void 0 : _a.focus();
  29. };
  30. watch(wrapperRef, (el) => {
  31. if (el) {
  32. el.setAttribute("tabindex", "-1");
  33. }
  34. });
  35. useEventListener(wrapperRef, "click", handleClick);
  36. return {
  37. wrapperRef,
  38. isFocused,
  39. handleFocus,
  40. handleBlur
  41. };
  42. }
  43. export { useFocusController };
  44. //# sourceMappingURL=index.mjs.map