vuestic-ui/dist/web-components/src/composables/useFocus.js

Vue 3 UI Framework

import { u as unwrapEl } from "../utils/unwrapEl.js";
import { a as focusElement, b as blurElement } from "../utils/focus.js";
import { computed } from "vue";
import { u as useEvent } from "./useEvent.js";
import { u as useActiveElement } from "./useActiveElement.js";
import { i as isNilValue } from "../utils/isNilValue.js";
const useFocusEmits = ["focus", "blur"];
function useFocus(el, emit) {
  const activeElement = useActiveElement();
  const isFocused = computed({
    get: () => {
      if (isNilValue(activeElement.value)) {
        return false;
      }
      if (isNilValue(el == null ? void 0 : el.value)) {
        return false;
      }
      return activeElement.value === (el == null ? void 0 : el.value);
    },
    set: (value) => {
      if (value) {
        focus();
      } else {
        blur();
      }
    }
  });
  const onFocus = (e) => {
    emit == null ? void 0 : emit("focus", e);
  };
  const onBlur = (e) => {
    emit == null ? void 0 : emit("blur", e);
  };
  const focus = () => {
    if (!(el == null ? void 0 : el.value)) {
      return;
    }
    focusElement(unwrapEl(el == null ? void 0 : el.value));
  };
  const blur = () => {
    if (!(el == null ? void 0 : el.value)) {
      return;
    }
    blurElement(unwrapEl(el == null ? void 0 : el.value));
  };
  useEvent("focus", onFocus, el);
  useEvent("blur", onBlur, el);
  return {
    isFocused,
    onFocus,
    onBlur,
    focus,
    blur
  };
}
export {
  useFocusEmits as a,
  useFocus as u
};
//# sourceMappingURL=useFocus.js.map