refactor(edges): use plugin to import prop interface

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

src/components/Edges/BezierEdge.vue

@@ -1,37 +1,14 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ArrowHeadType, EdgeProps, Position } from '../../types'
+import { Position } from '../../types/flow'
+import type { EdgeProps } from '../../types/edge'
 import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
 
-interface BezierEdgeProps extends EdgeProps {
+const props = withDefaults(defineProps<EdgeProps>(), {
-  id: string
-  source: string
-  target: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  selected?: boolean
-  animated?: boolean
-  sourcePosition: Position
-  targetPosition: Position
-  label?: string
-  labelStyle?: CSSProperties
-  labelShowBg?: boolean
-  labelBgStyle?: CSSProperties
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  arrowHeadType?: ArrowHeadType
-  markerEndId?: string
-  sourceHandleId?: string
-  targetHandleId?: string
-}
-
-const props = withDefaults(defineProps<BezierEdgeProps>(), {
   selected: false,
-  sourcePosition: Position.Bottom,
+  sourcePosition: 'bottom' as Position,
-  targetPosition: Position.Top,
+  targetPosition: 'top' as Position,
   labelStyle: () => ({}),
   labelShowBg: true,
   labelBgStyle: () => ({}),
@@ -62,16 +39,7 @@ export default {
 </script>
 <template>
   <path class="vue-flow__edge-path" :style="attrs.style" :d="path" :marker-end="markerEnd" />
-  <slot
+  <slot :x="centered[0]" :y="centered[1]" v-bind="props">
-    :x="centered[0]"
-    :y="centered[1]"
-    :label="props.label"
-    :label-style="props.labelStyle"
-    :label-show-bg="props.labelShowBg"
-    :label-bg-style="props.labelBgStyle"
-    :label-bg-padding="props.labelBgPadding"
-    :label-bg-border-radius="props.labelBgBorderRadius"
-  >
     <EdgeText
       v-if="props.label"
       :x="centered[0]"

src/components/Edges/SmoothStepEdge.vue

@@ -1,38 +1,13 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import { Position } from '../../types'
-import { ArrowHeadType, EdgeProps, EdgeTextProps, Position } from '../../types'
+import type { SmoothStepEdgeProps } from '../../types/edge'
-import EdgeText from './EdgeText.vue'
 import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
-
+import EdgeText from './EdgeText.vue'
-interface SmoothStepEdgeProps extends EdgeProps {
-  id: string
-  source: string
-  target: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  selected?: boolean
-  animated?: boolean
-  sourcePosition: Position
-  targetPosition: Position
-  label?: string
-  labelStyle?: CSSProperties
-  labelShowBg?: boolean
-  labelBgStyle?: CSSProperties
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  arrowHeadType?: ArrowHeadType
-  markerEndId?: string
-  borderRadius?: number
-  sourceHandleId?: string
-  targetHandleId?: string
-}
 
 const props = withDefaults(defineProps<SmoothStepEdgeProps>(), {
   selected: false,
-  sourcePosition: Position.Bottom,
+  sourcePosition: 'bottom' as Position,
-  targetPosition: Position.Top,
+  targetPosition: 'top' as Position,
   label: '',
   labelStyle: () => ({}),
   labelShowBg: true,
@@ -54,8 +29,6 @@ const path = computed(() => {
 })
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
-
-const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -64,17 +37,8 @@ export default {
 }
 </script>
 <template>
-  <path class="vue-flow__edge-path" :style="attrs.style" :d="path" :marker-end="markerEnd" />
+  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
-  <slot
+  <slot :x="centered[0]" :y="centered[1]" v-bind="props">
-    :x="centered[0]"
-    :y="centered[1]"
-    :label="props.label"
-    :label-style="props.labelStyle"
-    :label-show-bg="props.labelShowBg"
-    :label-bg-style="props.labelBgStyle"
-    :label-bg-padding="props.labelBgPadding"
-    :label-bg-border-radius="props.labelBgBorderRadius"
-  >
     <EdgeText
       v-if="props.label"
       :x="centered[0]"

src/components/Edges/StepEdge.vue

@@ -1,42 +1,17 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import { Position } from '../../types'
-import { ArrowHeadType, EdgeProps, Position } from '../../types'
+import type { EdgeProps } from '../../types/edge'
 import SmoothStepEdge from './SmoothStepEdge.vue'
 
-interface StepEdgeProps extends EdgeProps {
+const props = withDefaults(defineProps<EdgeProps>(), {
-  id: string
-  source: string
-  target: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  selected?: boolean
-  animated?: boolean
-  sourcePosition: Position
-  targetPosition: Position
-  label?: string
-  labelStyle?: CSSProperties
-  labelShowBg?: boolean
-  labelBgStyle?: CSSProperties
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  arrowHeadType?: ArrowHeadType
-  markerEndId?: string
-  sourceHandleId?: string
-  targetHandleId?: string
-}
-
-const props = withDefaults(defineProps<StepEdgeProps>(), {
   selected: false,
-  sourcePosition: Position.Bottom,
+  sourcePosition: 'bottom' as Position,
-  targetPosition: Position.Top,
+  targetPosition: 'top' as Position,
   label: '',
   labelStyle: () => ({}),
   labelShowBg: true,
   labelBgStyle: () => ({}),
 })
-const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -44,7 +19,7 @@ export default {
 }
 </script>
 <template>
-  <SmoothStepEdge v-bind="{ ...props, ...attrs }" :border-radius="0">
+  <SmoothStepEdge v-bind="props" :border-radius="0">
     <slot />
   </SmoothStepEdge>
 </template>

src/components/Edges/StraightEdge.vue

@@ -1,37 +1,13 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import { Position } from '../../types'
-import { ArrowHeadType, EdgeProps, Position } from '../../types'
+import type { EdgeProps } from '../../types/edge'
 import EdgeText from './EdgeText.vue'
 import { getMarkerEnd, getBezierPath } from './utils'
 
-interface StraightEdgeProps extends EdgeProps {
+const props = withDefaults(defineProps<EdgeProps>(), {
-  id: string
-  source: string
-  target: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  selected?: boolean
-  animated?: boolean
-  sourcePosition: Position
-  targetPosition: Position
-  label?: string
-  labelStyle?: CSSProperties
-  labelShowBg?: boolean
-  labelBgStyle?: CSSProperties
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  arrowHeadType?: ArrowHeadType
-  markerEndId?: string
-  sourceHandleId?: string
-  targetHandleId?: string
-}
-
-const props = withDefaults(defineProps<StraightEdgeProps>(), {
   selected: false,
-  sourcePosition: Position.Bottom,
+  sourcePosition: 'bottom' as Position,
-  targetPosition: Position.Top,
+  targetPosition: 'top' as Position,
   label: '',
   labelStyle: () => ({}),
   labelShowBg: true,
@@ -56,8 +32,6 @@ const path = computed(() => {
 })
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
-
-const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -66,17 +40,8 @@ export default {
 }
 </script>
 <template>
-  <path :style="attrs.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
+  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
-  <slot
+  <slot :x="centerX" :y="centerY" v-bind="props">
-    :x="centerX"
-    :y="centerY"
-    :label="props.label"
-    :label-style="props.labelStyle"
-    :label-show-bg="props.labelShowBg"
-    :label-bg-style="props.labelBgStyle"
-    :label-bg-padding="props.labelBgPadding"
-    :label-bg-border-radius="props.labelBgBorderRadius"
-  >
     <EdgeText
       v-if="props.label"
       :x="centerX"