homemanager-fe/src/components/form/fields/FormAutocompleteField.vue

<template>
  <FormField
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :disabled="disabled"
    :required="required"
  >
    <template #input="{ invalid, id, value, setValue }">
      <Autocomplete
        :for-id="id"
        :invalid="invalid"
        :disabled="disabled"
        :initialOptions="initialOptions"
        :searchFn="searchFn"
        :bindValue="bindValue"
        :bindLabel="bindLabel"
        :placeholder="placeholder"
        :model-value="value"
        @update:model-value="(newValue) => setValue(newValue)"
      >
        <template #notfound="slotProps">
          <slot name="notfound" v-bind="slotProps" />
        </template>

        <template #option="slotProps">
          <slot name="option" v-bind="slotProps" />
        </template>
      </Autocomplete>
    </template>
    <template #default><slot /></template>
  </FormField>
</template>

<script setup lang="ts">
import FormField from '../FormField.vue';
import Autocomplete from '../base/Autocomplete.vue';

const props = withDefaults(
  defineProps<{
    label: string;
    name: string;
    initialOptions?: any[];
    searchFn?: (query: string) => Promise<any[]>;
    bindValue?: string;
    bindLabel?: string | ((obj: any) => string);
    disabled?: boolean;
    required?: boolean;
    placeholder?: string;
  }>(),
  {
    disabled: false,
  }
);
</script>