<script setup>
import { ref, onMounted } from 'vue'

// defines
defineEmits(['update:modelValue'])

defineProps({
  modelValue: String,
})

defineExpose({
  focus: () => input.value.focus()
})

// variables
const input = ref(null)

// lifecycle hooks
onMounted(() => {
  if (input.value.hasAttribute('autofocus')) {
    input.value.focus()
  }
})
</script>

<template>
    <input ref="input" class="input" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>
