import { Controls, Canvas, Meta, Source } from '@storybook/blocks';

import * as UploadWorkflowStories from './UploadWorkflow.stories';

<Meta of={UploadWorkflowStories} />

<div className="header">
  <h1>UploadWorkflow</h1>
  
</div><Canvas of={UploadWorkflowStories.Default} />

# API

<Controls of={UploadWorkflowStories.Default} />

# Exemple

## Événements

Vous pouvez réagir lorsque la liste des fichiers est mise à jour en utilisant l’événement `update:modelValue`, réagir aux erreurs de validation en utilisant l’événement `error`, et intercepter l’ouverture d’une prévisualisation en utilisant l’événement `preview` (avec le `FileItem` associé).

<Canvas of={UploadWorkflowStories.Events} />

## Un seul fichier

Lorsque que la liste ne contient qu’un seul fichier, la boîte de dialogue demandant à l’utilisateur de choisir quel fichier il a sélectionné ne sera pas affichée.

<Canvas of={UploadWorkflowStories.OneFile} />

## Fichiers optionnels

Vous pouvez spécifier des fichiers optionnels en utilisant la propriété `optional`.

<Canvas of={UploadWorkflowStories.OptionalDocument} />

## Prévisualisation des fichiers

Vous pouvez permettre à l’utilisateur de prévisualiser le fichier qu’il vient de sélectionner avant de valider en utilisant la prop `show-file-preview`.

<Canvas of={UploadWorkflowStories.WithPreviewStep} />

## Texte d'information

Vous pouvez personnaliser le texte affiché dans la zone d’information du composant enfant `FileUpload` en utilisant la prop `info-text`.

<Canvas of={UploadWorkflowStories.WithInfoText} />

## Niveau de titre

Vous pouvez configurer le niveau du titre affiché par défaut en utilisant la prop `heading-level` (rendu via `role="heading"` et `aria-level`).

## Exemple d'utilisation

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

	const files = ref([])
import '../../stories/styles/shared.css';

	const uploadList = [
		{
			id: '1',
			title: 'Carte d\\'identité',
		},
		{
			id: '2',
			title: 'Facture de soin',
		},
	]
</script>

<template>
	<UploadWorkflow
		v-model="files"
		:uploadList="uploadList"
	/>
</template>
`}
/>