refactor(editor): Migrate InlineNameEdit & InlineTextEdit components to Vue 3 syntax (no-changelog) (#9755)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

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

@@ -5,7 +5,6 @@
 		</span>
 		<div
 			v-else
-			v-on-click-outside="disableNameEdit"
 			:class="[$style.headline, $style['headline-editable']]"
 			@keydown.stop
 			@click="enableNameEdit"
@@ -31,66 +30,53 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { nextTick, ref } from 'vue';
 import { useToast } from '@/composables/useToast';
+import { onClickOutside } from '@vueuse/core';
 
-export default defineComponent({
-	name: 'InlineNameEdit',
-	props: {
-		modelValue: {
-			type: String,
-		},
-		subtitle: {
-			type: String,
-		},
-		type: {
-			type: String,
-		},
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup() {
-		return {
-			...useToast(),
-		};
-	},
-	data() {
-		return {
-			isNameEdit: false,
-		};
-	},
-	methods: {
-		onNameEdit(value: string) {
-			this.$emit('update:modelValue', value);
-		},
-		enableNameEdit() {
-			this.isNameEdit = true;
+interface Props {
+	modelValue: string;
+	subtitle: string;
+	type: string;
+	readonly: boolean;
+}
+const props = defineProps<Props>();
 
-			setTimeout(() => {
-				const inputRef = this.$refs.nameInput as HTMLInputElement | undefined;
-				if (inputRef) {
-					inputRef.focus();
-				}
-			}, 0);
-		},
-		disableNameEdit() {
-			if (!this.modelValue) {
-				this.$emit('update:modelValue', `Untitled ${this.type}`);
+const emit = defineEmits<{
+	(event: 'update:modelValue', value: string): void;
+}>();
 
-				this.showToast({
-					title: 'Error',
-					message: `${this.type} name cannot be empty`,
-					type: 'warning',
-				});
-			}
+const isNameEdit = ref(false);
+const nameInput = ref<HTMLInputElement | null>(null);
+const { showToast } = useToast();
 
-			this.isNameEdit = false;
-		},
-	},
-});
+const onNameEdit = (value: string) => {
+	emit('update:modelValue', value);
+};
+
+const enableNameEdit = () => {
+	isNameEdit.value = true;
+	void nextTick(() => {
+		if (nameInput.value) {
+			nameInput.value.focus();
+		}
+	});
+};
+
+const disableNameEdit = () => {
+	if (!props.modelValue) {
+		emit('update:modelValue', `Untitled ${props.type}`);
+		showToast({
+			title: 'Error',
+			message: `${props.type} name cannot be empty`,
+			type: 'warning',
+		});
+	}
+	isNameEdit.value = false;
+};
+
+onClickOutside(nameInput, disableNameEdit);
 </script>
 
 <style module lang="scss">