<script setup>

import { useTemplateRef } from 'vue';

const model = defineModel();
const props = defineProps({
  placeholder: String,
  readonly: {
    type: Boolean,
    default: false,
  },
});
const inputElement = useTemplateRef('inputElement');

function focus() {
  inputElement.value.focus();
}

defineExpose({ focus });

</script>

<template>
  <input ref="inputElement" class="pankow-text-input" type="email" :placeholder="placeholder" :readonly="readonly" :required="$attrs['required']" v-model.trim="model"/>
</template>

<style>

/* using TextInput styles */

</style>