Basic module configuration finished, now deploying

_includes/vue-rule-script.html

@@ -38,7 +38,7 @@
                     .module="rule"
                     @drop.prevent="dropOnRule" @dragenter.prevent @dragover.prevent
                 >
-                    <div v-if="rule.modules.length < 1">Drag rules from the library below here, or create your own!</div>
+                    <div v-if="rule.modules.length < 1">Drag rules from the library below here, or create your own.</div>
                     <module
                         v-for="module in rule.modules"
                         :key="module"
@@ -88,9 +88,10 @@
                           <table>
                             <tr v-for="(value, key) in editor.module.config">
                               <td>[[key]]</td>
-                              <td><input
+                              <td><input type="text"
                                     v-model="editor.module.config[key]" /></td>
-                              <td><span class="config-button"
+                              <td style="vertical-align: initial">
+                                <span class="config-button"
                                         @click="removeConfig([[key]])">
                                   <img :src="icons.minus" alt="Remove">
                                 </span>
@@ -98,10 +99,14 @@
                             </tr>
                             <tr >
                               <td><input id="newConfigKey"
+                                         type="text"
                                          value="Configuration" /></td>
-                              <td><input id="newConfigValue"
+                              <td>
+                                <input id="newConfigValue"
+                                         type="text"
                                          value="Value" /></td>
-                              <td><span class="config-button"
+                              <td style="vertical-align: initial">
+                                <span class="config-button"
                                         @click="addConfig">
                                   <img :src="icons.plus" alt="Add">
                                 </span>

_sass/_rule-app.scss

@@ -128,7 +128,7 @@ h2 .icon img {
 
   input[type='text'],
   textarea {
-    font-size: 1.2rem;
+    font-size: 1rem;
     font-family: monospace;
     margin: .5rem 0 1rem;
     padding: .25rem;
@@ -498,4 +498,4 @@ h2 .icon img {
       display: none;
     }
   }
-}
+}

assets/js/vue.rules.js

@@ -247,9 +247,9 @@ const app = Vue.createApp({
     /**
      * @returns {Object} a new module object from the moduleTemplate
      */
-    newModule() {
-      return { ...this.moduleTemplate }
-    },
+      newModule() {
+          return JSON.parse(JSON.stringify(this.moduleTemplate));
+      },
     /**
      * spreads a source module into a new module from the moduleTemplate
      * @param {Object} sourceModule the module to copy
@@ -258,12 +258,18 @@ const app = Vue.createApp({
      */
     cloneModule(sourceModule,includeSubmodules) {
       let output = {
-        ...this.moduleTemplate,
-        ...sourceModule,
+          ...this.moduleTemplate,
+          ...sourceModule,
         //TODO: implement lineage pattern, same as the rule does
         source: sourceModule, // keep track of where this module came from
       };
       if (!includeSubmodules) output.modules = [];
+      // clear configs
+      document.getElementById("newConfigKey").value =
+            "Configuration";
+      document.getElementById("newConfigValue").value =
+            "Value";
+      output.config = {};
       // delete unnecessary properties
       delete output.content;
       delete output.readonly;
@@ -592,6 +598,10 @@ const app = Vue.createApp({
           const k = document.getElementById("newConfigKey").value;
           const v = document.getElementById("newConfigValue").value;
           this.editor.module.config[k] = v;
+          document.getElementById("newConfigKey").value =
+              "Configuration";
+          document.getElementById("newConfigValue").value =
+              "Value";
       },
       
       /**
@@ -614,7 +624,7 @@ const app = Vue.createApp({
       }
     },
     /**
-     * Creates a new module, set's a default name, and adds it to the editor
+     * Creates a new module, sets a default name, and adds it to the editor
      */
     newCustomModule() {
       const module = this.newModule();