Fixed bug that didn't allow you to delete props due to deleteProp not being defined. Also fixed bug that deleted the parent/child relationship when adding state to a component

Author: Julia Bakerink

juliaTest/Test.vue

@@ -118,7 +118,7 @@ export default {
       }
     // if Typescript toggle is on, import defineComponent
       if (this.exportAsTypescript === "on") {
-        imports += 'import { defineComponent } from "vue"\n';
+        imports += 'import { defineComponent } from "vue";\n';
       }
       // add imports for children
       children.forEach((name) => {
@@ -186,8 +186,6 @@ export default {
       } else {
         output += "};\n<\/script>";
       }
-      
-      console.log('output', output);
       return output;
     },
     /**

src/components/ExportComponentMixin.vue

@@ -45,7 +45,7 @@ export default {
   },
   computed: {
     // needs access to current component aka activeComponent
-    ...mapState(["componentMap", "activeComponent", "activeComponentObj"]),
+    ...mapState(["componentMap", "activeComponent", "activeComponentObj", "exportAsTypescript"]),
     code: function () {
       let computedCode = "Your component boilerplate will be displayed here.";
       if (this.activeComponent) {
@@ -172,7 +172,12 @@ export default {
           imports += "mapState, mapActions";
         } else if (this.activeComponentObj.state.length) imports += "mapState";
         else imports += "mapActions";
-        imports += ' } from "vuex"\n';
+        imports += ' } from "vuex";\n';
+      }
+
+       // if Typescript toggle is on, import defineComponent
+      if (this.exportAsTypescript === "on") {
+        imports += 'import { defineComponent } from "vue";\n';
       }
 
       // add imports for children
@@ -223,15 +228,28 @@ export default {
       }
 
       // concat all code within script tags
-      let output = "\n\n<script>\n";
-      output += imports + "\nexport default {\n  name: " + componentName;
+      // if exportAsTypescript is on, out should be <script lang="ts">
+      let output;
+      if (this.exportAsTypescript === 'on') {
+        output = "\n\n<script lang='ts'>\n";
+        output += imports + "\nexport default defineComponent ({\n  name: '" + componentName + "';";
+      } else {
+        output = "\n\n<script>\n";
+        output += imports + "\nexport default {\n  name: '" + componentName + "';";
+      }
       output += ",\n  components: {\n";
       output += childrenComponentNames + "  },\n";
       output += data;
       output += computed;
       output += methods;
+
+      if (this.exportAsTypescript === 'on') {
+        output += "});\n<\/script>\n\n<style scoped>\n</style>"
+
+      } else {
+        output += "};\n<\/script>\n\n<style scoped>\n</style>"
+      }
       // eslint-disable-next-line no-useless-escape
-      output += "};\n<\/script>\n\n<style scoped>\n</style>";
       // add props/data
 
       // eslint-disable-next-line no-useless-escape

src/components/dashboard_items/CodeSnippet.vue

@@ -98,7 +98,7 @@ export default {
     ]),
     // Prevent Delete on changes to searchable multiselet
     stopDelete(e) {
-      if (e.code === "Backspce") e.stopPropogation();
+      if (e.code === "Backspace") e.stopPropogation();
     },
     // adds a state to the currently selected component
     addStateToComp() {

src/components/home_sidebar_items/ComponentTab/ComponentState.vue

@@ -275,6 +275,11 @@ export default {
       }
     },
 
+    // Delete prop
+    deleteProp(prop) {
+      this.$store.dispatch('deletePropsFromComponent', prop);
+    },
+
     // changes layer of active component
     handleLayer(e) {
       e.preventDefault();

src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

@@ -104,7 +104,7 @@ const mutations = {
   },
 
   [types.ADD_ACTION_TO_COMPONENT]: (state, payload) => {
-    const active = state.activeComponentObj;
+    const active = state.componentMap[state.activeComponent];
 
     if (!active.actions) {
       active.actions = payload;
@@ -138,7 +138,7 @@ const mutations = {
   },
 
   [types.ADD_PROPS_TO_COMPONENT]: (state, payload) => {
-    const active = state.activeComponentObj;
+    const active = state.componentMap[state.activeComponent];
 
     if (!active.props) {
       active.props = payload;
@@ -169,7 +169,8 @@ const mutations = {
   },
 
   [types.ADD_STATE_TO_COMPONENT]: (state, payload) => {
-    const active = state.activeComponentObj;
+    // const active = state.activeComponentObj;
+    const active = state.componentMap[state.activeComponent];
 
     if (!state.activeComponentObj.state) {
       state.activeComponentObj.state = payload;
@@ -192,7 +193,7 @@ const mutations = {
   },
 
   [types.DELETE_ACTION_FROM_COMPONENT]: (state, payload) => {
-    const temp = state.activeComponentObj;
+    const temp = state.componentMap[state.activeComponent];
     const newArray = [];
     temp.actions.forEach((element) => {
       if (element !== payload) newArray.push(element);
@@ -203,7 +204,7 @@ const mutations = {
   },
 
   [types.DELETE_PROPS_FROM_COMPONENT]: (state, payload) => {
-    const temp = state.activeComponentObj;
+    const temp = state.componentMap[state.activeComponent];
     const newArray = [];
     temp.props.forEach((element) => {
       if (element !== payload) newArray.push(element);
@@ -214,7 +215,7 @@ const mutations = {
   },
 
   [types.DELETE_STATE_FROM_COMPONENT]: (state, payload) => {
-    const temp = state.activeComponentObj;
+    const temp = state.componentMap[state.activeComponent];
     const newArray = [];
     temp.state.forEach((element) => {
       if (element !== payload) newArray.push(element);