ParameterNumberInput.vue

<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
  parameter: {
    type: Object,
    required: true,
    validator(value: Record<string, never>) {
      return "number" === value["type"] || "integer" === value["type"];
    },
  },
  required: Boolean,
  parameterName: {
    type: String,
    required: true,
  },
  modelValue: {
    type: Number,
  },
  helpId: {
    type: String,
  },
});

const emit = defineEmits<{
  (e: "update:modelValue", value: number | undefined): void;
}>();

const numberInput = ref<HTMLInputElement | undefined>(undefined);

function updateValue() {
  emit("update:modelValue", Number(numberInput.value?.value));
}
</script>

<template>
  <input
    class="form-control"
    type="number"
    ref="numberInput"
    :max="props.parameter['maximum']"
    :min="props.parameter['minimum']"
    step="1"
    :value="props.modelValue"
    :required="props.required"
    :aria-describedby="props.helpId"
    @input="updateValue"
  />
</template>

<style scoped></style>