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

<Meta of={PeriodFieldStories}/>

<div className="header">
  <h1>PeriodField</h1>
  <p>Le composant `PeriodField` est utilisé pour permettre à l’utilisateur de saisir une période.</p>
</div>

<Canvas story={{height: '550px'}} of={PeriodFieldStories.Default}/>

# API

<Controls of={PeriodFieldStories.Default}/>

## Utilisation de base

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

	const selectedPeriod = ref({ from: null, to: null })
import '../../stories/styles/shared.css';
</script>

<template>
	<PeriodField v-model="selectedPeriod" />
	<p>Selected Period: {{ selectedPeriod }}</p>
</template>
`}
/>

<a href="/?path=/docs/guide-du-dev-guide-de-validation-des-formulaires--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>