chore(examples): add cdn example file

bcakmakoglu · bcakmakoglu · commit 10060064f21c · 2024-02-05T07:51:12.000+01:00
diff --git 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
@@ -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
@@ -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
@@ -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" />

Original file line number	Diff line number	Diff line change
`@@ -112,7 +112,7 @@ function onGradient() {`
`112`	`112`	`fit-view-on-init`
`113`	`113`	`>`
`114`	`114`	`<template #node-color-selector="{ data }">`
`115`		`- <ColorSelectorNode :data="data" @change="onChange" @gradient="onGradient" />`
	`115`	`+ <ColorSelectorNode :data="data" />`
`116`	`116`	`</template>`
`117`	`117`
`118`	`118`	`<MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />`