45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<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>
|