From 1bab653346ed20f79f910e9589586e3c39f73684 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 2 May 2023 16:40:00 -0400
Subject: [PATCH] script[setup]: displays/labels.vue (#18391)

---
 app/src/displays/labels/labels.vue | 111 +++++++++++++----------------
 1 file changed, 48 insertions(+), 63 deletions(-)

diff --git a/app/src/displays/labels/labels.vue b/app/src/displays/labels/labels.vue
index 2a813a769f..a6e6b8e2ae 100644
--- a/app/src/displays/labels/labels.vue
+++ b/app/src/displays/labels/labels.vue
@@ -21,10 +21,10 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, PropType } from 'vue';
+<script setup lang="ts">
 import formatTitle from '@directus/format-title';
 import { isEmpty } from 'lodash';
+import { computed } from 'vue';
 
 type Choice = {
 	value: string;
@@ -33,73 +33,58 @@ type Choice = {
 	background: string | null;
 };
 
-export default defineComponent({
-	props: {
-		value: {
-			type: [String, Array] as PropType<string | string[]>,
-			required: true,
-		},
-		format: {
-			type: Boolean,
-			default: true,
-		},
-		showAsDot: {
-			type: Boolean,
-			default: false,
-		},
-		choices: {
-			type: Array as PropType<Choice[]>,
-			default: () => [],
-		},
-		type: {
-			type: String,
-			required: true,
-			validator: (val: string) => ['text', 'string', 'json', 'csv'].includes(val),
-		},
-	},
-	setup(props) {
-		const items = computed(() => {
-			let items: string[];
+const props = withDefaults(
+	defineProps<{
+		value: string | string[];
+		type: 'text' | 'string' | 'json' | 'csv';
+		format?: boolean;
+		showAsDot?: boolean;
+		choices?: Choice[];
+	}>(),
+	{
+		format: true,
+		choices: () => [],
+	}
+);
 
-			if (isEmpty(props.value)) items = [];
-			else if (props.type === 'string') items = [props.value as string];
-			else items = props.value as string[];
+const items = computed(() => {
+	let items: string[];
 
-			return items.map((item) => {
-				const choice = (props.choices || []).find((choice) => choice.value === item);
+	if (isEmpty(props.value)) items = [];
+	else if (props.type === 'string') items = [props.value as string];
+	else items = props.value as string[];
 
-				let itemStringValue: string;
+	return items.map((item) => {
+		const choice = (props.choices || []).find((choice) => choice.value === item);
 
-				if (typeof item === 'object') {
-					itemStringValue = JSON.stringify(item);
-				} else {
-					if (props.format) {
-						itemStringValue = formatTitle(item);
-					} else {
-						itemStringValue = item;
-					}
-				}
+		let itemStringValue: string;
 
-				if (choice === undefined) {
-					return {
-						value: item,
-						text: itemStringValue,
-						foreground: 'var(--foreground-normal)',
-						background: 'var(--background-normal)',
-					};
-				} else {
-					return {
-						value: item,
-						text: choice.text || itemStringValue,
-						foreground: choice.foreground || 'var(--foreground-normal)',
-						background: choice.background || 'var(--background-normal)',
-					};
-				}
-			});
-		});
+		if (typeof item === 'object') {
+			itemStringValue = JSON.stringify(item);
+		} else {
+			if (props.format) {
+				itemStringValue = formatTitle(item);
+			} else {
+				itemStringValue = item;
+			}
+		}
 
-		return { items };
-	},
+		if (choice === undefined) {
+			return {
+				value: item,
+				text: itemStringValue,
+				foreground: 'var(--foreground-normal)',
+				background: 'var(--background-normal)',
+			};
+		} else {
+			return {
+				value: item,
+				text: choice.text || itemStringValue,
+				foreground: choice.foreground || 'var(--foreground-normal)',
+				background: choice.background || 'var(--background-normal)',
+			};
+		}
+	});
 });
 </script>