update: Add names to components

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

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"