From 26ed7d204f0317f7ad80793d53ca783f111f379b Mon Sep 17 00:00:00 2001
From: Daniel Sarmiento <danielsarcor@gmail.com>
Date: Wed, 25 Jul 2018 13:47:50 -0500
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Allow=20the=20usage=20of=20buil?=
 =?UTF-8?q?t-in=20input=20to=20be=20optional?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/components/PasswordStrengthMeter.vue | 36 ++++++++++++++++--------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/PasswordStrengthMeter.vue b/src/components/PasswordStrengthMeter.vue
index 9d0f616..6548158 100644
--- a/src/components/PasswordStrengthMeter.vue
+++ b/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
@@ -156,6 +159,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}
@@ -221,14 +234,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')
@@ -237,6 +242,10 @@
           this.$emit('show')
           this.$data._showPassword = true
         }
+      },
+      emitValue (value) {
+        this.$emit('input', value)
+        this.password = value
       }
     },
 
@@ -289,6 +298,11 @@
     },
 
     watch: {
+      value (newValue) {
+        if (this.strengthMeterOnly) {
+          this.emitValue(newValue)
+        }
+      },
       passwordStrength (score) {
         this.$emit('score', score)
         this.$emit('feedback', zxcvbn(this.password).feedback)

From 000d1630e7bc135f2187c8678c3b25e11b5293da Mon Sep 17 00:00:00 2001
From: daniel <daniel@daniels-MacBook-Pro.local>
Date: Mon, 3 Dec 2018 20:07:55 -0500
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=93=9D=20Add=20strengthMeterOnly=20to?=
 =?UTF-8?q?=20Props=20in=20README.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index f7d1dce..e85a7e3 100644
--- a/README.md
+++ b/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