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/editor-ui/src/components/Badge.vue

@@ -1,19 +1,19 @@
-<template functional>
+<template>
   <fragment>
     <el-tag
-      v-if="props.type === 'danger'"
+      v-if="type === 'danger'"
       type="danger"
       size="small"
       :class="$style['danger']"
     >
-      {{ props.text }}
+      {{ text }}
     </el-tag>
     <el-tag
-      v-else-if="props.type === 'warning'"
+      v-else-if="type === 'warning'"
       size="small"
       :class="$style['warning']"
     >
-      {{ props.text }}
+      {{ text }}
     </el-tag>
   </fragment>
 </template>
@@ -48,4 +48,4 @@ export default {
   color: $--badge-warning-color;
   border: none;
 }
-</style>
+</style>

packages/editor-ui/src/components/NodeCreator/CreatorItem.vue

@@ -1,28 +1,28 @@
-<template functional>
+<template>
 	<div
 		:class="{
 			container: true,
-			clickable: props.clickable,
-			active: props.active,
+			clickable: clickable,
+			active: active,
 		}"
-		@click="listeners.click"
+		v-on="$listeners"
 	>
 		<CategoryItem
-			v-if="props.item.type === 'category'"
-			:item="props.item"
+			v-if="item.type === 'category'"
+			:item="item"
 		/>
 
 		<SubcategoryItem
-			v-else-if="props.item.type === 'subcategory'"
-			:item="props.item"
+			v-else-if="item.type === 'subcategory'"
+			:item="item"
 		/>
 
 		<NodeItem
-			v-else-if="props.item.type === 'node'"
-			:nodeType="props.item.properties.nodeType"
-			:bordered="!props.lastNode"
-			@dragstart="listeners.dragstart"
-			@dragend="listeners.dragend"
+			v-else-if="item.type === 'node'"
+			:nodeType="item.properties.nodeType"
+			:bordered="!lastNode"
+			@dragstart="$listeners.dragstart"
+			@dragend="$listeners.dragend"
 		/>
 	</div>
 </template>
@@ -33,13 +33,15 @@ import NodeItem from './NodeItem.vue';
 import CategoryItem from './CategoryItem.vue';
 import SubcategoryItem from './SubcategoryItem.vue';
 
