app_vue2/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
-->

<template>
  <vue-tel-input-vuetify
    :field="field"
    :label="label"
    :value="data"
    @input="onChange"
  />
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    label: {
      type: String,
      required: false,
      default: ''
    },
    field: {
      type: String,
      required: false,
      default: null
    },
    type: {
      type: String,
      required: false,
      default: null
    },
    data: {
      type: [String, Number],
      required: false,
      default: null
    },
    readOnly: {
      type: Boolean,
      required: false
    },
    rules: {
      type: Array,
      required: false,
      default: () => []
    },
    error: {
      type: Boolean,
      required: false
    },
    errorMessage: {
      type: String,
      required: false,
      default: null
    }
  },
  setup (props) {
    return {
      label_field: props.label ?? props.field
    }
  },
  methods: {
    onChange (_, { number }) {
      this.$emit('update', number.e164, this.field)
    }
  }
})
</script>

<style>
input:read-only{
  color: #666 !important;
}
</style>