app/components/Ui/Input/Text.vue

<!--
Champs de saisie de texte

@see https://vuetifyjs.com/en/components/text-fields/
-->

<template>
  <v-text-field
    :value="modelValue"
    autocomplete="off"
    :label="$t(label ?? field)"
    :rules="rules"
    :disabled="readonly"
    :type="(type === 'password' && show) ? 'text' : type"
    :error="error || !!fieldViolations"
    :error-messages="errorMessage || (fieldViolations ? $t(fieldViolations) : '')"
    v-cleave="mask"
    :append-icon="type === 'password' ? (show ? 'mdi-eye' : 'mdi-eye-off') : ''"
    @click:append="show = !show"
    @input="$emit('update:modelValue', $event.target.value)"
    @change="updateViolationState($event); $emit('change', $event)"
  />
</template>

<script setup lang="ts">
import {ref} from "@vue/reactivity";
import {useFieldViolation} from "~/composables/form/useFieldViolation";
import {useNuxtApp} from "#app";
import {useI18n} from "vue-i18n";
import {mask} from "vue-the-mask";

const props = defineProps({
  /**
   * v-model
   */
  modelValue: {
    String,
    required: false,
    default: null
  },
  /**
   * 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
  },
  /**
   * Type d'input HTML
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button
   */
  type: {
    type: String,
    required: false,
    default: null
  },
  /**
   * Définit si le champ est en lecture seule
   */
  readonly: {
    type: Boolean,
    required: false,
    default: false
  },
  /**
   * Règles de validation
   * @see https://vuetify.cn/en/components/forms/#validation-with-submit-clear
   */
  rules: {
    type: Array,
    required: false,
    default: () => []
  },
  /**
   * Le champ est-il actuellement en état d'erreur
   */
  error: {
    type: Boolean,
    required: false,
    default: false
  },
  /**
   * Si le champ est en état d'erreur, quel est le message d'erreur?
   */
  errorMessage: {
    type: String,
    required: false,
    default: null
  },
  /**
   * Masque de saisie
   * @see https://github.com/nosir/cleave.js/
   */
  mask: {
    type: [Array, Boolean],
    required: false,
    default: false
  }
})

const { app } = useNuxtApp()
const i18n = useI18n()

const { fieldViolations, updateViolationState } = useFieldViolation(props.field)

const show = ref(false)

defineEmits(['update:modelValue'])
</script>

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