feat : ajout d'un composant pour le champ d'immatriculation, ajout de la lib maska pour le format des champs et correction de la gestion des mises en attentes des receptions

2026-01-16 11:20:05 +01:00
parent 2d3ce2ca43
commit cc83242883
6 changed files with 162 additions and 58 deletions
@@ -0,0 +1,93 @@
+<template>
+  <div class="flex flex-col">
+    <label :for="inputId" class="font-bold uppercase text-xl mb-4">{{ label }}</label>
+    <input
+      :id="inputId"
+      :value="modelValue"
+      v-maska="maskOptions"
+      type="text"
+      :maxlength="maxLength"
+      :placeholder="placeholderText"
+      class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
+      @input="handleInput"
+    />
+    <label :for="checkboxId" class="mt-3 flex items-center gap-3 text-sm">
+      <input
+        :id="checkboxId"
+        :checked="allowAny"
+        type="checkbox"
+        class="h-4 w-4 accent-primary-500"
+        @change="toggleAllowAny"
+      />
+      Autoriser un format libre
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { vMaska } from 'maska/vue'
+type Props = {
+  modelValue: string
+  allowAny?: boolean
+  label?: string
+  id?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  allowAny: false,
+  label: 'Immatriculation',
+  id: 'license-plate'
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+  (event: 'update:allowAny', value: boolean): void
+}>()
+
+const inputId = computed(() => props.id)
+const checkboxId = computed(() => `${props.id}-format`)
+
+const maskOptions = computed(() =>
+  props.allowAny
+    ? undefined
+    : {
+        mask: '@@-###-@@',
+        eager: true,
+        tokens: {
+          '@': {
+            pattern: /[A-Za-z]/,
+            transform: (char: string) => char.toUpperCase()
+          }
+        }
+      }
+)
+const placeholderText = computed(() => (props.allowAny ? '' : 'AA-123-AA'))
+const maxLength = computed(() => (props.allowAny ? 20 : 9))
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement | null
+  if (!target) {
+    return
+  }
+
+  if (props.allowAny) {
+    emit('update:modelValue', target.value)
+    return
+  }
+
+  emit('update:modelValue', target.value)
+}
+
+const toggleAllowAny = (event: Event) => {
+  const target = event.target as HTMLInputElement | null
+  if (!target) {
+    return
+  }
+
+  const nextValue = target.checked
+  emit('update:allowAny', nextValue)
+  if (!nextValue) {
+    emit('update:modelValue', props.modelValue)
+  }
+}
+</script>