docs: add additional docs in regards to dynamic masks

Author: RonaldJerez

docs/component.md

@@ -17,15 +17,21 @@ let masked = false
 Accepts an array of masking pattern and dynamically chooses the appropriate one based on the number of characters in the field.
 
 ```js
-let value = ''
-let masked = true
+let USPostal = ''
+let UKPostal = ''
 
+let masked = true
 <example label="US Zip Code">
-  <input-facade v-model="value" :mask="['#####', '#####-####']" :masked="masked" />
+  <input-facade v-model="USPostal" :mask="['#####', '#####-####']" :masked="masked" />
+</example>
+
+<example label="UK Postal Code">
+  <input-facade v-model="UKPostal" :mask="['A# #AA', 'AXX #AA', 'AA#X #AA']" :masked="masked" />
 </example>
 
 <checkbox v-model="masked" />
-<display :value="value" />
+<display label="Zip Code" :value="USPostal" />
+<display label="Postal Code" :value="UKPostal" />
 ```
 
 ### Custom Tokens

docs/directive.md

@@ -20,7 +20,7 @@ You have access to the unmasked value via the input event.  The `unmaskedValue`
 let event = ''
 
 <example label="Enter your phone number">
-  <input type="tel" v-facade="'(###) ### - ####'" @input="event = $event">
+  <input type="tel" v-facade="'(###) ### - ####'" v-on:input="event = $event">
 </example>
 
 <display :value="event" />

src/component.vue

@@ -58,6 +58,7 @@ export default {
     formatter: Function,
     /**
      * If the mask starts with static characters, show them in the field initially before typing anything.
+     * @since v1.2
      */
     prepend: {
       type: Boolean,

styleguide/components/Checkbox.vue

@@ -76,7 +76,8 @@ export default {
 }
 
 .checkbox__input:checked + .checkbox__label::before {
-  color: #1a73e8;
+  color: #ffffff;
   border: 1px solid #1a73e8;
+  background-color: #1a73e8;
 }
 </style>

styleguide/components/Display.vue

@@ -7,7 +7,7 @@
 <script>
 export default {
   name: 'Display',
-  props: ['value'],
+  props: ['value', 'label'],
   computed: {
     display() {
       let output = ''
@@ -21,7 +21,7 @@ export default {
   unmaskedValue: '${unmasked}'
 }`
       } else if (typeof this.value === 'string') {
-        output = `value: '${this.value}'`
+        output = `${this.label || 'value'}: '${this.value}'`
       }
 
       return output
@@ -33,9 +33,14 @@ export default {
 <style>
 .display {
   margin: 0;
+  margin-bottom: 4px;
   margin-left: -16px;
 }
 
+.display:last-child {
+  margin-bottom: 0;
+}
+
 .display__value {
   padding: 12px;
   border-radius: 10px;