atst/templates/components/options_input.html
2020-02-17 14:50:57 -05:00

60 lines
1.9 KiB
HTML

{% from "components/icon.html" import Icon %}
{% from "components/tooltip.html" import Tooltip %}
{% macro OptionsInput(
field,
tooltip,
inline=False,
label=True,
show_validation=True,
disabled=False,
optional=True) -%}
<optionsinput
name='{{ field.name }}'
inline-template
{% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
{% if field.data and field.data != "None" %}v-bind:initial-value="'{{ field.data }}'"{% endif %}
key='{{ field.name }}'
v-bind:optional={{ optional|lower }}
v-bind:null-option="'{{ field.default }}'"
>
<div
v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
<fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
{% if label %}
<legend>
<div class="usa-input__title{% if not field.description %}-inline{% endif %}">
{{ field.label | striptags}}
{% if optional %}
<span class="usa-input-label-helper">{{ "common.optional" | translate }}</span>
{% endif %}
{% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
</div>
{% if field.description %}
<p class='usa-input__help'>
{{ field.description | safe }}
</p>
{% endif %}
{% if show_validation %}
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
{% endif %}
</legend>
{% endif %}
{{ field(disabled=disabled) }}
<template v-if='showError'>
<span class='usa-input__message' v-text='validationError'></span>
</template>
</fieldset>
</div>
</optionsinput>
{%- endmacro %}