update(examples): Fix examples

examples/EdgeWithButton/EdgeWithButton.vue

@@ -1,7 +1,47 @@
+<script lang="ts" setup>
+import ButtonEdge from './ButtonEdge.vue'
+import Flow, {
+  addEdge,
+  Background,
+  Connection,
+  Controls,
+  Edge,
+  EdgeType,
+  Elements,
+  MiniMap,
+  OnLoadParams,
+  removeElements,
+} from '~/index'
+const edgeTypes = {
+  buttonedge: ButtonEdge as EdgeType,
+}
+
+const elements = ref<Elements>([
+  {
+    id: 'ewb-1',
+    type: 'input',
+    data: { label: 'Input 1' },
+    position: { x: 250, y: 0 },
+  },
+  { id: 'ewb-2', data: { label: 'Node 2' }, position: { x: 250, y: 300 } },
+  {
+    id: 'edge-1-2',
+    source: 'ewb-1',
+    target: 'ewb-2',
+    type: 'buttonedge',
+  },
+] as Elements)
+
+const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
+const onElementsRemove = (elementsToRemove: Elements) =>
+  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
+const onConnect = (params: Connection | Edge) =>
+  (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value as Elements))
+</script>
 <template>
-  <RevueFlow
+  <Flow
     key="edge-with-button"
-    v-model="elements"
+    :elements="elements"
     :snap-to-grid="true"
     :edge-types="edgeTypes"
     @load="onLoad"
@@ -11,59 +51,5 @@
     <MiniMap />
     <Controls />
     <Background />
-  </RevueFlow>
+  </Flow>
 </template>
-<script lang="ts">
-import ButtonEdge from './ButtonEdge';
-import { defineComponent, ref } from 'vue';
-import RevueFlow, {
-  addEdge,
-  Background,
-  Connection,
-  Controls,
-  Edge,
-  Elements,
-  MiniMap,
-  OnLoadParams,
-  removeElements
-} from '../../src';
-
-export default defineComponent({
-  components: { RevueFlow, Background, Controls, MiniMap },
-  setup() {
-    const edgeTypes = {
-      buttonedge: ButtonEdge as any
-    };
-
-    const elements = ref<Elements>([
-      {
-        id: 'ewb-1',
-        type: 'input',
-        data: { label: 'Input 1' },
-        position: { x: 250, y: 0 }
-      },
-      { id: 'ewb-2', data: { label: 'Node 2' }, position: { x: 250, y: 300 } },
-      {
-        id: 'edge-1-2',
-        source: 'ewb-1',
-        target: 'ewb-2',
-        type: 'buttonedge'
-      }
-    ] as Elements);
-
-    const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
-    const onElementsRemove = (elementsToRemove: Elements) =>
-      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
-    const onConnect = (params: Connection | Edge) =>
-      (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value as Elements));
-
-    return {
-      onLoad,
-      onElementsRemove,
-      onConnect,
-      elements,
-      edgeTypes
-    };
-  }
-});
-</script>