update(examples): Add update node example

examples/Provider/ProviderExample.vue

@@ -15,8 +15,8 @@ import Flow, {
 
 import './provider.css'
 
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
-const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance)
+const onElementClick = (element: FlowElement) => console.log('click', element)
+const onLoad = (flowInstance: OnLoadParams) => console.log('flow loaded:', flowInstance)
 
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -35,7 +35,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 <template>
   <div class="providerflow">
     <Sidebar />
-    <div class="reactflow-wrapper">
+    <div class="vue-flow-wrapper">
       <Flow
         :elements="elements"
         :connection-mode="ConnectionMode.Loose"

examples/Provider/Sidebar.vue

@@ -12,7 +12,7 @@ const selectAll = () => {
 </script>
 <template>
   <aside>
-    <div class="description">This is an example of how you can access the internal state outside of the ReactFlow component.</div>
+    <div class="description">This is an example of how you can access the internal state outside of the Vue Flow component.</div>
     <div class="title">Zoom & pan transform</div>
     <div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div>
     <div class="title">Nodes</div>

examples/Provider/provider.css

@@ -24,7 +24,7 @@
   margin-bottom: 20px;
 }
 
-.providerflow .reactflow-wrapper {
+.providerflow .vue-flow-wrapper {
   flex-grow: 1;
   height: 100%;
 }
@@ -42,4 +42,4 @@
     width: 20%;
     max-width: 250px;
   }
-}
+}