feat(editor): Implement new app layout (#10548)

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

@@ -6,6 +6,7 @@ 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({
 	name: 'Modal',
@@ -13,15 +14,19 @@ export default defineComponent({
 		...ElDialog.props,
 		name: {
 			type: String as PropType<ModalKey>,
+			required: true,
 		},
 		title: {
 			type: String,
+			default: '',
 		},
 		subtitle: {
 			type: String,
+			default: '',
 		},
 		eventBus: {
 			type: Object as PropType<EventBus>,
+			default: null,
 		},
 		showClose: {
 			type: Boolean,
@@ -35,31 +40,39 @@ export default defineComponent({
 		},
 		beforeClose: {
 			type: Function,
+			default: null,
 		},
 		customClass: {
 			type: String,
+			default: '',
 		},
 		center: {
 			type: Boolean,
+			default: true,
 		},
 		width: {
 			type: String,
 			default: '50%',
 		},
 		minWidth: {
-			type: String,
+			type: [String, null] as PropType<string | null>,
+			default: null,
 		},
 		maxWidth: {
-			type: String,
+			type: [String, null] as PropType<string | null>,
+			default: null,
 		},
 		height: {
-			type: String,
+			type: [String, null] as PropType<string | null>,
+			default: null,
 		},
 		minHeight: {
-			type: String,
+			type: [String, null] as PropType<string | null>,
+			default: null,
 		},
 		maxHeight: {
-			type: String,
+			type: [String, null] as PropType<string | null>,
+			default: null,
 		},
 		scrollable: {
 			type: Boolean,
@@ -79,23 +92,10 @@ export default defineComponent({
 		},
 		appendToBody: {
 			type: Boolean,
-			default: true,
+			default: false,
 		},
 	},
-	mounted() {
-		window.addEventListener('keydown', this.onWindowKeydown);
-
-		this.eventBus?.on('close', this.closeDialog);
-
-		const activeElement = document.activeElement as HTMLElement;
-		if (activeElement) {
-			activeElement.blur();
-		}
-	},
-	beforeUnmount() {
-		this.eventBus?.off('close', this.closeDialog);
-		window.removeEventListener('keydown', this.onWindowKeydown);
-	},
+	emits: { enter: null },
 	computed: {
 		...mapStores(useUIStore),
 		styles() {
@@ -117,6 +117,23 @@ export default defineComponent({
 			}
 			return styles;
 		},
+		appModalsId() {
+			return `#${APP_MODALS_ELEMENT_ID}`;
+		},
+	},
+	mounted() {
+		window.addEventListener('keydown', this.onWindowKeydown);
+
+		this.eventBus?.on('close', this.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) {
@@ -175,9 +192,11 @@ export default defineComponent({
 		:close-on-click-modal="closeOnClickModal"
 		:close-on-press-escape="closeOnPressEscape"
 		:style="styles"
+		:append-to="appendToBody ? undefined : appModalsId"
 		:append-to-body="appendToBody"
 		:data-test-id="`${name}-modal`"
 		:modal-class="center ? $style.center : ''"
+		z-index="2000"
 	>
 		<template v-if="$slots.header" #header>
 			<slot v-if="!loading" name="header" />