├── docs ├── src │ ├── boot │ │ ├── .gitkeep │ │ ├── components.js │ │ └── gdpr.js │ ├── examples │ │ ├── SimpleDemo.vue │ │ ├── QBtn │ │ │ ├── TruncateLabel.vue │ │ │ ├── OtherOptions.vue │ │ │ ├── CustomRipple.vue │ │ │ ├── WithIcons.vue │ │ │ ├── CustomColor.vue │ │ │ ├── Standard.vue │ │ │ ├── Round.vue │ │ │ ├── ButtonAlignment.vue │ │ │ ├── CustomContent.vue │ │ │ ├── Disabled.vue │ │ │ ├── Links.vue │ │ │ ├── ButtonPadding.vue │ │ │ ├── FormSubmission.vue │ │ │ ├── ButtonDesign.vue │ │ │ ├── DeterministicProgress.vue │ │ │ ├── ButtonSize.vue │ │ │ ├── RouterLink.vue │ │ │ └── IndeterminateProgress.vue │ │ └── home │ │ │ ├── DemoBlock.vue │ │ │ ├── DemoNode.vue │ │ │ └── demo.vue │ ├── css │ │ ├── quasar.overrides.scss │ │ ├── prism-theme.sass │ │ └── app.sass │ ├── globals.js │ ├── assets │ │ ├── menu.js │ │ ├── logo.svg │ │ ├── get-meta.js │ │ ├── page-utils.js │ │ └── sad.svg │ ├── components │ │ ├── AppMenu.sass │ │ ├── DocCode.vue │ │ ├── ApiRows.sass │ │ ├── CodePrism.js │ │ ├── CardTitle.vue │ │ ├── DocLink.vue │ │ ├── getListingComponent.js │ │ ├── CopyButton.vue │ │ ├── AppMenu.js │ │ ├── HeaderMenu.vue │ │ ├── DocInstallation.vue │ │ ├── DocPage.vue │ │ ├── Codepen.vue │ │ ├── DocExample.vue │ │ └── DocApi.vue │ ├── App.vue │ ├── router │ │ ├── index.js │ │ └── routes.js │ ├── index.template.html │ └── pages │ │ ├── home.md │ │ └── Error404.vue ├── .eslintignore ├── quasar.extensions.json ├── public │ ├── logo.png │ ├── icons │ │ ├── logo.png │ │ ├── favicon.ico │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon-96x96.png │ │ └── favicon-128x128.png │ ├── oembed.json │ ├── 404.html │ └── logo.svg ├── babel.config.js ├── .editorconfig ├── .postcssrc.js ├── README.md ├── build │ ├── md-plugin-image.js │ ├── md-plugin-blockquote.js │ ├── md-plugin-token.js │ ├── highlight.js │ ├── md-plugin-link.js │ ├── md.js │ ├── md-plugin-table.js │ ├── md-plugin-heading.js │ ├── md-plugin-containers.js │ ├── flat-menu.js │ ├── md-loader.js │ └── md-loader-utils.js ├── .gitignore ├── .stylintrc ├── .eslintrc.js ├── package.json └── quasar.conf.js ├── .browserslistrc ├── quasar-app-extension ├── README.md ├── src │ ├── boot │ │ └── index.js │ └── index.js ├── .gitignore ├── package.json ├── LICENSE └── package-lock.json ├── renovate.json ├── public ├── demo.gif ├── favicon.ico ├── demo_assets │ ├── tile.png │ ├── checkoff.svg │ ├── arrow.svg │ ├── dropdown.svg │ ├── more.svg │ ├── checkon.svg │ ├── logred.svg │ ├── closeleft.svg │ ├── close.svg │ ├── log.svg │ ├── timeblue.svg │ ├── time.svg │ ├── eye.svg │ ├── grabme.svg │ ├── search.svg │ ├── actionblue.svg │ ├── eyeblue.svg │ ├── action.svg │ ├── actionorange.svg │ ├── databaseorange.svg │ ├── heart.svg │ ├── error.svg │ ├── errorred.svg │ ├── errorblue.svg │ ├── twitter.svg │ ├── twitterorange.svg │ └── database.svg └── index.html ├── .gitattributes ├── postcss.config.js ├── src ├── components │ ├── FlowyDragHandle.json │ ├── FlowyDragHandle.js │ ├── FlowyNewBlock.json │ ├── ConnectorLine.vue │ ├── FlowyBlock.vue │ ├── DropIndicator.vue │ ├── FlowyNewBlock.vue │ ├── Flowy.json │ ├── Flowy.vue │ └── FlowyNode.vue ├── lib │ ├── createNewNode.js │ ├── moveNode.js │ └── generateId.js ├── demo_data │ ├── single.js │ ├── superSimple.js │ ├── sampleBlocks.js │ └── simple.js ├── main.js ├── index.js ├── demo_components │ ├── DemoBlock.vue │ └── DemoNode.vue └── App.vue ├── .editorconfig ├── vue.config.js ├── babel.config.js ├── .gitignore ├── .eslintrc.js ├── .github └── FUNDING.yml ├── scripts └── release.sh ├── LICENSE ├── README.md ├── package.json └── CODE_OF_CONDUCT.md /docs/src/boot/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.eslintignore: -------------------------------------------------------------------------------- 1 | /dist 2 | -------------------------------------------------------------------------------- /docs/src/examples/SimpleDemo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /docs/quasar.extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "flowy": {} 3 | } 4 | -------------------------------------------------------------------------------- /quasar-app-extension/README.md: -------------------------------------------------------------------------------- 1 | # Quasar extension: Flowy 🚡 2 | 3 | 4 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/src/css/quasar.overrides.scss: -------------------------------------------------------------------------------- 1 | .q-badge { 2 | line-height: 17px; 3 | } 4 | -------------------------------------------------------------------------------- /public/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smickelbeard/flowy-vue/HEAD/public/demo.gif -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # remove compiled assets from github statistics 2 | dist/* linguist-vendored 3 | -------------------------------------------------------------------------------- /docs/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smickelbeard/flowy-vue/HEAD/docs/public/logo.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smickelbeard/flowy-vue/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /docs/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@quasar/babel-preset-app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/public/icons/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smickelbeard/flowy-vue/HEAD/docs/public/icons/logo.png -------------------------------------------------------------------------------- /public/demo_assets/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smickelbeard/flowy-vue/HEAD/public/demo_assets/tile.png -------------------------------------------------------------------------------- /docs/public/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smickelbeard/flowy-vue/HEAD/docs/public/icons/favicon.ico -------------------------------------------------------------------------------- /docs/public/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smickelbeard/flowy-vue/HEAD/docs/public/icons/favicon-16x16.png -------------------------------------------------------------------------------- /docs/public/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smickelbeard/flowy-vue/HEAD/docs/public/icons/favicon-32x32.png -------------------------------------------------------------------------------- /docs/public/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smickelbeard/flowy-vue/HEAD/docs/public/icons/favicon-96x96.png -------------------------------------------------------------------------------- /docs/public/icons/favicon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smickelbeard/flowy-vue/HEAD/docs/public/icons/favicon-128x128.png -------------------------------------------------------------------------------- /src/components/FlowyDragHandle.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "component", 3 | "meta": { 4 | "docsUrl": "todo" 5 | }, 6 | "props": {} 7 | } -------------------------------------------------------------------------------- /docs/src/globals.js: -------------------------------------------------------------------------------- 1 | export default { 2 | discordURL: "https://discord.gg/VWf4QX", 3 | githubURL: "https://github.com/remcoplasmeyer/flowy-vue", 4 | } 5 | -------------------------------------------------------------------------------- /docs/public/oembed.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Vue Flowy", 3 | "author_name": "Easy flowcharts with Vue", 4 | "author_url": "https://remcoplasmeyer.github.io/flowy-vue" 5 | } 6 | -------------------------------------------------------------------------------- /src/lib/createNewNode.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | */ 4 | function createNewNode(draggingNode, dropzoneNode) { 5 | draggingNode.parentId = dropzoneNode.id; 6 | } 7 | 8 | export default moveNode; 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /docs/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /quasar-app-extension/src/boot/index.js: -------------------------------------------------------------------------------- 1 | import FlowyPlugin from '@hipsjs/flowy-vue'; 2 | import '@hipsjs/flowy-vue/dist/lib/flowy-vue.css'; 3 | 4 | export default ({ Vue }) => { 5 | Vue.use(FlowyPlugin); 6 | }; 7 | -------------------------------------------------------------------------------- /public/demo_assets/checkoff.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' ? '/flowy-vue/' : '/flowy-vue/', 3 | productionSourceMap: process.env.NODE_ENV !== 'production', 4 | outputDir: 'docs', 5 | }; 6 | -------------------------------------------------------------------------------- /docs/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: [ 5 | // to edit target browsers: use "browserslist" field in package.json 6 | require('autoprefixer') 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /src/lib/moveNode.js: -------------------------------------------------------------------------------- 1 | /* 2 | Moves a node to a new parent by changed the parentId 3 | Mutable 4 | */ 5 | function moveNode(draggingNode, dropzoneNode) { 6 | draggingNode.parentId = dropzoneNode.id; 7 | } 8 | 9 | export default moveNode; 10 | -------------------------------------------------------------------------------- /quasar-app-extension/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | const isLib = process.env.VUE_CLI_BUILD_TARGET === 'lib'; 2 | 3 | module.exports = { 4 | presets: [ 5 | ['@vue/cli-plugin-babel/preset', { 6 | useBuiltIns: isLib 7 | ? false 8 | : 'usage', 9 | }], 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /src/components/FlowyDragHandle.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | export default Vue.extend({ 4 | name: 'FlowyDragHandle', 5 | 6 | render(h) { 7 | return h('div', { 8 | staticClass: 'flowy-drag-handle', 9 | }, this.$slots.default); 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /public/demo_assets/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/demo_assets/dropdown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/demo_assets/more.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/TruncateLabel.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Starter docs - quasar 2 | 3 | Hard fork and dirty edit of [Quasar docs](https://github.com/quasarframework/quasar/tree/dev/docs) 4 | 5 | [Demo](https://remcoplasmeyer.github.io/quasar-doc-starter/) 6 | 7 | - edit `build.publicPath` in `quasar.conf.js` 8 | - `npm run build` 9 | - `npm run deploy` 10 | -------------------------------------------------------------------------------- /public/demo_assets/checkon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/src/assets/menu.js: -------------------------------------------------------------------------------- 1 | // const gettingStarted = [ 2 | 3 | // ] 4 | 5 | // const components = [ 6 | 7 | // ] 8 | 9 | module.exports = [ 10 | { 11 | name: "Home", 12 | icon: "room", 13 | path: "home" 14 | }, 15 | { 16 | name: "Home", 17 | icon: "room", 18 | path: "anotherone" 19 | } 20 | ]; 21 | -------------------------------------------------------------------------------- /docs/build/md-plugin-image.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Adds class 'doc-img' to images 3 | */ 4 | 5 | module.exports = function (md) { 6 | md.renderer.rules.image = (tokens, idx, options, env, self) => { 7 | const token = tokens[idx] 8 | 9 | token.attrSet('class', 'doc-img') 10 | return self.renderToken(tokens, idx, options) 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/OtherOptions.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /public/demo_assets/logred.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/demo_assets/closeleft.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | .quasar 2 | .DS_Store 3 | .thumbs.db 4 | node_modules 5 | /dist 6 | /src-cordova/node_modules 7 | /src-cordova/platforms 8 | /src-cordova/plugins 9 | /src-cordova/www 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | -------------------------------------------------------------------------------- /docs/build/md-plugin-blockquote.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Adds class 'doc-note' to blockquotes 3 | */ 4 | 5 | module.exports = function (md) { 6 | md.renderer.rules.blockquote_open = (tokens, idx, options, env, self) => { 7 | const token = tokens[idx] 8 | 9 | token.attrSet('class', 'doc-note') 10 | return self.renderToken(tokens, idx, options) 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /public/demo_assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/lib/generateId.js: -------------------------------------------------------------------------------- 1 | import find from 'lodash/find'; 2 | 3 | function randomInteger() { 4 | return Math.floor(Math.random() * 10000) + 1; 5 | } 6 | 7 | function generateId(nodes) { 8 | let id = randomInteger(); 9 | while (find(nodes, { id }) !== undefined) { 10 | id = randomInteger(); 11 | } 12 | return id; 13 | } 14 | 15 | export default generateId; 16 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/CustomRipple.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /public/demo_assets/log.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/demo_assets/timeblue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/WithIcons.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /src/demo_data/single.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | id: '1', 4 | parentId: -1, 5 | nodeComponent: 'demo-node', 6 | data: { 7 | width: 320, 8 | text: 'Parent block', 9 | title: 'New Visitor', 10 | description: 'When a new visitor goes to Site 1', 11 | icon: 'eyeblue', 12 | }, 13 | }, 14 | ]; 15 | -------------------------------------------------------------------------------- /docs/build/md-plugin-token.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Adds class 'doc-token' to inline code 3 | */ 4 | 5 | module.exports = function (md) { 6 | const defaultRender = md.renderer.rules.code_inline 7 | 8 | md.renderer.rules.code_inline = (tokens, idx, options, env, self) => { 9 | const token = tokens[idx] 10 | 11 | token.attrSet('class', 'doc-token') 12 | return defaultRender(tokens, idx, options, env, self) 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /docs/src/components/AppMenu.sass: -------------------------------------------------------------------------------- 1 | .app-menu 2 | 3 | .q-item__section--avatar 4 | color: $primary 5 | 6 | .q-expansion-item--expanded > div > .q-item > .q-item__section--main 7 | color: $primary 8 | font-weight: 700 9 | 10 | .q-expansion-item__content .q-item 11 | border-radius: 0 10px 10px 0 12 | margin-right: 12px 13 | 14 | .q-item.q-router-link--active 15 | background: scale-color($primary, $lightness: 90%) 16 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import FlowyPlugin from '@/index.js'; 3 | import DemoBlock from '@/demo_components/DemoBlock.vue'; 4 | import DemoNode from '@/demo_components/DemoNode.vue'; 5 | import App from './App.vue'; 6 | 7 | Vue.use(FlowyPlugin); 8 | Vue.component('DemoBlock', DemoBlock); 9 | Vue.component('DemoNode', DemoNode); 10 | 11 | Vue.config.productionTip = false; 12 | 13 | new Vue({ 14 | render: (h) => h(App), 15 | }).$mount('#app'); 16 | -------------------------------------------------------------------------------- /public/demo_assets/time.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/demo_assets/eye.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/CustomColor.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /public/demo_assets/grabme.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/demo_assets/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/demo_assets/actionblue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/demo_assets/eyeblue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/FlowyNewBlock.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "component", 3 | "meta": { 4 | "docsUrl": "todo" 5 | }, 6 | "props": { 7 | "nodes": { 8 | "type": "Array", 9 | "desc": "An array of node objects" 10 | } 11 | }, 12 | "slots": { 13 | "preview": { 14 | "desc": "Will be used as preview of the node outside of the canvas. Must contain a flowy-drag-handle." 15 | }, 16 | "node": { 17 | "desc": "Must contain a Vue component. Will be rendered in the node tree." 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /public/demo_assets/action.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/demo_assets/actionorange.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/Standard.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/Round.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: [ 7 | 'plugin:vue/essential', 8 | '@vue/airbnb', 9 | ], 10 | ignorePatterns: ['**/node_modules/*.js', '**/shopify-draggable-vue/*.*'], 11 | rules: { 12 | // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 14 | 'no-console': 'off', 15 | 'no-debugger': 'off', 16 | }, 17 | parserOptions: { 18 | parser: 'babel-eslint', 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /docs/public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 404 Redirect 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 |               18 |               19 |               20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/ButtonAlignment.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 14 | -------------------------------------------------------------------------------- /quasar-app-extension/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-flowy", 3 | "version": "1.0.5", 4 | "description": "A Quasar extension for flowy-vue", 5 | "author": "Remco Plasmeijer", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "scripts": { 9 | "test": "echo \"No test specified\" && exit 0" 10 | }, 11 | "bugs": "", 12 | "repository": { 13 | "type": "git", 14 | "url": "" 15 | }, 16 | "homepage": "", 17 | "engines": { 18 | "node": ">= 8.9.0", 19 | "npm": ">= 5.6.0", 20 | "yarn": ">= 1.6.0" 21 | }, 22 | "dependencies": { 23 | "@hipsjs/flowy-vue": "^1.0.13" 24 | } 25 | } -------------------------------------------------------------------------------- /docs/public/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/demo_assets/databaseorange.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/src/assets/get-meta.js: -------------------------------------------------------------------------------- 1 | // Make sure to keep in sync with /build/md-loader-utils.js 2 | 3 | export default function (title, desc) { 4 | return { 5 | title: { 6 | name: 'title', 7 | content: title 8 | }, 9 | ogTitle: { 10 | name: 'og:title', 11 | content: title 12 | }, 13 | twitterTitle: { 14 | name: 'twitter:title', 15 | content: title 16 | }, 17 | description: { 18 | name: 'description', 19 | content: desc 20 | }, 21 | ogDesc: { 22 | name: 'og:description', 23 | content: desc 24 | }, 25 | twitterDesc: { 26 | name: 'twitter:description', 27 | content: desc 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /docs/src/components/DocCode.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 36 | -------------------------------------------------------------------------------- /docs/build/highlight.js: -------------------------------------------------------------------------------- 1 | const prism = require('prismjs') 2 | const loadLanguages = require('prismjs/components/index') 3 | 4 | loadLanguages(['markup', 'bash', 'javascript', 'stylus', 'css', 'json']) 5 | 6 | module.exports = function (str, lang) { 7 | if (lang === '') { 8 | lang = 'js' 9 | } 10 | else if (lang === 'vue' || lang === 'html') { 11 | lang = 'html' 12 | } 13 | 14 | if (prism.languages[lang] !== void 0) { 15 | const code = prism.highlight(str, prism.languages[lang], lang) 16 | 17 | return `
` +
18 |       `${code}` +
19 |       `
` 20 | } 21 | 22 | return '' 23 | } 24 | -------------------------------------------------------------------------------- /docs/src/boot/components.js: -------------------------------------------------------------------------------- 1 | // import something here 2 | import DocExample from 'components/DocExample.vue' 3 | import DocCode from 'components/DocCode.vue' 4 | import DocApi from 'components/DocApi.vue' 5 | import DocInstallation from 'components/DocInstallation.vue' 6 | 7 | import DocLink from 'components/DocLink.vue' 8 | import DocPage from 'components/DocPage.vue' 9 | 10 | // leave the export, even if you don't use it 11 | export default async ({ Vue }) => { 12 | Vue.component('DocExample', DocExample) 13 | Vue.component('DocCode', DocCode) 14 | Vue.component('DocApi', DocApi) 15 | Vue.component('DocInstallation', DocInstallation) 16 | 17 | Vue.component('DocLink', DocLink) 18 | Vue.component('DocPage', DocPage) 19 | } 20 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: remcoplasmeyer # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: hips1 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/CustomContent.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /docs/build/md-plugin-link.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Converts links to DocLink 3 | */ 4 | 5 | module.exports = function (md) { 6 | md.renderer.rules.link_open = (tokens, idx, options, env, self) => { 7 | const token = tokens[idx] 8 | 9 | const hrefIndex = token.attrIndex('href') 10 | 11 | if (hrefIndex >= 0) { 12 | const link = token.attrs[hrefIndex] 13 | 14 | link[0] = 'to' 15 | link[1] = decodeURI(link[1]) 16 | 17 | token.tag = 'doc-link' 18 | } 19 | 20 | return self.renderToken(tokens, idx, options) 21 | } 22 | 23 | md.renderer.rules.link_close = (tokens, idx, options, env, self) => { 24 | const token = tokens[idx] 25 | 26 | token.tag = 'doc-link' 27 | return self.renderToken(tokens, idx, options) 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/demo_data/superSimple.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | id: '1', 4 | parentId: -1, 5 | nodeComponent: 'demo-node', 6 | data: { 7 | width: 320, 8 | text: 'Parent block', 9 | title: 'New Visitor', 10 | description: 'When a new visitor goes to Site 1', 11 | icon: 'eyeblue', 12 | }, 13 | }, 14 | { 15 | id: '2', 16 | parentId: '1', 17 | nodeComponent: 'demo-node', 18 | data: { 19 | text: 'Parent block', 20 | title: 'New Visitor', 21 | description: 'When a new visitor goes to Site 1', 22 | icon: 'eyeblue', 23 | }, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /docs/src/components/ApiRows.sass: -------------------------------------------------------------------------------- 1 | .api-row 2 | padding: 8px 16px 4px 3 | font-weight: 300 4 | color: $grey-7 5 | 6 | &--big-padding 7 | padding: 16px 8 | 9 | & + & 10 | border-top: 1px solid #ddd 11 | 12 | &__item 13 | margin-bottom: 4px 14 | 15 | &__subitem 16 | padding: 4px 0 0 16px 17 | border-radius: 5px 18 | > div 19 | border: 1px solid #eee !important 20 | border-radius: inherit 21 | > div + div 22 | margin-top: 4px 23 | 24 | &__value 25 | font-weight: 400 26 | color: black 27 | 28 | &--indent 29 | padding-left: 16px 30 | 31 | &__example 32 | background: $grey-3 33 | margin: 4px 34 | padding: 2px 4px 35 | border-radius: $generic-border-radius 36 | display: inline-block 37 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/Disabled.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /docs/src/components/CodePrism.js: -------------------------------------------------------------------------------- 1 | import 'prismjs' 2 | 3 | export default { 4 | functional: true, 5 | 6 | props: { 7 | code: { 8 | type: String 9 | }, 10 | 11 | lang: String 12 | }, 13 | 14 | render (h, ctx) { 15 | const 16 | code = ctx.props.code || ctx.children[0].text, 17 | language = ctx.props.lang, 18 | prismLanguage = Prism.languages[language], 19 | className = `language-${language}` 20 | 21 | return h( 22 | 'pre', 23 | Object.assign({}, ctx.data, { 24 | class: 'doc-code ' + className 25 | }), 26 | [ 27 | h('code', { 28 | class: 'doc-code__inner ' + className, 29 | domProps: { 30 | innerHTML: Prism.highlight(code, prismLanguage, language) 31 | } 32 | }) 33 | ] 34 | ) 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /public/demo_assets/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/src/boot/gdpr.js: -------------------------------------------------------------------------------- 1 | import { Cookies, Notify, openURL } from 'quasar' 2 | 3 | if (Cookies.has('gdpr') !== true) { 4 | Notify.create({ 5 | message: `Our third-party tools use cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the cookie policy.`, 6 | multiline: true, 7 | classes: 'doc-gdpr', 8 | timeout: 0, 9 | position: 'bottom-right', 10 | actions: [ 11 | { 12 | label: 'Accept', 13 | color: 'yellow', 14 | handler () { 15 | Cookies.set('gdpr', true, { expires: 5 * 365 }) 16 | } 17 | }, 18 | { 19 | label: 'Learn more', 20 | color: 'grey', 21 | noDismiss: true, 22 | handler () { 23 | openURL('https://www.iubenda.com/privacy-policy/40685560/cookie-policy?an=no&s_ck=false&newmarkup=yes') 24 | } 25 | } 26 | ] 27 | }) 28 | } 29 | -------------------------------------------------------------------------------- /docs/build/md.js: -------------------------------------------------------------------------------- 1 | const markdownIt = require('markdown-it') 2 | 3 | const 4 | mdPluginLink = require('./md-plugin-link'), 5 | mdPluginToken = require('./md-plugin-token'), 6 | mdPluginBlockquote = require('./md-plugin-blockquote'), 7 | mdPluginHeading = require('./md-plugin-heading'), 8 | mdPluginImage = require('./md-plugin-image'), 9 | mdPluginContainers = require('./md-plugin-containers'), 10 | mdPluginTable = require('./md-plugin-table') 11 | 12 | const 13 | highlight = require('./highlight') 14 | 15 | const opts = { 16 | html: true, 17 | linkify: false, 18 | typographer: true, 19 | highlight 20 | } 21 | 22 | const md = markdownIt(opts) 23 | .use(mdPluginLink) 24 | .use(mdPluginToken) 25 | .use(mdPluginBlockquote) 26 | .use(mdPluginHeading) 27 | .use(mdPluginImage) 28 | .use(mdPluginContainers) 29 | .use(mdPluginTable) 30 | 31 | md.$data = {} 32 | 33 | module.exports = md 34 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/Links.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 26 | -------------------------------------------------------------------------------- /docs/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 35 | -------------------------------------------------------------------------------- /docs/src/router/index.js: -------------------------------------------------------------------------------- 1 | /* global gtag */ 2 | import Vue from 'vue' 3 | import VueRouter from 'vue-router' 4 | 5 | import routes from './routes' 6 | 7 | Vue.use(VueRouter) 8 | 9 | /* 10 | * If not building with SSR mode, you can 11 | * directly export the Router instantiation 12 | */ 13 | 14 | export default function () { 15 | const Router = new VueRouter({ 16 | routes, 17 | 18 | scrollBehavior (_, __, savedPosition) { 19 | return savedPosition || { x: 0, y: 0 } 20 | }, 21 | 22 | // Leave these as is and change from quasar.conf.js instead! 23 | // quasar.conf.js -> build -> vueRouterMode 24 | mode: process.env.VUE_ROUTER_MODE, 25 | base: process.env.VUE_ROUTER_BASE 26 | }) 27 | 28 | process.env.CLIENT === true && Router.afterEach(to => { 29 | if (gtag) { 30 | gtag('config', 'UA-172063534-1', { 31 | page_path: to.path 32 | }) 33 | } 34 | }) 35 | 36 | return Router 37 | } 38 | -------------------------------------------------------------------------------- /scripts/release.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -e 3 | 4 | if [[ -z $1 ]]; then 5 | echo "Enter new version: " 6 | read VERSION 7 | else 8 | VERSION=$1 9 | fi 10 | 11 | read -p "Releasing $VERSION - are you sure? (y/n) " -n 1 -r 12 | echo 13 | if [[ $REPLY =~ ^[Yy]$ ]]; then 14 | echo "Releasing $VERSION ..." 15 | 16 | if [[ -z ${SKIP_TESTS} ]]; then 17 | echo 'Nothing' 18 | npm run lint 19 | # npm run flow 20 | # npm run test:coverage 21 | # npm run test:e2e 22 | # npm run test:ssr 23 | fi 24 | 25 | # build 26 | npm i # make sure we use latest dependencies 27 | VERSION=${VERSION} npm run build:lib 28 | 29 | # commit 30 | git add -f \ 31 | dist/lib/*.js 32 | git commit -m "build: build $VERSION" 33 | 34 | # tag version 35 | npm version ${VERSION} --message "build: release $VERSION" 36 | 37 | # publish 38 | git push origin refs/tags/v${VERSION} 39 | git push 40 | npm publish 41 | fi 42 | -------------------------------------------------------------------------------- /docs/.stylintrc: -------------------------------------------------------------------------------- 1 | { 2 | "blocks": "never", 3 | "brackets": "never", 4 | "colons": "never", 5 | "colors": "always", 6 | "commaSpace": "always", 7 | "commentSpace": "always", 8 | "cssLiteral": "never", 9 | "depthLimit": false, 10 | "duplicates": true, 11 | "efficient": "always", 12 | "extendPref": false, 13 | "globalDupe": true, 14 | "indentPref": 2, 15 | "leadingZero": "never", 16 | "maxErrors": false, 17 | "maxWarnings": false, 18 | "mixed": false, 19 | "namingConvention": false, 20 | "namingConventionStrict": false, 21 | "none": "never", 22 | "noImportant": false, 23 | "parenSpace": "never", 24 | "placeholder": false, 25 | "prefixVarsWithDollar": "always", 26 | "quotePref": "single", 27 | "semicolons": "never", 28 | "sortOrder": false, 29 | "stackedProperties": "never", 30 | "trailingWhitespace": "never", 31 | "universal": "never", 32 | "valid": true, 33 | "zeroUnits": "never", 34 | "zIndexNormalize": false 35 | } 36 | -------------------------------------------------------------------------------- /public/demo_assets/error.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/build/md-plugin-table.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Converts table to QMarkupTable 3 | */ 4 | 5 | module.exports = function (md) { 6 | md.renderer.rules.table_open = (tokens, idx, options, env, self) => { 7 | const token = tokens[idx] 8 | 9 | token.tag = 'q-markup-table' 10 | token.attrSet(':wrap-cells', 'true') 11 | token.attrSet(':flat', 'true') 12 | token.attrSet(':bordered', 'true') 13 | token.attrSet('style', 'width: fit-content; max-width: 100%;') 14 | 15 | return self.renderToken(tokens, idx, options) 16 | } 17 | 18 | md.renderer.rules.table_close = (tokens, idx, options, env, self) => { 19 | const token = tokens[idx] 20 | 21 | token.tag = 'q-markup-table' 22 | 23 | return self.renderToken(tokens, idx, options) 24 | } 25 | 26 | md.renderer.rules.th_open = (tokens, idx, options, env, self) => { 27 | const token = tokens[idx] 28 | 29 | token.attrSet('class', 'text-left') 30 | return self.renderToken(tokens, idx, options) 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /public/demo_assets/errorred.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/demo_assets/errorblue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/demo_assets/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/demo_assets/twitterorange.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/demo_assets/database.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docs/src/components/CardTitle.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 23 | 24 | 46 | -------------------------------------------------------------------------------- /docs/build/md-plugin-heading.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Manages headings 3 | */ 4 | 5 | function parseContent (str) { 6 | const title = String(str) 7 | .replace(/<\/?[^>]+(>|$)/g, "") 8 | .trim() 9 | 10 | return { 11 | id: encodeURIComponent(title.replace(/\s+/g, '-')), 12 | title 13 | } 14 | } 15 | 16 | module.exports = function (md) { 17 | md.renderer.rules.heading_open = (tokens, idx, options, env, self) => { 18 | const token = tokens[idx] 19 | 20 | const content = tokens[idx + 1] 21 | .children 22 | .reduce((acc, t) => acc + t.content, '') 23 | 24 | const { id, title } = parseContent(content) 25 | 26 | token.attrSet('id', id) 27 | token.attrSet('class', `doc-heading doc-${token.tag}`) 28 | token.attrSet('@click', `copyHeading(\`${id}\`)`) 29 | 30 | if (token.tag === 'h2') { 31 | md.$data.toc.push(`{id:\`${id}\`,title:\`${title}\`}`) 32 | } 33 | else if (token.tag === 'h3') { 34 | md.$data.toc.push(`{id:\`${id}\`,title:\`${title}\`, sub: true}`) 35 | } 36 | 37 | return self.renderToken(tokens, idx, options) 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /docs/src/components/DocLink.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 41 | 42 | 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Remco Plasmeijer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/ConnectorLine.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 35 | 36 | 53 | -------------------------------------------------------------------------------- /quasar-app-extension/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Remco Plasmeijer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/FlowyBlock.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 60 | -------------------------------------------------------------------------------- /src/components/DropIndicator.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 21 | 22 | 58 | -------------------------------------------------------------------------------- /src/demo_data/sampleBlocks.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | preview: { 4 | title: 'New visitor', 5 | description: 'Triggers when somebody visits a specified page', 6 | icon: 'eye', 7 | }, 8 | node: { 9 | title: 'New visitor', 10 | description: 'When a new visitor goes to Site 1', 11 | icon: 'eyeblue', 12 | }, 13 | }, 14 | { 15 | preview: { 16 | title: 'Update database', 17 | description: 'Triggers when somebody performs a specified action', 18 | icon: 'error', 19 | }, 20 | node: { 21 | title: 'Update database', 22 | description: 'Triggers when somebody performs a specified action', 23 | icon: 'errorred', 24 | }, 25 | }, 26 | { 27 | preview: { 28 | title: 'Time has passed', 29 | description: 'Triggers after a specified amount of time', 30 | icon: 'database', 31 | }, 32 | node: { 33 | title: 'Time has passed', 34 | description: 'Triggers after a specified amount of time', 35 | icon: 'databaseorange', 36 | }, 37 | }, 38 | ]; 39 | -------------------------------------------------------------------------------- /docs/src/components/getListingComponent.js: -------------------------------------------------------------------------------- 1 | import { QIcon } from 'quasar' 2 | 3 | import { farFileAlt, fasFolderOpen } from '@quasar/extras/fontawesome-v5' 4 | 5 | import DocPage from './DocPage.vue' 6 | import DocLink from './DocLink.vue' 7 | 8 | import getMeta from 'assets/get-meta.js' 9 | 10 | export default function (title, links) { 11 | return { 12 | name: 'DocListingPage', 13 | 14 | meta: { 15 | title: `${title} listing`, 16 | 17 | meta: getMeta( 18 | `${title} | Flowy Vue`, 19 | `List of pages under the '${title}' section` 20 | ) 21 | }, 22 | 23 | created () { 24 | this.$root.store.toc = [] 25 | }, 26 | 27 | render (h) { 28 | return h(DocPage, { 29 | props: { 30 | title, 31 | noEdit: true 32 | } 33 | }, links.map(link => { 34 | return h('div', { staticClass: 'doc-page-listing' }, [ 35 | h(QIcon, { 36 | props: { 37 | name: link.page === true ? farFileAlt : fasFolderOpen 38 | } 39 | }), 40 | 41 | h(DocLink, { 42 | props: { 43 | to: link.to 44 | } 45 | }, [ link.title ]) 46 | ]) 47 | })) 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /docs/src/assets/page-utils.js: -------------------------------------------------------------------------------- 1 | export function copyToClipboard (text) { 2 | var textArea = document.createElement('textarea') 3 | textArea.className = 'fixed-top' 4 | textArea.value = text 5 | document.body.appendChild(textArea) 6 | textArea.focus() 7 | textArea.select() 8 | 9 | document.execCommand('copy') 10 | document.body.removeChild(textArea) 11 | } 12 | 13 | export function copyHeading (id) { 14 | const text = window.location.origin + window.location.pathname + '#' + id 15 | const el = document.getElementById(id) 16 | 17 | if (el) { 18 | el.id = '' 19 | } 20 | 21 | if ('replaceState' in history) { 22 | history.replaceState('', '', `${location.pathname}#${id}`) 23 | } 24 | else { 25 | window.location.hash = '#' + id 26 | } 27 | 28 | if (el) { 29 | setTimeout(() => { 30 | el.id = id 31 | }, 300) 32 | } 33 | 34 | copyToClipboard(text) 35 | 36 | this.$q.notify({ 37 | message: 'Anchor has been copied to clipboard.', 38 | color: 'white', 39 | textColor: 'primary', 40 | position: 'top', 41 | actions: [ { icon: 'close', color: 'primary', dense: true, round: true } ], 42 | timeout: 2000 43 | }) 44 | } 45 | 46 | export function slugify (str) { 47 | return encodeURIComponent(String(str).trim().replace(/\s+/g, '-')) 48 | } 49 | -------------------------------------------------------------------------------- /quasar-app-extension/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 6 | */ 7 | 8 | function extendWithComponent(conf) { 9 | // make sure boot file is registered 10 | conf.boot.push('~quasar-app-extension-flowy/src/boot/index.js'); 11 | 12 | // make sure boot file transpiles 13 | conf.build.transpileDependencies.push(/quasar-app-extension-flowy[\\/]src/); 14 | console.log( 15 | ' App Extension (flowy-vue) Info: \'Adding flowy-vue boot reference to your quasar.conf.js\'', 16 | ); 17 | } 18 | 19 | module.exports = function (api) { 20 | // api.compatibleWith('@quasar/app', '^1.0.0-beta.18') 21 | 22 | console.log('pre register api'); 23 | 24 | // register JSON api 25 | // api.registerDescribeApi('Flowy', '~@hipsjs/flowy-vue/src/components/Flowy.json'); 26 | // api.registerDescribeApi( 27 | // 'FlowyNewBlock', 28 | // '~@hipsjs/flowy-vue/src/components/FlowyNewBlock.json', 29 | // ); 30 | 31 | // api.registerDescribeApi( 32 | // 'FlowyDragHandle', 33 | // '~@hipsjs/flowy-vue/src/components/FlowyDragHandle.json', 34 | // ); 35 | 36 | // extend quasar.conf 37 | api.extendQuasarConf(extendWithComponent); 38 | }; 39 | -------------------------------------------------------------------------------- /src/components/FlowyNewBlock.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 57 | -------------------------------------------------------------------------------- /docs/src/examples/home/DemoBlock.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 26 | 27 | 65 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/ButtonPadding.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 72 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import DraggablePlugin from '@hipsjs/shopify-draggable-vue'; 2 | import Flowy from './components/Flowy.vue'; 3 | import FlowyNode from './components/FlowyNode.vue'; 4 | import FlowyBlock from './components/FlowyBlock.vue'; 5 | import FlowyNewBlock from './components/FlowyNewBlock.vue'; 6 | import FlowyDragHandle from './components/FlowyDragHandle'; 7 | 8 | // Declare install function executed by Vue.use() 9 | export function install(_Vue) { 10 | const Vue = _Vue; 11 | Vue.use(DraggablePlugin, { 12 | handle: '.flowy-drag-handle', 13 | }); 14 | 15 | Vue.component('Flowy', Flowy); 16 | Vue.component('FlowyNode', FlowyNode); 17 | Vue.component('FlowyBlock', FlowyBlock); 18 | Vue.component('FlowyNewBlock', FlowyNewBlock); 19 | Vue.component('FlowyDragHandle', FlowyDragHandle); 20 | } 21 | 22 | // Create module definition for Vue.use() 23 | const plugin = { 24 | install, 25 | }; 26 | 27 | // UMD auto-install when vue is found (eg. in browser via 62 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Shopify Draggable Vue 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/FormSubmission.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 57 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/ButtonDesign.vue: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /docs/build/flat-menu.js: -------------------------------------------------------------------------------- 1 | const join = require('path').join 2 | 3 | const menu = require('../src/assets/menu') 4 | const flatMenu = {} 5 | const prefix = join(__dirname, '../src/pages') 6 | 7 | let prev 8 | 9 | function menuWalk (node, path, parentName) { 10 | const newPath = path + (node.path ? `/${node.path}` : '') 11 | 12 | if (node.children !== void 0) { 13 | node.children.forEach(n => { 14 | menuWalk(n, newPath, node.name) 15 | }) 16 | } 17 | else if (!node.external) { 18 | const current = { 19 | name: node.name, 20 | category: parentName, 21 | path: newPath 22 | } 23 | 24 | if (prev !== void 0) { 25 | prev.next = { 26 | name: current.name, 27 | category: current.category, 28 | path: current.path 29 | } 30 | current.prev = { 31 | name: prev.name, 32 | category: prev.category, 33 | path: prev.path 34 | } 35 | } 36 | 37 | flatMenu[join(prefix, newPath + '.md')] = current 38 | prev = current 39 | } 40 | } 41 | 42 | menu.forEach(n => { 43 | menuWalk(n, '', null) 44 | }) 45 | 46 | module.exports.flatMenu = flatMenu 47 | module.exports.convertToRelated = function (entry) { 48 | const menu = flatMenu[join(prefix, entry + '.md')] 49 | 50 | if (!menu) { 51 | console.error('Erroneous related link: ' + entry) 52 | return {} 53 | } 54 | 55 | return { 56 | name: menu.name, 57 | category: menu.category, 58 | path: menu.path 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/demo_data/simple.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | id: '1', 4 | parentId: -1, 5 | nodeComponent: 'demo-node', 6 | data: { 7 | width: 320, 8 | text: 'Parent block', 9 | title: 'New Visitor', 10 | description: 'When a new visitor goes to Site 1', 11 | icon: 'eyeblue', 12 | }, 13 | }, 14 | { 15 | id: '2', 16 | parentId: '1', 17 | nodeComponent: 'demo-node', 18 | data: { 19 | text: 'Parent block', 20 | title: 'New Visitor', 21 | description: 'When a new visitor goes to Site 1', 22 | icon: 'eyeblue', 23 | }, 24 | }, 25 | { 26 | id: '3', 27 | parentId: '1', 28 | nodeComponent: 'demo-node', 29 | data: { 30 | width: 320, 31 | text: 'Parent block', 32 | title: 'New Visitor', 33 | description: 'When a new visitor goes to Site 1', 34 | icon: 'eyeblue', 35 | }, 36 | }, 37 | { 38 | id: '4', 39 | parentId: '3', 40 | nodeComponent: 'demo-node', 41 | data: { 42 | width: 200, 43 | text: 'Parent block', 44 | title: 'New Visitor', 45 | description: 'When a new visitor goes to Site 1', 46 | icon: 'eyeblue', 47 | }, 48 | }, 49 | ]; 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

Flowy Vue

3 | 4 | ![](/public/demo.gif) 5 | 6 | ## 🔥 Features 7 | 8 | - Use Vue components to create a flowchart or hierarchy system 9 | - Easily extendable logic 10 | - Drag and drop events 11 | - Use any component in your node tree, variable widths supported 12 | - Based on [Shopify Draggable Vue](https://github.com/remcoplasmeyer/shopify-draggable-vue) 13 | - (Optional) [Quasar](https://www.quasar.dev) app extension 14 | 15 | ## 📄 Instructions / documentation / examples 16 | 17 | * [**Documentation**](https://remcoplasmeyer.github.io/flowy-vue/) 18 | 19 | ## ⚙️ Developments 20 | 21 | ### `npm run serve` 22 | 23 | Runs the app in the development mode. 24 | Open [http://localhost:8080/flowy-vue](http://localhost:8080/flowy-vue) to view it in the browser. 25 | 26 | The page will reload if you make edits. 27 | You will also see any lint errors in the console. 28 | 29 | ## ⭐️ Show Your Support 30 | 31 | Please give a ⭐️ if this project helped you! 32 | 33 | ## 👏 Contributing 34 | 35 | If you have any questions or requests or want to contribute to `@hipsjs/flowy-vue` or other packages, please write the [issue](https://github.com/remcoplasmeyer/flowy-vue/issues) or give me a Pull Request freely. 36 | 37 | ## 🐞 Bug Report 38 | 39 | If you find a bug, please report to us opening a new [Issue](https://github.com/remcoplasmeyer/flowy-vue/issues) on GitHub. 40 | 41 | ## 📝 License 42 | 43 | This project is [MIT](https://github.com/remcoplasmeyer/flowy-vue/blob/master/LICENSE) licensed. 44 | -------------------------------------------------------------------------------- /docs/build/md-loader.js: -------------------------------------------------------------------------------- 1 | const 2 | LRU = require('lru-cache'), 3 | hash = require('hash-sum') 4 | 5 | const 6 | md = require('./md'), 7 | { convertToRelated, flatMenu } = require('./flat-menu') 8 | 9 | const { 10 | getVueComponent, 11 | parseFrontMatter 12 | } = require('./md-loader-utils') 13 | 14 | const cache = new LRU({ max: 1000 }) 15 | 16 | module.exports = function (source) { 17 | const key = hash(source) 18 | const hit = cache.get(key) 19 | 20 | if (hit) { 21 | // return hit 22 | } 23 | 24 | const { data, content } = parseFrontMatter(source) 25 | 26 | data.title = data.title || 'Generic Page' 27 | 28 | if (data.related !== void 0) { 29 | data.related = data.related.map(entry => convertToRelated(entry)) 30 | } 31 | 32 | if (flatMenu[this.resourcePath]) { 33 | const { prev, next } = flatMenu[this.resourcePath] 34 | 35 | if (prev !== void 0 || next !== void 0) { 36 | data.nav = [] 37 | } 38 | 39 | if (prev !== void 0) { 40 | data.nav.push({ ...prev, dir: 'left' }) 41 | } 42 | if (next !== void 0) { 43 | data.nav.push({ ...next, dir: 'right' }) 44 | } 45 | } 46 | 47 | md.$data = { 48 | toc: [] 49 | } 50 | 51 | const rendered = md.render(content) 52 | const toc = data.toc !== false 53 | ? md.$data.toc 54 | : [] 55 | 56 | md.$data = {} 57 | 58 | const res = getVueComponent( 59 | rendered, 60 | data, 61 | '[' + toc.join(',') + ']' 62 | ) 63 | 64 | cache.set(key, res) 65 | 66 | return res 67 | } 68 | -------------------------------------------------------------------------------- /quasar-app-extension/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-flowy", 3 | "version": "1.0.2", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@hipsjs/flowy-vue": { 8 | "version": "1.0.10", 9 | "resolved": "https://registry.npmjs.org/@hipsjs/flowy-vue/-/flowy-vue-1.0.10.tgz", 10 | "integrity": "sha512-um2n1JsYqwDQ6y1cPc90pr2D/jOh/3idCNHLwdXYwTjfCazqSSukkRZd9Jyy2z+hkbqEGNHyoYyAm/tQR/EbUg==", 11 | "requires": { 12 | "@hipsjs/shopify-draggable-vue": "^1.0.7", 13 | "lodash": "^4.17.15" 14 | } 15 | }, 16 | "@hipsjs/shopify-draggable-vue": { 17 | "version": "1.0.7", 18 | "resolved": "https://registry.npmjs.org/@hipsjs/shopify-draggable-vue/-/shopify-draggable-vue-1.0.7.tgz", 19 | "integrity": "sha512-iEPAL4XOln0wIE+URQ5iBgdZF0bv6cKzHue3FibCnrfDGaVlKw6gwmVcuLxrwy54lQ16UE5ZRh+wc6SZ3zzI0Q==", 20 | "requires": { 21 | "@shopify/draggable": "^1.0.0-beta.8" 22 | } 23 | }, 24 | "@shopify/draggable": { 25 | "version": "1.0.0-beta.8", 26 | "resolved": "https://registry.npmjs.org/@shopify/draggable/-/draggable-1.0.0-beta.8.tgz", 27 | "integrity": "sha512-9IeBPQM93Ad4qFKUopwuTClzoST/1OId4MaSd/8FB5ScCL2tl25UaOGNR8E2hjiL7xK4LN5+I1Ews6amS7YAiA==" 28 | }, 29 | "lodash": { 30 | "version": "4.17.19", 31 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", 32 | "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@hipsjs/flowy-vue", 3 | "version": "1.0.13", 4 | "description": "Shopify draggable for Vue", 5 | "main": "./dist/lib/flowy-vue.common.js", 6 | "private": false, 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build:all": "npm run build:lib && npm run build:lib && npm run build:gh-pages", 10 | "build:demo": "vue-cli-service build --dest dist/demo", 11 | "build:gh-pages": "vue-cli-service build --dest docs", 12 | "build:lib": "vue-cli-service build --target lib --dest dist/lib --name flowy-vue 'src/index.js' && npm run build:copy-api-files", 13 | "build:copy-api-files": "copyfiles -f src/components/*.json dist/lib", 14 | "lint": "npx eslint --ext .js,.vue src *.js", 15 | "release": "bash scripts/release.sh" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/remcoplasmeyer/flowy-vue.git" 20 | }, 21 | "files": [ 22 | "dist/lib" 23 | ], 24 | "author": "Remco Plasmeijer ", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/remcoplasmeyer/flowy-vue/issues" 28 | }, 29 | "peerDependencies": { 30 | "vue": "~2" 31 | }, 32 | "dependencies": { 33 | "@hipsjs/shopify-draggable-vue": "^1.0.7", 34 | "lodash": "^4.17.15" 35 | }, 36 | "devDependencies": { 37 | "@vue/cli-plugin-babel": "4.4.1", 38 | "@vue/cli-plugin-eslint": "4.4.1", 39 | "@vue/cli-service": "4.4.1", 40 | "@vue/eslint-config-airbnb": "5.0.2", 41 | "babel-eslint": "10.1.0", 42 | "copyfiles": "^2.3.0", 43 | "core-js": "3.6.5", 44 | "eslint": "7.1.0", 45 | "eslint-plugin-vue": "6.2.2", 46 | "node-sass": "^4.14.1", 47 | "sass-loader": "^8.0.2", 48 | "vue": "2.6.11", 49 | "vue-template-compiler": "2.6.11" 50 | } 51 | } -------------------------------------------------------------------------------- /docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | 4 | parserOptions: { 5 | parser: 'babel-eslint' 6 | }, 7 | 8 | env: { 9 | browser: true 10 | }, 11 | 12 | extends: [ 13 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 14 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 15 | 'plugin:vue/essential', 16 | 'standard' 17 | ], 18 | 19 | // required to lint *.vue files 20 | plugins: [ 21 | 'vue', 22 | 'quasar', 23 | ], 24 | 25 | globals: { 26 | 'ga': true, // Google Analytics 27 | 'cordova': true, 28 | '__statics': true, 29 | 'Prism': true 30 | }, 31 | 32 | // add your custom rules here 33 | rules: { 34 | // allow async-await 35 | 'generator-star-spacing': 'off', 36 | // allow paren-less arrow functions 37 | 'arrow-parens': 'off', 38 | 'one-var': 'off', 39 | 'prefer-promise-reject-errors': 'off', 40 | 'semi': 'off', 41 | 'comma-dangle': 'off', 42 | 43 | 'no-void': 'off', 44 | 'quotes': 'off', 45 | 'array-bracket-spacing': 'off', 46 | 'brace-style': ['error', 'stroustrup'], 47 | 48 | 'import/export': 'off', 49 | 'import/first': 'off', 50 | 'import/no-absolute-path': 'off', 51 | 'import/no-duplicates': 'off', 52 | 'import/no-named-default': 'off', 53 | 'import/no-webpack-loader-syntax': 'off', 54 | 'import/extensions': 'off', 55 | 'import/no-extraneous-dependencies': 'off', 56 | 57 | 'quasar/check-valid-props': 'warn', 58 | 59 | // allow console.log during development only 60 | 'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off', 61 | // allow debugger during development only 62 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/DeterministicProgress.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 75 | -------------------------------------------------------------------------------- /src/demo_components/DemoBlock.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 36 | 37 | 78 | -------------------------------------------------------------------------------- /docs/src/examples/home/DemoNode.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 42 | 43 | 85 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-doc-starter", 3 | "version": "1.0.0", 4 | "description": "Doc starter based on Quasar docs", 5 | "productName": "quasar-doc-starter", 6 | "author": "Remco Plasmeijer ", 7 | "private": true, 8 | "scripts": { 9 | "dev": "quasar dev", 10 | "dev:ssr": "quasar dev -m ssr", 11 | "build": "quasar build -m spa", 12 | "deploy": "gh-pages -d dist/spa", 13 | "generate-icons": "icongenie generate -m spa --icon ./public/logo.png", 14 | "lint": "eslint --ext .js,.vue src", 15 | "test": "echo \"No test specified\" && exit 0" 16 | }, 17 | "dependencies": { 18 | "@quasar/extras": "^1.0.0", 19 | "core-js": "^3.6.5", 20 | "prismjs": "^1.15.0", 21 | "quasar": "^1.0.0", 22 | "quasar-app-extension-flowy": "^1.0.5" 23 | }, 24 | "devDependencies": { 25 | "@quasar/app": "^2.0.1", 26 | "babel-eslint": "^10.0.1", 27 | "eslint": "^6.8.0", 28 | "eslint-config-standard": "^14.1.0", 29 | "eslint-loader": "^3.0.3", 30 | "eslint-plugin-import": "^2.19.1", 31 | "eslint-plugin-node": "^11.0.0", 32 | "eslint-plugin-promise": "^4.2.1", 33 | "eslint-plugin-quasar": "^1.0.0-alpha.18", 34 | "eslint-plugin-standard": "^4.0.0", 35 | "eslint-plugin-vue": "^6.1.1", 36 | "gh-pages": "^3.1.0", 37 | "gray-matter": "^4.0.2", 38 | "markdown-it": "^10.0.0", 39 | "markdown-it-container": "^2.0.0", 40 | "pug": "^2.0.3", 41 | "pug-plain-loader": "^1.0.0", 42 | "raw-loader": "^4.0.0", 43 | "toml": "^3.0.0", 44 | "workbox-webpack-plugin": "^5.1.3" 45 | }, 46 | "browserslist": [ 47 | "last 4 Chrome versions", 48 | "last 4 Firefox versions", 49 | "last 2 Edge versions", 50 | "last 4 Safari versions", 51 | "last 4 Android versions", 52 | "last 4 ChromeAndroid versions", 53 | "last 4 FirefoxAndroid versions", 54 | "last 4 iOS versions" 55 | ], 56 | "engines": { 57 | "node": ">= 10.0.0", 58 | "npm": ">= 5.6.0", 59 | "yarn": ">= 1.6.0" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/ButtonSize.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 92 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/RouterLink.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 69 | -------------------------------------------------------------------------------- /docs/src/examples/QBtn/IndeterminateProgress.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 73 | -------------------------------------------------------------------------------- /src/demo_components/DemoNode.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 45 | 46 | 91 | -------------------------------------------------------------------------------- /docs/src/router/routes.js: -------------------------------------------------------------------------------- 1 | import Layout from 'layouts/Layout.vue' 2 | import getListingComponent from 'components/getListingComponent.js' 3 | import menu from 'assets/menu.js' 4 | 5 | const docsPages = [] 6 | 7 | function parseMenuNode (node, __path) { 8 | const prefix = __path + (node.path !== void 0 ? '/' + node.path : '') 9 | 10 | if (node.children !== void 0) { 11 | prefix !== '/start' && docsPages.push({ 12 | path: prefix, 13 | component: getListingComponent( 14 | node.name, 15 | node.children.map(node => { 16 | const to = node.external === true 17 | ? node.path 18 | : ( 19 | prefix + ( 20 | node.path !== void 0 21 | ? '/' + node.path 22 | : (node.listPath !== void 0 ? '/' + node.listPath : '') 23 | ) 24 | ) 25 | 26 | if (node.external !== true && node.listPath !== void 0) { 27 | docsPages.push({ 28 | path: to, 29 | component: getListingComponent( 30 | node.name, 31 | node.children.map(node => ({ 32 | title: node.name, 33 | to: prefix + (node.path !== void 0 ? '/' + node.path : ''), 34 | page: true 35 | })) 36 | ) 37 | }) 38 | } 39 | 40 | return { 41 | title: node.name, 42 | to, 43 | page: node.children === void 0 44 | } 45 | }) 46 | ) 47 | }) 48 | 49 | node.children.forEach(node => parseMenuNode(node, prefix)) 50 | } 51 | else if (node.external !== true) { 52 | docsPages.push({ 53 | path: prefix, 54 | component: () => import('pages/' + prefix.substring(1) + '.md') 55 | }) 56 | } 57 | } 58 | 59 | menu.forEach(node => { 60 | parseMenuNode(node, '') 61 | }) 62 | 63 | const redirects = [ 64 | 65 | ] 66 | 67 | const routes = [ 68 | ...redirects.map(entry => ({ 69 | path: entry.from, 70 | redirect: entry.to 71 | })), 72 | 73 | { 74 | path: "/", 75 | redirect: "/home" 76 | }, 77 | { 78 | path: "/", 79 | component: Layout, 80 | children: docsPages 81 | }, 82 | 83 | // Always leave this as last one 84 | { 85 | path: "*", 86 | component: () => import("pages/Error404.vue") 87 | } 88 | ] 89 | 90 | export default routes 91 | -------------------------------------------------------------------------------- /docs/src/css/prism-theme.sass: -------------------------------------------------------------------------------- 1 | .doc-code, .doc-code__inner 2 | margin: 0 3 | position: relative 4 | font-size: 12px 5 | color: $grey-9 6 | background-color: #fdfdfd 7 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace 8 | text-align: left 9 | white-space: pre 10 | word-spacing: normal 11 | word-break: normal 12 | word-wrap: normal 13 | line-height: 1.5 14 | tab-size: 4 15 | hyphens: none 16 | 17 | .doc-code 18 | overflow: visible 19 | padding: 0 20 | border-radius: $generic-border-radius 21 | 22 | &__inner 23 | background-image: linear-gradient(transparent 50%, $code-color 50%) 24 | background-size: 3em 3em 25 | background-origin: content-box 26 | background-attachment: local 27 | max-height: inherit 28 | height: inherit 29 | padding: 1em 30 | display: block 31 | overflow: auto 32 | 33 | &--prerendered 34 | border-width: 1px 1px 1px 3px 35 | border-style: solid 36 | border-color: $separator-color 37 | border-left-color: $primary 38 | border-radius: $generic-border-radius 39 | 40 | .token.comment, 41 | .token.block-comment, 42 | .token.prolog, 43 | .token.doctype, 44 | .token.cdata 45 | color: #7D8B99 46 | 47 | .token 48 | &.punctuation 49 | color: #5F6364 50 | &.important 51 | font-weight: normal 52 | &.bold 53 | font-weight: bold 54 | &.italic 55 | font-style: italic 56 | &.entity 57 | cursor: help 58 | 59 | .token.property, 60 | .token.tag, 61 | .token.boolean, 62 | .token.number, 63 | .token.function-name, 64 | .token.constant, 65 | .token.symbol, 66 | .token.deleted 67 | color: #c92c2c 68 | 69 | .token.selector, 70 | .token.attr-name, 71 | .token.string, 72 | .token.char, 73 | .token.function, 74 | .token.builtin, 75 | .token.inserted 76 | color: #2f9c0a 77 | 78 | .token.operator, 79 | .token.entity, 80 | .token.url, 81 | .token.variable 82 | color: #a67f59 83 | background: rgba(255, 255, 255, 0.5) 84 | 85 | .token.atrule, 86 | .token.attr-value, 87 | .token.keyword, 88 | .token.class-name 89 | color: #1990b8 90 | 91 | .token.regex, 92 | .token.important 93 | color: #e90 94 | 95 | .language-css .token.string, 96 | .style .token.string 97 | color: #a67f59 98 | background: rgba(255, 255, 255, 0.5) 99 | 100 | .namespace 101 | opacity: .7 102 | 103 | .token.tab:not(:empty):before, 104 | .token.cr:before, 105 | .token.lf:before 106 | color: #e0d7d1 107 | 108 | -------------------------------------------------------------------------------- /src/components/Flowy.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "component", 3 | "props": { 4 | "nodes": { 5 | "type": "Array", 6 | "desc": "Initial array of nodes", 7 | "definition": { 8 | "id": { 9 | "desc": "ID of the node", 10 | "type": "String" 11 | }, 12 | "parentId": { 13 | "desc": "ID of the parent node", 14 | "type": "String" 15 | }, 16 | "nodeComponent": { 17 | "desc": "Name of the Vue component that will be rendered for this node", 18 | "type": "Component" 19 | } 20 | } 21 | } 22 | }, 23 | "events": { 24 | "add": { 25 | "desc": "Called when a node is added, add your adding node logic here", 26 | "required": true, 27 | "params": { 28 | "node": { 29 | "desc": "Node that is being dragged to" 30 | } 31 | } 32 | }, 33 | "move": { 34 | "desc": "Called when a node is moved, add your moving node logic here", 35 | "params": { 36 | "dragged": { 37 | "desc": "Node that is being dragged" 38 | }, 39 | "to": { 40 | "desc": "Node that is being dragged to" 41 | } 42 | } 43 | }, 44 | "remove": { 45 | "desc": "Called when the remove method is called, add your removing node logic here", 46 | "params": { 47 | "node": { 48 | "desc": "Node that is being removed" 49 | } 50 | } 51 | }, 52 | "drag-start": { 53 | "params": { 54 | "node": { 55 | "desc": "Node that is being dragged" 56 | } 57 | } 58 | } 59 | }, 60 | "methods": { 61 | "beforeAdd": { 62 | "desc": "Called during drag when a node is added, has to be implemented", 63 | "params": { 64 | "node": { 65 | "desc": "Node that is being dragged to" 66 | } 67 | }, 68 | "returns": { 69 | "type": "Boolean", 70 | "desc": "Return true if the node can be added" 71 | } 72 | }, 73 | "beforeMove": { 74 | "desc": "Called during drag when a node is moved, has to be implemented", 75 | "params": { 76 | "event": { 77 | "type": "Object", 78 | "definition": { 79 | "node": { 80 | "desc": "Node that is being dragged to" 81 | } 82 | } 83 | } 84 | }, 85 | "returns": { 86 | "type": "Boolean", 87 | "desc": "Return true if the node can be moved" 88 | } 89 | } 90 | } 91 | } -------------------------------------------------------------------------------- /docs/src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 39 | 40 | 41 | 42 | 49 | 50 | 51 | 52 | 53 | 54 |
55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /docs/build/md-loader-utils.js: -------------------------------------------------------------------------------- 1 | const 2 | matter = require('gray-matter'), 3 | toml = require('toml') 4 | 5 | function getComponentsImport (comp) { 6 | return comp.map(c => { 7 | const parts = c.split('/') 8 | return `import ${parts[parts.length - 1]} from 'components/${c}.vue'\n` 9 | }).join('') 10 | } 11 | 12 | function getComponentsDeclaration (comp) { 13 | const list = comp.map(c => { 14 | const parts = c.split('/') 15 | return parts[parts.length - 1] 16 | }).join(',') 17 | 18 | return `components: { ${list} },` 19 | } 20 | 21 | // Make sure to keep in sync with /src/assets/get-meta.js 22 | 23 | module.exports.getVueComponent = function (rendered, data, toc) { 24 | return ` 25 | 28 | ` 75 | } 76 | 77 | module.exports.parseFrontMatter = function (content) { 78 | return matter(content, { 79 | excerpt_separator: '', 80 | engines: { 81 | toml: toml.parse.bind(toml), 82 | excerpt: false 83 | } 84 | }) 85 | } 86 | -------------------------------------------------------------------------------- /docs/src/components/AppMenu.js: -------------------------------------------------------------------------------- 1 | import { 2 | QExpansionItem, 3 | QItem, 4 | QItemSection, 5 | QIcon, 6 | QBadge, 7 | QList 8 | } from 'quasar' 9 | 10 | import Menu from 'assets/menu.js' 11 | import './AppMenu.sass' 12 | 13 | export default { 14 | name: 'AppMenu', 15 | 16 | watch: { 17 | $route (route) { 18 | this.showMenu(this.$refs[route.path]) 19 | } 20 | }, 21 | 22 | methods: { 23 | showMenu (comp) { 24 | if (comp !== void 0 && comp !== this) { 25 | this.showMenu(comp.$parent) 26 | comp.show !== void 0 && comp.show() 27 | } 28 | }, 29 | 30 | getDrawerMenu (h, menu, path, level) { 31 | if (menu.children !== void 0) { 32 | return h( 33 | QExpansionItem, 34 | { 35 | staticClass: 'non-selectable', 36 | ref: path, 37 | key: `${menu.name}-${path}`, 38 | props: { 39 | label: menu.name, 40 | dense: level > 0, 41 | icon: menu.icon, 42 | defaultOpened: menu.opened, 43 | expandSeparator: true, 44 | switchToggleSide: level > 0, 45 | denseToggle: level > 0 46 | } 47 | }, 48 | menu.children.map(item => this.getDrawerMenu( 49 | h, 50 | item, 51 | path + (item.path !== void 0 ? '/' + item.path : ''), 52 | level + 1 53 | )) 54 | ) 55 | } 56 | 57 | const props = { 58 | to: path, 59 | dense: level > 0, 60 | insetLevel: level > 1 ? 1.2 : level 61 | } 62 | 63 | const attrs = {} 64 | 65 | if (menu.external === true) { 66 | Object.assign(props, { 67 | to: void 0, 68 | clickable: true, 69 | tag: 'a' 70 | }) 71 | 72 | attrs.href = menu.path 73 | attrs.target = '_blank' 74 | } 75 | 76 | return h(QItem, { 77 | ref: path, 78 | key: path, 79 | props, 80 | attrs, 81 | staticClass: 'app-menu-entry non-selectable' 82 | }, [ 83 | menu.icon !== void 0 84 | ? h(QItemSection, { 85 | props: { avatar: true } 86 | }, [ h(QIcon, { props: { name: menu.icon } }) ]) 87 | : null, 88 | 89 | h(QItemSection, [ menu.name ]), 90 | 91 | menu.badge !== void 0 92 | ? h(QItemSection, { 93 | props: { side: true } 94 | }, [ h(QBadge, [ menu.badge ]) ]) 95 | : null 96 | ]) 97 | } 98 | }, 99 | 100 | render (h) { 101 | return h(QList, { staticClass: 'app-menu' }, Menu.map( 102 | item => this.getDrawerMenu(h, item, '/' + item.path, 0) 103 | )) 104 | }, 105 | 106 | mounted () { 107 | this.showMenu(this.$refs[this.$route.path]) 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /docs/src/pages/home.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation 3 | desc: Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project. 4 | --- 5 | 6 | Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project. 7 | 8 | ## Features 9 | 10 | - Use Vue components to create a flowchart or hierarchy system 11 | - Easily extendable logic 12 | - Drag and drop events 13 | - Use any component in your node tree, variable widths supported 14 | - (Optional) [Quasar](https://www.quasar.dev) app extension 15 | 16 | ## Install 17 | 18 | ### Default / Vue CLI 19 | 20 | Install package with npm (or yarn) 21 | 22 | `npm i --save @hipsjs/flowy-vue` 23 | 24 | Enable plugin and import css 25 | 26 | ```js 27 | import Vue from "vue"; 28 | import FlowyPlugin from "@hipsjs/flowy-vue"; 29 | import "@hipsjs/flowy-vue/dist/lib/flowy-vue.css"; 30 | 31 | Vue.use(FlowyPlugin); 32 | ``` 33 | 34 | ### UMD 35 | 36 | ```html 37 | 38 | 39 | 40 | 41 | 42 | 43 | ``` 44 | 45 | ### Quasar 46 | 47 | With the Quasar CLI 48 | `quasar ext add flowy` 49 | 50 | **OR** 51 | 52 | Create a boot file and enable your boot file in quasar.conf.js 53 | `npm i --save @hipsjs/flowy-vue` 54 | 55 | ```js 56 | import FlowyPlugin from "@hipsjs/flowy-vue"; 57 | import "@hipsjs/flowy-vue/dist/lib/flowy-vue.css"; 58 | 59 | export default ({ Vue }) => { 60 | Vue.use(FlowyPlugin); 61 | } 62 | ``` 63 | 64 | ### Codepen 65 | 66 | Click the codepen button in the examples below :) 67 | 68 | ## Usage 69 | 70 | - Use `FlowyNewBlock` component to define blocks can be dragged and how the nodes will render 71 | - Wrap your drag handles with the `FlowyDragHandle` component 72 | - Use `Flowy` component and pass the initial `nodes` and define your logic using the event and method system 73 | 74 | The example below uses all current features of Flowy Vue. Quasar was used for the UI components and can be easily replaced with any Vue component. 75 | The `add`, `move`, `remove` events have to be implemented for Flowy Vue to work, the example below implements simple logic using lodash. 76 | 77 | It will: 78 | 79 | - Add and move nodes to the tree upon drag 80 | - Restrict the upper parent node from being draggable 81 | - Restrict the non-draggable block from being draggable 82 | 83 | 84 | 85 | ## API 86 | 87 | ### Flowy 88 | 89 | 90 | 91 | ### FlowyNewBlock 92 | 93 | 94 | 95 | ### FlowyDragHandle 96 | 97 | 98 | -------------------------------------------------------------------------------- /docs/src/css/app.sass: -------------------------------------------------------------------------------- 1 | @import './prism-theme.sass' 2 | @import './quasar.overrides.scss' 3 | 4 | body 5 | background-color: $grey-1 6 | font-size: 16px 7 | line-height: 1.625 8 | 9 | ul 10 | margin: 0 0 16px 11 | 12 | .bg-code 13 | background-color: $code-color 14 | 15 | .doc-token 16 | white-space: nowrap 17 | display: inline-block 18 | padding: 6px 8px 19 | font-size: 14px 20 | line-height: 1 21 | border: 1px solid $grey-3 22 | border-radius: 5px 23 | font-family: inherit 24 | background-color: #fff 25 | 26 | blockquote .doc-token 27 | background: scale-color($grey, $lightness: 60%) 28 | color: $grey-9 29 | 30 | .doc-note 31 | background-color: $grey-3 32 | border-radius: $generic-border-radius 33 | margin: 16px 0 34 | padding: 16px 24px 35 | font-size: 1em 36 | border-width: 0 5px 37 | border-style: solid 38 | border-color: $grey 39 | letter-spacing: .5px 40 | 41 | .doc-token 42 | color: #000 43 | 44 | > p, > ul 45 | margin-bottom: 0 46 | 47 | &--tip 48 | background-color: scale-color($positive, $lightness: 75%) 49 | border-color: $positive 50 | .doc-token 51 | border-width: 0 52 | color: #fff 53 | background: $positive 54 | .doc-link 55 | color: scale-color($positive, $lightness: -35%) 56 | 57 | &--warning 58 | background-color: scale-color($warning, $lightness: 50%) 59 | border-color: $warning 60 | .doc-token 61 | border-width: 0 62 | background: $warning 63 | .doc-link 64 | color: scale-color($warning, $lightness: -45%) 65 | 66 | &--danger 67 | background-color: scale-color($negative, $lightness: 80%) 68 | border-color: $negative 69 | .doc-token 70 | border-width: 0 71 | color: #fff 72 | background: $negative 73 | .doc-link 74 | color: scale-color($negative, $lightness: -25%) 75 | 76 | &__title 77 | font-weight: 500 78 | 79 | .doc-heading 80 | color: $primary 81 | cursor: pointer 82 | 83 | &:after 84 | content: ' #' 85 | opacity: 0 86 | &:hover:after 87 | opacity: 1 88 | 89 | .doc-h1 90 | font-size: 2rem 91 | line-height: 2rem 92 | padding: 1rem 0 93 | font-weight: 500 94 | margin: 0 0 2rem 95 | 96 | .doc-h2 97 | font-size: 1.5rem 98 | line-height: 1.5rem 99 | padding: 0.5rem 0 100 | font-weight: 500 101 | border-bottom: 1px solid #ccc 102 | margin: 4rem 0 1.5rem 103 | 104 | .doc-h3 105 | font-size: 1.1rem 106 | line-height: 1.1rem 107 | padding: 0.45rem 0 108 | margin: 2rem 0 1rem 109 | 110 | .doc-h4 111 | font-size: 1rem 112 | line-height: 1rem 113 | padding: 0.25rem 0 114 | margin: 1.5rem 0 115 | 116 | .doc-h5 117 | font-size: 0.9rem 118 | margin: 1.5rem 0 119 | 120 | .doc-h6 121 | font-size: 0.8rem 122 | margin: 1.5rem 0 123 | 124 | .doc-img 125 | max-width: 100% 126 | 127 | .doc-page-listing 128 | .q-icon 129 | font-size: 20px 130 | margin-right: 8px 131 | color: $primary 132 | 133 | kbd 134 | white-space: nowrap 135 | display: inline-block 136 | padding: 2px 4px 137 | text-transform: uppercase 138 | line-height: 1 139 | border: 1px solid rgba(0,0,0,.12) 140 | border-radius: 5px 141 | color: #fff 142 | background-color: $grey-7 143 | box-shadow: $shadow-2 144 | 145 | .doc-gdpr 146 | max-width: 360px 147 | 148 | .q-page > .q-badge + .doc-example 149 | margin-top: 0 150 | 151 | li 152 | margin-bottom: 2px; 153 | -------------------------------------------------------------------------------- /docs/src/pages/Error404.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 30 | 31 | 71 | -------------------------------------------------------------------------------- /docs/src/components/HeaderMenu.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 92 | -------------------------------------------------------------------------------- /docs/src/components/DocInstallation.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 151 | -------------------------------------------------------------------------------- /docs/src/components/DocPage.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 83 | 84 | 165 | -------------------------------------------------------------------------------- /src/components/Flowy.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 118 | 119 | 221 | -------------------------------------------------------------------------------- /docs/src/components/Codepen.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 155 | -------------------------------------------------------------------------------- /docs/quasar.conf.js: -------------------------------------------------------------------------------- 1 | // Configuration for your app 2 | const path = require('path') 3 | 4 | module.exports = function (ctx) { 5 | return { 6 | // app boot file (/src/boot) 7 | // --> boot files are part of "main.js" 8 | boot: [{ path: "gdpr", server: false }, "components"], 9 | 10 | css: ["app.sass"], 11 | 12 | extras: ["roboto-font", "material-icons"], 13 | 14 | // preFetch: true, 15 | 16 | build: { 17 | vueRouterMode: "history", 18 | showProgress: ctx.dev, 19 | distDir: "dist/spa", 20 | publicPath: !ctx.dev 21 | ? "https://remcoplasmeyer.github.io/flowy-vue/" 22 | : "", 23 | // analyze: true, 24 | 25 | chainWebpack(chain) { 26 | chain.module 27 | .rule("eslint") 28 | .pre() 29 | .exclude.add(/node_modules|\.md\.js$/) 30 | .end() 31 | .test(/\.(js|vue)$/) 32 | .use("eslint-loader") 33 | .loader("eslint-loader"); 34 | 35 | chain.resolve.alias.merge({ 36 | examples: path.resolve(__dirname, "src/examples"), 37 | markup: path.resolve(__dirname, "src/markup"), 38 | vue$: "vue/dist/vue.esm.js", // use Vue full build to use Vue.compile 39 | _: "lodash" 40 | }); 41 | 42 | chain.module 43 | .rule("pug") 44 | .test(/\.pug$/) 45 | .use("pug-loader") 46 | .loader("pug-plain-loader"); 47 | 48 | const rule = chain.module.rule("md").test(/\.md$/); 49 | 50 | rule 51 | .use("v-loader") 52 | .loader("vue-loader") 53 | .options({ 54 | productionMode: ctx.prod, 55 | compilerOptions: { 56 | preserveWhitespace: false 57 | }, 58 | transformAssetUrls: { 59 | video: "src", 60 | source: "src", 61 | img: "src", 62 | image: "xlink:href" 63 | } 64 | }); 65 | 66 | rule.use("md-loader").loader(require.resolve("./build/md-loader")); 67 | } 68 | }, 69 | 70 | devServer: { 71 | // https: true, 72 | port: 9090, 73 | open: true // opens browser window automatically 74 | }, 75 | 76 | framework: { 77 | importStrategy: "all", 78 | iconSet: "svg-mdi-v5", 79 | 80 | config: { 81 | loadingBar: { 82 | color: "amber" 83 | } 84 | } 85 | }, 86 | 87 | animations: ["fadeIn", "fadeOut"], 88 | 89 | ssr: { 90 | pwa: true 91 | }, 92 | 93 | pwa: { 94 | // workboxPluginMode: 'InjectManifest', 95 | workboxOptions: { 96 | cleanupOutdatedCaches: true, 97 | skipWaiting: true, 98 | clientsClaim: true, 99 | runtimeCaching: [ 100 | { 101 | urlPattern: /^https:\/\/cdn/, 102 | handler: "StaleWhileRevalidate" 103 | } 104 | ] 105 | }, 106 | manifest: { 107 | name: "Quasar Documentation", 108 | short_name: "Quasar Docs", 109 | description: "Quasar Framework Documentation", 110 | display: "standalone", 111 | orientation: "portrait", 112 | background_color: "#ffffff", 113 | theme_color: "#027be3", 114 | icons: [ 115 | { 116 | src: "https://cdn.quasar.dev/app-icons/icon-128x128.png", 117 | sizes: "128x128", 118 | type: "image/png" 119 | }, 120 | { 121 | src: "https://cdn.quasar.dev/app-icons/icon-192x192.png", 122 | sizes: "192x192", 123 | type: "image/png" 124 | }, 125 | { 126 | src: "https://cdn.quasar.dev/app-icons/icon-256x256.png", 127 | sizes: "256x256", 128 | type: "image/png" 129 | }, 130 | { 131 | src: "https://cdn.quasar.dev/app-icons/icon-384x384.png", 132 | sizes: "384x384", 133 | type: "image/png" 134 | }, 135 | { 136 | src: "https://cdn.quasar.dev/app-icons/icon-512x512.png", 137 | sizes: "512x512", 138 | type: "image/png" 139 | } 140 | ] 141 | }, 142 | metaVariables: { 143 | appleTouchIcon120: 144 | "https://cdn.quasar.dev/app-icons/apple-icon-120x120.png", 145 | appleTouchIcon180: 146 | "https://cdn.quasar.dev/app-icons/apple-icon-180x180.png", 147 | appleTouchIcon152: 148 | "https://cdn.quasar.dev/app-icons/apple-icon-152x152.png", 149 | appleTouchIcon167: 150 | "https://cdn.quasar.dev/app-icons/apple-icon-167x167.png", 151 | appleSafariPinnedTab: 152 | "https://cdn.quasar.dev/app-icons/safari-pinned-tab.svg", 153 | msapplicationTileImage: 154 | "https://cdn.quasar.dev/app-icons/ms-icon-144x144.png" 155 | } 156 | }, 157 | 158 | vendor: { 159 | remove: [ 160 | "quasar/dist/api", 161 | 162 | // following are used by algolia 163 | "algoliasearch", 164 | "autocomplete.js", 165 | "hogan.js", 166 | "request", 167 | "stack-utils", 168 | "to-factory", 169 | "zepto", 170 | "es6-promise" 171 | ] 172 | } 173 | }; 174 | } 175 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributor Covenant Code of Conduct 3 | 4 | ## Our Pledge 5 | 6 | We as members, contributors, and leaders pledge to make participation in our 7 | community a harassment-free experience for everyone, regardless of age, body 8 | size, visible or invisible disability, ethnicity, sex characteristics, gender 9 | identity and expression, level of experience, education, socio-economic status, 10 | nationality, personal appearance, race, religion, or sexual identity 11 | and orientation. 12 | 13 | We pledge to act and interact in ways that contribute to an open, welcoming, 14 | diverse, inclusive, and healthy community. 15 | 16 | ## Our Standards 17 | 18 | Examples of behavior that contributes to a positive environment for our 19 | community include: 20 | 21 | * Demonstrating empathy and kindness toward other people 22 | * Being respectful of differing opinions, viewpoints, and experiences 23 | * Giving and gracefully accepting constructive feedback 24 | * Accepting responsibility and apologizing to those affected by our mistakes, 25 | and learning from the experience 26 | * Focusing on what is best not just for us as individuals, but for the 27 | overall community 28 | 29 | Examples of unacceptable behavior include: 30 | 31 | * The use of sexualized language or imagery, and sexual attention or 32 | advances of any kind 33 | * Trolling, insulting or derogatory comments, and personal or political attacks 34 | * Public or private harassment 35 | * Publishing others' private information, such as a physical or email 36 | address, without their explicit permission 37 | * Other conduct which could reasonably be considered inappropriate in a 38 | professional setting 39 | 40 | ## Enforcement Responsibilities 41 | 42 | Community leaders are responsible for clarifying and enforcing our standards of 43 | acceptable behavior and will take appropriate and fair corrective action in 44 | response to any behavior that they deem inappropriate, threatening, offensive, 45 | or harmful. 46 | 47 | Community leaders have the right and responsibility to remove, edit, or reject 48 | comments, commits, code, wiki edits, issues, and other contributions that are 49 | not aligned to this Code of Conduct, and will communicate reasons for moderation 50 | decisions when appropriate. 51 | 52 | ## Scope 53 | 54 | This Code of Conduct applies within all community spaces, and also applies when 55 | an individual is officially representing the community in public spaces. 56 | Examples of representing our community include using an official e-mail address, 57 | posting via an official social media account, or acting as an appointed 58 | representative at an online or offline event. 59 | 60 | ## Enforcement 61 | 62 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 63 | reported to the community leaders responsible for enforcement at 64 | remco.plasmeijer@gmail.com. 65 | All complaints will be reviewed and investigated promptly and fairly. 66 | 67 | All community leaders are obligated to respect the privacy and security of the 68 | reporter of any incident. 69 | 70 | ## Enforcement Guidelines 71 | 72 | Community leaders will follow these Community Impact Guidelines in determining 73 | the consequences for any action they deem in violation of this Code of Conduct: 74 | 75 | ### 1. Correction 76 | 77 | **Community Impact**: Use of inappropriate language or other behavior deemed 78 | unprofessional or unwelcome in the community. 79 | 80 | **Consequence**: A private, written warning from community leaders, providing 81 | clarity around the nature of the violation and an explanation of why the 82 | behavior was inappropriate. A public apology may be requested. 83 | 84 | ### 2. Warning 85 | 86 | **Community Impact**: A violation through a single incident or series 87 | of actions. 88 | 89 | **Consequence**: A warning with consequences for continued behavior. No 90 | interaction with the people involved, including unsolicited interaction with 91 | those enforcing the Code of Conduct, for a specified period of time. This 92 | includes avoiding interactions in community spaces as well as external channels 93 | like social media. Violating these terms may lead to a temporary or 94 | permanent ban. 95 | 96 | ### 3. Temporary Ban 97 | 98 | **Community Impact**: A serious violation of community standards, including 99 | sustained inappropriate behavior. 100 | 101 | **Consequence**: A temporary ban from any sort of interaction or public 102 | communication with the community for a specified period of time. No public or 103 | private interaction with the people involved, including unsolicited interaction 104 | with those enforcing the Code of Conduct, is allowed during this period. 105 | Violating these terms may lead to a permanent ban. 106 | 107 | ### 4. Permanent Ban 108 | 109 | **Community Impact**: Demonstrating a pattern of violation of community 110 | standards, including sustained inappropriate behavior, harassment of an 111 | individual, or aggression toward or disparagement of classes of individuals. 112 | 113 | **Consequence**: A permanent ban from any sort of public interaction within 114 | the community. 115 | 116 | ## Attribution 117 | 118 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 119 | version 2.0, available at 120 | 121 | 122 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 123 | enforcement ladder](https://github.com/mozilla/diversity). 124 | 125 | [homepage]: https://www.contributor-covenant.org 126 | 127 | For answers to common questions about this code of conduct, see the FAQ at 128 | Translations are available at 129 | 130 | -------------------------------------------------------------------------------- /docs/src/components/DocExample.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 181 | 182 | 212 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 144 | 145 | 236 | -------------------------------------------------------------------------------- /docs/src/assets/sad.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/src/examples/home/demo.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 290 | 291 | 300 | -------------------------------------------------------------------------------- /src/components/FlowyNode.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 365 | 366 | 373 | -------------------------------------------------------------------------------- /docs/src/components/DocApi.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 319 | 320 | 333 | --------------------------------------------------------------------------------