5a98e6966e
As part of this, the empty placeholder span was removed from the text input macro and the span will now be conditionall rendered if there is an error message
118 lines
3.3 KiB
HTML
118 lines
3.3 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,
|
|
watch=False,
|
|
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 }}'
|
|
:watch='{{ watch | string | lower }}'
|
|
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 %}
|