import { Meta, Canvas, Controls, Source } from '@storybook/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>

<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)
import '../../stories/styles/shared.css';
</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>
`} />