Merge pull request #8 from deanfchung/electron

Electron

Author: deanfchung

package-lock.json

@@ -17,12 +17,15 @@
     "mousetrap": "^1.6.3",
     "prismjs": "^1.16.0",
     "quasar": "^1.0.0",
+    "vue-custom-context-menu": "^3.0.1",
     "vue-drag-resize": "^1.3.2",
+    "vue-draggable-nested-tree": "^2.2.17",
     "vue-draggable-resizable": "^2.0.0-rc2",
     "vue-loader": "^15.7.0",
     "vue-multiselect": "^2.1.6",
     "vue-prism-editor": "^0.2.1",
     "vued3tree": "^3.7.1",
+    "vuedraggable": "^2.23.0",
     "vuex": "^3.1.1"
   },
   "devDependencies": {

package.json

@@ -53,13 +53,21 @@ module.exports = function (ctx) {
         'QTab',
         'QRouteTab',
         'QTabPanels',
+        'QDialog',
+        'QSelect',
         'QTabPanel',
         'QFab',
-        'QFabAction'
+        'QFabAction',
+        'QMenu',
+        'QUploader',
+        'QEditor',
+        'QCard',
+        'QChip'
       ],
 
       directives: [
-        'Ripple'
+        'Ripple',
+        'ClosePopup'
       ],
 
       // Quasar plugins
@@ -78,15 +86,15 @@ module.exports = function (ctx) {
       // analyze: true,
       // extractCSS: false,
       extendWebpack (cfg) {
-        // cfg.module.rules.push({
+        //cfg.module.rules.push({
         //   enforce: 'pre',
         //   test: /\.(js|vue)$/,
         //   loader: 'eslint-loader',
         //   exclude: /node_modules/,
         //   options: {
         //     formatter: require('eslint').CLIEngine.getFormatter('stylish')
         //   }
-        // })
+        //})
       }
     },
 

quasar.conf.js

@@ -0,0 +1,74 @@
+<template>
+  <div id="child-select">
+    <br />
+    <multiselect
+      id="dropdown"
+      placeholder="Select child components"
+      :multiple="true"
+      :close-on-select="false"
+      :options="options"
+      :value="componentChildrenMultiselectValue"
+      @input="handleSelect"
+      :max-height="150"
+      :option-height="20"
+      :searchable="false"
+    ></multiselect>
+    <!-- <q-select
+      :options="options"
+      label="Select children"
+      multiple
+    /> -->
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import Multiselect from 'vue-multiselect'
+
+export default {
+  components: {
+    Multiselect
+  },
+  computed: {
+    ...mapState([
+      'routes',
+      // comes from store/state/index.js
+      'componentMap',
+      'activeComponent',
+      'componentChildrenMultiselectValue',
+      'modalOpen'
+    ]),
+    options () {
+      const routes = Object.keys(this.routes)
+      const exceptions = new Set(['App', this.activeComponent, ...routes])
+      console.log('exceptions', exceptions)
+      return Object.keys(this.componentMap).filter(component => {
+        if (!exceptions.has(component)) return component
+      })
+    }
+  },
+  methods: {
+    ...mapActions([
+      'updateComponentChildrenMultiselectValue',
+      'updateActiveComponentChildrenValue'
+    ]),
+    //
+    handleSelect (value) {
+      // if (this.modalOpen) this.updateActiveComponentChildrenValue(value)
+      console.log('Multiselect: ', value)
+      this.updateActiveComponentChildrenValue(value)
+      this.updateComponentChildrenMultiselectValue(value)
+    }
+  }
+}
+</script>
+
+<!-- New step!
+     Add Multiselect CSS. Can be added as a static asset or inside a component. -->
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+<style scoped>
+  #child-select {
+    min-width: 300px;
+    min-height: 200px;
+  }
+</style>

src/components/ChildrenMultiselect.vue

@@ -7,7 +7,8 @@
       language="js"
       :line-numbers="lineNumbers"
       class="code-editor"
-      :style="{ height: `${height}vh` }"
+      :style="{ height: `${height}vh`}"
+      readonly="true"
     />
   </div>
 </template>
@@ -43,7 +44,7 @@ export default {
     // 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}`)
+      //console.log(`createCodeSnippet result: ${result}`)
       return result
     },
     createTemplate (componentName, children) {
@@ -57,7 +58,7 @@ export default {
       return `<template>\n ${output}${templateTagStr}  </div>\n</template>`
     },
     writeTemplateTag (componentName) {
-      console.log('writeTemplateTag invoked!')
+      //console.log('writeTemplateTag invoked!')
       // create reference object
       const htmlElementMap = {
         div: ['<div>', '</div>'],
@@ -81,7 +82,7 @@ export default {
         outputStr += htmlElementMap[el.text][1]
         outputStr += `  \n`
       }
-      console.log(`outputStr from writeTemplateTag: ${outputStr}`)
+      //console.log(`outputStr from writeTemplateTag: ${outputStr}`)
       return outputStr
     },
     createBoiler (componentName, children) {
@@ -109,7 +110,7 @@ export default {
   },
   // 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)}`)
+    //console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
     this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`
   },
   beforeDestroy () {
@@ -121,5 +122,6 @@ export default {
 <style lang="stylus" scoped>
 // resize handled by vue lifecycle methods
 .code-editor {
+  font-size: 11px;
 }
 </style>