65 lines
1.9 KiB
HTML
65 lines
1.9 KiB
HTML
{% from "components/icon.html" import Icon %}
|
|
|
|
{% macro TextInput(field, placeholder='', validation='anything', paragraph=False) -%}
|
|
<textinput
|
|
name='{{ field.name }}'
|
|
validation='{{ validation }}'
|
|
{% if field.data %}initial-value='{{ field.data }}'{% endif %}
|
|
{% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
|
|
inline-template>
|
|
|
|
<div
|
|
v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
|
|
|
|
<label for={{field.name}}>
|
|
{{ field.label | striptags }}
|
|
|
|
{% if field.description %}
|
|
<span class='usa-input__help'>{{ field.description | safe }}</span>
|
|
{% endif %}
|
|
|
|
<span v-show='showError'>{{ Icon('alert') }}</span>
|
|
<span v-show='showValid'>{{ Icon('ok') }}</span>
|
|
|
|
</label>
|
|
|
|
{% if paragraph %}
|
|
|
|
<textarea
|
|
v-on:input='onInput'
|
|
v-on:change='onChange'
|
|
v-bind:value='value'
|
|
id='{{ field.name }}'
|
|
ref='input'
|
|
placeholder='{{ placeholder }}'>
|
|
</textarea>
|
|
|
|
{% else %}
|
|
|
|
<masked-input
|
|
v-on:input='onInput'
|
|
v-on:change='onChange'
|
|
v-bind:value='value'
|
|
v-bind:mask='mask'
|
|
v-bind:pipe='pipe'
|
|
v-bind:keep-char-positions='keepCharPositions'
|
|
id='{{ field.name }}'
|
|
type='text'
|
|
ref='input'
|
|
placeholder='{{ placeholder }}'
|
|
{% if field.errors %}aria-invalid='true'{% endif %}>
|
|
</masked-input>
|
|
|
|
{% endif %}
|
|
|
|
<input type='hidden' v-bind:value='rawValue' name='{{ field.name }}' />
|
|
|
|
<template v-if='showError'>
|
|
<span v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
|
|
<span v-if='!initialErrors.length' class='usa-input__message' v-html='validationError'></span>
|
|
</template>
|
|
|
|
</div>
|
|
</textinput>
|
|
{%- endmacro %}
|