refactor(editor): Migrate components to composition API

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

@@ -1,65 +1,59 @@
-<script lang="ts">
+<script lang="ts" setup>
 import { useUIStore } from '@/stores/ui.store';
 import type { PublicInstalledPackage } from 'n8n-workflow';
-import { mapStores } from 'pinia';
-import { defineComponent } from 'vue';
 import { NPM_PACKAGE_DOCS_BASE_URL, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '@/constants';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
 
-export default defineComponent({
-	name: 'CommunityPackageCard',
-	props: {
-		communityPackage: {
-			type: Object as () => PublicInstalledPackage | null,
-			required: false,
-			default: null,
-		},
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			packageActions: [
-				{
-					label: this.$locale.baseText('settings.communityNodes.viewDocsAction.label'),
-					value: COMMUNITY_PACKAGE_MANAGE_ACTIONS.VIEW_DOCS,
-					type: 'external-link',
-				},
-				{
-					label: this.$locale.baseText('settings.communityNodes.uninstallAction.label'),
-					value: COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL,
-				},
-			],
-		};
-	},
-	computed: {
-		...mapStores(useUIStore),
+interface Props {
+	communityPackage?: PublicInstalledPackage | null;
+	loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	communityPackage: null,
+	loading: false,
+});
+
+const { openCommunityPackageUpdateConfirmModal, openCommunityPackageUninstallConfirmModal } =
+	useUIStore();
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const packageActions = [
+	{
+		label: i18n.baseText('settings.communityNodes.viewDocsAction.label'),
+		value: COMMUNITY_PACKAGE_MANAGE_ACTIONS.VIEW_DOCS,
+		type: 'external-link',
 	},
-	methods: {
-		async onAction(value: string) {
-			if (!this.communityPackage) return;
-			switch (value) {
-				case COMMUNITY_PACKAGE_MANAGE_ACTIONS.VIEW_DOCS:
-					this.$telemetry.track('user clicked to browse the cnr package documentation', {
-						package_name: this.communityPackage.packageName,
-						package_version: this.communityPackage.installedVersion,
-					});
-					window.open(`${NPM_PACKAGE_DOCS_BASE_URL}${this.communityPackage.packageName}`, '_blank');
-					break;
-				case COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL:
-					this.uiStore.openCommunityPackageUninstallConfirmModal(this.communityPackage.packageName);
-					break;
-				default:
-					break;
-			}
-		},
-		onUpdateClick() {
-			if (!this.communityPackage) return;
-			this.uiStore.openCommunityPackageUpdateConfirmModal(this.communityPackage.packageName);
-		},
+	{
+		label: i18n.baseText('settings.communityNodes.uninstallAction.label'),
+		value: COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL,
 	},
-});
+];
+
+async function onAction(value: string) {
+	if (!props.communityPackage) return;
+	switch (value) {
+		case COMMUNITY_PACKAGE_MANAGE_ACTIONS.VIEW_DOCS:
+			telemetry.track('user clicked to browse the cnr package documentation', {
+				package_name: props.communityPackage.packageName,
+				package_version: props.communityPackage.installedVersion,
+			});
+			window.open(`${NPM_PACKAGE_DOCS_BASE_URL}${props.communityPackage.packageName}`, '_blank');
+			break;
+		case COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL:
+			openCommunityPackageUninstallConfirmModal(props.communityPackage.packageName);
+			break;
+		default:
+			break;
+	}
+}
+
+function onUpdateClick() {
+	if (!props.communityPackage) return;
+	openCommunityPackageUpdateConfirmModal(props.communityPackage.packageName);
+}
 </script>
 
 <template>

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

@@ -51,6 +51,7 @@ export default defineComponent({
 		},
 		pushRef: {
 			type: String,
+			required: true,
 		},
 		readOnly: {
 			type: Boolean,