<script setup lang="ts"> import type { VNodeRef } from '@vue/runtime-core' import { EditModeInj, inject, useVModel } from '#imports' interface Props { modelValue?: number | null } interface Emits { (event: 'update:modelValue', model: number): void } const props = defineProps<Props>() const emits = defineEmits<Emits>() const editEnabled = inject(EditModeInj) const vModel = useVModel(props, 'modelValue', emits) const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus() function onKeyDown(evt: KeyboardEvent) { return evt.key === '.' && evt.preventDefault() } </script> <template> <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none p-0 border-none w-full h-full text-sm" type="number" @blur="editEnabled = false" @keydown="onKeyDown" @keydown.down.stop @keydown.left.stop @keydown.right.stop @keydown.up.stop @keydown.delete.stop /> <span v-else class="text-sm">{{ vModel }}</span> </template> <style scoped lang="scss"> input[type='number']:focus { @apply ring-transparent; } </style>