flow-vue-3

Flowy JS Vue 3

Usage

Import Flowy scripts at index.html header

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css"
    />
    <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>

Import and use components

<script setup>
import { ref } from 'vue'
import {FlowNode, FlowArea, FlowNodeItem} from 'flow-vue-3';

const options = ref([
  {
    title: "First Node",
    description: "First Node description",
    icon: "First node icon",
    node: {id: 1, name: 'aaa'}
  },
  {
    title: "Second Node",
    description: "Second Node description",
    icon: "Second node icon",
    node: {id: 2, name: 'aaa'}
  }
])

const onGrab = (block) => {
  console.log("onGrab => ", block)
}
const onRelease = () => {
  console.log("onRelease")
}
const onSnap = (block, first, parent) => {
  console.log("onSnap => ", block, first, parent)
}
const onRearrange = (block, parent) => {
  console.log("onRearrange => ", block, parent)
}

</script>
<template>
    <div class="flex-grow overflow-hidden flex flex-row flex-no-wrap">
      <div class="z-40 flex-shrink pl-6 pt-6 bg-white border-r border-grey-400">
        <div class="side z-50">
          <div class="text-lg font-bold mb-4">Blocks</div>
            <FlowNodeItem v-for="option in options">
              <FlowNode
              :title="option.title"
              :description="option.description"
              :icon="option.icon"
              :node="option.noded"
              />
            </FlowNodeItem>
        </div>
      </div>
      <div class="bg-gray-300 canva-area flex-grow overflow-auto">        
        <FlowArea
          :spacing_x="40"
          :spacing_y="60"
          @onGrab="(block) => onGrab(block)"
          @onRelease="onRelease"
          @onSnap="(block, first, parent) => onSnap(block, first, parent)"
          @onRearrange="(block, parent) => onRearrange(block, parent)"
        />
      </div>
    </div>
</template>

Repo with usage example

https://github.com/gusttavodev/flow-vue-3-example