Delete unused component and macro
This commit is contained in:
leigh-mil
parent
14fcef8c87
commit
83967e6ed9
@ -2,7 +2,6 @@ import FormMixin from '../../mixins/form'
|
||||
import textinput from '../text_input'
|
||||
import optionsinput from '../options_input'
|
||||
import checkboxinput from '../checkbox_input'
|
||||
import Selector from '../selector'
|
||||
import Modal from '../../mixins/modal'
|
||||
import toggler from '../toggler'
|
||||
|
||||
@ -14,7 +13,6 @@ export default {
|
||||
components: {
|
||||
toggler,
|
||||
Modal,
|
||||
Selector,
|
||||
textinput,
|
||||
optionsinput,
|
||||
checkboxinput,
|
||||
|
||||
@ -1,117 +0,0 @@
|
||||
import { VPopover } from 'v-tooltip'
|
||||
|
||||
const SelectorInput = {
|
||||
name: 'SelectorInput',
|
||||
props: {
|
||||
name: String,
|
||||
value: String,
|
||||
label: String,
|
||||
description: String,
|
||||
selected: Boolean,
|
||||
handleChange: Function,
|
||||
handleEnter: Function,
|
||||
handleEsc: Function,
|
||||
},
|
||||
|
||||
computed: {
|
||||
id: function() {
|
||||
return `${this.name}_${this.value}`
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange: function(e) {
|
||||
this.handleChange(this.value)
|
||||
},
|
||||
|
||||
onEnter: function(e) {
|
||||
this.handleEnter()
|
||||
},
|
||||
|
||||
onEsc: function(e) {
|
||||
this.handleEsc()
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'selector',
|
||||
|
||||
components: {
|
||||
VPopover,
|
||||
SelectorInput,
|
||||
},
|
||||
|
||||
props: {
|
||||
choices: Array,
|
||||
defaultLabel: String,
|
||||
initialErrors: Array,
|
||||
initialChoice: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
value: this.initialChoice || null,
|
||||
currentChoice: this.initialChoice || null,
|
||||
showError: (this.initialErrors && this.initialErrors.length) || false,
|
||||
usingKeyboard: false,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
label: function() {
|
||||
if (this.value) {
|
||||
const selectedChoice = this.choices.find(choice => {
|
||||
return this.value === choice[0]
|
||||
})[1]
|
||||
return selectedChoice.name
|
||||
} else {
|
||||
return this.defaultLabel
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
change: function(value) {
|
||||
this.value = value
|
||||
this.showError = false
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
setTimeout(() => {
|
||||
// timeout is a hack to make focus work in Chrome
|
||||
const selected = this.$refs.choices.find(choice => choice.selected)
|
||||
if (selected) {
|
||||
selected.$refs.input[0].focus()
|
||||
} else {
|
||||
this.$refs.choices[0].$refs.input[0].focus()
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
|
||||
enter: function() {
|
||||
this.$refs.popover.hide()
|
||||
},
|
||||
|
||||
esc: function() {
|
||||
this.value = this.currentChoice
|
||||
this.usingKeyboard = false
|
||||
this.$refs.popover.hide()
|
||||
},
|
||||
|
||||
handleEnterOption: function(e) {
|
||||
this.change(e.target.value)
|
||||
this.currentChoice = e.target.value
|
||||
this.usingKeyboard = false
|
||||
this.$refs.popover.hide()
|
||||
},
|
||||
|
||||
handleButtonArrowDown: function(e) {
|
||||
this.usingKeyboard = true
|
||||
this.$refs.popover.show()
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -19,7 +19,6 @@ import ApplicationEnvironments from './components/forms/new_application/environm
|
||||
import MultiStepModalForm from './components/forms/multi_step_modal_form'
|
||||
import uploadinput from './components/upload_input'
|
||||
import Modal from './mixins/modal'
|
||||
import selector from './components/selector'
|
||||
import BudgetChart from './components/charts/budget_chart'
|
||||
import SpendTable from './components/tables/spend_table'
|
||||
import LocalDatetime from './components/local_datetime'
|
||||
@ -52,7 +51,6 @@ const app = new Vue({
|
||||
poc,
|
||||
ApplicationNameAndDescription,
|
||||
ApplicationEnvironments,
|
||||
selector,
|
||||
BudgetChart,
|
||||
SpendTable,
|
||||
LocalDatetime,
|
||||
|
||||
@ -1,98 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -1,5 +1,4 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/selector.html" import Selector %}
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
|
||||
{% from "components/alert.html" import Alert %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user