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,63 +1,69 @@
 <template>
-  <div
+  <div class="config-editor">
-    v-if="template.type === 'object'"
+    <p
-    class="editor"
+      clasS="label"
-  >
+      v-text="template.name"
-    <p v-text="template.name" />
-    <ConfigEditor
-      v-for="(prop,key) of template.properties"
-      :key="key"
-      :template="prop"
-      :config="config[prop.name]"
     />
-  </div>
+    <!-- editor -->
-  <div
+    <div
-    v-else-if="template.type === 'array'"
+      v-if="template.type === 'object'"
-    class="editor"
+      class="editor"
-  >
-    <ConfigEditor
-      v-for="(child,key) of config"
-      :key="key"
-      :config="child"
-      :template="template.child"
-    />
-    <button type="button">
-      add
-    </button>
-  </div>
-  <div
-    v-else-if="template.type === 'string'"
-    class="editor"
-  >
-    <label v-text="template.name || ''" />
-    <input
-      v-model="config"
-      type="text"
     >
-  </div>
+      <ConfigEditor
-  <div
+        v-for="(prop,key) of template.properties"
-    v-else-if="template.type === 'number'"
+        :key="key"
-    class="editor"
+        :template="prop"
-  >
+        :config="config[prop.name]"
-    <label v-text="template.name || ''" />
+      />
-    <input
+    </div>
-      v-model="config"
+    <div
-      type="number"
+      v-else-if="template.type === 'array'"
+      class="editor"
     >
-  </div>
+      <ConfigEditor
-  <div
+        v-for="(child,key) of config"
-    v-else-if="template.type === 'boolean'"
+        :key="key"
-    class="editor"
+        :config="child"
-  >
+        :template="template.child"
-    <label v-text="template.name || ''" />
+      />
-    <input
+      <button
-      v-model="config"
+        type="button"
-      type="checkbox"
+        @click="config.push(create_default(template.child))"
+      >
+        add
+      </button>
+    </div>
+    <div
+      v-else-if="template.type === 'string'"
+      class="editor"
     >
-  </div>
+      <input
-  <pre v-else>
+        v-model="config"
+        type="text"
+      >
+    </div>
+    <div
+      v-else-if="template.type === 'number'"
+      class="editor"
+    >
+      <input
+        v-model="config"
+        type="number"
+      >
+    </div>
+    <div
+      v-else-if="template.type === 'boolean'"
+      class="editor"
+    >
+      <input
+        v-model="config"
+        type="checkbox"
+      >
+    </div>
+    <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>