refactor: Fix type issues for parameter input components (#9449)

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

@@ -1,6 +1,8 @@
 <template>
 	<span :class="$style.container" data-test-id="node-title-container" @click="onEdit">
-		<span :class="$style.iconWrapper"><NodeIcon :node-type="nodeType" :size="18" /></span>
+		<span :class="$style.iconWrapper">
+			<NodeIcon :node-type="nodeType" :size="18" />
+		</span>
 		<n8n-popover placement="right" width="200" :visible="editName" :disabled="!editable">
 			<div
 				:class="$style.editContainer"
@@ -39,56 +41,47 @@
 	</span>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import NodeIcon from '@/components/NodeIcon.vue';
-import { defineComponent } from 'vue';
+import type { INodeTypeDescription } from 'n8n-workflow';
+import { computed, nextTick, ref } from 'vue';
 
-export default defineComponent({
-	name: 'NodeTitle',
-	components: {
-		NodeIcon,
-	},
-	props: {
-		modelValue: {
-			type: String,
-			default: '',
-		},
-		nodeType: {},
-		readOnly: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			editName: false,
-			newName: '',
-		};
-	},
-	computed: {
-		editable(): boolean {
-			return !this.readOnly && window === window.parent;
-		},
-	},
-	methods: {
-		async onEdit() {
-			this.newName = this.modelValue;
-			this.editName = true;
-			await this.$nextTick();
-			const inputRef = this.$refs.input as HTMLInputElement | undefined;
-			if (inputRef) {
-				inputRef.focus();
-			}
-		},
-		onRename() {
-			if (this.newName.trim() !== '') {
-				this.$emit('update:modelValue', this.newName.trim());
-			}
+type Props = {
+	modelValue: string;
+	nodeType?: INodeTypeDescription;
+	readOnly?: boolean;
+};
 
-			this.editName = false;
-		},
-	},
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: '',
+	nodeType: undefined,
+	readOnly: false,
 });
+const emit = defineEmits<{
+	(event: 'update:model-value', value: string): void;
+}>();
+const editName = ref(false);
+const newName = ref('');
+const input = ref<HTMLInputElement>();
+
+const editable = computed(() => !props.readOnly && window === window.parent);
+
+async function onEdit() {
+	newName.value = props.modelValue;
+	editName.value = true;
+	await nextTick();
+	if (input.value) {
+		input.value.focus();
+	}
+}
+
+function onRename() {
+	if (newName.value.trim() !== '') {
+		emit('update:model-value', newName.value.trim());
+	}
+
+	editName.value = false;
+}
 </script>
 
 <style lang="scss" module>