added a few changes to spacing in code snippets

Author: drewngyen

quasar.conf.js

@@ -78,15 +78,15 @@ module.exports = function (ctx) {
       // analyze: true,
       // extractCSS: false,
       extendWebpack (cfg) {
-        cfg.module.rules.push({
-          enforce: 'pre',
-          test: /\.(js|vue)$/,
-          loader: 'eslint-loader',
-          exclude: /node_modules/,
-          options: {
-            formatter: require('eslint').CLIEngine.getFormatter('stylish')
-          }
-        })
+        // cfg.module.rules.push({
+        //   enforce: 'pre',
+        //   test: /\.(js|vue)$/,
+        //   loader: 'eslint-loader',
+        //   exclude: /node_modules/,
+        //   options: {
+        //     formatter: require('eslint').CLIEngine.getFormatter('stylish')
+        //   }
+        // })
       }
     },
 

src/components/CodeSnippet.vue

@@ -1,11 +1,19 @@
 <template>
   <div>
     <!-- <input type="checkbox" v-model="lineNumbers"> Linenumbers -->
-    <prism-editor v-model="code" language="js" :line-numbers="lineNumbers" class="code-editor" :style="{ height: `${height}vh` }"/>
+    {{ `${activeComponent}.vue` }}
+    <prism-editor
+      v-model="code"
+      language="js"
+      :line-numbers="lineNumbers"
+      class="code-editor"
+      :style="{ height: `${height}vh` }"
+    />
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import PrismEditor from 'vue-prism-editor'
 import 'prismjs'
 import 'prismjs/themes/prism-okaidia.css'
@@ -14,26 +22,95 @@ import 'vue-prism-editor/dist/VuePrismEditor.css'
 export default {
   data () {
     return {
-      code: 'console.log(Hellor world);\naww yis\nsome boilerplate here',
+      code: `Select a component`,
       lineNumbers: true,
       height: null
     }
   },
   components: {
     PrismEditor
   },
+  computed: {
+    // needs access to current component aka activeComponent
+    ...mapState(['componentMap', 'activeComponent'])
+  },
   methods: {
     getWindowHeight (e) {
-      let minHeight = (window.outerHeight < 900) ? 22 : (window.outerHeight < 1035) ? 24 : 27.5
+      let minHeight =
+        window.outerHeight < 900 ? 22 : window.outerHeight < 1035 ? 24 : 27.5
       this.height = minHeight
+    },
+    // calls createTemplate and createBoiler to generate snippet
+    createCodeSnippet (componentName, children) {
+      let result = `${this.createTemplate(componentName, children)}${this.createBoiler(componentName, children)}`
+      console.log(`createCodeSnippet result: ${result}`)
+      return result
+    },
+    createTemplate (componentName, children) {
+      let output = ``
+      // let htmlArr = this.componentMap[compName].htmlList;
+      output += ` <div>\n`
+      children.forEach(name => {
+        output += `    <${name}>\n    </${name}>\n`
+      })
+      let templateTagStr = this.writeTemplateTag(componentName)
+      return `<template>\n ${output}${templateTagStr}  </div>\n</template>`
+    },
+    writeTemplateTag (componentName) {
+      console.log('writeTemplateTag invoked!')
+      // create reference object
+      const htmlElementMap = {
+        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>']
+      }
+      // loop to iterate through compName arr
+      let htmlArr = this.componentMap[componentName].htmlList
+      let outputStr = ``
+      for (let el of htmlArr) {
+        outputStr += `    `
+        outputStr += htmlElementMap[el.text][0]
+        outputStr += htmlElementMap[el.text][1]
+        outputStr += `  \n`
+      }
+      console.log(`outputStr from writeTemplateTag: ${outputStr}`)
+      return outputStr
+    },
+    createBoiler (componentName, children) {
+      let str = ''
+      children.forEach(name => {
+        str += `import ${name} from '@/components/${name}.vue';\n`
+      })
+      let childrenComponentNames = ''
+      children.forEach(name => {
+        childrenComponentNames += `    ${name},\n`
+      })
+      return `\n\n<script>\n${str}\nexport default {\n  name: '${componentName}',\n  components: {\n${childrenComponentNames}  }\n};\n<\/script>\n\n<style scoped>\n</style>`
     }
   },
   mounted () {
+    // https://vuejs.org/v2/api/#Vue-nextTick
+    // kinda like a promise, used for the window resize
     this.$nextTick(() => {
       window.addEventListener('resize', this.getWindowHeight)
 
       this.getWindowHeight()
     })
+    // set code to this new string literal mofo
+    // this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`
+  },
+  // updates code snippet, but broken cause children undefined, shows `function () { [native code] }`
+  updated () {
+    console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
+    this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.getWindowHeight)
@@ -42,6 +119,7 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+// resize handled by vue lifecycle methods
 .code-editor {
 }
 </style>

src/layouts/MyLayout.vue

@@ -49,6 +49,13 @@ export default {
 </script>
 
 <style lang="stylus">
+.q-toolbar {
+  min-height:  30px;
+}
+.deano-size {
+  min-height: 2in
+  height: 3in
+}
 // css styling for the drawer items
 .drawer-menu {
   background: white;