app/components/Ui/Input/Phone.vue

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

@see https://github.com/paul-thebaud/v-phone-inpu

-->

<template>
  <v-phone-input
    :model-value.number="modelValue"
    :rules="rules"
    :variant="variant"
    :label="label || field ? $t(label ?? field) : undefined"
    defaultCountry="FR"
    @update:model-value="onUpdate($event)"
    :invalidMessage="(n) => $t('invalid_phone_number', { example: n.example})"
  />
</template>

<script setup lang="ts">

type ValidationRule = (value: string | number | null) => boolean | string

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
  /**
   * Nom de la propriété d'une entité lorsque l'input concerne cette propriété
   * - Utilisé par la validation
   * - Laisser null si le champ ne s'applique pas à une entité
   */
  field: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * Label du champ
   * Si non défini, c'est le nom de propriété qui est utilisé
   */
  label: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * Règles de validation
   * @see https://vuetify.cn/en/components/forms/#validation-with-submit-clear
   */
  rules: {
    type: Array as PropType<ValidationRule[]>,
    required: false,
    default: () => [],
  },
  /**
   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-variant
   */
  variant: {
    type: String as PropType<
      | 'filled'
      | 'outlined'
      | 'plain'
      | 'underlined'
      | 'solo'
      | 'solo-inverted'
      | 'solo-filled'
      | undefined
    >,
    required: false,
    default: 'outlined',
  },
})

const emit = defineEmits(['update:modelValue'])

const onUpdate = (event: string|null) => {
  if(event === ''){
    event = null
  }
  emit('update:model-value', event)
}

</script>

<style lang="scss">

</style>