Merge pull request #40 from leezng/dev

release 1.6.1

Author: leezng

README.md

@@ -6,8 +6,8 @@
 
 A vue 2.x component for rendering JSON data as a tree structure.
 
-- basic: JSON pretty
-- advanced: get item data from JSON
+- As a JSON Formatter
+- Get item data from JSON
 
 ## Links
 
@@ -49,25 +49,25 @@ export default {
 
 ## Props
 
-- If you are using only the basic features (JSON pretty), just focus on the `base` properties.
-- If you are using advanced features (selected), you can use `base` and `advanced` attributes.
+- If you are using only the normal features (JSON pretty), just focus on the `base` properties.
+- If you are using higher features (Get data), you can use `base` and `higher` attributes.
 
 | Attribute | Level | Description | Type | Default |
 |-------- |-------- |-------- |-------- | -------- |
-| data | basic | json data | JSON object | - |
-| deep | basic | data depth, data larger than this depth will not be expanded | number | Infinity |
-| showLength | basic | whether to show the length when closed | boolean | false |
-| showLine | basic | whether to show the line | boolean | true |
-| showDoubleQuotes | basic | whether to show doublequotes on key | boolean | true |
-| highlightMouseoverNode | basic | highlight current node when mouseover | boolean | false |
-| v-model | advanced | defines value when the tree can be selected | string, array | -, [] |
-| path | advanced | root data path | string | root |
-| pathChecked | advanced | defines the selected data path | array | [] |
-| pathSelectable | advanced | defines whether a data path supports selection | Function(itemPath, itemData) | - |
-| selectableType | advanced | defines the selected type, this feature is not supported by default | enum: -, multiple, single  | - |
-| showSelectController | advanced | whether to show the select controller at left | boolean | false |
-| selectOnClickNode | advanced | whether to change selected value when click node | boolean | true |
-| highlightSelectedNode | advanced | highlight current node when selected | boolean | true |
+| data | normal | json data | JSON object | - |
+| deep | normal | data depth, data larger than this depth will not be expanded | number | Infinity |
+| showLength | normal | whether to show the length when closed | boolean | false |
+| showLine | normal | whether to show the line | boolean | true |
+| showDoubleQuotes | normal | whether to show doublequotes on key | boolean | true |
+| highlightMouseoverNode | normal | highlight current node when mouseover | boolean | false |
+| v-model | higher | defines value when the tree can be selected | string, array | -, [] |
+| path | higher | root data path | string | root |
+| pathChecked | higher | defines the selected data path | array | [] |
+| pathSelectable | higher | defines whether a data path supports selection | Function(itemPath, itemData) | - |
+| selectableType | higher | defines the selected type, this feature is not supported by default | enum: -, multiple, single  | - |
+| showSelectController | higher | whether to show the select controller at left | boolean | false |
+| selectOnClickNode | higher | whether to change selected value when click node | boolean | true |
+| highlightSelectedNode | higher | highlight current node when selected | boolean | true |
 
 ## Events
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-json-pretty",
-  "version": "1.6.0",
-  "description": "A Vue.js 2.0 Toolkit for JSON",
+  "version": "1.6.1",
+  "description": "A JSON tree view component that is easy to use and also supports data selection.",
   "author": "leezng <im.leezng@gmail.com>",
   "main": "vue-json-pretty.js",
   "scripts": {
@@ -44,7 +44,7 @@
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
     "cssnano": "^3.10.0",
-    "eslint": "^3.19.0",
+    "eslint": "^4.18.2",
     "eslint-config-standard": "^6.2.1",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.7.1",
@@ -74,7 +74,7 @@
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.0",
     "webpack": "^3.12.0",
-    "webpack-bundle-analyzer": "^2.2.1",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.18.0",
     "webpack-merge": "^4.1.0"

src/components/app.vue

@@ -9,7 +9,7 @@
       'is-highlight-selected': isSelected && highlightSelectedNode,
       'is-mouseover': isMouseover
     }"
-    @click.stop="handleClick($event, 'tree')"
+    @click="handleClick($event, 'tree')"
     @mouseover.stop="handleMouseover"
     @mouseout.stop="handleMouseout">
     <template v-if="showSelectController && selectable">
@@ -239,9 +239,14 @@
     methods: {
       /**
        * emit click event
-       * @param  {Boolean} emitType tree/checkbox/radio
+       * @param  {string} emitType tree/checkbox/radio
        */
       handleClick (e, emitType = '') {
+        // Event can not be stopPropagation, because user may be listening the click event.
+        // So use _uid to simulated.
+        if (e._uid && e._uid !== this._uid) return
+        e._uid = this._uid
+
         this.$emit('click', this.path, this.data)
         if (!this.selectable) return
 

src/index.js

@@ -2,5 +2,5 @@ import App from './components/app.vue'
 import './assets/less/index.less'
 
 export default Object.assign({}, App, {
-  version: '1.6.0'
+  version: '1.6.1'
 })