merged with Michael/getname

Author: Emma Genesen

package-lock.json

@@ -28,6 +28,8 @@
     "@quasar/cli": "^1.3.2",
     "@quasar/extras": "^1.12.5",
     "@ssthouse/vue3-tree-chart": "^0.2.3",
+    "bootstrap": "^5.2.0",
+    "bootstrap-vue": "^2.22.0",
     "core-js": "^3.21.1",
     "dotenv": "^16.0.0",
     "electron-deeplink": "^1.0.10",

package.json

@@ -32,10 +32,11 @@ export function useCreateComponent(importObj) {
     // boilerplate properties for each component upon creation
     const component = {
       x: 0,
-      y: 20,
+      y: 0,
       z: 0,
-      w: 200,
-      h: 200,
+      // !Chris: disabling this temporarily to see if we can have create component dynamically fit into grid- less snapping bugs
+      // w: 200,
+      // h: 200,
       htmlList: this.selectedElementList,
       noteList: [],
       children: [],
@@ -50,7 +51,7 @@ export function useCreateComponent(importObj) {
       htmlAttributes: {
         class: "",
         id: ""
-      }
+      },
     };
 
     if (imported === true) {

src/components/Canvas.vue

@@ -1,13 +1,13 @@
 export function useExportComponent() {
-    // OVERVUE 6.0: export active component 
+    // OVERVUE 6.0: export active component
     /**
      * @description: makes files, directories and boilerplate when exporting a single Vue component
-     * 
+     *
      * @param: none -- uses this.activeComponent from state to create file
      * @return: none -- outputs file to fs
-     * 
+     *
      */
-    
+
       const showExportComponentDialog = () => {
         ipcRenderer
         .invoke("exportComponent", {
@@ -18,12 +18,12 @@ export function useExportComponent() {
         .then((result) => exportComponentFile(result.filePath))
         .catch((err) => console.log(err));
       }
-      
+
       /**
        * @description: creates component code <template>, <script>, <style>
        * invokes writeTemplate, writeScript, writeStyle
        */
-      
+
       const createComponentCode = (componentLocation, componentName, children) => {
         fs.writeFileSync(
           componentLocation + ".vue",
@@ -57,6 +57,7 @@ export function useExportComponent() {
           h4: ["<h4", "</h4>"],
           h5: ["<h5", "</h5>"],
           h6: ["<h6", "</h6>"],
+          element:["<el-button", "</el-button>"]
         };
         // function to loop through nested elements
         const writeNested = (childrenArray, indent) => {
@@ -65,7 +66,7 @@ export function useExportComponent() {
           }
           let indented = indent + "  ";
           let nestedString = "";
-  
+
           childrenArray.forEach((child) => {
             nestedString += indented;
             if (!child.text) {
@@ -81,7 +82,7 @@ export function useExportComponent() {
               if (child.text === "img" || child.text === "input" || child.text === "link") {
                 nestedString += "/>";
               } else { nestedString += ">"; }
-  
+
               if (child.children.length) {
                 nestedString += "\n";
                 nestedString += writeNested(child.children, indented);
@@ -206,7 +207,7 @@ export function useExportComponent() {
           data += "\n";
           data += "    }\n";
           data += "  },\n";
-        
+
         // if true add computed section and populate with state
         let computed = "";
         if (currentComponent.state.length) {
@@ -270,10 +271,10 @@ height: ${element.h}px;
 z-index: ${element.z};
 }\n`
           }
-        }) 
-          
-        
-  
+        })
+
+
+
 
 
         for (const html of htmlArray) {
@@ -304,4 +305,4 @@ z-index: ${html.z};
         );
       }
       showExportComponentDialog();
-  }
+  }

src/components/composables/useCreateComponent.js

@@ -7,10 +7,17 @@ Description:
 
 <template>
   <div class="create-component-div drawer-menu">
+
+
+
     <q-expansion-item group="accordion" label="Import Component">
+      <!-- !THIS IS THE IMPORT COMPONENT TAB WE NEED TO WORK ON -->
       <ImportComponent v-if="activeComponent === ''" @imported="createComponent" title="Import Component (coming soon)" class="sidebar-btn" :disable = "true"/>
     </q-expansion-item>
-    <q-expansion-item group="accordion" label="Create Component">
+    <q-expansion-item group="accordion" label="Create Component" >
+      <ImportLibraryButton></ImportLibraryButton>
+      <LibComponents></LibComponents>
+
       <form class="create-component-form" v-on:submit.prevent="createComponent">
         <!-- will render if creating new component -->
         <q-input
@@ -32,7 +39,8 @@ Description:
       </form>
 
       <ParentMultiselect v-if="activeComponent === ''"></ParentMultiselect>
-      <div class="subsection">HTML Elements</div>
+
+      <div class="subsection">Elements/Components</div>
       <div class="icon-container">
         <Icons
           class="icons"
@@ -41,10 +49,12 @@ Description:
           @activeHTML="addNestedHTML"
           @activeLayer="addNestedNoActive"
         />
+
       </div>
       <button class="componentHTML">
         <CreateMenuHTMLQueue></CreateMenuHTMLQueue>
       </button>
+
       <br />
 
       <q-btn
@@ -56,6 +66,7 @@ Description:
         @click="createComponent"
         :disabled="!componentNameInputValue.trim() || Object.keys(this.componentMap).includes(componentNameInputValue.trim())"
       />
+
     </q-expansion-item>
   </div>
 </template>
@@ -67,13 +78,21 @@ import ParentMultiselect from "./ParentMultiselect.vue";
 import ImportComponent from "./ImportComponent.vue"
 import CreateMenuHTMLQueue from "./CreateMenuHTMLQueue.vue";
 import { mapState, mapActions } from "vuex";
+import ImportLibraryButton from "./ImportLibraryButton.vue";
+import LibComponents from "./LibComponents.vue";
+
+
 export default {
   name: "CreateMenu",
   components: {
     Icons,
     ParentMultiselect,
     ImportComponent,
-    CreateMenuHTMLQueue
+    CreateMenuHTMLQueue,
+    ImportLibraryButton,
+    ImportLibraryButton,
+    LibComponents,
+
 },
   computed: {
     ...mapState([

src/components/composables/useExportComponent.js

@@ -134,6 +134,7 @@ export default {
         h4:["<h4>", "</h4>"],
         h5:["<h5>", "</h5>"],
         h6:["<h6>", "</h6>"],
+        element:["<el-button ", "</el-button>"]
       };
 
 
@@ -181,9 +182,9 @@ export default {
 
       /**
        * @name: buildList
-       * @desc: takes incoming substrings and pushes the appropriate 
+       * @desc: takes incoming substrings and pushes the appropriate
        *        elements fromt he htmlElementMap defined by Overvue
-       * 
+       *
        * @param: substrings from htmlParser function
        * @return: nothing -- pushes into htmlList array which is defined outside scope of buildList
        */

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

@@ -0,0 +1,70 @@
+
+<template>
+  <div class="q-pa-md">
+    <q-btn-dropdown color="purple" label="Choose Library">
+      <q-list>
+        <q-item clickable v-close-popup @click="pickLibrary('element')">
+          <q-item-section>
+            <q-item-label>Element+</q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-close-popup @click="pickLibrary('bootstrap')">
+          <q-item-section>
+            <q-item-label>Bootstrap</q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-close-popup @click="pickLibrary('vuetify')">
+          <q-item-section>
+            <q-item-label>Vuetify</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+  </div>
+</template>
+
+
+
+
+<script>
+  import { mapState, mapActions } from "vuex";
+  export default {
+  name: "ImportLibraryButton",
+  components: {
+
+  },
+  methods:{
+    ...mapActions([
+
+
+      "changeLib",
+      'addLibComponents',
+      'changeLibComponentDisplay'
+
+
+    ]),
+    pickLibrary(libName){
+      let payload = {
+        libName:libName,
+        displaylibComponent:true
+
+      }
+      this.changeLibComponentDisplay(payload);
+      this.changeLib(payload);
+      // console.log(this.$store.state.importLibraries.includes('element'));
+    },
+
+
+
+
+  },
+  computed: {
+    ...mapState([
+    'importLibraries'
+    ]),
+}
+  }
+</script>
+<style></style>

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

@@ -4,7 +4,7 @@
   <div class="AttributeBox">
     <div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
       :key="element.id + Date.now()">
-      <p v-if="element.id === this.activeHTML" class="title">Your class {{ element.class.length !== 0 ? 'is ' + element.class : 'has not been stated yet' }}</p>    
+      <p v-if="element.id === this.activeHTML" class="title">Your class {{ element.class.length !== 0 ? 'is ' + element.class : 'has not been stated yet' }}</p>
     </div>
       <q-form autofocus v-on:submit.prevent="submitClass">
         <q-input label="Add/Change your class name" filled dark autofocus true hide-bottom-space v-model="classText"
@@ -21,7 +21,7 @@
             :disable="bindingText.length > 0 ? false : true" @click.self="addBinding(bindingText, this.activeHTML)">
           </i>
         </q-input>
-      </q-form>  
+      </q-form>
     <div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
       :key="element.id + Date.now()">
       <div v-if="exceptions.includes(element.text) && element.id === this.activeHTML">
@@ -32,7 +32,7 @@
             </i>
           </q-input>
         </q-form>
-        <p class="title">Adjust Height and Elevation:</p> 
+        <p class="title">Adjust Height and Elevation:</p>
         <q-form autofocus v-on:submit.prevent="submitHeight">
           <q-slider
             v-model="heightText"
@@ -46,7 +46,7 @@
             color="secondary"
             @change="submitHeight(heightText, this.activeHTML)"
             @update:model-value="submitHeight(heightText, this.activeHTML)"
-            style="float: left; margin-left: 5% " 
+            style="float: left; margin-left: 5% "
           />
         </q-form>
         <q-form autofocus v-on:submit.prevent="submitTop">
@@ -157,7 +157,7 @@ import { mapState, mapActions } from 'vuex'
 export default {
   data () {
     return {
-      exceptions: ['div','button','form','img','list','paragraph','list-ol','list-ul','input','h1','h2','h3','h4','h5','h6'],
+      exceptions: ['div','button','form','img','list','paragraph','list-ol','list-ul','input','h1','h2','h3','h4','h5','h6','element'],
       attributeModal : "false",
       classText: '',
       heightText: '',
@@ -187,11 +187,11 @@ export default {
   computed: {
     ...mapState([
       'activeComponent',
-      'selectedElementList', 
-      'componentMap', 
-      'activeComponent', 
-      'activeHTML', 
-      'activeLayer', 
+      'selectedElementList',
+      'componentMap',
+      'activeComponent',
+      'activeHTML',
+      'activeLayer',
       'attributeModalOpen',
       'activeRoute',
       'routes',
@@ -206,7 +206,7 @@ export default {
     ...mapActions([
       'setActiveHTML',
       'setActiveLayer',
-      'openAttributeModal', 
+      'openAttributeModal',
       'addActiveComponentClass',
       'addActiveComponentElementNote',
       'addActiveComponentHeight',
@@ -360,7 +360,7 @@ export default {
   margin-top: 2em;
   margin-bottom: 2em;
   width: 100%;
-} 
+}
 
 .minorAction {
   margin-right:5px;
@@ -373,4 +373,4 @@ export default {
 padding-top:5px;
 }
 
-</style>
+</style>