Merge pull request #187 from oslabs-beta/master

Final merge from oslabs-beta to open-source-labs main for OverVue 10.0

README.md

@@ -1,5 +1,5 @@
 <h1 align="center">
-  <img src="src/assets/overvue_256x256.png">
+  <img src="src/assets/overvue_256x256_old.png">
 </h1>
 
 <p align="center"><b>Prototyping Development Tool for Vue Developers</b></p>
@@ -422,7 +422,6 @@ package.json
 <li>Eliminated code redundancy by implementing Composition API and Pinia</li>
 </ul>
 </details>
-<br/>
 
 ### Changelog 10.0
 
@@ -467,6 +466,7 @@ Smaller changes that can be worked on:
 - Removing ghost image when dragging HTML elements
 - Highlight active HTML element when selected/updating
 - Remove duplicate imports and account for nested components in Vuetensils import statement
+- HTML elements list occasionally does not render properly after component is dragged
 
 <br/>
 

src/components/right-sidebar/ComponentDetails.vue

@@ -26,7 +26,7 @@
       <q-tab-panels v-model="tab" animated class="html-bg text-white">
         <!-- HTML Elements -->
         <q-tab-panel name="newhtml">
-          <V10HTMLQueue />
+          <HTMLElementsList />
         </q-tab-panel>
 
         <!-- Code Preview -->
@@ -119,7 +119,7 @@
 import { computed } from "vue";
 import { useStore } from "../../store/main.js";
 import { Component } from "../../../types";
-import V10HTMLQueue from "./V10HTMLQueue.vue";
+import HTMLElementsList from "./HTMLElementsList.vue";
 import CodeSnippet from "./CodeSnippet.vue";
 
 /* COMPUTED VALUES */

src/components/right-sidebar/Tree.vue

@@ -18,7 +18,7 @@ import { useStore } from "../../store/main.js";
 import VueTree from "@overvue/vue3-tree-chart";
 import "@overvue/vue3-tree-chart/dist/vue3-tree-chart.css";
 
-import V10HTMLQueue from "./V10HTMLQueue.vue";
+import HTMLElementsList from "./HTMLElementsList.vue";
 
 /* LIFECYCLE HOOKS */
 onMounted(() => {
@@ -259,8 +259,7 @@ watch(componentMap, () => (treeData.value = buildTree(componentMap.value)), {
         {{ activeComponent }}
       </div>
       <div class="modal-box">
-        <!-- <HTMLQueue /> -->
-        <V10HTMLQueue />
+        <HTMLElementsList />
       </div>
     </div>
   </q-dialog>

src/store/actions.ts

@@ -3,14 +3,8 @@ import {
   breadthFirstSearchParent,
 } from "src/utils/search.util";
 
-import { isProxy, toRaw } from "vue";
-import {
-  State,
-  Actions,
-  Component,
-  RouteComponentMap,
-  HtmlElement,
-} from "../../types";
+import { toRaw } from "vue";
+import { State, Actions, Component, HtmlElement } from "../../types";
 import { Store } from "pinia";
 import localforage from "localforage";
 // *** GLOBAL *** //////////////////////////////////////////////