input-text

gistfile1.txt

<template>
<div class="form-group input-text" :class="{'has-error':(hasError())}" >

  <input
    v-if="hasMask"
    v-mask="mask"
    :data-vv-validate-on="validation.on"
    :id="id" 
    :name="id" 
    :type="type" 
    :autocomplete="autocomplete"
    v-validate="validation.rule"
    v-model="inputValue"
    @keyup.enter="emitKeyupEnter"
    @keyup="emitKeyup($event.target.value)"
    @blur="checkContent()"
    @focus="inputFocus()"
    :tabindex="tabIndex"
    :maxlength="maxChar"  
  > 
  <input
    v-else
    :data-vv-validate-on="validation.on"
    :id="id" 
    :name="id" 
    :type="type" 
    :autocomplete="autocomplete"
    v-validate="validation.rule"
    v-model="inputValue"
    @keyup.enter="emitKeyupEnter"
    @keyup="emitKeyup($event.target.value)"
    @blur="checkContent()"
    @focus="inputFocus()"
    :tabindex="tabIndex"
    :maxlength="maxChar"  
  > 
  <label :id="'label-'+id" :for="id" v-show="showLabel">{{ hasError()?errorMessage():label }}</label> 

  <slot name="strength-meter" v-if="pwdstr" :strength="this.strength">
    <svg viewBox="0 0 123 2" class="password-meter" preserveAspectRatio="none">
      <path d="M0 1 L30 1" :class="getStrengthClass(0)"></path>
      <path d="M31 1 L61 1" :class="getStrengthClass(1)"></path>
      <path d="M62 1 L92 1" :class="getStrengthClass(2)"></path>
      <path d="M93 1 L123 1" :class="getStrengthClass(3)"></path>
    </svg>
  </slot>

  <slot name="strength-message" v-if="pwdstr" :strength="this.strength">
    <div class="password-meter-message" :class="strengthClass">{{ message }}</div>
  </slot>
</div>
</template>

<script>
  import passwordStrength from 'zxcvbn'

  export default {
    inject: ["$validator"],
    name: "vue-input-text",
    props: {
      id:String, 
      type:String, 
      label:String, 
      mask:{default:String}, 
      validation:Object, 
      model:String, 
      tabIndex:String, 
      pwdstr:Boolean, 
      autocomplete:String, 
      showLabel:{default:true},
      maxChar:String,
    },
    data () {
      return {
        strength:{},
        dirty: false,
        strengthClasses: 
        [
          'password-very-weak',
          'password-weak',
          'password-medium',
          'password-good',
          'password-great'
        ],
        strengthMessages: 
        [
          'Very Weak',
          'Weak',
          'Medium',
          'Strong',
          'Very Strong'
        ],      
        inputValue:"",
      }
    },
    watch: {
      getInputValue(newVal) {
        this.inputValue = newVal;
        if (newVal != "") {
          $("#label-" + this.id).addClass("active-label");
        }
      }
    },
    computed: {
      hasMask() {
        return typeof this.mask === "undefined" || !this.mask ? false : true;
      },
      strengthClass () {
        if (this.strength.score >= 0 && this.pwdstr) {
          if (this.strengthClasses[this.strength.score]) {
            return this.strengthClasses[this.strength.score]
          }
        }
      },
      message () {
        if (this.strength.score >= 0 && this.dirty && this.pwdstr) {
          if (this.strengthMessages[this.strength.score]) {
            return this.strengthMessages[this.strength.score]
          }
        }
      },
      getInputValue(){
        if (!this.$parent[this.model]) {
          return this.$parent[this.model] = '';
        }
        return this.$parent[this.model];
      }
    },
    methods: {
      getStrengthClass (strength) {
        if (this.strength.score > strength) {
          return this.strengthClass
        }
        return ''
      },
      emitKeyupEnter() {
        this.$emit("keyupEnter");
      },
      emitKeyup(value) {
        this.$validator.errors.remove(this.id);
        this.$parent[this.model] = value;

        if(this.pwdstr){
          this.strength = passwordStrength(value);
          this.dirty = true;
        }      
        this.$emit("keyup", value);
      },
      hasError() {
        return this.$validator.errors.has(this.id);
      },
      errorMessage() {
        return this.$validator.errors.first(this.id);
      },
      inputFocus() {
        $("#label-" + this.id).addClass("active-label");
        this.$emit("focus");
      },
      checkContent() {
        if (this.inputValue == "") {
          $("#label-" + this.id).removeClass("active-label");
        } else {
          $("#label-" + this.id).addClass("active-label");
        }
      }
    },
    mounted(){
      this.inputValue = this.getInputValue;
      this.checkContent();
    }
  };
</script>