76 lines
2.6 KiB
HTML
76 lines
2.6 KiB
HTML
{% from "components/icon.html" import Icon %}
|
|
|
|
{# expects a wtforms SelectField instance #}
|
|
{% macro Selector(field, default_label='Select an option') -%}
|
|
|
|
<selector
|
|
v-bind:choices='{{ field.choices | tojson }}'
|
|
default-label='{{ default_label }}'
|
|
{% if field.data %}initial-choice='{{ field.data }}'{% endif %}
|
|
{% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
|
|
inline-template>
|
|
|
|
<fieldset v-bind:class="['selector usa-input', { 'usa-input--error': initialErrors }]">
|
|
<v-popover v-bind:container='false' ref='popover'>
|
|
<legend>
|
|
<div class="usa-input__title">{{ field.label | striptags }}</div>
|
|
|
|
{% if field.description %}
|
|
<span class='usa-input__help'>{{ field.description | safe }}</span>
|
|
{% endif %}
|
|
|
|
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
|
</legend>
|
|
|
|
<button
|
|
class='selector__button'
|
|
type='button'
|
|
v-html='label'
|
|
v-on:keyup.down='handleButtonArrowDown'
|
|
v-tooltip='{ container:false }'>
|
|
</button>
|
|
|
|
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
|
|
|
<input type='hidden' name='{{ field.name }}' v-bind:value='value'/>
|
|
|
|
<template v-if='showError'>
|
|
<span v-if='initialErrors' v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
|
|
</template>
|
|
|
|
<template slot='popover'>
|
|
<div class='block-list'>
|
|
<ul>
|
|
<li v-for='choice in choices' class='block-list__item block-list__item--selectable'>
|
|
<template v-if='choice[0] !== ""'>
|
|
<input
|
|
tabindex='0'
|
|
type='radio'
|
|
name="{{ field.name }}"
|
|
v-bind:id="'{{ field.name }}_' + choice[0]"
|
|
v-bind:value='choice[0]'
|
|
v-bind:checked='value === choice[0]'
|
|
v-on:click='handleClickOption'
|
|
v-on:keyup.enter='handleEnterOption'
|
|
v-on:keyup.down='handleSwitchOption'
|
|
v-on:keyup.up='handleSwitchOption'/>
|
|
<label v-bind:for="'{{ field.name }}_' + choice[0]">
|
|
<template v-if='choice[1].description'>
|
|
<dl>
|
|
<dt v-html='choice[1].name'></dt>
|
|
<dd v-html='choice[1].description'></dd>
|
|
</dl>
|
|
</template>
|
|
<span v-else v-html='choice[1].name'>
|
|
</label>
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</v-popover>
|
|
</fieldset>
|
|
</selector>
|
|
|
|
{%- endmacro %}
|