feat : Ajout de la sélection des bovins étape 3 d'une réception (WIP)

frontend/components/ui/UiNumberInput.vue

@@ -1,34 +1,26 @@
 <template>
-    <div :class="['flex flex-row items-center gap-2', wrapperClass]">
+    <div :class="['flex items-center gap-4', wrapperClass]">
         <label
-            v-if="label && label !== 'Autres'"
+            v-if="label"
             :for="id"
-            class="font-bold text-xl"
+            class="font-bold uppercase text-xl"
             :class="labelClass"
         >
-            {{ label }} <span v-if="code">({{ code }})</span>
+            {{ label }}
         </label>
-
-        <!-- Champ texte si Autres -->
-        <input
-            v-else-if="label === 'Autres'"
-            type="text"
-            :placeholder="'Autres'"
-            class="border-b border-black text-xl bg-transparent- w-48"
-        />
         <input
             :id="id"
             type="number"
-            :value="modelValue ?? 0"
-            :placeholder="placeholder"
+            :value="modelValue ?? ''"
             :min="min"
             :max="max"
             :step="step"
             :disabled="disabled"
             v-bind="attrs"
-            class="border-2  border-black text-xl pb-[6px] w-12 bg-transparent ma"
+            class="border-b border-black text-xl pb-[6px] bg-transparent text-right"
             :class="[
-                disabled ? 'cursor-not-allowed text-neutral-400' : 'cursor-text text-black',
+                isEmpty ? 'text-neutral-400' : 'text-black',
+                disabled ? 'cursor-not-allowed' : 'cursor-text',
                 inputClass
             ]"
             @input="onInput"
@@ -37,43 +29,48 @@
 </template>
 
 <script setup lang="ts">
-import {useAttrs} from 'vue'
+import { computed, useAttrs } from 'vue'
 
-defineOptions({inheritAttrs: false})
+defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
     defineProps<{
         id?: string
         label?: string
-        code?: string
-        modelValue: number | null | undefined
-        placeholder?: string
-        min?: number
-        max?: number
-        step?: number
+        modelValue: number | string | null | undefined
+        min?: number | string
+        max?: number | string
+        step?: number | string
         disabled?: boolean
         wrapperClass?: string
         labelClass?: string
         inputClass?: string
     }>(),
     {
-        placeholder: '',
-        min: 0,
-        step: 1,
+        min: undefined,
+        max: undefined,
+        step: undefined,
         disabled: false,
         wrapperClass: '',
         labelClass: '',
         inputClass: ''
     }
 )
+
 const emit = defineEmits<{
-    (event: 'update:modelValue', value: number): void
+    (event: 'update:modelValue', value: number | null): void
 }>()
 
 const attrs = useAttrs()
+const isEmpty = computed(() => props.modelValue === null || props.modelValue === undefined || props.modelValue === '')
 
 const onInput = (event: Event) => {
     const target = event.target as HTMLInputElement
-    emit('update:modelValue', Number(target.value))
+    if (target.value === '') {
+        emit('update:modelValue', null)
+        return
+    }
+    const numeric = Number(target.value)
+    emit('update:modelValue', Number.isNaN(numeric) ? null : numeric)
 }
 </script>