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
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+interface CustomConnectionLineProps {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+}
+const props = defineProps<CustomConnectionLineProps>()
+</script>
+
+<template>
+  <g>
+    <path
+      class="animated"
+      fill="none"
+      stroke="#222"
+      :stroke-width="1.5"
+      :d="`M${props.sourceX},${props.sourceY} C ${props.sourceX} ${props.targetY} ${props.sourceX} ${props.targetY} ${props.targetX},${props.targetY}`"
+    />
+    <circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
+  </g>
+</template>
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { Elements } from '../../packages/vue-flow'
+import { Background, BackgroundVariant, VueFlow } from '../../packages/vue-flow'
+import ConnectionLine from './ConnectionLine.vue'
+
+const elements = ref<Elements>([
+  {
+    id: '1',
+    type: 'input',
+    label: 'Node 1',
+    position: { x: 250, y: 5 },
+  },
+])
+</script>
+
+<template>
+  <VueFlow v-model="elements">
+    <template #connection-line="props">
+      <ConnectionLine v-bind="props" />
+    </template>
+    <Background :variant="BackgroundVariant.Lines" />
+  </VueFlow>
+</template>