tristan
120 lines
3.0 KiB
Vue
120 lines
3.0 KiB
Vue
<template>
|
|
<div :class="['flex flex-row items-center gap-2', wrapperClass]">
|
|
<label
|
|
v-if="label"
|
|
:for="id"
|
|
class="text-xl flex items-center gap-2 text-primary-500"
|
|
: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-black text-xl bg-transparent w-16 text-primary-500"
|
|
: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>
|