feat: add « disabled » and « disabledClass » prop (#15)

Add a feature that allow us to disable/enable the input field with a prop.

```html
<password 
    v-model="password"
    disabled
/>
```

**When enabled:**
![capture du 2018-07-17 11-40-43](https://user-images.githubusercontent.com/9256415/42809802-b83ae82c-89b6-11e8-8598-692dae9dd52a.png)

**When disabled:**
![capture du 2018-07-17 11-40-57](https://user-images.githubusercontent.com/9256415/42809803-b8537e46-89b6-11e8-914b-6fa4b12b921a.png)

Visual modifications are minors, but it still can be modified.

README.md

@@ -79,11 +79,13 @@ Interactive password strength meter based on [zxcvbn](https://github.com/dropbox
 | placeholder |  String | Please enter your password | input field placeholder attribute |
 | name |  String | password | input field name attribute |
 | required |  Boolean | true | input field required attribute |
+| disabled |  Boolean | false | input field disabled attribute |
 | secureLength |  Number | 7 | password min length |
 | badge |  Boolean | true | display password count badge |
 | toggle |  Boolean | false | show button to toggle password visibility |
 | showPassword |  Boolean | false | If you are not using the `toggle` button you can directly show / hide the password with this prop |
 | defaultClass |  String | Password__field | input field class |
+| disabledClass |  String | Password__field--disabled | disabled input field class |
 | errorClass |  String | Password__badge--error | error class for password count badge |
 | successClass |  String | Password__badge--success | success class for password count badge |
 | strengthMeterClass |  String | Password__strength-meter | strength-meter class |

src/components/PasswordStrengthMeter.vue

@@ -6,11 +6,12 @@
         ref="input"
         v-bind:value="value"
         v-on:input="emitValue($event.target.value)"
-        :class="[defaultClass]"
+        :class="[defaultClass, disabled ? disabledClass : '']"
         :name="name"
         :id="id"
         :placeholder="placeholder"
         :required="required"
+        :disabled="disabled"
       >
       <div class="Password__icons">
         <div
@@ -91,6 +92,14 @@
         type: Boolean,
         default: true
       },
+      /**
+       * Input field disabled attribute
+       * @type {Boolean}
+       */
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       /**
        * Password min length.
        * Right now only visual for the badge
@@ -137,6 +146,14 @@
         type: String,
         default: 'Password__field'
       },
+      /**
+       * CSS Class for the disabled Input field
+       * @type {String}
+       */
+      disabledClass: {
+        type: String,
+        default: 'Password__field--disabled'
+      },
       /**
        * CSS Class for the badge
        * if a password does not match
@@ -349,6 +366,11 @@
     width: 100%;
   }
 
+  .Password__field--disabled {
+    background-color: #f6f6f6;
+    border: 1px solid #f6f6f6;
+  }
+
   .Password__icons {
     position: absolute;
     top: 0;