vue-json-tree-view - npm Package Compare versions

Comparing version 2.1.4 to 2.1.5

index.js

 import Vue from 'vue';
 import TreeView from './src/TreeView.vue';
 
-new Vue({
-    el: '#container',
-    components: {
-      TreeView
-    },
-    data() {
-        return {
-          sampleJSON: {"testArray": ["Just a Test String", "in a Test Array", 0, 1, true, false], "component":"vue-json-tree-view","descripton":"A JSON Tree View built in Vue.js","tags":[{"name":"vue.js"},{"name":"JSON"}],"steps":["HTML Template","Root Component","View Component",{"Transformation Logic":["Transform Objects","Transform Arrays","Transform Values"]},"Animate","Allow Options","Blog about it..."]},
-          sampleJSONString: "Just a Test String",
-          sampleJSONArray: ["Just a Test String", "in a Test Array", 0, 1, true, false],
-        };
-    },
-    methods: {
-      onChangeData: function(data) {
-        this.sampleJSON = data
-      }
-    },
-    watch: {
-      sampleJSON: function() {
-        console.log('updated sampleJSON')
-      }
-    }
+new Vue({ // eslint-disable-line no-new
+	el: '#container',
+	components: {
+		TreeView
+	},
+	data() {
+		return {
+			sampleJSON: { testArray: ['Just a Test String', 'in a Test Array', 0, 1, true, false], component: 'vuejsontreeview', descripton: 'A JSON Tree View built in Vue.js', tags: [{ name: 'vue.js' }, { name: 'JSON' }], steps: ['HTML Template', 'Root Component', 'View Component', { 'Transformation Logic': ['Transform Objects', 'Transform Arrays', 'Transform Values'] }, 'Animate', 'Allow Options', 'Blog about it...'] }, // eslint-disable-line max-len
+			sampleJSONString: 'Just a Test String',
+			sampleJSONArray: ['Just a Test String', 'in a Test Array', 'www.google.com', 0, 1, true, false]
+		};
+	},
+	methods: {
+		onChangeData(data) {
+			this.sampleJSON = data;
+		}
+	},
+	watch: {
+		sampleJSON() {
+			console.log('updated sampleJSON');
+		}
+	}
 });

package.json

 {
-  "name": "vue-json-tree-view",
-  "version": "2.1.4",
-  "repository": "arvidkahl/vue-json-tree-view",
-  "homepage": "https://github.com/arvidkahl/vue-json-tree-view",
-  "bugs": {
-    "url": "https://github.com/arvidkahl/vue-json-tree-view/issues",
-    "email": "[e-mail]"
-  },
-  "description": "a JSON Tree View Component in Vue.js",
-  "main": "./dist/vue-json-tree-view.min.js",
-  "scripts": {
-    "dev": "webpack-dev-server --inline --watch --progress --config webpack.dev.config.js --port 5000",
-    "build": "webpack --progress --config webpack.prod.config.js",
-    "test": "karma start karma.config.js",
-    "ci": "npm run test && npm run build"
-  },
-  "keywords": [
-    "vue-component",
-    "vuejs"
-  ],
-  "author": "Arvid Kahl <[e-mail]>",
-  "license": "MIT",
-  "dependencies": {
-    "lodash": "^4.17.4",
-    "vue": "^2.5.16"
-  },
-  "devDependencies": {
-    "babel-core": "^6.5.2",
-    "babel-loader": "^6.2.2",
-    "babel-plugin-transform-runtime": "^6.5.2",
-    "babel-preset-es2015": "^6.5.0",
-    "babel-runtime": "^6.9.2",
-    "css-loader": "^0.23.1",
-    "eslint": "^3.1.1",
-    "eslint-config-google": "^0.6.0",
-    "eslint-config-vue": "^1.0.3",
-    "eslint-plugin-html": "^1.5.1",
-    "file-loader": "^0.8.5",
-    "isparta": "^4.0.0",
-    "isparta-loader": "^2.0.0",
-    "istanbul": "^0.4.4",
-    "jasmine-core": "^2.4.1",
-    "karma": "^1.2.0",
-    "karma-babel-preprocessor": "^6.0.1",
-    "karma-coverage": "^1.1.1",
-    "karma-html-reporter": "^0.2.7",
-    "karma-jasmine": "^1.0.2",
-    "karma-phantomjs-launcher": "^1.0.1",
-    "karma-spec-reporter": "0.0.26",
-    "karma-verbose-reporter": "0.0.3",
-    "karma-webpack": "^1.8.0",
-    "node-sass": "^3.4.2",
-    "phantomjs": "^2.1.7",
-    "sass-loader": "^3.1.2",
-    "style-loader": "^0.13.0",
-    "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^1.3.2",
-    "vue-html-loader": "^1.1.0",
-    "vue-loader": "^14.2.2",
-    "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.5.16",
-    "webpack": "^2.1.0-beta.2",
-    "webpack-dev-server": "^1.15.0",
-    "webpack-merge": "^0.14.1"
-  }
+	"name": "vue-json-tree-view",
+	"version": "2.1.5",
+	"repository": "michaelfitzhavey/vue-json-tree-view",
+	"homepage": "https://github.com/michaelfitzhavey/vue-json-tree-view",
+	"bugs": {
+		"url": "https://github.com/michaelfitzhavey/vue-json-tree-view/issues",
+		"email": "[e-mail]"
+	},
+	"description": "a JSON Tree View Component in Vue.js",
+	"main": "./dist/vue-json-tree-view.min.js",
+	"scripts": {
+		"dev": "webpack-dev-server --inline --watch --progress --config webpack.dev.config.js --port 5000",
+		"build": "webpack --progress --config webpack.prod.config.js"
+	},
+	"keywords": [
+		"vue-component",
+		"vuejs"
+	],
+	"author": "Arvid Kahl <[e-mail]>",
+	"license": "MIT",
+	"dependencies": {
+		"lodash": "^4.17.4",
+		"vue": "^2.5.16"
+	},
+	"devDependencies": {
+		"babel-core": "^6.5.2",
+		"babel-eslint": "^10.0.3",
+		"babel-loader": "^6.2.2",
+		"babel-plugin-transform-runtime": "^6.5.2",
+		"babel-preset-es2015": "^6.5.0",
+		"babel-runtime": "^6.9.2",
+		"css-loader": "^0.23.1",
+		"eslint": "^6.8.0",
+		"eslint-config-airbnb-base": "^14.0.0",
+		"eslint-plugin-import": "^2.20.1",
+		"eslint-plugin-vue": "^6.2.0",
+		"file-loader": "^0.8.5",
+		"isparta": "^4.0.0",
+		"isparta-loader": "^2.0.0",
+		"node-sass": "^4.13.1",
+		"sass-loader": "^3.1.2",
+		"style-loader": "^0.13.0",
+		"url-loader": "^0.5.7",
+		"vue-eslint-parser": "^7.0.0",
+		"vue-hot-reload-api": "^1.3.2",
+		"vue-html-loader": "^1.1.0",
+		"vue-loader": "^14.2.2",
+		"vue-style-loader": "^1.0.0",
+		"vue-template-compiler": "^2.5.16",
+		"webpack": "^2.7.0",
+		"webpack-dev-server": "^3.1.11",
+		"webpack-merge": "^0.14.1"
+	}
 }

README.md

@@ -5,6 +5,5 @@ # Vue JSON Tree View
 
-
 ## Demo and Blogpost
 
-You can check out the [demo](https://jsfiddle.net/arvidkahl/kwo6vk9d/11/) on JSFiddle and read the Blogpost called [Building a JSON Tree View Component in Vue.js from Scratch in Six Steps](https://devblog.digimondo.io/building-a-json-tree-view-component-in-vue-js-from-scratch-in-six-steps-ce0c05c2fdd8#.dkwh4jo2m) that lead to the creation of this library.
+You can check out the [demo](https://jsfiddle.net/arvidkahl/kwo6vk9d/11/) on JSFiddle and read the Blogpost called [Building a JSON Tree View Component in Vue.js from Scratch in Six Steps](http://brianyang.com/building-a-json-tree-view-component-in-vue-js-from-scratch-in-six-steps) that lead to the creation of this library.
 
@@ -48,8 +47,12 @@ ##  Installation
   rootObjectKey: "root",
-  modifiable: false
+  modifiable: false,
+  link: false,
+  limitRenderDepth: false
 }
 ```
 - maxDepth: The maximum number of levels of the JSON Tree that should be expanded by default. Expects an Integer from 0 to Infinity.
-- rootObjectKey: the name of the Root Object, will default to `root`
-- modifiable: To modify the json value. 
+- rootObjectKey: the name of the Root Object, will default to `root`.
+- modifiable: To modify the json value.
+- link: URL strings will appear as clickable links (unless `modifiable="true"`).
+- limitRenderDepth: maximum number of nodes that should be rendered (for very large JSONs)
 
@@ -81,9 +84,12 @@ ## Event
 
-## Notes
+Keys can also be styled. For instance to make labels red:
+```
+.tree-view-item-key {
+    color: red;
+}
+```
 
-Enjoy.
+## Contributing
+Contributions to this repo are very welcome as they are what has helped it become what it is today. Simply raise an issue with new ideas or submit a pull request.
 
-## Changelog
-
-- 2.0.0: Moved prop based option into `options` object. Added CSS for leaf types. Support for raw values as data.
-- 1.0.0: Initial Release
+A github action automatically deploys changes when they are merged into the master branch.

src/index.js

@@ -5,6 +5,8 @@ import TreeViewItemValue from './TreeViewItemValue.vue';
 
-module.exports = function install(Vue){
-    Vue.component("tree-view-item-value", TreeViewItemValue);
-    Vue.component("tree-view-item", TreeViewItem);
-    Vue.component("tree-view", TreeView);  
-};
+export default function install(Vue) {
+	Vue.component('tree-view-item-value', TreeViewItemValue);
+	Vue.component('tree-view-item', TreeViewItem);
+	Vue.component('tree-view', TreeView);
+}
+
+export { TreeView };

webpack.base.config.js

@@ -6,17 +6,17 @@ /**
 module.exports = {
-    module: {
-        loaders: [{
-            test: /\.js$/,
-            loader: 'babel-loader',
-            exclude: /node_modules/
-        }, {
-            test: /\.vue$/,
-            loader: 'vue-loader'
-        }]
-    },
-    resolve: {
-      alias: {
-        'vue$': 'vue/dist/vue.common.js'
-      }
-    }
+	module: {
+		loaders: [{
+			test: /\.js$/,
+			loader: 'babel-loader',
+			exclude: /node_modules/
+		}, {
+			test: /\.vue$/,
+			loader: 'vue-loader'
+		}]
+	},
+	resolve: {
+		alias: {
+			vue$: 'vue/dist/vue.common.js'
+		}
+	}
 };

webpack.dev.config.js

 /**
  * @file webpack dev config file
  */
-var config = require('./webpack.base.config');
-var path = require('path');
+const path = require('path');
+const config = require('./webpack.base.config');
 
 config.entry = './index.js';
 config.output = {
-    path: path.resolve('build') + '/',
-    publicPath: 'build',
-    filename: 'build.js'
+	path: `${path.resolve('build')}/`,
+	publicPath: 'build',
+	filename: 'build.js'
 };
 
 module.exports = config;

webpack.prod.config.js

 /**
  * @file webpack prod config file
  */
-var webpack = require('webpack');
-var config = require('./webpack.base.config');
+const webpack = require('webpack');
+const config = require('./webpack.base.config');
 
 config.entry = './src/index.js';
 config.output = {
-    filename: './dist/vue-json-tree-view.min.js',
-    library: 'TreeView',
-    libraryTarget: 'umd'
+	filename: './dist/vue-json-tree-view.min.js',
+	library: 'TreeView',
+	libraryTarget: 'umd'
 };
 
 config.plugins = (config.plugins || []).concat([
-    new webpack.optimize.UglifyJsPlugin({
-        sourceMap: false,
-        compress: {
-            warnings: false
-        }
-    })
+	new webpack.optimize.UglifyJsPlugin({
+		sourceMap: false,
+		compress: {
+			warnings: false
+		}
+	})
 ]);
 module.exports = config;

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

27

-27.03%

Number of lines in readme file

92

5.75%

Worsened metrics

Total package byte prevSize

168826

-53.64%

Number of package files

19

-5%

Lines of code

87

-35.07%

Number of low supply chain risk alerts

2

100%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes