add depth prop

app/src/components/v-field-select/field-list-item.vue

@@ -1,37 +0,0 @@
-<template>
-	<v-list-item
-		v-if="field.children === undefined"
-		@click="$emit('add', `${parent ? parent + '.' : ''}${field.field}`)"
-	>
-		<v-list-item-content>{{ field.name }}</v-list-item-content>
-	</v-list-item>
-	<v-list-group v-else>
-		<template #activator>{{ field.name }}</template>
-		<field-list-item
-			v-for="childField in field.children"
-			:key="childField.field"
-			:parent="`${parent ? parent + '.' : ''}${field.field}`"
-			:field="childField"
-			@add="$emit('add', $event)"
-		/>
-	</v-list-group>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from '@vue/composition-api';
-import { FieldTree } from './types';
-
-export default defineComponent({
-	name: 'field-list-item',
-	props: {
-		field: {
-			type: Object as PropType<FieldTree>,
-			required: true,
-		},
-		parent: {
-			type: String,
-			default: null,
-		},
-	},
-});
-</script>

app/src/components/v-field-select/types.ts

@@ -1,7 +0,0 @@
-import { TranslateResult } from 'vue-i18n';
-
-export type FieldTree = {
-	field: string;
-	name: string | TranslateResult;
-	children?: FieldTree[];
-};

app/src/components/v-field-select/v-field-select.vue

@@ -23,7 +23,13 @@
 			</template>
 
 			<v-list dense>
-				<field-list-item @add="addField" v-for="field in selectableFields" :key="field.field" :field="field" />
+				<field-list-item
+					@add="addField"
+					v-for="field in selectableFields"
+					:key="field.field"
+					:field="field"
+					:depth="depth"
+				/>
 			</v-list>
 		</v-menu>
 	</draggable>
@@ -31,7 +37,7 @@
 
 <script lang="ts">
 import { defineComponent, toRefs, ref, watch, onMounted, onUnmounted, PropType, computed } from '@vue/composition-api';
-import FieldListItem from './field-list-item.vue';
+import FieldListItem from '../v-field-template/field-list-item.vue';
 import { useFieldsStore } from '@/stores';
 import { Field } from '@/types/';
 import Draggable from 'vuedraggable';
@@ -55,6 +61,10 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		depth: {
+			type: Number,
+			default: 1,
+		},
 	},
 	setup(props, { emit }) {
 		const fieldsStore = useFieldsStore();