refactor(nodes,edges): Remove BaseElement type

# What's changed?

* Remove `BaseElement` type
* Merge base element props into `Node` and `Edge` types
* Allow `ClassFunc` and `StyleFunc` types to specify what element type is used in callback

packages/vue-flow/src/types/edge.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, Component, VNode } from 'vue'
-import type { BaseElement, ElementData, Position } from './flow'
+import type { ClassFunc, ElementData, Position, StyleFunc, Styles } from './flow'
 import type { GraphNode } from './node'
 import type { DefaultEdgeTypes, EdgeComponent, EdgeTextProps } from './components'
 
@@ -42,9 +42,12 @@ export interface MarkerProps {
 
 export type EdgeMarkerType = string | MarkerType | EdgeMarker
 
-export interface Edge<Data = ElementData> extends BaseElement<Data> {
+export interface Edge<Data = ElementData> {
+  /** Unique edge id */
+  id: string
+  /** An edge label */
   label?: string | VNode | Component<EdgeTextProps>
-  /** node type, can be a default type or a custom type */
+  /** Edge type, can be a default type or a custom type */
   type?: keyof DefaultEdgeTypes | string
   /** Source node id */
   source: string
@@ -78,9 +81,16 @@ export interface Edge<Data = ElementData> extends BaseElement<Data> {
   updatable?: boolean
   /** Disable/enable selecting edge */
   selectable?: boolean
-
-  /** overwrites current edge type */
+  /** Additional class names, can be a string or a callback returning a string (receives current flow element) */
+  class?: string | ClassFunc<GraphEdge<Data>>
+  /** Additional styles, can be an object or a callback returning an object (receives current flow element) */
+  style?: Styles | StyleFunc<GraphEdge<Data>>
+  /** Is edge hidden */
+  hidden?: boolean
+  /** Overwrites current edge type */
   template?: EdgeComponent
+  /** Additional data that is passed to your custom components */
+  data?: Data
 }
 
 export type DefaultEdgeOptions = Omit<

packages/vue-flow/src/types/flow.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, Component, VNode } from 'vue'
+import type { CSSProperties } from 'vue'
 import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
 import type { CoordinateExtent, GraphNode, Node } from './node'
 import type { ConnectionLineType, ConnectionMode } from './connection'
@@ -7,10 +7,14 @@ import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent }
 
 export type ElementData = any
 
-/** an internal element  */
+/** A flow element (after parsing into state)  */
 export type FlowElement<Data = ElementData> = GraphNode<Data> | GraphEdge<Data>
 export type FlowElements<Data = ElementData> = FlowElement<Data>[]
 
+/** Initial elements (before parsing into state) */
+export type Element<Data = ElementData> = Node<Data> | Edge<Data>
+export type Elements<Data = ElementData> = Element<Data>[]
+
 export type CustomThemeVars = Record<string, string | number>
 export type CSSVars =
   | '--vf-node-color'
@@ -21,21 +25,8 @@ export type CSSVars =
   | '--vf-handle'
 export type ThemeVars = { [key in CSSVars]?: CSSProperties['color'] }
 export type Styles = CSSProperties & ThemeVars & CustomThemeVars
-export type ClassFunc<Data = ElementData> = (element: FlowElement<Data>) => string | void
-export type StyleFunc<Data = ElementData> = (element: FlowElement<Data>) => Styles | void
-
-/** base element props */
-export interface BaseElement<Data extends ElementData = ElementData> {
-  id: string
-  label?: string | VNode | Component
-  type?: string
-  data?: Data
-  class?: string | ClassFunc<Data>
-  style?: Styles | StyleFunc<Data>
-  hidden?: boolean
-}
-export type Element<Data = ElementData> = Node<Data> | Edge<Data>
-export type Elements<Data = ElementData> = Element<Data>[]
+export type ClassFunc<ElementType extends FlowElement = FlowElement> = (element: ElementType) => string | void
+export type StyleFunc<ElementType extends FlowElement = FlowElement> = (element: ElementType) => Styles | void
 
 /** Handle Positions */
 export enum Position {

packages/vue-flow/src/types/node.ts

@@ -1,5 +1,5 @@
 import type { Component, VNode } from 'vue'
-import type { BaseElement, Dimensions, ElementData, Position, SnapGrid, XYPosition, XYZPosition } from './flow'
+import type { ClassFunc, Dimensions, ElementData, Position, SnapGrid, StyleFunc, Styles, XYPosition, XYZPosition } from './flow'
 import type { DefaultNodeTypes, NodeComponent } from './components'
 import type { HandleElement, ValidConnectionFunc } from './handle'
 
@@ -16,7 +16,11 @@ type WidthFunc = <Data = ElementData>(node: GraphNode<Data>) => number | string
 // eslint-disable-next-line no-use-before-define
 type HeightFunc = <Data = ElementData>(node: GraphNode<Data>) => number | string | void
 
-export interface Node<Data = ElementData> extends BaseElement<Data> {
+export interface Node<Data = ElementData> {
+  /** Unique node id */
+  id: string
+  /** A node label */
+  label?: string | VNode | Component<NodeProps>
   /** initial node position x, y */
   position: XYPosition
   /** node type, can be a default type or a custom type */
@@ -56,8 +60,16 @@ export interface Node<Data = ElementData> extends BaseElement<Data> {
    */
   height?: number | string | HeightFunc
 
+  /** Additional class names, can be a string or a callback returning a string (receives current flow element) */
+  class?: string | ClassFunc<GraphNode<Data>>
+  /** Additional styles, can be an object or a callback returning an object (receives current flow element) */
+  style?: Styles | StyleFunc<GraphNode<Data>>
+  /** Is node hidden */
+  hidden?: boolean
   /** overwrites current node type */
   template?: NodeComponent
+  /** Additional data that is passed to your custom components */
+  data?: Data
 }
 
 export interface GraphNode<Data = ElementData> extends Node<Data> {