update(examples): Fix examples

2021-10-20 22:39:54 +02:00
parent a5ae6a4e48
commit 29c6df1755
25 changed files with 690 additions and 885 deletions
@@ -1,41 +1,21 @@
-<template>
-  <RevueFlow
-    v-model="elements"
-    :connection-line-component="ConnectionLine"
-    @elementsRemove="onElementsRemove"
-    @connect="onConnect"
-  >
-    <Background :variant="bgVariant" />
-  </RevueFlow>
-</template>
-<script lang="ts">
-import RevueFlow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '../../src';
+<script lang="ts" setup>
+import ConnectionLine from './ConnectionLine.vue'
+import Flow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'

-import ConnectionLine from './ConnectionLine.vue';
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  components: { RevueFlow, Background },
-  setup() {
-    const elements = ref<Elements>([
-      {
-        id: '1',
-        type: 'input',
-        data: { label: 'Node 1' },
-        position: { x: 250, y: 5 }
-      }
-    ] as Elements);
-    const onElementsRemove = (elementsToRemove: Elements) =>
-      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
-    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements));
-
-    return {
-      ConnectionLine,
-      elements,
-      onElementsRemove,
-      onConnect,
-      bgVariant: BackgroundVariant.Lines
-    };
-  }
-});
+const elements = ref<Elements>([
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+  },
+] as Elements)
+const onElementsRemove = (elementsToRemove: Elements) =>
+  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
 </script>
+<template>
+  <Flow :elements="elements" :custom-connection-line="ConnectionLine" @elementsRemove="onElementsRemove" @connect="onConnect">
+    <Background :variant="BackgroundVariant.Lines" />
+  </Flow>
+</template>