119 lines
3.3 KiB
HTML
119 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,
|
|
showLabel=True,
|
|
watch=False,
|
|
show_validation=True,
|
|
inset_form=False) -%}
|
|
|
|
<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 }}
|
|
v-bind:inset-form={{ inset_form|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 tooltip and not disabled %}
|
|
{{ Tooltip(tooltip, tooltip_title) }}
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if field.description %}
|
|
<span class='usa-input__help'>{{ description | safe }}</span>
|
|
{% 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 %}
|
|
<template v-if='showError'>
|
|
<span class='usa-input__message' v-html='validationError'></span>
|
|
</template>
|
|
<template v-else>
|
|
<span class='usa-input__message'></span>
|
|
</template>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</textinput>
|
|
{%- endmacro %}
|