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

docs: Add acknowledgement node to intro

Browse Source 
# What's changed?

* Move acknowledgement to bottom of page above footer
* Add acknowledgement node that scrolls down
* Reword home page
This commit is contained in:
Braks
2022-04-11 17:46:14 +02:00
parent 3925e24aa1
commit 9b11d8f4f2
10 changed files with 122 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/components/home/Acknowledgement.vue
View File

@@ -1,8 +1,11 @@
<script lang="ts" setup>
import Heart from '~icons/mdi/heart'
</script>
<template>
<div class="w-full bg-black text-white border-b-1 border-white">
<div id="acknowledgement" class="w-full bg-black text-white border-y-1 border-white">
<div class="max-w-11/12 md:max-w-6/12 m-auto py-4 md:(pb-12 pt-6) text-center">
<div>
<div class="font-bold text-4xl mb-4">Acknowledgement</div>
<h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500" /> Acknowledgement</h1>
<strong>First off</strong>: A big thank you to the developers of
<a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a>. Their amazing work made it possible for me
to create this port to Vue 3 - without them there is no Vue Flow.

8
docs/components/home/Additional.vue → docs/components/home/flows/Additional.vue
View File

@@ -97,10 +97,12 @@ onPaneReady((i) => emit('pane', i))
</div>
<div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
<div class="flex flex-col gap-2 items-center md:items-start">
<h1>Additional Components</h1>
<h1>Additional Features</h1>
<p>
Vue Flow includes a MiniMap, Controls and Background, as well as a ton of utilities and a supercharged composable to
control the internal state outside the Vue Flow component.
On top of all the features Vue Flow comes with several components like a Background, Minimap or Controls.
<br />
Plus it's built for composition, making the access of the internal state easy as can be!
</p>
<router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
</div>

6
docs/components/home/Basic.vue → docs/components/home/flows/Basic.vue
View File

@@ -97,10 +97,10 @@ onPaneReady((i) => emit('pane', i))
<template>
<div class="md:max-w-1/3 flex flex-col justify-center">
<div class="flex flex-col gap-2 items-center md:items-start">
<h1>Feature-rich</h1>
<h1>Batteries-included</h1>
<p>
Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls,
several event handlers and more.
Vue Flow comes with several built-in features including zooming, panning, zoom & pan controls, single & multi-selections, element dragging,
node and edge components and event handlers.
</p>
<router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
</div>

127
docs/components/home/flows/Intro.vue
View File

