examples: move current examples into examples/vite

2022-06-03 19:32:46 +02:00
parent c6bda81c5e
commit 8dd7c79700
68 changed files with 94 additions and 91 deletions
@@ -79,14 +79,14 @@ A basic setup would look like this:
 <CodeGroup>
  <CodeGroupItem title="Composition API" active>
-@[code vue:no-line-numbers](../../../examples/src/Basic/Basic.vue)
+@[code vue:no-line-numbers](../../../examples/vite/src/Basic/Basic.vue)
  </CodeGroupItem>
  <CodeGroupItem title="Options API">
-@[code vue:no-line-numbers](../../../examples/src/Basic/BasicOptionsAPI.vue)
+@[code vue:no-line-numbers](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
  </CodeGroupItem>
 </CodeGroup>
@@ -1,8 +1,8 @@
 /* import the required styles */
-@import '@braks/vue-flow/dist/style.css';
+@import '../node_modules/@braks/vue-flow/dist/style.css';
 /* import the default theme (optional) */
-@import '@braks/vue-flow/dist/theme-default.css';
+@import '../node_modules/@braks/vue-flow/dist/theme-default.css';
 body {
  color: #111;
@@ -8,6 +8,6 @@
 </head>
 <body>
 <div id="root"></div>
-<script type="module" src="./main.ts"></script>
+<script type="module" src="main.ts"></script>
 </body>
 </html>
@@ -3,10 +3,10 @@
  "version": "0.0.0",
  "private": true,
  "scripts": {
-    "dev": "vite",
+    "dev": "../node_modules/.bin/vite",
-    "build": "vite build",
+    "build": "../node_modules/.bin/vite build",
-    "serve": "vite serve",
+    "serve": "../node_modules/.bin/vite serve",
-    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
+    "lint": "eslint --ext \\\".js,.jsx,.ts,.tsx\\\" --fix --ignore-path .gitignore ."
  },
  "dependencies": {
    "@braks/vue-flow": "workspace:*"
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '../../packages/vue-flow'
 const elements = ref<Elements>([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import type { Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
-import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '../../packages/vue-flow'
 export default defineComponent({
  name: 'BasicOptionsAPI',
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Position, ValidConnectionFunc } from '@braks/vue-flow'
+import type { Position, ValidConnectionFunc } from '../../packages/vue-flow'
-import { Handle } from '@braks/vue-flow'
+import { Handle } from '../../packages/vue-flow'
 interface Props {
  id: string
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
-import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
+import { Background, BackgroundVariant, VueFlow } from '../../packages/vue-flow'
 import ConnectionLine from './ConnectionLine.vue'
 const elements = ref<Elements>([
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { Connection, Edge, NodeProps } from '@braks/vue-flow'
+import type { Connection, Edge, NodeProps } from '../../packages/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 interface ColorSelectorNodeProps extends NodeProps {
  data: {
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
+import type { Elements, Node, SnapGrid } from '../../packages/vue-flow'
-import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow'
+import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '../../packages/vue-flow'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 const elements = ref<Elements>([])
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Node } from '@braks/vue-flow'
+import type { Node } from '../../packages/vue-flow'
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
 import Sidebar from './Sidebar.vue'
 let id = 0
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { FlowInstance } from '@braks/vue-flow'
+import type { FlowInstance } from '../../packages/vue-flow'
-import { Controls, MiniMap, VueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow } from '../../packages/vue-flow'
 import { getElements } from './utils'
 const onLoad = (flowInstance: FlowInstance) => {
@@ -1,5 +1,5 @@
-import type { Elements } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
-import { Position } from '@braks/vue-flow'
+import { Position } from '../../packages/vue-flow'
 const nodeWidth = 80
 const nodeGapWidth = nodeWidth * 2
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { EdgeProps, Position } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '../../packages/vue-flow'
-import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
+import { getBezierPath, getEdgeCenter, useVueFlow } from '../../packages/vue-flow'
 interface CustomEdgeProps<T = any> extends EdgeProps<T> {
  id: string
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { EdgeProps, Position } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '../../packages/vue-flow'
-import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@braks/vue-flow'
+import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '../../packages/vue-flow'
 interface CustomEdgeProps extends EdgeProps {
  source: string
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Edge, Node } from '@braks/vue-flow'
+import type { Edge, Node } from '../../packages/vue-flow'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Node } from '@braks/vue-flow'
+import type { Node } from '../../packages/vue-flow'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { GraphNode, Position } from '@braks/vue-flow'
+import type { GraphNode, Position } from '../../packages/vue-flow'
-import { getBezierPath } from '@braks/vue-flow'
+import { getBezierPath } from '../../packages/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'
 interface FloatingConnectionLineProps {
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { EdgeProps, GraphNode, MarkerType } from '@braks/vue-flow'
+import type { EdgeProps, GraphNode, MarkerType } from '../../packages/vue-flow'
-import { getBezierPath } from '@braks/vue-flow'
+import { getBezierPath } from '../../packages/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'
 interface FloatingEdgeProps extends EdgeProps {
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'
@@ -1,5 +1,5 @@
-import type { Edge, GraphNode, XYPosition } from '@braks/vue-flow'
+import type { Edge, GraphNode, XYPosition } from '../../packages/vue-flow'
-import { MarkerType, Position } from '@braks/vue-flow'
+import { MarkerType, Position } from '../../packages/vue-flow'
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 const isHidden = ref(false)
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 const {
  nodesDraggable,
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import type { CoordinateExtent, Elements } from '@braks/vue-flow'
+import type { CoordinateExtent, Elements } from '../../packages/vue-flow'
-import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@braks/vue-flow'
+import { ConnectionMode, Controls, Position, VueFlow, isNode } from '../../packages/vue-flow'
 import initialElements from './initial-elements'
 const dagreGraph = new dagre.graphlib.Graph()
@@ -1,4 +1,4 @@
-import type { Elements, XYPosition } from '@braks/vue-flow'
+import type { Elements, XYPosition } from '../../packages/vue-flow'
 const position: XYPosition = { x: 0, y: 0 }
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
-import { Background, VueFlow } from '@braks/vue-flow'
+import { Background, VueFlow } from '../../packages/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' },
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
+import { Handle, Position, getNodesInside, useVueFlow } from '../../packages/vue-flow'
-import type { NodeProps } from '@braks/vue-flow'
+import type { NodeProps } from '../../packages/vue-flow'
 const props = defineProps<NodeProps>()
 const { onNodeDragStop, getNodes, viewport } = useVueFlow()
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
  fitViewOnInit: true,
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowInstance } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowInstance } from '../../packages/vue-flow'
-import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
+import { Position, VueFlow, addEdge, isEdge } from '../../packages/vue-flow'
 const initialElements: Elements = [
  {
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '../../packages/vue-flow'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '../../packages/vue-flow'
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, FlowInstance } from '@braks/vue-flow'
+import type { Elements, FlowInstance } from '../../packages/vue-flow'
-import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { ConnectionMode, Controls, VueFlow, useVueFlow } from '../../packages/vue-flow'
 import Sidebar from './Sidebar.vue'
 const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '../../packages/vue-flow'
 const { nodesSelectionActive, addSelectedNodes, getNodes, viewport } = useVueFlow()
 const selectAll = () => {
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
-import type { Elements, FlowInstance } from '@braks/vue-flow'
+import type { Elements, FlowInstance } from '../../packages/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { NodeProps } from '@braks/vue-flow'
+import type { NodeProps } from '../../packages/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 interface RGBNodeProps extends NodeProps {
  data: {
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps } from '@braks/vue-flow'
+import type { NodeProps } from '../../packages/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 interface RBGOutputNodeProps extends NodeProps {
  rgb: string
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { FlowExportObject, Node } from '@braks/vue-flow'
+import type { FlowExportObject, Node } from '../../packages/vue-flow'
-import { useVueFlow, useZoomPanHelper } from '@braks/vue-flow'
+import { useVueFlow, useZoomPanHelper } from '../../packages/vue-flow'
 const flowKey = 'example-flow'
 const state = useStorage<FlowExportObject>(flowKey, {
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
 import Controls from './Controls.vue'
 const initialElements: Elements = [
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
 import { getElements } from './utils'
 const { nodes, edges } = getElements(10, 10)
@@ -1,4 +1,4 @@
-import type { Edge, Node } from '@braks/vue-flow'
+import type { Edge, Node } from '../../packages/vue-flow'
 export function getElements(xElements = 10, yElements = 10) {
  const initialNodes: Node[] = []
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
 const elementsA: Elements = [
  { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 interface Props {
  id: string
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, Node } from '@braks/vue-flow'
+import type { Elements, Node } from '../../packages/vue-flow'
-import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@braks/vue-flow'
+import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '../../packages/vue-flow'
 import CustomNode from './CustomNode.vue'
 const initialElements: Elements = [
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
+import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '../../packages/vue-flow'
 const initialElements: Elements = [
  {
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
 const initialElements: Elements = [
  { id: '1', label: '-', position: { x: 100, y: 100 } },
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { ValidConnectionFunc } from '@braks/vue-flow'
+import type { ValidConnectionFunc } from '../../packages/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 interface CustomInputProps {
  isValidTargetPos: ValidConnectionFunc
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
+import type { NodeProps, ValidConnectionFunc } from '../../packages/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 interface CustomNodeProps extends NodeProps {
  id: string
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, FlowInstance, OnConnectStartParams } from '@braks/vue-flow'
+import type { Connection, FlowInstance, OnConnectStartParams } from '../../packages/vue-flow'
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
@@ -1,6 +1,6 @@
 {
  "compilerOptions": {
-    "baseUrl": ".",
+    "baseUrl": "..",
    "module": "ESNext",
    "target": "es2017",
    "lib": ["DOM", "ESNext"],
@@ -20,6 +20,7 @@
      "~/*": ["../package/src/*"]
    }
  },
-  "exclude": ["node_modules", "dist"],
+  "exclude": [
-  "references": [{ "path": "./tsconfig.node.json" }]
+    "../node_modules", "dist"],
  "references": [{ "path": "./tsconfig.node.json"}]
 }
@@ -4,5 +4,7 @@
    "module": "esnext",
    "moduleResolution": "node"
  },
-  "include": ["vite.config.ts"]
+  "include": [
    "vite.config.ts"
  ]
 }
@@ -1,5 +1,5 @@
 packages:
  - packages/*
-  - examples
+  - examples/*
  - e2e
  - docs
`@@ -1,4 +1,4 @@`
	`import type { Elements, XYPosition } from '@braks/vue-flow'`	`import type { Elements, XYPosition } from '../../packages/vue-flow'`

	`const position: XYPosition = { x: 0, y: 0 }`	`const position: XYPosition = { x: 0, y: 0 }`