<script>
export default {
  name: 'VTextarea',
  props: {
    id: {
      default: 'input',
      type: String
    },
    type: {
      default: 'text',
      type: String
    },
    name: {
      default: '',
      type: String
    },
    textareaClass: {
      default: '',
      type: String
    },
    placeholder: {
      default: '',
      type: String
    },
    required: {
      default: false,
      type: Boolean
    },
    value: {
      default: '',
      type: String
    },
    onChange: {
      default: () => {},
      type: Function
    }
  },
  computed: {
  },
  methods: {
    setValue: function (e) {
      this.onChange({key: this.name, value: e.target.value})
    }
  }
}
</script>

<template>
  <textarea
    :id="id"
    :type="type"
    :name="name"
    :class="`border p-2.5 w-full text-sm bg-gray-50 rounded-lg border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 ${textareaClass}`"
    :placeholder="placeholder"
    :required="required"
    :value="value"
    :on:change="setValue" 
  />
</template>
