fix for conflict of this context (removed script setup tag and moved import for composables into regular script tag); styling tweaks; updated quasar config names to reference 6.0 instead of 5.0

Author: megatera

quasar.conf.js

@@ -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",

src/components/Canvas.vue

@@ -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";

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

@@ -60,11 +60,8 @@ 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"

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

@@ -8,12 +8,10 @@
     />
 </template>
 
-<script setup>
-  import { useCreateComponent } from "../../composables/useCreateComponent.js";
-</script>
 
 <script>
 const { fs, ipcRenderer } = window;
+import { useCreateComponent } from "../../composables/useCreateComponent.js";
 import { mapState, mapActions } from "vuex";
 export default {
   props: ['title'],

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

@@ -119,11 +119,9 @@ Description:
   </div>
 </template>
 
-<script setup>
-  import { useExportComponent } from "../../composables/useExportComponent.js";
-</script>
 
 <script>
+import { useExportComponent } from "../../composables/useExportComponent.js";
 import { mapState, mapActions } from "vuex";
 import VueMultiselect from "vue-multiselect";
 import HTMLQueue from "../../right-sidebar/HTMLQueue.vue";

src/components/nav-buttons/ExportMenu.vue

@@ -22,11 +22,9 @@ Description:
   </q-btn>
 </template>
 
-<script setup>
-  import { useExportComponent } from "../composables/useExportComponent.js";
-</script>
 
 <script>
+import { useExportComponent } from "../composables/useExportComponent.js";
 import { mapState } from "vuex";
 const { fs, ipcRenderer } = window;
 

src/components/right-sidebar/tutorial/AdvancedFunctions.vue

@@ -77,7 +77,7 @@ export default {
 
 .tut-screenshot {
   margin: 4px;
-  border: 1px solid $menutext;
+  border: 1px solid $primary;
   max-width: 300px;
 }
 

src/components/right-sidebar/tutorial/BasicFunctions.vue

@@ -114,7 +114,7 @@ export default {
 
 .tut-screenshot {
   margin: 4px;
-  border: 1px solid $menutext;
+  border: 1px solid $primary;
   max-width: 300px;
 }
 

src/css/app.scss

@@ -6,10 +6,10 @@ body {
     color: $menutext;
 }
 
-main {
-    background: #5b6e6e;
-    overflow: auto;
-}
+// main {
+//     background: #5b6e6e;
+//     overflow: auto;
+// }
 
 .q-item__label {
     color: $menutext;  
@@ -48,8 +48,8 @@ main {
 }
 
 .deleteAction {
-  background-color: rgba($negative, .2);
-  color: $negative;
+  background-color: rgba($negative, .2) !important;
+  color: $negative !important;
   border: 1px solid $negative;
 }