feat(editor): Filter component + implement in If node (#7490)

New Filter component + implementation in If node (v2)

<img width="3283" alt="image"
src="https://github.com/n8n-io/n8n/assets/8850410/35c379ef-4b62-4d06-82e7-673d4edcd652">

---------

Co-authored-by: Giulio Andreini <andreini@netseven.it>
Co-authored-by: Michael Kret <michael.k@radency.com>

packages/design-system/src/components/N8nInputLabel/InputLabel.vue

@@ -190,21 +190,20 @@ export default defineComponent({
 	opacity: 1;
 }
 
-.heading {
-	display: flex;
-}
-
 .overflow {
 	overflow-x: hidden;
 	overflow-y: clip;
 }
 
-.small {
-	margin-bottom: var(--spacing-5xs);
-}
+.heading {
+	display: flex;
 
-.medium {
-	margin-bottom: var(--spacing-2xs);
+	&.small {
+		margin-bottom: var(--spacing-5xs);
+	}
+	&.medium {
+		margin-bottom: var(--spacing-2xs);
+	}
 }
 
 .underline {

packages/design-system/src/components/ResizeObserver/ResizeObserver.vue

@@ -38,40 +38,49 @@ export default defineComponent({
 			return;
 		}
 
-		const unsortedBreakpoints = [...(this.breakpoints || [])] as Array<{
-			width: number;
-			bp: string;
-		}>;
+		const root = this.$refs.root as HTMLDivElement;
 
-		const bps = unsortedBreakpoints.sort((a, b) => a.width - b.width);
+		if (!root) {
+			return;
+		}
+
+		this.bp = this.getBreakpointFromWidth(root.offsetWidth);
 
 		const observer = new ResizeObserver((entries) => {
 			entries.forEach((entry) => {
 				// We wrap it in requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
 				requestAnimationFrame(() => {
-					const newWidth = entry.contentRect.width;
-					let newBP = 'default';
-					for (let i = 0; i < bps.length; i++) {
-						if (newWidth < bps[i].width) {
-							newBP = bps[i].bp;
-							break;
-						}
-					}
-					this.bp = newBP;
+					this.bp = this.getBreakpointFromWidth(entry.contentRect.width);
 				});
 			});
 		});
 
 		this.observer = observer;
-
-		if (this.$refs.root) {
-			observer.observe(this.$refs.root as HTMLDivElement);
-		}
+		observer.observe(root);
 	},
 	beforeUnmount() {
 		if (this.enabled) {
 			this.observer?.disconnect();
 		}
 	},
+	methods: {
+		getBreakpointFromWidth(width: number): string {
+			let newBP = 'default';
+			const unsortedBreakpoints = [...(this.breakpoints || [])] as Array<{
+				width: number;
+				bp: string;
+			}>;
+
+			const bps = unsortedBreakpoints.sort((a, b) => a.width - b.width);
+			for (let i = 0; i < bps.length; i++) {
+				if (width < bps[i].width) {
+					newBP = bps[i].bp;
+					break;
+				}
+			}
+
+			return newBP;
+		},
+	},
 });
 </script>

packages/design-system/src/components/index.ts

@@ -50,4 +50,5 @@ export { default as N8nUserStack } from './N8nUserStack';
 export { default as N8nUserInfo } from './N8nUserInfo';
 export { default as N8nUserSelect } from './N8nUserSelect';
 export { default as N8nUsersList } from './N8nUsersList';
+export { default as N8nResizeObserver } from './ResizeObserver';
 export { N8nKeyboardShortcut } from './N8nKeyboardShortcut';

packages/design-system/src/css/common/var.scss

@@ -399,8 +399,16 @@ $input-placeholder-color: var(--input-placeholder-color, var(--color-text-light)
 $input-focus-border: var(--input-focus-border-color, var(--color-secondary));
 $input-border-color: var(--input-border-color, var(--border-color-base));
 $input-border-style: var(--input-border-style, var(--border-style-base));
-$input-border-width: var(--border-width-base);
+$input-border-width: var(--input-border-width, var(--border-width-base));
 $input-border: $input-border-color $input-border-style $input-border-width;
+$input-border-right-color: var(
+	--input-border-right-color,
+	var(--input-border-color, var(--border-color-base))
+);
+$input-border-bottom-color: var(
+	--input-border-bottom-color,
+	var(--input-border-color, var(--border-color-base))
+);
 
 $input-font-size: var(--input-font-size, var(--font-size-s));
 /// color||Color|0
@@ -411,6 +419,23 @@ $input-width: 140px;
 $input-height: 40px;
 /// borderRadius||Border|2
 $input-border-radius: var(--input-border-radius, var(--border-radius-base));
+$input-border-top-left-radius: var(
+	--input-border-top-left-radius,
+	var(--input-border-radius, var(--border-radius-base))
+);
+$input-border-top-right-radius: var(
+	--input-border-top-right-radius,
+	var(--input-border-radius, var(--border-radius-base)),
+);
+$input-border-bottom-left-radius: var(
+	--input-border-bottom-left-radius,
+	var(--input-border-radius, var(--border-radius-base)),
+);
+$input-border-bottom-right-radius: var(
+	--input-border-bottom-right-radius,
+	var(--input-border-radius, var(--border-radius-base)),
+);
+$input-border-radius: var(--input-border-radius, var(--border-radius-base));
 $input-border-color-hover: $border-color-hover;
 /// color||Color|0
 $input-background-color: var(--input-background-color, var(--color-foreground-xlight));

packages/design-system/src/css/input.scss

@@ -20,6 +20,11 @@
 		background-color: var.$input-background-color;
 		background-image: none;
 		border-radius: var.$input-border-radius;
+		border-top-left-radius: var.$input-border-top-left-radius;
+		border-top-right-radius: var.$input-border-top-right-radius;
+		border-bottom-left-radius: var.$input-border-bottom-left-radius;
+		border-bottom-right-radius: var.$input-border-bottom-right-radius;
+
 		transition: var.$border-transition-base;
 
 		&,
@@ -108,7 +113,13 @@
 		background-color: var.$input-background-color;
 		background-image: none;
 		border-radius: var.$input-border-radius;
+		border-top-left-radius: var.$input-border-top-left-radius;
+		border-top-right-radius: var.$input-border-top-right-radius;
+		border-bottom-left-radius: var.$input-border-bottom-left-radius;
+		border-bottom-right-radius: var.$input-border-bottom-right-radius;
 		border: var.$input-border;
+		border-right-color: var.$input-border-right-color;
+		border-bottom-color: var.$input-border-bottom-color;
 		box-sizing: border-box;
 		color: var.$input-font-color;
 		display: inline-block;
@@ -145,6 +156,7 @@
 	}
 
 	@include mixins.e(suffix-inner) {
+		display: inline-flex;
 		pointer-events: all;
 	}
 
@@ -286,8 +298,14 @@
 		vertical-align: middle;
 		display: table-cell;
 		position: relative;
-		border: var(--border-base);
+		border: var.$input-border;
 		border-radius: var.$input-border-radius;
+		border-top-left-radius: var.$input-border-top-left-radius;
+		border-top-right-radius: var.$input-border-top-right-radius;
+		border-bottom-left-radius: var.$input-border-bottom-left-radius;
+		border-bottom-right-radius: var.$input-border-bottom-right-radius;
+		border-right-color: var.$input-border-right-color;
+		border-bottom-color: var.$input-border-bottom-color;
 		padding: 0 10px;
 		width: 1px;
 		white-space: nowrap;

packages/design-system/src/css/select.scss

@@ -80,6 +80,14 @@
 		&.is-focus .el-input__inner {
 			border-color: var.$select-input-focus-border-color;
 		}
+
+		&__prefix {
+			left: var(--spacing-2xs);
+		}
+
+		&--prefix .el-input__inner {
+			padding-left: 26px;
+		}
 	}
 
 	> .el-input {

packages/design-system/src/plugin.ts

@@ -51,6 +51,7 @@ import {
 	N8nUserInfo,
 	N8nUserSelect,
 	N8nUsersList,
+	N8nResizeObserver,
 	N8nKeyboardShortcut,
 	N8nUserStack,
 } from './components';
@@ -111,6 +112,7 @@ export const N8nPlugin: Plugin<N8nPluginOptions> = {
 		app.component('n8n-user-info', N8nUserInfo);
 		app.component('n8n-users-list', N8nUsersList);
 		app.component('n8n-user-select', N8nUserSelect);
+		app.component('n8n-resize-observer', N8nResizeObserver);
 		app.component('n8n-keyboard-shortcut', N8nKeyboardShortcut);
 	},
 };