app/components/Ui/Input/Autocomplete.vue

<!--
Liste déroulante avec autocompletion, à placer dans un composant `UiForm`

@see https://vuetifyjs.com/en/components/autocompletes/#usage
-->

<template>
  <main>
    <!--suppress TypeScriptValidateTypes -->
    <v-autocomplete
      v-model:search-input="search"
      :model-value="modelValue"
      :readonly="readonly"
      autocomplete="search"
      :items="items"
      :label="$t(fieldLabel)"
      :item-title="itemTitle"
      :item-value="itemValue"
      :no-filter="noFilter"
      :auto-select-first="autoSelectFirst"
      :multiple="multiple"
      :loading="isLoading"
      :return-object="returnObject"
      :prepend-inner-icon="prependInnerIcon"
      :error="error || !!fieldViolations"
      :error-messages="
        errorMessage || fieldViolations ? $t(fieldViolations) : ''
      "
      :rules="rules"
      :chips="chips"
      :closable-chips="closableChips"
      :hide-no-data="hideNoData"
      :no-data-text="
        isLoading ? $t('please_wait') : $t('no_result_matching_your_request')
      "
      :variant="variant"
      density="compact"
      class="mb-3"
      :clearable="clearable && !readonly"
      @update:model-value="onUpdate"
      @update:search="emit('update:search', $event)"
      @update:menu="emit('update:menu', $event)"
      @update:focused="emit('update:focused', $event)"
    >
    </v-autocomplete>
  </main>
</template>

<script setup lang="ts">
import type { Ref, PropType } from 'vue'
import { useFieldViolation } from '~/composables/form/useFieldViolation'

const props = defineProps({
  /**
   * v-model
   */
  modelValue: {
    type: [String, Number, Object, Array] as PropType<
      string | number | object | Array<unknown>
    >,
    required: false,
    default: null,
  },
  /**
   * Nom de la propriété d'une entité lorsque l'input concerne cette propriété
   * - Utilisé par la validation
   * - Laisser null si le champ ne s'applique pas à une entité
   */
  field: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * Label du champ
   * Si non défini, c'est le nom de propriété qui est utilisé
   */
  label: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * Liste des éléments de la liste
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-items
   */
  items: {
    type: Array as PropType<Array<object>>,
    required: false,
    default: () => [],
  },
  /**
   * Définit si le champ est en lecture seule
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-readonly
   */
  readonly: {
    type: Boolean,
    required: false,
  },
  /**
   * Le model est l'objet lui-même, et non pas son id (ou la propriété définie avec itemValue)
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-return-object
   */
  returnObject: {
    type: Boolean,
    default: false,
  },
  /**
   * Autorise la sélection multiple
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-multiple
   */
  multiple: {
    type: Boolean,
    default: false,
  },
  /**
   * Propriété de l'objet à utiliser comme label
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-item-title
   */
  itemTitle: {
    type: String,
    default: 'title',
  },
  /**
   * Propriété de l'objet à utiliser comme clé (et correspondant au v-model)
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-item-value
   */
  itemValue: {
    type: String,
    default: 'id',
  },
  /**
   * Icône de gauche
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-prepend-inner-icon
   */
  prependInnerIcon: {
    type: String,
    default: null,
  },
  /**
   * Rends les résultats sous forme de puces
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-chips
   */
  chips: {
    type: Boolean,
    default: false,
  },
  /**
   * Permet de retirer une puce directement
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-closable-chips
   */
  closableChips: {
    type: Boolean,
    default: false,
  },
  /**
   * Le contenu de la liste est en cours de chargement
   */
  isLoading: {
    type: Boolean,
    required: false,
    default: false,
  },
  /**
   * Propriété de l'objet utilisé pour grouper les items ; laisser null pour ne pas grouper
   */
  group: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-hide-no-data
   */
  hideNoData: {
    type: Boolean,
    required: false,
    default: false,
  },
  /**
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-no-filter
   */
  noFilter: {
    type: Boolean,
    default: false,
  },
  /**
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-auto-select-first
   */
  autoSelectFirst: {
    type: Boolean,
    default: true,
  },
  /**
   * Règles de validation
   * @see https://vuetify.cn/en/components/forms/#validation-with-submit-clear
   */
  rules: {
    type: Array,
    required: false,
    default: () => [],
  },
  /**
   * Le champ est-il actuellement en état d'erreur
   */
  error: {
    type: Boolean,
    required: false,
  },
  /**
   * Si le champ est en état d'erreur, quel est le message d'erreur?
   */
  errorMessage: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-variant
   */
  variant: {
    type: String as PropType<
      | 'filled'
      | 'outlined'
      | 'plain'
      | 'underlined'
      | 'solo'
      | 'solo-inverted'
      | 'solo-filled'
      | undefined
    >,
    required: false,
    default: 'outlined',
  },
  /**
   * Définit si le champ est en lecture seule
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-readonly
   */
  clearable: {
    type: Boolean,
    required: false,
  },
})

const search: Ref<string | null> = ref(null)

const fieldLabel: string = props.label ?? props.field

const { fieldViolations, updateViolationState } = useFieldViolation(props.field)

const emit = defineEmits([
  'update:model-value',
  'update:search',
  'update:focused',
  'update:menu',
])

const onUpdate = (event: string) => {
  updateViolationState()
  emit('update:model-value', event)
}

onBeforeUnmount(() => {
  updateViolationState()
  search.value = null
})
</script>

<style scoped lang="scss">
:deep(.v-chip__close .v-icon) {
  font-size: 16px;
  color: rgb(var(--v-theme-on-neutral));
}
</style>