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

examples: add quasar example

Browse Source
This commit is contained in:
bcakmakoglu
2022-06-03 14:14:24 +02:00
committed by Braks
parent 8dd7c79700
commit 330d6d7eac
87 changed files with 2290 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
examples/quasar/.eslintignore Normal file
View File

@@ -0,0 +1,7 @@
/dist
/src-capacitor
/src-cordova
/.quasar
/node_modules
.eslintrc.js
/src-ssr

33
examples/quasar/.gitignore vendored Normal file
View File

@@ -0,0 +1,33 @@
.DS_Store
.thumbs.db
node_modules
# Quasar core related directories
.quasar
/dist
# Cordova related directories and files
/src-cordova/node_modules
/src-cordova/platforms
/src-cordova/plugins
/src-cordova/www
# Capacitor related directories and files
/src-capacitor/www
/src-capacitor/node_modules
# BEX related directories and files
/src-bex/www
/src-bex/js/core
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

33
examples/quasar/README.md Normal file
View File

@@ -0,0 +1,33 @@
# Quasar App (quasar-examples)
Vue Flow Quasar Examples
## Install the dependencies
```bash
yarn
# or
npm install
```
### Start the app in development mode (hot-code reloading, error reporting, etc.)
```bash
quasar dev
```
### Lint the files
```bash
yarn lint
# or
npm run lint
```
### Build the app for production
```bash
quasar build
```
### Customize the configuration
See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).

21
examples/quasar/index.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title><%= productName %></title>
<meta charset="utf-8">
<meta name="description" content="<%= productDescription %>">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="icon" type="image/ico" href="favicon.ico">
</head>
<body>
<!-- quasar:entry-point -->
</body>
</html>

29
examples/quasar/package.json Normal file
View File

@@ -0,0 +1,29 @@
{
"name": "quasar-examples",
"version": "0.0.1",
"description": "Vue Flow Quasar Examples",
"productName": "Quasar App",
"author": "bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>",
"private": true,
"scripts": {
"dev": "quasar dev",
"lint": "eslint --ext .js,.ts,.vue ./"
},
"dependencies": {
"@braks/vue-flow": "workspace:*",
"@quasar/extras": "^1.0.0",
"quasar": "^2.6.0",
"vue": "^3.2.15",
"vue-router": "^4.0.0"
},
"devDependencies": {
"@quasar/app-vite": "^1.0.0",
"@types/node": "^12.20.21",
"autoprefixer": "^10.4.2"
},
"engines": {
"node": "^18 || ^16 || ^14.19",
"npm": ">= 6.13.4",
"yarn": ">= 1.21.1"
}
}

26
examples/quasar/postcss.config.js Normal file
View File

@@ -0,0 +1,26 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
plugins: [
// https://github.com/postcss/autoprefixer
require('autoprefixer')({
overrideBrowserslist: [
'last 4 Chrome versions',
'last 4 Firefox versions',
'last 4 Edge versions',
'last 4 Safari versions',
'last 4 Android versions',
'last 4 ChromeAndroid versions',
'last 4 FirefoxAndroid versions',
'last 4 iOS versions',
],
}),
// https://github.com/elchininet/postcss-rtlcss
// If you want to support RTL css, then
// 1. yarn/npm install postcss-rtlcss
// 2. optionally set quasar.config.js > framework > lang to an RTL language
// 3. uncomment the following line:
// require('postcss-rtlcss')
],
}

BIN
examples/quasar/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
examples/quasar/public/icons/favicon-128x128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
examples/quasar/public/icons/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 859 B

BIN
examples/quasar/public/icons/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
examples/quasar/public/icons/favicon-96x96.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

202
examples/quasar/quasar.config.js Normal file
View File

@@ -0,0 +1,202 @@
/* eslint-env node */
/*
* This file runs in a Node context (it's NOT transpiled by Babel), so use only
* the ES6 features that are supported by your Node version. https://node.green/
*/
// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
/* eslint func-names: 0 */
/* eslint global-require: 0 */
const { configure } = require('quasar/wrappers')
module.exports = configure(function (/* ctx */) {
return {
eslint: {
// fix: true,
// include = [],
// exclude = [],
// rawOptions = {},
warnings: true,
errors: false,
},
// https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
// preFetch: true,
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-vite/boot-files
boot: [],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.css'],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v5',
// 'fontawesome-v6',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
],
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
build: {
target: {
browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
node: 'node16',
},
vueRouterMode: 'hash', // available values: 'hash', 'history'
// vueRouterBase,
// vueDevtools,
// vueOptionsAPI: false,
// rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
// publicPath: '/',
// analyze: true,
// env: {},
// rawDefine: {}
// ignorePublicFolder: true,
// minify: false,
// polyfillModulePreload: true,
// distDir
// extendViteConf (viteConf) {},
// viteVuePluginOptions: {},
// vitePlugins: [
// [ 'package-name', { ..options.. } ]
// ]
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
devServer: {
// https: true
open: true, // opens browser window automatically
},
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
framework: {
config: {},
// iconSet: 'material-icons', // Quasar icon set
// lang: 'en-US', // Quasar language pack
// For special cases outside of where the auto-import strategy can have an impact
// (like functional components as one of the examples),
// you can manually specify Quasar components/directives to be available everywhere:
//
// components: [],
// directives: [],
// Quasar plugins
plugins: [],
},
// animations: 'all', // --- includes all animations
// https://v2.quasar.dev/options/animations
animations: [],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#sourcefiles
// sourceFiles: {
// rootComponent: 'src/App.vue',
// router: 'src/router/index',
// store: 'src/store/index',
// registerServiceWorker: 'src-pwa/register-service-worker',
// serviceWorker: 'src-pwa/custom-service-worker',
// pwaManifestFile: 'src-pwa/manifest.json',
// electronMain: 'src-electron/electron-main',
// electronPreload: 'src-electron/electron-preload'
// },
// https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
ssr: {
// ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
// will mess up SSR
// extendSSRWebserverConf (esbuildConf) {},
// extendPackageJson (json) {},
pwa: false,
// manualStoreHydration: true,
// manualPostHydrationTrigger: true,
prodPort: 3000, // The default port that the production server should use
// (gets superseded if process.env.PORT is specified at runtime)
middlewares: [
'render', // keep this as last one
],
},
// https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
pwa: {
workboxMode: 'generateSW', // or 'injectManifest'
injectPwaMetaTags: true,
swFilename: 'sw.js',
manifestFilename: 'manifest.json',
useCredentialsForManifestTag: false,
// extendGenerateSWOptions (cfg) {}
// extendInjectManifestOptions (cfg) {},
// extendManifestJson (json) {}
// extendPWACustomSWConf (esbuildConf) {}
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true,
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
electron: {
// extendElectronMainConf (esbuildConf)
// extendElectronPreloadConf (esbuildConf)
inspectPort: 5858,
bundler: 'packager', // 'packager' or 'builder'
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
appId: 'quasar-examples',
},
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
bex: {
contentScripts: ['my-content-script'],
// extendBexScriptsConf (esbuildConf) {}
// extendBexManifestJson (json) {}
},
}
})

11
examples/quasar/src/App.vue Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'App',
})
</script>
<template>
<router-view />
</template>

