malio-layer-ui/.playground/pages/composant/input/inputAutocomplete.vue

<template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Simple (statique)</h2>
      <MalioInputAutocomplete
        v-model="simpleValue"
        label="Pays"
        :options="staticOptions"
        local-filter
      />
      <p class="mt-2 text-sm text-m-muted">
        Valeur sélectionnée : <code>{{ simpleValue ?? 'null' }}</code>
      </p>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec icône à gauche</h2>
      <MalioInputAutocomplete
        v-model="leftIconValue"
        label="Recherche"
        icon-name="mdi:magnify"
        icon-position="left"
        :options="staticOptions"
        local-filter
      />
    </div>

    <div class="rounded-lg border p-4 md:col-span-2">
      <h2 class="mb-4 text-xl font-bold">Branché sur une API (simulé)</h2>
      <p class="mb-3 text-sm text-m-muted">
        Le parent écoute l'event <code>search</code> et alimente <code>options</code> + <code>loading</code>.
        Tapez au moins 2 caractères.
      </p>
      <MalioInputAutocomplete
        v-model="apiValue"
        label="Client"
        :options="apiOptions"
        :loading="apiLoading"
        :min-search-length="2"
        icon-name="mdi:magnify"
        icon-position="left"
        @search="onSearchApi"
        @select="onSelectApi"
      />
      <p v-if="apiSelected" class="mt-2 text-sm text-m-muted">
        Sélection : <code>{{ apiSelected.label }} (id={{ apiSelected.value }})</code>
      </p>
    </div>

    <div class="rounded-lg border-2 border-m-primary p-4 md:col-span-2">
      <h2 class="mb-1 text-xl font-bold">allowCreate + BAN (test MUI-48)</h2>
      <p class="mb-3 text-sm text-m-muted">
        Tapez au moins 3 caractères → suggestions de la Base Adresse Nationale.
        <strong>Repro :</strong> sélectionnez une adresse dans la liste, puis
        <kbd>Ctrl</kbd>+<kbd>A</kbd> et <kbd>Ctrl</kbd>+<kbd>V</kbd> pour coller une autre valeur
        par-dessus. La valeur collée doit rester (le champ ne doit ni se vider, ni faire redescendre le label).
      </p>
      <MalioInputAutocomplete
        v-model="banValue"
        label="Adresse"
        :options="banOptions"
        :loading="banLoading"
        :min-search-length="3"
        allow-create
        icon-name="mdi:map-marker-outline"
        icon-position="left"
        @search="onSearchBan"
        @create="onCreateBan"
      />
      <p class="mt-2 text-sm text-m-muted">
        v-model : <code>{{ banValue ?? 'null' }}</code>
      </p>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec création (allowCreate)</h2>
      <MalioInputAutocomplete
        v-model="createValue"
        label="Catégorie"
        :options="staticOptions"
        allow-create
        hint="Taper Entrée pour créer une nouvelle valeur"
        @create="onCreate"
      />
      <p v-if="createdItems.length > 0" class="mt-2 text-sm text-m-muted">
        Créés : {{ createdItems.join(', ') }}
      </p>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
      <MalioInputAutocomplete
        model-value="fr"
        label="Pays"
        :options="staticOptions"
        disabled
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
      <MalioInputAutocomplete
        model-value="fr"
        label="Pays"
        :options="staticOptions"
        readonly
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
      <MalioInputAutocomplete
        label="Pays (readonly vide)"
        :options="staticOptions"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
      <MalioInputAutocomplete
        v-model="readonlyFilledAutocomplete"
        label="Pays (readonly rempli)"
        :options="staticOptions"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
      <MalioInputAutocomplete
        v-model="hintValue"
        label="Pays"
        :options="staticOptions"
        hint="Sélectionne un pays dans la liste"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioInputAutocomplete
        model-value="fr"
        label="Pays"
        :options="staticOptions"
        error="Sélection invalide"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès</h2>
      <MalioInputAutocomplete
        model-value="fr"
        label="Pays"
        :options="staticOptions"
        success="Sélection valide"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Liste vide</h2>
      <MalioInputAutocomplete
        v-model="emptyValue"
        label="Recherche"
        :options="[]"
        no-results-text="Aucun élément disponible"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

type Option = {label: string; value: string | number}

const staticOptions: Option[] = [
  {label: 'France', value: 'fr'},
  {label: 'Belgique', value: 'be'},
  {label: 'Canada', value: 'ca'},
  {label: 'Suisse', value: 'ch'},
  {label: 'Luxembourg', value: 'lu'},
  {label: 'Allemagne', value: 'de'},
  {label: 'Espagne', value: 'es'},
  {label: 'Italie', value: 'it'},
]

const readonlyFilledAutocomplete = ref<string | number | null>('de')
const simpleValue = ref<string | number | null>(null)
const leftIconValue = ref<string | number | null>(null)
const createValue = ref<string | number | null>(null)
const hintValue = ref<string | number | null>(null)
const emptyValue = ref<string | number | null>(null)

const createdItems = ref<string[]>([])
const onCreate = (value: string) => {
  createdItems.value.push(value)
}

const apiValue = ref<string | number | null>(null)
const apiOptions = ref<Option[]>([])
const apiLoading = ref(false)
const apiSelected = ref<Option | null>(null)

const fakeClients: Option[] = [
  {label: 'Yuno Malio', value: 1},
  {label: 'Yuna Corp', value: 2},
  {label: 'Yum Foods', value: 3},
  {label: 'Yumi Studio', value: 4},
  {label: 'Acme Inc.', value: 5},
  {label: 'Globex Corp', value: 6},
  {label: 'Initech', value: 7},
  {label: 'Soylent Corp', value: 8},
]

const onSearchApi = async (query: string) => {
  apiLoading.value = true
  await new Promise(resolve => setTimeout(resolve, 400))
  apiOptions.value = fakeClients.filter(c =>
    c.label.toLowerCase().includes(query.toLowerCase()),
  )
  apiLoading.value = false
}

const onSelectApi = (option: Option | null) => {
  apiSelected.value = option
}

// allowCreate + BAN (test MUI-48) : recherche nationale sur la Base Adresse Nationale.
const banValue = ref<string | number | null>(null)
const banOptions = ref<Option[]>([])
const banLoading = ref(false)
let banFetchId = 0

const onSearchBan = async (query: string) => {
  if (query.length < 3) {
    banOptions.value = []
    banLoading.value = false
    return
  }
  const requestId = ++banFetchId
  banLoading.value = true
  try {
    const params = new URLSearchParams({q: query, limit: '8'})
    const response = await fetch(`https://api-adresse.data.gouv.fr/search/?${params.toString()}`)
    const data = await response.json() as {features: {properties: {label: string}}[]}
    if (requestId !== banFetchId) return
    banOptions.value = data.features.map(f => ({
      label: f.properties.label,
      value: f.properties.label,
    }))
  } catch (err) {
    if (requestId !== banFetchId) return
    banOptions.value = []
    console.error('Erreur lors du chargement des adresses BAN', err)
  } finally {
    if (requestId === banFetchId) banLoading.value = false
  }
}

const onCreateBan = (value: string) => {
  console.log('BAN — valeur libre créée :', value)
}
</script>