feat: add ComboBox component

src/components/ComboBox.vue

+<template>
+  <div ref="rootEl" class="tw-relative" @keyup.esc="close">
+    <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>
+      <span
+        v-if="!isOpen && modelValue"
+        class="tw-absolute tw-pointer-events-none tw-top-7 tw-left-8"
+      >
+        {{ getDisplayName(modelValue) }}
+      </span>
+      <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>
+      <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-pt-6 tw-pb-2 tw-px-8 md:tw-w-80 tw-text-inherit"
+        :class="inputClass"
+        @keydown.up.prevent
+        @keydown.down.prevent
+        @keydown.home.prevent
+        @keydown.end.prevent
+        @keyup="ensureOpen"
+        @keyup.down.prevent.stop="updateIndex(1)"
+        @keyup.up.prevent.stop="updateIndex(-1)"
+        @keyup.home.prevent.stop="updateIndex(Number.NEGATIVE_INFINITY)"
+        @keyup.end.prevent.stop="updateIndex(Number.POSITIVE_INFINITY)"
+        @keyup.enter.prevent.stop="selectChoice(choices[activeIndex])"
+        @focus="open"
+      />
+    </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"
+        :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-left-auto md:tw-right-0 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"
+          >
+            <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"
+                :class="{
+                  'tw-bg-aura-primary tw-text-white': activeIndex === index,
+                }"
+                :choice="choice"
+                :index="index"
+                :active-index="activeIndex"
+                @click="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>
+// TODO: implement proper typing once we upgrade to Vue 3.3.
+import { computed, nextTick, Ref, ref, useSlots, watchEffect } from 'vue'
+import { onClickOutside, useMediaQuery, whenever } from '@vueuse/core'
+import { useId } from '@/util'
+
+const props = withDefaults(
+  defineProps<{
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue: any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    choices: any[]
+    keyboardShortcut?: Ref<boolean>
+    keyboardShortcutLabel?: string
+    label?: string
+    noDataLabel?: string
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getDisplayName?: (obj: any) => string
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getKey?: (obj: any) => string | number
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    inputClass?: any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    inputContainerClass?: any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    drawerClass?: any
+  }>(),
+  {
+    keyboardShortcut: undefined,
+    keyboardShortcutLabel: '',
+    label: '',
+    noDataLabel: '',
+    getDisplayName: (obj: { name: string }) => String(obj?.name),
+    getKey: (obj: { id: string | number }) => obj.id,
+    inputClass: undefined,
+    inputContainerClass: undefined,
+    drawerClass: undefined,
+  },
+)
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'update:modelValue', value: any): 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 isOpen = ref(false)
+const isTouch = useMediaQuery('screen and (pointer: coarse)')
+const inputId = useId('combobox-input')
+const drawerId = useId('combobox-drawer')
+const resultsId = useId('combobox-results')
+const activeResultId = computed(() => `${resultsId.value}-option-${activeIndex.value}`)
+
+function open() {
+  isOpen.value = true
+  inputEl.value?.focus?.()
+  emit('open')
+}
+
+function close(event?: Event) {
+  if (event instanceof KeyboardEvent && isOpen.value) {
+    event.stopImmediatePropagation()
+    event.preventDefault()
+  }
+  isOpen.value = false
+  query.value = ''
+  activeIndex.value = 0
+  emit('close')
+}
+
+function ensureOpen(event: Event) {
+  if (!isOpen.value) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    nextTick(open)
+  }
+}
+
+function updateIndex(modifier: number) {
+  const newIndex = activeIndex.value + modifier
+  activeIndex.value = Math.max(0, Math.min(newIndex, props.choices.length - 1))
+}
+
+function selectChoice(obj: unknown) {
+  emit('update:modelValue', obj)
+  nextTick(close)
+}
+
+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>
+
+<script lang="ts">
+export default {
+  compatConfig: {
+    MODE: 3,
+    ATTR_FALSE_VALUE: false,
+  },
+}
+</script>