15
examples/quasar/src/assets/quasar-logo-vertical.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 360">
<path
d="M43.4 303.4c0 3.8-2.3 6.3-7.1 6.3h-15v-22h14.4c4.3 0 6.2 2.2 6.2 5.2 0 2.6-1.5 4.4-3.4 5 2.8.4 4.9 2.5 4.9 5.5zm-8-13H24.1v6.9H35c2.1 0 4-1.3 4-3.8 0-2.2-1.3-3.1-3.7-3.1zm5.1 12.6c0-2.3-1.8-3.7-4-3.7H24.2v7.7h11.7c3.4 0 4.6-1.8 4.6-4zm36.3 4v2.7H56v-22h20.6v2.7H58.9v6.8h14.6v2.3H58.9v7.5h17.9zm23-5.8v8.5H97v-8.5l-11-13.4h3.4l8.9 11 8.8-11h3.4l-10.8 13.4zm19.1-1.8V298c0-7.9 5.2-10.7 12.7-10.7 7.5 0 13 2.8 13 10.7v1.4c0 7.9-5.5 10.8-13 10.8s-12.7-3-12.7-10.8zm22.7 0V298c0-5.7-3.9-8-10-8-6 0-9.8 2.3-9.8 8v1.4c0 5.8 3.8 8.1 9.8 8.1 6 0 10-2.3 10-8.1zm37.2-11.6v21.9h-2.9l-15.8-17.9v17.9h-2.8v-22h3l15.6 18v-18h2.9zm37.9 10.2v1.3c0 7.8-5.2 10.4-12.4 10.4H193v-22h11.2c7.2 0 12.4 2.8 12.4 10.3zm-3 0c0-5.3-3.3-7.6-9.4-7.6h-8.4V307h8.4c6 0 9.5-2 9.5-7.7V298zm50.8-7.6h-9.7v19.3h-3v-19.3h-9.7v-2.6h22.4v2.6zm34.4-2.6v21.9h-3v-10.1h-16.8v10h-2.8v-21.8h2.8v9.2H296v-9.2h2.9zm34.9 19.2v2.7h-20.7v-22h20.6v2.7H316v6.8h14.5v2.3H316v7.5h17.8zM24 340.2v7.3h13.9v2.4h-14v9.6H21v-22h20v2.7H24zm41.5 11.4h-9.8v7.9H53v-22h13.3c5.1 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6H66c3.1 0 5.3-1.5 5.3-4.7 0-3.3-2.2-4.1-5.3-4.1H55.7v8.8zm47.9 6.2H89l-2 4.3h-3.2l10.7-22.2H98l10.7 22.2h-3.2l-2-4.3zm-1-2.3l-6.3-13-6 13h12.2zm46.3-15.3v21.9H146v-17.2L135.7 358h-2.1l-10.2-15.6v17h-2.8v-21.8h3l11 16.9 11.3-17h3zm35 19.3v2.6h-20.7v-22h20.6v2.7H166v6.8h14.5v2.3H166v7.6h17.8zm47-19.3l-8.3 22h-3l-7.1-18.6-7 18.6h-3l-8.2-22h3.3L204 356l6.8-18.5h3.4L221 356l6.6-18.5h3.3zm10 11.6v-1.4c0-7.8 5.2-10.7 12.7-10.7 7.6 0 13 2.9 13 10.7v1.4c0 7.9-5.4 10.8-13 10.8-7.5 0-12.7-3-12.7-10.8zm22.8 0v-1.4c0-5.7-4-8-10-8s-9.9 2.3-9.9 8v1.4c0 5.8 3.8 8.2 9.8 8.2 6.1 0 10-2.4 10-8.2zm28.3 2.4h-9.8v7.9h-2.8v-22h13.2c5.2 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6h10.2c3 0 5.2-1.5 5.2-4.7 0-3.3-2.1-4.1-5.2-4.1h-10.2v8.8zm40.3-1.5l-6.8 5.6v6.4h-2.9v-22h2.9v12.3l15.2-12.2h3.7l-9.9 8.1 10.3 13.8h-3.6l-8.9-12z" />
<path fill="#050A14"
d="M188.4 71.7a10.4 10.4 0 01-20.8 0 10.4 10.4 0 1120.8 0zM224.2 45c-2.2-3.9-5-7.5-8.2-10.7l-12 7c-3.7-3.2-8-5.7-12.6-7.3a49.4 49.4 0 00-9.7 13.9 59 59 0 0140.1 14l7.6-4.4a57 57 0 00-5.2-12.5zM178 125.1c4.5 0 9-.6 13.4-1.7v-14a40 40 0 0012.5-7.2 47.7 47.7 0 00-7.1-15.3 59 59 0 01-32.2 27.7v8.7c4.4 1.2 8.9 1.8 13.4 1.8zM131.8 45c-2.3 4-4 8.1-5.2 12.5l12 7a40 40 0 000 14.4c5.7 1.5 11.3 2 16.9 1.5a59 59 0 01-8-41.7l-7.5-4.3c-3.2 3.2-6 6.7-8.2 10.6z" />
<path fill="#00B4FF"
d="M224.2 98.4c2.3-3.9 4-8 5.2-12.4l-12-7a40 40 0 000-14.5c-5.7-1.5-11.3-2-16.9-1.5a59 59 0 018 41.7l7.5 4.4c3.2-3.2 6-6.8 8.2-10.7zm-92.4 0c2.2 4 5 7.5 8.2 10.7l12-7a40 40 0 0012.6 7.3c4-4.1 7.3-8.8 9.7-13.8a59 59 0 01-40-14l-7.7 4.4c1.2 4.3 3 8.5 5.2 12.4zm46.2-80c-4.5 0-9 .5-13.4 1.7V34a40 40 0 00-12.5 7.2c1.5 5.7 4 10.8 7.1 15.4a59 59 0 0132.2-27.7V20a53.3 53.3 0 00-13.4-1.8z" />
<path fill="#00B4FF"
d="M178 9.2a62.6 62.6 0 11-.1 125.2A62.6 62.6 0 01178 9.2m0-9.2a71.7 71.7 0 100 143.5A71.7 71.7 0 00178 0z" />
<path fill="#050A14"
d="M96.6 212v4.3c-9.2-.8-15.4-5.8-15.4-17.8V180h4.6v18.4c0 8.6 4 12.6 10.8 13.5zm16-31.9v18.4c0 8.9-4.3 12.8-10.9 13.5v4.4c9.2-.7 15.5-5.6 15.5-18v-18.3h-4.7zM62.2 199v-2.2c0-12.7-8.8-17.4-21-17.4-12.1 0-20.7 4.7-20.7 17.4v2.2c0 12.8 8.6 17.6 20.7 17.6 1.5 0 3-.1 4.4-.3l11.8 6.2 2-3.3-8.2-4-6.4-3.1a32 32 0 01-3.6.2c-9.8 0-16-3.9-16-13.3v-2.2c0-9.3 6.2-13.1 16-13.1 9.9 0 16.3 3.8 16.3 13.1v2.2c0 5.3-2.1 8.7-5.6 10.8l4.8 2.4c3.4-2.8 5.5-7 5.5-13.2zM168 215.6h5.1L156 179.7h-4.8l17 36zM143 205l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.8-3.7H143zm133.7 10.7h5.2l-17.3-35.9h-4.8l17 36zm-25-10.7l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.7-3.7h-14.8zm73.8-2.5c6-1.2 9-5.4 9-11.4 0-8-4.5-10.9-12.9-10.9h-21.4v35.5h4.6v-31.3h16.5c5 0 8.5 1.4 8.5 6.7 0 5.2-3.5 7.7-8.5 7.7h-11.4v4.1h10.7l9.3 12.8h5.5l-9.9-13.2zm-117.4 9.9c-9.7 0-14.7-2.5-18.6-6.3l-2.2 3.8c5.1 5 11 6.7 21 6.7 1.6 0 3.1-.1 4.6-.3l-1.9-4h-3zm18.4-7c0-6.4-4.7-8.6-13.8-9.4l-10.1-1c-6.7-.7-9.3-2.2-9.3-5.6 0-2.5 1.4-4 4.6-5l-1.8-3.8c-4.7 1.4-7.5 4.2-7.5 8.9 0 5.2 3.4 8.7 13 9.6l11.3 1.2c6.4.6 8.9 2 8.9 5.4 0 2.7-2.1 4.7-6 5.8l1.8 3.9c5.3-1.6 8.9-4.7 8.9-10zm-20.3-21.9c7.9 0 13.3 1.8 18.1 5.7l1.8-3.9a30 30 0 00-19.6-5.9c-2 0-4 .1-5.7.3l1.9 4 3.5-.2z" />
<path fill="#00B4FF"
d="M.5 251.9c29.6-.5 59.2-.8 88.8-1l88.7-.3 88.7.3 44.4.4 44.4.6-44.4.6-44.4.4-88.7.3-88.7-.3a7981 7981 0 01-88.8-1z" />
<path fill="none" d="M-565.2 324H-252v15.8h-313.2z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

