67 lines
1.9 KiB
HTML
67 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 %}set-value='{{ field.data }}'{% endif %}
|
|
inline-template>
|
|
|
|
<div
|
|
v-bind:class="['usa-input {% if field.errors %}usa-input--error{% endif %} usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
|
|
|
|
<label for={{field.name}}>
|
|
{{ field.label }}
|
|
{% if field.description %}
|
|
<span class='usa-input__help'>{{ field.description | safe }}</span>
|
|
{% endif %}
|
|
|
|
{% if field.errors %}
|
|
{{ Icon('alert') }}
|
|
{% endif %}
|
|
|
|
<template v-if='showError'>{{ Icon('alert') }}</template>
|
|
<template v-if='showValid'>{{ Icon('ok') }}</template>
|
|
|
|
</label>
|
|
|
|
{% if paragraph %}
|
|
|
|
<textarea
|
|
v-on:input='onInput'
|
|
v-on:change='onChange'
|
|
v-bind:value='value'
|
|
id='{{ field.name }}'
|
|
name='{{ 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 }}'
|
|
name='{{ field.name }}'
|
|
type='text'
|
|
ref='input'
|
|
placeholder='{{ placeholder }}'
|
|
{% if field.errors %}aria-invalid='true'{% endif %}>
|
|
</masked-input>
|
|
|
|
{% endif %}
|
|
|
|
{% if field.errors %}
|
|
{% for error in field.errors %}
|
|
<span class='usa-input__message'>{{ error }}</span>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</textinput>
|
|
{%- endmacro %}
|