app/components/Ui/Input/Checkbox.vue

<!--
Case à cocher, à placer dans un composant `UiForm`

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

<template>
  <v-checkbox
    :model-value="modelValue"
    :label="$t(fieldLabel)"
    :disabled="readonly"
    density="compact"
    :error="error || !!fieldViolations"
    :error-messages="errorMessage || fieldViolations ? $t(fieldViolations) : ''"
    class="checkbox py-1"
    @update:model-value="onUpdate"
  />
</template>

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

const props = defineProps({
  /**
   * v-model
   */
  modelValue: {
    type: Boolean,
    required: false,
  },
  /**
   * 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,
  },
  /**
   * 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,
  },
  /**
   * Si le champ est en état d'erreur, quel est le message d'erreur?
   */
  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'])

const onUpdate = (event: boolean) => {
  updateViolationState()
  emit('update:model-value', event)
}

onBeforeUnmount(() => {
  updateViolationState()
})
</script>

<style scoped lang="scss">
.checkbox {
  margin-top: -4px;
  margin-bottom: 8px;
}

@media (min-width: 600px) {
  :deep(.v-input__control) {
    max-height: 32px;
  }
}

:deep(.v-label) {
  padding-left: 8px;
}
</style>