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

docs: replace vuepress docs dir with vitepress docs dir

Browse Source
This commit is contained in:
braks
2022-08-01 21:10:14 +02:00
committed by Braks
parent 21702daf1e
commit f2b169145c
179 changed files with 122 additions and 8131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/.vitepress/config.ts
+204
View File
@@ -0,0 +1,204 @@
import { resolve } from 'path'
import { readdirSync, statSync } from 'fs'
import type { DefaultTheme, HeadConfig } from 'vitepress'
import { defineConfigWithTheme } from 'vitepress'
import WindiCSS from 'vite-plugin-windicss'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { useVueFlow } from '@braks/vue-flow'
import { copyVueFlowPlugin } from './copy-plugin'
import head from './head'
const { vueFlowVersion } = useVueFlow()
function capitalize(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
const typedocSidebarEntries = (): DefaultTheme.SidebarGroup[] => {
const filePath = resolve(__dirname, '../typedocs')
const docsModules = readdirSync(filePath).filter((name) => statSync(`${filePath}/${name}`).isDirectory())
return docsModules.map((module) => {
let children = readdirSync(`${filePath}/${module}/`).map<DefaultTheme.SidebarItem>((entry) => ({
text: entry.replace('.md', ''),
link: `/typedocs/${module}/${entry.replace('.md', '')}`,
}))
if (module === 'variables') {
children = children.filter((child) => {
return child.link.includes('default')
})
}
return { text: capitalize(module), collapsible: true, items: children } as DefaultTheme.SidebarGroup
})
}
export default defineConfigWithTheme<DefaultTheme.Config>({
title: 'Vue Flow',
description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
head: head as HeadConfig[],
outDir: resolve(__dirname, '../../dist'),
vite: {
optimizeDeps: {
exclude: ['@animxyz/vue3'],
},
plugins: [
copyVueFlowPlugin(),
AutoImport({
imports: ['vue', '@vueuse/core'],
dts: resolve(__dirname, '../auto-imports.d.ts'),
}),
WindiCSS({
transformCSS: 'pre',
config: resolve(__dirname, './windi.config.ts'),
}),
Components({
dirs: [resolve(__dirname, './../../components')],
deep: true,
// allow auto load markdown components under `./src/components/`
extensions: ['vue', 'md'],
// allow auto import and register components used in markdown
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
dts: resolve(__dirname, '../components.d.ts'),
resolvers: [IconsResolver()],
}),
Icons({
compiler: 'vue3',
}),
],
},
themeConfig: {
logo: '/favicons/android-chrome-512x512.png',
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2021-present Burak Cakmakoglu',
},
socialLinks: [
{ icon: 'github', link: 'https://github.com/bcakmakoglu/vue-flow' },
{ icon: 'discord', link: 'https://discord.gg/F4v6qE4Fuq' },
],
algolia: {
appId: 'F7BJNSM4M5',
apiKey: process.env.ALGOLIA_API_KEY!,
indexName: 'vueflow',
},
nav: [
{ text: `v${vueFlowVersion.value}`, link: '/' },
{ text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
{
text: 'Examples',
link: '/examples/',
activeMatch: '^/examples/',
},
{
text: 'TypeDocs',
link: '/typedocs/',
activeMatch: '^/typedocs/',
},
],
sidebar: {
'/guide/': [
{
text: 'Guide',
collapsible: true,
items: [
{ text: 'Introduction', link: '/guide/' },
{ text: 'Getting Started', link: '/guide/getting-started' },
{ text: 'Theming', link: '/guide/theming' },
{ text: 'Nodes', link: '/guide/node' },
{ text: 'Edges', link: '/guide/edge' },
{ text: 'Composables', link: '/guide/composables' },
],
},
{
text: 'Vue Flow',
collapsible: true,
items: [
{ text: 'Config / Props', link: '/guide/vue-flow/config' },
{ text: 'State', link: '/guide/vue-flow/state' },
{
text: 'Actions',
link: '/typedocs/interfaces/Actions.html',
},
{
text: 'Getters',
link: '/typedocs/interfaces/Getters.html',
},
{
text: 'Events',
link: '/typedocs/interfaces/FlowEvents.html',
},
{ text: 'Slots', link: '/guide/vue-flow/slots' },
],
},
{
text: 'Utilities',
collapsible: true,
items: [
{ text: 'Graph', link: '/guide/utils/graph' },
{ text: 'Viewport', link: '/guide/utils/instance' },
{ text: 'Edges', link: '/guide/utils/edge' },
],
},
{
text: 'Components',
collapsible: true,
items: [
{ text: 'Background', link: '/guide/components/background' },
{ text: 'MiniMap', link: '/guide/components/minimap' },
{ text: 'MiniMapNode', link: '/guide/components/minimap-node' },
{ text: 'Controls', link: '/guide/components/controls' },
{ text: 'Control Button', link: '/guide/components/control-button' },
],
},
],
'/examples/': [
{
text: 'General Examples',
collapsible: true,
items: [
{ text: 'Basic', link: '/examples/' },
{ text: 'Save & Restore', link: '/examples/save' },
{ text: 'Drag & Drop', link: '/examples/dnd' },
{ text: 'Empty Flow', link: '/examples/empty' },
{ text: 'Hide/Show', link: '/examples/hidden' },
{ text: 'Horizontal Flow', link: '/examples/horizontal' },
{ text: 'Interactions', link: '/examples/interaction' },
{ text: 'Teleport', link: '/examples/teleport' },
{ text: 'Multiple Flows', link: '/examples/multi' },
{ text: 'Pinia', link: '/examples/pinia' },
{ text: 'Stress', link: '/examples/stress' },
],
},
{
text: 'Nodes',
collapsible: true,
items: [
{ text: 'Custom Node', link: '/examples/nodes/' },
{ text: 'Update Node', link: '/examples/nodes/update-node' },
{ text: 'Nested Nodes', link: '/examples/nodes/nesting' },
],
},
{
text: 'Edges',
collapsible: true,
items: [
{ text: 'Edges', link: '/examples/edges/' },
{ text: 'Updatable Edge', link: '/examples/edges/updatable-edge' },
{ text: 'Custom Connectionline', link: '/examples/edges/connection-line' },
{ text: 'Connection validation', link: '/examples/edges/validation' },
],
},
],
'/typedocs/': typedocSidebarEntries(),
},
},
})
docs/src/.vuepress/copy-plugin.ts → docs/src/.vitepress/copy-plugin.ts
View File
docs/src/.vuepress/head.ts → docs/src/.vitepress/head.ts
View File
docs/src/.vitepress/theme/index.ts
+19
View File
@@ -0,0 +1,19 @@
import type { Theme } from 'vitepress'
import VueAnimXyz from '@animxyz/vue3'
import DefaultTheme from 'vitepress/theme'
import Layout from './layouts/default.vue'
import 'virtual:windi.css'
import '@animxyz/core'
import '@braks/vue-flow/dist/style.css'
import '@braks/vue-flow/dist/theme-default.css'
import './../../assets/index.css'
const CustomTheme = {
...DefaultTheme,
Layout,
enhanceApp: ({ app }) => {
app.use(VueAnimXyz)
},
} as Theme
export default CustomTheme
docs/src/.vitepress/theme/layouts/default.vue
+15
View File
@@ -0,0 +1,15 @@
<script setup>
import DefaultTheme from 'vitepress/theme'
const { Layout: ParentLayout } = DefaultTheme
</script>
<template>
<ParentLayout></ParentLayout>
</template>
<style>
.page-footer {
@apply py-4 text-center;
}
</style>
docs/src/.vuepress/windi.config.ts → docs/src/.vitepress/windi.config.ts
+3 -5
View File
@@ -1,7 +1,6 @@
import { defineConfig } from 'windicss/helpers'
import { resolve } from 'path'
import { defineConfig } from 'windicss/helpers'
import typography from 'windicss/plugin/typography'
// @ts-ignore
import scrollbar from '@windicss/plugin-scrollbar'
export default defineConfig({
@@ -9,18 +8,17 @@ export default defineConfig({
include: [
resolve(__dirname, './theme/**/*.{ts,md,vue}'),
resolve(__dirname, '../../components/**/*.{ts,md,vue}'),
resolve(__dirname, '../**/*.{ts,md,vue}')
resolve(__dirname, '../**/*.{ts,md,vue}'),
],
},
attributify: true,
darkMode: 'class',
plugins: [
typography({
dark: true,
}),
scrollbar
scrollbar,
],
shortcuts: {
docs/src/.vuepress/assets/polygon-scatter.svg
-1
View File
@@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="960" height="540" fill="#31475e"></rect><g><g transform="translate(57 45)"><path d="M0 -106.9L83.6 -66.7L104.2 23.8L46.4 96.3L-46.4 96.3L-104.2 23.8L-83.6 -66.7Z" fill="#3fb984"></path></g><g transform="translate(708 88)"><path d="M0 -66L51.6 -41.2L64.3 14.7L28.6 59.5L-28.6 59.5L-64.3 14.7L-51.6 -41.2Z" fill="#3fb984"></path></g><g transform="translate(823 510)"><path d="M0 -77L60.2 -48L75.1 17.1L33.4 69.4L-33.4 69.4L-75.1 17.1L-60.2 -48Z" fill="#3fb984"></path></g><g transform="translate(896 280)"><path d="M0 -45L35.2 -28.1L43.9 10L19.5 40.5L-19.5 40.5L-43.9 10L-35.2 -28.1Z" fill="#3fb984"></path></g><g transform="translate(287 458)"><path d="M0 -58L45.3 -36.2L56.5 12.9L25.2 52.3L-25.2 52.3L-56.5 12.9L-45.3 -36.2Z" fill="#3fb984"></path></g><g transform="translate(12 380)"><path d="M0 -101L79 -63L98.5 22.5L43.8 91L-43.8 91L-98.5 22.5L-79 -63Z" fill="#3fb984"></path></g><g transform="translate(609 440)"><path d="M0 -60L46.9 -37.4L58.5 13.4L26 54.1L-26 54.1L-58.5 13.4L-46.9 -37.4Z" fill="#3fb984"></path></g><g transform="translate(457 42)"><path d="M0 -81L63.3 -50.5L79 18L35.1 73L-35.1 73L-79 18L-63.3 -50.5Z" fill="#3fb984"></path></g></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

docs/src/.vuepress/components.d.ts
Vendored
-39
View File
@@ -1,39 +0,0 @@
// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
declare module '@vue/runtime-core' {
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']
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']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Sidebar: typeof import('./../../components/examples/dnd/Sidebar.vue')['default']
TeleportableNode: typeof import('./../../components/examples/teleport/TeleportableNode.vue')['default']
}
}
export {}
docs/src/.vuepress/config.ts
-77
View File
@@ -1,77 +0,0 @@
import { resolve } from 'path'
import { config } from 'dotenv'
import { defineUserConfig } from 'vuepress'
import type { HeadConfig } from 'vuepress'
import { docsearchPlugin } from '@vuepress/plugin-docsearch'
import { viteBundler } from '@vuepress/bundler-vite'
import WindiCSS from 'vite-plugin-windicss'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import seoPlugin from 'vuepress-plugin-seo2'
import sitemapPlugin from 'vuepress-plugin-sitemap2'
import { copyVueFlowPlugin } from './copy-plugin'
import head, { meta } from './head'
import Theme from './theme'
config({ path: resolve(__dirname, '.env') })
export default defineUserConfig({
title: 'Vue Flow',
description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
head: head as HeadConfig[],
dest: resolve(__dirname, '../../dist'),
bundler: viteBundler({
viteOptions: {
optimizeDeps: {
exclude: ['@animxyz/vue3'],
},
plugins: [
copyVueFlowPlugin(),
AutoImport({
imports: ['vue', '@vueuse/core'],
dts: resolve(__dirname, './auto-imports.d.ts'),
}),
WindiCSS({
transformCSS: 'pre',
config: resolve(__dirname, './windi.config.ts'),
}),
Components({
dirs: [resolve(__dirname, '../../components')],
deep: true,
// allow auto load markdown components under `./src/components/`
extensions: ['vue', 'md'],
// allow auto import and register components used in markdown
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
dts: resolve(__dirname, './components.d.ts'),
resolvers: [IconsResolver()],
}),
Icons({
compiler: 'vue3',
}),
],
},
}),
plugins: [
[
docsearchPlugin({
appId: 'F7BJNSM4M5',
apiKey: process.env.ALGOLIA_API_KEY!,
indexName: 'vueflow',
}),
seoPlugin({
hostname: meta.url,
author: 'Burak Cakmakoglu',
}),
sitemapPlugin({
hostname: meta.url,
}),
],
],
theme: Theme,
})
docs/src/.vuepress/theme/clientAppEnhance.ts
-10
View File
@@ -1,10 +0,0 @@
import { defineClientConfig } from '@vuepress/client'
import VueAnimXyz from '@animxyz/vue3'
export default defineClientConfig({
enhance({ app, router, siteData }){
app.use(VueAnimXyz)
},
setup(){},
rootComponents: [],
})
docs/src/.vuepress/theme/index.ts
-150
View File
@@ -1,150 +0,0 @@
import { resolve } from 'path'
import { readdirSync, statSync } from 'fs'
import type { SidebarConfigArray, Theme } from 'vuepress'
import { defaultTheme } from 'vuepress'
import { path } from '@vuepress/utils'
import { useVueFlow } from '@braks/vue-flow'
const { vueFlowVersion } = useVueFlow()
function capitalize(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
const typedocSidebarEntries = (): SidebarConfigArray => {
const filePath = resolve(__dirname, '../../typedocs')
const docsModules = readdirSync(filePath).filter((name) => statSync(`${filePath}/${name}`).isDirectory())
const sidebarItems = docsModules.map((module) => {
let children = readdirSync(`${filePath}/${module}/`).map((entry) => `/typedocs/${module}/${entry}`)
if (module === 'variables') {
children = children.filter((child) => {
return child.includes('default')
})
}
return { text: capitalize(module), children }
})
return [
{
text: 'Modules',
link: '/typedocs/',
children: [...sidebarItems],
},
]
}
export default {
name: 'vuepress-theme-local',
extends: defaultTheme({
docsDir: 'docs/src/',
docsBranch: 'master',
lastUpdated: true,
contributors: true,
colorMode: 'auto',
colorModeSwitch: true,
logo: '/favicons/android-chrome-512x512.png',
sidebar: {
'/guide/': [
{
text: 'Guide',
children: [
'/guide/',
'/guide/getting-started',
'/guide/theming',
{
text: 'Vue Flow',
children: [
'/guide/vue-flow/config',
'/guide/vue-flow/state',
{
text: 'Actions',
link: '/typedocs/interfaces/Actions.html',
},
{
text: 'Getters',
link: '/typedocs/interfaces/Getters.html',
},
{
text: 'Events',
link: '/typedocs/interfaces/FlowEvents.html',
},
'/guide/vue-flow/slots',
],
},
'/guide/node',
'/guide/edge',
'/guide/composables',
{
text: 'Utilities',
children: ['/guide/utils/graph', '/guide/utils/instance', '/guide/utils/edge'],
},
{
text: 'Components',
children: [
'/guide/components/background',
'/guide/components/minimap',
'/guide/components/minimap-node',
'/guide/components/controls',
'/guide/components/control-button',
],
},
],
},
],
'/examples/': [
{
text: 'Examples',
children: [
'/examples/',
{
text: 'Nodes',
children: ['/examples/nodes/', '/examples/nodes/update-node', '/examples/nodes/nesting'],
},
{
text: 'Edges',
children: [
'/examples/edges/',
'/examples/edges/updatable-edge',
'/examples/edges/connection-line',
'/examples/edges/validation',
],
},
'/examples/save',
'/examples/dnd',
'/examples/empty',
'/examples/hidden',
'/examples/horizontal',
'/examples/interaction',
'/examples/teleport',
'/examples/multi',
'/examples/pinia',
'/examples/stress',
],
},
],
'/typedocs/': typedocSidebarEntries(),
},
navbar: [
{ text: `v${vueFlowVersion.value}`, link: '/' },
{ text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
{
text: 'Examples',
link: '/examples/',
activeMatch: '^/examples/',
},
{
text: 'TypeDocs',
link: '/typedocs/',
activeMatch: '^/typedocs/',
},
],
}),
layouts: {
Layout: resolve(__dirname, 'layouts/default.vue'),
},
clientConfigFile: path.resolve(__dirname, './clientAppEnhance.ts'),
} as Theme
docs/src/.vuepress/theme/layouts/default.vue
-67
View File
@@ -1,67 +0,0 @@
<script>
import 'virtual:windi.css'
import '@animxyz/core'
import '@braks/vue-flow/dist/style.css'
import '@braks/vue-flow/dist/theme-default.css'
import '../../assets/index.css'
</script>
<script setup>
import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
import ReactIcon from '~icons/logos/react'
import GithubIcon from '~icons/carbon/logo-github'
import DiscordIcon from '~icons/logos/discord-icon'
</script>
<template>
<ParentLayout>
<template #navbar-before>
<XyzTransition appear-visible xyz="fade perspective-1 down ease-out-back duration-10">
<div class="border-1 border-gray-300 bg-white dark:bg-gray-800 dark:(shadow-gray-700 shadow-md) shadow-lg select-none flex justify-center items-center mx-2 gap-6 px-4 py-2 rounded-lg">
<a
href="https://github.com/bcakmakoglu/vue-flow"
target="_blank" rel="noopener noreferrer"
aria-label="GitHub"
class="bg-white rounded-full relative group cursor-pointer flex justify-center items-center"
>
<GithubIcon class="text-black text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
<span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 mr-2 text-xs">
Contribute on GitHub!
</span>
</a>
<a
href="https://discord.gg/F4v6qE4Fuq"
target="_blank" rel="noopener noreferrer"
aria-label="Discord"
class="relative group cursor-pointer flex justify-center items-center"
>
<DiscordIcon class="text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
<span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 mr-2 text-xs">
Join the Discord server!
</span>
</a>
<a
href="https://reactflow.dev/"
target="_blank" rel="noopener noreferrer"
aria-label="React Flow"
class="relative group cursor-pointer flex justify-center items-center"
>
<ReactIcon class="text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
<span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 mr-2 text-xs">
Check out the original React Flow by Wbkd!
</span>
</a>
</div>
</XyzTransition>
<div class="hidden md:(block w-8) lg:w-12" />
</template>
<template #page-bottom>
<div class="page-footer">MIT Licensed | Copyright © 2021-present Burak Cakmakoglu</div>
</template>
</ParentLayout>
</template>
<style>
.page-footer {
@apply dark:(text-white bg-black) pt-[2rem] text-center;
border-top: 1px solid var(--c-border);
transition: border-color var(--t-color);
}
</style>
docs/src/.vuepress/assets/index.css → docs/src/assets/index.css
+21 -35
View File
@@ -1,52 +1,39 @@
:root {
--primary: #BB86FC;
--secondary: #03dac5;
--vp-c-brand: #10b981;
--vp-c-accent: #BB86FC;
--vp-c-bg-alt: rgb(249, 249, 249, 75%);
}
.dark {
--c-text-lighter: white !important;
--c-text: white !important;
--c-bg: black !important;
--vp-c-bg: rgba(0, 0, 0, 100%);
--vp-c-bg-alt: rgb(22, 27, 34, 75%);
--vp-c-bg-soft: rgb(22, 27, 34, 100%);
}
.dark .tip {
--c-bg-light: gray;
.VPNavBar.has-sidebar .content, .VPNav {
background-color: var(--vp-c-bg-alt) !important;
background-image: radial-gradient(transparent 1px, var(--vp-c-bg-alt) 1px) !important;
background-size: 4px 4px !important;
}
.tip {
--c-bg-light: white;
.dark .DocSearch {
@apply border shadow bg-zinc-800;
}
.dark .VPNavBarTitle.has-sidebar {
background-color: transparent !important;
}
.VPPage {
@apply px-12 py-6 md:(px-24);
}
html, body {
@apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
}
.home {
--content-width: 100%;
max-width: 100% !important;
@apply !px-0;
}
.page a {
@apply text-green-500 font-semibold;
}
.examples .page, .examples .page-meta, .footer, .sidebar {
@apply dark:(!bg-black text-white);
}
.examples .page {
--content-width: 100%;
}
.theme-default-content {
@apply overflow-scroll md:overflow-hidden;
}
.navbar {
@apply dark:bg-gray-900;
}
h1 {
@apply text-xl lg:text-4xl mb-4 font-bold;
}
@@ -102,10 +89,9 @@ ul li {
}
}
.theme-container.examples .theme-default-content .vue-repl pre, .theme-default-content .vue-repl pre[class*=language-] {
.vue-repl pre, .vue-repl pre[class*=language-] {
padding: unset;
margin: unset;
border-radius: unset;
line-height: unset;
}
docs/src/.vuepress/auto-imports.d.ts → docs/src/auto-imports.d.ts
Vendored
View File
docs/src/components.d.ts
Vendored
+40
View File
@@ -0,0 +1,40 @@
// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {
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']
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']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Sidebar: typeof import('./../components/examples/dnd/Sidebar.vue')['default']
Team: typeof import('./../components/home/Team.vue')['default']
TeleportableNode: typeof import('./../components/examples/teleport/TeleportableNode.vue')['default']
}
}
docs/src/examples/edges/validation.md
+1 -1
View File
@@ -8,7 +8,7 @@ layout: page
Connections can be validated before edges are created and nodes get connected.
## Using a handle in a custom node
```vue:no-line-numbers
```vue
<div>
[ ... ]
docs/src/guide/composables.md
+2 -2
View File
@@ -10,7 +10,7 @@ The composition API and the power of provide/inject allows us to act more flexib
a component tree.
Thus accessing the internal state of Vue Flow becomes super easy when using composition.
```vue:no-line-numbers
```vue
<script setup>
import { useVueFlow, VueFlow } from '@braks/vue-flow'
@@ -49,7 +49,7 @@ using viewpane transforms.
All functions can also be accessed from `useVueFlow`.
It requires a valid Vue Flow store in its context.
```vue:no-line-numbers
```vue
<script setup>
import { useZoomPanHelper } from '@braks/vue-flow'
docs/src/guide/edge.md
+12 -12
View File
@@ -13,7 +13,7 @@ You can check the full options for an edge element in the TypeDocs [here](/typed
Generally you create edges by adding them to the model-value or the edges prop of the Vue Flow component.
```vue:no-line-numbers
```vue
<script>
import { VueFlow } from '@braks/vue-flow'
@@ -59,7 +59,7 @@ For more advanced graphs that require more state access you will want to use the
you with an [`addEdges`](/typedocs/interfaces/Actions.html#addedges/) utility function, which you can use to add edges
directly to the state.
```vue:no-line-numbers
```vue
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
@@ -111,7 +111,7 @@ These edge types include `default` (bezier), `step`, `smoothstep` and `straight`
A bezier edge has a curved path.
```js:no-line-numbers
```js
const edges = [
{
id: 'e1-2',
@@ -125,7 +125,7 @@ const edges = [
A step edge has a straight path with a step towards the target.
```js:no-line-numbers{4}
```js{4}
const edges = [
{
id: 'e1-2',
@@ -140,7 +140,7 @@ const edges = [
The same as the step edge though with a border radius on the step (rounded step).
```js:no-line-numbers{4}
```js{4}
const edges = [
{
id: 'e1-2',
@@ -155,7 +155,7 @@ const edges = [
A simple straight path.
```js:no-line-numbers{4}
```js{4}
const edges = [
{
id: 'e1-2',
@@ -171,7 +171,7 @@ const edges = [
In addition to the default edge types from the previous chapter, you can define any amount of custom edge-types.
Edge-types are inferred from your edge's definition.
```js:no-line-numbers{5,11}
```js{5,11}
const edges = [
{
id: 'e1-2',
@@ -195,7 +195,7 @@ The easiest way to define custom edges is, by passing them as template slots.
Your custom edge-types are dynamically resolved to slot-names, meaning an edge with the type `custom`
will expect a slot to have the name `edge-custom`.
```vue:no-line-numbers{18,26}
```vue{18,26}
<script setup>
import { VueFlow } from '@braks/vue-flow'
import CustomEdge from './CustomEdge.vue'
@@ -239,7 +239,7 @@ turned into reactive objects.
Otherwise, vue will throw a warning in the console.
:::
```vue:no-line-numbers{5-7,28}
```vue{5-7,28}
<script setup>
import { markRaw } from 'vue'
import CustomEdge from './CustomEdge.vue'
@@ -277,7 +277,7 @@ const elements = ref([
You can also set a template per edge, which will overwrite the edge-type component but will retain
the type otherwise.
```vue:no-line-numbers
```vue
<script setup>
import { markRaw } from 'vue'
import CustomEdge from './CustomEdge.vue'
@@ -358,7 +358,7 @@ In addition to the event handlers that you can access through [`useVueFlow`](/gu
you can also pass in event handlers in your initial node definition, or you can access the node events through the `events` prop passed
to your node components.
```vue:no-line-numbers{19-26}
```vue{19-26}
<script setup>
import { VueFlow } from '@braks/vue-flow'
@@ -395,7 +395,7 @@ to forward callback functions to your custom components.
The `click` handler is part of the [`EdgeEventsHandler`](/typedocs/types/EdgeEventsHandler.html) type, meaning it will be
triggered when the edge is clicked.
```vue:no-line-numbers
```vue
<script lang="ts" setup>
import type { EdgeProps, EdgeEventsOn } from '@braks/vue-flow'
docs/src/guide/getting-started.md
+5 -5
View File
@@ -10,7 +10,7 @@
<CodeGroup>
<CodeGroupItem title="YARN" active>
```bash:no-line-numbers
```bash
yarn add @braks/vue-flow
```
@@ -19,7 +19,7 @@ yarn add @braks/vue-flow
<CodeGroupItem title="NPM">
```bash:no-line-numbers
```bash
npm i --save @braks/vue-flow
```
@@ -37,7 +37,7 @@ Together we call them
A node also needs a [xy-position](/typedocs/interfaces/XYPosition.html/). An edge needs at least a
source (node id) and a target (node id).
```vue:no-line-numbers
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
@@ -79,14 +79,14 @@ A basic setup would look like this:
<CodeGroup>
<CodeGroupItem title="Composition API" active>
@[code vue:no-line-numbers](../../../examples/vite/src/Basic/Basic.vue)
@[code vue](../../../examples/vite/src/Basic/Basic.vue)
</CodeGroupItem>
<CodeGroupItem title="Options API">
@[code vue:no-line-numbers](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
@[code vue](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
</CodeGroupItem>
</CodeGroup>
docs/src/guide/node.md
+13 -13
View File
@@ -14,7 +14,7 @@ You can check the full options for a node element [here](/typedocs/interfaces/No
Generally you create nodes by adding them to the model-value or the nodes prop of the Vue Flow component.
```vue:no-line-numbers
```vue
<script>
import { VueFlow } from '@braks/vue-flow'
@@ -55,7 +55,7 @@ For more advanced graphs that require more state access you will want to use the
you with an [`addNodes`](/typedocs/interfaces/Actions.html#addnodes/) utility function, which you can use to add nodes
directly to the state.
```vue:no-line-numbers
```vue
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
@@ -92,7 +92,7 @@ You can also apply changes using the [`applyNodeChanges`](/typedocs/interfaces/A
function,
which expects an array of [changes](/typedocs/types/NodeChange.html/) to be applied to the currently stored nodes.
```vue:no-line-numbers{11,17-22}
```vue{11,17-22}
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
@@ -138,7 +138,7 @@ It represents a branching point in your map.
You can specify the position of handles in the node definition.
```js:no-line-numbers{5-6}
```js{5-6}
const nodes = [
{
id: '1',
@@ -168,7 +168,7 @@ It represents an ending point of your map.
In addition to the default node types from the previous chapter, you can define any amount of custom node-types.
Node-types are inferred from your node's definition.
```js:no-line-numbers{5,11}
```js{5,11}
const nodes = [
{
id: '1',
@@ -198,7 +198,7 @@ The easiest way to define custom nodes is, by passing them as template slots.
Your custom node-types are dynamically resolved to slot-names, meaning a node with the type `custom`
will expect a slot to have the name `node-custom`.
```vue:no-line-numbers{9,16}
```vue{9,16}
<script setup>
import { VueFlow } from '@braks/vue-flow'
import CustomNode from './CustomNode.vue'
@@ -232,7 +232,7 @@ turned into reactive objects.
Otherwise, vue will throw a warning in the console.
:::
```vue:no-line-numbers{6-9,26}
```vue{6-9,26}
<script setup>
import { markRaw } from 'vue'
import CustomNode from './CustomNode.vue'
@@ -272,7 +272,7 @@ You can find a more advanced example [here](/examples/custom-node.html/).
You can also set a template per node, which will overwrite the node-type component but will retain
the type otherwise.
```vue:no-line-numbers{17}
```vue{17}
<script setup>
import { markRaw } from 'vue'
import CustomNode from './CustomNode.vue'
@@ -339,7 +339,7 @@ you can also pass in event handlers in your initial node definition, or you can
the `events` prop passed
to your node components.
```vue:no-line-numbers{9-13}
```vue{9-13}
<script setup>
import { VueFlow } from '@braks/vue-flow'
@@ -368,7 +368,7 @@ The `click` handler is part of the [`NodeEventsHandler`](/typedocs/types/NodeEve
will be
triggered when the node is clicked.
```vue:no-line-numbers
```vue
<script lang="ts" setup>
import type { NodeProps, NodeEventsOn } from '@braks/vue-flow'
@@ -405,7 +405,7 @@ To overwrite default theme styles check the [Theming section](/guide/theming.htm
When you create a new node type you also need to implement some styling. Your custom node has no default styles.
```css:no-line-numbers
```css
.vue-flow__node-custom {
background: #9CA8B3;
color: #fff;
@@ -435,7 +435,7 @@ or you can emit the `updateNodeInternals` event from your custom node component
- Using store action
```vue:no-line-numbers
```vue
<script setup>
import { useVueFlow } from '@braks/vue-flow'
@@ -449,7 +449,7 @@ const onSomeEvent = () => {
- Emitting event from custom component
```vue:no-line-numbers
```vue
<script setup>
const emits = defineEmits(['updateNodeInternals'])
docs/src/guide/theming.md
+7 -9
View File
@@ -3,7 +3,7 @@
VueFlow comes without any pre-injected stylings. Some necessary stylings have to be imported, though optional styles (i.e.
the default theme) can be skipped.
```css:no-line-numbers
```css
/* these are necessary styles for vue flow */
@import '@braks/vue-flow/dist/style.css';
@@ -20,7 +20,7 @@ your own CSS rules, pass style/class properties to the components or use the ava
You can customize the default theme by simply overwriting the class definitions with your own custom ones.
```css:no-line-numbers
```css
.vue-flow {
background: red;
}
@@ -30,7 +30,7 @@ You can customize the default theme by simply overwriting the class definitions
You can also pass a style or class attribute directly to the Vue Flow component.
```vue:no-line-numbers{4}
```vue{4}
<div style="height: 300px">
<VueFlow
v-model="elements"
@@ -41,7 +41,7 @@ You can also pass a style or class attribute directly to the Vue Flow component.
Nodes/Edges can also be styled with a style or class attribute.
```ts:no-line-numbers{8-12,20-27}
```ts{7-11,19-26}
const nodes = ref<Node[]>([
{
id: '1',
@@ -87,7 +87,7 @@ These variables can either be applied globally or you can define them on an elem
}
```
```ts:no-line-numbers{4-5}
```ts{4-5}
const elements = ref<Elements>([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -112,8 +112,6 @@ const elements = ref<Elements>([
| --vf-handle | Node handle color |
| --vf-connection-path | Connectionline color |
## Classes
| Name | Container |
@@ -126,7 +124,7 @@ const elements = ref<Elements>([
| .vue-flow__selection | User selection |
| .vue-flow__edges | Edges renderer wrapper |
| .vue-flow__edge | Edge element wrapper |
| .vue-flow__edge-{$type} | Edge type, either a custom or default type |
| .vue-flow__edge-{type} | Edge type, either a custom or default type |
| .vue-flow__edge .selected | Selected Edge |
| .vue-flow__edge .animated | Animated edge |
| .vue-flow__edge-path | Edge element svg path |
@@ -138,7 +136,7 @@ const elements = ref<Elements>([
| .vue-flow__nodes | Nodes renderer wrapper |
| .vue-flow__node | Node element wrapper |
| .vue-flow__node .selected | Selected Node |
| .vue-flow__node-{$type} | Node type, either a custom or default type |
| .vue-flow__node-{type} | Node type, either a custom or default type |
| .vue-flow__nodesselection | Nodes selection rect |
| .vue-flow__handle | Node handle element wrapper |
| .vue-flow__handle-bottom | Handle position bottom |
docs/src/guide/utils/edge.md
+1 -1
View File
@@ -2,7 +2,7 @@
All default edge components are exported and can be used or extended if necessary.
```vue:no-line-numbers
```vue
<script setup>
// CustomEdge.vue
import { EdgeProps, BezierEdge } from '@braks/vue-flow'
docs/src/guide/utils/graph.md
+4 -4
View File
@@ -8,7 +8,7 @@
- Example:
```vue:no-line-numbers{13}
```vue{13}
<script setup>
import { VueFlow, isEdge } from '@braks/vue-flow'
@@ -42,7 +42,7 @@ const toggleClass = () => {
- Example:
```vue:no-line-numbers{13}
```vue{13}
<script setup>
import { VueFlow, isNode } from '@braks/vue-flow'
@@ -81,7 +81,7 @@ of [`useVueFlow`](/guide/composables.html#usevueflow/)
- Example:
```vue:no-line-numbers{12}
```vue{12}
<script setup>
import { VueFlow, addEdge } from '@braks/vue-flow'
@@ -114,7 +114,7 @@ of [`useVueFlow`](/guide/composables.html#usevueflow/)
- Example:
```vue:no-line-numbers{12}
```vue{12}
<script setup>
import { VueFlow, updateEdge } from '@braks/vue-flow'
docs/src/guide/utils/instance.md
+7 -7
View File
@@ -11,7 +11,7 @@ instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents.html#panere
<CodeGroup>
<CodeGroupItem title="Composition API" active>
```vue:no-line-numbers
```vue
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
@@ -27,7 +27,7 @@ onPaneReady((instance) => instance.fitView())
<CodeGroupItem title="Options API">
```vue:no-line-numbers
```vue
<script>
import { VueFlow } from '@braks/vue-flow'
@@ -64,7 +64,7 @@ export default defineComponent({
- Example:
```ts:no-line-numbers
```ts
vueFlowInstance.project({ x: 100, y: 100 })
```
@@ -78,7 +78,7 @@ vueFlowInstance.project({ x: 100, y: 100 })
- Example:
```ts:no-line-numbers
```ts
vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
```
@@ -90,7 +90,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
- Example:
```ts:no-line-numbers
```ts
vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
```
@@ -102,7 +102,7 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
- Example:
```ts:no-line-numbers
```ts
vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
```
@@ -156,7 +156,7 @@ vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
- Example:
```ts:no-line-numbers
```ts
toObject = (): {
elements: FlowElements,
position: [x, y],
docs/src/guide/vue-flow/config.md
+18 -18
View File
@@ -7,7 +7,7 @@ as options to the [`useVueFlow`](/guide/composables.html#usevueflow/) composable
<CodeGroup>
<CodeGroupItem title="Props" active>
```vue:no-line-numbers
```vue
<!-- Pass configuration as props -->
<template>
<VueFlow :default-zoom="0.5" :max-zoom="4" :min-zoom="0.1" />
@@ -19,7 +19,7 @@ as options to the [`useVueFlow`](/guide/composables.html#usevueflow/) composable
<CodeGroupItem title="Composable">
```vue:no-line-numbers
```vue
<script setup>
import { useVueFlow } from '@braks/vue-flow'
@@ -42,7 +42,7 @@ by `useVueFlow`.
<CodeGroup>
<CodeGroupItem title="Props" active>
```vue:no-line-numbers{2,5-6,10}
```vue{2,5-6,10}
<script setup>
const defaultZoom = ref(1)
@@ -61,7 +61,7 @@ onMounted(() => {
<CodeGroupItem title="Composable">
```vue:no-line-numbers{2,7-8}
```vue{2,7-8}
<script setup>
const { defaultZoom } = useVueFlow({
defaultZoom: 0.5,
@@ -101,7 +101,7 @@ onMounted(() => {
- Example:
```vue:no-line-numbers
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
@@ -133,7 +133,7 @@ const elements = ref([
- Example:
```vue:no-line-numbers
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
@@ -163,7 +163,7 @@ const nodes = ref([
- Example:
```vue:no-line-numbers
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
@@ -198,7 +198,7 @@ const edges = ref([
- Example:
```vue:no-line-numbers
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
import CustomNode from './CustomNode.vue'
@@ -235,7 +235,7 @@ const edges = ref([
- Example:
```vue:no-line-numbers
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
import CustomEdge from './CustomEdge.vue'
@@ -275,7 +275,7 @@ const edges = ref([
- Example:
```vue:no-line-numbers
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
@@ -496,7 +496,7 @@ const edges = ref([
- Default:
```ts:no-line-numbers
```ts
[
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
@@ -557,7 +557,7 @@ const edges = ref([
- Example:
```vue:no-line-numbers{5-6,10}
```vue{5-6,10}
<script setup>
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -585,7 +585,7 @@ const elements = ref([
- Example:
```vue:no-line-numbers{5-6,10}
```vue{5-6,10}
<script setup>
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -605,7 +605,7 @@ const elements = ref([
- Default:
```ts:no-line-numbers
```ts
[
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
@@ -620,7 +620,7 @@ const elements = ref([
- Example:
```vue:no-line-numbers{5-6}
```vue{5-6}
<script setup>
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -676,7 +676,7 @@ const elements = ref([
- Example:
```vue:no-line-numbers{7-8,12}
```vue{7-8,12}
<script setup>
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -753,7 +753,7 @@ const elements = ref([
##### Boolean value
```vue:no-line-numbers{2}
```vue{2}
<template>
<VueFlow v-model="elements" auto-connect />
</template>
@@ -761,7 +761,7 @@ const elements = ref([
#### [Connector](/typedocs/types/Connector.html/)
```vue:no-line-numbers{6-18,22}
```vue{6-18,22}
<script setup>
import { ref } from 'vue'
docs/src/guide/vue-flow/slots.md
+2 -2
View File
@@ -15,7 +15,7 @@ You can use the default slot to add a sidebar or floating toolbar etc. to your g
The connection line slot allows you to pass down a custom connection line component, which will be used, when a connection
is triggered.
```vue:no-line-numbers
```vue
<template>
<VueFlow>
<template #connection-line="connectionLineProps">
@@ -31,7 +31,7 @@ The full description of connection line props can be found [here](/typedocs/inte
The zoom pane slot is placed inside the viewport transformation, so that it scales and moves with the current viewport zoom and position.
```vue:no-line-numbers
```vue
<template>
<VueFlow>
<template #zoom-pane>
docs/src/guide/vue-flow/state.md
+6 -6
View File
@@ -10,7 +10,7 @@ an already existing store from the current context.
Internal state can be manipulated, for example by adding new elements to the state. The
state is reactive and changes will be reflected on the graph.
```vue:no-line-numbers{4-6}
```vue{4-6}
<script setup>
import { useVueFlow } from '@braks/vue-flow'
@@ -34,7 +34,7 @@ to reading, writing and updating the state.
Consider this example, where we want to create a Sidebar that allows us to select all nodes.
```vue:no-line-numbers
```vue
<!-- Container.vue -->
<template>
<div>
@@ -54,7 +54,7 @@ the flow of information.
Instead, we can initialize a Vue Flow store instance __before__ the Sidebar is initialized, thus the instance becomes
available as an injection in the component tree.
```vue:no-line-numbers{5-6}
```vue{5-6}
<script>
// Container.vue
import { useVueFlow } from '@braks/vue-flow'
@@ -66,7 +66,7 @@ useVueFlow()
Now we can easily access our current state instance from our Sidebar without passing them as props.
```vue:no-line-numbers
```vue
<script setup>
import { useVueFlow } from '@braks/vue-flow'
@@ -102,7 +102,7 @@ State updates like removing elements or updating positions are applied by defaul
If you want to strictly control state changes you can disable this behavior by setting the `applyDefault` option/prop
to `false`.
```vue:no-line-numbers
```vue
<div style="height: 300px">
<VueFlow v-model="elements" :apply-default="false" />
</div>
@@ -120,7 +120,7 @@ Though it is necessary to pass a unique id for your Vue Flow state instance, oth
will create a new state instance
when mounted.
```vue:no-line-numbers{4,32}
```vue{4,32}
<script>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
docs/src/index.md
+8 -7
View File
@@ -1,8 +1,7 @@
---
home: true
layout: home
heroText: null
tagline: null
footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
---
<Home />
@@ -11,10 +10,12 @@ footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
<Banner />
</Suspense>
<client-only>
<Features />
<Features />
<XyzTransition appear-visible xyz="fade down ease-out-back">
<XyzTransition appear-visible xyz="fade down ease-out-back">
<Acknowledgement />
</XyzTransition>
</client-only>
</XyzTransition>
<XyzTransition appear-visible xyz="fade down ease-out-back">
<Team />
</XyzTransition>
docs/src/.vuepress/public/favicons/android-chrome-192x192.png → docs/src/public/favicons/android-chrome-192x192.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

docs/src/.vuepress/public/favicons/android-chrome-512x512.png → docs/src/public/favicons/android-chrome-512x512.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

docs/src/.vuepress/public/favicons/apple-touch-icon.png → docs/src/public/favicons/apple-touch-icon.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

docs/src/.vuepress/public/favicons/favicon-16x16.png → docs/src/public/favicons/favicon-16x16.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 375 B

After

Width:  |  Height:  |  Size: 375 B

docs/src/.vuepress/public/favicons/favicon-32x32.png → docs/src/public/favicons/favicon-32x32.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 744 B

After

Width:  |  Height:  |  Size: 744 B

docs/src/.vuepress/public/favicons/favicon.ico → docs/src/public/favicons/favicon.ico
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

docs/src/.vuepress/public/favicons/site.webmanifest → docs/src/public/favicons/site.webmanifest
View File