all files / src/components/ Prompt.vue

0% Statements 0/4
100% Branches 0/0
100% Functions 0/0
0% Lines 0/4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33                                                                 
<template>
  <span class="snotifyToast__input" :class="{'snotifyToast__input--filled': isPromptFocused}">
    <input @input="valueChanged"
           class="snotifyToast__input__field" type="text"
           :id="id"
           @focus="isPromptFocused = true"
           @blur="isPromptFocused = !!length"/>
    <label class="snotifyToast__input__label" :for="id">
      <span class="snotifyToast__input__labelContent">{{placeholder | truncate}}</span>
    </label>
  </span>
</template>
 
<script>
  export default {
    props: ['placeholder'],
    data () {
      return {
        id: 545,
        isPromptFocused: false,
        length: 0
      }
    },
    methods: {
      valueChanged (e) {
        const value = e.target.value.trim()
        this.length = value.length
        this.$emit('valueChanged', value)
      }
    }
  }
</script>