refactor: use dist pkg for examples

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

examples/Basic/Basic.vue

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

examples/Basic/BasicOptionsAPI.vue

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

examples/CustomConnectionLine/CustomConnectionLine.vue

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

examples/CustomNode/CustomNode.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import ColorSelectorNode from './ColorSelectorNode.vue'
 import {
   ConnectionMode,
   Elements,
-  FlowElement,
   isEdge,
   Node,
   Position,
@@ -12,7 +10,8 @@ import {
   VueFlow,
   Controls,
   MiniMap,
-} from '~/index'
+} from '@braks/vue-flow'
+import ColorSelectorNode from './ColorSelectorNode.vue'
 
 const elements = ref<Elements>([])
 const bgColor = ref('#1A192B')
@@ -31,7 +30,7 @@ const nodeColor = (n: Node): string => {
 }
 
 const onChange = (event: Event) => {
-  elements.value.forEach((e: FlowElement) => {
+  elements.value.forEach((e) => {
     if (isEdge(e) || e.id !== '2') return e
     bgColor.value = (event.target as HTMLInputElement).value
   })

examples/DragNDrop/DnD.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
+import { VueFlow, FlowInstance, Node, useVueFlow } from '@braks/vue-flow'
 import Sidebar from './Sidebar.vue'
-import { VueFlow, FlowInstance, Node, useVueFlow } from '~/index'
 
 let id = 0
 const getId = () => `dndnode_${id++}`
 
-const flowInstance = ref<FlowInstance>()
+const { instance, onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
-
-const { onPaneReady, onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   nodes: [
     {
       id: '1',
@@ -17,7 +15,6 @@ const { onPaneReady, onConnect, nodes, edges, addEdges, addNodes } = useVueFlow(
     },
   ],
 })
-onPaneReady((instance) => (flowInstance.value = instance))
 const onDragOver = (event: DragEvent) => {
   event.preventDefault()
   if (event.dataTransfer) {
@@ -28,9 +25,9 @@ const onDragOver = (event: DragEvent) => {
 onConnect((params) => addEdges([params]))
 
 const onDrop = (event: DragEvent) => {
-  if (flowInstance.value) {
+  if (instance.value) {
     const type = event.dataTransfer?.getData('application/vueflow')
-    const position = flowInstance.value.project({ x: event.clientX, y: event.clientY - 40 })
+    const position = instance.value.project({ x: event.clientX, y: event.clientY - 40 })
     const newNode = {
       id: getId(),
       type,

examples/EdgeTypes/EdgeTypesExample.vue

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

examples/Edges/CustomEdge.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getBezierPath, getMarkerId, Position, EdgeProps } from '~/index'
+import { getBezierPath, getMarkerId, Position, EdgeProps } from '@braks/vue-flow'
 
 interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
   source: string

examples/Edges/CustomEdge2.vue

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

examples/Edges/EdgesExample.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, Edge, Node } from '@braks/vue-flow'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
-import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, Edge, Node } from '~/index'
 
 const initialNodes: Node[] = [
   { id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
@@ -71,7 +71,7 @@ const initialEdges: Edge[] = [
   },
 ]
 
-const { nodes, edges } = useVueFlow({
+useVueFlow({
   nodes: initialNodes,
   edges: initialEdges,
 })

examples/Empty/EmptyExample.vue

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

examples/Hidden/HiddenExample.vue

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

examples/Interaction/InteractionExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useVueFlow } from '~/index'
+import { VueFlow, MiniMap, Controls, useVueFlow } from '@braks/vue-flow'
 
 const {
   nodesDraggable,
@@ -18,8 +18,6 @@ const {
   onPaneScroll,
   onPaneContextMenu,
   onMoveEnd,
-  nodes,
-  edges,
   addEdges,
 } = useVueFlow({
   modelValue: [

examples/Layouting/LayoutingExample.vue

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

examples/MultiFlows/Flow.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Background, Elements } from '~/index'
+import { VueFlow, Background, Elements } 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/Nesting/GroupNode.vue

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

examples/Nesting/Nesting.vue

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

examples/NodeTypeChange/NodeTypeChangeExample.vue

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

examples/Overview/Overview.vue

@@ -14,7 +14,7 @@ import {
   Edge,
   FlowEvents,
   MarkerType,
-} from '~/index'
+} from '@braks/vue-flow'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)

examples/Provider/ProviderExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '@braks/vue-flow'
 import Sidebar from './Sidebar.vue'
-import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '~/index'
 
 const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
 

examples/Provider/Sidebar.vue

@@ -1,11 +1,17 @@
 <script lang="ts" setup>
-import { useVueFlow } from '~/index'
+import { useVueFlow } from '@braks/vue-flow'
 const { nodesSelectionActive, addSelectedNodes, getNodes, transform } = useVueFlow()
 
 const selectAll = () => {
   addSelectedNodes(getNodes.value)
   nodesSelectionActive.value = true
 }
+
+const transformString = computed(() => [
+  transform.value[0].toFixed(2),
+  transform.value[1].toFixed(2),
+  transform.value[2].toFixed(2),
+])
 </script>
 <template>
   <aside>
@@ -13,7 +19,9 @@ const selectAll = () => {
       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="transform">
+      {{ transformString }}
+    </div>
     <div class="title">Nodes</div>
     <div v-for="node of getNodes" :key="node.id">
       Node {{ node.id }} - x: {{ node.position.x.toFixed(2) }}, y: {{ node.position.y.toFixed(2) }}

examples/RGBFlow/RGBFlow.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
+import { Elements, FlowInstance, VueFlow } from '@braks/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
-import { Elements, FlowInstance, VueFlow } from '~/index'
 
 type Colors = {
   red: number

examples/RGBFlow/RGBNode.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from '~/index'
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
 
 interface RGBNodeProps extends NodeProps {
   data: {
@@ -33,7 +33,7 @@ const onChange = (e: any) => emit('change', { color, val: e.target.value })
     <input
       v-model="props.amount[color]"
       class="slider nodrag"
-      :style="{ '--color': color }"
+      :style="{ '--color': color } as any"
       type="range"
       min="0"
       max="255"

examples/RGBFlow/RGBOutputNode.vue

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

examples/SaveRestore/Controls.vue

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

examples/SaveRestore/SaveRestoreExample.vue

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

examples/Stress/StressExample.vue

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

examples/Switch/SwitchExample.vue

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

examples/Unidirectional/CustomNode.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { Handle, Position } from '~/index'
+import { Handle, Position } from '@braks/vue-flow'
-import type { NodeProps } from '~/types/node'
+import type { NodeProps } from '@braks/vue-flow'
 
 const props = defineProps<NodeProps>()
 const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }

examples/UpdatableEdge/UpdatableEdgeExample.vue

@@ -10,7 +10,7 @@ import {
   Edge,
   FlowEvents,
   ConnectionMode,
-} from '~/index'
+} from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {

examples/UpdateNode/UpdateNodeExample.vue

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

examples/Validation/CustomInput.vue

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

examples/Validation/CustomNode.vue

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

examples/Validation/ValidationExample.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '@braks/vue-flow'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '~/index'
 
 const { nodes, edges, addEdges } = useVueFlow({
   nodes: [

examples/index.css

@@ -1,5 +1,3 @@
-@import "../src/theme-default.css";
-
 body {
   color: #111;
   padding: 5px;

examples/main.ts

@@ -3,6 +3,11 @@ import './index.css'
 import { DraggablePlugin } from '@braks/revue-draggable'
 import App from './App.vue'
 import { router } from './router'
+/* import the required styles */
+import '@braks/vue-flow/dist/style.css'
+
+/* import the default theme (optional) */
+import '@braks/vue-flow/dist/theme-default.css'
 
 const app = createApp(App)
 

package.json

@@ -36,6 +36,7 @@
     "lint": "yarn lint:js"
   },
   "dependencies": {
+    "@braks/vue-flow": "file:./",
     "@braks/revue-draggable": "^0.4.2",
     "@types/d3": "^7.1.0",
     "@vueuse/core": "^7.5.5",

yarn.lock

@@ -301,6 +301,17 @@
     "@vueuse/core" "^7.0.1"
     vue-demi latest
 
+"@braks/vue-flow@file:.":
+  version "0.4.0-0"
+  dependencies:
+    "@braks/revue-draggable" "^0.4.2"
+    "@braks/vue-flow" "file:../../../Library/Caches/Yarn/v6/npm-@braks-vue-flow-0.4.0-0-82c09b22-99a3-47c5-b788-6368f57f2185-1644498505992/node_modules/@braks/vue-flow"
+    "@types/d3" "^7.1.0"
+    "@vueuse/core" "^7.5.5"
+    d3 "^7.1.1"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+
 "@cypress/mount-utils@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@cypress/mount-utils/-/mount-utils-1.0.2.tgz#afbc4f8c350b7cd86edc5ad0db0cbe1e0181edc8"