Vue-ify text-input macro

templates/components/text_input.html

@@ -1,5 +1,11 @@
-{% macro TextInput(field, placeholder='') -%}
-  <div class='usa-input {% if errors %}usa-input--error{% endif %}'>
+{% from "components/icon.html" import Icon %}
+
+{% macro TextInput(field, placeholder='', validation='anything', paragraph=False) -%}
+  <textinput name={{ field.name }} validation={{ validation }} inline-template {% if field.value %}value={{ field.value }}{% endif %}>
+    <div
+      class='usa-input {% if errors %}usa-input--error{% endif %}'
+      v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
+
       <label for={{field.name}}>
         {{ field.label }}
 
@@ -10,9 +16,39 @@
         {% if errors %}
           {{ Icon('alert') }}
         {% endif %}
+
+        <template v-if='showError'>{{ Icon('alert') }}</template>
+        <template v-if='showValid'>{{ Icon('ok') }}</template>
+
       </label>
 
-    {{ field(placeholder=placeholder) | safe }}
+      {% if paragraph %}
+
+        <textarea
+          v-on:input='onInput'
+          v-on:change='onChange'
+          v-model='renderedValue'
+          id='{{ field.name }}'
+          ref='input'
+          placeholder='{{ placeholder }}'>
+        </textarea>
+
+      {% else %}
+
+        <masked-input
+          v-on:input='onInput'
+          v-on:change='onChange'
+          v-model='renderedValue'
+          id='{{ field.name }}'
+          type='text'
+          ref='input'
+          placeholder='{{ placeholder }}'
+          :guide="true"
+          :mask="mask"
+          :pipe="pipe"
+          :keep-char-positions="keepCharPositions">
+        </masked-input>
+      {% endif %}
 
       {% if field.errors %}
         {% for error in field.errors %}
@@ -20,4 +56,5 @@
         {% endfor %}
       {% endif %}
     </div>
+</textinput>
 {%- endmacro %}