fix: disable inherting attrs on nodes/edges to avoid warnings

* disable context warnings for non-dev environments

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/Edges/BezierEdge.vue

@@ -58,6 +58,11 @@ const path = computed(() => {
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
   <EdgeText

src/components/Edges/SmoothStepEdge.vue

@@ -61,6 +61,11 @@ const path = computed(() => {
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
   <EdgeText

src/components/Edges/StraightEdge.vue

@@ -63,6 +63,11 @@ const path = computed(() => {
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <path :style="props.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
   <EdgeText

src/components/Nodes/DefaultNode.vue

@@ -16,6 +16,11 @@ const props = withDefaults(defineProps<DefaultNodeProps>(), {
   sourcePosition: Position.Bottom,
 })
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <Handle type="target" :position="props.targetPosition" :is-connectable="props.connectable" />
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />

src/components/Nodes/InputNode.vue

@@ -14,6 +14,11 @@ const props = withDefaults(defineProps<InputNodeProps>(), {
   sourcePosition: Position.Bottom,
 })
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
   <span v-else v-html="props.data?.label"></span>

src/components/Nodes/Node.vue

@@ -129,7 +129,6 @@ onMounted(() => {
   })
 })
 </script>
-
 <template>
   <DraggableCore
     cancel=".nodrag"

src/components/Nodes/OutputNode.vue

@@ -14,6 +14,11 @@ const props = withDefaults(defineProps<OutputNodeProps>(), {
   targetPosition: Position.Top,
 })
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
   <span v-else v-html="props.data?.label"></span>

src/components/UserSelection/UserSelection.vue

@@ -30,6 +30,8 @@ const onMouseLeave = () => {
   store.unsetNodesSelection()
 }
 
+const userSelectionRect = computed(() => store.userSelectionRect)
+
 useEventListener(el, 'mousedown', onMouseDown)
 useEventListener(el, 'mousemove', onMouseMove)
 useEventListener(el, 'click', onMouseUp)
@@ -39,11 +41,11 @@ useEventListener(el, 'mouseleave', onMouseLeave)
 <template>
   <div ref="user-selection" class="vue-flow__selectionpane">
     <SelectionRect
-      v-if="store.userSelectionRect.draw"
-      :width="store.userSelectionRect.width"
-      :height="store.userSelectionRect.height"
-      :x="store.userSelectionRect.x"
-      :y="store.userSelectionRect.y"
+      v-if="userSelectionRect.draw"
+      :width="userSelectionRect.width"
+      :height="userSelectionRect.height"
+      :x="userSelectionRect.x"
+      :y="userSelectionRect.y"
     />
   </div>
 </template>

src/components/UserSelection/utils.ts

@@ -1,4 +1,4 @@
-import { XYPosition } from '../../types'
+import { XYPosition } from '~/types'
 
 export function getMousePosition(event: MouseEvent): XYPosition | void {
   const flowNode = (event.target as Element).closest('.vue-flow')