ZvFormAddress ​

<template>
  <ZvFormAddress
    v-model="model"
    country="FR"
    :country-codes="['FR', 'BE']"
    address-type="shipping"
    :translations="{
      firstname: 'Prénom',
      lastname: 'Nom',
      phone: 'Telephone',
      city: 'Ville',
      postcode: 'Code Postal',
      country: 'Pays',
      address_line1: 'Adresse',
      address_line2_title: `Complément d'adresse`,
    }"
    :messages="{
      firstname: [{ condition: true, text: 'test' }],
      lastname: [{ type: 'success', condition: true, text: 'test' }],
      address_line1: [{ condition: true, text: 'test' }],
      address_line2: [{ condition: true, text: 'test' }],
      telephone: [
        { type: 'message', condition: true, text: 'test' },
        { type: 'error', condition: false, text: 'test' },
      ],
      country_code: [{ condition: false, text: 'test' }],
      city: [{ condition: true, text: 'test' }],
      postcode: [{ condition: false, text: 'test' }],
    }"
    :hints="{
      telephone: ['Un numéro de téléphone valide facilitera la livraison.', 'Exemples : 0600000000, 0100000000.'],
      postcode: ['Indiquez un code postal valide.', 'Examples : 12345'],
    }"
    :tooltips="{
      telephone: {
        text: 'Your telephone number allows the carrier to contact you if necessary during delivery',
        color: 'black',
        background: 'white',
      },
      country_code: {
        text: 'To change your delivery country, go back to the previous step and click on modify next to the flag',
      },
    }"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import ZvFormAddress from '@zadigetvoltaire/ui/components/ZvFormAddress'
  import type { FormAddress } from '@zadigetvoltaire/ui'

  const model = ref<FormAddress>({
    country_code: 'FR',
  })
</script>