fix(docs): dedupe and add alias for vue

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

examples/Basic/Basic.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,
@@ -12,7 +13,7 @@ import Flow, {
   isNode,
   removeElements,
   Node,
-} from '~/index'
+} from '@braks/vue-flow'
 
 const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
 const onElementClick = ({ node }: { node: Node }) => console.log('click', node)

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 { Flow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
 
 const elements = ref<Elements>([
   {

examples/CustomNode/CustomNode.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import ColorSelectorNode from './ColorSelectorNode.vue'
-import Flow, {
+import {
+  Flow,
   isEdge,
   removeElements,
   addEdge,

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 { Flow, addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, ElementId, Node } from '~/index'
 import './dnd.css'
 
 const flowInstance = ref<FlowInstance>()

examples/EdgeTypes/EdgeTypesExample.vue

@@ -3,7 +3,7 @@
  * Example for checking the different edge types and source and target positions
  */
 import { getElements } from './utils'
-import Flow, { removeElements, addEdge, MiniMap, Controls, Background, FlowInstance, Connection, Edge, Elements } from '~/index'
+import { Flow, removeElements, addEdge, MiniMap, Controls, Background, FlowInstance, Connection, Edge, Elements } from '~/index'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()

examples/EdgeWithButton/EdgeWithButton.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import ButtonEdge from './ButtonEdge.vue'
-import Flow, {
+import {
+  Flow,
   addEdge,
   Background,
   Connection,

examples/Edges/EdgesExample.vue

@@ -2,7 +2,8 @@
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,

examples/Empty/EmptyExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,

examples/Hidden/HiddenExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
+import { Flow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
 
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

examples/Interaction/InteractionExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   MiniMap,
   Controls,

examples/Layouting/LayoutingExample.vue

@@ -3,7 +3,8 @@ import dagre from 'dagre'
 import initialElements from './initial-elements'
 import './layouting.css'
 
-import Flow, {
+import {
+  Flow,
   Controls,
   addEdge,
   ConnectionMode,

examples/MultiFlows/Flow.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
+import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },

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 { Flow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
 
 const initialElements: Elements = [
   {

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 { Flow, Elements, Position, NodeType, Connection, Edge, addEdge } from '~/index'
 
 const initialElements: Elements = [
   {

examples/Overview/Overview.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

examples/Provider/ProviderExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import Flow, {
+import {
+  Flow,
   addEdge,
   removeElements,
   Controls,

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 { Flow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '~/index'
 
 import './save.css'
 

examples/Stress/StressExample.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import { getElements } from './utils'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

examples/Switch/SwitchExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
+import { Flow, 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)

examples/Unidirectional/UnidirectionalExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import CustomNode from './CustomNode.vue'
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,

examples/UpdatableEdge/UpdatableEdgeExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   Controls,
   updateEdge,
   addEdge,

examples/UpdateNode/UpdateNodeExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Elements } from '~/index'
+import { Flow, Elements } from '~/index'
 
 import './updatenode.css'
 

examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import CustomNode from './CustomNode.vue'
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,

examples/Validation/ValidationExample.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import Flow, {
+import {
+  Flow,
   addEdge,
   Handle,
   Connection,

examples/ZoomPanHelper/ZoomPanHelperExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   Background,