update!: Rename Flow container to VueFlow

* Export renamed to VueFlow

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

examples/Basic/Basic.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  Flow,
+  VueFlow,
   MiniMap,
   Controls,
   Background,
@@ -56,7 +56,7 @@ const toggleclasss = () => {
 }
 </script>
 <template>
-  <Flow
+  <VueFlow
     class="vue-flow-basic-example"
     :elements="elements"
     :default-zoom="1.5"
@@ -78,5 +78,5 @@ const toggleclasss = () => {
       <button style="margin-right: 5px" @click="toggleclasss">toggle classs</button>
       <button @click="logToObject">toObject</button>
     </div>
-  </Flow>
+  </VueFlow>
 </template>

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import ConnectionLine from './ConnectionLine.vue'
-import { Flow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
+import { VueFlow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
 
 const elements = ref<Elements>([
   {
@@ -14,10 +14,10 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
     <template #custom-connection-line="props">
       <ConnectionLine v-bind="props" />
     </template>
     <Background :variant="BackgroundVariant.Lines" />
-  </Flow>
+  </VueFlow>
 </template>

examples/CustomNode/CustomNode.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import ColorSelectorNode from './ColorSelectorNode.vue'
 import {
-  Flow,
+  VueFlow,
   isEdge,
   removeElements,
   addEdge,
@@ -111,7 +111,7 @@ const onConnect = (params: Connection | Edge) =>
   ))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :style="`background: ${bgColor}`"
     :node-types="nodeTypes"
@@ -128,5 +128,5 @@ const onConnect = (params: Connection | Edge) =>
   >
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
     <Controls />
-  </Flow>
+  </VueFlow>
 </template>

examples/DragNDrop/DnD.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import { Flow, addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, ElementId, Node } from '~/index'
+import { VueFlow, addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, ElementId, Node } from '~/index'
 import './dnd.css'
 
 const flowInstance = ref<FlowInstance>()
@@ -48,9 +48,15 @@ const onDrop = (event: DragEvent) => {
 <template>
   <div class="dndflow">
     <div class="vueflow-wrapper" @drop="onDrop">
-      <Flow :elements="elements" @elements-remove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
+      <VueFlow
+        :elements="elements"
+        @elements-remove="onElementsRemove"
+        @load="onLoad"
+        @connect="onConnect"
+        @dragover="onDragOver"
+      >
         <Controls />
-      </Flow>
+      </VueFlow>
     </div>
     <Sidebar />
   </div>

examples/EdgeTypes/EdgeTypesExample.vue

@@ -1,6 +1,17 @@
 <script lang="ts" setup>
 import { getElements } from './utils'
-import { Flow, removeElements, addEdge, MiniMap, Controls, Background, FlowInstance, Connection, Edge, Elements } from '~/index'
+import {
+  VueFlow,
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  FlowInstance,
+  Connection,
+  Edge,
+  Elements,
+} from '~/index'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()
@@ -12,8 +23,8 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <Flow :elements="elements" :min-zoom="0.2" @load="onLoad" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow :elements="elements" :min-zoom="0.2" @load="onLoad" @elements-remove="onElementsRemove" @connect="onConnect">
     <MiniMap />
     <Controls />
-  </Flow>
+  </VueFlow>
 </template>

examples/EdgeWithButton/EdgeWithButton.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import ButtonEdge from './ButtonEdge.vue'
 import {
-  Flow,
+  VueFlow,
   addEdge,
   Background,
   Connection,
@@ -39,7 +39,7 @@ const onConnect = (params: Connection | Edge) =>
   (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value))
 </script>
 <template>
-  <Flow
+  <VueFlow
     key="edge-with-button"
     :elements="elements"
     :snap-to-grid="true"
@@ -51,5 +51,5 @@ const onConnect = (params: Connection | Edge) =>
     <MiniMap />
     <Controls />
     <Background />
-  </Flow>
+  </VueFlow>
 </template>

examples/Edges/EdgesExample.vue

@@ -3,7 +3,7 @@ import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
 import {
-  Flow,
+  VueFlow,
   MiniMap,
   Controls,
   Background,
@@ -89,7 +89,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :snap-to-grid="true"
     :edge-types="edgeTypes"
@@ -102,5 +102,5 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
     <MiniMap />
     <Controls />
     <Background />
-  </Flow>
+  </VueFlow>
 </template>

examples/Empty/EmptyExample.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import {
-  Flow,
+  VueFlow,
   MiniMap,
   Controls,
   Background,
@@ -37,7 +37,7 @@ const addRandomNode = () => {
 }
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     @load="onLoad"
     @element-click="onElementClick"
@@ -50,5 +50,5 @@ const addRandomNode = () => {
     <Background :variant="BackgroundVariant.Lines" />
 
     <button type="button" :style="buttonStyle" @click="addRandomNode">add node</button>
-  </Flow>
+  </VueFlow>
 </template>

examples/Header.vue

@@ -10,7 +10,7 @@ const onChange = (event: any) => {
 </script>
 <template>
   <header>
-    <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow Dev </a>
+    <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue VueFlow Dev </a>
     <select v-model="route.path" @change="onChange">
       <template v-for="r of routes" :key="r.path">
         <option v-if="r.path !== '/'" :value="r.path">

examples/Hidden/HiddenExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Flow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
+import { VueFlow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
 
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -23,7 +23,7 @@ watchEffect(() => {
 })
 </script>
 <template>
-  <Flow :elements="elements" @connect="onConnect">
+  <VueFlow :elements="elements" @connect="onConnect">
     <MiniMap />
     <Controls />
 
@@ -35,5 +35,5 @@ watchEffect(() => {
         </label>
       </div>
     </div>
-  </Flow>
+  </VueFlow>
 </template>

examples/Interaction/InteractionExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  Flow,
+  VueFlow,
   addEdge,
   MiniMap,
   Controls,
@@ -47,7 +47,7 @@ const captureZoomScroll = ref(false)
 const captureElementClick = ref(false)
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :elements-selectable="isSelectable"
     :nodes-connectable="isConnectable"
@@ -148,5 +148,5 @@ const captureElementClick = ref(false)
         </label>
       </div>
     </div>
-  </Flow>
+  </VueFlow>
 </template>

examples/Layouting/LayoutingExample.vue

@@ -4,7 +4,7 @@ import initialElements from './initial-elements'
 import './layouting.css'
 
 import {
-  Flow,
+  VueFlow,
   Controls,
   addEdge,
   ConnectionMode,
@@ -59,7 +59,7 @@ const onLayout = (direction: string) => {
 </script>
 <template>
   <div class="layoutflow">
-    <Flow
+    <VueFlow
       :elements="elements"
       :node-extent="nodeExtent"
       :connection-mode="ConnectionMode.Loose"
@@ -68,7 +68,7 @@ const onLayout = (direction: string) => {
       @load="() => onLayout('TB')"
     >
       <Controls />
-    </Flow>
+    </VueFlow>
     <div class="controls">
       <button :style="{ marginRight: 10 }" @click="() => onLayout('TB')">vertical layout</button>
       <button @click="() => onLayout('LR')">horizontal layout</button>

examples/MultiFlows/Flow.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
+import { VueFlow, Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
@@ -14,7 +14,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
     <Background />
-  </Flow>
+  </VueFlow>
 </template>

examples/NodeTypeChange/NodeTypeChangeExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { Flow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
+import { VueFlow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
 
 const initialElements: Elements = [
   {
@@ -41,7 +41,7 @@ const changeType = () => {
 }
 </script>
 <template>
-  <Flow :elements="elements" @connect="onConnect" @load="onLoad">
+  <VueFlow :elements="elements" @connect="onConnect" @load="onLoad">
     <button :style="buttonStyle" @click="changeType">change type</button>
-  </Flow>
+  </VueFlow>
 </template>

examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue

@@ -2,7 +2,7 @@
 import { CSSProperties } from 'vue'
 import NodeA from './NodeA.vue'
 import NodeB from './NodeB.vue'
-import { Flow, Elements, Position, NodeType, Connection, Edge, addEdge } from '~/index'
+import { VueFlow, Elements, Position, NodeType, Connection, Edge, addEdge } from '~/index'
 
 const initialElements: Elements = [
   {
@@ -48,7 +48,7 @@ const changeType = () => {
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <Flow :elements="elements" :node-types="nodeTypesObjects[nodeTypesId]" :node-types-id="nodeTypesId" @connect="onConnect">
+  <VueFlow :elements="elements" :node-types="nodeTypesObjects[nodeTypesId]" :node-types-id="nodeTypesId" @connect="onConnect">
     <template #node-a>
       <NodeA :node-styles="nodeStyles" />
     </template>
@@ -56,5 +56,5 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
       <NodeB :node-styles="nodeStyles" />
     </template>
     <button :style="buttonStyle" @click="changeType">change type</button>
-  </Flow>
+  </VueFlow>
 </template>

examples/Overview/Overview.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import {
-  Flow,
+  VueFlow,
   removeElements,
   addEdge,
   MiniMap,
@@ -51,7 +51,7 @@ const initialElements: Elements = [
     id: '1',
     type: 'input',
     data: {
-      label: 'Welcome to <strong>Vue Flow!</strong>',
+      label: 'Welcome to <strong>Vue VueFlow!</strong>',
     },
     position: { x: 250, y: 0 },
   },
@@ -136,7 +136,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :connection-line-style="connectionLineStyle"
     :snap-to-grid="true"
@@ -167,5 +167,5 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
     <MiniMap :node-stroke-color="nodeStrokeColor" :node-color="nodeColor" :node-border-radius="2" />
     <Controls />
     <Background color="#aaa" :gap="20" />
-  </Flow>
+  </VueFlow>
 </template>

examples/Provider/ProviderExample.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
 import {
-  Flow,
+  VueFlow,
   addEdge,
   removeElements,
   Controls,
@@ -37,7 +37,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
   <div class="providerflow">
     <Sidebar />
     <div class="vue-flow-wrapper">
-      <Flow
+      <VueFlow
         :elements="elements"
         :connection-mode="ConnectionMode.Loose"
         @element-click="onElementClick"
@@ -46,7 +46,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
         @load="onLoad"
       >
         <Controls />
-      </Flow>
+      </VueFlow>
     </div>
   </div>
 </template>

examples/Provider/Sidebar.vue

@@ -12,7 +12,9 @@ const selectAll = () => {
 </script>
 <template>
   <aside>
-    <div class="description">This is an example of how you can access the internal state outside of the Vue Flow component.</div>
+    <div class="description">
+      This is an example of how you can access the internal state outside of the Vue VueFlow 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/SaveRestore/SaveRestoreExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Controls from './Controls.vue'
-import { Flow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '~/index'
+import { VueFlow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '~/index'
 
 import './save.css'
 
@@ -20,7 +20,7 @@ const onRestore = (els: Elements) => (elements.value = els)
 const onAdd = (el: Node) => (elements.value = elements.value.concat(el))
 </script>
 <template>
-  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @load="onLoad">
+  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @load="onLoad">
     <Controls :flow-instance="flowInstance" @restore="onRestore" @add="onAdd" />
-  </Flow>
+  </VueFlow>
 </template>

examples/Stress/StressExample.vue

@@ -2,7 +2,7 @@
 import { CSSProperties } from 'vue'
 import { getElements } from './utils'
 import {
-  Flow,
+  VueFlow,
   removeElements,
   addEdge,
   MiniMap,
@@ -49,7 +49,7 @@ const updateElements = () => {
 }
 </script>
 <template>
-  <Flow :elements="elements" @load="onLoad" @elementsRemove="onElementsRemove" @connect="onConnect">
+  <VueFlow :elements="elements" @load="onLoad" @elementsRemove="onElementsRemove" @connect="onConnect">
     <MiniMap />
     <Controls />
     <Background />
@@ -58,5 +58,5 @@ const updateElements = () => {
       <button style="margin-right: 5px" @click="updatePos">change pos</button>
       <button @click="updateElements">update elements</button>
     </div>
-  </Flow>
+  </VueFlow>
 </template>

examples/Switch/SwitchExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Flow, removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
+import { VueFlow, removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
@@ -32,7 +32,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     @element-click="onElementClick"
     @elements-remove="onElementsRemove"
@@ -43,5 +43,5 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
       <button style="margin-right: 5px" @click="() => (elements = elementsA)">flow a</button>
       <button @click="() => (elements = elementsB)">flow b</button>
     </div>
-  </Flow>
+  </VueFlow>
 </template>

examples/Unidirectional/UnidirectionalExample.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import CustomNode from './CustomNode.vue'
 import {
-  Flow,
+  VueFlow,
   NodeType,
   addEdge,
   useZoomPanHelper,
@@ -193,7 +193,7 @@ const onPaneClick = (evt: MouseEvent) =>
   } as Node))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :node-types="nodeTypes"
     :connection-line-type="ConnectionLineType.SmoothStep"

examples/UpdatableEdge/UpdatableEdgeExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  Flow,
+  VueFlow,
   Controls,
   updateEdge,
   addEdge,
@@ -50,7 +50,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :snap-to-grid="true"
     :connection-mode="ConnectionMode.Loose"
@@ -62,5 +62,5 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
     @edge-update-end="onEdgeUpdateEnd"
   >
     <Controls />
-  </Flow>
+  </VueFlow>
 </template>

examples/UpdateNode/UpdateNodeExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Flow, Elements } from '~/index'
+import { VueFlow, Elements } from '~/index'
 
 import './updatenode.css'
 
@@ -35,7 +35,7 @@ watchEffect(() => {
 })
 </script>
 <template>
-  <Flow :elements="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
+  <VueFlow :elements="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
     <div class="updatenode__controls">
       <label>label:</label>
       <input v-model="nodeName" />
@@ -48,5 +48,5 @@ watchEffect(() => {
         <input v-model="nodeHidden" type="checkbox" />
       </div>
     </div>
-  </Flow>
+  </VueFlow>
 </template>

examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue

@@ -2,7 +2,7 @@
 import { CSSProperties } from 'vue'
 import CustomNode from './CustomNode.vue'
 import {
-  Flow,
+  VueFlow,
   NodeType,
   addEdge,
   useZoomPanHelper,
@@ -73,11 +73,11 @@ const onLoad = (instance: FlowInstance) => {
 const updateNodeInternals = () => flowInstance.value?.updateNodeInternals('1')
 </script>
 <template>
-  <Flow :elements="elements" :node-types="nodeTypes" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad">
+  <VueFlow :elements="elements" :node-types="nodeTypes" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad">
     <div :style="buttonWrapperStyles">
       <button @click="toggleHandleCount">toggle handle count</button>
       <button @click="toggleHandlePosition">toggle handle position</button>
       <button @click="updateNodeInternals">update node internals</button>
     </div>
-  </Flow>
+  </VueFlow>
 </template>

examples/Validation/ValidationExample.vue

@@ -2,7 +2,7 @@
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
 import {
-  Flow,
+  VueFlow,
   addEdge,
   Handle,
   Connection,
@@ -40,7 +40,7 @@ const nodeTypes: Record<string, NodeType> = {
 }
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :select-nodes-on-drag="false"
     class="validationflow"

examples/ZoomPanHelper/ZoomPanHelperExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  Flow,
+  VueFlow,
   removeElements,
   addEdge,
   Background,
@@ -44,8 +44,8 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @pane-click="onPaneClick">
+  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @pane-click="onPaneClick">
     <Background />
     <MiniMap />
-  </Flow>
+  </VueFlow>
 </template>