feat(core): add dom attributes option for nodes (#1861)

feat: Possibility to customize nodes HTML attributes

Author: cmath10

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -61,6 +61,7 @@ const NodeWrapper = defineComponent({
       elementsSelectable,
       nodesConnectable,
       nodesFocusable,
+      nodesAttrs,
       hooks,
     } = useVueFlow()
 
@@ -286,6 +287,8 @@ const NodeWrapper = defineComponent({
           'role': isFocusable.value ? 'button' : undefined,
           'aria-describedby': disableKeyboardA11y.value ? undefined : `${ARIA_NODE_DESC_KEY}-${vueFlowId}`,
           'aria-label': node.ariaLabel,
+          ...nodesAttrs?.value,
+          ...node.attrs,
           'onMouseenter': onMouseEnter,
           'onMousemove': onMouseMove,
           'onMouseleave': onMouseLeave,

packages/core/src/store/state.ts

@@ -114,6 +114,8 @@ export function useState(): State {
 
     disableKeyboardA11y: false,
     ariaLiveMessage: '',
+
+    nodesAttrs: {},
   }
 }
 

packages/core/src/types/flow.ts

@@ -229,6 +229,8 @@ export interface FlowProps {
   autoPanOnConnect?: boolean
   autoPanOnNodeDrag?: boolean
   autoPanSpeed?: number
+
+  nodesAttrs?: Record<string, any>
 }
 
 /**

packages/core/src/types/node.ts

@@ -109,6 +109,7 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
   events?: Partial<NodeEventsHandler<CustomEvents>>
   zIndex?: number
   ariaLabel?: string
+  attrs?: Record<string, any>
 }
 
 export interface GraphNode<