selector vue component

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)
+    }
+  },
+}

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")