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

<Meta of={SyInputSelectStories} />

<Story of={SyInputSelectStories.DeprecationNotice} />
<br/>

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

<Canvas of={SyInputSelectStories.Default} />

<Story of={SyInputSelectStories.Info} />
<br/>

# API

<Controls of={SyInputSelectStories.Default} />

# Exemple d'utilisation

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

	const items = [
        { text: 'Option 1', value: '1' },
        { text: 'Option 2', value: '2' },
    ]

    const value = ref(undefined)
import '../../../../stories/styles/shared.css';
</script>

<template>
	<main>
		<div class="mt-12 ml-12">
			<SyInputSelect
				v-model="value"
				:items="items"
			/>
		</div>
	</main>
</template>
`} />