update(edges): useAttrs on edges to use style

* remove class and style props, pass them as attrs

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

examples/Edges/CustomEdge.vue

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

examples/Edges/CustomEdge2.vue

@@ -16,7 +16,9 @@ interface CustomEdgeProps extends EdgeProps {
   targetPosition: Position
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: any
+  data?: {
+    text: string
+  }
 }
 
 const props = defineProps<CustomEdgeProps>()
@@ -41,6 +43,11 @@ const center = computed(() =>
   }),
 )
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <EdgeText

examples/Edges/EdgesExample.vue

@@ -40,7 +40,7 @@ const initialElements: Elements = [
     source: '5',
     target: '6',
     label: {
-      component: CustomLabel,
+      component: markRaw(CustomLabel),
       props: {
         text: 'custom label text',
       },

src/components/Edges/BezierEdge.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
@@ -19,18 +19,16 @@ interface BezierEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: any
+        component: Component | DefineComponent
-        props?: any
+        props?: Record<string, any>
       }
-  labelStyle?: any
+  labelStyle?: CSSProperties
   labelShowBg?: boolean
-  labelBgStyle?: any
+  labelBgStyle?: CSSProperties
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: CSSProperties
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: any
   sourceHandleId?: ElementId
   targetHandleId?: ElementId
 }
@@ -58,6 +56,8 @@ const path = computed(() => {
 })
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+
+const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -65,7 +65,7 @@ export default {
 }
 </script>
 <template>
-  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
+  <path class="vue-flow__edge-path" :style="attrs.style" :d="path" :marker-end="markerEnd" />
   <slot
     :x="centered[0]"
     :y="centered[1]"

src/components/Edges/SmoothStepEdge.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
@@ -18,18 +19,16 @@ interface SmoothStepEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: any
+        component: Component | DefineComponent
-        props?: any
+        props?: Record<string, any>
       }
-  labelStyle?: any
+  labelStyle?: CSSProperties
   labelShowBg?: boolean
-  labelBgStyle?: any
+  labelBgStyle?: CSSProperties
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: any
   borderRadius?: number
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null
@@ -60,6 +59,8 @@ const path = computed(() => {
 })
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+
+const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -67,7 +68,7 @@ export default {
 }
 </script>
 <template>
-  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
+  <path class="vue-flow__edge-path" :style="attrs.style" :d="path" :marker-end="markerEnd" />
   <slot
     :x="centered[0]"
     :y="centered[1]"

src/components/Edges/StepEdge.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import SmoothStepEdge from './SmoothStepEdge.vue'
 
@@ -17,18 +18,16 @@ export interface StepEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: any
+        component: Component | DefineComponent
-        props?: any
+        props?: Record<string, any>
       }
-  labelStyle?: any
+  labelStyle?: CSSProperties
   labelShowBg?: boolean
-  labelBgStyle?: any
+  labelBgStyle?: CSSProperties
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: any
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null
 }
@@ -42,9 +41,10 @@ const props = withDefaults(defineProps<StepEdgeProps>(), {
   labelShowBg: true,
   labelBgStyle: () => ({}),
 })
+const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <template>
-  <SmoothStepEdge v-bind="props" :border-radius="0">
+  <SmoothStepEdge v-bind="{ ...props, ...attrs }" :border-radius="0">
     <slot />
   </SmoothStepEdge>
 </template>

src/components/Edges/StraightEdge.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getMarkerEnd, getBezierPath } from './utils'
@@ -18,18 +19,16 @@ interface StraightEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: any
+        component: Component | DefineComponent
-        props?: any
+        props?: Record<string, any>
       }
-  labelStyle?: any
+  labelStyle?: CSSProperties
   labelShowBg?: boolean
-  labelBgStyle?: any
+  labelBgStyle?: CSSProperties
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: any
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null
 }
@@ -62,6 +61,8 @@ const path = computed(() => {
 })
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+
+const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -69,7 +70,7 @@ export default {
 }
 </script>
 <template>
-  <path :style="props.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
+  <path :style="attrs.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
   <slot
     :x="centerX"
     :y="centerY"