examples: add quasar example
This commit is contained in:
bcakmakoglu
@@ -0,0 +1,88 @@
|
||||
<script setup>
|
||||
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
|
||||
import { ref } from 'vue'
|
||||
import { initialElements } from './initial-elements.js'
|
||||
|
||||
/**
|
||||
* useVueFlow provides all event handlers and store properties
|
||||
* You can pass the composable an object that has the same properties as the VueFlow component props
|
||||
*/
|
||||
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow()
|
||||
|
||||
/**
|
||||
* Our elements
|
||||
*/
|
||||
const elements = ref(initialElements)
|
||||
|
||||
/**
|
||||
* This is a Vue Flow event-hook which can be listened to from anywhere you call the composable, instead of only on the main component
|
||||
*
|
||||
* onPaneReady is called when viewpane & nodes have visible dimensions
|
||||
*/
|
||||
onPaneReady(({ fitView }) => {
|
||||
fitView()
|
||||
})
|
||||
|
||||
onNodeDragStop((e) => console.log('drag stop', e))
|
||||
|
||||
/**
|
||||
* onConnect is called when a new connection is created.
|
||||
* You can add additional properties to your new edge (like a type or label) or block the creation altogether
|
||||
*/
|
||||
onConnect((params) => addEdges([params]))
|
||||
|
||||
const dark = ref(false)
|
||||
|
||||
/**
|
||||
* To update node properties you can simply use your elements v-model and mutate the elements directly
|
||||
* Changes should always be reflected on the graph reactively, without the need to overwrite the elements
|
||||
*/
|
||||
const updatePos = () =>
|
||||
elements.value.forEach((el) => {
|
||||
console.log(el, elements.value)
|
||||
if (isNode(el)) {
|
||||
el.position = {
|
||||
x: Math.random() * 400,
|
||||
y: Math.random() * 400,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* toObject transforms your current graph data to an easily persist-able object
|
||||
*/
|
||||
const logToObject = () => console.log(instance.value?.toObject())
|
||||
|
||||
/**
|
||||
* Resets the current viewpane transformation (zoom & pan)
|
||||
*/
|
||||
const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
|
||||
|
||||
const toggleClass = () => {
|
||||
dark.value = !dark.value
|
||||
elements.value.forEach((el) => (el.class = dark.value ? 'dark' : 'light'))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VueFlow v-model="elements" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
|
||||
<Background pattern-color="#aaa" gap="8" />
|
||||
<MiniMap />
|
||||
<Controls />
|
||||
|
||||
<div class="controls">
|
||||
<button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>
|
||||
<button style="background-color: #6f3381; color: white" @click="updatePos">update positions</button>
|
||||
<button
|
||||
:style="{
|
||||
backgroundColor: dark ? '#FFFFFB' : '#1C1C1C',
|
||||
color: dark ? '#1C1C1C' : '#FFFFFB',
|
||||
}"
|
||||
@click="toggleClass"
|
||||
>
|
||||
toggle {{ dark ? 'light' : 'dark' }}
|
||||
</button>
|
||||
<button @click="logToObject">log toObject</button>
|
||||
</div>
|
||||
</VueFlow>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import BasicFlow from './BasicFlow.vue'
|
||||
|
||||
export default {
|
||||
components: { BasicFlow },
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="q-pa-md q-gutter-sm">
|
||||
<q-card style="width: 500px; height: 500px">
|
||||
<BasicFlow />
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import CustomizedFlow from './CustomizedFlow.vue'
|
||||
|
||||
export default {
|
||||
components: { CustomizedFlow },
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="q-pa-md q-gutter-sm">
|
||||
<q-card style="width: 500px; height: 500px">
|
||||
<CustomizedFlow />
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script setup>
|
||||
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
|
||||
import { ref } from 'vue'
|
||||
import { initialElements } from './customized-elements.js'
|
||||
|
||||
/**
|
||||
* useVueFlow provides all event handlers and store properties
|
||||
* You can pass the composable an object that has the same properties as the VueFlow component props
|
||||
*/
|
||||
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow()
|
||||
|
||||
/**
|
||||
* Our elements
|
||||
*/
|
||||
const elements = ref(initialElements)
|
||||
|
||||
/**
|
||||
* This is a Vue Flow event-hook which can be listened to from anywhere you call the composable, instead of only on the main component
|
||||
*
|
||||
* onPaneReady is called when viewpane & nodes have visible dimensions
|
||||
*/
|
||||
onPaneReady(({ fitView }) => {
|
||||
fitView()
|
||||
})
|
||||
|
||||
onNodeDragStop((e) => console.log('drag stop', e))
|
||||
|
||||
/**
|
||||
* onConnect is called when a new connection is created.
|
||||
* You can add additional properties to your new edge (like a type or label) or block the creation altogether
|
||||
*/
|
||||
onConnect((params) => addEdges([params]))
|
||||
|
||||
const dark = ref(false)
|
||||
|
||||
/**
|
||||
* To update node properties you can simply use your elements v-model and mutate the elements directly
|
||||
* Changes should always be reflected on the graph reactively, without the need to overwrite the elements
|
||||
*/
|
||||
const updatePos = () =>
|
||||
elements.value.forEach((el) => {
|
||||
console.log(el, elements.value)
|
||||
if (isNode(el)) {
|
||||
el.position = {
|
||||
x: Math.random() * 400,
|
||||
y: Math.random() * 400,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* toObject transforms your current graph data to an easily persist-able object
|
||||
*/
|
||||
const logToObject = () => console.log(instance.value?.toObject())
|
||||
|
||||
/**
|
||||
* Resets the current viewpane transformation (zoom & pan)
|
||||
*/
|
||||
const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
|
||||
|
||||
const toggleClass = () => {
|
||||
dark.value = !dark.value
|
||||
elements.value.forEach((el) => (el.class = dark.value ? 'dark' : 'light'))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VueFlow v-model="elements" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
|
||||
<template #node-card="{ label }">
|
||||
<q-card class="my-card text-white" style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Q-Card Node</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
{{ label }}
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
<Background pattern-color="#aaa" gap="8" />
|
||||
<MiniMap />
|
||||
<Controls />
|
||||
|
||||
<div class="controls">
|
||||
<button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>
|
||||
<button style="background-color: #6f3381; color: white" @click="updatePos">update positions</button>
|
||||
<button
|
||||
:style="{
|
||||
backgroundColor: dark ? '#FFFFFB' : '#1C1C1C',
|
||||
color: dark ? '#1C1C1C' : '#FFFFFB',
|
||||
}"
|
||||
@click="toggleClass"
|
||||
>
|
||||
toggle {{ dark ? 'light' : 'dark' }}
|
||||
</button>
|
||||
<button @click="logToObject">log toObject</button>
|
||||
</div>
|
||||
</VueFlow>
|
||||
</template>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EssentialLink',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
caption: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
link: {
|
||||
type: String,
|
||||
default: '#',
|
||||
},
|
||||
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link :to="link">
|
||||
<q-item clickable>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ title }}</q-item-label>
|
||||
<q-item-label caption>{{ caption }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</router-link>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import BasicFlow from './BasicFlow.vue'
|
||||
|
||||
export default {
|
||||
components: { BasicFlow },
|
||||
setup() {
|
||||
const show = ref(false)
|
||||
return {
|
||||
show,
|
||||
isReady: ref(false),
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="q-pa-md q-gutter-sm">
|
||||
<q-btn label="Open Flow" color="primary" @click="show = true" />
|
||||
|
||||
<q-dialog v-model="show" transition-show="jump-up" @show="isReady = true" @before-hide="isReady = false">
|
||||
<q-card style="width: 500px; height: 500px">
|
||||
<BasicFlow />
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,55 @@
|
||||
import { MarkerType } from '@braks/vue-flow'
|
||||
|
||||
/**
|
||||
* You can pass elements together as a v-model value
|
||||
* or split them up into nodes and edges and pass them to the `nodes` and `edges` props of Vue Flow (or useVueFlow composable)
|
||||
*/
|
||||
export const initialElements = [
|
||||
{
|
||||
id: '1',
|
||||
type: 'card',
|
||||
label: 'Node 1',
|
||||
position: { x: 250, y: -50 },
|
||||
class: 'light',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'output',
|
||||
label: 'Node 2',
|
||||
position: { x: 100, y: 100 },
|
||||
class: 'light',
|
||||
},
|
||||
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
|
||||
{ id: '4', label: 'Node 4', position: { x: 150, y: 200 }, class: 'light' },
|
||||
{
|
||||
id: '5',
|
||||
type: 'output',
|
||||
label: 'Node 5',
|
||||
position: { x: 300, y: 300 },
|
||||
class: 'light',
|
||||
},
|
||||
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
||||
{
|
||||
id: 'e1-3',
|
||||
label: 'edge with arrowhead',
|
||||
source: '1',
|
||||
target: '3',
|
||||
markerEnd: MarkerType.Arrow,
|
||||
},
|
||||
{
|
||||
id: 'e4-5',
|
||||
type: 'step',
|
||||
label: 'step-edge',
|
||||
source: '4',
|
||||
target: '5',
|
||||
style: { stroke: 'orange' },
|
||||
labelBgStyle: { fill: 'orange' },
|
||||
},
|
||||
{
|
||||
id: 'e3-4',
|
||||
type: 'smoothstep',
|
||||
label: 'smoothstep-edge',
|
||||
source: '3',
|
||||
target: '4',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,55 @@
|
||||
import { MarkerType } from '@braks/vue-flow'
|
||||
|
||||
/**
|
||||
* You can pass elements together as a v-model value
|
||||
* or split them up into nodes and edges and pass them to the `nodes` and `edges` props of Vue Flow (or useVueFlow composable)
|
||||
*/
|
||||
export const initialElements = [
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
label: 'Node 1',
|
||||
position: { x: 250, y: 5 },
|
||||
class: 'light',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'output',
|
||||
label: 'Node 2',
|
||||
position: { x: 100, y: 100 },
|
||||
class: 'light',
|
||||
},
|
||||
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
|
||||
{ id: '4', label: 'Node 4', position: { x: 150, y: 200 }, class: 'light' },
|
||||
{
|
||||
id: '5',
|
||||
type: 'output',
|
||||
label: 'Node 5',
|
||||
position: { x: 300, y: 300 },
|
||||
class: 'light',
|
||||
},
|
||||
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
||||
{
|
||||
id: 'e1-3',
|
||||
label: 'edge with arrowhead',
|
||||
source: '1',
|
||||
target: '3',
|
||||
markerEnd: MarkerType.Arrow,
|
||||
},
|
||||
{
|
||||
id: 'e4-5',
|
||||
type: 'step',
|
||||
label: 'step-edge',
|
||||
source: '4',
|
||||
target: '5',
|
||||
style: { stroke: 'orange' },
|
||||
labelBgStyle: { fill: 'orange' },
|
||||
},
|
||||
{
|
||||
id: 'e3-4',
|
||||
type: 'smoothstep',
|
||||
label: 'smoothstep-edge',
|
||||
source: '3',
|
||||
target: '4',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,8 @@
|
||||
export interface Todo {
|
||||
id: number
|
||||
content: string
|
||||
}
|
||||
|
||||
export interface Meta {
|
||||
totalCount: number
|
||||
}
|
||||
Reference in New Issue
Block a user