d71de0a92d
* chore(docs): update basic example styles * chore(docs): update confirm delete example styles * chore(docs): update dnd example styles * chore(docs): update hidden example * chore(docs): update update node example * chore(docs): update node toolbar example styles * chore(docs): update transition example styles * chore(docs): cleanup basic example els * chore(docs): cleanup examples
33 lines
835 B
Vue
33 lines
835 B
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
|
import DropzoneBackground from './DropzoneBackground.vue'
|
|
import Sidebar from './Sidebar.vue'
|
|
import useDragAndDrop from './useDnD'
|
|
|
|
const { onConnect, addEdges } = useVueFlow()
|
|
|
|
const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()
|
|
|
|
const nodes = ref([])
|
|
|
|
onConnect(addEdges)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dnd-flow" @drop="onDrop">
|
|
<VueFlow :nodes="nodes" @dragover="onDragOver" @dragleave="onDragLeave">
|
|
<DropzoneBackground
|
|
:style="{
|
|
backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
|
|
transition: 'background-color 0.2s ease',
|
|
}"
|
|
>
|
|
<p v-if="isDragOver">Drop here</p>
|
|
</DropzoneBackground>
|
|
</VueFlow>
|
|
|
|
<Sidebar />
|
|
</div>
|
|
</template>
|