update: Add names to components

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

src/components/ConnectionLine/ConnectionLine.vue

@@ -72,6 +72,11 @@ const dAttr = computed(() => {
   return path
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'ConnectionLine',
+}
+</script>
 <template>
   <g class="vue-flow__connection">
     <slot

src/components/Edges/BezierEdge.vue

@@ -61,6 +61,7 @@ const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
+  name: 'BezierEdge',
   inheritAttrs: false,
 }
 </script>

src/components/Edges/EdgeAnchor.vue

@@ -39,6 +39,11 @@ const cy = computed(() => {
   else return val
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'EdgeAnchor',
+}
+</script>
 <template>
   <circle class="vue-flow__edgeupdater" :cx="cx" :cy="cy" :r="props.radius" stroke="transparent" fill="transparent" />
 </template>

src/components/Edges/EdgeText.vue

@@ -30,6 +30,11 @@ const { width, height, x, y } = useElementBounding(edgeRef)
 const transform = computed(() => `translate(${props.x - width.value / 2 || 0} ${props.y - height.value / 2 || 0})`)
 const bgPadding = computed(() => [props.labelBgPadding[0], props.labelBgPadding[1]])
 </script>
+<script lang="ts">
+export default {
+  name: 'EdgeText',
+}
+</script>
 <template>
   <g :transform="transform" class="vue-flow__edge-textwrapper">
     <rect

src/components/Edges/EdgeWrapper.vue

@@ -130,6 +130,11 @@ const edgePos = computed(() =>
 )
 const elementsSelectable = computed(() => store.elementsSelectable)
 </script>
+<script lang="ts">
+export default {
+  name: 'Edge',
+}
+</script>
 <template>
   <g
     v-show="!props.edge.isHidden && isVisible(edgePos)"

src/components/Edges/SmoothStepEdge.vue

@@ -64,6 +64,7 @@ const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
+  name: 'SmoothStepEdge',
   inheritAttrs: false,
 }
 </script>

src/components/Edges/StepEdge.vue

@@ -43,6 +43,11 @@ const props = withDefaults(defineProps<StepEdgeProps>(), {
 })
 const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
+<script lang="ts">
+export default {
+  name: 'StepEdge',
+}
+</script>
 <template>
   <SmoothStepEdge v-bind="{ ...props, ...attrs }" :border-radius="0">
     <slot />

src/components/Edges/StraightEdge.vue

@@ -66,6 +66,7 @@ const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
+  name: 'StraightEdge',
   inheritAttrs: false,
 }
 </script>

src/components/Handle/Handle.vue

@@ -25,6 +25,11 @@ const handler = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>
   handler(event, props.id, nodeId, props.type === 'target', props.isValidConnection ?? (() => true))
 </script>
+<script lang="ts">
+export default {
+  name: 'Handle',
+}
+</script>
 <template>
   <div
     :data-handleid="props.id"

src/components/Loading/LoadingIndicator.vue

@@ -11,6 +11,11 @@ const props = withDefaults(defineProps<LoadingIndicatorProps>(), {
   label: 'Almost ready...',
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'VueFlowLoading',
+}
+</script>
 <template>
   <div class="vue-flow__loading-indicator" :class="props.class" :style="props.style">
     <slot name="label"> {{ props.label }} </slot>

src/components/Nodes/DefaultNode.vue

@@ -18,6 +18,7 @@ const props = withDefaults(defineProps<DefaultNodeProps>(), {
 </script>
 <script lang="ts">
 export default {
+  name: 'DefaultNode',
   inheritAttrs: false,
 }
 </script>

src/components/Nodes/InputNode.vue

@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<InputNodeProps>(), {
 </script>
 <script lang="ts">
 export default {
+  name: 'InputNode',
   inheritAttrs: false,
 }
 </script>

src/components/Nodes/NodeWrapper.vue

@@ -141,6 +141,11 @@ onMounted(() => {
   })
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'Node',
+}
+</script>
 <template>
   <DraggableCore
     cancel=".nodrag"

src/components/Nodes/OutputNode.vue

@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<OutputNodeProps>(), {
 </script>
 <script lang="ts">
 export default {
+  name: 'OutputNode',
   inheritAttrs: false,
 }
 </script>

src/components/NodesSelection/NodesSelection.vue

@@ -58,6 +58,11 @@ const onContextMenu = (event: MouseEvent) => {
 
 const transform = computed(() => store.transform)
 </script>
+<script lang="ts">
+export default {
+  name: 'NodesSelection',
+}
+</script>
 <template>
   <div
     class="vue-flow__nodesselection"

src/components/UserSelection/SelectionRect.vue

@@ -8,6 +8,11 @@ interface SelectionRectProps {
 
 const props = defineProps<SelectionRectProps>()
 </script>
+<script lang="ts">
+export default {
+  name: 'SelectionRect',
+}
+</script>
 <template>
   <div
     class="vue-flow__selection"

src/components/UserSelection/UserSelection.vue

@@ -38,6 +38,11 @@ useEventListener(el, 'click', onMouseUp)
 useEventListener(el, 'mouseup', onMouseUp)
 useEventListener(el, 'mouseleave', onMouseLeave)
 </script>
+<script lang="ts">
+export default {
+  name: 'UserSelection',
+}
+</script>
 <template>
   <div ref="user-selection" class="vue-flow__selectionpane">
     <SelectionRect