<template>
  <div class="lanaya-input" :style="widthStyle">
    <input class="lanaya-input__inner"
           :min="$attrs.min"
           :max="$attrs.max"
           :placeholder="$attrs.placeholder"
           :type="whichType"
           :value="inputValue"
           v-on="allListeners">
  </div>
</template>

<script>
const INPUT_TYPE = ['text', 'password', 'number'];
export default {
  name: 'LInput',
  model: {
    prop: 'inputValue',
    event: 'inputValueChange'
  },
  props: {
    inputValue: {
      type: null
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  computed: {
    allListeners () {
      const vm = this;
      return {
        keyup (e) {
          vm.$emit('inputValueChange', e.target.value, e);
          vm.$emit('keyup', e.target.value, e);
        },
        keydown (e) {
          vm.$emit('keydown', e.target.value, e);
        },
        keypress (e) {
          vm.$emit('keypress', e.target.value, e);
        },
        change (e) {
          vm.$emit('inputValueChange', e.target.value, e);
          vm.$emit('change', e.target.value, e);
        },
        blur (e) {
          vm.$emit('blur', e.target.value, e);
        },
        focus (e) {
          vm.$emit('focus', e.target.value, e);
        }
      };
    },
    widthStyle () {
      return {
        width: this.width
      };
    },
    whichType () {
      return INPUT_TYPE.includes(this.$attrs.type) ? this.$attrs.type : 'text';
    }
  }
};
</script>
