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

frontend/components/ui/UiCheckbox.vue

@@ -0,0 +1,76 @@
+<template>
+    <div :class="wrapperClass">
+        <label
+            class="flex items-center gap-2"
+            :class="labelClass"
+        >
+            <input
+                type="checkbox"
+                :checked="checked"
+                :disabled="disabled"
+                :class="inputClass"
+                @change="onChange"
+            >
+            <span v-if="label">{{ label }}</span>
+        </label>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type CheckboxValue = string | number
+
+const props = withDefaults(
+    defineProps<{
+        modelValue: boolean | CheckboxValue[]
+        value?: CheckboxValue
+        label?: string
+        disabled?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        inputClass?: string
+    }>(),
+    {
+        value: undefined,
+        label: '',
+        disabled: false,
+        wrapperClass: '',
+        labelClass: '',
+        inputClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: boolean | CheckboxValue[]): void
+}>()
+
+const checked = computed(() => {
+    if (Array.isArray(props.modelValue)) {
+        if (props.value === undefined) {
+            return false
+        }
+        return props.modelValue.includes(props.value)
+    }
+    return Boolean(props.modelValue)
+})
+
+const onChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    if (Array.isArray(props.modelValue)) {
+        if (props.value === undefined) {
+            emit('update:modelValue', props.modelValue)
+            return
+        }
+        const next = new Set(props.modelValue)
+        if (target.checked) {
+            next.add(props.value)
+        } else {
+            next.delete(props.value)
+        }
+        emit('update:modelValue', Array.from(next))
+        return
+    }
+    emit('update:modelValue', target.checked)
+}
+</script>

frontend/components/ui/UiDateInput.vue

@@ -0,0 +1,62 @@
+<template>
+    <div :class="['flex flex-col', wrapperClass]">
+        <label
+            v-if="label"
+            :for="id"
+            class="font-bold uppercase text-xl mb-2"
+            :class="labelClass"
+        >
+            {{ label }}
+        </label>
+        <input
+            :id="id"
+            type="date"
+            :value="modelValue ?? ''"
+            :disabled="disabled"
+            v-bind="attrs"
+            class="border-b border-black justify-self-start text-xl pb-[6px] uppercase bg-transparent appearance-none h-[34px]"
+            :class="[
+                isEmpty ? 'text-neutral-400' : 'text-black',
+                disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+                inputClass
+            ]"
+            @input="onInput"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+    defineProps<{
+        id?: string
+        label?: string
+        modelValue: string | null | undefined
+        disabled?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        inputClass?: string
+    }>(),
+    {
+        disabled: false,
+        wrapperClass: '',
+        labelClass: '',
+        inputClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: string): void
+}>()
+
+const attrs = useAttrs()
+const isEmpty = computed(() => !props.modelValue)
+
+const onInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    emit('update:modelValue', target.value)
+}
+</script>

frontend/components/ui/UiSelect.vue

@@ -0,0 +1,85 @@
+<template>
+    <div :class="['flex flex-col', wrapperClass]">
+        <label
+            v-if="label"
+            :for="id"
+            class="font-bold uppercase text-xl mb-2"
+            :class="labelClass"
+        >
+            {{ label }}
+        </label>
+        <select
+            :id="id"
+            :value="modelValue ?? ''"
+            :disabled="disabled || loading"
+            v-bind="attrs"
+            class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
+            :class="[
+                isEmpty ? 'text-neutral-400' : 'text-black',
+                disabled || loading ? 'cursor-not-allowed' : 'cursor-pointer',
+                selectClass
+            ]"
+            @change="onChange"
+        >
+            <option value="" disabled class="text-neutral-400">
+                {{ placeholderText }}
+            </option>
+            <option
+                v-for="option in options"
+                :key="option.value"
+                :value="option.value"
+                class="text-black"
+            >
+                {{ option.label }}
+            </option>
+        </select>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+type SelectOption = {
+    value: string | number
+    label: string
+}
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+    defineProps<{
+        id?: string
+        label?: string
+        placeholder?: string
+        modelValue: string | number | null | undefined
+        options: SelectOption[]
+        disabled?: boolean
+        loading?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        selectClass?: string
+    }>(),
+    {
+        placeholder: 'Sélectionner',
+        disabled: false,
+        loading: false,
+        wrapperClass: '',
+        labelClass: '',
+        selectClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: string): void
+}>()
+
+const attrs = useAttrs()
+
+const isEmpty = computed(() => props.modelValue === '' || props.modelValue === null || props.modelValue === undefined)
+const placeholderText = computed(() => props.placeholder || 'Sélectionner')
+
+const onChange = (event: Event) => {
+    const target = event.target as HTMLSelectElement
+    emit('update:modelValue', target.value)
+}
+</script>

frontend/components/ui/UiTextInput.vue

@@ -0,0 +1,68 @@
+<template>
+    <div :class="['flex flex-col', wrapperClass]">
+        <label
+            v-if="label"
+            :for="id"
+            class="font-bold uppercase text-xl mb-2"
+            :class="labelClass"
+        >
+            {{ label }}
+        </label>
+        <input
+            :id="id"
+            type="text"
+            :value="modelValue ?? ''"
+            :placeholder="placeholder"
+            :maxlength="maxlength"
+            :disabled="disabled"
+            v-bind="attrs"
+            class="border-b border-black text-xl pb-[6px] bg-transparent"
+            :class="[
+                isEmpty ? 'text-neutral-400' : 'text-black',
+                disabled ? 'cursor-not-allowed' : 'cursor-text',
+                inputClass
+            ]"
+            @input="onInput"
+        >
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+    defineProps<{
+        id?: string
+        label?: string
+        modelValue: string | null | undefined
+        placeholder?: string
+        maxlength?: number | string
+        disabled?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        inputClass?: string
+    }>(),
+    {
+        placeholder: '',
+        maxlength: undefined,
+        disabled: false,
+        wrapperClass: '',
+        labelClass: '',
+        inputClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: string): void
+}>()
+
+const attrs = useAttrs()
+const isEmpty = computed(() => !props.modelValue)
+
+const onInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    emit('update:modelValue', target.value)
+}
+</script>

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)