Invoices can be uploaded

app/Views/Components/IbanInput.vue

@@ -0,0 +1,56 @@
+<script setup>
+const model = defineModel({ type: String, default: '' })
+
+function onInput(e) {
+  let val = e.target.value
+
+  // alles in Großbuchstaben
+  val = val.toUpperCase()
+
+  // nur Buchstaben, Ziffern und Leerzeichen erlauben
+  val = val.replace(/[^A-Z0-9 ]/g, '')
+
+  // ohne Leerzeichen prüfen
+  const compact = val.replace(/\s+/g, '')
+
+  // max 2 Buchstaben + 20 Ziffern
+  const letters = compact.slice(0, 2).replace(/[^A-Z]/g, '')
+  const digits = compact.slice(2).replace(/[^0-9]/g, '').slice(0, 20)
+
+  // neu zusammensetzen (z. B. alle 4 Zeichen ein Leerzeichen für Lesbarkeit)
+  const formatted = (letters + digits).replace(/(.{4})/g, '$1 ').trim()
+
+  model.value = formatted
+}
+
+function onKeypress(e) {
+  const key = e.key
+
+  // immer erlaubt: Leerzeichen
+  if (key === ' ') return
+
+  const compact = model.value.replace(/\s+/g, '')
+
+  if (compact.length < 2) {
+    // in den ersten 2 Stellen nur Buchstaben
+    if (/[A-Za-z]/.test(key)) return
+    e.preventDefault()
+    return
+  }
+
+  // danach nur Ziffern bis 20 erlaubt
+  if (/[0-9]/.test(key) && compact.length < 22) return
+
+  e.preventDefault()
+}
+</script>
+
+<template>
+  <input
+      maxlength="27"
+      type="text"
+      :value="model"
+      @input="onInput"
+      @keypress="onKeypress"
+  />
+</template>