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

import SelectBtnField from './SelectBtnField.vue';
import * as SelectBtnFieldStories from './SelectBtnField.stories';

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

<div className="header">
  <h1>SelectBtnField</h1>
  <p>Le composant `SelectBtnField` est utilisé pour permettre à l’utilisateur de sélectionner une valeur dans une liste.</p>
</div>

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


<Canvas of={SelectBtnFieldStories.Default}  />

## API

<Controls of={SelectBtnFieldStories.Default} />

## Exemple d'utilisation avec Vue

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

    const items = [
      {
        "
text": "Email",
        "value": "email"
      },
      {
        "text": "Courrier",
        "value": "courrier"
      },
      {
        "text": "SMS",
        "value": "sms"
      }
    ];

    const selected = ref(null)
</script>

<template>
    <SelectBtnField
        v-model="selected"
        label="Moyen de contact"
        :items="items"
    />
</template>
`} />