-Vue.component('CategoryItem', CategoryItem);
-Vue.component('SubcategoryItem', SubcategoryItem);
-Vue.component('NodeItem', NodeItem);
-
-export default {
+export default Vue.extend({
+	name: 'CreatorItem',
+	components: {
+		CategoryItem,
+		SubcategoryItem,
+		NodeItem,
+	},
 	props: ['item', 'active', 'clickable', 'lastNode'],
-};
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -8,7 +8,7 @@
 				@keydown.stop
 				@keydown.esc="editName = false"
 			>
-				<n8n-text :class="$style.renameText" :bold="true" color="text-base" tag="div"
+				<n8n-text :bold="true" color="text-base" tag="div"
 					>{{ $locale.baseText('ndv.title.renameNode') }}</n8n-text>
 				<n8n-input ref="input" size="small" v-model="newName" />
 				<div :class="$style.editButtons">

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

@@ -845,9 +845,9 @@ export default mixins(
 				// Set focus on field
 				setTimeout(() => {
 					// @ts-ignore
-					if (this.$refs.inputField.$el) {
+					if (this.$refs.inputField) {
 						// @ts-ignore
-						(this.$refs.inputField.$el.querySelector(this.getStringInputType === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).focus();
+						this.$refs.inputField.focus();
 					}
 				});
 

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

@@ -77,7 +77,8 @@ export default mixins(showMessage).extend({
 		};
 	},
 	mounted() {
-		const select = this.$refs.select as (Vue | undefined);
+		// @ts-ignore
+		const select = (this.$refs.select && this.$refs.select.$refs && this.$refs.select.$refs.innerSelect) as (Vue | undefined);
 		if (select) {
 			const input = select.$refs.input as (Element | undefined);
 			if (input) {
@@ -200,10 +201,10 @@ export default mixins(showMessage).extend({
 			}
 		},
 		focusOnInput() {
-			const select = this.$refs.select as Vue;
-			const input = select && select.$refs.input as HTMLElement;
-			if (input && input.focus) {
-				input.focus();
+			const select = (this.$refs.select) as (Vue | undefined);
+			if (select) {
+				// @ts-ignore
+				select.focusOnInput();
 				this.focused = true;
 			}
 		},

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

@@ -1,4 +1,4 @@
-<template functional>
+<template>
 	<span :class="$style.trigger">
 		<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 				<title>Trigger node</title>

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

@@ -1,4 +1,4 @@
-<template functional>
+<template>
 	<n8n-tooltip  content=" " placement="top" >
 		<div slot="content"><slot /></div>
 		<font-awesome-icon :class="$style['icon']" icon="exclamation-triangle"></font-awesome-icon>

packages/editor-ui/src/plugins/components.ts

@@ -86,10 +86,10 @@ import { ElMessageBoxOptions } from "element-ui/types/message-box";
 Vue.use(Fragment.Plugin);
 
 // n8n design system
-Vue.use(N8nInfoAccordion);
-Vue.use(N8nActionBox);
-Vue.use(N8nActionToggle);
-Vue.use(N8nAvatar);
+Vue.component('n8n-info-accordion', N8nInfoAccordion);
+Vue.component('n8n-action-box', N8nActionBox);
+Vue.component('n8n-action-toggle', N8nActionToggle);
+Vue.component('n8n-avatar', N8nAvatar);
 Vue.component('n8n-button', N8nButton);
 Vue.component('el-button', N8nElButton);
 Vue.component('n8n-callout', N8nCallout);
@@ -97,31 +97,31 @@ Vue.component('n8n-card', N8nCard);
 Vue.component('n8n-form-box', N8nFormBox);
 Vue.component('n8n-form-inputs', N8nFormInputs);
 Vue.component('n8n-icon', N8nIcon);
-Vue.use(N8nIconButton);
-Vue.use(N8nInfoTip);
-Vue.use(N8nInput);
-Vue.use(N8nInputLabel);
-Vue.use(N8nInputNumber);
+Vue.component('n8n-icon-button', N8nIconButton);
+Vue.component('n8n-info-tip', N8nInfoTip);
+Vue.component('n8n-input', N8nInput);
+Vue.component('n8n-input-label', N8nInputLabel);
+Vue.component('n8n-input-number', N8nInputNumber);
 Vue.component('n8n-loading', N8nLoading);
-Vue.use(N8nHeading);
-Vue.use(N8nLink);
+Vue.component('n8n-heading', N8nHeading);
+Vue.component('n8n-link', N8nLink);
 Vue.component('n8n-markdown', N8nMarkdown);
-Vue.use(N8nMenu);
-Vue.use(N8nMenuItem);
+Vue.component('n8n-menu', N8nMenu);
+Vue.component('n8n-menu-item', N8nMenuItem);
 Vue.component('n8n-node-icon', N8nNodeIcon);
 Vue.component('n8n-notice', N8nNotice);
-Vue.use(N8nOption);
-Vue.use(N8nPulse);
-Vue.use(N8nSelect);
-Vue.use(N8nSpinner);
+Vue.component('n8n-option', N8nOption);
+Vue.component('n8n-pulse', N8nPulse);
+Vue.component('n8n-select', N8nSelect);
+Vue.component('n8n-spinner', N8nSpinner);
 Vue.component('n8n-sticky', N8nSticky);
-Vue.use(N8nRadioButtons);
+Vue.component('n8n-radio-buttons', N8nRadioButtons);
 Vue.component('n8n-square-button', N8nSquareButton);
-Vue.use(N8nTags);
+Vue.component('n8n-tags', N8nTags);
 Vue.component('n8n-tabs', N8nTabs);
-Vue.use(N8nTag);
+Vue.component('n8n-tag', N8nTag);
 Vue.component('n8n-text', N8nText);
-Vue.use(N8nTooltip);
+Vue.component('n8n-tooltip', N8nTooltip);
 
 // element io
 Vue.use(Dialog);