<script lang="ts" setup>
const props = defineProps<{
  modelValue?: number | string,
  type: string,
}>();

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

function valueChanged(e: Event) {
  const target = <HTMLInputElement>e.target;
  switch (props.type) {
    case "number":
      emits('update:modelValue', target.valueAsNumber);
      break;
    default:
      emits('update:modelValue', target.value)
      break;
  }
}
</script>

<template>
  <input :value="modelValue" :type="type" class="dark:bg-slate-900" @input="valueChanged">
</template>
