app/components/Ui/Input/TextArea.vue

<!--
Champs de saisie de bloc texte

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

<template>
  <v-textarea
      outlined
      :value="data"
      :label="$t(fieldLabel)"
      :rules="rules"
      :disabled="readonly"
      :error="error || !!violation"
      :error-messages="errorMessage || violation ? $t(violation) : ''"
      @change="onChange($event)"
    />
</template>

<script setup lang="ts">

import {useNuxtApp} from "#app";
import {useFieldViolation} from "~/composables/form/useFieldViolation";

const props = defineProps({
  label: {
    type: String,
    required: false,
    default: null
  },
  field: {
    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
  }
})

const { emit } = useNuxtApp()

const fieldLabel = props.label ?? props.field

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

</script>

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