improved state and actions multiselects in component tab: now use componentmap[activecomponent] which is much more responsive than activecomponentobj that is oddly used. refactored the mutations for state, prop and action changes to use filter method instead of reassigning multiple times and creating multiple new arrays in memory.

Author: MrBeeAreWhy

src/components/ComponentDisplay.vue

@@ -248,7 +248,6 @@ export default {
       const val = this.routes[this.activeRoute].map(
         (component) => component.componentName
       );
-        console.log(val)
       const relatives = [...val]
         //also need to filter out any parents
 
@@ -481,7 +480,7 @@ export default {
 
 .addChild{
   width: 25vh;
-  height: 25vh;
+  height: 50vh;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/dashboard_items/CodeSnippet.vue

@@ -58,6 +58,7 @@ export default {
           this.code = 'Your component boilerplate will be displayed here.'
       }
     },
+    //highlighter does not work: OverVue 6.0;
     highlighter(myCode) {
       return highlight(myCode, languages.js);
     },
@@ -249,13 +250,6 @@ export default {
       } else {
         output += "};\n<\/script>\n\n<style scoped>\n</style>"
       }
-      // eslint-disable-next-line no-useless-escape
-      // add props/data
-
-      // eslint-disable-next-line no-useless-escape
-      // return `\n\n<script>\n${str}\nexport default {\n  name: '${componentName}',\n
-      // components: {\n${childrenComponentNames}  }\n};\n<\/script>\n\n<style scoped>\n
-      // </style>`
       return output;
     },
   },
@@ -278,7 +272,7 @@ export default {
   mounted() {
     // https://vuejs.org/v2/api/#Vue-nextTick
     // kinda like a promise, used for the window resize
-    this.snippetInvoke()
+    this.snippetInvoke(); //generates the code snippet whenever this is mounted
     this.$nextTick(() => {
       window.addEventListener("resize", this.getWindowHeight);
 
@@ -300,15 +294,18 @@ export default {
   font-size: 12px;
   background: #2d2d2d;
   color: #ccc;
-  max-height: 70vh;
+  max-height: 100%;
   /* you must provide font-family font-size line-height. Example: */
   font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
   line-height: 1.5;
   padding: 5px;
 }
 
 .codesnippet-container {
-  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: 95%;
 }
 
 .prism-editor__textarea:focus {

src/components/dashboard_items/ComponentDetails.vue

@@ -183,6 +183,6 @@ i {
   flex-direction: column;
   justify-content: flex-start;
   align-content: stretch;
-  height: 100%;
+  max-height: 95%;
 }
 </style>

src/components/home_sidebar_items/ComponentTab/ComponentActions.vue

@@ -33,10 +33,10 @@
         @click="addActionToComp"
       />
     </div>
-    <p v-if="!this.activeComponentObj.actions.length">
+    <p v-if="!this.componentMap[this.activeComponent].actions.length">
       No actions in component
     </p>
-    <a v-else v-for="action in this.activeComponentData.actions" :key="action">
+    <a v-else v-for="action in this.componentMap[this.activeComponent].actions" :key="action">
       <q-list class="list-item" dense bordered separator>
         <q-item clickable v-ripple class="list-item">
           <q-item-section>
@@ -69,15 +69,7 @@ export default {
     VueMultiselect,
   },
   computed: {
-    ...mapState(["activeComponentObj", "selectedActions", "userActions"]),
-    activeComponentData() {
-      return this.activeComponentObj;
-    },
-    compObj: {
-      get() {
-        return this.activeComponentObj;
-      },
-    },
+    ...mapState(["selectedActions", "userActions", "componentMap", "activeComponent"]),
     actionOptions() {
       return this.userActions;
     },

src/components/home_sidebar_items/ComponentTab/ComponentState.vue

@@ -34,8 +34,8 @@
         @click="addStateToComp"
       />
     </div>
-    <p v-if="!this.activeComponentObj.state.length">No state in component</p>
-    <a v-else v-for="state in this.activeComponentData.state" :key="state">
+    <p v-if="!this.componentMap[this.activeComponent].state.length">No state in component</p>
+    <a v-else v-for="state in this.componentMap[this.activeComponent].state" :key="state">
       <q-list class="list-item" dense bordered separator>
         <q-item clickable v-ripple class="list-item">
           <q-item-section>
@@ -65,19 +65,11 @@ import VueMultiselect from "vue-multiselect";
 export default {
   name: "ComponentState",
   components: {
-    // Multiselect
     VueMultiselect,
   },
   computed: {
-    ...mapState(["activeComponentObj", "selectedState", "userState"]),
-    activeComponentData() {
-      return this.activeComponentObj;
-    },
-    compObj: {
-      get() {
-        return this.activeComponentObj;
-      },
-    },
+    ...mapState(["selectedState", "userState", "componentMap", "activeComponent"]),
+
     stateOptions() {
       return this.userState;
     },

src/store/mutations.js

@@ -208,37 +208,18 @@ const mutations = {
   },
 
   [types.DELETE_ACTION_FROM_COMPONENT]: (state, payload) => {
-    const temp = state.componentMap[state.activeComponent];
-    const newArray = [];
-    temp.actions.forEach((element) => {
-      if (element !== payload) newArray.push(element);
-    });
-    temp.actions = newArray;
-    state.activeComponentObj = null;
-    state.activeComponentObj = temp;
+    state.componentMap[state.activeComponent].actions = state.componentMap[state.activeComponent].actions.filter(
+      (action) => action !== payload);
   },
 
   [types.DELETE_PROPS_FROM_COMPONENT]: (state, payload) => {
-    const temp = state.componentMap[state.activeComponent];
-    const newArray = [];
-    temp.props.forEach((element) => {
-      if (element !== payload) newArray.push(element);
-    });
-    temp.props = newArray;
-    state.activeComponentObj = null;
-    state.activeComponentObj = temp;
+    state.componentMap[state.activeComponent].props = state.componentMap[state.activeComponent].props.filter(
+      (prop) => prop !== payload);
   },
 
   [types.DELETE_STATE_FROM_COMPONENT]: (state, payload) => {
-    const temp = state.componentMap[state.activeComponent];
-    const newArray = [];
-    temp.state.forEach((element) => {
-      if (element !== payload) newArray.push(element);
-    });
-    temp.state = newArray;
-    state.activeComponentObj = null;
-    state.activeComponentObj = temp;
-    console.log(state.componentMap)
+    state.componentMap[state.activeComponent].state = state.componentMap[state.activeComponent].state.filter(
+      (state) => state !== payload);
   },
 
   [types.DELETE_USER_STATE]: (state, payload) => {
@@ -248,7 +229,7 @@ const mutations = {
       if (component === "App" || component === "HomeView") continue;
       // splice out if there is a match
       state.componentMap[component].state = state.componentMap[component].state.filter(
-        (action) => action !== payload)
+        (action) => action !== payload);
     }
     // remove from userState
     let index = state.userState.indexOf(payload);
@@ -261,7 +242,7 @@ const mutations = {
       if (component === "App" || component === "HomeView") continue;
       // splice out if there is a match
       state.componentMap[component].actions = state.componentMap[component].actions.filter(
-        (action) => action !== payload)
+        (action) => action !== payload);
     }
     let index = state.userActions.indexOf(payload);
     state.userActions.splice(index, 1);