refactor(editor): Port more components over to composition API (no-changelog) (#8794)

packages/design-system/src/components/N8nLink/Link.vue

@@ -8,43 +8,27 @@
 	</N8nRoute>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import N8nText from '../N8nText';
-import N8nRoute from '../N8nRoute';
+import N8nRoute, { type RouteTo } from '../N8nRoute';
+import type { TextSize } from '@/types/text';
 
-export default defineComponent({
-	name: 'N8nLink',
-	components: {
-		N8nText,
-		N8nRoute,
-	},
-	props: {
-		size: {
-			type: String,
-		},
-		to: {
-			type: String || Object,
-		},
-		newWindow: {
-			type: Boolean || undefined,
-			default: undefined,
-		},
-		bold: {
-			type: Boolean,
-			default: false,
-		},
-		underline: {
-			type: Boolean,
-			default: false,
-		},
-		theme: {
-			type: String,
-			default: 'primary',
-			validator: (value: string): boolean =>
-				['primary', 'danger', 'text', 'secondary'].includes(value),
-		},
-	},
+const THEME = ['primary', 'danger', 'text', 'secondary'] as const;
+
+interface LinkProps {
+	size?: TextSize;
+	to?: RouteTo;
+	newWindow?: boolean;
+	bold?: boolean;
+	underline?: boolean;
+	theme?: (typeof THEME)[number];
+}
+
+defineOptions({ name: 'N8nLink' });
+withDefaults(defineProps<LinkProps>(), {
+	bold: false,
+	underline: false,
+	theme: 'primary',
 });
 </script>