Add new props: showSelectController, selectOnClickNode

Author: leezng

example/App.vue

@@ -28,14 +28,18 @@
           <div>
             <label>selectableType</label>
             <select v-model="selectableType">
-              <option>-</option>
+              <option label="-"></option>
               <option>single</option>
               <option>multiple</option>
             </select>
           </div>
-          <div v-if="selectableType === 'single'">
-            <label>showRadio</label>
-            <input type="checkbox" v-model="showRadio">
+          <div>
+            <label>showSelectController</label>
+            <input type="checkbox" v-model="showSelectController">
+          </div>
+          <div>
+            <label>selectOnClickNode</label>
+            <input type="checkbox" v-model="selectOnClickNode">
           </div>
           <div>
             <label>path</label>
@@ -78,10 +82,11 @@
           :show-double-quotes="showDoubleQuotes"
           :show-mouse-over="showMouseOver"
           :show-length="showLength"
+          :select-on-click-node="selectOnClickNode"
           v-model="value"
           :path-selectable="((path, data) => typeof data !== 'number')"
           :selectable-type="selectableType"
-          :show-radio="showRadio"
+          :show-select-controller="showSelectController"
           @click="handleClick(...arguments, 'complexTree')"
           @change="handleChange">
         </vue-json-pretty>
@@ -123,10 +128,11 @@ export default {
       },
       value: 'res.error',
       selectableType: 'single',
-      showRadio: true,
+      showSelectController: true,
       showLength: true,
       showDoubleQuotes: true,
       showMouseOver: true,
+      selectOnClickNode: true,
       path: 'res',
       deep: 4,
       itemData: {},

src/components/app.vue

@@ -2,17 +2,17 @@
   <div
     :class="{
       'vjs-tree': true,
-      'has-selectable-control': isMultiple || showRadio,
+      'has-selectable-control': isMultiple || showSelectController,
       'is-root': currentDeep === 1,
       'is-selectable': selectable,
       'is-mouseover': isMouseover
     }"
     @click.stop="handleClick($event, 'tree')"
     @mouseover.stop="handleMouseover"
     @mouseout.stop="handleMouseout">
-    <template v-if="selectable">
+    <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 && showRadio" v-model="model" @change="handleClick($event, 'radio')" :path="path"></vue-radio>
+      <vue-radio v-else-if="isSingle" v-model="model" @change="handleClick($event, 'radio')" :path="path"></vue-radio>
     </template>
 
     <template v-if="Array.isArray(data) || isObject(data)">
@@ -42,7 +42,8 @@
           :path="path + (Array.isArray(data) ? `[${key}]` : `.${key}`)"
           :path-selectable="pathSelectable"
           :selectable-type="selectableType"
-          :show-radio="showRadio"
+          :show-select-controller="showSelectController"
+          :select-on-click-node="selectOnClickNode"
           :current-key="key"
           :current-deep="currentDeep + 1"
           @click="handleItemClick"
@@ -121,11 +122,16 @@
         type: String,
         default: '' // ''|multiple|single    radio, checkbox
       },
-      // defined radio's view when selectableType=single
-      showRadio: {
+      // 是否展示左侧选择控件
+      showSelectController: {
         type: Boolean,
         default: false
       },
+      // 是否在点击树的时候选中节点
+      selectOnClickNode: {
+        type: Boolean,
+        default: true
+      },
       // 存在选择功能时, 定义已选中的数据层级
       //    多选时为数组['root.a', 'root.b'], 单选时为字符串'root.a'
       value: {
@@ -206,16 +212,20 @@
        */
       handleClick (e, emitType = '') {
         this.$emit('click', this.path, this.data)
-        if (this.isMultiple && emitType === 'checkbox') {
+        if (this.isMultiple && (emitType === 'checkbox' || (this.selectOnClickNode && emitType === 'tree'))) {
           // handle multiple
           const index = this.model.findIndex(item => item === this.path)
           if (index !== -1) {
             this.model.splice(index, 1)
           } else {
             this.model.push(this.path)
           }
+
+          if (emitType !== 'checkbox') {
+            this.currentCheckboxVal = !this.currentCheckboxVal
+          }
           this.$emit('change', this.currentCheckboxVal)
-        } else if (this.isSingle && (emitType === 'radio' || emitType === 'tree')) {
+        } else if (this.isSingle && (emitType === 'radio' || (this.selectOnClickNode && emitType === 'tree'))) {
           // handle single
           if (this.model !== this.path) {
             this.model = this.path
@@ -254,6 +264,11 @@
         return this.showDoubleQuotes ? `"${key}"` : key
       }
     },
+    created () {
+      if (this.selectableType && !this.selectOnClickNode && !this.showSelectController) {
+        throw new Error('[vue-json-pretty] error')
+      }
+    },
     watch: {
       deep (newVal) {
         this.visible = this.currentDeep <= newVal