@@ -2,35 +2,47 @@
import { useVueFlow, VueFlow, Handle, Position } from '@braks/vue-flow'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
import BoxNode from '../nodes/Box.vue'
import Heart from '~icons/mdi/heart'
const breakpoints = useBreakpoints(breakpointsTailwind)
const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges } = useVueFlow({
const initialEdges = [
{
id: 'eintro-examples',
type: 'smoothstep',
sourceHandle: 'a',
source: 'intro',
target: 'examples',
animated: true,
style: { strokeWidth: 2, stroke: '#8b5cf6' },
},
{
id: 'eintro-documentation',
type: 'smoothstep',
sourceHandle: 'a',
source: 'intro',
target: 'documentation',
animated: true,
style: { strokeWidth: 2, stroke: '#f97316' },
},
{
id: 'eintro-acknowledgement',
type: 'smoothstep',
sourceHandle: 'a',
source: 'intro',
target: 'acknowledgement',
animated: true,
style: { strokeWidth: 2, stroke: '#0ea5e9' },
},
]
const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
nodes: [
{ id: 'intro', type: 'box', position: { x: 0, y: 0 } },
{ id: 'examples', type: 'box', position: { x: -50, y: 400 } },
{ id: 'documentation', type: 'box', position: { x: 300, y: 400 } },
{ id: 'acknowledgement', type: 'box', position: { x: 150, y: 500 } },
],
edges: [
{
id: 'eintro-examples',
type: 'smoothstep',
sourceHandle: 'a',
source: 'intro',
target: 'examples',
animated: true,
style: { strokeWidth: 2, stroke: '#8b5cf6' },
},
{
id: 'eintro-documentation',
type: 'smoothstep',
sourceHandle: 'a',
source: 'intro',
target: 'documentation',
animated: true,
style: { strokeWidth: 2, stroke: '#f97316' },
},
],
edges: initialEdges,
elementsSelectable: true,
nodesDraggable: false,
panOnDrag: false,
@@ -62,27 +74,51 @@ onPaneReady(({ fitView }) => {
y: mainNode.dimensions.height * 2 + 50,
}
break
case 'acknowledgement':
node.position = {
x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
y: mainNode.dimensions.height * 3,
}
break
}
})
nextTick(() => {
const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
source: 'examples',
target: 'documentation',
targetHandle: null,
sourceHandle: null,
setEdges(() => {
return [
{
id: 'eintro-examples',
type: 'smoothstep',
sourceHandle: 'a',
source: 'intro',
target: 'examples',
animated: true,
style: { strokeWidth: 2, stroke: '#8b5cf6' },
},
{
id: 'eexamples-documentation',
type: 'smoothstep',
source: 'examples',
target: 'documentation',
animated: true,
style: { strokeWidth: 2, stroke: '#f97316' },
},
{
id: 'edocumentation-acknowledgement',
type: 'smoothstep',
source: 'documentation',
target: 'acknowledgement',
animated: true,
style: { strokeWidth: 2, stroke: '#0ea5e9' },
},
]
})
if (newEdge) edgeId.value = newEdge.id
fitView({
duration: 1500,
})
})
} else {
fitView({
duration: 1500,
})
getNodes.value.forEach((node) => {
const mainNode = getNode.value('intro')!
switch (node.id) {
@@ -98,17 +134,20 @@ onPaneReady(({ fitView }) => {
y: mainNode.dimensions.height * 1.5,
}
break
case 'acknowledgement':
node.position = {
x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
y: mainNode.dimensions.height * 2,
}
break
}
})
nextTick(() => {
const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
source: 'intro',
target: 'documentation',
targetHandle: null,
sourceHandle: null,
setEdges(initialEdges)
fitView({
duration: 1500,
})
if (newEdge) edgeId.value = newEdge.id
})
}
@@ -123,6 +162,13 @@ onPaneReady(({ fitView }) => {
useResizeObserver(el, setNodes)
})
const scrollTo = () => {
const el = document.getElementById('acknowledgement')
if (el) {
el.scrollIntoView({ behavior: 'smooth' })
}
}
</script>
<template>
<VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
@@ -144,6 +190,7 @@ onPaneReady(({ fitView }) => {
<router-link class="link group bg-orange-500" to="/guide/"> Read The Documentation </router-link>
</div>
<Handle type="target" :position="Position.Top" />
<Handle class="block md:hidden" type="source" :position="Position.Bottom" />
</template>
<template v-else-if="props.id === 'examples'">
<div class="flex">
@@ -152,6 +199,12 @@ onPaneReady(({ fitView }) => {
<Handle type="target" :position="Position.Top" />
<Handle class="block md:hidden" type="source" :position="Position.Bottom" />
</template>
<template v-else-if="props.id === 'acknowledgement'">
<div class="flex" @click="scrollTo">
<div class="link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</div>
</div>
<Handle type="target" :position="Position.Top" />
</template>
</template>
</VueFlow>
</template>

8
docs/components/home/Nested.vue → docs/components/home/flows/Nested.vue
View File

@@ -58,8 +58,12 @@ onPaneReady((i) => emit('pane', i))
<template>
<div class="md:max-w-1/3 flex flex-col justify-center <md:pt-12">
<div class="flex flex-col gap-2 items-center md:items-start">
<h1>Nested- & Subflows</h1>
<p>Vue Flow comes with built-in support for nested nodes and nested flows.</p>
<h1>Complex Flows</h1>
<p>
You want to visualize more complex ideas?
<br />
No worries! Vue Flow supports creating nested nodes and nested graphs out-of-the-box.
</p>
<router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
</div>
</div>

9
docs/components/home/RGB.vue → docs/components/home/flows/RGB.vue
View File

@@ -1,9 +1,9 @@
<script lang="ts" setup>
import { BackgroundVariant, VueFlow, Background, Controls, MiniMap, MiniMapNodeFunc, useVueFlow } from '@braks/vue-flow'
import { breakpointsTailwind } from '@vueuse/core'
import CustomEdge from './edges/Custom.vue'
import RGBNode from './nodes/Input.vue'
import RGBOutputNode from './nodes/Output.vue'
import CustomEdge from '../edges/Custom.vue'
import RGBNode from '../nodes/Input.vue'
import RGBOutputNode from '../nodes/Output.vue'
const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -103,8 +103,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
<div class="flex flex-col gap-2 items-center md:items-start">
<h1>Customizable</h1>
<p>
You can create your own node and edge types or just pass a custom style. Implement custom UIs inside your nodes and add
functionality to your edges.
You can expand on the existing features by using your own custom nodes and edges and implement any design and functionality you want.
</p>
<router-link class="button max-w-max" to="/guide/">Documentation</router-link>
</div>

2
docs/package.json
View File

@@ -8,7 +8,7 @@
"lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
},
"dependencies": {
"@braks/vue-flow": "^0.4.2-3",
"@braks/vue-flow": "^0.4.3",
"blobity": "^0.1.7"
},
"devDependencies": {

8
docs/src/.vuepress/components.d.ts vendored
View File

@@ -5,18 +5,18 @@
declare module 'vue' {
export interface GlobalComponents {
Acknowledgement: typeof import('./../../components/home/Acknowledgement.vue')['default']
Additional: typeof import('./../../components/home/Additional.vue')['default']
Additional: typeof import('./../../components/home/flows/Additional.vue')['default']
Banner: typeof import('./../../components/home/Banner.vue')['default']
Basic: typeof import('./../../components/home/Basic.vue')['default']
Basic: typeof import('./../../components/home/flows/Basic.vue')['default']
Box: typeof import('./../../components/home/nodes/Box.vue')['default']
Custom: typeof import('./../../components/home/edges/Custom.vue')['default']
Features: typeof import('./../../components/home/Features.vue')['default']
Home: typeof import('./../../components/home/Home.vue')['default']
Input: typeof import('./../../components/home/nodes/Input.vue')['default']
Intro: typeof import('./../../components/home/flows/Intro.vue')['default']
Nested: typeof import('./../../components/home/Nested.vue')['default']
Nested: typeof import('./../../components/home/flows/Nested.vue')['default']
Output: typeof import('./../../components/home/nodes/Output.vue')['default']
RGB: typeof import('./../../components/home/RGB.vue')['default']
RGB: typeof import('./../../components/home/flows/RGB.vue')['default']
}
}

4
docs/src/.vuepress/head.ts
View File

@@ -1,6 +1,6 @@
const meta = {
title: '🌊 Vue Flow - A Vue3 Flowchart library',
description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
title: '🌊 Vue Flow',
description: 'The customizable Vue 3 component bringing interactivity to flowcharts and graphs.',
img: 'https://images.prismic.io/bcakmakoglu/8fbdad18-3cd4-46a9-83cf-dbd9fbf60484_vue-flow.png?auto=compress,format',
url: 'https://vueflow.dev/',
}

4
docs/src/index.md
View File

@@ -11,6 +11,6 @@ footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
<Banner />
</Suspense>
<Acknowledgement />
<Features />
<Acknowledgement />