From 851fbfa82aa6ae7f4d67383dfc858d9cb992ff42 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 2 May 2023 17:31:42 -0400
Subject: [PATCH] script[setup]: interfaces/system-interface (#18410)

---
 .../system-interface/system-interface.vue     | 84 ++++++++-----------
 1 file changed, 37 insertions(+), 47 deletions(-)

diff --git a/app/src/interfaces/_system/system-interface/system-interface.vue b/app/src/interfaces/_system/system-interface/system-interface.vue
index f45acf187d..e44a168c76 100644
--- a/app/src/interfaces/_system/system-interface/system-interface.vue
+++ b/app/src/interfaces/_system/system-interface/system-interface.vue
@@ -11,58 +11,48 @@
 	/>
 </template>
 
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, computed, inject, ref, watch } from 'vue';
-import { InterfaceConfig } from '@directus/types';
+<script setup lang="ts">
 import { useExtensions } from '@/extensions';
+import { InterfaceConfig } from '@directus/types';
+import { computed, inject, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-export default defineComponent({
-	props: {
-		value: {
-			type: String,
-			default: null,
-		},
-		typeField: {
-			type: String,
-			default: null,
-		},
-	},
-	emits: ['input'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
+const props = defineProps<{
+	value: string | null;
+	typeField?: string;
+}>();
 
-		const { interfaces } = useExtensions();
+const emit = defineEmits<{
+	(e: 'input', value: string | null): void;
+}>();
 
-		const values = inject('values', ref<Record<string, any>>({}));
+const { t } = useI18n();
 
-		const selectedType = computed(() => {
-			if (props.typeField === null || !values.value[props.typeField]) return;
-			return values.value[props.typeField];
+const { interfaces } = useExtensions();
+
+const values = inject('values', ref<Record<string, any>>({}));
+
+const selectedType = computed(() => {
+	if (!props.typeField || !values.value[props.typeField]) return;
+	return values.value[props.typeField];
+});
+
+watch(
+	() => values.value[props.typeField],
+	() => {
+		emit('input', null);
+	}
+);
+
+const items = computed(() => {
+	return interfaces.value
+		.filter((inter: InterfaceConfig) => inter.relational !== true && inter.system !== true)
+		.filter((inter: InterfaceConfig) => selectedType.value === undefined || inter.types.includes(selectedType.value))
+		.map((inter: InterfaceConfig) => {
+			return {
+				text: inter.name,
+				value: inter.id,
+			};
 		});
-
-		watch(
-			() => values.value[props.typeField],
-			() => {
-				emit('input', null);
-			}
-		);
-
-		const items = computed(() => {
-			return interfaces.value
-				.filter((inter: InterfaceConfig) => inter.relational !== true && inter.system !== true)
-				.filter(
-					(inter: InterfaceConfig) => selectedType.value === undefined || inter.types.includes(selectedType.value)
-				)
-				.map((inter: InterfaceConfig) => {
-					return {
-						text: inter.name,
-						value: inter.id,
-					};
-				});
-		});
-
-		return { t, items, selectedType, values };
-	},
 });
 </script>