feat: Add props for the icon labels

FIXES #26
apertureless · Dec 27, 2018 · 12c6d01 · 12c6d01
1 parent 23e5b37
commit 12c6d01
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -74,7 +74,6 @@ Interactive password strength meter based on [zxcvbn](https://github.com/dropbox
 ### With custom input
 
 ```html
-
 <template>
   <div>
     <input type="password" v-model="password">
@@ -113,6 +112,8 @@ Interactive password strength meter based on [zxcvbn](https://github.com/dropbox
 | 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 |
+| labelHide |  String | 'Hide Password' | Label for the hide icon
+| labelShow |  String | 'Show Password' | Label for the show icon
 
 ## Events
 

diff --git a/src/components/PasswordStrengthMeter.vue b/src/components/PasswordStrengthMeter.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="Password">
     <div
-      v-if="!strengthMeterOnly" 
+      v-if="!strengthMeterOnly"
       class="Password__group"
     >
       <input
@@ -34,11 +34,11 @@
               :aria-label="showPasswordLabel"
               @click.prevent="togglePassword()">
               <svg v-if="this.$data._showPassword" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-                <title>Hide Password</title>
+                <title>{{showPasswordLabel}}</title>
                 <path d="M12 9c1.641 0 3 1.359 3 3s-1.359 3-3 3-3-1.359-3-3 1.359-3 3-3zM12 17.016c2.766 0 5.016-2.25 5.016-5.016s-2.25-5.016-5.016-5.016-5.016 2.25-5.016 5.016 2.25 5.016 5.016 5.016zM12 4.5c5.016 0 9.281 3.094 11.016 7.5-1.734 4.406-6 7.5-11.016 7.5s-9.281-3.094-11.016-7.5c1.734-4.406 6-7.5 11.016-7.5z"></path>
               </svg>
               <svg v-else version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-                <title>Show Password</title>
+                <title>{{showPasswordLabel}}</title>
                 <path d="M11.859 9h0.141c1.641 0 3 1.359 3 3v0.188zM7.547 9.797c-0.328 0.656-0.563 1.406-0.563 2.203 0 2.766 2.25 5.016 5.016 5.016 0.797 0 1.547-0.234 2.203-0.563l-1.547-1.547c-0.188 0.047-0.422 0.094-0.656 0.094-1.641 0-3-1.359-3-3 0-0.234 0.047-0.469 0.094-0.656zM2.016 4.266l1.266-1.266 17.719 17.719-1.266 1.266c-1.124-1.11-2.256-2.213-3.375-3.328-1.359 0.563-2.813 0.844-4.359 0.844-5.016 0-9.281-3.094-11.016-7.5 0.797-1.969 2.109-3.656 3.75-4.969-0.914-0.914-1.812-1.844-2.719-2.766zM12 6.984c-0.656 0-1.266 0.141-1.828 0.375l-2.156-2.156c1.219-0.469 2.578-0.703 3.984-0.703 5.016 0 9.234 3.094 10.969 7.5-0.75 1.875-1.922 3.469-3.422 4.734l-2.906-2.906c0.234-0.563 0.375-1.172 0.375-1.828 0-2.766-2.25-5.016-5.016-5.016z"></path>
               </svg>
             </button>
@@ -225,6 +225,20 @@
       strengthMeterFillClass: {
         type: String,
         default: 'Password__strength-meter--fill'
+      },
+      /**
+       * Label for the show password icon
+       */
+      labelShow: {
+        type: String,
+        default: 'Show Password'
+      },
+      /**
+       * Label for the hide password icon
+       */
+      labelHide: {
+        type: String,
+        default: 'Hide Password'
       }
     },
     data () {
@@ -294,7 +308,7 @@
       },
 
       showPasswordLabel () {
-        return this.$data._showPassword || this.showPassword ? 'Hide password' : 'Show password'
+        return this.$data._showPassword || this.showPassword ? this.labelHide : this.labelShow
       }
     },