<template>
  <textarea
    :id="id"
    :disabled="disabled"
    :class="{ error: error }"
    :name="`input_${id}`"
    :value="value"
    :required="required"
    :placeholder="placeholder"
    @keyup.enter="$emit('setter', $event.target.value)"
    @input="
      $emit('setter', $event.target.value);
      $emit('removeError', id);
    "
    :style="`height:${height}`"
  />
</template>

<script>
export default {
  name: "InputTextArea",
  props: {
    id: { type: String, required: true },
    placeholder: { type: String, required: true },
    error: { type: Boolean, required: false, default: false },
    required: { type: Boolean, required: false, default: false },
    disabled: { type: Boolean, required: false, default: false },
    value: { type: String, required: false, default: null },
    label: { type: String, required: false, default: null },
    height: { type: String, required: false, default: "42px" },
  },
};
</script>
