<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue: string;
    disabled?: boolean;
    name?: string;
  }>(),
  {
    disabled: false,
  }
);

const emits = defineEmits<{
  (e: "update:modelValue", value: string): void;
  (e: "blur"): void;
  (e: "focus"): void;
}>();
</script>

<template>
  <input
    :value="props.modelValue"
    :disabled="props.disabled"
    :name="props.name"
    @input="emits('update:modelValue', (<HTMLInputElement>$event.target).value)"
    @blur="emits('blur')"
    @focus="emits('focus')"
    type="text"
  />
</template>
