diff --git a/examples/quasar/.eslintignore b/examples/quasar/.eslintignore
new file mode 100644
index 00000000..7b59e09d
--- /dev/null
+++ b/examples/quasar/.eslintignore
@@ -0,0 +1,7 @@
+/dist
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules
+.eslintrc.js
+/src-ssr
diff --git a/examples/quasar/.gitignore b/examples/quasar/.gitignore
new file mode 100644
index 00000000..553e1345
--- /dev/null
+++ b/examples/quasar/.gitignore
@@ -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
diff --git a/examples/quasar/README.md b/examples/quasar/README.md
new file mode 100644
index 00000000..f40ef5cc
--- /dev/null
+++ b/examples/quasar/README.md
@@ -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).
diff --git a/examples/quasar/index.html b/examples/quasar/index.html
new file mode 100644
index 00000000..3c8c78f0
--- /dev/null
+++ b/examples/quasar/index.html
@@ -0,0 +1,21 @@
+
+
+
+ <%= productName %>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/quasar/package.json b/examples/quasar/package.json
new file mode 100644
index 00000000..9620c7c9
--- /dev/null
+++ b/examples/quasar/package.json
@@ -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"
+ }
+}
diff --git a/examples/quasar/postcss.config.js b/examples/quasar/postcss.config.js
new file mode 100644
index 00000000..01097c3b
--- /dev/null
+++ b/examples/quasar/postcss.config.js
@@ -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')
+ ],
+}
diff --git a/examples/quasar/public/favicon.ico b/examples/quasar/public/favicon.ico
new file mode 100644
index 00000000..ae7bbdb7
Binary files /dev/null and b/examples/quasar/public/favicon.ico differ
diff --git a/examples/quasar/public/icons/favicon-128x128.png b/examples/quasar/public/icons/favicon-128x128.png
new file mode 100644
index 00000000..14011761
Binary files /dev/null and b/examples/quasar/public/icons/favicon-128x128.png differ
diff --git a/examples/quasar/public/icons/favicon-16x16.png b/examples/quasar/public/icons/favicon-16x16.png
new file mode 100644
index 00000000..679063a3
Binary files /dev/null and b/examples/quasar/public/icons/favicon-16x16.png differ
diff --git a/examples/quasar/public/icons/favicon-32x32.png b/examples/quasar/public/icons/favicon-32x32.png
new file mode 100644
index 00000000..fd1fbc6f
Binary files /dev/null and b/examples/quasar/public/icons/favicon-32x32.png differ
diff --git a/examples/quasar/public/icons/favicon-96x96.png b/examples/quasar/public/icons/favicon-96x96.png
new file mode 100644
index 00000000..e93b80a0
Binary files /dev/null and b/examples/quasar/public/icons/favicon-96x96.png differ
diff --git a/examples/quasar/quasar.config.js b/examples/quasar/quasar.config.js
new file mode 100644
index 00000000..cf32d061
--- /dev/null
+++ b/examples/quasar/quasar.config.js
@@ -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) {}
+ },
+ }
+})
diff --git a/examples/quasar/src/App.vue b/examples/quasar/src/App.vue
new file mode 100644
index 00000000..4e94b28b
--- /dev/null
+++ b/examples/quasar/src/App.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
diff --git a/examples/quasar/src/assets/quasar-logo-vertical.svg b/examples/quasar/src/assets/quasar-logo-vertical.svg
new file mode 100644
index 00000000..82108310
--- /dev/null
+++ b/examples/quasar/src/assets/quasar-logo-vertical.svg
@@ -0,0 +1,15 @@
+
\ No newline at end of file
diff --git a/examples/quasar/src/boot/.gitkeep b/examples/quasar/src/boot/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/examples/quasar/src/components/BasicFlow.vue b/examples/quasar/src/components/BasicFlow.vue
new file mode 100644
index 00000000..4ede956f
--- /dev/null
+++ b/examples/quasar/src/components/BasicFlow.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/quasar/src/components/CardComponent.vue b/examples/quasar/src/components/CardComponent.vue
new file mode 100644
index 00000000..1bd5bd9f
--- /dev/null
+++ b/examples/quasar/src/components/CardComponent.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/quasar/src/components/CustomizedComponent.vue b/examples/quasar/src/components/CustomizedComponent.vue
new file mode 100644
index 00000000..09db8246
--- /dev/null
+++ b/examples/quasar/src/components/CustomizedComponent.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/quasar/src/components/CustomizedFlow.vue b/examples/quasar/src/components/CustomizedFlow.vue
new file mode 100644
index 00000000..9dda14f8
--- /dev/null
+++ b/examples/quasar/src/components/CustomizedFlow.vue
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+ Q-Card Node
+
+
+
+ {{ label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/quasar/src/components/EssentialLink.vue b/examples/quasar/src/components/EssentialLink.vue
new file mode 100644
index 00000000..ae26b1ca
--- /dev/null
+++ b/examples/quasar/src/components/EssentialLink.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ {{ title }}
+ {{ caption }}
+
+
+
+
diff --git a/examples/quasar/src/components/PopupComponent.vue b/examples/quasar/src/components/PopupComponent.vue
new file mode 100644
index 00000000..ff5d12a1
--- /dev/null
+++ b/examples/quasar/src/components/PopupComponent.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/quasar/src/components/customized-elements.js b/examples/quasar/src/components/customized-elements.js
new file mode 100644
index 00000000..0fb79b27
--- /dev/null
+++ b/examples/quasar/src/components/customized-elements.js
@@ -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',
+ },
+]
diff --git a/examples/quasar/src/components/initial-elements.js b/examples/quasar/src/components/initial-elements.js
new file mode 100644
index 00000000..49bd96e8
--- /dev/null
+++ b/examples/quasar/src/components/initial-elements.js
@@ -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',
+ },
+]
diff --git a/examples/quasar/src/components/models.ts b/examples/quasar/src/components/models.ts
new file mode 100644
index 00000000..dc17c2f9
--- /dev/null
+++ b/examples/quasar/src/components/models.ts
@@ -0,0 +1,8 @@
+export interface Todo {
+ id: number
+ content: string
+}
+
+export interface Meta {
+ totalCount: number
+}
diff --git a/examples/quasar/src/css/app.css b/examples/quasar/src/css/app.css
new file mode 100644
index 00000000..da233ba1
--- /dev/null
+++ b/examples/quasar/src/css/app.css
@@ -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;
+}
diff --git a/examples/quasar/src/env.d.ts b/examples/quasar/src/env.d.ts
new file mode 100644
index 00000000..503c2b65
--- /dev/null
+++ b/examples/quasar/src/env.d.ts
@@ -0,0 +1,7 @@
+declare namespace NodeJS {
+ interface ProcessEnv {
+ NODE_ENV: string
+ VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined
+ VUE_ROUTER_BASE: string | undefined
+ }
+}
diff --git a/examples/quasar/src/layouts/MainLayout.vue b/examples/quasar/src/layouts/MainLayout.vue
new file mode 100644
index 00000000..d9ed9d26
--- /dev/null
+++ b/examples/quasar/src/layouts/MainLayout.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+
+ Quasar App
+
+ Quasar v{{ $q.version }}
+
+
+
+
+
+ Examples
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/quasar/src/pages/CardPage.vue b/examples/quasar/src/pages/CardPage.vue
new file mode 100644
index 00000000..0479cccd
--- /dev/null
+++ b/examples/quasar/src/pages/CardPage.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
diff --git a/examples/quasar/src/pages/ErrorNotFound.vue b/examples/quasar/src/pages/ErrorNotFound.vue
new file mode 100644
index 00000000..8c96f219
--- /dev/null
+++ b/examples/quasar/src/pages/ErrorNotFound.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
404
+
+
Oops. Nothing here...
+
+
+
+
+
diff --git a/examples/quasar/src/pages/IndexPage.vue b/examples/quasar/src/pages/IndexPage.vue
new file mode 100644
index 00000000..661e3995
--- /dev/null
+++ b/examples/quasar/src/pages/IndexPage.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
diff --git a/examples/quasar/src/pages/PopupPage.vue b/examples/quasar/src/pages/PopupPage.vue
new file mode 100644
index 00000000..12c01402
--- /dev/null
+++ b/examples/quasar/src/pages/PopupPage.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
diff --git a/examples/quasar/src/quasar.d.ts b/examples/quasar/src/quasar.d.ts
new file mode 100644
index 00000000..8d15c69c
--- /dev/null
+++ b/examples/quasar/src/quasar.d.ts
@@ -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)
+///
diff --git a/examples/quasar/src/router/index.ts b/examples/quasar/src/router/index.ts
new file mode 100644
index 00000000..91e11ac7
--- /dev/null
+++ b/examples/quasar/src/router/index.ts
@@ -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
+})
diff --git a/examples/quasar/src/router/routes.ts b/examples/quasar/src/router/routes.ts
new file mode 100644
index 00000000..eaea81d2
--- /dev/null
+++ b/examples/quasar/src/router/routes.ts
@@ -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
diff --git a/examples/quasar/src/shims-vue.d.ts b/examples/quasar/src/shims-vue.d.ts
new file mode 100644
index 00000000..841998b7
--- /dev/null
+++ b/examples/quasar/src/shims-vue.d.ts
@@ -0,0 +1,10 @@
+///
+///
+
+// 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
+}
diff --git a/examples/quasar/tsconfig.json b/examples/quasar/tsconfig.json
new file mode 100644
index 00000000..53b1b9c5
--- /dev/null
+++ b/examples/quasar/tsconfig.json
@@ -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"
+ ]
+}
\ No newline at end of file
diff --git a/examples/vite/.eslintrc.js b/examples/vite/.eslintrc.js
index 0a6b9c1a..3592be4d 100644
--- a/examples/vite/.eslintrc.js
+++ b/examples/vite/.eslintrc.js
@@ -3,5 +3,5 @@ module.exports = {
'no-use-before-define': 0,
'no-console': 0,
},
- extends: ['../.eslintrc.js'],
+ extends: ['../../.eslintrc.js'],
}
diff --git a/examples/vite/index.css b/examples/vite/index.css
index 2ed30717..6ba561ca 100644
--- a/examples/vite/index.css
+++ b/examples/vite/index.css
@@ -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;
diff --git a/examples/vite/index.html b/examples/vite/index.html
index 99f1b58b..81b48427 100644
--- a/examples/vite/index.html
+++ b/examples/vite/index.html
@@ -8,6 +8,6 @@
-
+