app/components/Ui/Input/Phone.vue

<!--
Champs de saisie d'un numéro de téléphone

@see https://github.com/yogakurniawan/vue-tel-input-vuetify

// TODO: tester compatibilité avec Vue 3
-->

<template>
  <client-only>
    <vue-tel-input-vuetify
      v-model="myPhone"
      :error="error || !!violation"
      :error-messages="errorMessage || violation ? $t(violation) : ''"
      :field="field"
      :label="label"
      :readonly="readonly"
      clearable
      valid-characters-only
      validate-on-blur
      :rules="rules"
      @input="onInput"
      @change="onChangeValue"
    />
  </client-only>
</template>

<script setup lang="ts">
import { useNuxtApp } from '#app'
import type { Ref } from 'vue'
import { useFieldViolation } from '~/composables/form/useFieldViolation'

const props = defineProps({
  label: {
    type: String,
    required: false,
    default: '',
  },
  field: {
    type: String,
    required: false,
    default: null,
  },
  data: {
    type: [String, Number],
    required: false,
    default: null,
  },
  readonly: {
    type: Boolean,
    required: false,
  },
  error: {
    type: Boolean,
    required: false,
  },
  errorMessage: {
    type: String,
    required: false,
    default: null,
  },
})

const { emit } = useNuxtApp()

const i18n = useI18n()

const { violation, onChange } = useFieldViolation(props.field, emit)

const nationalNumber: Ref<string | number> = ref('')
const internationalNumber: Ref<string | number> = ref('')
const isValid: Ref<boolean> = ref(false)
const onInit: Ref<boolean> = ref(true)

const onInput = (
  _: unknown,
  {
    number,
    valid,
    countryChoice,
  }: {
    number: {
      national: string | number;
      international: string | number
    };
    valid: boolean;
    countryChoice: Record<string, unknown>
  },
) => {
  isValid.value = valid
  nationalNumber.value = number.national
  internationalNumber.value = number.international
  onInit.value = false
}

const onChangeValue = () => {
  if (isValid.value) {
    onChange(internationalNumber.value)
  }
}

const myPhone = computed({
  get: () => {
    return onInit.value ? props.data : nationalNumber.value
  },
  set: (value) => {
    return props.data
  },
})

const rules = [
  (phone: string) => !phone || isValid.value || i18n.t('phone_error'),
]
</script>

<style lang="scss">
input:read-only {
  color: rgb(var(--v-theme-on-neutral));
}
</style>