feat: ✨ Allow the usage of built-in input to be optional (#19)

Added the prop strengthMeterOnly to toggle the visibily of the input that's already inside the PasswordStrengthMeter component. This will allow users to use their own input element. For this to work both the user's input element and the password component must bound v-model to the same variable.

Author: champi-dev

README.md

@@ -91,6 +91,7 @@ Interactive password strength meter based on [zxcvbn](https://github.com/dropbox
 | strengthMeterClass |  String | Password__strength-meter | strength-meter class |
 | strengthMeterFillClass |  String | Password__strength-meter--fill | strength-meter class for individual data fills |
 | showStrengthMeter |  Boolean | true | Hide the Strength Meter if you want to implement your own |
+| strengthMeterOnly |  Boolean | false | Hides the built-in input if you want to implement your own |
 
 ## Events
 

src/components/PasswordStrengthMeter.vue

@@ -1,17 +1,20 @@
 <template>
   <div class="Password">
-    <div class="Password__group">
+    <div
+      v-if="!strengthMeterOnly" 
+      class="Password__group"
+    >
       <input
         :type="inputType"
         :ref="referanceValue"
-        v-bind:value="value"
-        v-on:input="emitValue($event.target.value)"
         :class="[defaultClass, disabled ? disabledClass : '']"
         :name="name"
         :id="id"
         :placeholder="placeholder"
         :required="required"
         :disabled="disabled"
+        v-bind:value="value"
+        @input="evt => emitValue(evt.target.value)"
       >
       <div class="Password__icons">
         <div
@@ -157,6 +160,16 @@
         type: Boolean,
         default: true
       },
+      /**
+       * Prop to toggle the
+       * input element if
+       * User wants to implement
+       * their own input element
+       */
+      strengthMeterOnly: {
+        type: Boolean,
+        default: false
+      },
       /**
        * CSS Class for the Input field
        * @type {String}
@@ -222,14 +235,6 @@
     },
 
     methods: {
-      /**
-       * Emit passowrd value to parent component
-       * @param  {String} value password typed in
-       */
-      emitValue (value) {
-        this.password = value
-        this.$emit('input', value)
-      },
       togglePassword () {
         if (this.$data._showPassword) {
           this.$emit('hide')
@@ -238,6 +243,10 @@
           this.$emit('show')
           this.$data._showPassword = true
         }
+      },
+      emitValue (value) {
+        this.$emit('input', value)
+        this.password = value
       }
     },
 
@@ -290,6 +299,11 @@
     },
 
     watch: {
+      value (newValue) {
+        if (this.strengthMeterOnly) {
+          this.emitValue(newValue)
+        }
+      },
       passwordStrength (score) {
         this.$emit('score', score)
         this.$emit('feedback', zxcvbn(this.password).feedback)