ComboBox.vue

<template>
  <div
    ref="rootEl"
    class="tw-relative tw-cursor-text"
    @keyup.esc="close"
    @keydown.esc.stop.prevent
    @click="inputEl?.focus?.()"
  >
    <div
      class="tw-relative"
      :class="inputContainerClass"
      aria-haspopup="listbox"
      :aria-expanded="isOpen"
      :aria-controls="resultsId"
      tabindex="-1"
    >
      <slot name="pre" />

      <label
        v-if="label"
        :for="inputId"
        class="tw-absolute tw-top-2 tw-left-8 tw-text-sm tw-font-bold tw-pointer-events-none"
      >
        {{ label }}
      </label>

      <input
        :id="inputId"
        ref="inputEl"
        v-model="query"
        aria-autocomplete="list"
        :aria-expanded="isOpen"
        :aria-controls="resultsId"
        :aria-activedescendant="activeResultId"
        role="combobox"
        tabindex="0"
        type="text"
        class="tw-text-inherit tw-order-last"
        :class="inputClass"
        @keydown.up.prevent
        @keydown.down.prevent
        @keydown.home.prevent
        @keydown.end.prevent
        @keyup="ensureOpen"
        @keyup.down.prevent.stop="activeIndex += 1"
        @keyup.up.prevent.stop="activeIndex -= 1"
        @keyup.home.prevent.stop="activeIndex = 0"
        @keyup.end.prevent.stop="activeIndex = lastChoiceIndex"
        @keyup.enter.prevent.stop="selectChoice(choices[activeIndex])"
        @keydown.delete="maybeRemoveChoice"
      />

      <slot name="selected" :deselect="selectChoice" :is-open="isOpen" />

      <kbd
        v-if="keyboardShortcut && keyboardShortcutLabel !== undefined && !isTouch"
        v-show="!isOpen"
        :title="keyboardShortcutLabel"
        class="tw-absolute tw-pointer-events-none tw-top-4 tw-right-8 tw-bg-black/20 tw-opacity-60 tw-p-2 tw-text-xs tw-rounded-lg tw-leading-none"
      >
        <template v-for="(token, index) in keyboardShortcutLabel.split(' ')" :key="index">
          <span v-if="token !== '+'">{{ token }}</span>
          <span v-else>&nbsp;</span>
        </template>
      </kbd>
    </div>

    <Transition
      enter-active-class="tw-transition tw-duration-200 tw-ease-out"
      enter-from-class="tw-translate-y-1 tw-opacity-0"
      enter-to-class="tw-translate-y-0 tw-opacity-100"
      leave-active-class="tw-transition tw-duration-150 tw-ease-in"
      leave-from-class="tw-translate-y-0 tw-opacity-100"
      leave-to-class="tw-translate-y-1 tw-opacity-0"
    >
      <div
        v-if="isOpen && (choices.length > 0 || noDataLabel || slots.noData)"
        :id="drawerId"
        :class="[
          drawerClass,
          {
            'tw-fixed tw-left-2 tw-right-2 tw-z-20 tw-mt-2 tw-bg-white tw-shadow-2xl tw-rounded tw-flex tw-flex-col tw-overflow-hidden': true,
            'md:tw-absolute md:tw-top-full md:tw-w-fit md:tw-flex-row': true,
          },
        ]"
      >
        <div class="tw-order-2 tw-flex-none tw-p-6 tw-bg-gray-100 md:tw-w-80">
          <ul
            v-if="choices.length > 0"
            ref="choicesEl"
            role="listbox"
            class="tw-max-h-96 tw-overflow-y-auto tw-block tw-p-0 tw-m-0"
            :aria-activedescendant="activeResultId"
          >
            <template v-for="(choice, index) in choices" :key="getKey(choice)">
              <slot
                :id="`${resultsId}-option-${index}`"
                role="option"
                tabindex="-1"
                :class="{
                  'tw-py-2 tw-px-4 tw-rounded tw-block tw-cursor-pointer': true,
                  'tw-bg-aura-primary tw-text-white': activeIndex === index,
                }"
                :choice="choice"
                :index="index"
                :active-index="activeIndex"
                @click.stop.prevent="selectChoice(choice)"
                @mouseenter="activeIndex = index"
              />
            </template>
          </ul>

          <slot v-else name="noData">
            <p class="tw-font-bold">{{ noDataLabel }}</p>
          </slot>
        </div>

        <div v-if="slots.filter" class="tw-order-1 tw-p-6 tw-flex tw-flex-col tw-gap-3">
          <slot name="filter" :results-id="resultsId" />
        </div>
      </div>
    </Transition>
  </div>
</template>