0
examples/quasar/src/boot/.gitkeep Normal file
View File

88
examples/quasar/src/components/BasicFlow.vue Normal file
View File

@@ -0,0 +1,88 @@
<script setup>
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
import { ref } from 'vue'
import { initialElements } from './initial-elements.js'
/**
* useVueFlow provides all event handlers and store properties
* You can pass the composable an object that has the same properties as the VueFlow component props
*/
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow()
/**
* Our elements
*/
const elements = ref(initialElements)
/**
* This is a Vue Flow event-hook which can be listened to from anywhere you call the composable, instead of only on the main component
*
* onPaneReady is called when viewpane & nodes have visible dimensions
*/
onPaneReady(({ fitView }) => {
fitView()
})
onNodeDragStop((e) => console.log('drag stop', e))
/**
* onConnect is called when a new connection is created.
* You can add additional properties to your new edge (like a type or label) or block the creation altogether
*/
onConnect((params) => addEdges([params]))
const dark = ref(false)
/**
* To update node properties you can simply use your elements v-model and mutate the elements directly
* Changes should always be reflected on the graph reactively, without the need to overwrite the elements
*/
const updatePos = () =>
elements.value.forEach((el) => {
console.log(el, elements.value)
if (isNode(el)) {
el.position = {
x: Math.random() * 400,
y: Math.random() * 400,
}
}
})
/**
* toObject transforms your current graph data to an easily persist-able object
*/
const logToObject = () => console.log(instance.value?.toObject())
/**
* Resets the current viewpane transformation (zoom & pan)
*/
const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
const toggleClass = () => {
dark.value = !dark.value
elements.value.forEach((el) => (el.class = dark.value ? 'dark' : 'light'))
}
</script>
<template>
<VueFlow v-model="elements" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
<Background pattern-color="#aaa" gap="8" />
<MiniMap />
<Controls />
<div class="controls">
<button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>
<button style="background-color: #6f3381; color: white" @click="updatePos">update positions</button>
<button
:style="{
backgroundColor: dark ? '#FFFFFB' : '#1C1C1C',
color: dark ? '#1C1C1C' : '#FFFFFB',
}"
@click="toggleClass"
>
toggle {{ dark ? 'light' : 'dark' }}
</button>
<button @click="logToObject">log toObject</button>
</div>
</VueFlow>
</template>

