@vuesax-alpha/nightly/es/components/input/src/composables/use-input.mjs

A Component Library for Vue 3

import { computed, ref, shallowRef } from 'vue';
import '../../../../constants/index.mjs';
import { useInputEvent } from './use-input-event.mjs';
import { useInputClearable } from './use-input-clearable.mjs';
import { UPDATE_MODEL_EVENT } from '../../../../constants/event.mjs';

const useInput = (props, emit) => {
  const model = computed({
    get: () => props.modelValue,
    set: (value) => {
      if (props.disabled || props.loading)
        return;
      emit(UPDATE_MODEL_EVENT, value);
    }
  });
  const hovering = ref(false);
  const inputRef = shallowRef();
  const isVisiblePassword = ref(false);
  const {
    blur,
    handleBlur,
    handleInput,
    handleChange,
    focused,
    focus,
    handleFocus,
    select,
    handleKeydown
  } = useInputEvent({ inputRef });
  const { clear, showClear } = useInputClearable(props, { hovering, focused });
  const handleMouseLeave = (evt) => {
    hovering.value = false;
    emit("mouseleave", evt);
  };
  const handleMouseEnter = (evt) => {
    hovering.value = true;
    emit("mouseenter", evt);
  };
  const inputType = computed(() => {
    if (props.showPassword) {
      if (!isVisiblePassword.value)
        return "password";
      return "text";
    }
    return props.type;
  });
  const clickIcon = (evs) => {
    focus();
    emit("clickIcon", evs);
  };
  const isShowPassword = computed(
    () => props.showPassword && !props.disabled && !props.loading && String(props.modelValue)
  );
  const handleShowPassword = () => {
    if (props.disabled || props.loading)
      return;
    isVisiblePassword.value = !isVisiblePassword.value;
  };
  return {
    model,
    inputType,
    isVisiblePassword,
    inputRef,
    isShowPassword,
    focused,
    hovering,
    handleInput,
    focus,
    handleFocus,
    handleKeydown,
    blur,
    handleBlur,
    handleChange,
    select,
    clickIcon,
    handleShowPassword,
    handleMouseLeave,
    handleMouseEnter,
    clear,
    showClear
  };
};

export { useInput };
//# sourceMappingURL=use-input.mjs.map