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>
 |