From 7c4892cfdc2ec3cbc820b65980ccde65c13d4153 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 2 May 2023 16:48:26 -0400
Subject: [PATCH] script[setup]: displays/user (#18394)

---
 app/src/displays/user/user.vue | 45 ++++++++++++++--------------------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/app/src/displays/user/user.vue b/app/src/displays/user/user.vue
index be6da9920f..ecf430df46 100644
--- a/app/src/displays/user/user.vue
+++ b/app/src/displays/user/user.vue
@@ -20,9 +20,9 @@
 	</user-popover>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { userName } from '@/utils/user-name';
-import { computed, defineComponent, PropType } from 'vue';
+import { computed } from 'vue';
 
 type User = {
 	id: number;
@@ -34,34 +34,25 @@ type User = {
 	last_name: string;
 };
 
-export default defineComponent({
-	props: {
-		value: {
-			type: Object as PropType<User>,
-			default: null,
-		},
-		display: {
-			type: String as PropType<'avatar' | 'name' | 'both'>,
-			default: 'both',
-		},
-		circle: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props) {
-		const src = computed(() => {
-			if (props.value === null) return null;
+const props = withDefaults(
+	defineProps<{
+		value: User | null;
+		display?: 'avatar' | 'name' | 'both';
+		circle?: boolean;
+	}>(),
+	{
+		display: 'both',
+	}
+);
 
-			if (props.value.avatar?.id) {
-				return `/assets/${props.value.avatar.id}?key=system-small-cover`;
-			}
+const src = computed(() => {
+	if (props.value === null) return null;
 
-			return null;
-		});
+	if (props.value.avatar?.id) {
+		return `/assets/${props.value.avatar.id}?key=system-small-cover`;
+	}
 
-		return { src, userName };
-	},
+	return null;
 });
 </script>