import { Meta, Canvas, Controls, Source } from '@storybook/addon-docs'
import * as PhoneFieldStories from './PhoneField.stories.ts';
import PhoneField from './PhoneField.vue'

<Meta title="Composants/Formulaires/PhoneField" component={PhoneField} />

<div className="header">
  <h1>PhoneField</h1>
  <p>Le composant`PhoneField`  est utilisé pour saisir des numéros de téléphone avec différentes options de formatage.</p>
</div>

<Canvas of={PhoneFieldStories.Default} />

# API

<Controls of={PhoneFieldStories.Default} />

# Exemple d'utilisation

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

const value = ref('')
import '../../stories/styles/shared.css';

const handleChange = (newValue) => {
    console.log('Value changed:', newValue)
}
const customIndicatifs = ref([
    { code: '+99', country: 'Utopia', abbreviation: 'UT', mask: '## ## ## ##', phoneLength: 8 },
    { code: '+98', country: 'Paradise', abbreviation: 'PA', mask: '## ## ## ##', phoneLength: 18 },
])
</script>

<template>
    <PhoneField
        v-model="value"
        required
        with-country-code
        country-code-required
        display-format="code-abbreviation"
        :custom-indicatifs="customIndicatifs"
        :use-custom-indicatifs-only="true"
        @change="handleChange"
    />
</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>