68 lines
2.2 KiB
HTML
68 lines
2.2 KiB
HTML
{% from "components/icon.html" import Icon %}
|
|
{% from "components/tooltip.html" import Tooltip %}
|
|
|
|
{% macro TextInput(field, tooltip='', placeholder='', validation='anything', paragraph=False) -%}
|
|
<textinput
|
|
name='{{ field.name }}'
|
|
validation='{{ validation }}'
|
|
{% if paragraph %}paragraph='true'{% endif %}
|
|
{% if field.data %}initial-value='{{ field.data }}'{% endif %}
|
|
{% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
|
|
key='{{ field.name }}'
|
|
inline-template>
|
|
|
|
<div
|
|
v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph }]">
|
|
|
|
<label for={{field.name}}>
|
|
<div class="usa-input__title">{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>
|
|
|
|
{% if field.description %}
|
|
<span class='usa-input__help'>{{ field.description | safe }}</span>
|
|
{% endif %}
|
|
|
|
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
|
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</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'
|
|
v-bind:aria-invalid='showError'
|
|
id='{{ field.name }}'
|
|
type='text'
|
|
ref='input'
|
|
placeholder='{{ placeholder }}'>
|
|
</masked-input>
|
|
|
|
{% endif %}
|
|
|
|
<input type='hidden' v-bind:value='rawValue' name='{{ field.name }}' />
|
|
|
|
<template v-if='showError'>
|
|
<span v-if='initialErrors' v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
|
|
<span v-if='!initialErrors' class='usa-input__message' v-html='validationError'></span>
|
|
</template>
|
|
|
|
</div>
|
|
</textinput>
|
|
{%- endmacro %}
|