app/components/Ui/Input/Checkbox.vue

<!--
Case à cocher

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

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

<script setup lang="ts">
import {useFieldViolation} from "~/composables/form/useFieldViolation";

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

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

const fieldLabel: string = props.label ?? props.field

const emit = defineEmits(['update:model-value', 'change'])

const onUpdate = (event: string) => {
  emit('update:model-value', props.modelValue)
}

const onChange = (event: Event | undefined) => {
  updateViolationState(event)
  emit('change', props.modelValue)
}

</script>

<style scoped>
</style>