├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── example ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── device.svg │ ├── favicon.ico │ ├── index.html │ ├── north_pole.png │ └── ups.png └── src │ ├── App.vue │ └── main.js ├── jest.config.js ├── package-lock.json ├── package.json ├── src ├── components │ └── Network.vue ├── index.js ├── main.js └── utils.js └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], 7 | parserOptions: { 8 | parser: "babel-eslint" 9 | }, 10 | rules: { 11 | "no-console": process.env.NODE_ENV === "production" ? "error" : "off", 12 | "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off" 13 | }, 14 | overrides: [ 15 | { 16 | files: [ 17 | "**/__tests__/*.{j,t}s?(x)", 18 | "**/tests/unit/**/*.spec.{j,t}s?(x)" 19 | ], 20 | env: { 21 | jest: true 22 | } 23 | } 24 | ] 25 | }; 26 | -------------------------------------------------------------------------------- /.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 | lerna-debug.log* 12 | lerna-error.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | rollup-plugin-vue/.gitignore 2 | *.log 3 | *.swp 4 | *.yml 5 | bower.json 6 | coverage 7 | config 8 | dist/*.map 9 | lib 10 | test 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - node 5 | script: 6 | - yarn run build:bundle 7 | deploy: 8 | provider: npm 9 | skip_cleanup: true 10 | email: contact@r3code.ru 11 | api_key: 12 | secure: TODO 13 | on: 14 | tags: true 15 | repo: r3code/vue-vis-network 16 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 6 | 7 | ## [Unreleased] 8 | NA 9 | 10 | ## [1.0.2] - 2020-03-11 11 | ### Changed 12 | - Build scripts replaced by `vue-cli-service` to build the dist 13 | - Code style fixed 14 | 15 | ## [1.0.1] - 2020-02-20 16 | ### Added 17 | - Published at https://www.npmjs.com/package/vue-vis-network 18 | 19 | ## [1.0.0] - 2019-19-09 20 | ### Added 21 | - All major functionality added. First public release 22 | 23 | ## [0.0.3] - 2019-09-04 24 | ### Added 25 | - Added an example of use rewritten from scratch 26 | 27 | ### Removed 28 | - Removed old complicated example 29 | 30 | ## [0.0.2] - 2019-09-04 31 | ### Changed 32 | - Dependency updated vis-network up to 5.3.1 33 | 34 | ## [0.0.1] - 2019-09-02 35 | ### Added 36 | - Support vis-network 37 | - Added CHANGELOG.md 38 | -------------------------------------------------------------------------------- /CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. 4 | 5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality. 6 | 7 | Examples of unacceptable behavior by participants include: 8 | 9 | * The use of sexualized language or imagery 10 | * Personal attacks 11 | * Trolling or insulting/derogatory comments 12 | * Public or private harassment 13 | * Publishing other's private information, such as physical or electronic addresses, without explicit permission 14 | * Other unethical or unprofessional conduct. 15 | 16 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team. 17 | 18 | This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community in a direct capacity. Personal views, beliefs and values of individuals do not necessarily reflect those of the organisation or affiliated individuals and organisations. 19 | 20 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. 21 | 22 | This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.2.0, available at [http://contributor-covenant.org/version/1/2/0/](http://contributor-covenant.org/version/1/2/0/) 23 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are **welcome** and will be fully **credited**. 4 | 5 | We accept contributions via Pull Requests on [Github](https://github.com/r3code/). 6 | 7 | 8 | ## Pull Requests 9 | 10 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date. 11 | 12 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option. 13 | 14 | - **Create feature branches** - Don't ask us to pull from your master branch. 15 | 16 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests. 17 | 18 | **Happy coding**! 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Dmitriy S. Sinyavskiy 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-vis-network 2 | 3 | ***!!! NOTE !!! Hi developer. Please contribute to the project if you find a bug or suggest an improvement / feature. Because I’m very, very busy these days, and it won’t end in the next 2-4 months. Hope you can do it faster than me )*** 4 | 5 | > Vue2 component to integrate with Vis-Network views 6 | 7 |

8 | 9 | Build Status 10 | 11 | 12 | Coverage Status 13 | 14 | 15 | Software License 16 | 17 | 18 | Packagist 19 | 20 | 21 | Latest Version 22 | 23 | 24 | 25 | Issues 26 | 27 |

28 | 29 | Best reagrds to the https://github.com/alexcode/vue2vis which is the base for this component. This project might have some issues from https://github.com/alexcode/vue2vis 30 | 31 | ### Installation 32 | ``` 33 | npm install --save vis-util vis-data vis-network vue-vis-network 34 | ``` 35 | 36 | or 37 | 38 | ``` 39 | yarn add vis-util vis-data vis-network vue-vis-network 40 | ``` 41 | 42 | ## Usage 43 | 44 | Declare the component 45 | ``` javascript 46 | import { Network } from "vue-vis-network"; 47 | Vue.component('network', Network); 48 | ``` 49 | 50 | Add the component in the template. 51 | 52 | ```html 53 | 54 |
55 | 59 | 60 |
61 | 62 | ``` 63 | 64 | Add groups, items and options in your observed data or computed. 65 | ``` javascript 66 | new Vue({ 67 | el: '#app', 68 | data() { 69 | return { 70 | nodes: [ 71 | {id: 1, label: 'circle', shape: 'circle' }, 72 | {id: 2, label: 'ellipse', shape: 'ellipse'}, 73 | {id: 3, label: 'database',shape: 'database'}, 74 | {id: 4, label: 'box', shape: 'box' }, 75 | {id: 5, label: 'diamond', shape: 'diamond'}, 76 | {id: 6, label: 'dot', shape: 'dot'}, 77 | {id: 7, label: 'square', shape: 'square'}, 78 | {id: 8, label: 'triangle',shape: 'triangle'}, 79 | ], 80 | edges: [ 81 | {from: 1, to: 2}, 82 | {from: 2, to: 3}, 83 | {from: 2, to: 4}, 84 | {from: 2, to: 5}, 85 | {from: 5, to: 6}, 86 | {from: 5, to: 7}, 87 | {from: 6, to: 8} 88 | ], 89 | options: { 90 | nodes: { 91 | borderWidth: 4 92 | }, 93 | edges: { 94 | color: 'lightgray' 95 | } 96 | } 97 | } 98 | }, 99 | }); 100 | ``` 101 | 102 | Add Visjs CSS 103 | ``` css 104 | import "vue-vis-network/node_modules/vis-network/dist/vis-network.css"; 105 | ``` 106 | 107 | Here is a [basic working demo](https://codepen.io/r3code/pen/abOjJbQ) 108 | 109 | ## Events 110 | 111 | ### Component Events 112 | By default all Vis-network events are emitted by your component. You can subscribe to a subset by passing an array in the prop `events` [Vis-network event](https://visjs.github.io/vis-network/docs/network/#Events). 113 | 114 | ```html 115 | 116 |
117 | 124 | 125 |
126 | 127 | ``` 128 | 129 | ### Data Events 130 | 131 | When you pass an Array of data object, it is converted internally as a DataSet. 132 | An event with the DataSet object will be fired at mounted. It's name will be prepend with the prop name (Ex: `items-mounted`, `groups-mounted`). You could use it to interact with the DataSet. 133 | 134 | All the [Visjs DataSet event](https://visjs.github.io/vis-data/data/dataset.html#Events) will be prepened the same fashion (`items-add`, `items-remove`, `items-update`). For example, pushing a new object to the `items` prop will fire a `items-add` event with the following payload: 135 | ```javascript 136 | { 137 | event: 'add', 138 | properties: { 139 | items: [7], 140 | }, 141 | senderId: null, 142 | } 143 | ``` 144 | 145 | #### Advanced 146 | 147 | You can also manage your own data bindings by passing your own DataSet or DataView instead of an Array. 148 | 149 | ``` javascript 150 | import { DataSet } from 'vue-vis-network'; 151 | 152 | new Vue({ 153 | el: '#app', 154 | data() { 155 | return { 156 | nodes: new DataSet([ 157 | {id: 1, label: 'circle', shape: 'circle' }, 158 | {id: 2, label: 'ellipse', shape: 'ellipse'}, 159 | {id: 3, label: 'database',shape: 'database'} 160 | ]), 161 | edges: new DataSet([ 162 | {from: 1, to: 2}, 163 | {from: 1, to: 3} 164 | ]), 165 | options: { 166 | nodes: { 167 | borderWidth: 4 168 | } 169 | } 170 | } 171 | }, 172 | }); 173 | ``` 174 | 175 | ## Vis-network documentation 176 | 177 | For the full reference see: 178 | * [Network](https://visjs.github.io/vis-network/docs/network/) 179 | * [DataSet](https://visjs.github.io/vis-data/data/dataset.html) 180 | * [DataView](https://visjs.github.io/vis-data/data/dataview.html) 181 | 182 | ## Change log 183 | 184 | Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. 185 | 186 | ## Testing 187 | 188 | ``` bash 189 | $ npm run test 190 | ``` 191 | 192 | ## Contributing 193 | Please see [CONTRIBUTING](CONTRIBUTING.md) and [CONDUCT](CONDUCT.md) for details. 194 | 195 | ### Build Setup 196 | 197 | ``` bash 198 | # Once you have cloned this repo, install dependencies 199 | $ npm install 200 | 201 | # Build for development and production with minification 202 | $ npm run build 203 | 204 | ``` 205 | **Build for production** 206 | ``` 207 | # Linux 208 | NODE_ENV=production npm run build 209 | # Windows 210 | set NODE_ENV=production && npm run build 211 | # Prepare for NPM 212 | set NODE_ENV=production && npm run build:bundle 213 | 214 | ``` 215 | 216 | ### Run demo locally 217 | 218 | ``` bash 219 | # install vue-vis-network local module 220 | cd .. 221 | npm link 222 | # prepare example 223 | cd example 224 | # install the example dependencies 225 | npm install 226 | # add local vue-vis-network module to node_modules 227 | npm link vue-vis-network 228 | # run demo server 229 | npm run serve 230 | ``` 231 | Go to to see running examples 232 | 233 | NOTE: If you make changes to the library you should run `npm run build` again in the root folder. 234 | The dev server should detect modification and reload the demo 235 | 236 | ## Security 237 | 238 | If you discover any security related issues, please email contact@r3code.ru instead of using the issue tracker. 239 | 240 | ## Credits 241 | 242 | - [Dmitriy S. Sinyavskiy][link-author] 243 | - [Alex Couturon](https://github.com/alexcode) 244 | - [All Contributors][link-contributors] 245 | 246 | ## License 247 | 248 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 249 | 250 | [link-author]: https://github.com/r3code 251 | [link-contributors]: ../../contributors 252 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Vue Vis-Network integration example 2 | 3 | > An example project integrating Vue and vis-network 4 | 5 | ## Project setup 6 | ``` bash 7 | # install vue-vis-network local module 8 | cd .. 9 | npm link 10 | # prepare example 11 | cd example 12 | # install the example dependencies 13 | npm install 14 | # add local vue-vis-network module to node_modules 15 | npm link vue-vis-network 16 | ``` 17 | 18 | ### Live Demo 19 | ``` 20 | npm run serve 21 | ``` 22 | 23 | Go to to see an example running 24 | 25 | NOTE: If you make changes to the library you should run `npm run build` again in the root folder to rebuild vue-vis-network package. 26 | The dev server should detect modification and reload the demo 27 | 28 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vis-network-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.6.11", 12 | "vue-vis-network": "1.0.2" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.12.1", 16 | "@vue/cli-plugin-eslint": "^3.12.1", 17 | "@vue/cli-service": "^3.12.1", 18 | "babel-eslint": "^10.1.0", 19 | "eslint": "^5.16.0", 20 | "eslint-plugin-html": "^6.0.0", 21 | "eslint-plugin-vue": "^5.0.0", 22 | "vue-template-compiler": "^2.6.11" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/essential", 31 | "eslint:recommended" 32 | ], 33 | "rules": {}, 34 | "parserOptions": { 35 | "parser": "babel-eslint" 36 | } 37 | }, 38 | "postcss": { 39 | "plugins": { 40 | "autoprefixer": {} 41 | } 42 | }, 43 | "browserslist": [ 44 | "> 1%", 45 | "last 2 versions" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /example/public/device.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Windowsphone 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r3code/vue-vis-network/6f03c6aaeb589f670fc787845a78d5c6f72c8525/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vue Vis-Network integration example 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/public/north_pole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r3code/vue-vis-network/6f03c6aaeb589f670fc787845a78d5c6f72c8525/example/public/north_pole.png -------------------------------------------------------------------------------- /example/public/ups.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r3code/vue-vis-network/6f03c6aaeb589f670fc787845a78d5c6f72c8525/example/public/ups.png -------------------------------------------------------------------------------- /example/src/App.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 167 | 168 | 188 | -------------------------------------------------------------------------------- /example/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue" 2 | import App from "./App.vue" 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount("#app") 9 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "@vue/cli-plugin-unit-jest" 3 | }; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vis-network", 3 | "version": "1.0.2", 4 | "description": "Vue2 component to integrate with vis-network", 5 | "main": "dist/vueVisNetwork.umd.js", 6 | "module": "dist/vueVisNetwork.common.js", 7 | "directories": { 8 | "example": "example" 9 | }, 10 | "scripts": { 11 | "serve": "vue-cli-service serve --open", 12 | "build": "vue-cli-service build", 13 | "build:bundle": "vue-cli-service build --target lib --name vueVisNetwork src/main.js", 14 | "test:unit": "vue-cli-service test:unit", 15 | "lint": "vue-cli-service lint", 16 | "beforePublish": "npm run lint && npm run build" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/r3code/vue-vis-network.git" 21 | }, 22 | "files": [ 23 | "dist/", 24 | "src/" 25 | ], 26 | "author": "Dmitriy S. Sinyavskiy ", 27 | "license": "MIT", 28 | "keywords": [ 29 | "vue", 30 | "vis", 31 | "visjs", 32 | "vis-network" 33 | ], 34 | "dependencies": { 35 | "vis-data": "^6.5.0", 36 | "vis-network": "^7.4.0" 37 | }, 38 | "peerDependencies": { 39 | "vue": "~2.x", 40 | "vue-vis-network": "^1.0.2" 41 | }, 42 | "devDependencies": { 43 | "@vue/cli-plugin-babel": "~4.2.0", 44 | "@vue/cli-plugin-eslint": "~4.2.0", 45 | "@vue/cli-plugin-unit-jest": "~4.2.0", 46 | "@vue/cli-service": "~4.2.0", 47 | "@vue/eslint-config-prettier": "^6.0.0", 48 | "@vue/test-utils": "1.0.0-beta.31", 49 | "babel-eslint": "^10.0.3", 50 | "eslint": "^6.7.2", 51 | "eslint-plugin-prettier": "^3.1.1", 52 | "eslint-plugin-vue": "^6.1.2", 53 | "prettier": "^1.19.1", 54 | "vue": "^2.6.11", 55 | "vue-template-compiler": "^2.6.11" 56 | }, 57 | "bugs": { 58 | "url": "https://github.com/r3code/vue-vis-network/issues" 59 | }, 60 | "homepage": "https://github.com/r3code/vue-vis-network#readme" 61 | } 62 | -------------------------------------------------------------------------------- /src/components/Network.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 274 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r3code/vue-vis-network/6f03c6aaeb589f670fc787845a78d5c6f72c8525/src/index.js -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { DataSet, DataView } from "vis-network"; 2 | import Network from "./components/Network.vue"; 3 | import "vis-network/styles/vis-network.css"; 4 | 5 | 6 | export { Network, DataSet, DataView }; 7 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | import { DataSet, DataView } from "vis-network"; 2 | 3 | const arrayDiff = (arr1, arr2) => arr1.filter(x => arr2.indexOf(x) === -1); 4 | 5 | const mountVisData = (vm, propName) => { 6 | let data = vm[propName]; 7 | // If data is DataSet or DataView we return early without attaching our own events 8 | if (!(vm[propName] instanceof DataSet || vm[propName] instanceof DataView)) { 9 | data = new DataSet(vm[propName]); 10 | // Rethrow all events 11 | data.on("*", (event, properties, senderId) => 12 | vm.$emit(`${propName}-${event}`, { event, properties, senderId }) 13 | ); 14 | // We attach deep watcher on the prop to propagate changes in the DataSet 15 | const callback = value => { 16 | if (Array.isArray(value)) { 17 | const newIds = new DataSet(value).getIds(); 18 | const diff = arrayDiff(vm.visData[propName].getIds(), newIds); 19 | vm.visData[propName].update(value); 20 | vm.visData[propName].remove(diff); 21 | } 22 | }; 23 | 24 | vm.$watch(propName, callback, { 25 | deep: true 26 | }); 27 | } 28 | 29 | // Emitting DataSets back 30 | vm.$emit(`${propName}-mounted`, data); 31 | 32 | return data; 33 | }; 34 | 35 | const translateEvent = event => { 36 | return event.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(); 37 | }; 38 | 39 | export { arrayDiff, mountVisData, translateEvent }; 40 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | configureWebpack: { 5 | resolve: { 6 | alias: { 7 | "@": path.join(__dirname, "example", "src") 8 | } 9 | }, 10 | entry: { 11 | app: path.join(__dirname, "example", "src", "main.js") 12 | } 13 | }, 14 | 15 | // Configure Webpack's dev server. 16 | // https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md 17 | devServer: { 18 | contentBase: path.join(__dirname, "example", "public"), 19 | headers: { 20 | "Access-Control-Allow-Origin": "*" 21 | } 22 | } 23 | }; 24 | --------------------------------------------------------------------------------