alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(examples): add cdn example file

Browse Source
This commit is contained in:
braks
2024-02-03 16:51:32 +01:00
committed by Braks
parent fc2f36b419
commit 10060064f2
4 changed files with 54 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples/custom-node/App.vue
View File

@@ -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" />

17
docs/examples/custom-node/OutputNode.vue
View File

@@ -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>

37
examples/vite/index-cdn.html Normal file
View File

@@ -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>

1
examples/vite/src/CustomNode/ColorSelectorNode.vue
View File

@@ -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" />