Vue NumberInput component allowing for shift + arrow key to jump up and down by a specified amount

NumberInput.vue

<template>
    <input type="number" @keydown.native="onKeydown" :value="value" @input="onInput" :min="min" :max="max" :step="step" v-bind="$attrs" />
</template>

<script>
export default {
    name: 'NumberInput',
    props: {
        value: {
            type: Number,
        },
        jump: {
            type: Number,
            default: 1,
        },
        step: {
            type: [Number, String],
            default: 'any',
        },
        min: {
            type: Number,
            default: 0,
        },
        max: {
            type: Number,
            required: false,
        },
        keyCodes: {
            type: Object,
            default() {
                return {
                    'ArrowUp': 1,
                    'ArrowDown': -1,
                }
            },
        },
    },

    methods: {
        onKeydown(event) {
            if (!(Object.keys(this.keyCodes).includes(event.key) && event.shiftKey)) {
                return
            }
            event.preventDefault()
            const direction = this.keyCodes[event.key]
            const currentValue = (typeof this.value === 'number' && !isNaN(this.value) ? this.value : this.min)
            let value = currentValue + direction * this.jump
            value = Math.max(this.min, value)
            if (this.max > this.min) {
                value = Math.min(this.max, value)
            }
            this.$emit('input', value)
            return false
        },

        onInput(value) {
            if (value && parseFloat(value) != value) {
                return
            }
            this.$emit('input', parseFloat(value))
        },
    }
}
</script>