import {Controls, Canvas, Meta, Source, Story} from '@storybook/addon-docs/blocks';
import '../../../../stories/styles/shared.css';

import SyAutocomplete from './SyAutocomplete.vue';
import * as SyAutocompleteStories from './SyAutocomplete.stories';

<Meta title="Composants/Formulaires/Selects/SyAutocomplete" component={SyAutocomplete}/>

<div className="header">
  <h1>SyAutocomplete</h1>
  <p>Le composant `SyAutocomplete` permet à l'utilisateur de rechercher et sélectionner une valeur dans une liste d'options.</p>
</div>

{/* func-version-start */}
<p className="func-version-badge">Dernière mise à jour fonctionnelle : V1.1.3 - 27/07/2026</p>
{/* func-version-end */}
{/* a11y-version-start */}
<p className="a11y-version-badge">Dernière mise à jour accessibilité : V1.0.27 - 13/05/2026</p>
{/* a11y-version-end */}


<Canvas of={SyAutocompleteStories.Default}  />

## API

<Controls of={SyAutocompleteStories.Default} />

## Exemple d'utilisation avec Vue

<Source dark code={`
<script setup lang="ts">
    import { ref } from 'vue'
    import { SyAutocomplete } from '@cnamts/synapse'

    const items = [
      {
        "text": "Adrien",
        "value": "Adrien"
      },
      {
        "text": "Axel",
        "value": "Axel"
      },
      {
        "text": "Baptiste",
        "value": "Baptiste"
      }
    ];

    const selected = ref('')
</script>

<template>
    <SyAutocomplete
        v-model="selected"
        :items="items"
        label="Rechercher un prénom"
    />
</template>
`} />