<script lang="ts" setup generic="T">
import { computed, nextTick, Ref, ref, useSlots, watch, watchEffect } from 'vue'
import { onClickOutside, useFocusWithin, useMediaQuery, whenever } from '@vueuse/core'
import { clamp, useId } from '@/util'

defineOptions({
  compatConfig: { MODE: 3 },
  ATTR_FALSE_VALUE: false,
})

defineSlots<{
  default(
    props: Record<string, unknown> & {
      id: string
      choice: T
      index: number
      activeIndex: number
    },
  ): unknown
  selected(props: { deselect: (choice: T) => void; isOpen: boolean }): unknown
  filter?(props: { resultsId: string }): any
  noData?(props: Record<string, never>): any
  pre?(props: Record<string, never>): any
}>()

const props = withDefaults(
  defineProps<{
    modelValue: T | T[]
    choices: T[]
    keyboardShortcut?: Ref<boolean> | undefined
    keyboardShortcutLabel?: string
    label?: string
    noDataLabel?: string
    getKey?: (obj: T) => string | number
    closeOnSelect?: boolean
    inputClass?: unknown
    inputContainerClass?: unknown
    drawerClass?: unknown
  }>(),
  {
    keyboardShortcut: undefined,
    keyboardShortcutLabel: '',
    label: '',
    noDataLabel: '',
    getKey: (obj: T) => {
      if (
        typeof obj === 'object' &&
        obj !== null &&
        'id' in obj &&
        (typeof obj.id === 'string' || typeof obj.id === 'number')
      ) {
        return obj.id
      } else if (typeof obj === 'string' || typeof obj === 'number') {
        return obj
      } else {
        throw new TypeError('You need to define a custom getKey function for your ComboBox object')
      }
    },
    closeOnSelect: true,
    inputClass: undefined,
    inputContainerClass: undefined,
    drawerClass: undefined,
  },
)
const emit = defineEmits<{
  (e: 'update:modelValue', value: T | T[]): void
  (e: 'search', value: string): void
  (e: 'open'): void
  (e: 'close'): void
}>()
const slots = useSlots()

const query = ref('')
const rootEl = ref<HTMLElement>()
const inputEl = ref<HTMLInputElement>()
const choicesEl = ref<HTMLUListElement>()
const activeIndex = ref(0)
const lastChoiceIndex = computed(() => Math.max(0, props.choices.length - 1))
const isOpen = ref(false)
const isTouch = useMediaQuery('screen and (pointer: coarse)')
const { focused: hasFocus } = useFocusWithin(rootEl)
const inputId = useId('combobox-input')
const drawerId = useId('combobox-drawer')
const resultsId = useId('combobox-results')
const activeResultId = computed(() => `${resultsId.value}-option-${activeIndex.value}`)

watchEffect(() => {
  activeIndex.value = clamp(activeIndex.value, 0, lastChoiceIndex.value)
})

watch(hasFocus, (hasFocus, hadFocus) => {
  if (hasFocus && !hadFocus) {
    open()
  } else if (!hasFocus && hadFocus) {
    close()
  }
})

function open() {
  if (props.choices.length > 0 || props.noDataLabel || slots.noData) {
    isOpen.value = true
    inputEl.value?.focus?.()
    emit('open')
  }
}

function close() {
  isOpen.value = false
  query.value = ''
  activeIndex.value = 0
  emit('close')
}

function ensureOpen(event: Event) {
  if (!isOpen.value) {
    event.preventDefault()
    event.stopImmediatePropagation()
    nextTick(open)
  }
}

function selectChoice(choice: T) {
  if (!Array.isArray(props.modelValue)) {
    emit('update:modelValue', choice)
  } else {
    const objIdentity = props.getKey(choice)
    const dataCopy = Array.from(props.modelValue)
    let isHandled = false

    for (const [index, item] of dataCopy.entries()) {
      if (props.getKey(item) === objIdentity) {
        dataCopy.splice(index, 1)
        isHandled = true
      }
    }

    if (!isHandled) {
      dataCopy.push(choice)
      inputEl?.value?.focus?.()
    }

    emit('update:modelValue', dataCopy)
  }

  if (props.closeOnSelect) {
    nextTick(close)
  }
}

function maybeRemoveChoice() {
  if (query.value === '' && Array.isArray(props.modelValue)) {
    const newValue = Array.from(props.modelValue)
    newValue.splice(newValue.length - 1, 1)
    emit('update:modelValue', newValue)
  }
}

watchEffect(() => {
  emit('search', query.value)
})

watchEffect(() => {
  const listItem = choicesEl.value?.children?.[activeIndex.value]
  listItem?.scrollIntoView?.({ behavior: 'smooth', block: 'nearest', inline: 'start' })
})

onClickOutside(rootEl, close)
whenever(
  computed(() => props.keyboardShortcut?.value),
  open,
)
</script>