15
examples/quasar/src/components/CardComponent.vue Normal file
View File

@@ -0,0 +1,15 @@
<script>
import BasicFlow from './BasicFlow.vue'
export default {
components: { BasicFlow },
}
</script>
<template>
<div class="q-pa-md q-gutter-sm">
<q-card style="width: 500px; height: 500px">
<BasicFlow />
</q-card>
</div>
</template>

15
examples/quasar/src/components/CustomizedComponent.vue Normal file
View File

@@ -0,0 +1,15 @@
<script>
import CustomizedFlow from './CustomizedFlow.vue'
export default {
components: { CustomizedFlow },
}
</script>
<template>
<div class="q-pa-md q-gutter-sm">
<q-card style="width: 500px; height: 500px">
<CustomizedFlow />
</q-card>
</div>
</template>

99
examples/quasar/src/components/CustomizedFlow.vue Normal file
View File

@@ -0,0 +1,99 @@
<script setup>
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
import { ref } from 'vue'
import { initialElements } from './customized-elements.js'
/**
* useVueFlow provides all event handlers and store properties
* You can pass the composable an object that has the same properties as the VueFlow component props
*/
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow()
/**
* Our elements
*/
const elements = ref(initialElements)
/**
* This is a Vue Flow event-hook which can be listened to from anywhere you call the composable, instead of only on the main component
*
* onPaneReady is called when viewpane & nodes have visible dimensions
*/
onPaneReady(({ fitView }) => {
fitView()
})
onNodeDragStop((e) => console.log('drag stop', e))
/**
* onConnect is called when a new connection is created.
* You can add additional properties to your new edge (like a type or label) or block the creation altogether
*/
onConnect((params) => addEdges([params]))
const dark = ref(false)
/**
* To update node properties you can simply use your elements v-model and mutate the elements directly
* Changes should always be reflected on the graph reactively, without the need to overwrite the elements
*/
const updatePos = () =>
elements.value.forEach((el) => {
console.log(el, elements.value)
if (isNode(el)) {
el.position = {
x: Math.random() * 400,
y: Math.random() * 400,
}
}
})
/**
* toObject transforms your current graph data to an easily persist-able object
*/
const logToObject = () => console.log(instance.value?.toObject())
/**
* Resets the current viewpane transformation (zoom & pan)
*/
const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
const toggleClass = () => {
dark.value = !dark.value
elements.value.forEach((el) => (el.class = dark.value ? 'dark' : 'light'))
}
</script>
<template>
<VueFlow v-model="elements" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
<template #node-card="{ label }">
<q-card class="my-card text-white" style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)">
<q-card-section>
<div class="text-h6">Q-Card Node</div>
</q-card-section>
<q-card-section class="q-pt-none">
{{ label }}
</q-card-section>
</q-card>
</template>
<Background pattern-color="#aaa" gap="8" />
<MiniMap />
<Controls />
<div class="controls">
<button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>
<button style="background-color: #6f3381; color: white" @click="updatePos">update positions</button>
<button
:style="{
backgroundColor: dark ? '#FFFFFB' : '#1C1C1C',
color: dark ? '#1C1C1C' : '#FFFFFB',
}"
@click="toggleClass"
>
toggle {{ dark ? 'light' : 'dark' }}
</button>
<button @click="logToObject">log toObject</button>
</div>
</VueFlow>
</template>

39
examples/quasar/src/components/EssentialLink.vue Normal file
View File

@@ -0,0 +1,39 @@
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'EssentialLink',
props: {
title: {
type: String,
required: true,
},
caption: {
type: String,
default: '',
},
link: {
type: String,
default: '#',
},
icon: {
type: String,
default: '',
},
},
})
</script>
<template>
<router-link :to="link">
<q-item clickable>
<q-item-section>
<q-item-label>{{ title }}</q-item-label>
<q-item-label caption>{{ caption }}</q-item-label>
</q-item-section>
</q-item>
</router-link>
</template>

27
examples/quasar/src/components/PopupComponent.vue Normal file
View File

@@ -0,0 +1,27 @@
<script>
import { ref } from 'vue'
import BasicFlow from './BasicFlow.vue'
export default {
components: { BasicFlow },
setup() {
const show = ref(false)
return {
show,
isReady: ref(false),
}
},
}
</script>
<template>
<div class="q-pa-md q-gutter-sm">
<q-btn label="Open Flow" color="primary" @click="show = true" />
<q-dialog v-model="show" transition-show="jump-up" @show="isReady = true" @before-hide="isReady = false">
<q-card style="width: 500px; height: 500px">
<BasicFlow />
</q-card>
</q-dialog>
</div>
</template>

55
examples/quasar/src/components/customized-elements.js Normal file
View File

@@ -0,0 +1,55 @@
import { MarkerType } from '@braks/vue-flow'
/**
* You can pass elements together as a v-model value
* or split them up into nodes and edges and pass them to the `nodes` and `edges` props of Vue Flow (or useVueFlow composable)
*/
export const initialElements = [
{
id: '1',
type: 'card',
label: 'Node 1',
position: { x: 250, y: -50 },
class: 'light',
},
{
id: '2',
type: 'output',
label: 'Node 2',
position: { x: 100, y: 100 },
class: 'light',
},
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
{ id: '4', label: 'Node 4', position: { x: 150, y: 200 }, class: 'light' },
{
id: '5',
type: 'output',
label: 'Node 5',
position: { x: 300, y: 300 },
class: 'light',
},
{ id: 'e1-2', source: '1', target: '2', animated: true },
{
id: 'e1-3',
label: 'edge with arrowhead',
source: '1',
target: '3',
markerEnd: MarkerType.Arrow,
},
{
id: 'e4-5',
type: 'step',
label: 'step-edge',
source: '4',
target: '5',
style: { stroke: 'orange' },
labelBgStyle: { fill: 'orange' },
},
{
id: 'e3-4',
type: 'smoothstep',
label: 'smoothstep-edge',
source: '3',
target: '4',
},
]

55
examples/quasar/src/components/initial-elements.js Normal file
View File

@@ -0,0 +1,55 @@
import { MarkerType } from '@braks/vue-flow'
/**
* You can pass elements together as a v-model value
* or split them up into nodes and edges and pass them to the `nodes` and `edges` props of Vue Flow (or useVueFlow composable)
*/
export const initialElements = [
{
id: '1',
type: 'input',
label: 'Node 1',
position: { x: 250, y: 5 },
class: 'light',
},
{
id: '2',
type: 'output',
label: 'Node 2',
position: { x: 100, y: 100 },
class: 'light',
},
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
{ id: '4', label: 'Node 4', position: { x: 150, y: 200 }, class: 'light' },
{
id: '5',
type: 'output',
label: 'Node 5',
position: { x: 300, y: 300 },
class: 'light',
},
{ id: 'e1-2', source: '1', target: '2', animated: true },
{
id: 'e1-3',
label: 'edge with arrowhead',
source: '1',
target: '3',
markerEnd: MarkerType.Arrow,
},
{
id: 'e4-5',
type: 'step',
label: 'step-edge',
source: '4',
target: '5',
style: { stroke: 'orange' },
labelBgStyle: { fill: 'orange' },
},
{
id: 'e3-4',
type: 'smoothstep',
label: 'smoothstep-edge',
source: '3',
target: '4',
},
]

8
examples/quasar/src/components/models.ts Normal file
View File

@@ -0,0 +1,8 @@
export interface Todo {
id: number
content: string
}
export interface Meta {
totalCount: number
}

58
examples/quasar/src/css/app.css Normal file
View File

@@ -0,0 +1,58 @@
/* app global css */
@import "@braks/vue-flow/dist/style.css";
@import "@braks/vue-flow/dist/theme-default.css";
html,
body,
#app {
margin: 0;
height: 100%;
}
#app {
text-transform: uppercase;
font-family: 'JetBrains Mono', monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.vue-flow__minimap {
transform: scale(75%);
transform-origin: bottom right;
}
.basicflow .vue-flow__node.dark {
background: #1C1C1C;
color: #fffffb
}
.basicflow .controls {
position: absolute;
left: 10px;
top: 10px;
z-index: 4;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px
}
.basicflow .controls button {
padding: 5px;
border-radius: 5px;
font-weight: 500;
box-shadow: 0 5px 10px #0000004d;
cursor: pointer
}
.basicflow .controls button:hover {
opacity: .8;
transform: scale(105%);
transition: .25s all ease
}
svg:not(:root) {
overflow: visible;
}

7
examples/quasar/src/env.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
declare namespace NodeJS {
interface ProcessEnv {
NODE_ENV: string
VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined
VUE_ROUTER_BASE: string | undefined
}
}

71
examples/quasar/src/layouts/MainLayout.vue Normal file
View File

@@ -0,0 +1,71 @@
<script lang="ts">
import { defineComponent, ref } from 'vue'
import EssentialLink from 'components/EssentialLink.vue'
const linksList = [
{
title: 'Flow customized',
caption: 'Vue Flow using quasar components',
icon: 'code',
link: '/',
},
{
title: 'Flow in a popup',
caption: 'Vue Flow in a popup',
icon: 'code',
link: '/popup',
},
{
title: 'Flow in a card',
caption: 'Vue Flow in a card',
icon: 'code',
link: '/card',
},
]
export default defineComponent({
name: 'MainLayout',
components: {
EssentialLink,
},
setup() {
const leftDrawerOpen = ref(false)
return {
essentialLinks: linksList,
leftDrawerOpen,
toggleLeftDrawer() {
leftDrawerOpen.value = !leftDrawerOpen.value
},
}
},
})
</script>
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
<q-toolbar-title> Quasar App </q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
<q-list>
<q-item-label header> Examples </q-item-label>
<EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>

15
examples/quasar/src/pages/CardPage.vue Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import { defineComponent, ref } from 'vue'
import CardComponent from 'components/CardComponent.vue'
export default defineComponent({
name: 'IndexPage',
components: { CardComponent },
})
</script>
<template>
<q-page class="row items-center justify-evenly">
<CardComponent title="Card component" active></CardComponent>
</q-page>
</template>

19
examples/quasar/src/pages/ErrorNotFound.vue Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'ErrorNotFound',
})
</script>
<template>
<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
<div>
<div style="font-size: 30vh">404</div>
<div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
<q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="Go Home" no-caps />
</div>
</div>
</template>

15
examples/quasar/src/pages/IndexPage.vue Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import { defineComponent } from 'vue'
import CustomizedComponent from 'components/CustomizedComponent.vue'
export default defineComponent({
name: 'IndexPage',
components: { CustomizedComponent },
})
</script>
<template>
<q-page class="row items-center justify-evenly">
<CustomizedComponent title="Example component" active></CustomizedComponent>
</q-page>
</template>

15
examples/quasar/src/pages/PopupPage.vue Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import PopupComponent from 'components/PopupComponent.vue'
import { defineComponent } from 'vue'
export default defineComponent({
name: 'IndexPage',
components: { PopupComponent },
})
</script>
<template>
<q-page class="row items-center justify-evenly">
<PopupComponent title="Popup component" active></PopupComponent>
</q-page>
</template>

7
examples/quasar/src/quasar.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
// Forces TS to apply `@quasar/app-vite` augmentations of `quasar` package
// Removing this would break `quasar/wrappers` imports as those typings are declared
// into `@quasar/app-vite`
// As a side effect, since `@quasar/app-vite` reference `quasar` to augment it,
// this declaration also apply `quasar` own
// augmentations (eg. adds `$q` into Vue component context)
/// <reference types="@quasar/app-vite" />

