feat(editor): Add drag and drop data mapping (#3708)

* commit package lock

* refactor param options out

* use action toggle

* handle click on toggle

* update color toggle

* fix toggle

* show options

* update expression color

* update pointer

* fix readonly

* fix readonly

* fix expression spacing

* refactor input label

* show icon for headers

* center icon

* fix multi params

* add credential options

* increase spacing

* update expression view

* update transition

* update el padding

* rename side to options

* fix label overflow

* fix bug with unnessary lines

* add overlay

* fix bug affecting other pages

* clean up spacing

* rename

* update icon size

* fix toggle in users

* clean up func

* clean up css

* use css var

* fix overlay bug

* clean up input

* clean up input

* clean up unnessary css

* revert

* update quotes

* rename method

* remove console errors

* refactor data table

* add drag button

* make hoverable cells

* add drag hint

* disabel for output panel

* add drag

* disable for readonly

* Add dragging

* add draggable pill

* add mapping targets

* remove font color

* Transferable

* fix linting issue

* teleport component

* fix line

* disable for readonly

* fix position of data pill

* fix position of data pill

* ignore import

* add droppable state

* remove draggable key

* update bg color

* add value drop

* use direct input

* remove transition

* add animation

* shorten name

* handle empty value

* fix switch bug

* fix up animation

* add notification

* add hint

* add tooltip

* show draggable hintm

* fix multiple expre

* fix hoverable

* keep options on focus

* increase timeouts

* fix bug in set node

* add transition on hover out

* fix tooltip onboarding bug

* only update expression if changes

* add open delay

* fix header highlight issue

* update text

* dont show tooltip always

* update docs url

* update ee border

* add sticky behav

* hide error highlight if dropping

* switch out grip icon

* increase timeout

* add delay

* show hint on execprev

* add telemetry event

* add telemetry event

* add telemetry event

* fire event on hint showing

* fix telemetry event

* add path

* fix drag hint issue

* decrease bottom margin

* update mapping keys

* remove file

* hide overflow

* sort params

* add space

* prevent scrolling

* remove dropshadow

* force cursor

* address some comments

* add thead tbody

* add size opt

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

@@ -0,0 +1,80 @@
+<template>
+	<div ref="target">
+		<slot :droppable="droppable" :activeDrop="activeDrop"></slot>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		type: {
+			type: String,
+		},
+		disabled: {
+			type: Boolean,
+		},
+		sticky: {
+			type: Boolean,
+		},
+		stickyOffset: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			hovering: false,
+		};
+	},
+	mounted() {
+		window.addEventListener('mousemove', this.onMouseMove);
+		window.addEventListener('mouseup', this.onMouseUp);
+	},
+	destroyed() {
+		window.removeEventListener('mousemove', this.onMouseMove);
+		window.removeEventListener('mouseup', this.onMouseUp);
+	},
+	computed: {
+		isDragging(): boolean {
+			return this.$store.getters['ui/isDraggableDragging'];
+		},
+		draggableType(): string {
+			return this.$store.getters['ui/draggableType'];
+		},
+		droppable(): boolean {
+			return !this.disabled && this.isDragging && this.draggableType === this.type;
+		},
+		activeDrop(): boolean {
+			return this.droppable && this.hovering;
+		},
+	},
+	methods: {
+		onMouseMove(e: MouseEvent) {
+			const target = this.$refs.target as HTMLElement;
+
+			if (target) {
+				const dim = target.getBoundingClientRect();
+
+				this.hovering = e.clientX >= dim.left && e.clientX <= dim.right && e.clientY >= dim.top && e.clientY <= dim.bottom;
+
+				if (this.sticky && this.hovering) {
+					this.$store.commit('ui/setDraggableStickyPos', [dim.left + this.stickyOffset, dim.top + this.stickyOffset]);
+				}
+			}
+		},
+		onMouseUp(e: MouseEvent) {
+			if (this.activeDrop) {
+				const data = this.$store.getters['ui/draggableData'];
+				this.$emit('drop', data);
+			}
+		},
+	},
+	watch: {
+		activeDrop(active) {
+			this.$store.commit('ui/setDraggableCanDrop', active);
+		},
+	},
+});
+</script>