docs: update examples

examples/vite/src/Basic/Basic.vue

@@ -10,7 +10,7 @@ const elements = ref<Elements>([
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
-const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow({
+const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({
   defaultZoom: 1.5,
   minZoom: 0.2,
   maxZoom: 4,
@@ -32,8 +32,8 @@ const updatePos = () =>
     }
   })
 
-const logToObject = () => console.log(instance.value?.toObject())
-const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+const logToObject = () => console.log(toObject())
+const resetTransform = () => setTransform({ x: 0, y: 0, zoom: 1 })
 const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>
 

examples/vite/src/Basic/BasicOptionsAPI.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import type { Elements, FlowEvents, VueFlowStore } from '@braks/vue-flow'
 import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
 
 export default defineComponent({
@@ -7,7 +7,7 @@ export default defineComponent({
   components: { VueFlow, Background, MiniMap, Controls },
   data() {
     return {
-      instance: null as FlowInstance | null,
+      instance: null as VueFlowStore | null,
       elements: [
         { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
         { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },

examples/vite/src/CustomNode/CustomNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
-import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow'
+import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow/src/index'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
 const elements = ref<Elements>([])

examples/vite/src/EdgeTypes/EdgeTypesExample.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { FlowInstance } from '@braks/vue-flow'
+import type { VueFlowStore } from '@braks/vue-flow'
 import { Controls, MiniMap, VueFlow } from '@braks/vue-flow'
 import { getElements } from './utils'
 
-const onLoad = (flowInstance: FlowInstance) => {
+const onLoad = (flowInstance: VueFlowStore) => {
   flowInstance.fitView()
   console.log(flowInstance.getElements())
 }

examples/vite/src/Empty/EmptyExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Node } from '@braks/vue-flow'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow/src/index'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 

examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowInstance } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, VueFlowStore } from '@braks/vue-flow'
 import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
@@ -25,7 +25,7 @@ const elements = ref<Elements>(initialElements)
 
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 
-const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
 
 const changeType = () => {
   elements.value.forEach((el) => {

examples/vite/src/Overview/Overview.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, VueFlowStore, FlowTransform, Node, SnapGrid } from '@braks/vue-flow'
 import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
@@ -13,7 +13,7 @@ const onSelectionDrag = (e: FlowEvents['selectionDrag']) => console.log('selecti
 const onSelectionDragStart = (e: FlowEvents['selectionDragStart']) => console.log('selection drag start', e)
 const onSelectionDragStop = (e: FlowEvents['selectionDragStop']) => console.log('selection drag stop', e)
 const onSelectionContextMenu = (e: FlowEvents['selectionContextMenu']) => console.log('selection context menu', e)
-const onLoad = (flowInstance: FlowInstance) => {
+const onLoad = (flowInstance: VueFlowStore) => {
   console.log('flow loaded:', flowInstance)
   flowInstance.fitView()
 }

examples/vite/src/Provider/ProviderExample.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { Elements, FlowInstance } from '@braks/vue-flow'
+import type { Elements, VueFlowStore } from '@braks/vue-flow'
 import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
 import Sidebar from './Sidebar.vue'
 
-const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
+const onLoad = (flowInstance: VueFlowStore) => console.log('flow loaded:', flowInstance)
 
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },

examples/vite/src/RGBFlow/RGBFlow.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
-import type { Elements, FlowInstance } from '@braks/vue-flow'
+import type { Elements, VueFlowStore } from '@braks/vue-flow'
 import { VueFlow } from '@braks/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
@@ -22,7 +22,7 @@ const elements = ref<Elements>([
 
 const el = templateRef<HTMLDivElement>('page', null)
 
-const onLoad = (flowInstance: FlowInstance) => {
+const onLoad = (flowInstance: VueFlowStore) => {
   flowInstance.fitView({ padding: 1 })
 }
 const color = ref<Colors>({

examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@braks/vue-flow'
 import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
@@ -24,7 +24,7 @@ const initialElements: Elements = [
 ]
 
 const elements = ref(initialElements)
-const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
 const onEdgeUpdateStart = (edge: Edge) => console.log('start update', edge)
 const onEdgeUpdateEnd = (edge: Edge) => console.log('end update', edge)
 const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) => {

examples/vite/src/Validation/ValidationExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Connection, FlowInstance, OnConnectStartParams } from '@braks/vue-flow'
+import type { Connection, OnConnectStartParams, VueFlowStore } from '@braks/vue-flow'
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
@@ -17,7 +17,7 @@ const { nodes, edges, addEdges } = useVueFlow({
     { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
   ],
 })
-const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
 const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })
 const onConnectStop = (event: MouseEvent) => console.log('on connect stop', event)
 const onConnectEnd = (event: MouseEvent) => console.log('on connect end', event)