updated export and missing SNIPPET

Author: jchan444

src/components/left-sidebar/ComponentTab/ImportComponent.vue

@@ -112,27 +112,27 @@ export default {
       }
       importObj.componentName = compName;
 
-      const htmlElementMap = { //OverVue state management only handles these HTML tags.
-        div: ["<div>", "</div>"],
-        button: ["<button>", "</button>"],
-        form: ["<form>", "</form>"],
-        img: ["<img>", ""],
-        link: ['<a href="#"/>', ""],
-        list: ["<li>", "</li>"],
-        paragraph: ["<p>", "</p>"],
-        "list-ol": ["<ol>", "</ol>"],
-        "list-ul": ["<ul>", "</ul>"],
-        input: ["<input />", ""],
-        navbar: ["<nav>", "</nav>"],
-        header:["<header>", "</header>"],
-        footer:["<footer>", "</footer>"],
-        meta: ["<meta>", "</meta>"],
-        h1:["<h1>", "</h1>"],
-        h2:["<h2>", "</h2>"],
-        h3:["<h3>", "</h3>"],
-        h4:["<h4>", "</h4>"],
-        h5:["<h5>", "</h5>"],
-        h6:["<h6>", "</h6>"],
+      const htmlElementMap = {
+        div: ["<div", "</div>"],
+        button: ["<button", "</button>"],
+        form: ["<form", "</form>"],
+        img: ["<img", ""], //single
+        link: ['<a href="#"', ""], //single
+        list: ["<li", "</li>"],
+        paragraph: ["<p", "</p>"],
+        "list-ol": ["<ol", "</ol>"],
+        "list-ul": ["<ul", "</ul>"],
+        input: ["<input", ""], //single
+        navbar: ["<nav", "</nav>"],
+        header: ["<header", "</header>"],
+        footer: ["<footer", "</footer>"],
+        meta: ["<meta", "</meta>"],
+        h1: ["<h1", "</h1>"],
+        h2: ["<h2", "</h2>"],
+        h3: ["<h3", "</h3>"],
+        h4: ["<h4", "</h4>"],
+        h5: ["<h5", "</h5>"],
+        h6: ["<h6", "</h6>"],
       };
 
 

src/components/right-sidebar/HTMLQueue.vue

@@ -40,27 +40,6 @@ Description:
         </div>
     </div>
 
-<!--START OF CHANGES-->
-      <!-- &nbsp; &nbsp; Viewing Elements in {{ this.activeComponent }} '{{ depth }}'
-      <hr>
-    </span>
-    <span class='list-title' v-else-if='!this.activeComponent'></span>
-    <div group="people" class="list-group">
-      <p v-if='!this.componentMap[this.activeComponent]?.htmlList.length'>No HTML elements in component</p>
-
-      <div id="tooltipCon" :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
-        v-for="(element) in renderList" :key="element[1] + Date.now()">
-
-        <button class="attributeButton" @click="setActiveElement(element)">
-          <div class="tooltip"> Edit {{ element[0] }} attributes </div>
-        </button>
-        <i v-if='activeComponent === "" || exceptions.includes(element[0])'></i>
-        <i v-else class="fas fa fa-angle-double-down fa-md" @click="setLayer({ text: element[0], id: element[2] })"></i>
-        {{ element[0] }}
-        <i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1], element[2]])"></i>
-      </div>
-    </div> -->
-
     <!-- attribute pop-up -->
     <q-dialog v-model="attributeModal">
       <!-- @update:model-value="setActiveElement" -->
@@ -72,6 +51,15 @@ Description:
           <p v-if="element.id === this.activeHTML">Your class is - {{ element.class }}</p>
         </div>
 
+<!--attribute child's child-->
+        <div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
+          :key="element.id + Date.now()">
+          <ul v-for="element1 in element.children"
+          :key="element1.id + Date.now()">
+            <li v-if="element1.id === this.activeHTML">Your class is - {{ element1.class }}</li>
+          </ul>
+        </div>
+
         <div class="formBox">
           <q-form autofocus v-on:submit.prevent="submitClass">
             <p class="title">Add Class Name:</p>