feat: sub object render as sub div

Author: yourtion

example/components/Subscription.vue

@@ -4,7 +4,7 @@
     <el-card class="form">
       <json-editor ref="JsonEditor" :schema="schema" v-model="model">
         <el-button type="primary" @click="submit">Subscribe</el-button>
-        <el-button type="reset">Reset</el-button>
+        <el-button type="reset" @click="reset">Reset</el-button>
       </json-editor>
     </el-card>
   </el-col>
@@ -112,13 +112,11 @@
     },
     methods: {
       submit(_e) {
-        // this.$refs.JsonEditor.form() returns the ElementUI's form instance
-
         this.$refs.JsonEditor.form().validate((valid) => {
           if (valid) {
             // this.model contains the valid data according your JSON Schema.
             // You can submit your model to the server here
-            
+
             // eslint-disable-next-line no-console
             console.log('model', JSON.stringify(this.model));
             this.$refs.JsonEditor.clearErrorMessage();
@@ -128,6 +126,9 @@
           }
         });
       },
+      reset() {
+        this.$refs.JsonEditor.reset();
+      },
     },
     components: { JsonEditor },
   };
@@ -162,14 +163,10 @@
     margin-bottom: 15px
   }
 
-  .el-form .sub-1 {
+  .el-form .sub {
     margin-left: 10%;
   }
 
-  .el-form .sub-2 {
-    margin-left: 20%;
-  }
-
   .json {
     text-align: left;
   }

example/schema/newsletter.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/draft-04/schema#",
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "title": "Newsletter Subscription",
   "description": "Sign up for free newsletters and get more delivered to your inbox",

src/JsonEditor.vue

@@ -1,6 +1,6 @@
 <script>
   import { loadFields } from './parser';
-  import { initChild, getChild, setVal } from './utils';
+  import { initChild, getChild, setVal, deepClone } from './utils';
   const option = { native: true };
   const components = {
     title: { component: 'h1', option },
@@ -70,9 +70,9 @@
       };
     },
     created() {
-      loadFields(this, JSON.parse(JSON.stringify(this.schema)));
-      this.default = { ...this.value };
-      this.data = { ...this.value };
+      loadFields(this, deepClone(this.schema));
+      this.default = deepClone(this.value);
+      this.data = deepClone(this.value);
     },
     render(createElement) {
       const nodes = [];
@@ -100,7 +100,7 @@
       function createForm(fields, sub) {
         let node;
         if(sub) {
-          node = setVal(formNode, sub, []);
+          node = setVal(formNode, sub.pop(), {});
         } else {
           node = formNode.root;
         }
@@ -114,7 +114,8 @@
               return createForm.call(this, field, sub ? [ ...sub, key ] : [ key ]);
             }
             const fieldName = field.name;
-            const fieldValue = getChild(this.value, field.name.split('.'));
+
+            const fieldValue = getChild(this.data, fieldName.split('.'));
             if (!field.value) {
               field.value = fieldValue;
             }
@@ -134,7 +135,7 @@
               on: {
                 input: (event) => {
                   const value = event && event.target ? event.target.value : event;
-                  const ns = field.name.split('.');
+                  const ns = fieldName.split('.');
                   const n = ns.pop();
                   const ret = (ns.length > 0 ? initChild(this.data, ns) : this.data);
                   this.$set(ret, n, value);
@@ -216,33 +217,33 @@
             } else {
               formControlsNodes.forEach((node) => formNodes.push(node));
             }
-            if(sub) {
-              node.push(formNodes[0]);
-            } else {
-              node[key] = formNodes[0];
-            }
+            node[key] = formNodes[0];
           });
         }
       }
       createForm.call(this, this.fields);
 
       function createNode(fields, sub) {
-        if(sub) {
-          allFormNodes.push(createElement('div', {
-            class: 'sub-' + sub.length,
-          }, formNode[sub[sub.length - 1]]));
-        }
+        const nodes = [];
+        const subName = sub && sub.pop();
         Object.keys(fields).forEach((key) => {
           if(key === '$sub') return;
           const field = fields[key];
           if(field.$sub) {
-            createNode.call(this, field, sub ? [ ...sub, key ] : [ key ]);
-          } else if(formNode.root[key]) {
-            allFormNodes.push(formNode.root[key]);
+            const node = createNode.call(this, field, sub ? [ ...sub, key ] : [ key ]);
+            nodes.push(createElement('div', {
+              class: 'sub',
+            }, node));
+          } else if(subName) {
+            nodes.push(getChild(formNode, subName.split('.'))[key]);
+          } else {
+            nodes.push(formNode.root[key]);
           }
         });
+        return nodes;
       }
-      createNode.call(this, this.fields);
+      const formNodes = createNode.call(this, this.fields);
+      allFormNodes.push(formNodes);
 
       const labelOptions = this.elementOptions(components.label);
       const button = this.$slots.hasOwnProperty('default')
@@ -342,8 +343,8 @@
       /**
        * Reset the value of all elements of the parent form.
        */
-      reset() {
-        for (const key in this.default) {
+      reset(e) {
+        for (const key in this.data) {
           const ns = key.split('.');
           const n = ns.pop();
           const ret = (ns.length > 0 ? initChild(this.data, ns) : this.data);

src/utils.js

@@ -1,3 +1,7 @@
+export function deepClone(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+
 export function getExtendibleLeaf(obj, n, initIt) {
   const v = obj[n];
   if (v && typeof v === 'object' && !Array.isArray(v)) {