<script>
import { computed } from 'vue';

export default {
  name: 'InputInteger',
  props: {
    modelValue: { type: Number, required: true },
    invalid: { type: Boolean, default: false },
  },
  emits: ['update:modelValue', 'update:invalid'],
  setup(props, { emit }) {
    const rawValue = computed({
      get: () => props.modelValue.toString(),
      set: val => {
        val = Number.parseInt(val, 10);
        if(Number.isNaN(val)) {
          emit('update:invalid', true);
        } else {
          emit('update:invalid', false);
          emit('update:modelValue', val);
        }
      },
    });

    return { rawValue };
  },
}
</script>

<template>
<input type="number" v-model="rawValue" required="required" />
</template>

<style scoped>
input:invalid {
  outline: solid 2px red;
}
</style>
