feat : mise en place de composant UI pour les select, checkbox, date, text

frontend/components/ui/license-plate-input.vue

@@ -12,16 +12,15 @@
               class="border-b border-black flex-1 min-w-0 text-xl uppercase h-[30px]"
               @input="handleInput"
           />
-          <label :for="checkboxId" class="ml-auto flex items-center gap-3 whitespace-nowrap text-sm">
-              <input
-                  :id="checkboxId"
-                  :checked="allowAny"
-                  type="checkbox"
-                  class="h-4 w-4 accent-primary-500"
-                  @change="toggleAllowAny"
-              />
-              Autoriser un format libre
-          </label>
+          <UiCheckbox
+              :id="checkboxId"
+              :model-value="allowAny"
+              label="Autoriser un format libre"
+              wrapper-class="ml-auto"
+              label-class="gap-3 whitespace-nowrap text-sm"
+              input-class="h-4 w-4 accent-primary-500"
+              @update:modelValue="handleAllowAnyChange"
+          />
       </div>
   </div>
 </template>
@@ -80,13 +79,7 @@ const handleInput = (event: Event) => {
   emit('update:modelValue', target.value)
 }
 
-const toggleAllowAny = (event: Event) => {
-  const target = event.target as HTMLInputElement | null
-  if (!target) {
-    return
-  }
-
-  const nextValue = target.checked
+const handleAllowAnyChange = (nextValue: boolean) => {
   emit('update:allowAny', nextValue)
   if (!nextValue) {
     emit('update:modelValue', props.modelValue)