FUCK ESLINT

Dean

Author: deanfchung

package-lock.json

@@ -16,21 +16,26 @@
     "localforage": "^1.7.3",
     "mousetrap": "^1.6.3",
     "quasar": "^1.0.0",
+    "vue-drag-resize": "^1.3.2",
     "vue-draggable-resizable": "^2.0.0-rc2",
+    "vue-loader": "^15.7.0",
     "vue-multiselect": "^2.1.6",
-    "vued3tree": "^3.7.1"
+    "vued3tree": "^3.7.1",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@quasar/app": "^1.0.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "devtron": "^1.4.0",
     "electron": "^5.0.6",
+    "electron-builder": "^20.44.4",
     "electron-debug": "^3.0.1",
     "electron-devtools-installer": "^2.2.4",
     "eslint": "^5.10.0",
     "eslint-loader": "^2.1.1",
-    "eslint-plugin-vue": "^5.0.0"
+    "eslint-plugin-vue": "^5.0.0",
+    "strip-ansi": "^3.0.1"
   },
   "engines": {
     "node": ">= 8.9.0",

package.json

@@ -43,16 +43,7 @@ module.exports = function (ctx) {
         'QList',
         'QItem',
         'QItemSection',
-        'QItemLabel',
-        'QExpansionItem',
-        'QInput',
-        'QBar',
-        'QFooter',
-        'QAvatar',
-        'QTabs',
-        'QTab',
-        'QRouteTab',
-        'QTabPanels'
+        'QItemLabel'
       ],
 
       directives: [
@@ -75,15 +66,6 @@ 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')
-          }
-        })
       }
     },
 
@@ -104,9 +86,9 @@ module.exports = function (ctx) {
       // workboxPluginMode: 'InjectManifest',
       // workboxOptions: {}, // only for NON InjectManifest
       manifest: {
-        // name: 'PreVue 2.0',
-        // short_name: 'PreVue 2.0',
-        // description: 'Vue Prototype DevTool',
+        // name: 'Quasar App',
+        // short_name: 'Quasar App',
+        // description: 'A Quasar Framework app',
         display: 'standalone',
         orientation: 'portrait',
         background_color: '#ffffff',
@@ -170,8 +152,8 @@ module.exports = function (ctx) {
       builder: {
         // https://www.electron.build/configuration/configuration
 
-        // appId: 'prevue2'
+        // appId: 'quasar-example'
       }
     }
   }
-}
+}

quasar.conf.js

@@ -0,0 +1,26 @@
+<template>
+  <div class="snip">
+    <q-editor
+      v-model="editor"
+      :definitions="{
+        bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}
+      }"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      editor: 'Here we are overriding the <b>bold</b> command to include a label instead of an icon and also changing its tooltip.'
+    }
+  }
+}
+</script>
+
+<style>
+.snip{
+  height: 150px;
+}
+</style>

src/components/CodeSnippet.vue

@@ -9,11 +9,11 @@
       :w="componentData.w"
       :h="componentData.h"
       :parent="true"
+      class-name-resizable="my-resizable-class"
       @activated="onActivated(componentData)"
       @deactivated="onDeactivated(componentData)"
       @dragging="onDrag"
       @resizing="onResize"
-      @dblclick.native="onDoubleClick(componentData)"
     >
       <h3>{{ componentData.componentName }}</h3>
     </VueDraggableResizable>
@@ -22,6 +22,7 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import VueDraggableResizable from 'vue-draggable-resizable'
+import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 
 export default {
   name: 'ComponentDisplay',
@@ -47,6 +48,7 @@ export default {
     ...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap']),
     // used in VueDraggableResizeable component
     activeRouteArray () {
+      // console.log('active route array method', this.routes[this.activeRoute])
       return this.routes[this.activeRoute]
     },
     // used to delete components
@@ -58,7 +60,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['setActiveComponent', 'updateOpenModal']),
+    ...mapActions(['setActiveComponent']),
     onResize: function (x, y, width, height) {
       this.activeComponentData.x = x
       this.activeComponentData.y = y
@@ -75,26 +77,54 @@ export default {
     },
     onDeactivated () {
       this.activeComponentData.isActive = false
-    },
-    onDoubleClick (compData) {
-      this.setActiveComponent(compData.componentName)
-      this.activeComponentData.isActive = true
     }
+    //       @dblclick.native="onDoubleClick(componentData)"
+    // onDoubleClick (compData) {
+    //   this.setActiveComponent(compData.componentName)
+    //   this.activeComponentData.isActive = true
+    // }
   }
 }
 </script>
 
 <style scoped>
 .component-display {
-  border: 2px dotted rgb(14, 14, 14);
-  background-color: rgba(242, 234, 228, 0.61);
-  height: 70vh;
-  width: 70vw;
+  /* border: 3px dashed rgb(159, 122, 122); */
+  /* height: 500px; */
+  /* width: 500px; */
+  /* original is 70vh */
+  height: 87vh;
+  width: 100vw;
   position: relative;
+  background-color: rgba(124, 126, 145, 0.44);
+  /* background-color: #269; */
+  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
+  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+  background-image: -webkit-linear-gradient(white 2px, transparent 2px),
+    -webkit-linear-gradient(0, white 2px, transparent 2px),
+    -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
+    -webkit-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
+  background-image: -moz-linear-gradient(white 2px, transparent 2px),
+    -moz-linear-gradient(0, white 2px, transparent 2px),
+    -moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
+    -moz-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
+  background-image: linear-gradient(white 2px, transparent 2px),
+    linear-gradient(90deg, white 2px, transparent 2px),
+    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
+  -pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
+    linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
+    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
+      20px,
+    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
+      20px,
+    #269;
+  behavior: url(/pie/PIE.htc);
 }
 
 .component-box {
   color: white;
-  border: 1px solid salmon;
+  border: 3px dashed rgb(227, 203, 71);
+  background-color: rgba(186, 99, 99, 0.529);
 }
 </style>

