<template>
  <v-text-field
    v-model.trim="model"
    :rules="rules"
    :maxlength="maxlength"
    :placeholder="placeholder"
    :counter="maxlength"
    @input="onInput"
    :loading="loading"
    outlined
    clearable
  />
</template>

<script setup>

const props = defineProps({
  placeholder: {
    type: String,
    default: ''
  },
  rules: {
    type: Array,
    default: () => []
  },
  maxlength: {
    type: [Number, String],
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const model = defineModel({required: true})

function onInput(event) {
  const value = typeof event === 'string' ? event : event?.target?.value || ''

  let formatted = value.replace(/[^A-Za-z0-9]/g, '')
  formatted = formatted.toUpperCase()

  model.value = formatted || ""
}


watch(model, (newVal) => {
  emit('update:modelValue', newVal)
})
</script>