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

<Meta of={DialogBoxStories} />

<div className="header">
  <h1>DialogBox</h1>
  <p>L’élément `DialogBox` est utilisé pour afficher une boîte de dialogue avec des boutons d'action.</p>
</div>

{/* func-version-start */}
<p className="func-version-badge">Dernière mise à jour fonctionnelle : V1.1.4 - 05/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 */}


<Canvas of={DialogBoxStories.Default}  />

# API

<Controls of={DialogBoxStories.Default} />

# Exemple d'utilisation

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

    const dialogOpen = ref(false)
</script>

<template>
    <VBtn
        color="primary"
        @click="dialogOpen = !dialogOpen"
    >Toggle DialogBox</VBtn>
    <DialogBox
        v-model="dialogOpen"
        title="DialogBox title"
        @confirm="dialogOpen = false"
        @cancel="dialogOpen = false"
    >
        DialogBox content
    </DialogBox>
</template>
`} />