update: Add names to components

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

package.json

@@ -37,6 +37,7 @@
     "d3": "^7.1.1",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
+    "defu": "^5.0.0",
     "microdiff": "^1.2.0",
     "pinia": "^2.0.0-rc.10"
   },

src/additional-components/Background/Background.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { SVGAttributes } from 'vue'
 import { BackgroundVariant } from '../../types'
 import { useStore } from '../../composables'
 
-export interface BackgroundProps extends SVGAttributes {
+interface BackgroundProps {
   variant?: BackgroundVariant
   gap?: number
   color?: string
@@ -47,6 +46,11 @@ const d = computed(
     }`,
 )
 </script>
+<script lang="ts">
+export default {
+  name: 'Background',
+}
+</script>
 <template>
   <svg class="vue-flow__background" style="width: 100%; height: 100%">
     <pattern

src/additional-components/Controls/ControlButton.vue

@@ -1,12 +1,10 @@
-<script lang="ts" setup>
-import { ButtonHTMLAttributes } from 'vue'
-
-export interface ControlButtonProps extends ButtonHTMLAttributes {}
-
-const props: any = defineProps<ControlButtonProps>()
+<script lang="ts">
+export default {
+  name: 'ControlButton',
+}
 </script>
 <template>
-  <button class="vue-flow__controls-button" v-bind="props">
+  <button class="vue-flow__controls-button">
     <slot></slot>
   </button>
 </template>

src/additional-components/Controls/Controls.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { HTMLAttributes } from 'vue'
 import { FitViewParams } from '../../types'
 import { useZoomPanHelper, useStore } from '../../composables'
 import ControlButton from './ControlButton.vue'
@@ -9,7 +8,7 @@ import Fitview from '~/assets/icons/fitview.svg'
 import Lock from '~/assets/icons/lock.svg'
 import Unlock from '~/assets/icons/unlock.svg'
 
-export interface ControlProps extends HTMLAttributes {
+interface ControlProps {
   showZoom?: boolean
   showFitView?: boolean
   showInteractive?: boolean
@@ -55,6 +54,11 @@ const onInteractiveChangeHandler = () => {
   emit('interaction-change', !isInteractive.value)
 }
 </script>
+<script lang="ts">
+export default {
+  name: 'Controls',
+}
+</script>
 <template>
   <div class="vue-flow__controls">
     <template v-if="props.showZoom">

src/additional-components/MiniMap/MiniMap.vue

@@ -1,14 +1,10 @@
 <script lang="ts" setup>
-import { HTMLAttributes } from 'vue'
-import { Node } from '../../types'
+import { ShapeRendering, StringFunc } from '../../types'
 import { useStore, useWindow } from '../../composables'
+import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import MiniMapNode from './MiniMapNode.vue'
-import { getBoundsofRects, getRectOfNodes } from '~/utils'
 
-type StringFunc = (node: Node) => string
-type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
-
-export interface MiniMapProps extends HTMLAttributes {
+interface MiniMapProps {
   nodeColor?: string | StringFunc
   nodeStrokeColor?: string | StringFunc
   nodeClassName?: string | StringFunc
@@ -82,6 +78,11 @@ const d = computed(() => {
   else return ''
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'MiniMap',
+}
+</script>
 <template>
   <svg
     :width="elementWidth"

src/additional-components/MiniMap/MiniMapNode.vue

@@ -12,6 +12,7 @@ interface MiniMapNodeProps {
   strokeColor?: string
   strokeWidth?: number
 }
+
 const props = withDefaults(defineProps<MiniMapNodeProps>(), {
   shapeRendering: 'geometricPrecision',
 })
@@ -20,6 +21,11 @@ const attrs = useAttrs()
 const styles = (attrs.style ?? {}) as CSSProperties
 const fill = computed(() => props.color || (styles.background as string) || styles.backgroundColor)
 </script>
+<script lang="ts">
+export default {
+  name: 'MiniMapNode',
+}
+</script>
 <template>
   <rect
     class="vue-flow__minimap-node"

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

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -29,6 +29,11 @@ const connectionLineVisible = computed(
 const dimensions = computed(() => store.dimensions)
 const transform = computed(() => `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`)
 </script>
+<script lang="ts">
+export default {
+  name: 'Edges',
+}
+</script>
 <template>
   <svg :width="dimensions.width" :height="dimensions.height" class="vue-flow__edges">
     <MarkerDefinitions :color="props.arrowHeadColor" />

src/container/EdgeRenderer/Marker.vue

@@ -5,6 +5,11 @@ interface MarkerProps {
 
 const props = defineProps<MarkerProps>()
 </script>
+<script lang="ts">
+export default {
+  name: 'Marker',
+}
+</script>
 <template>
   <marker
     :id="props.id"

src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -9,6 +9,11 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
   color: '',
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'MarkerDefinitions',
+}
+</script>
 <template>
   <defs>
     <Marker id="vue-flow__arrowclosed">

src/container/NodeRenderer/NodeRenderer.vue

@@ -18,6 +18,11 @@ const store = useStore()
 const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
 const snapGrid = computed(() => (props.snapToGrid || store.snapToGrid ? props.snapGrid ?? store.snapGrid : undefined))
 </script>
+<script lang="ts">
+export default {
+  name: 'Nodes',
+}
+</script>
 <template>
   <div class="vue-flow__nodes" :style="{ transform }">
     <Node

src/container/SelectionPane/SelectionPane.vue

@@ -59,6 +59,7 @@ const nodesSelectionActive = computed(() => store.nodesSelectionActive)
 </script>
 <script lang="ts">
 export default {
+  name: 'SelectionPane',
   inheritAttrs: false,
 }
 </script>

src/container/VueFlow/VueFlow.vue

@@ -9,7 +9,6 @@ import {
   KeyCode,
   TranslateExtent,
   NodeExtent,
-  FlowOptions,
   NodeTypes,
   EdgeTypes,
   FlowStore,
@@ -25,7 +24,7 @@ import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
 import { createHooks, initFlow, useZoomPanHelper } from '../../composables'
 import { onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
 
-export interface FlowProps extends Partial<FlowOptions> {
+interface FlowProps {
   id?: string
   store?: FlowStore
   modelValue?: Elements

src/container/ZoomPane/ZoomPane.vue

@@ -203,6 +203,11 @@ watch(
   { flush: 'pre' },
 )
 </script>
+<script lang="ts">
+export default {
+  name: 'ZoomPane',
+}
+</script>
 <template>
   <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
     <slot

yarn.lock

@@ -1974,6 +1974,11 @@ define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
+defu@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/defu/-/defu-5.0.0.tgz#5768f0d402a555bfc4c267246b20f82ce8b5a10b"
+  integrity sha512-VHg73EDeRXlu7oYWRmmrNp/nl7QkdXUxkQQKig0Zk8daNmm84AbGoC8Be6/VVLJEKxn12hR0UBmz8O+xQiAPKQ==
+
 del@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/del/-/del-6.0.0.tgz#0b40d0332cea743f1614f818be4feb717714c952"