import {Canvas, Meta, Controls, Source} from '@storybook/addon-docs/blocks';
import * as RatingPickerStories from './RatingPicker.stories';
import RatingPicker from './RatingPicker.vue';

<Meta title="Composants/Feedback/RatingPicker" component={RatingPicker}/>

<div className="header">
  <h1>RatingPicker</h1>
  <p>L’élément `RatingPicker` permet de recueillir l’avis d’un utilisateur.</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 */}


## Solution recommandée

Ce parcours laisse l’utilisateur modifier sa réponse jusqu’à la validation du formulaire et affiche le champ de commentaire uniquement lorsqu’il est utile.

<Canvas story={{height: '420px'}} of={RatingPickerStories.AccessibilityBestPractices}/>

# API

<Controls of={RatingPickerStories.AccessibilityBestPractices}/>

## Utilisation de base

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

    const ratingEmotion = ref(-1)
    const ratingNumber = ref(-1)
    const ratingStars = ref(-1)
</script>

<template>
   {{ ratingEmotion }}
    <RatingPicker
        v-model="ratingEmotion"
        label="Êtes-vous satisfait de ce service ?"
        type="emotion"
    />
    <br>
    {{ ratingNumber }}
    <RatingPicker
        v-model="ratingNumber"
        label="Êtes-vous satisfait de ce service ?"
        type="number"
    />
    <br>
    {{ ratingStars }}
    <RatingPicker
        v-model="ratingStars"
        label="Êtes-vous satisfait de ce service ?"
        type="stars"
    />
</template>
`}
/>