diff --git a/js/components/selector.js b/js/components/selector.js new file mode 100644 index 00000000..b6c23023 --- /dev/null +++ b/js/components/selector.js @@ -0,0 +1,44 @@ +import { VPopover } from 'v-tooltip' + +export default { + name: 'selector', + + components: { + VPopover + }, + + props: { + choices: Array, + defaultLabel: String, + initialErrors: Array, + initialChoice: { + type: String, + default: null + } + }, + + data: function () { + return { + value: this.initialChoice || null, + showError: (this.initialErrors && this.initialErrors.length) || false + } + }, + + computed: { + label: function () { + return this.value + ? this.choices.find((choice) => { + return this.value === choice[0] + })[1] + : this.defaultLabel + } + }, + + methods: { + change: function (e) { + this.value = e.target.value + this.showError = false + setTimeout(() => this.$refs.popover.hide(), 300) + } + }, +} diff --git a/js/index.js b/js/index.js index b89505d2..2ce01476 100644 --- a/js/index.js +++ b/js/index.js @@ -13,6 +13,7 @@ import financial from './components/forms/financial' import toggler from './components/toggler' import NewProject from './components/forms/new_project' import Modal from './mixins/modal' +import selector from './components/selector' Vue.use(VTooltip) @@ -28,7 +29,8 @@ const app = new Vue({ DetailsOfUse, poc, financial, - NewProject + NewProject, + selector }, mounted: function() { const modalOpen = document.querySelector("#modalOpen")