50 lines
		
	
	
		
			1.4 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			50 lines
		
	
	
		
			1.4 KiB
		
	
	
	
		
			Vue
		
	
	
	
<template>
 | 
						|
    <f-switch
 | 
						|
        id="fieldrequired"
 | 
						|
        v-model="modelValue.required"
 | 
						|
        label="Erforderlich"
 | 
						|
        size="sm"
 | 
						|
        name="fieldrequired"
 | 
						|
        inline
 | 
						|
        @update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
 | 
						|
    ></f-switch>
 | 
						|
    <f-select
 | 
						|
        id="parent_field"
 | 
						|
        :options="fieldOptions"
 | 
						|
        size="sm"
 | 
						|
        name="parent_field"
 | 
						|
        label="Übergeordnetes Feld"
 | 
						|
        :model-value="modelValue.parent_field"
 | 
						|
        @update:modelValue="$emit('update:modelValue', {...props.modelValue, parent_field: $event})"
 | 
						|
    ></f-select>
 | 
						|
    <f-select
 | 
						|
        id="parent_group"
 | 
						|
        :options="meta.groups"
 | 
						|
        size="sm"
 | 
						|
        name="parent_group"
 | 
						|
        label="Übergeordnete Gruppe"
 | 
						|
        :model-value="modelValue.parent_group"
 | 
						|
        @update:modelValue="$emit('update:modelValue', {...props.modelValue, parent_group: $event})"
 | 
						|
    ></f-select>
 | 
						|
</template>
 | 
						|
 | 
						|
<script setup>
 | 
						|
import {computed} from 'vue';
 | 
						|
 | 
						|
const props = defineProps({
 | 
						|
    modelValue: {},
 | 
						|
    meta: {},
 | 
						|
    payload: {},
 | 
						|
});
 | 
						|
 | 
						|
const fieldOptions = computed(() => {
 | 
						|
    return props.payload.reduce((carry, section) => {
 | 
						|
        return section.fields.reduce((fcarry, field) => {
 | 
						|
            return field.type === 'GroupField' ? fcarry.concat({id: field.key, name: field.name}) : fcarry;
 | 
						|
        }, carry);
 | 
						|
    }, []);
 | 
						|
});
 | 
						|
 | 
						|
const emit = defineEmits(['update:modelValue']);
 | 
						|
</script>
 |