-
-
Batteries-included
+
+
Interactive Graphs
- 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.
+ Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable elements,
+ customizable nodes and edges and a bunch of event handlers.
Documentation
@@ -109,8 +122,12 @@ onPaneReady((i) => emit('pane', i))
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden"
>
-
-
+
+
+
+
+
+
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index fc1a438a..93727e86 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -1,11 +1,17 @@
-
-
-
-
-
-
-
diff --git a/docs/package.json b/docs/package.json
index 487c524e..a646fa50 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,11 +8,17 @@
"lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
},
"dependencies": {
- "@braks/vue-flow": "^0.4.6",
- "blobity": "^0.1.7"
+ "@animxyz/core": "^0.6.6",
+ "@animxyz/vue3": "^0.6.6",
+ "@braks/vue-flow": "^0.4.11",
+ "@stackblitz/sdk": "^1.6.0",
+ "@vue/repl": "^1.1.2",
+ "blobity": "^0.1.7",
+ "canvas-confetti": "^1.5.1"
},
"devDependencies": {
"@iconify/json": "^2.1.22",
+ "@types/canvas-confetti": "^1.4.2",
"@types/node": "^17.0.23",
"@vuepress/bundler-vite": "^2.0.0-beta.37",
"@vuepress/plugin-docsearch": "^2.0.0-beta.37",
diff --git a/docs/src/.vuepress/components.d.ts b/docs/src/.vuepress/components.d.ts
index f3d41eea..f14b8376 100644
--- a/docs/src/.vuepress/components.d.ts
+++ b/docs/src/.vuepress/components.d.ts
@@ -6,17 +6,29 @@ declare module 'vue' {
export interface GlobalComponents {
Acknowledgement: typeof import('./../../components/home/Acknowledgement.vue')['default']
Additional: typeof import('./../../components/home/flows/Additional.vue')['default']
+ App: typeof import('./../../components/examples/basic/App.vue')['default']
Banner: typeof import('./../../components/home/Banner.vue')['default']
Basic: typeof import('./../../components/home/flows/Basic.vue')['default']
- Box: typeof import('./../../components/home/nodes/Box.vue')['default']
+ Controls: typeof import('./../../components/examples/save-restore/Controls.vue')['default']
Custom: typeof import('./../../components/home/edges/Custom.vue')['default']
+ CustomConnectionLine: typeof import('./../../components/examples/connectionline/CustomConnectionLine.vue')['default']
+ CustomEdge: typeof import('./../../components/examples/edges/CustomEdge.vue')['default']
+ CustomEdge2: typeof import('./../../components/examples/edges/CustomEdge2.vue')['default']
+ CustomEdgeLabel: typeof import('./../../components/examples/edges/CustomEdgeLabel.vue')['default']
+ CustomInput: typeof import('./../../components/examples/validation/CustomInput.vue')['default']
+ CustomNode: typeof import('./../../components/examples/custom-node/CustomNode.vue')['default']
Features: typeof import('./../../components/home/Features.vue')['default']
+ Flow: typeof import('./../../components/examples/multi/Flow.vue')['default']
Home: typeof import('./../../components/home/Home.vue')['default']
Input: typeof import('./../../components/home/nodes/Input.vue')['default']
+ InteractionControls: typeof import('./../../components/examples/interaction/InteractionControls.vue')['default']
Intro: typeof import('./../../components/home/flows/Intro.vue')['default']
Nested: typeof import('./../../components/home/flows/Nested.vue')['default']
Output: typeof import('./../../components/home/nodes/Output.vue')['default']
+ PiniaExample: typeof import('./../../components/examples/pinia/PiniaExample.vue')['default']
+ Repl: typeof import('./../../components/Repl.vue')['default']
RGB: typeof import('./../../components/home/flows/RGB.vue')['default']
+ Sidebar: typeof import('./../../components/examples/dnd/Sidebar.vue')['default']
}
}
diff --git a/docs/src/.vuepress/config.ts b/docs/src/.vuepress/config.ts
index e8012ba5..5bfc4234 100644
--- a/docs/src/.vuepress/config.ts
+++ b/docs/src/.vuepress/config.ts
@@ -10,6 +10,7 @@ import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import head from './head'
import { useVueFlow } from '@braks/vue-flow'
+import { copyVueFlowPlugin } from "./copy-plugin";
config({ path: resolve(__dirname, '.env') })
@@ -23,7 +24,11 @@ export default defineUserConfig
({
bundler: '@vuepress/bundler-vite',
bundlerConfig: {
viteOptions: {
+ optimizeDeps: {
+ exclude: ['@animxyz/vue3'],
+ },
plugins: [
+ copyVueFlowPlugin(),
AutoImport({
imports: ['vue', '@vueuse/core'],
dts: resolve(__dirname, './auto-imports.d.ts'),
@@ -109,6 +114,7 @@ export default defineUserConfig({
'/examples/hidden',
'/examples/interaction',
'/examples/multi',
+ '/examples/pinia',
'/examples/stress',
],
},
diff --git a/docs/src/.vuepress/copy-plugin.ts b/docs/src/.vuepress/copy-plugin.ts
new file mode 100644
index 00000000..f1ec3758
--- /dev/null
+++ b/docs/src/.vuepress/copy-plugin.ts
@@ -0,0 +1,27 @@
+import { Plugin } from 'vite'
+import { existsSync, readFileSync } from 'fs'
+import { resolve } from 'path'
+
+export function copyVueFlowPlugin(): Plugin {
+ return {
+ name: 'copy-vue-flow',
+ generateBundle() {
+ console.log('building')
+ const filePath = resolve(
+ __dirname,
+ '../../../node_modules/@braks/vue-flow/dist/vue-flow.es.js'
+ )
+ if (!existsSync(filePath)) {
+ throw new Error(
+ `@braks/vue-flow/dist/vue-flow.es.js not built. ` +
+ `Run "yarn build" first.`
+ )
+ }
+ this.emitFile({
+ type: 'asset',
+ fileName: 'vue-flow.es.js',
+ source: readFileSync(filePath, 'utf-8'),
+ })
+ }
+ }
+}
diff --git a/docs/src/.vuepress/theme/clientAppEnhance.ts b/docs/src/.vuepress/theme/clientAppEnhance.ts
new file mode 100644
index 00000000..1fa02f56
--- /dev/null
+++ b/docs/src/.vuepress/theme/clientAppEnhance.ts
@@ -0,0 +1,6 @@
+import { defineClientAppEnhance } from '@vuepress/client'
+import VueAnimXyz from '@animxyz/vue3'
+
+export default defineClientAppEnhance(({ app }) => {
+ app.use(VueAnimXyz)
+})
diff --git a/docs/src/.vuepress/theme/index.ts b/docs/src/.vuepress/theme/index.ts
index 728a615e..9b0c7f10 100644
--- a/docs/src/.vuepress/theme/index.ts
+++ b/docs/src/.vuepress/theme/index.ts
@@ -1,5 +1,6 @@
import { resolve } from 'path'
import { Theme } from 'vuepress'
+import { path } from '@vuepress/utils'
export default {
name: 'vuepress-theme-local',
@@ -7,4 +8,5 @@ export default {
layouts: {
Layout: resolve(__dirname, 'layouts/default.vue'),
},
+ clientAppEnhanceFiles: path.resolve(__dirname, './clientAppEnhance.ts'),
} as Theme
diff --git a/docs/src/.vuepress/theme/layouts/default.vue b/docs/src/.vuepress/theme/layouts/default.vue
index c13e3c99..2a8734ec 100644
--- a/docs/src/.vuepress/theme/layouts/default.vue
+++ b/docs/src/.vuepress/theme/layouts/default.vue
@@ -1,5 +1,6 @@