examples: add quasar example

examples/vite/src/Basic/Basic.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '../../packages/vue-flow'
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '../../packages/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },

examples/vite/src/Basic/BasicOptionsAPI.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
-import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '../../packages/vue-flow'
+import type { Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',

examples/vite/src/Basic/ResizableNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Position, ValidConnectionFunc } from '../../packages/vue-flow'
-import { Handle } from '../../packages/vue-flow'
+import type { Position, ValidConnectionFunc } from '@braks/vue-flow'
+import { Handle } from '@braks/vue-flow'
 
 interface Props {
   id: string

examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '../../packages/vue-flow'
-import { Background, BackgroundVariant, VueFlow } from '../../packages/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
 import ConnectionLine from './ConnectionLine.vue'
 
 const elements = ref<Elements>([

examples/vite/src/CustomNode/ColorSelectorNode.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { Connection, Edge, NodeProps } from '../../packages/vue-flow'
-import { Handle, Position } from '../../packages/vue-flow'
+import type { Connection, Edge, NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface ColorSelectorNodeProps extends NodeProps {
   data: {

examples/vite/src/CustomNode/CustomNode.vue

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

examples/vite/src/DragNDrop/DnD.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Node } from '../../packages/vue-flow'
-import { VueFlow, useVueFlow } from '../../packages/vue-flow'
+import type { Node } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@braks/vue-flow'
 import Sidebar from './Sidebar.vue'
 
 let id = 0

examples/vite/src/EdgeTypes/EdgeTypesExample.vue

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

examples/vite/src/EdgeTypes/utils.ts

@@ -1,5 +1,5 @@
-import type { Elements } from '../../packages/vue-flow'
-import { Position } from '../../packages/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Position } from '@braks/vue-flow'
 
 const nodeWidth = 80
 const nodeGapWidth = nodeWidth * 2

examples/vite/src/Edges/CustomEdge.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { EdgeProps, Position } from '../../packages/vue-flow'
-import { getBezierPath, getEdgeCenter, useVueFlow } from '../../packages/vue-flow'
+import type { EdgeProps, Position } from '@braks/vue-flow'
+import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
 
 interface CustomEdgeProps<T = any> extends EdgeProps<T> {
   id: string

examples/vite/src/Edges/CustomEdge2.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { EdgeProps, Position } from '../../packages/vue-flow'
-import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '../../packages/vue-flow'
+import type { EdgeProps, Position } from '@braks/vue-flow'
+import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@braks/vue-flow'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string

examples/vite/src/Edges/EdgesExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Edge, Node } from '../../packages/vue-flow'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
+import type { Edge, Node } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'

examples/vite/src/Empty/EmptyExample.vue

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

examples/vite/src/FloatingEdges/FloatingConnectionLine.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { GraphNode, Position } from '../../packages/vue-flow'
-import { getBezierPath } from '../../packages/vue-flow'
+import type { GraphNode, Position } from '@braks/vue-flow'
+import { getBezierPath } from '@braks/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'
 
 interface FloatingConnectionLineProps {

examples/vite/src/FloatingEdges/FloatingEdge.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { EdgeProps, GraphNode, MarkerType } from '../../packages/vue-flow'
-import { getBezierPath } from '../../packages/vue-flow'
+import type { EdgeProps, GraphNode, MarkerType } from '@braks/vue-flow'
+import { getBezierPath } from '@braks/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'
 
 interface FloatingEdgeProps extends EdgeProps {

examples/vite/src/FloatingEdges/FloatingEdges.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'

examples/vite/src/FloatingEdges/floating-edge-utils.ts

@@ -1,5 +1,5 @@
-import type { Edge, GraphNode, XYPosition } from '../../packages/vue-flow'
-import { MarkerType, Position } from '../../packages/vue-flow'
+import type { Edge, GraphNode, XYPosition } from '@braks/vue-flow'
+import { MarkerType, Position } from '@braks/vue-flow'
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node

examples/vite/src/Hidden/HiddenExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 
 const isHidden = ref(false)
 

examples/vite/src/Interaction/InteractionExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 
 const {
   nodesDraggable,

examples/vite/src/Layouting/LayoutingExample.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import type { CoordinateExtent, Elements } from '../../packages/vue-flow'
-import { ConnectionMode, Controls, Position, VueFlow, isNode } from '../../packages/vue-flow'
+import type { CoordinateExtent, Elements } from '@braks/vue-flow'
+import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@braks/vue-flow'
 import initialElements from './initial-elements'
 
 const dagreGraph = new dagre.graphlib.Graph()

examples/vite/src/Layouting/initial-elements.ts

@@ -1,4 +1,4 @@
-import type { Elements, XYPosition } from '../../packages/vue-flow'
+import type { Elements, XYPosition } from '@braks/vue-flow'
 
 const position: XYPosition = { x: 0, y: 0 }
 

examples/vite/src/MultiFlows/Flow.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '../../packages/vue-flow'
-import { Background, VueFlow } from '../../packages/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, VueFlow } from '@braks/vue-flow'
 const initialElements: 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/Nesting/GroupNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position, getNodesInside, useVueFlow } from '../../packages/vue-flow'
-import type { NodeProps } from '../../packages/vue-flow'
+import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
 
 const props = defineProps<NodeProps>()
 const { onNodeDragStop, getNodes, viewport } = useVueFlow()

examples/vite/src/Nesting/Nesting.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
+import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,

examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowInstance } from '../../packages/vue-flow'
-import { Position, VueFlow, addEdge, isEdge } from '../../packages/vue-flow'
+import type { Connection, Edge, Elements, FlowInstance } from '@braks/vue-flow'
+import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {

examples/vite/src/Overview/Overview.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '../../packages/vue-flow'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '../../packages/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance, 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)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)

examples/vite/src/Provider/ProviderExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, FlowInstance } from '../../packages/vue-flow'
-import { ConnectionMode, Controls, VueFlow, useVueFlow } from '../../packages/vue-flow'
+import type { Elements, FlowInstance } 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)

examples/vite/src/Provider/Sidebar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useVueFlow } from '../../packages/vue-flow'
+import { useVueFlow } from '@braks/vue-flow'
 const { nodesSelectionActive, addSelectedNodes, getNodes, viewport } = useVueFlow()
 
 const selectAll = () => {

examples/vite/src/RGBFlow/RGBFlow.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
-import type { Elements, FlowInstance } from '../../packages/vue-flow'
-import { VueFlow } from '../../packages/vue-flow'
+import type { Elements, FlowInstance } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
 

examples/vite/src/RGBFlow/RGBNode.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { NodeProps } from '../../packages/vue-flow'
-import { Handle, Position } from '../../packages/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RGBNodeProps extends NodeProps {
   data: {

examples/vite/src/RGBFlow/RGBOutputNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps } from '../../packages/vue-flow'
-import { Handle, Position } from '../../packages/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RBGOutputNodeProps extends NodeProps {
   rgb: string

examples/vite/src/SaveRestore/Controls.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { FlowExportObject, Node } from '../../packages/vue-flow'
-import { useVueFlow, useZoomPanHelper } from '../../packages/vue-flow'
+import type { FlowExportObject, Node } from '@braks/vue-flow'
+import { useVueFlow, useZoomPanHelper } from '@braks/vue-flow'
 
 const flowKey = 'example-flow'
 const state = useStorage<FlowExportObject>(flowKey, {

examples/vite/src/SaveRestore/SaveRestoreExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '../../packages/vue-flow'
-import { VueFlow } from '../../packages/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 import Controls from './Controls.vue'
 
 const initialElements: Elements = [

examples/vite/src/Stress/StressExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '../../packages/vue-flow'
+import { VueFlow, useVueFlow } from '@braks/vue-flow'
 import { getElements } from './utils'
 
 const { nodes, edges } = getElements(10, 10)

examples/vite/src/Stress/utils.ts

@@ -1,4 +1,4 @@
-import type { Edge, Node } from '../../packages/vue-flow'
+import type { Edge, Node } from '@braks/vue-flow'
 
 export function getElements(xElements = 10, yElements = 10) {
   const initialNodes: Node[] = []

examples/vite/src/Switch/SwitchExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '../../packages/vue-flow'
-import { VueFlow } from '../../packages/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 
 const elementsA: Elements = [
   { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },

examples/vite/src/Unidirectional/CustomNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import { Handle, Position } from '../../packages/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface Props {
   id: string

examples/vite/src/Unidirectional/UnidirectionalExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, Node } from '../../packages/vue-flow'
-import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '../../packages/vue-flow'
+import type { Elements, Node } from '@braks/vue-flow'
+import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@braks/vue-flow'
 import CustomNode from './CustomNode.vue'
 
 const initialElements: Elements = [

examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '../../packages/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {

examples/vite/src/UpdateNode/UpdateNodeExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '../../packages/vue-flow'
-import { VueFlow } from '../../packages/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', label: '-', position: { x: 100, y: 100 } },

examples/vite/src/Validation/CustomInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { ValidConnectionFunc } from '../../packages/vue-flow'
-import { Handle, Position } from '../../packages/vue-flow'
+import type { ValidConnectionFunc } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface CustomInputProps {
   isValidTargetPos: ValidConnectionFunc

examples/vite/src/Validation/CustomNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps, ValidConnectionFunc } from '../../packages/vue-flow'
-import { Handle, Position } from '../../packages/vue-flow'
+import type { NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface CustomNodeProps extends NodeProps {
   id: string

examples/vite/src/Validation/ValidationExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, FlowInstance, OnConnectStartParams } from '../../packages/vue-flow'
-import { VueFlow, useVueFlow } from '../../packages/vue-flow'
+import type { Connection, FlowInstance, OnConnectStartParams } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@braks/vue-flow'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'