docs: fix field component to detect initial value

Author: RonaldJerez

docs/directive.md

@@ -3,7 +3,7 @@ For times when you cannot use the component, you may use the directive instead.
 ### Basic usage
 
 ```js
-let value = ''
+let value = '12A789MM'
 
 <example label="Order number">
   <input type="text" v-model="value" v-facade="'XXX-###-AA'">

styleguide/components/Field.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['field-wrapper', { hasValue }]" @input="input">
+  <div :class="['field-wrapper', { hasValue: value }]" @input="input">
     <slot />
     <label>{{ label }}</label>
   </div>
@@ -10,7 +10,11 @@ export default {
   name: 'Field',
   props: ['label'],
   mounted() {
-    if (this.$children[0]) {
+    // detect the initial value
+    const slot = this.$slots.default[0]
+    if (slot && slot.tag === 'input') {
+      this.value = slot.elm.value
+    } else if (this.$children[0]) {
       this.value = this.$children[0].value
     }
   },
@@ -19,11 +23,6 @@ export default {
       value: null
     }
   },
-  computed: {
-    hasValue() {
-      return !!this.value
-    }
-  },
   methods: {
     input(event) {
       this.value = event.target.value

styleguide/style.css

@@ -9,10 +9,6 @@ html, body {
   display: none;
 }
 
-[class^=rsg--controls], [class^=rsg--toolbar] {
-  display: none !important;
-}
-
 [class^=rsg--preview] {
   margin-bottom: 16px !important;
 }