From 10060064f21c4d8cbbed02d4ba195acb92a6ea31 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 3 Feb 2024 16:51:32 +0100
Subject: [PATCH] chore(examples): add cdn example file

---
 docs/examples/custom-node/App.vue             |  2 +-
 docs/examples/custom-node/OutputNode.vue      | 17 ++++++++-
 examples/vite/index-cdn.html                  | 37 +++++++++++++++++++
 .../vite/src/CustomNode/ColorSelectorNode.vue |  1 +
 4 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 examples/vite/index-cdn.html
diff --git a/docs/examples/custom-node/App.vue b/docs/examples/custom-node/App.vue
index 59461613..c33eecda 100644
--- a/docs/examples/custom-node/App.vue
+++ b/docs/examples/custom-node/App.vue
@@ -112,7 +112,7 @@ function onGradient() {
     fit-view-on-init
   >
     <template #node-color-selector="{ data }">
-      <ColorSelectorNode :data="data" @change="onChange" @gradient="onGradient" />
+      <ColorSelectorNode :data="data" />
     </template>
 
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
diff --git a/docs/examples/custom-node/OutputNode.vue b/docs/examples/custom-node/OutputNode.vue
index c18d2682..816907b4 100644
--- a/docs/examples/custom-node/OutputNode.vue
+++ b/docs/examples/custom-node/OutputNode.vue
@@ -1,4 +1,17 @@
 <script setup>
-const props = defineProps();
+import { useHandleConnections, useNodesData } from '@vue-flow/core'
 
-const { }
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+})
+
+const connections = useHandleConnections({
+  nodeId: props.id,
+  type: 'target',
+})
+
+const data = useNodesData()
+</script>
diff --git a/examples/vite/index-cdn.html b/examples/vite/index-cdn.html
new file mode 100644
index 00000000..c406a7c2
--- /dev/null
+++ b/examples/vite/index-cdn.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/vue-flow-core.iife.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@vue-flow/background@1.0.4/dist/vue-flow-background.iife.min.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/style.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/theme-default.min.css" rel="stylesheet">
+</head>
+<body>
+<div id="app" style="height: 100vh"></div>
+
+<script>
+  const { ref, createApp, h } = Vue
+  const { VueFlow } = vueFlowCore
+
+  const app = createApp({
+    setup() {
+      const elements = ref([
+        { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+        { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+        { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+        { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
+        { id: 'e1-3', source: '1', target: '3' },
+        { id: 'e1-2', source: '1', target: '2', animated: true },
+      ])
+
+      return () => h(VueFlow, { modelValue: elements.value })
+    },
+  })
+
+  app.mount('#app')
+</script>
+</body>
+</html>
diff --git a/examples/vite/src/CustomNode/ColorSelectorNode.vue b/examples/vite/src/CustomNode/ColorSelectorNode.vue
index 91a27ccd..f4bd0bf1 100644
--- a/examples/vite/src/CustomNode/ColorSelectorNode.vue
+++ b/examples/vite/src/CustomNode/ColorSelectorNode.vue
@@ -30,6 +30,7 @@ export default {
   <div>
     Custom Color Picker Node: <strong>{{ data.color }}</strong>
   </div>
+
   <input class="nodrag" type="color" :value="data.color" @input="props.data.onChange" />
   <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
   <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