src/components/ComponentDisplay.vue

@@ -13,33 +13,25 @@
       >
       </q-input>
     </form>
-
     <div class="icon-container">
       <Icons @getClickedIcon="addToSelectedElementList" />
     </div>
-    <!-- <ChildrenMultiselect /> -->
+    <ParentMultiselect />
     <br />
-    <!-- <button
-      class="button is-primary"
-      id="add-component-btn"
-      @click="handleClick"
-      :disabled="!componentNameInputValue"
-    >Add Component</button> -->
     <q-btn id="add-component-btn" class="primary" color="secondary" label="Create Component" icon-right="add" @click="handleClick" :disabled="!componentNameInputValue" />
   </div>
 </template>
 
 <script>
 import Icons from './Icons'
-// import ChildrenMultiselect from '@/components/ChildrenMultiselect';
+import ParentMultiselect from '../components/ParentMultiselect'
 import { mapState, mapActions } from 'vuex'
-// import * as types from '../store/types.js'
 
 export default {
   name: 'HomeSidebar',
   components: {
-    // ChildrenMultiselect,
-    Icons
+    Icons,
+    ParentMultiselect
   },
   computed: {
     ...mapState(['componentMap', 'selectedElementList']),

src/components/CreateComponent.vue

@@ -0,0 +1,85 @@
+<template>
+  <q-footer reveal elevated class="gradient text-white" :style="{ height: `${height}vh` }">
+    <q-toolbar>
+      <q-btn flat color="subaccentbtn" round @click="openBottomDrawer">
+        <i :class="[open ? down : up]"></i>
+      </q-btn>
+      <q-toolbar-title>Dashboard</q-toolbar-title>
+    </q-toolbar>
+    <q-card>
+      <q-tabs
+        v-model="tab"
+        dense
+        class="bg-subaccent text-white"
+        active-color="secondary"
+        indicator-color="secondary"
+        align="left"
+      >
+        <q-tab name="code" label="Code" />
+        <q-tab name="tree" label="Tree" />
+        <q-tab name="html" label="HTML Elements" />
+      </q-tabs>
+
+      <q-tab-panels v-model="tab" animated class="bg-primary text-white">
+        <q-tab-panel name="code">
+        </q-tab-panel>
+
+        <q-tab-panel name="tree">
+          <Tree />
+        </q-tab-panel>
+
+        <q-tab-panel name="html">
+          <div class="text-h6">HTML Elements</div>HTML Element Component Here
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+  </q-footer>
+</template>
+
+<script>
+import Tree from './Tree'
+// import CodeSnippet from './CodeSnippet'
+
+export default {
+  components: {
+    Tree
+    // CodeSnippet
+  },
+  data () {
+    return {
+      tab: 'code',
+      open: true,
+      height: 35,
+      up: 'fas fa-chevron-up',
+      down: 'fas fa-chevron-down'
+    }
+  },
+  methods: {
+    openBottomDrawer () {
+      this.height === 35 ? (this.height = 6.5) : (this.height = 35)
+      this.open === true ? this.open = false : this.open = true
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.q-footer {
+  // height: 35vh;
+  transition-timing-function: ease-in;
+  transition: 0.2s;
+}
+
+.q-tab-panel {
+  background: rgb(69,77,102);
+  background: linear-gradient(180deg, rgba(69,77,102,1) 0%, rgba(54,60,78,1) 100%);
+}
+
+.q-tab-panels {
+  height: 24vh;
+}
+
+.q-tabs {
+  background: #2c384d;
+}
+</style>