refactor(design-system): replace functional components (#3802)

* update creator item

* update warning tooltip

* update badge and trigger icon

* update action box

* update avatar component

* update badge

* update heading component

* update icon component

* update link component

* update menu

* update route component

* fix avatar bug

* fix avatar bug

* update input component

* update select

* update input

* update tags component

* update spinner

* update square button

* update tag component

* update text component

* add danger color

* add vue.extend

* add human readable names

* add human readable name

* revert button changes

* update name

* revert name

* update classes

* delete unused component

* redo name change

* rename

* rename back

* rename back

* update snapshots

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

@@ -1,20 +1,21 @@
-<template functional>
-	<component
-		:is="$options.components.ElMenu"
-		:defaultActive="props.defaultActive"
-		:collapse="props.collapse"
-		:router="props.router"
-		:class="$style[props.type + (props.light ? '-light' : '')]"
-		@select="(e) => listeners.select && listeners.select(e)"
+<template>
+	<el-menu
+		:defaultActive="defaultActive"
+		:collapse="collapse"
+		:router="router"
+		:class="['n8n-menu', $style[type + (light ? '-light' : '')]]"
+		v-on="$listeners"
 	>
 		<slot></slot>
-	</component>
+	</el-menu>
 </template>
 
 <script lang="ts">
 import ElMenu from 'element-ui/lib/menu';
 
-export default {
+import Vue from 'vue';
+
+export default Vue.extend({
 	name: 'n8n-menu',
 	props: {
 		type: {
@@ -38,7 +39,7 @@ export default {
 	components: {
 		ElMenu,
 	},
-};
+});
 </script>
 
 <style lang="scss" module>