33
examples/quasar/src/router/index.ts Normal file
View File

@@ -0,0 +1,33 @@
import { route } from 'quasar/wrappers'
import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import routes from './routes'
/*
* If not building with SSR mode, you can
* directly export the Router instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Router instance.
*/
export default route(function (/* { store, ssrContext } */) {
const createHistory = process.env.SERVER
? createMemoryHistory
: process.env.VUE_ROUTER_MODE === 'history'
? createWebHistory
: createWebHashHistory
const Router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
routes,
// Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
history: createHistory(process.env.VUE_ROUTER_BASE),
})
return Router
})

28
examples/quasar/src/router/routes.ts Normal file
View File

@@ -0,0 +1,28 @@
import type { RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
},
{
path: '/popup',
component: () => import('layouts/MainLayout.vue'),
children: [{ path: '', component: () => import('pages/PopupPage.vue') }],
},
{
path: '/card',
component: () => import('layouts/MainLayout.vue'),
children: [{ path: '', component: () => import('pages/CardPage.vue') }],
},
// Always leave this as last one,
// but you can also remove it
{
path: '/:catchAll(.*)*',
component: () => import('pages/ErrorNotFound.vue'),
},
]
export default routes

10
examples/quasar/src/shims-vue.d.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
/// <reference types="vite/client" />
/// <reference types="vue/ref-macros" />
// Mocks all files ending in `.vue` showing them as plain Vue instances
declare module '*.vue' {
import type { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}

41
examples/quasar/tsconfig.json Normal file
View File

@@ -0,0 +1,41 @@
{
"extends": "@quasar/app-vite/tsconfig-preset",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": [
"src/*"
],
"app/*": [
"*"
],
"components/*": [
"src/components/*"
],
"layouts/*": [
"src/layouts/*"
],
"pages/*": [
"src/pages/*"
],
"assets/*": [
"src/assets/*"
],
"boot/*": [
"src/boot/*"
],
"stores/*": [
"src/stores/*"
]
}
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"src-pwa/*.d.ts",
"src-bex/*.d.ts",
"src-ssr/*.d.ts"
]
}

2
examples/vite/.eslintrc.js
View File

@@ -3,5 +3,5 @@ module.exports = {
'no-use-before-define': 0,
'no-console': 0,
},
extends: ['../.eslintrc.js'],
extends: ['../../.eslintrc.js'],
}

4
examples/vite/index.css
View File

