atst/templates/components/selector.html

99 lines
3.3 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 data-ally-disabled="true" v-bind:class="['selector usa-input', { 'usa-input--error': initialErrors }]">
<v-popover v-bind:container='false' ref='popover' v-on:show='onShow'>
<legend>
<div class="usa-input__title">{{ field.label | striptags }}</div>
{% if field.description %}
<p class='usa-input__help'>
{{ field.description | safe }}
</p>
{% endif %}
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
</legend>
<button
class='selector__button'
type='button'
v-html='label'
v-on:keydown.down.prevent.stop='handleButtonArrowDown'
v-on:keydown.up.prevent.stop='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, index) in choices' class='block-list__item block-list__item--selectable'>
<template v-if='choice[0] !== ""'>
<selector-input
name="{{ field.name }}"
ref='choices'
v-bind:value='choice[0]'
v-bind:label='choice[1].name'
v-bind:description='choice[1].description'
v-bind:selected='value === choice[0]'
v-bind:handle-change='change'
v-bind:handle-enter='enter'
v-bind:handle-esc='esc'
inline-template>
<div>
<input
ref='input'
tabindex='0'
type='radio'
v-bind:name='name'
v-bind:id='id'
v-bind:value='value'
v-bind:checked='selected'
v-bind:autofocus='selected'
v-on:change='onChange'
v-on:keydown.enter.prevent.stop='onEnter'
v-on:keydown.esc.prevent.stop='onEsc'/>
<label v-bind:for='id'>
<template v-if='description'>
<dl>
<dt v-html='label'></dt>
<dd v-html='description'></dd>
</dl>
</template>
<span v-else v-html='label'>
</label>
</div>
</selector-input>
</template>
</li>
</ul>
</div>
</template>
</v-popover>
</fieldset>
</selector>
{%- endmacro %}