feat: Replace Vue.extend with defineComponent in design system (no-changelog) (#5918)

* refactor: replace new Vue() with custom event bus (no-changelog)

* fix: export types from design system main

* fix: update component types

* fix: update form inputs event bus

* refactor: replace global Vue references in design-system

* refactor: update prop types

* feat: improve types

* fix: further type improvements

* fix: further types improvements

* fix: further type improvements

* test: fix test snapshots

* test: fix snapshot

* chore: fix linting issues

* test: fix personalization modal snapshot

packages/design-system/src/components/N8nMenu/Menu.vue

@@ -54,11 +54,10 @@
 <script lang="ts">
 import { Menu as ElMenu } from 'element-ui';
 import N8nMenuItem from '../N8nMenuItem';
+import { defineComponent, PropType } from 'vue';
+import type { IMenuItem, RouteObject } from '../../types';
 
-import Vue, { PropType } from 'vue';
-import { IMenuItem } from '../../types';
-
-export default Vue.extend({
+export default defineComponent({
 	name: 'n8n-menu',
 	components: {
 		ElMenu,
@@ -93,6 +92,7 @@ export default Vue.extend({
 		},
 		items: {
 			type: Array as PropType<IMenuItem[]>,
+			default: (): IMenuItem[] => [],
 		},
 		value: {
 			type: String,
@@ -104,9 +104,9 @@ export default Vue.extend({
 			const found = this.items.find((item) => {
 				return (
 					(Array.isArray(item.activateOnRouteNames) &&
-						item.activateOnRouteNames.includes(this.$route.name || '')) ||
+						item.activateOnRouteNames.includes(this.currentRoute.name || '')) ||
 					(Array.isArray(item.activateOnRoutePaths) &&
-						item.activateOnRoutePaths.includes(this.$route.path))
+						item.activateOnRoutePaths.includes(this.currentRoute.path))
 				);
 			});
 			this.activeTab = found ? found.id : '';
@@ -127,6 +127,14 @@ export default Vue.extend({
 				(item: IMenuItem) => item.position === 'bottom' && item.available !== false,
 			);
 		},
+		currentRoute(): RouteObject {
+			return (
+				(this as typeof this & { $route: RouteObject }).$route || {
+					name: '',
+					path: '',
+				}
+			);
+		},
 	},
 	methods: {
 		onSelect(event: MouseEvent, option: string): void {