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