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

@@ -1,16 +1,17 @@
 <template>
 	<n8n-input-label
+		:class="$style.wrapper"
 		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
 		:tooltipText="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
 		:showTooltip="focused"
 		:showOptions="menuExpanded || focused || forceShowExpression"
+		:optionsPosition="optionsPosition"
 		:bold="false"
 		:size="label.size"
 		color="text-dark"
 	>
-		<template #options>
+		<template v-if="displayOptions && optionsPosition === 'top'" #options>
 			<parameter-options
-				v-if="displayOptions"
 				:parameter="parameter"
 				:value="value"
 				:isReadOnly="isReadOnly"
@@ -48,10 +49,12 @@
 						:modelValue="value"
 						:path="path"
 						:isReadOnly="isReadOnly"
+						:isSingleLine="isSingleLine"
 						:droppable="droppable"
 						:activeDrop="activeDrop"
 						:forceShowExpression="forceShowExpression"
 						:hint="hint"
+						:hideHint="hideHint"
 						:hide-issues="hideIssues"
 						:label="label"
 						:event-bus="eventBus"
@@ -65,6 +68,23 @@
 				</n8n-tooltip>
 			</template>
 		</draggable-target>
+		<div
+			:class="{
+				[$style.options]: true,
+				[$style.visible]: menuExpanded || focused || forceShowExpression,
+			}"
+		>
+			<parameter-options
+				v-if="optionsPosition === 'bottom'"
+				:parameter="parameter"
+				:value="value"
+				:isReadOnly="isReadOnly"
+				:showOptions="displayOptions"
+				:showExpressionSelector="showExpressionSelector"
+				@update:modelValue="optionSelected"
+				@menu-expanded="onMenuExpanded"
+			/>
+		</div>
 	</n8n-input-label>
 </template>
 
@@ -83,10 +103,10 @@ import { hasExpressionMapping, hasOnlyListMode, isValueExpression } from '@/util
 import { isResourceLocatorValue } from '@/utils/typeGuards';
 import ParameterInputWrapper from '@/components/ParameterInputWrapper.vue';
 import type {
-	INodeParameters,
 	INodeProperties,
 	INodePropertyMode,
 	IParameterLabel,
+	NodeParameterValueType,
 } from 'n8n-workflow';
 import type { BaseTextKey } from '@/plugins/i18n';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -127,10 +147,22 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		optionsPosition: {
+			type: String as PropType<'bottom' | 'top'>,
+			default: 'top',
+		},
+		hideHint: {
+			type: Boolean,
+			default: false,
+		},
 		isReadOnly: {
 			type: Boolean,
 			default: false,
 		},
+		isSingleLine: {
+			type: Boolean,
+			default: false,
+		},
 		hideLabel: {
 			type: Boolean,
 			default: false,
@@ -146,7 +178,7 @@ export default defineComponent({
 			type: String,
 		},
 		value: {
-			type: [Number, String, Boolean, Array, Object] as PropType<INodeParameters>,
+			type: [Number, String, Boolean, Array, Object] as PropType<NodeParameterValueType>,
 		},
 		label: {
 			type: Object as PropType<IParameterLabel>,
@@ -336,3 +368,26 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style module>
+.wrapper {
+	position: relative;
+
+	&:hover {
+		.options {
+			opacity: 1;
+		}
+	}
+}
+.options {
+	position: absolute;
+	bottom: -22px;
+	right: 0;
+	opacity: 0;
+	transition: opacity 100ms ease-in;
+
+	&.visible {
+		opacity: 1;
+	}
+}
+</style>