
<template>
  <div class="form-input mb-4 last:mb-0 flex" :style="options.style">
    <v-label :options="options"></v-label>
    <div class="form-value flex-1">
      <input class="input w-full" :value="options.value" @input="handleChange" />
    </div>
  </div>
</template>
<script>
import Base from '../base';
import vLabel from './label';

export default {
  name: 'v-form-input',
  extends: Base,
  components: {
    vLabel
  },
  props: {
    value: String,
  },
  methods: {
    handleChange(event){
      console.log('update:value', event.target.value);
      this.$emit('update:value', event.target.value);
    }
  }
}
</script>
<style lang="less" scoped>
.form-input {
  .input {
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0.4rem;
  }
}
</style>
