59 lines
2.3 KiB
HTML
59 lines
2.3 KiB
HTML
{% from "components/icon.html" import Icon %}
|
|
{% from "components/tooltip.html" import Tooltip %}
|
|
|
|
{% macro MultiCheckboxInput(field, tooltip, inline=False) -%}
|
|
<multicheckboxinput
|
|
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 }}'>
|
|
<div
|
|
v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
|
|
|
|
<fieldset v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
|
|
<legend>
|
|
<div class="usa-input__title">
|
|
{{ field.label | striptags}}
|
|
{% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
|
|
</div>
|
|
|
|
{% if field.description %}
|
|
<span class='usa-input__help'>{{ field.description | safe }}</span>
|
|
{% endif %}
|
|
|
|
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
|
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
|
|
</legend>
|
|
|
|
<ul>
|
|
{% for choice in field.choices %}
|
|
<li>
|
|
{% if choice[0] != 'other' %}
|
|
<input type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ field.choices.index(choice) }}' value='{{ choice[0] }}'/>
|
|
<label for='{{ field.name }}-{{ field.choices.index(choice) }}'>{{ choice[1] }}</label>
|
|
{% else %}
|
|
<input @click="otherToggle" type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ field.choices.index(choice) }}' value='other'/>
|
|
<label for='{{ field.name }}-{{ field.choices.index(choice) }}'>{{ choice[1] }}</label>
|
|
|
|
<div v-show="otherChecked">
|
|
<input type='text' name='{{ field.name}}_other' id='{{ field.name }}-other' aria-expanded='false'/>
|
|
</div>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
|
|
|
|
<template v-if='showError'>
|
|
<span class='usa-input__message' v-html='validationError'></span>
|
|
</template>
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
</multicheckboxinput>
|
|
|
|
{%- endmacro %}
|