editor layout, array insertion

index.js

@@ -38,7 +38,7 @@ const user = {
 
   app.use (api);
   app.use (history_fallback ());
-  app.use (http_proxy ('localhost:8080'));
+  app.use (http_proxy ('localhost:8081'));
 
   app.listen (3000, () => {
     console.log ('listening on 3000');

src/components/ConfigEditor.vue

@@ -1,9 +1,14 @@
 <template>
+  <div class="config-editor">
+    <p
+      clasS="label"
+      v-text="template.name"
+    />
+    <!-- editor -->
     <div
       v-if="template.type === 'object'"
       class="editor"
     >
-    <p v-text="template.name" />
       <ConfigEditor
         v-for="(prop,key) of template.properties"
         :key="key"
@@ -21,7 +26,10 @@
         :config="child"
         :template="template.child"
       />
-    <button type="button">
+      <button
+        type="button"
+        @click="config.push(create_default(template.child))"
+      >
         add
       </button>
     </div>
@@ -29,7 +37,6 @@
       v-else-if="template.type === 'string'"
       class="editor"
     >
-    <label v-text="template.name || ''" />
       <input
         v-model="config"
         type="text"
@@ -39,7 +46,6 @@
       v-else-if="template.type === 'number'"
       class="editor"
     >
-    <label v-text="template.name || ''" />
       <input
         v-model="config"
         type="number"
@@ -49,7 +55,6 @@
       v-else-if="template.type === 'boolean'"
       class="editor"
     >
-    <label v-text="template.name || ''" />
       <input
         v-model="config"
         type="checkbox"
@@ -58,6 +63,7 @@
     <pre v-else>
     invalid config
   </pre>
+  </div>
 </template>
 
 <script>
@@ -70,13 +76,46 @@ export default {
       type:     Object,
       required: true
     }
+  },
+  methods: {
+    create_default (template) {
+      if (typeof template.default !== 'undefined')
+        return template.default;
+      if (template.type === 'string')
+        return '';
+      if (template.type === 'number')
+        return 0;
+      if (template.type === 'boolean')
+        return false;
+      if (template.type === 'array')
+        return [];
+      if (template.type === 'object') {
+        const res = {};
+        for (const prop of template.properties)
+          res[prop.name] = this.create_default (prop);
+        return res;
+      }
+      return null;
+    }
   }
 };
 </script>
 
 <style scoped>
+.config-editor {
+  display: grid;
+  grid-template-areas: 'label editor';
+  grid-template-columns: auto 1fr;
+}
+
 .editor {
   border: 1px solid black;
   margin-left: 10px;
+  grid-column: editor;
+}
+
+.label {
+  display: inline-block;
+  grid-column: label;
 }
 </style>