crm/frontend/src/components/frappe-ui/Autocomplete.vue

<template>
  <Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
    <Popover class="w-full" v-model:show="showOptions">
      <template #target="{ open: openPopover, togglePopover }">
        <slot name="target" v-bind="{ open: openPopover, togglePopover }">
          <div class="w-full">
            <button
              class="flex h-7 w-full items-center justify-between gap-2 rounded bg-gray-100 px-2 py-1 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-gray-400"
              :class="{ 'bg-gray-200': isComboboxOpen }"
              @click="() => togglePopover()"
            >
              <div class="flex items-center">
                <slot name="prefix" />
                <span
                  class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
                  v-if="selectedValue"
                >
                  {{ displayValue(selectedValue) }}
                </span>
                <span class="text-base leading-5 text-gray-500" v-else>
                  {{ placeholder || '' }}
                </span>
              </div>
              <FeatherIcon
                name="chevron-down"
                class="h-4 w-4 text-gray-600"
                aria-hidden="true"
              />
            </button>
          </div>
        </slot>
      </template>
      <template #body="{ isOpen }">
        <div v-show="isOpen">
          <div class="mt-1 rounded-lg bg-white text-base shadow-2xl">
            <div class="relative p-1.5 pb-0">
              <ComboboxInput
                ref="search"
                class="form-input w-full"
                type="text"
                @change="
                  (e) => {
                    query = e.target.value
                  }
                "
                :value="query"
                autocomplete="off"
                placeholder="Search"
              />
              <button
                class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
                @click="selectedValue = null"
              >
                <FeatherIcon name="x" class="w-4" />
              </button>
            </div>
            <ComboboxOptions
              class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
              static
            >
              <div
                class="mt-1.5"
                v-for="group in groups"
                :key="group.key"
                v-show="group.items.length > 0"
              >
                <div
                  v-if="group.group && !group.hideLabel"
                  class="px-2.5 py-1.5 text-sm font-medium text-gray-500"
                >
                  {{ group.group }}
                </div>
                <ComboboxOption
                  as="template"
                  v-for="option in group.items"
                  :key="option.value"
                  :value="option"
                  v-slot="{ active, selected }"
                >
                  <li
                    :class="[
                      'flex items-center rounded px-2.5 py-1.5 text-base',
                      { 'bg-gray-100': active },
                    ]"
                  >
                    <slot
                      name="item-prefix"
                      v-bind="{ active, selected, option }"
                    />
                    {{ option.label }}
                  </li>
                </ComboboxOption>
              </div>
              <li
                v-if="groups.length == 0"
                class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-gray-600"
              >
                No results found
              </li>
            </ComboboxOptions>
            <div v-if="slots.footer" class="border-t p-1.5">
              <slot
                name="footer"
                v-bind="{ value: search?.el._value, close }"
              ></slot>
            </div>
          </div>
        </div>
      </template>
    </Popover>
  </Combobox>
</template>

<script setup>
import {
  Combobox,
  ComboboxInput,
  ComboboxOptions,
  ComboboxOption,
} from '@headlessui/vue'
import { Popover, Button, FeatherIcon } from 'frappe-ui'
import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'

const props = defineProps(['modelValue', 'options', 'placeholder'])
const emit = defineEmits(['update:modelValue', 'update:query', 'change'])

const query = ref('')
const showOptions = ref(false)
const search = ref(null)

const attrs = useAttrs()
const slots = useSlots()

const valuePropPassed = computed(() => 'value' in attrs)

const selectedValue = computed({
  get() {
    return valuePropPassed.value ? attrs.value : props.modelValue
  },
  set(val) {
    query.value = ''
    if (val) {
      showOptions.value = false
    }
    emit(valuePropPassed.value ? 'change' : 'update:modelValue', val)
  },
})

function close() {
  showOptions.value = false
}

const groups = computed(() => {
  if (!props.options || props.options.length == 0) return []

  let groups = props.options[0]?.group
    ? props.options
    : [{ group: '', items: props.options }]

  return groups
    .map((group, i) => {
      return {
        key: i,
        group: group.group,
        hideLabel: group.hideLabel || false,
        items: filterOptions(group.items),
      }
    })
    .filter((group) => group.items.length > 0)
})

function filterOptions(options) {
  if (!query.value) {
    return options
  }
  return options.filter((option) => {
    let searchTexts = [option.label, option.value]
    return searchTexts.some((text) =>
      (text || '').toString().toLowerCase().includes(query.value.toLowerCase())
    )
  })
}

function displayValue(option) {
  if (typeof option === 'string') {
    let allOptions = groups.value.flatMap((group) => group.items)
    let selectedOption = allOptions.find((o) => o.value === option)
    return selectedOption?.label || option
  }
  return option?.label
}

watch(query, (q) => {
  emit('update:query', q)
})

watch(showOptions, (val) => {
  if (val) {
    nextTick(() => {
      search.value.el.focus()
    })
  }
})
</script>