import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
import * as SySelectStories from "./SySelect.stories.ts";

<Meta of={SySelectStories} />

<div className="header">
  <h1>SySelect</h1>
  <p>Le composant `SySelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles d'accessibilité <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.<br/>
Il est basé sur un `v-textfield`.</p>
</div>

<Canvas of={SySelectStories.Default} />

<Story of={SySelectStories.Info} />

# API

<Controls of={SySelectStories.Default} />

# Exemple d'utilisation

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

	const selectedValue = ref(undefined)

	const items = [
		{ text: 'Option 1', value: '1' },
		{ text: 'Option 2', value: '2' },
	]
</script>

<template>
	<main class="ma-12">
		SelectedValue: {{ selectedValue }}
		<div class="d-flex flex-wrap align-center">
			<SySelect
				v-model="selectedValue"
				:items="items"
				text-key="text"
				required
			/>
		</div>
	</main>
</template>
`} />