feat: support editable.

Author: leezng

example/App.jsx

@@ -1,6 +1,7 @@
 import Basic from './Basic';
 import VirtualList from './VirtualList';
 import SelectControl from './SelectControl';
+import Editable from './Editable';
 import './styles.less';
 
 export default {
@@ -21,11 +22,16 @@ export default {
         key: 'select-control',
         component: <SelectControl />,
       },
+      {
+        title: 'Editable',
+        key: 'editable',
+        component: <Editable />,
+      },
     ];
 
     return (
       <div class="example">
-        {list.map(item => (
+        {list.map((item) => (
           <div class="example-box" id={item.key}>
             <h2 class="title">{item.title}</h2>
             {item.component}

example/Editable.vue

@@ -2,36 +2,36 @@
   <div class="example-box">
     <div class="block">
       <h3>JSON:</h3>
-      <textarea v-model="state.val" />
+      <textarea v-model="val" />
 
       <h3>Options:</h3>
       <div class="options">
         <div>
           <label>showLength</label>
-          <input v-model="state.showLength" type="checkbox" />
+          <input v-model="showLength" type="checkbox" />
         </div>
         <div>
           <label>showLine</label>
-          <input v-model="state.showLine" type="checkbox" />
+          <input v-model="showLine" type="checkbox" />
         </div>
         <div>
           <label>showLineNumber</label>
-          <input v-model="state.showLineNumber" type="checkbox" />
+          <input v-model="showLineNumber" type="checkbox" />
         </div>
         <div>
           <label>editable</label>
-          <input v-model="state.editable" type="checkbox" />
+          <input v-model="editable" type="checkbox" />
         </div>
         <div>
           <label>editableTrigger</label>
-          <select v-model="state.editableTrigger">
+          <select v-model="editableTrigger">
             <option value="click">click</option>
             <option value="dblclick">dblclick</option>
           </select>
         </div>
         <div>
           <label>deep</label>
-          <select v-model="state.deep">
+          <select v-model="deep">
             <option :value="2">2</option>
             <option :value="3">3</option>
             <option :value="4">4</option>
@@ -42,21 +42,20 @@
     <div class="block">
       <h3>vue-json-pretty:</h3>
       <vue-json-pretty
-        v-model:data="state.data"
-        :deep="state.deep"
+        v-model="data"
+        :deep="deep"
         :show-double-quotes="true"
-        :show-length="state.showLength"
-        :show-line="state.showLine"
-        :show-line-number="state.showLineNumber"
-        :editable="state.editable"
-        :editable-trigger="state.editableTrigger"
+        :show-length="showLength"
+        :show-line="showLine"
+        :show-line-number="showLineNumber"
+        :editable="editable"
+        :editable-trigger="editableTrigger"
       />
     </div>
   </div>
 </template>
 
 <script>
-import { defineComponent, reactive, watch } from 'vue';
 import VueJsonPretty from 'src';
 
 const defaultData = {
@@ -85,13 +84,13 @@ const defaultData = {
   ],
 };
 
-export default defineComponent({
+export default {
   name: 'Editable',
   components: {
     VueJsonPretty,
   },
-  setup() {
-    const state = reactive({
+  data() {
+    return {
       val: JSON.stringify(defaultData),
       data: defaultData,
       showLength: false,
@@ -100,33 +99,23 @@ export default defineComponent({
       editable: true,
       editableTrigger: 'click',
       deep: 3,
-    });
-
-    watch(
-      () => state.val,
-      newVal => {
-        try {
-          state.data = JSON.parse(newVal);
-        } catch (err) {
-          // console.log('JSON ERROR');
-        }
-      },
-    );
-
-    watch(
-      () => state.data,
-      newVal => {
-        try {
-          state.val = JSON.stringify(newVal);
-        } catch (err) {
-          // console.log('JSON ERROR');
-        }
-      },
-    );
-
-    return {
-      state,
     };
   },
-});
+  watch: {
+    val(newVal) {
+      try {
+        this.data = JSON.parse(newVal);
+      } catch (err) {
+        console.log('JSON ERROR');
+      }
+    },
+    data(newVal) {
+      try {
+        this.val = JSON.stringify(newVal);
+      } catch (err) {
+        console.log('JSON ERROR');
+      }
+    },
+  },
+};
 </script>

example/SelectControl.vue

@@ -66,8 +66,8 @@
           </select>
         </div>
       </div>
-      <h3>v-model:</h3>
-      <div>{{ value }}</div>
+      <h3>selectedValue.sync:</h3>
+      <div>{{ selectedValue }}</div>
       <h3>Current Click:</h3>
       <div>path: {{ itemPath }}</div>
       <div>
@@ -79,7 +79,7 @@
       <h3>vue-json-pretty:</h3>
       <vue-json-pretty
         v-if="renderOK"
-        v-model="value"
+        :selected-value.sync="selectedValue"
         :data="data"
         :path="path"
         :deep="deep"
@@ -141,7 +141,7 @@ export default {
       renderOK: true,
       val: JSON.stringify(defaultData),
       data: defaultData,
-      value: 'res.error',
+      selectedValue: 'res.error',
       selectableType: 'single',
       showSelectController: true,
       showLength: false,
@@ -170,9 +170,9 @@ export default {
     selectableType(newVal) {
       this.renderOK = false;
       if (newVal === 'single') {
-        this.value = 'res.error';
+        this.selectedValue = 'res.error';
       } else if (newVal === 'multiple') {
-        this.value = ['res.error', 'res.data[0].title'];
+        this.selectedValue = ['res.error', 'res.data[0].title'];
       }
       // Re-render because v-model:selectedValue format is different in case 2
       this.$nextTick(() => {

src/components/Tree/index.vue

@@ -37,9 +37,12 @@
             :path-selectable="pathSelectable"
             :highlight-selected-node="highlightSelectedNode"
             :show-icon="showIcon"
+            :editable="editable"
+            :editable-trigger="editableTrigger"
             @tree-node-click="onTreeNodeClick"
             @brackets-click="onBracketsClick"
             @selected-change="onSelectedChange"
+            @value-change="onValueChange"
             :style="itemHeight && itemHeight !== 20 ? { lineHeight: `${itemHeight}px` } : {}"
           />
         </div>
@@ -50,14 +53,17 @@
 
 <script>
 import TreeNode from 'src/components/TreeNode';
-import { jsonFlatten } from 'src/utils';
+import { jsonFlatten, cloneDeep } from 'src/utils';
 import './styles.less';
 
 export default {
   name: 'VueJsonPretty',
   components: {
     TreeNode,
   },
+  model: {
+    prop: 'data',
+  },
   props: {
     // JSON
     data: {
@@ -125,7 +131,7 @@ export default {
     },
     // When there is a selection function, define the selected path.
     // For multiple selections, it is an array ['root.a','root.b'], for single selection, it is a string of 'root.a'.
-    value: {
+    selectedValue: {
       type: [Array, String],
       default: () => '',
     },
@@ -153,6 +159,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+    editableTrigger: {
+      type: String,
+      default: 'click',
+    },
   },
   data() {
     return {
@@ -213,13 +227,14 @@ export default {
 
     selectedPaths: {
       get() {
-        if (this.value && this.selectableType === 'single') {
-          return [this.value];
+        const value = this.selectedValue;
+        if (value && this.selectableType === 'multiple' && Array.isArray(value)) {
+          return value;
         }
-        return this.value || [];
+        return [value];
       },
       set(val) {
-        this.$emit('input', val);
+        this.$emit('update:selectedValue', val);
       },
     },
 
@@ -312,6 +327,13 @@ export default {
         this.hiddenPaths = newPaths;
       }
     },
+
+    onValueChange(value, path) {
+      const newData = cloneDeep(this.data);
+      const rootPath = this.path;
+      new Function('data', 'val', `data${path.slice(rootPath.length)}=val`)(newData, value);
+      this.$emit('input', newData);
+    },
   },
 };
 </script>