From e2301eddf360680a7a188f939b12e34ce963ff81 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Fri, 21 Apr 2023 16:05:41 -0400
Subject: [PATCH] Move file display to script[setup] (#18292)

---
 app/src/displays/file/file.vue | 50 +++++++++++++++-------------------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/app/src/displays/file/file.vue b/app/src/displays/file/file.vue
index ea4ac9d74b..e03a8e22e5 100644
--- a/app/src/displays/file/file.vue
+++ b/app/src/displays/file/file.vue
@@ -3,7 +3,7 @@
 		v-if="imageThumbnail && !imgError"
 		:src="imageThumbnail"
 		:class="{ 'is-svg': value && value.type?.includes('svg') }"
-		:alt="value.title"
+		:alt="value?.title"
 		@error="imgError = true"
 	/>
 	<div v-else ref="previewEl" class="preview">
@@ -15,10 +15,9 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, computed, ref } from 'vue';
+<script lang="ts" setup>
 import { readableMimeType } from '@/utils/readable-mime-type';
-import { useElementSize } from '@directus/composables';
+import { computed, ref } from 'vue';
 
 type File = {
 	id: string;
@@ -26,33 +25,28 @@ type File = {
 	title: string;
 };
 
-export default defineComponent({
-	props: {
-		value: {
-			type: Object as PropType<File>,
-			default: null,
-		},
-	},
-	setup(props) {
-		const previewEl = ref<Element>();
-		const imgError = ref(false);
+const props = withDefaults(
+	defineProps<{
+		value: File | null;
+	}>(),
+	{
+		value: null,
+	}
+);
 
-		const fileExtension = computed(() => {
-			if (!props.value) return null;
-			return readableMimeType(props.value.type, true);
-		});
+const previewEl = ref<Element>();
+const imgError = ref(false);
 
-		const imageThumbnail = computed(() => {
-			if (!props.value) return null;
-			if (props.value.type?.includes('svg')) return '/assets/' + props.value.id;
-			if (props.value.type?.includes('image') === false) return null;
-			return `/assets/${props.value.id}?key=system-small-cover`;
-		});
+const fileExtension = computed(() => {
+	if (!props.value) return null;
+	return readableMimeType(props.value.type, true);
+});
 
-		const { height } = useElementSize(previewEl);
-
-		return { fileExtension, imageThumbnail, previewEl, height, imgError };
-	},
+const imageThumbnail = computed(() => {
+	if (!props.value) return null;
+	if (props.value.type?.includes('svg')) return '/assets/' + props.value.id;
+	if (props.value.type?.includes('image') === false) return null;
+	return `/assets/${props.value.id}?key=system-small-cover`;
 });
 </script>