<template>
  <ValidationProvider
    v-slot="{ errors, valid, invalid }"
    :rules="rules"
    :name="name"
    tag="div"
  >
    <vs-input
      :value="value"
      :success="valid"
      :danger="invalid"
      :danger-text="errors[0]"
      :icon="icon"
      :label-placeholder="label"
      val-icon-success="done"
      val-icon-danger="clear"
      class="w-full mb-2"
      @input="$event => $emit('input', $event)"
      @focus="$event => $emit('focus', $event)"
      @blur="$event => $emit('blur', $event)"
    />
  </ValidationProvider>
</template>

<script>
import { ValidationProvider } from 'vee-validate';
export default {
  components: {
    ValidationProvider
  },
  props: {
    value: {
      type: [ String, Number ],
      default: undefined
    },
    rules: {
      type: [ String, Object ],
      required: true
    },
    name: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      default: undefined
    }
  }
}
</script>