import { ref } from 'vue';

function useFocus(emit, validate) {
  const focused = ref(false);
  const handleFocus = event => {
    focused.value = true;
    emit('focus', event);
  };
  const handleBlur = event => {
    focused.value = false;
    emit('blur', event);
    validate('blur');
  };
  return {
    focused,
    handleFocus,
    handleBlur
  };
}
function useMouse(emit) {
  const hovering = ref(false);
  const onMouseLeave = e => {
    hovering.value = false;
    emit('mouseleave', e);
  };
  const onMouseEnter = e => {
    hovering.value = true;
    emit('mouseenter', e);
  };
  return {
    hovering,
    onMouseLeave,
    onMouseEnter
  };
}

export { useFocus, useMouse };
