Turn display template into usable interface

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

@@ -275,7 +275,7 @@ export default defineComponent({
 		}
 
 		span {
-			min-width: 1ch;
+			min-width: 1px;
 			min-height: 1em;
 		}
 

app/src/interfaces/display-template/display-template.vue

@@ -0,0 +1,48 @@
+<template>
+	<v-notice v-if="!collectionField" type="warning">
+		{{ $t('collection_field_not_setup') }}
+	</v-notice>
+	<v-notice v-else-if="collection === null" type="warning">
+		{{ $t('select_a_collection') }}
+	</v-notice>
+	<v-field-template v-else :collection="collection" @input="$listeners.input" :value="value" :disabled="disabled" />
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, ref, computed } from '@vue/composition-api';
+import { useCollectionsStore } from '@/stores/collections';
+
+export default defineComponent({
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		value: {
+			type: String,
+			default: null,
+		},
+		collectionField: {
+			type: String,
+			default: null,
+		},
+	},
+	setup(props) {
+		const collectionsStore = useCollectionsStore();
+
+		const values = inject('values', ref<Record<string, any>>({}));
+
+		const collection = computed(() => {
+			if (!props.collectionField) return null;
+			const collectionName = values.value[props.collectionField];
+			const collectionExists = !!collectionsStore.state.collections.find(
+				(collection) => collection.collection === collectionName
+			);
+			if (collectionExists === false) return null;
+			return collectionName;
+		});
+
+		return { collection };
+	},
+});
+</script>

app/src/interfaces/display-template/index.ts

@@ -1,24 +1,12 @@
 import { defineInterface } from '@/interfaces/define';
-import VFieldTemplate from '@/components/v-field-template';
+import InterfaceDisplayTemplate from './display-template.vue';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'display-template',
 	name: i18n.t('display-template'),
 	icon: 'arrow_drop_down_circle',
-	component: VFieldTemplate,
+	component: InterfaceDisplayTemplate,
 	types: ['string'],
-	options: [
-		{
-			field: 'collection',
-			name: i18n.t('collection'),
-			type: 'string',
-			meta: {
-				width: 'full',
-				interface: 'text-input',
-			},
-			schema: {
-				default_value: null,
-			},
-		},
-	],
+	system: true,
+	options: [],
 }));

app/src/interfaces/field/field.vue

@@ -5,7 +5,15 @@
 	<v-notice v-else-if="selectItems.length === 0" type="warning">
 		{{ $t('select_a_collection') }}
 	</v-notice>
-	<v-select v-else @input="$listeners.input" :value="value" :disabled="disabled" :items="selectItems" />
+	<v-select
+		v-else
+		:show-deselect="allowNone"
+		@input="$listeners.input"
+		:value="value"
+		:disabled="disabled"
+		:items="selectItems"
+		:placeholder="placeholder"
+	/>
 </template>
 
 <script lang="ts">
@@ -17,7 +25,7 @@ export default defineComponent({
 	props: {
 		collectionField: {
 			type: String,
-			required: true,
+			default: null,
 		},
 		typeAllowList: {
 			type: Array as PropType<string[]>,
@@ -31,6 +39,14 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		placeholder: {
+			type: String,
+			default: null,
+		},
+		allowNone: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const fieldsStore = useFieldsStore();