refactor(editor): Continue porting components over to composition API (no-changelog) (#8893)

packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue

@@ -35,99 +35,75 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { computed } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { defineComponent, type PropType } from 'vue';
 import type { Placement } from 'element-plus';
 import N8nTooltip from '../N8nTooltip';
 
-export default defineComponent({
-	name: 'N8nNodeIcon',
-	components: {
-		N8nTooltip,
-		FontAwesomeIcon,
-	},
-	props: {
-		type: {
-			type: String,
-			required: true,
-			validator: (value: string): boolean => ['file', 'icon', 'unknown'].includes(value),
-		},
-		src: {
-			type: String,
-		},
-		name: {
-			type: String,
-		},
-		nodeTypeName: {
-			type: String,
-		},
-		size: {
-			type: Number,
-		},
-		disabled: {
-			type: Boolean,
-		},
-		circle: {
-			type: Boolean,
-		},
-		color: {
-			type: String,
-		},
-		showTooltip: {
-			type: Boolean,
-		},
-		tooltipPosition: {
-			type: String as PropType<Placement>,
-			default: 'top',
-		},
-		badge: { type: Object as PropType<{ src: string; type: string }> },
-	},
-	computed: {
-		iconStyleData(): Record<string, string> {
-			if (!this.size) {
-				return {
-					color: this.color || '',
-				};
-			}
+interface NodeIconProps {
+	type: 'file' | 'icon' | 'unknown';
+	src?: string;
+	name?: string;
+	nodeTypeName?: string;
+	size?: number;
+	disabled?: boolean;
+	circle?: boolean;
+	color?: string;
+	showTooltip?: boolean;
+	tooltipPosition?: Placement;
+	badge?: { src: string; type: string };
+}
 
-			return {
-				color: this.color || '',
-				width: `${this.size}px`,
-				height: `${this.size}px`,
-				'font-size': `${this.size}px`,
-				'line-height': `${this.size}px`,
-			};
-		},
-		badgeSize(): number {
-			switch (this.size) {
-				case 40:
-					return 18;
-				case 24:
-					return 10;
-				case 18:
-				default:
-					return 8;
-			}
-		},
-		badgeStyleData(): Record<string, string> {
-			const size = this.badgeSize;
-			return {
-				padding: `${Math.floor(size / 4)}px`,
-				right: `-${Math.floor(size / 2)}px`,
-				bottom: `-${Math.floor(size / 2)}px`,
-			};
-		},
-		fontStyleData(): Record<string, string> {
-			if (!this.size) {
-				return {};
-			}
+const props = withDefaults(defineProps<NodeIconProps>(), {
+	tooltipPosition: 'top',
+});
 
-			return {
-				'max-width': `${this.size}px`,
-			};
-		},
-	},
+const iconStyleData = computed((): Record<string, string> => {
+	if (!props.size) {
+		return {
+			color: props.color || '',
+		};
+	}
+
+	return {
+		color: props.color || '',
+		width: `${props.size}px`,
+		height: `${props.size}px`,
+		'font-size': `${props.size}px`,
+		'line-height': `${props.size}px`,
+	};
+});
+
+const badgeSize = computed((): number => {
+	switch (props.size) {
+		case 40:
+			return 18;
+		case 24:
+			return 10;
+		case 18:
+		default:
+			return 8;
+	}
+});
+
+const fontStyleData = computed((): Record<string, string> => {
+	if (!props.size) {
+		return {};
+	}
+
+	return {
+		'max-width': `${props.size}px`,
+	};
+});
+
+const badgeStyleData = computed((): Record<string, string> => {
+	const size = badgeSize.value;
+	return {
+		padding: `${Math.floor(size / 4)}px`,
+		right: `-${Math.floor(size / 2)}px`,
+		bottom: `-${Math.floor(size / 2)}px`,
+	};
 });
 </script>