refactor(editor): Migrate components to composition API (#11497)

packages/editor-ui/src/components/TemplateCard.vue

@@ -1,63 +1,45 @@
-<script lang="ts">
-import { type PropType, defineComponent } from 'vue';
-import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
+<script lang="ts" setup>
 import { abbreviateNumber } from '@/utils/typesUtils';
 import NodeList from './NodeList.vue';
 import TimeAgo from '@/components/TimeAgo.vue';
 import type { ITemplatesWorkflow } from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
+import type { BaseTextKey } from '@/plugins/i18n';
 
-export default defineComponent({
-	name: 'TemplateCard',
-	components: {
-		TimeAgo,
-		NodeList,
+const i18n = useI18n();
+
+const nodesToBeShown = 5;
+
+withDefaults(
+	defineProps<{
+		workflow?: ITemplatesWorkflow;
+		lastItem?: boolean;
+		firstItem?: boolean;
+		useWorkflowButton?: boolean;
+		loading?: boolean;
+		simpleView?: boolean;
+	}>(),
+	{
+		lastItem: false,
+		firstItem: false,
+		useWorkflowButton: false,
+		loading: false,
+		simpleView: false,
 	},
-	props: {
-		workflow: {
-			type: Object as PropType<ITemplatesWorkflow>,
-		},
-		lastItem: {
-			type: Boolean,
-			default: false,
-		},
-		firstItem: {
-			type: Boolean,
-			default: false,
-		},
-		useWorkflowButton: {
-			type: Boolean,
-		},
-		loading: {
-			type: Boolean,
-		},
-		simpleView: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			nodesToBeShown: 5,
-		};
-	},
-	methods: {
-		filterTemplateNodes,
-		abbreviateNumber,
-		countNodesToBeSliced(nodes: []): number {
-			if (nodes.length > this.nodesToBeShown) {
-				return this.nodesToBeShown - 1;
-			} else {
-				return this.nodesToBeShown;
-			}
-		},
-		onUseWorkflowClick(e: MouseEvent) {
-			this.$emit('useWorkflow', e);
-		},
-		onCardClick(e: MouseEvent) {
-			this.$emit('click', e);
-		},
-	},
-});
+);
+
+const emit = defineEmits<{
+	useWorkflow: [e: MouseEvent];
+	click: [e: MouseEvent];
+}>();
+
+function onUseWorkflowClick(e: MouseEvent) {
+	emit('useWorkflow', e);
+}
+
+function onCardClick(e: MouseEvent) {
+	emit('click', e);
+}
 </script>
 
 <template>
@@ -88,8 +70,12 @@ export default defineComponent({
 					<TimeAgo :date="workflow.createdAt" />
 				</n8n-text>
 				<div v-if="workflow.user" :class="$style.line" v-text="'|'" />
-				<n8n-text v-if="workflow.user" size="small" color="text-light"
-					>By {{ workflow.user.username }}</n8n-text
+				<n8n-text v-if="workflow.user" size="small" color="text-light">
+					{{
+						i18n.baseText('template.byAuthor' as BaseTextKey, {
+							interpolate: { name: workflow.user.username },
+						})
+					}}</n8n-text
 				>
 			</div>
 		</div>