atst/templates/components/text_input.html

116 lines
3.2 KiB
HTML

{% from "components/icon.html" import Icon %}
{% from "components/tooltip.html" import Tooltip %}
{% macro TextInput(
field,
label=field.label | striptags,
description=field.description,
tooltip='',
tooltip_title='Help',
placeholder='',
validation='anything',
paragraph=False,
disabled=False,
initial_value='',
classes='',
noMaxWidth=False,
optional=True,
showOptional=True,
showLabel=True,
show_validation=True) -%}
<textinput
v-cloak
name='{{ field.name }}'
validation='{{ validation }}'
{% if paragraph %}paragraph='true'{% endif %}
{% if noMaxWidth %}no-max-width='true'{% endif %}
{% if initial_value or field.data is not none %}initial-value='{{ initial_value or field.data }}'{% endif %}
{% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
v-bind:optional={{ optional|lower }}
key='{{ field.name }}'
inline-template>
<div
class='{% if disabled %}input--disabled{% endif %} {{ classes }}'
v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
{% if showLabel %}
<label for={{field.name}}>
<div class="usa-input__title">
{{ label }}
{% if optional and showOptional %}
<span class="usa-input-label-helper">(optional)</span>
{% endif %}
{% if tooltip and not disabled %}
{{ Tooltip(tooltip, tooltip_title) }}
{% endif %}
</div>
{% if field.description %}
<p class='usa-input__help'>
{{ description | safe }}
</p>
{% endif %}
{% if not disabled %}
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
{% endif %}
</label>
{% endif %}
{% if paragraph %}
<textarea
v-on:input='onInput'
v-on:change='onChange'
v-bind:value='value'
{% if not disabled %}
id='{{ field.name }}'
{% endif %}
ref='input'
placeholder='{{ placeholder }}'>
</textarea>
{% else %}
<masked-input
v-on:input='onInput'
v-on:blur='onBlur'
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'
type='text'
{% if disabled %}
disabled="disabled"
readonly="readonly"
{% else %}
id='{{ field.name }}'
{% endif %}
ref='input'
placeholder='{{ placeholder }}'>
</masked-input>
{% endif %}
<input
type='hidden'
v-bind:value='rawValue'
{% if not disabled %}
name='{{ field.name }}'
{% endif %}
/>
{% if show_validation %}
<span v-if='showError' class='usa-input__message' v-html='validationError'></span>
{% endif %}
</div>
</textinput>
{%- endmacro %}