Merge pull request #45 from leezng/dev

release 1.6.2

Author: leezng

example/App.vue

@@ -133,7 +133,7 @@
         </vue-json-pretty>
       </div>
     </div>
-    <a style="position: fixed; right: 0; top: 0;" href="https://github.com/leezng/el-form-renderer" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
+    <a style="position: fixed; right: 0; top: 0;" href="https://github.com/leezng/vue-json-pretty" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
   </div>
 </template>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-pretty",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "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",

src/components/app.vue

@@ -9,12 +9,12 @@
       'is-highlight-selected': isSelected && highlightSelectedNode,
       'is-mouseover': isMouseover
     }"
-    @click="handleClick($event, 'tree')"
+    @click="handleClick"
     @mouseover.stop="handleMouseover"
     @mouseout.stop="handleMouseout">
     <template v-if="showSelectController && selectable">
-      <vue-checkbox v-if="isMultiple" v-model="currentCheckboxVal" @change="handleClick($event, 'checkbox')"></vue-checkbox>
-      <vue-radio v-else-if="isSingle" v-model="model" @change="handleClick($event, 'radio')" :path="path"></vue-radio>
+      <vue-checkbox v-if="isMultiple" v-model="currentCheckboxVal" @change="handleValueChange('checkbox')"></vue-checkbox>
+      <vue-radio v-else-if="isSingle" v-model="model" @change="handleValueChange('radio')" :path="path"></vue-radio>
     </template>
 
     <template v-if="Array.isArray(data) || isObject(data)">
@@ -73,7 +73,12 @@
       :parent-data="parentData"
       :data="data"
       :current-key="currentKey">
-      <span v-if="!Array.isArray(parentData)" class="vjs-key">{{ keyFormatter(currentKey) }}:</span>
+      <span
+        v-if="parentData && currentKey && !Array.isArray(parentData)"
+        class="vjs-key"
+      >
+        {{ keyFormatter(currentKey) }}:
+      </span>
     </simple-text>
   </div>
 </template>
@@ -237,20 +242,8 @@
       }
     },
     methods: {
-      /**
-       * emit click event
-       * @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
-
-        if (this.isMultiple && (emitType === 'checkbox' || (this.selectOnClickNode && emitType === 'tree'))) {
+      handleValueChange (emitType) {
+        if (this.isMultiple && (emitType === 'checkbox' || emitType === 'tree')) {
           // handle multiple
           const index = this.model.findIndex(item => item === this.path)
           const oldVal = [...this.model]
@@ -264,7 +257,7 @@
             this.currentCheckboxVal = !this.currentCheckboxVal
           }
           this.$emit('change', this.model, oldVal)
-        } else if (this.isSingle && (emitType === 'radio' || (this.selectOnClickNode && emitType === 'tree'))) {
+        } else if (this.isSingle && (emitType === 'radio' || emitType === 'tree')) {
           // handle single
           if (this.model !== this.path) {
             const oldVal = this.model
@@ -275,6 +268,22 @@
         }
       },
 
+      /**
+       * emit click event
+       * @param  {string} emitType tree/checkbox/radio
+       */
+      handleClick (e) {
+        // 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 && this.selectOnClickNode) {
+          this.handleValueChange('tree')
+        }
+      },
+
       // handle children's click, and propagation
       handleItemClick (path, data) {
         this.$emit('click', path, data)

src/components/radio.vue

@@ -7,7 +7,7 @@
       type="radio"
       v-model="model"
       :value="currentPath"
-      @change="test"
+      @change="change"
       @focus="focus = true"
       @blur="focus = false">
   </label>
@@ -42,7 +42,7 @@
       }
     },
     methods: {
-      test () {
+      change () {
         this.$emit('change', this.model)
       }
     }

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.1'
+  version: '1.6.2'
 })