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 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">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 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
}
</script>