Add basic prop: collapsedOnClickBrackets.

Author: leezng

example/App.vue

@@ -24,6 +24,10 @@
             <label>highlightMouseoverNode</label>
             <input type="checkbox" v-model="highlightMouseoverNode">
           </div>
+          <div>
+            <label>collapsedOnClickBrackets</label>
+            <input type="checkbox" v-model="collapsedOnClickBrackets">
+          </div>
           <div>
             <label>deep</label>
             <select v-model="deep">
@@ -43,6 +47,7 @@
           :show-length="showLength"
           :show-line="showLine"
           :highlight-mouseover-node="highlightMouseoverNode"
+          :collapsed-on-click-brackets="collapsedOnClickBrackets"
           @click="handleClick">
         </vue-json-pretty>
       </div>
@@ -96,6 +101,10 @@
             <label>highlightSelectedNode</label>
             <input type="checkbox" v-model="highlightSelectedNode">
           </div>
+          <div>
+            <label>collapsedOnClickBrackets</label>
+            <input type="checkbox" v-model="collapsedOnClickBrackets">
+          </div>
           <div>
             <label>deep</label>
             <select v-model="deep">
@@ -124,6 +133,7 @@
           :show-length="showLength"
           :show-line="showLine"
           :select-on-click-node="selectOnClickNode"
+          :collapsed-on-click-brackets="collapsedOnClickBrackets"
           v-model="value"
           :path-selectable="((path, data) => typeof data !== 'number')"
           :selectable-type="selectableType"
@@ -176,6 +186,7 @@ export default {
       highlightMouseoverNode: true,
       highlightSelectedNode: true,
       selectOnClickNode: true,
+      collapsedOnClickBrackets: true,
       path: 'res',
       deep: 3,
       itemData: {},

src/components/app.vue

@@ -23,6 +23,7 @@
         :visible.sync="visible"
         :data="data"
         :show-length="showLength"
+        :collapsed-on-click-brackets="collapsedOnClickBrackets"
         :show-comma="notLastKey">
         <span v-if="currentDeep > 1 && !Array.isArray(parentData)" class="vjs-key">{{ keyFormatter(currentKey) }}:</span>
       </brackets-left>
@@ -51,6 +52,7 @@
           :selectable-type="selectableType"
           :show-select-controller="showSelectController"
           :select-on-click-node="selectOnClickNode"
+          :collapsed-on-click-brackets="collapsedOnClickBrackets"
           :current-key="key"
           :current-deep="currentDeep + 1"
           @click="handleItemClick"
@@ -62,6 +64,7 @@
       <brackets-right
         :visible.sync="visible"
         :data="data"
+        :collapsed-on-click-brackets="collapsedOnClickBrackets"
         :show-comma="notLastKey">
       </brackets-right>
     </template>
@@ -164,6 +167,11 @@
         type: Boolean,
         default: true
       },
+      // collapsed control
+      collapsedOnClickBrackets: {
+        type: Boolean,
+        default: true
+      },
       /* outer props */
 
       /* inner props */

src/mixins/brackets-mixin.js

@@ -7,15 +7,18 @@ export default {
     data: {
       required: true
     },
-    showComma: Boolean
+    showComma: Boolean,
+    collapsedOnClickBrackets: Boolean
   },
   computed: {
     dataVisible: {
       get () {
         return this.visible
       },
       set (val) {
-        this.$emit('update:visible', val)
+        if (this.collapsedOnClickBrackets) {
+          this.$emit('update:visible', val)
+        }
       }
     }
   },