app/components/Ui/Input/Checkbox.vue

<!--
Case à cocher

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

<template>
  <v-container
    class="px-0"
    fluid
  >
    <v-checkbox
      v-model="data"
      :value="data"
      :label="$t(fieldLabel)"
      :disabled="readonly"
      :error="error || !!violation"
      :error-messages="errorMessage || violation ? $t(violation) : ''"
      @change="onChange($event)"
    />
  </v-container>
</template>

<script setup lang="ts">

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

const props = defineProps({
  field: {
    type: String,
    required: false,
    default: null
  },
  label: {
    type: String,
    required: false,
    default: null
  },
  data: {
    type: Boolean,
    required: false
  },
  readonly: {
    type: Boolean,
    required: false
  },
  error: {
    type: Boolean,
    required: false
  },
  errorMessage: {
    type: String,
    required: false,
    default: null
  }
})

const { emit } = useNuxtApp()

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

const fieldLabel = props.label ?? props.field

</script>

<style scoped>
</style>