Flow Path
A vue3 component that can quickly create flowcharts.
Install
yarn add flow-path
Usage
<template>
<FlowPath :nodes="nodes" :role-order="roleOrder"></FlowPath>
</template>
<script setup lang="ts">
import { defineComponent } from 'vue'
import { FlowPath } from 'flow-path'
import type { NodeOptions } from 'flow-path'
const nodes: NodeOptions[] = [
{ id: 1, name: 'Start', role: 'role5', nextId: 2, state: 'success' },
{ id: 2, name: 'Compile mission', role: 'role5', nextId: 3, state: 'success', problem: '5 day later' },
{ id: 3, name: 'Review mission', role: 'role2', nextId: 4, state: 'success' },
{ id: 4, name: 'Confirm mission', role: 'role1', nextId: 5, state: 'pending' },
{ id: 5, name: 'Plan', role: 'role5', nextId: 6, state: 'fail' },
{ id: 6, name: 'Review plan', role: 'role2', nextId: 7 },
{ id: 7, name: 'Confirm plan', role: 'role1', nextId: 8 },
{ id: 8, name: 'Survey', role: 'role5', nextId: 9 },
{ id: 9, name: 'Design', role: 'role5', nextId: 10 },
{ id: 10, name: 'Estimate', role: 'role5', nextId: 11 },
{ id: 11, name: 'Review estimate', role: 'role4', nextId: 12 },
{ id: 12, name: 'Expert evaluation', role: 'role2', nextId: 13 },
{ id: 13, name: 'Confirm estimate', role: 'role1', nextId: 14 },
{ id: 14, name: 'Report estimate', role: 'role2', nextId: 15 },
{ id: 15, name: 'file', role: 'role3' }
]
const roleOrder = ['role1', 'role2', 'role3', 'role4', 'role5']
</script>
Props
import type { PropType } from 'vue'
type Key = string | number
type NodeState = 'success' | 'fail' | 'pending' | 'waiting'
interface NodeOptions {
id: Key
name: string
role: string
prevId?: Key | null
nextId?: Key | null
state?: NodeState
problem?: string
}
const props: {
nodes: {
type: Array as PropType<NodeOptions[]>,
default: () => []
},
roleOrder: {
type: [Array, Function] as PropType<string[] | ((prev: string, next: string) => number)>,
default: () => []
},
rowHeight: {
type: Number,
default: 100
},
nodeWidth: {
type: Number,
default: 120
},
nodeGap: {
type: Number,
default: 30
},
roleWidth: {
type: Number,
default: 72
},
autoState: {
type: Boolean,
default: false
}
}
Play
Clone and run yarn run serve
, and check src/__serve__
.
License
MIT License.