refactor(core): Migrate Modal.vue to composition API (no-changelog) (#10792)

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

@@ -138,7 +138,7 @@ onMounted(() => {
 		:center="true"
 		width="460px"
 		:event-bus="modalBus"
-		@enter="onSubmit"
+		@enter="onSubmitClick"
 	>
 		<template #content>
 			<n8n-form-inputs

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

@@ -1,184 +1,131 @@
-<script lang="ts">
+<script setup lang="ts">
 import { ElDialog } from 'element-plus';
-import { defineComponent } from 'vue';
+import { computed, onMounted, onBeforeUnmount } from 'vue';
-import type { PropType } from 'vue';
-import { mapStores } from 'pinia';
 import type { EventBus } from 'n8n-design-system';
 import { useUIStore } from '@/stores/ui.store';
 import type { ModalKey } from '@/Interface';
 import { APP_MODALS_ELEMENT_ID } from '@/constants';
 
-export default defineComponent({
+const props = withDefaults(
-	name: 'Modal',
+	defineProps<{
-	props: {
+		name: ModalKey;
-		...ElDialog.props,
+		title?: string;
-		name: {
+		subtitle?: string;
-			type: String as PropType<ModalKey>,
+		eventBus?: EventBus;
-			required: true,
+		showClose?: boolean;
+		loading?: boolean;
+		classic?: boolean;
+		// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+		beforeClose?: () => boolean | Promise<boolean | void> | void;
+		customClass?: string;
+		center?: boolean;
+		width?: string;
+		minWidth?: string;
+		maxWidth?: string;
+		height?: string;
+		minHeight?: string;
+		maxHeight?: string;
+		scrollable?: boolean;
+		centerTitle?: boolean;
+		closeOnClickModal?: boolean;
+		closeOnPressEscape?: boolean;
+		appendToBody?: boolean;
+	}>(),
+	{
+		title: '',
+		subtitle: '',
+		showClose: true,
+		loading: false,
+		classic: false,
+		customClass: '',
+		center: true,
+		width: '50%',
+		scrollable: false,
+		centerTitle: false,
+		closeOnClickModal: true,
+		closeOnPressEscape: true,
+		appendToBody: false,
 	},
-		title: {
+);
-			type: String,
+
-			default: '',
+const emit = defineEmits<{ enter: [] }>();
-		},
+
-		subtitle: {
+const styles = computed(() => {
-			type: String,
-			default: '',
-		},
-		eventBus: {
-			type: Object as PropType<EventBus>,
-			default: null,
-		},
-		showClose: {
-			type: Boolean,
-			default: true,
-		},
-		loading: {
-			type: Boolean,
-		},
-		classic: {
-			type: Boolean,
-		},
-		beforeClose: {
-			type: Function,
-			default: null,
-		},
-		customClass: {
-			type: String,
-			default: '',
-		},
-		center: {
-			type: Boolean,
-			default: true,
-		},
-		width: {
-			type: String,
-			default: '50%',
-		},
-		minWidth: {
-			type: [String, null] as PropType<string | null>,
-			default: null,
-		},
-		maxWidth: {
-			type: [String, null] as PropType<string | null>,
-			default: null,
-		},
-		height: {
-			type: [String, null] as PropType<string | null>,
-			default: null,
-		},
-		minHeight: {
-			type: [String, null] as PropType<string | null>,
-			default: null,
-		},
-		maxHeight: {
-			type: [String, null] as PropType<string | null>,
-			default: null,
-		},
-		scrollable: {
-			type: Boolean,
-			default: false,
-		},
-		centerTitle: {
-			type: Boolean,
-			default: false,
-		},
-		closeOnClickModal: {
-			type: Boolean,
-			default: true,
-		},
-		closeOnPressEscape: {
-			type: Boolean,
-			default: true,
-		},
-		appendToBody: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: { enter: null },
-	computed: {
-		...mapStores(useUIStore),
-		styles() {
 	const styles: { [prop: string]: string } = {};
-			if (this.height) {
+	if (props.height) {
-				styles['--dialog-height'] = this.height;
+		styles['--dialog-height'] = props.height;
 	}
-			if (this.minHeight) {
+	if (props.minHeight) {
-				styles['--dialog-min-height'] = this.minHeight;
+		styles['--dialog-min-height'] = props.minHeight;
 	}
-			if (this.maxHeight) {
+	if (props.maxHeight) {
-				styles['--dialog-max-height'] = this.maxHeight;
+		styles['--dialog-max-height'] = props.maxHeight;
 	}
-			if (this.maxWidth) {
+	if (props.maxWidth) {
-				styles['--dialog-max-width'] = this.maxWidth;
+		styles['--dialog-max-width'] = props.maxWidth;
 	}
-			if (this.minWidth) {
+	if (props.minWidth) {
-				styles['--dialog-min-width'] = this.minWidth;
+		styles['--dialog-min-width'] = props.minWidth;
 	}
 	return styles;
-		},
+});
-		appModalsId() {
-			return `#${APP_MODALS_ELEMENT_ID}`;
-		},
-	},
-	mounted() {
-		window.addEventListener('keydown', this.onWindowKeydown);
 
-		this.eventBus?.on('close', this.closeDialog);
+const appModalsId = `#${APP_MODALS_ELEMENT_ID}`;
 
+onMounted(() => {
+	window.addEventListener('keydown', onWindowKeydown);
+	props.eventBus?.on('close', closeDialog);
 	const activeElement = document.activeElement as HTMLElement;
 	if (activeElement) {
 		activeElement.blur();
 	}
-	},
+});
-	beforeUnmount() {
-		this.eventBus?.off('close', this.closeDialog);
-		window.removeEventListener('keydown', this.onWindowKeydown);
-	},
-	methods: {
-		onWindowKeydown(event: KeyboardEvent) {
-			if (!this.uiStore.isModalActiveById[this.name]) {
-				return;
-			}
 
-			if (event && event.keyCode === 13) {
+onBeforeUnmount(() => {
-				this.handleEnter();
+	props.eventBus?.off('close', closeDialog);
-			}
+	window.removeEventListener('keydown', onWindowKeydown);
-		},
+});
-		handleEnter() {
+
-			if (this.uiStore.isModalActiveById[this.name]) {
+const uiStore = useUIStore();
-				this.$emit('enter');
+
-			}
+function handleEnter() {
-		},
+	if (!uiStore.isModalActiveById[props.name]) return;
-		async onCloseDialog() {
+	emit('enter');
-			await this.closeDialog();
+}
-		},
+
-		async closeDialog(returnData?: unknown) {
+function onWindowKeydown(event: KeyboardEvent) {
-			if (this.beforeClose) {
+	if (event?.keyCode === 13) handleEnter();
-				const shouldClose = await this.beforeClose();
+}
+
+async function closeDialog(returnData?: unknown) {
+	if (props.beforeClose) {
+		const shouldClose = await props.beforeClose();
 		if (shouldClose === false) {
 			// must be strictly false to stop modal from closing
 			return;
 		}
 	}
-			this.uiStore.closeModal(this.name);
+	uiStore.closeModal(props.name);
-			this.eventBus?.emit('closed', returnData);
+	props.eventBus?.emit('closed', returnData);
-		},
+}
-		getCustomClass() {
-			let classes = this.customClass || '';
 
-			if (this.classic) {
+async function onCloseDialog() {
+	await closeDialog();
+}
+
+function getCustomClass() {
+	let classes = props.customClass || '';
+
+	if (props.classic) {
 		classes = `${classes} classic`;
 	}
 
 	return classes;
-		},
+}
-	},
-});
 </script>
 
 <template>
-	<el-dialog
+	<ElDialog
 		:model-value="uiStore.modalsById[name].open"
 		:before-close="onCloseDialog"
 		:class="{
@@ -196,7 +143,7 @@ export default defineComponent({
 		:append-to-body="appendToBody"
 		:data-test-id="`${name}-modal`"
 		:modal-class="center ? $style.center : ''"
-		z-index="2000"
+		:z-index="2000"
 	>
 		<template v-if="$slots.header" #header>
 			<slot v-if="!loading" name="header" />
@@ -225,7 +172,7 @@ export default defineComponent({
 		<div v-if="!loading && $slots.footer" :class="$style.footer">
 			<slot name="footer" :close="closeDialog" />
 		</div>
-	</el-dialog>
+	</ElDialog>
 </template>
 
 <style lang="scss">

packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue

@@ -5,7 +5,7 @@ import { useLogStreamingStore } from '@/stores/logStreaming.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import ParameterInputList from '@/components/ParameterInputList.vue';
-import type { IMenuItem, INodeUi, IUpdateInformation } from '@/Interface';
+import type { IMenuItem, INodeUi, IUpdateInformation, ModalKey } from '@/Interface';
 import type {
 	IDataObject,
 	NodeParameterValue,
@@ -54,7 +54,10 @@ export default defineComponent({
 		EventSelection,
 	},
 	props: {
-		modalName: String,
+		modalName: {
+			type: String as PropType<ModalKey>,
+			required: true,
+		},
 		destination: {
 			type: Object,
 			default: () => deepCopy(defaultMessageEventBusDestinationOptions),