<script setup>
const model = defineModel({ type: String, default: '' })

function onInput(e) {
  let val = e.target.value

  // nur Ziffern und Komma erlauben
  val = val.replace(/[^0-9,]/g, '')

  // nur das erste Komma behalten
  const parts = val.split(',')
  if (parts.length > 2) {
    val = parts[0] + ',' + parts.slice(1).join('')
  }

  // Nachkommastellen auf 2 begrenzen
  if (parts.length === 2) {
    val = parts[0] + ',' + parts[1].slice(0, 2)
  }

  model.value = val
}

function onKeypress(e) {
  const key = e.key

  // Ziffern sind immer erlaubt
  if (/[0-9]/.test(key)) return

  // Komma nur wenn noch keines im Wert enthalten ist
  if (key === ',' && !model.value.includes(',')) return

  // alles andere blocken (inkl. Minuszeichen, Punkte, Buchstaben)
  e.preventDefault()
}
</script>

<template>
  <input
      type="text"
      :value="model"
      inputmode="decimal"
      @input="onInput"
      @keypress="onKeypress"
  />
</template>
