Ferme/frontend/components/ui/UiNumberInput.vue

// flex row passer en class wraper class flex col ainsi que le wfull 34
<template>
    <div :class="['flex', wrapperClass]">
        <label
            v-if="label"
            :for="id"
            class="text-xl flex items-center gap-2 text-primary-700"
            :class="labelClass"
        >
            <span
                v-if="label">
                {{ label }}
            </span>
            <span
                v-if="code"
                class="text-neutral-600">
                ({{ code }})
            </span>
        </label>
        <input
            :id="id"
            type="number"
            :value="modelValue ?? ''"
            :min="min"
            :max="max"
            :step="step"
            :disabled="disabled"
            v-bind="attrs"
            class="border-b border-primary-700 justify-self-start text-xl text-primary-700 py-[6px] uppercase bg-transparent appearance-none h-[34px]"
            :class="[
                isEmpty ? 'text-neutral-400' : 'text-black',
                disabled ? 'cursor-not-allowed' : 'cursor-text',
                inputClass
            ]"
            @keydown="onKeydown"
            @input="onInput"
        >
    </div>
</template>

<script setup lang="ts">
import {computed, useAttrs} from 'vue'

defineOptions({inheritAttrs: false})

const props = withDefaults(
    defineProps<{
        id?: string
        label?: string
        code?: string
        modelValue: number | string | null | undefined
        min?: number | string
        max?: number | string
        step?: number | string
        disabled?: boolean
        wrapperClass?: string
        labelClass?: string
        inputClass?: string
    }>(),
    {
        min: undefined,
        max: undefined,
        step: undefined,
        disabled: false,
        wrapperClass: '',
        labelClass: '',
        inputClass: ''
    }
)

const emit = defineEmits<{
    (event: 'update:modelValue', value: number | null): void
}>()

const attrs = useAttrs()
const isEmpty = computed(() => props.modelValue === null || props.modelValue === undefined || props.modelValue === '')

const toNumberOrNull = (value: number | string | undefined) => {
    if (value === undefined || value === '') {
        return null
    }
    const parsed = Number(value)
    return Number.isFinite(parsed) ? parsed : null
}

const onInput = (event: Event) => {
    const target = event.target as HTMLInputElement
    if (target.value === '') {
        emit('update:modelValue', null)
        return
    }
    const parsed = Number(target.value)
    if (!Number.isFinite(parsed)) {
        emit('update:modelValue', null)
        return
    }

    const min = toNumberOrNull(props.min)
    const max = toNumberOrNull(props.max)

    let numeric = parsed
    if (min !== null) {
        numeric = Math.max(min, numeric)
    } else {
        numeric = Math.max(0, numeric)
    }
    if (max !== null) {
        numeric = Math.min(max, numeric)
    }

    target.value = String(numeric)
    emit('update:modelValue', numeric)
}

const onKeydown = (event: KeyboardEvent) => {
    if (event.key === '-' || event.key === 'e' || event.key === 'E') {
        event.preventDefault()
    }
}
</script>