54 lines
1.8 KiB
Vue
54 lines
1.8 KiB
Vue
<script setup>
|
|
import TextEditor from "../../../../../../Views/Components/TextEditor.vue";
|
|
|
|
// Generische, schema-getriebene Eingabefelder eines Zahlungsmoduls. Wiederverwendbar für künftige
|
|
// Verfahren (SEPA, PayPal): das jeweilige Modul liefert das Schema, hier wird nur gerendert.
|
|
const props = defineProps({
|
|
// [{ name, label, type, required }] -- z.B. aus participantOptionsSchema einer Zahlungsmethode.
|
|
schema: {type: Array, default: () => []},
|
|
// v-model: Objekt { optionName: value }
|
|
modelValue: {type: Object, default: () => ({})},
|
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
function setValue(name, value) {
|
|
emit('update:modelValue', {...props.modelValue, [name]: value})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<table class="form-table">
|
|
<tr v-for="option in schema" :key="option.name">
|
|
<td>
|
|
{{ option.label }}<span v-if="option.required" class="required-marker">*</span>:
|
|
</td>
|
|
<td>
|
|
<TextEditor
|
|
v-if="option.type === 'richtext'"
|
|
:modelValue="modelValue[option.name] ?? ''"
|
|
@update:modelValue="value => setValue(option.name, value)"
|
|
/>
|
|
<input
|
|
v-else-if="option.type === 'checkbox'"
|
|
type="checkbox"
|
|
:checked="modelValue[option.name] ?? false"
|
|
@change="event => setValue(option.name, event.target.checked)"
|
|
/>
|
|
<input
|
|
v-else
|
|
type="text"
|
|
:value="modelValue[option.name] ?? ''"
|
|
@input="event => setValue(option.name, event.target.value)"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.required-marker {
|
|
color: #ef4444;
|
|
margin-left: 2px;
|
|
}
|
|
</style>
|