add BaseSelectize component

app/src/components/BaseSelectize.vue

@@ -0,0 +1,152 @@
+<template lang="html">
+  <div class="selectize-base">
+    <b-input-group>
+      <b-input-group-prepend is-text>
+        <label class="sr-only" for="selectize">{{ ariaLabel }}</label>
+        <icon :iname="searchIcon" v-if="searchIcon" />
+      </b-input-group-prepend>
+      <b-form-input
+        id="selectize" :class="visible ? null : 'collapsed'"
+        aria-controls="collapse" :aria-expanded="visible ? 'true' : 'false'"
+        @focus="onInputFocus" @blur="onInputBlur" @keydown="onInputKeydown"
+        v-model="search" ref="input"
+      />
+    </b-input-group>
+
+    <b-collapse id="collapse" ref="collapse" v-model="visible">
+      <b-list-group tabindex="-1" @mouseover="onChoiceListOver" v-if="visible">
+        <b-list-group-item
+          v-for="(item, index) in filteredChoices" :key="item"
+          tabindex="-1" :active="index === focusedIndex" ref="choiceList"
+          @mousedown.prevent @mouseup.prevent="onSelect(item)"
+        >
+          {{ item | filter(format) }}
+        </b-list-group-item>
+      </b-list-group>
+    </b-collapse>
+  </div>
+</template>
+
+<script>
+// FIXME add accessibility to ChoiceList
+
+export default {
+  name: 'BaseSelectize',
+
+  props: {
+    choices: { type: Array, required: true },
+    ariaLabel: { type: String, required: true },
+    searchIcon: { type: String, default: 'search' },
+    // FIXME find a better way to pass filters
+    format: { type: Function, default: null }
+  },
+
+  data: () => ({
+    visible: false,
+    search: '',
+    focusedIndex: 0
+  }),
+
+  computed: {
+    filteredChoices () {
+      const search = this.search.toLowerCase()
+      return this.choices.filter(item => {
+        return item.toLowerCase().includes(search)
+      }).sort()
+    }
+  },
+
+  methods: {
+    onInputFocus ({ relatedTarget }) {
+      this.visible = true
+      this.focusedIndex = 0
+      // timeout needed else scrollIntoView won't work
+      if (!this.$refs.choiceList) return
+      setTimeout(() => {
+        this.$refs.choiceList[0].scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' })
+      }, 50)
+    },
+
+    onInputBlur ({ relatedTarget }) {
+      if (!this.$refs.collapse.$el.contains(relatedTarget)) {
+        this.visible = false
+      }
+    },
+
+    onInputKeydown (e) {
+      const { key } = e
+      const choicesLen = this.filteredChoices.length
+      if (choicesLen < 1) return
+
+      if (key === 'ArrowDown') {
+        e.preventDefault()
+        if (this.focusedIndex <= choicesLen) {
+          this.focusedIndex++
+        }
+      } else if (key === 'ArrowUp') {
+        e.preventDefault()
+        if (this.focusedIndex > 0) {
+          this.focusedIndex--
+        }
+      } else if (key === 'Enter') {
+        this.onSelect(this.focusedIndex)
+      } else {
+        this.focusedIndex = 0
+      }
+      const elemToFocus = this.$refs.choiceList[this.focusedIndex]
+      if (elemToFocus) {
+        elemToFocus.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' })
+      }
+    },
+
+    onChoiceListOver ({ target }) {
+      const index = this.$refs.choiceList.indexOf(target)
+      if (index > -1) {
+        this.focusedIndex = index
+      }
+    },
+
+    onSelect (item) {
+      this.$emit('selected', { item, index: this.choices.indexOf(item) })
+      this.focusedIndex = 0
+    }
+  },
+
+  filters: {
+    filter: function (text, func) {
+      if (func) return func(text)
+      else return text
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.collapse {
+  position: relative;
+  width: 100%;
+}
+// disable collapse animation
+.collapsing {
+    -webkit-transition: none;
+    transition: none;
+    display: none;
+}
+
+.list-group {
+  margin-top: .5rem;
+  max-height: 10rem;
+  overflow-y: auto;
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+}
+
+.list-group-item {
+  padding-top: 0;
+  padding-bottom: 0;
+  min-height: 2rem;
+  line-height: 1.75rem;
+  cursor: pointer;
+}
+</style>