crater/resources/scripts/components/base-select/composables/useKeyboard.js

import { toRefs } from 'vue'

export default function useKeyboard(props, context, dep) {
  const {
    mode, addTagOn, createTag, openDirection, searchable,
    showOptions, valueProp, groups: groupped,
  } = toRefs(props)

  // ============ DEPENDENCIES ============

  const iv = dep.iv
  const update = dep.update
  const search = dep.search
  const setPointer = dep.setPointer
  const selectPointer = dep.selectPointer
  const backwardPointer = dep.backwardPointer
  const forwardPointer = dep.forwardPointer
  const blur = dep.blur
  const fo = dep.fo

  // =============== METHODS ==============

  // no export
  const preparePointer = () => {
    // When options are hidden and creating tags is allowed
    // no pointer will be set (because options are hidden).
    // In such case we need to set the pointer manually to the
    // first option, which equals to the option created from
    // the search value.
    if (mode.value === 'tags' && !showOptions.value && createTag.value && searchable.value && !groupped.value) {
      setPointer(fo.value[fo.value.map(o => o[valueProp.value]).indexOf(search.value)])
    }
  }

  const handleKeydown = (e) => {
    switch (e.keyCode) {
      // backspace
      case 8:
        if (mode.value === 'single') {
          return
        }

        if (searchable.value && [null, ''].indexOf(search.value) === -1) {
          return
        }

        if (iv.value.length === 0) {
          return
        }

        update([...iv.value].slice(0, -1))
        break

      // enter
      case 13:
        e.preventDefault()

        if (mode.value === 'tags' && addTagOn.value.indexOf('enter') === -1 && createTag.value) {
          return
        }

        preparePointer()
        selectPointer()
        break

      // space
      case 32:
        if (searchable.value && mode.value !== 'tags' && !createTag.value) {
          return
        }

        if (mode.value === 'tags' && ((addTagOn.value.indexOf('space') === -1 && createTag.value) || !createTag.value)) {
          return
        }

        e.preventDefault()

        preparePointer()
        selectPointer()
        break

      // tab
      // semicolon
      // comma
      case 9:
      case 186:
      case 188:
        if (mode.value !== 'tags') {
          return
        }

        const charMap = {
          9: 'tab',
          186: ';',
          188: ','
        }

        if (addTagOn.value.indexOf(charMap[e.keyCode]) === -1 || !createTag.value) {
          return
        }

        preparePointer()
        selectPointer()
        e.preventDefault()
        break

      // escape
      case 27:
        blur()
        break

      // up
      case 38:
        e.preventDefault()

        if (!showOptions.value) {
          return
        }

        openDirection.value === 'top' ? forwardPointer() : backwardPointer()
        break

      // down
      case 40:
        e.preventDefault()

        if (!showOptions.value) {
          return
        }

        openDirection.value === 'top' ? backwardPointer() : forwardPointer()
        break
    }
  }

  return {
    handleKeydown,
    preparePointer,
  }
}