text input

<template>
  <div class="input-block" :class="{ 'input-block__error': errorMessage }">
    <div v-if="label || errorMessage" class="input-block__head">
      <p v-if="label" class="input-block__label">{{ label }}</p>
      <p v-if="textError" class="input-block__error--text">{{ textError }}</p>
    </div>
    <input
      v-model="value"
      :type="type"
      :disabled="disabled"
      :placeholder="placeholder"
      :name="name"
      @blur="handleBlur"
      @input="handleChange"
    />

    <p v-if="note" class="input-block__note">{{ note }}</p>
  </div>
</template>
<script setup lang="ts">
import { useField } from "vee-validate";

type InputPropsType = {
  label?: string;
  note?: string;
  modelValue: string | number | null;
  name: string;
  type?: string;
  disabled?: boolean;
  placeholder?: string;
  required?: boolean;
  error?: string | null;
};

const props = withDefaults(defineProps<InputPropsType>(), {
  label: undefined,
  note: undefined,
  modelValue: "",
  type: "text",
  disabled: false,
  placeholder: undefined,
  required: false,
  error: null,
});

const { error } = toRefs(props);

const textError = computed(() => (error?.value ? error?.value : errorMessage.value));
const { value, errorMessage, handleBlur, handleChange } = useField(props.name, undefined, {
  syncVModel: true,
});
</script>