update

frontend/src/components/ModalBox.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
+  titel: { type: String, required: true },
+  frage: { type: String, default: '' },      // gesetzt = Rückfrage statt Eingabe
+  platzhalter: { type: String, default: '' },
+  knopf: { type: String, default: 'Bestätigen' },
+  meldung: { type: String, default: '' },
+})
+const emit = defineEmits(['bestaetigt', 'abbrechen'])
+
+const wert = ref('')
+const feld = ref(null)
+
+function bestaetigen() {
+  if (!props.frage && !wert.value.trim()) return
+  emit('bestaetigt', wert.value.trim())
+}
+
+onMounted(() => feld.value?.focus())
+</script>
+
+<template>
+  <div class="schleier" @click.self="emit('abbrechen')">
+    <div class="modal karte">
+      <h2>{{ titel }}</h2>
+      <p v-if="frage" class="frage">{{ frage }}</p>
+      <input
+        v-else
+        ref="feld"
+        v-model="wert"
+        :placeholder="platzhalter"
+        @keyup.enter="bestaetigen"
+        @keydown.esc="emit('abbrechen')"
+      >
+      <p v-if="meldung" class="meldung">{{ meldung }}</p>
+      <footer>
+        <button @click="emit('abbrechen')">Abbrechen</button>
+        <button class="primaer" :disabled="!frage && !wert.trim()" @click="bestaetigen">{{ knopf }}</button>
+      </footer>
+    </div>
+  </div>
+</template>