Skip to content

Commit

Permalink
feat(strengh-meter): Add showStrengthMeter prop to show/hide the stre…
Browse files Browse the repository at this point in the history
…ngth meter(#16)

## Description
I need to add some text to the strength meter and have some different design needs, therefore i don't need the original password strength meter but i don't wanted to hide it via CSS
  • Loading branch information
martinherweg authored and apertureless committed Jul 18, 2018
1 parent cf99e6c commit efd8a00
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 1 deletion.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ Interactive password strength meter based on [zxcvbn](https://github.com/dropbox
| successClass | String | Password__badge--success | success class for password count badge |
| 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 |

## Events

Expand Down
12 changes: 11 additions & 1 deletion src/components/PasswordStrengthMeter.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
</div>
</div>

<div v-bind:class="[strengthMeterClass]">
<div v-if="showStrengthMeter" v-bind:class="[strengthMeterClass]">
<div v-bind:class="[strengthMeterFillClass]" :data-score="passwordStrength"></div>
</div>
</div>
Expand Down Expand Up @@ -129,6 +129,16 @@
type: Boolean,
default: false
},
/**
* Prop to toggle the
* strength Meter if
* User wants to implement
* their own
*/
showStrengthMeter: {
type: Boolean,
default: true
},
/**
* CSS Class for the Input field
* @type {String}
Expand Down

0 comments on commit efd8a00

Please sign in to comment.