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

<script setup>

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

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
}
</script>