import {Controls, Canvas, Meta, Source, Story} from '@storybook/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>

<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>
`} />