You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

69 lines
2.1 KiB

1 month ago
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. var types = require('../../utils/types.js');
  6. var shared = require('@vue/shared');
  7. function useFocusController(target, {
  8. beforeFocus,
  9. afterFocus,
  10. beforeBlur,
  11. afterBlur
  12. } = {}) {
  13. const instance = vue.getCurrentInstance();
  14. const { emit } = instance;
  15. const wrapperRef = vue.shallowRef();
  16. const isFocused = vue.ref(false);
  17. const handleFocus = (event) => {
  18. const cancelFocus = shared.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 = shared.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)
  37. return;
  38. (_b = target.value) == null ? void 0 : _b.focus();
  39. };
  40. vue.watch(wrapperRef, (el) => {
  41. if (el) {
  42. el.setAttribute("tabindex", "-1");
  43. }
  44. });
  45. core.useEventListener(wrapperRef, "focus", handleFocus, true);
  46. core.useEventListener(wrapperRef, "blur", handleBlur, true);
  47. core.useEventListener(wrapperRef, "click", handleClick, true);
  48. if (process.env.NODE_ENV === "test") {
  49. vue.onMounted(() => {
  50. const targetEl = types.isElement(target.value) ? target.value : document.querySelector("input,textarea");
  51. if (targetEl) {
  52. core.useEventListener(targetEl, "focus", handleFocus, true);
  53. core.useEventListener(targetEl, "blur", handleBlur, true);
  54. }
  55. });
  56. }
  57. return {
  58. isFocused,
  59. wrapperRef,
  60. handleFocus,
  61. handleBlur
  62. };
  63. }
  64. exports.useFocusController = useFocusController;
  65. //# sourceMappingURL=index.js.map