From ea05b9752e7403eebd88a98b7187cca659c33f13 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 2 May 2023 16:46:28 -0400
Subject: [PATCH] script[setup]: displays/related-values (#18393)

---
 .../related-values/related-values.vue         | 153 ++++++++----------
 1 file changed, 64 insertions(+), 89 deletions(-)

diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index 20da67621e..6debedee01 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -33,102 +33,77 @@
 	<render-template v-else :template="internalTemplate" :item="value" :collection="relatedCollection" />
 </template>
 
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, computed, PropType } from 'vue';
+<script setup lang="ts">
+import { getLocalTypeForField } from '@/utils/get-local-type';
 import { getRelatedCollection } from '@/utils/get-related-collection';
 import { useCollection } from '@directus/composables';
-import { getLocalTypeForField } from '@/utils/get-local-type';
 import { get } from 'lodash';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-export default defineComponent({
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		field: {
-			type: String,
-			required: true,
-		},
-		value: {
-			type: [Array, Object] as PropType<Record<string, any> | Record<string, any>[]>,
-			default: null,
-		},
-		template: {
-			type: String,
-			default: null,
-		},
-	},
-	setup(props) {
-		const { t, te } = useI18n();
+const props = defineProps<{
+	collection: string;
+	field: string;
+	value: Record<string, any> | Record<string, any>[] | null;
+	template: string;
+}>();
 
-		const relatedCollectionData = computed(() => {
-			return getRelatedCollection(props.collection, props.field);
-		});
+const { t, te } = useI18n();
 
-		const relatedCollection = computed(() => {
-			return relatedCollectionData.value.relatedCollection;
-		});
-
-		const junctionCollection = computed(() => {
-			return relatedCollectionData.value.junctionCollection;
-		});
-
-		const localType = computed(() => {
-			return getLocalTypeForField(props.collection, props.field);
-		});
-
-		const { primaryKeyField } = useCollection(relatedCollection);
-
-		const primaryKeyFieldPath = computed(() => {
-			return relatedCollectionData.value.path
-				? [...relatedCollectionData.value.path, primaryKeyField.value?.field].join('.')
-				: primaryKeyField.value?.field;
-		});
-
-		const internalTemplate = computed(() => {
-			return props.template || `{{ ${primaryKeyFieldPath.value!} }}`;
-		});
-
-		const unit = computed(() => {
-			if (Array.isArray(props.value)) {
-				if (props.value.length === 1) {
-					if (te(`collection_names_singular.${relatedCollection.value}`)) {
-						return t(`collection_names_singular.${relatedCollection.value}`);
-					} else {
-						return t('item');
-					}
-				} else {
-					if (te(`collection_names_plural.${relatedCollection.value}`)) {
-						return t(`collection_names_plural.${relatedCollection.value}`);
-					} else {
-						return t('items');
-					}
-				}
-			}
-
-			return null;
-		});
-
-		return {
-			relatedCollection,
-			junctionCollection,
-			primaryKeyFieldPath,
-			getLinkForItem,
-			internalTemplate,
-			unit,
-			localType,
-		};
-
-		function getLinkForItem(item: any) {
-			if (!relatedCollectionData.value || !primaryKeyFieldPath.value) return null;
-			const primaryKey = get(item, primaryKeyFieldPath.value);
-
-			return `/content/${relatedCollection.value}/${encodeURIComponent(primaryKey)}`;
-		}
-	},
+const relatedCollectionData = computed(() => {
+	return getRelatedCollection(props.collection, props.field);
 });
+
+const relatedCollection = computed(() => {
+	return relatedCollectionData.value.relatedCollection;
+});
+
+const junctionCollection = computed(() => {
+	return relatedCollectionData.value.junctionCollection;
+});
+
+const localType = computed(() => {
+	return getLocalTypeForField(props.collection, props.field);
+});
+
+const { primaryKeyField } = useCollection(relatedCollection);
+
+const primaryKeyFieldPath = computed(() => {
+	return relatedCollectionData.value.path
+		? [...relatedCollectionData.value.path, primaryKeyField.value?.field].join('.')
+		: primaryKeyField.value?.field;
+});
+
+const internalTemplate = computed(() => {
+	return props.template || `{{ ${primaryKeyFieldPath.value!} }}`;
+});
+
+const unit = computed(() => {
+	if (Array.isArray(props.value)) {
+		if (props.value.length === 1) {
+			if (te(`collection_names_singular.${relatedCollection.value}`)) {
+				return t(`collection_names_singular.${relatedCollection.value}`);
+			} else {
+				return t('item');
+			}
+		} else {
+			if (te(`collection_names_plural.${relatedCollection.value}`)) {
+				return t(`collection_names_plural.${relatedCollection.value}`);
+			} else {
+				return t('items');
+			}
+		}
+	}
+
+	return null;
+});
+
+function getLinkForItem(item: any) {
+	if (!relatedCollectionData.value || !primaryKeyFieldPath.value) return null;
+	const primaryKey = get(item, primaryKeyFieldPath.value);
+
+	return `/content/${relatedCollection.value}/${encodeURIComponent(primaryKey)}`;
+}
 </script>
 
 <style lang="scss" scoped>