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

frontend/components/ui/UiNumberInput.vue

@@ -0,0 +1,79 @@
+<template>
+    <div :class="['flex flex-row items-center gap-2', wrapperClass]">
+        <label
+            v-if="label && label !== 'Autres'"
+            :for="id"
+            class="font-bold text-xl"
+            :class="labelClass"
+        >
+            {{ label }} <span v-if="code">({{ code }})</span>
+        </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"
+            :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="[
+                disabled ? 'cursor-not-allowed text-neutral-400' : 'cursor-text text-black',
+                inputClass
+            ]"
+            @input="onInput"
+        >
+    </div>
+</template>
+
+<script setup lang="ts">
+import {useAttrs} from 'vue'
+
+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
+        disabled?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        inputClass?: string
+    }>(),
+    {
+        placeholder: '',
+        min: 0,
+        step: 1,
+        disabled: false,
+        wrapperClass: '',
+        labelClass: '',
+        inputClass: ''
+    }
+)
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: number): void
+}>()
+
+const attrs = useAttrs()
+
+const onInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    emit('update:modelValue', Number(target.value))
+}
+</script>