adrema/resources/js/views/formtemplate/GroupField.vue

50 lines
1.4 KiB
Vue
Raw Normal View History

2023-12-31 14:29:50 +01:00
<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>