Merge pull request #151 from open-source-labs/rename

Rename files and directories; fix 'this' context conflicts due to script setup tags for Composition API

Author: megatera

.eslintignore

@@ -7,4 +7,4 @@
 /node_modules
 .eslintrc.js
 babel.config.js
-/src/components/ComponentDisplay.vue
+/src/components/Canvas.vue

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.16
+FROM node:16.14
 
 # install electron dependencies or more if your library has other dependencies
 RUN apt-get update && apt-get install \

Dockerfile-Mac

@@ -155,8 +155,8 @@ module.exports = configure(function (ctx) {
       },
 
       manifest: {
-        name: `OverVue5.0`,
-        short_name: `OverVue5.0`,
+        name: `OverVue6.0`,
+        short_name: `OverVue6.0`,
         description: `A Quasar Framework app`,
         display: "standalone",
         orientation: "portrait",

Dockerfile_WSL renamed to Dockerfile-WSL

@@ -5,7 +5,7 @@
   -->
 
 <template>
-  <!-- the background canvas grid -->
+  <!-- the background Canvas grid -->
   <div
     class="component-display grid-bg"
     :style="mockBg"
@@ -111,7 +111,7 @@
       </q-dialog>
 
       <!-- some irregularity (delete event listener firing on bkspc/del) with the modal when stored locally, so modal open stored in state, and triggers to local reflect only stateful change.-->
-          <q-dialog v-model="noteModal" @update:model-value="this.handleAddNotes"> 
+          <q-dialog v-model="noteModal" @update:model-value="handleAddNotes"> 
             <div class="noteBox">
               <div class="noteHolder">
                 <p class="title">Adding notes to {{ this.activeComponent }}</p>
@@ -156,11 +156,9 @@
   </div>
 </template>
 
-<script setup>
-  import { useExportComponent } from "./composables/useExportComponent.js";
-</script>
 
 <script>
+import { useExportComponent } from "./composables/useExportComponent.js";
 import { mapState, mapActions } from "vuex";
 import VueDraggableResizable from "vue-draggable-resizable/src/components/vue-draggable-resizable.vue";
 import VueMultiselect from "vue-multiselect";
@@ -171,7 +169,7 @@ const { fs, ipcRenderer } = window;
 const cloneDeep = require("lodash.clonedeep");
 
 export default {
-  name: "ComponentDisplay",
+  name: "Canvas",
   components: {
     VueDraggableResizable,
     VueMultiselect,

quasar.conf.js

@@ -64,7 +64,7 @@ import { mapState, mapActions } from "vuex";
 import VueMultiselect from "vue-multiselect";
 
 export default {
-  name: "ComponentActions",
+  name: "ActionsSubMenu",
   components: {
     VueMultiselect,
   },

src/components/ComponentDisplay.vue renamed to src/components/Canvas.vue

@@ -2,16 +2,15 @@
 Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
 <template>
   <q-card id="store-cards" class="no-shadow">
-    <CreateComponent v-if="activeComponent === ''"/>
-    <EditDeleteComponents v-if="activeComponent !== ''"/>
+    <CreateMenu v-if="activeComponent === ''"/>
+    <UpdateMenu v-if="activeComponent !== ''"/>
   </q-card>
 </template>
 
 <script>
-import CreateComponent from './CreateComponent.vue'
-import EditDeleteComponents from './EditDeleteComponents.vue'
+import CreateMenu from './CreateMenu.vue'
+import UpdateMenu from './UpdateMenu.vue'
 import { mapState } from 'vuex'
-import UploadImage from './UploadImage.vue'
 export default {
   data () {
     return {
@@ -24,9 +23,8 @@ export default {
     ])
   },
   components: {
-    CreateComponent,
-    EditDeleteComponents,
-    UploadImage,
+    CreateMenu,
+    UpdateMenu,
   }
 }
 </script>

src/components/home_sidebar_items/ComponentTab/ComponentActions.vue renamed to src/components/left-sidebar/ComponentTab/ActionsSubMenu.vue

@@ -3,7 +3,7 @@ Description:
   Handles create component menu on left-side
   Functionality includes: creating a component, preventing users from entering invalid component file names
   -->
-<!-- 4.0 adjustment: conditional render to switch between new comp name input and editing active comp name, moved from EditDeleteComponents -->
+<!-- 4.0 adjustment: conditional render to switch between new comp name input and editing active comp name, moved from UpdateMenu -->
 
 <template>
   <div class="create-component-div drawer-menu">
@@ -43,7 +43,7 @@ Description:
         />
       </div>
       <div class="componentHTML">
-        <CreateComponentHTMLQueue></CreateComponentHTMLQueue>
+        <CreateMenuHTMLQueue></CreateMenuHTMLQueue>
       </div>
       <br />
 
@@ -60,23 +60,20 @@ Description:
   </div>
 </template>
 
-<script setup>
-  import { useCreateComponent } from "../../composables/useCreateComponent.js";
-</script>
-
 <script>
+import { useCreateComponent } from "../../composables/useCreateComponent.js";
 import Icons from "./Icons.vue";
 import ParentMultiselect from "./ParentMultiselect.vue";
 import ImportComponent from "./ImportComponent.vue"
-import CreateComponentHTMLQueue from "./CreateComponentHTMLQueue.vue";
+import CreateMenuHTMLQueue from "./CreateMenuHTMLQueue.vue";
 import { mapState, mapActions } from "vuex";
 export default {
-  name: "HomeSidebar",
+  name: "CreateMenu",
   components: {
     Icons,
     ParentMultiselect,
     ImportComponent,
-    CreateComponentHTMLQueue
+    CreateMenuHTMLQueue
 },
   computed: {
     ...mapState([

src/components/home_sidebar_items/ComponentTab/ComponentTab.vue renamed to src/components/left-sidebar/ComponentTab/ComponentTab.vue

@@ -32,7 +32,7 @@ import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlL
 import { breadthFirstSearch } from '../../../utils/search.util'
 
 export default {
-  name: 'HTMLQueue',
+  name: 'CreateMenuHTMLQueue',
   props: {
     name: {
       type: String