@@ -1,8 +1,8 @@
/* import the required styles */
@import '../node_modules/@braks/vue-flow/dist/style.css';
@import 'node_modules/@braks/vue-flow/dist/style.css';
/* import the default theme (optional) */
@import '../node_modules/@braks/vue-flow/dist/theme-default.css';
@import 'node_modules/@braks/vue-flow/dist/theme-default.css';
body {
color: #111;

2
examples/vite/index.html
View File

@@ -8,6 +8,6 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="main.ts"></script>
<script type="module" src="./main.ts"></script>
</body>
</html>

8
examples/vite/package.json
View File

@@ -1,12 +1,10 @@
{
"name": "examples",
"name": "vite-examples",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "../node_modules/.bin/vite",
"build": "../node_modules/.bin/vite build",
"serve": "../node_modules/.bin/vite serve",
"lint": "eslint --ext \\\".js,.jsx,.ts,.tsx\\\" --fix --ignore-path .gitignore ."
"dev": "vite",
"lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
},
"dependencies": {
"@braks/vue-flow": "workspace:*"

4
examples/vite/src/Basic/Basic.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '../../packages/vue-flow'
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '../../packages/vue-flow'
import type { Elements } from '@braks/vue-flow'
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
const elements = ref<Elements>([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },

4
examples/vite/src/Basic/BasicOptionsAPI.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import type { Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '../../packages/vue-flow'
import type { Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
export default defineComponent({
name: 'BasicOptionsAPI',

4
examples/vite/src/Basic/ResizableNode.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Position, ValidConnectionFunc } from '../../packages/vue-flow'
import { Handle } from '../../packages/vue-flow'
import type { Position, ValidConnectionFunc } from '@braks/vue-flow'
import { Handle } from '@braks/vue-flow'
interface Props {
id: string

4
examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '../../packages/vue-flow'
import { Background, BackgroundVariant, VueFlow } from '../../packages/vue-flow'
import type { Elements } from '@braks/vue-flow'
import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
import ConnectionLine from './ConnectionLine.vue'
const elements = ref<Elements>([

4
examples/vite/src/CustomNode/ColorSelectorNode.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import type { Connection, Edge, NodeProps } from '../../packages/vue-flow'
import { Handle, Position } from '../../packages/vue-flow'
import type { Connection, Edge, NodeProps } from '@braks/vue-flow'
import { Handle, Position } from '@braks/vue-flow'
interface ColorSelectorNodeProps extends NodeProps {
data: {

4
examples/vite/src/CustomNode/CustomNode.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements, Node, SnapGrid } from '../../packages/vue-flow'
import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '../../packages/vue-flow'
import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow'
import ColorSelectorNode from './ColorSelectorNode.vue'
const elements = ref<Elements>([])

4
examples/vite/src/DragNDrop/DnD.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Node } from '../../packages/vue-flow'
import { VueFlow, useVueFlow } from '../../packages/vue-flow'
import type { Node } from '@braks/vue-flow'
import { VueFlow, useVueFlow } from '@braks/vue-flow'
import Sidebar from './Sidebar.vue'
let id = 0

4
examples/vite/src/EdgeTypes/EdgeTypesExample.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { FlowInstance } from '../../packages/vue-flow'
import { Controls, MiniMap, VueFlow } from '../../packages/vue-flow'
import type { FlowInstance } from '@braks/vue-flow'
import { Controls, MiniMap, VueFlow } from '@braks/vue-flow'
import { getElements } from './utils'
const onLoad = (flowInstance: FlowInstance) => {

4
examples/vite/src/EdgeTypes/utils.ts
View File

@@ -1,5 +1,5 @@
import type { Elements } from '../../packages/vue-flow'
import { Position } from '../../packages/vue-flow'
import type { Elements } from '@braks/vue-flow'
import { Position } from '@braks/vue-flow'
const nodeWidth = 80
const nodeGapWidth = nodeWidth * 2

4
examples/vite/src/Edges/CustomEdge.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { EdgeProps, Position } from '../../packages/vue-flow'
import { getBezierPath, getEdgeCenter, useVueFlow } from '../../packages/vue-flow'
import type { EdgeProps, Position } from '@braks/vue-flow'
import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
interface CustomEdgeProps<T = any> extends EdgeProps<T> {
id: string

4
examples/vite/src/Edges/CustomEdge2.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { EdgeProps, Position } from '../../packages/vue-flow'
import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '../../packages/vue-flow'
import type { EdgeProps, Position } from '@braks/vue-flow'
import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@braks/vue-flow'
interface CustomEdgeProps extends EdgeProps {
source: string

4
examples/vite/src/Edges/EdgesExample.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Edge, Node } from '../../packages/vue-flow'
import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
import type { Edge, Node } from '@braks/vue-flow'
import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
import CustomEdge from './CustomEdge.vue'
import CustomEdge2 from './CustomEdge2.vue'
import CustomLabel from './CustomLabel.vue'

4
examples/vite/src/Empty/EmptyExample.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Node } from '../../packages/vue-flow'
import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
import type { Node } from '@braks/vue-flow'
import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()

4
examples/vite/src/FloatingEdges/FloatingConnectionLine.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { GraphNode, Position } from '../../packages/vue-flow'
import { getBezierPath } from '../../packages/vue-flow'
import type { GraphNode, Position } from '@braks/vue-flow'
import { getBezierPath } from '@braks/vue-flow'
import { getEdgeParams } from './floating-edge-utils'
interface FloatingConnectionLineProps {

4
examples/vite/src/FloatingEdges/FloatingEdge.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import type { EdgeProps, GraphNode, MarkerType } from '../../packages/vue-flow'
import { getBezierPath } from '../../packages/vue-flow'
import type { EdgeProps, GraphNode, MarkerType } from '@braks/vue-flow'
import { getBezierPath } from '@braks/vue-flow'
import { getEdgeParams } from './floating-edge-utils'
interface FloatingEdgeProps extends EdgeProps {

2
examples/vite/src/FloatingEdges/FloatingEdges.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
import FloatingEdge from './FloatingEdge.vue'
import FloatingConnectionLine from './FloatingConnectionLine.vue'
import { createElements } from './floating-edge-utils'

4
examples/vite/src/FloatingEdges/floating-edge-utils.ts
View File

@@ -1,5 +1,5 @@
import type { Edge, GraphNode, XYPosition } from '../../packages/vue-flow'
import { MarkerType, Position } from '../../packages/vue-flow'
import type { Edge, GraphNode, XYPosition } from '@braks/vue-flow'
import { MarkerType, Position } from '@braks/vue-flow'
// this helper function returns the intersection point
// of the line between the center of the intersectionNode and the target node

2
examples/vite/src/Hidden/HiddenExample.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
const isHidden = ref(false)

2
examples/vite/src/Interaction/InteractionExample.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
const {
nodesDraggable,

4
examples/vite/src/Layouting/LayoutingExample.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import dagre from 'dagre'
import type { CoordinateExtent, Elements } from '../../packages/vue-flow'
import { ConnectionMode, Controls, Position, VueFlow, isNode } from '../../packages/vue-flow'
import type { CoordinateExtent, Elements } from '@braks/vue-flow'
import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@braks/vue-flow'
import initialElements from './initial-elements'
const dagreGraph = new dagre.graphlib.Graph()

2
examples/vite/src/Layouting/initial-elements.ts
View File

@@ -1,4 +1,4 @@
import type { Elements, XYPosition } from '../../packages/vue-flow'
import type { Elements, XYPosition } from '@braks/vue-flow'
const position: XYPosition = { x: 0, y: 0 }

4
examples/vite/src/MultiFlows/Flow.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '../../packages/vue-flow'
import { Background, VueFlow } from '../../packages/vue-flow'
import type { Elements } from '@braks/vue-flow'
import { Background, VueFlow } from '@braks/vue-flow'
const initialElements: Elements = [
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },

4
examples/vite/src/Nesting/GroupNode.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { Handle, Position, getNodesInside, useVueFlow } from '../../packages/vue-flow'
import type { NodeProps } from '../../packages/vue-flow'
import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
import type { NodeProps } from '@braks/vue-flow'
const props = defineProps<NodeProps>()
const { onNodeDragStop, getNodes, viewport } = useVueFlow()

2
examples/vite/src/Nesting/Nesting.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
fitViewOnInit: true,

4
examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Connection, Edge, Elements, FlowInstance } from '../../packages/vue-flow'
import { Position, VueFlow, addEdge, isEdge } from '../../packages/vue-flow'
import type { Connection, Edge, Elements, FlowInstance } from '@braks/vue-flow'
import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
const initialElements: Elements = [
{

4
examples/vite/src/Overview/Overview.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '../../packages/vue-flow'
import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '../../packages/vue-flow'
import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '@braks/vue-flow'
import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)

4
examples/vite/src/Provider/ProviderExample.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements, FlowInstance } from '../../packages/vue-flow'
import { ConnectionMode, Controls, VueFlow, useVueFlow } from '../../packages/vue-flow'
import type { Elements, FlowInstance } from '@braks/vue-flow'
import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
import Sidebar from './Sidebar.vue'
const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)

2
examples/vite/src/Provider/Sidebar.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { useVueFlow } from '../../packages/vue-flow'
import { useVueFlow } from '@braks/vue-flow'
const { nodesSelectionActive, addSelectedNodes, getNodes, viewport } = useVueFlow()
const selectAll = () => {

4
examples/vite/src/RGBFlow/RGBFlow.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { templateRef } from '@vueuse/core'
import type { Elements, FlowInstance } from '../../packages/vue-flow'
import { VueFlow } from '../../packages/vue-flow'
import type { Elements, FlowInstance } from '@braks/vue-flow'
import { VueFlow } from '@braks/vue-flow'
import RGBNode from './RGBNode.vue'
import RGBOutputNode from './RGBOutputNode.vue'

4
examples/vite/src/RGBFlow/RGBNode.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import type { NodeProps } from '../../packages/vue-flow'
import { Handle, Position } from '../../packages/vue-flow'
import type { NodeProps } from '@braks/vue-flow'
import { Handle, Position } from '@braks/vue-flow'
interface RGBNodeProps extends NodeProps {
data: {

4
examples/vite/src/RGBFlow/RGBOutputNode.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { NodeProps } from '../../packages/vue-flow'
import { Handle, Position } from '../../packages/vue-flow'
import type { NodeProps } from '@braks/vue-flow'
import { Handle, Position } from '@braks/vue-flow'
interface RBGOutputNodeProps extends NodeProps {
rgb: string

4
examples/vite/src/SaveRestore/Controls.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { FlowExportObject, Node } from '../../packages/vue-flow'
import { useVueFlow, useZoomPanHelper } from '../../packages/vue-flow'
import type { FlowExportObject, Node } from '@braks/vue-flow'
import { useVueFlow, useZoomPanHelper } from '@braks/vue-flow'
const flowKey = 'example-flow'
const state = useStorage<FlowExportObject>(flowKey, {

4
examples/vite/src/SaveRestore/SaveRestoreExample.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '../../packages/vue-flow'
import { VueFlow } from '../../packages/vue-flow'
import type { Elements } from '@braks/vue-flow'
import { VueFlow } from '@braks/vue-flow'
import Controls from './Controls.vue'
const initialElements: Elements = [

2
examples/vite/src/Stress/StressExample.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { VueFlow, useVueFlow } from '../../packages/vue-flow'
import { VueFlow, useVueFlow } from '@braks/vue-flow'
import { getElements } from './utils'
const { nodes, edges } = getElements(10, 10)

2
examples/vite/src/Stress/utils.ts
View File

@@ -1,4 +1,4 @@
import type { Edge, Node } from '../../packages/vue-flow'
import type { Edge, Node } from '@braks/vue-flow'
export function getElements(xElements = 10, yElements = 10) {
const initialNodes: Node[] = []

4
examples/vite/src/Switch/SwitchExample.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '../../packages/vue-flow'
import { VueFlow } from '../../packages/vue-flow'
import type { Elements } from '@braks/vue-flow'
import { VueFlow } from '@braks/vue-flow'
const elementsA: Elements = [
{ id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },

2
examples/vite/src/Unidirectional/CustomNode.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import { Handle, Position } from '../../packages/vue-flow'
import { Handle, Position } from '@braks/vue-flow'
interface Props {
id: string

4
examples/vite/src/Unidirectional/UnidirectionalExample.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements, Node } from '../../packages/vue-flow'
import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '../../packages/vue-flow'
import type { Elements, Node } from '@braks/vue-flow'
import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@braks/vue-flow'
import CustomNode from './CustomNode.vue'
const initialElements: Elements = [

4
examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '../../packages/vue-flow'
import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
const initialElements: Elements = [
{

4
examples/vite/src/UpdateNode/UpdateNodeExample.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '../../packages/vue-flow'
import { VueFlow } from '../../packages/vue-flow'
import type { Elements } from '@braks/vue-flow'
import { VueFlow } from '@braks/vue-flow'
const initialElements: Elements = [
{ id: '1', label: '-', position: { x: 100, y: 100 } },

4
examples/vite/src/Validation/CustomInput.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { ValidConnectionFunc } from '../../packages/vue-flow'
import { Handle, Position } from '../../packages/vue-flow'
import type { ValidConnectionFunc } from '@braks/vue-flow'
import { Handle, Position } from '@braks/vue-flow'
interface CustomInputProps {
isValidTargetPos: ValidConnectionFunc

4
examples/vite/src/Validation/CustomNode.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { NodeProps, ValidConnectionFunc } from '../../packages/vue-flow'
import { Handle, Position } from '../../packages/vue-flow'
import type { NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
import { Handle, Position } from '@braks/vue-flow'
interface CustomNodeProps extends NodeProps {
id: string

4
examples/vite/src/Validation/ValidationExample.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Connection, FlowInstance, OnConnectStartParams } from '../../packages/vue-flow'
import { VueFlow, useVueFlow } from '../../packages/vue-flow'
import type { Connection, FlowInstance, OnConnectStartParams } from '@braks/vue-flow'
import { VueFlow, useVueFlow } from '@braks/vue-flow'
import CustomInput from './CustomInput.vue'
import CustomNode from './CustomNode.vue'

6
examples/vite/tsconfig.json
View File

@@ -1,6 +1,6 @@
{
"compilerOptions": {
"baseUrl": "..",
"baseUrl": ".",
"module": "ESNext",
"target": "es2017",
"lib": ["DOM", "ESNext"],
@@ -17,10 +17,10 @@
"forceConsistentCasingInFileNames": true,
"types": ["vite/client"],
"paths": {
"~/*": ["../package/src/*"]
"~/*": ["../../packages/vue-flow/src/*"]
}
},
"exclude": [
"../node_modules", "dist"],
"node_modules", "dist"],
"references": [{ "path": "./tsconfig.node.json"}]
}

2
examples/vite/vite.config.ts
View File

@@ -9,7 +9,7 @@ export default defineConfig({
resolve: {
dedupe: ['vue'],
alias: {
'~': resolve('../packages/vue-flow/src'),
'~': resolve('../../packages/vue-flow/src'),
},
},
plugins: [

2
package.json
View File

@@ -3,7 +3,7 @@
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "pnpm --dir examples dev",
"dev": "pnpm --dir examples/vite dev",
"docs": "pnpm --dir docs dev",
"postrelease": "git-cliff --output CHANGELOG.md && git add CHANGELOG.md && git commit -m \"chore: Update CHANGELOG.md\"",
"release": "turbo run release",

1179
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff