Skip to content

Commit 9182ed5

Browse files
drewngyendrewngyen
committed
master merge dev browser version
2 parents 5109197 + 30a80d3 commit 9182ed5

27 files changed

+3162
-334
lines changed

‎package-lock.json

Lines changed: 1751 additions & 120 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,17 @@
1515
"fs-extra": "^8.1.0",
1616
"localforage": "^1.7.3",
1717
"mousetrap": "^1.6.3",
18+
"prismjs": "^1.16.0",
1819
"quasar": "^1.0.0",
20+
"vue-custom-context-menu": "^3.0.1",
1921
"vue-drag-resize": "^1.3.2",
22+
"vue-draggable-nested-tree": "^2.2.17",
2023
"vue-draggable-resizable": "^2.0.0-rc2",
2124
"vue-loader": "^15.7.0",
2225
"vue-multiselect": "^2.1.6",
26+
"vue-prism-editor": "^0.2.1",
2327
"vued3tree": "^3.7.1",
28+
"vuedraggable": "^2.23.0",
2429
"vuex": "^3.1.1"
2530
},
2631
"devDependencies": {
@@ -35,7 +40,8 @@
3540
"eslint": "^5.10.0",
3641
"eslint-loader": "^2.1.1",
3742
"eslint-plugin-vue": "^5.0.0",
38-
"strip-ansi": "^3.0.1"
43+
"strip-ansi": "^3.0.1",
44+
"vue-cli-plugin-electron-builder": "^1.3.6"
3945
},
4046
"engines": {
4147
"node": ">= 8.9.0",

‎quasar.conf.js

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,31 @@ module.exports = function (ctx) {
4343
'QList',
4444
'QItem',
4545
'QItemSection',
46-
'QItemLabel'
46+
'QItemLabel',
47+
'QExpansionItem',
48+
'QInput',
49+
'QBar',
50+
'QFooter',
51+
'QAvatar',
52+
'QTabs',
53+
'QTab',
54+
'QRouteTab',
55+
'QTabPanels',
56+
'QDialog',
57+
'QSelect',
58+
'QTabPanel',
59+
'QFab',
60+
'QFabAction',
61+
'QMenu',
62+
'QUploader',
63+
'QEditor',
64+
'QCard',
65+
'QChip'
4766
],
4867

4968
directives: [
50-
'Ripple'
69+
'Ripple',
70+
'ClosePopup'
5171
],
5272

5373
// Quasar plugins
@@ -66,6 +86,15 @@ module.exports = function (ctx) {
6686
// analyze: true,
6787
// extractCSS: false,
6888
extendWebpack (cfg) {
89+
//cfg.module.rules.push({
90+
// enforce: 'pre',
91+
// test: /\.(js|vue)$/,
92+
// loader: 'eslint-loader',
93+
// exclude: /node_modules/,
94+
// options: {
95+
// formatter: require('eslint').CLIEngine.getFormatter('stylish')
96+
// }
97+
//})
6998
}
7099
},
71100

‎src/components/ChildrenMultiselect.vue

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<div id="child-select">
3+
<br />
4+
<multiselect
5+
id="dropdown"
6+
placeholder="Select child components"
7+
:multiple="true"
8+
:close-on-select="false"
9+
:options="options"
10+
:value="componentChildrenMultiselectValue"
11+
@input="handleSelect"
12+
:max-height="150"
13+
:option-height="20"
14+
:searchable="false"
15+
></multiselect>
16+
<!-- <q-select
17+
:options="options"
18+
label="Select children"
19+
multiple
20+
/> -->
21+
</div>
22+
</template>
23+
24+
<script>
25+
import { mapState, mapActions } from 'vuex'
26+
import Multiselect from 'vue-multiselect'
27+
28+
export default {
29+
components: {
30+
Multiselect
31+
},
32+
computed: {
33+
...mapState([
34+
'routes',
35+
// comes from store/state/index.js
36+
'componentMap',
37+
'activeComponent',
38+
'componentChildrenMultiselectValue',
39+
'modalOpen'
40+
]),
41+
options () {
42+
const routes = Object.keys(this.routes)
43+
const exceptions = new Set(['App', this.activeComponent, ...routes])
44+
console.log('exceptions', exceptions)
45+
return Object.keys(this.componentMap).filter(component => {
46+
if (!exceptions.has(component)) return component
47+
})
48+
}
49+
},
50+
methods: {
51+
...mapActions([
52+
'updateComponentChildrenMultiselectValue',
53+
'updateActiveComponentChildrenValue'
54+
]),
55+
//
56+
handleSelect (value) {
57+
// if (this.modalOpen) this.updateActiveComponentChildrenValue(value)
58+
console.log('Multiselect: ', value)
59+
this.updateActiveComponentChildrenValue(value)
60+
this.updateComponentChildrenMultiselectValue(value)
61+
}
62+
}
63+
}
64+
</script>
65+
66+
<!-- New step!
67+
Add Multiselect CSS. Can be added as a static asset or inside a component. -->
68+
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
69+
<style scoped>
70+
#child-select {
71+
min-width: 300px;
72+
min-height: 200px;
73+
}
74+
</style>

‎src/components/CodeSnippet.vue

Lines changed: 111 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,127 @@
11
<template>
2-
<div class="snip">
3-
<q-editor
4-
v-model="editor"
5-
:definitions="{
6-
bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}
7-
}"
2+
<div>
3+
<!-- <input type="checkbox" v-model="lineNumbers"> Linenumbers -->
4+
{{ `${activeComponent}.vue` }}
5+
<prism-editor
6+
v-model="code"
7+
language="js"
8+
:line-numbers="lineNumbers"
9+
class="code-editor"
10+
:style="{ height: `${height}vh`}"
11+
readonly="true"
812
/>
913
</div>
1014
</template>
1115

1216
<script>
17+
import { mapState } from 'vuex'
18+
import PrismEditor from 'vue-prism-editor'
19+
import 'prismjs'
20+
import 'prismjs/themes/prism-okaidia.css'
21+
import 'vue-prism-editor/dist/VuePrismEditor.css'
22+
1323
export default {
1424
data () {
1525
return {
16-
editor: 'Here we are overriding the <b>bold</b> command to include a label instead of an icon and also changing its tooltip.'
26+
code: `Select a component`,
27+
lineNumbers: true,
28+
height: null
29+
}
30+
},
31+
components: {
32+
PrismEditor
33+
},
34+
computed: {
35+
// needs access to current component aka activeComponent
36+
...mapState(['componentMap', 'activeComponent'])
37+
},
38+
methods: {
39+
getWindowHeight (e) {
40+
let minHeight =
41+
window.outerHeight < 900 ? 22 : window.outerHeight < 1035 ? 24 : 27.5
42+
this.height = minHeight
43+
},
44+
// calls createTemplate and createBoiler to generate snippet
45+
createCodeSnippet (componentName, children) {
46+
let result = `${this.createTemplate(componentName, children)}${this.createBoiler(componentName, children)}`
47+
//console.log(`createCodeSnippet result: ${result}`)
48+
return result
49+
},
50+
createTemplate (componentName, children) {
51+
let output = ``
52+
// let htmlArr = this.componentMap[compName].htmlList;
53+
output += ` <div>\n`
54+
children.forEach(name => {
55+
output += ` <${name}>\n </${name}>\n`
56+
})
57+
let templateTagStr = this.writeTemplateTag(componentName)
58+
return `<template>\n ${output}${templateTagStr} </div>\n</template>`
59+
},
60+
writeTemplateTag (componentName) {
61+
//console.log('writeTemplateTag invoked!')
62+
// create reference object
63+
const htmlElementMap = {
64+
div: ['<div>', '</div>'],
65+
button: ['<button>', '</button>'],
66+
form: ['<form>', '</form>'],
67+
img: ['<img>', ''],
68+
link: ['<a href="#"/>', ''],
69+
list: ['<li>', '</li>'],
70+
paragraph: ['<p>', '</p>'],
71+
'list-ol': ['<ol>', '</ol>'],
72+
'list-ul': ['<ul>', '</ul>'],
73+
input: ['<input />', ''],
74+
navbar: ['<nav>', '</nav>']
75+
}
76+
// loop to iterate through compName arr
77+
let htmlArr = this.componentMap[componentName].htmlList
78+
let outputStr = ``
79+
for (let el of htmlArr) {
80+
outputStr += ` `
81+
outputStr += htmlElementMap[el.text][0]
82+
outputStr += htmlElementMap[el.text][1]
83+
outputStr += ` \n`
84+
}
85+
//console.log(`outputStr from writeTemplateTag: ${outputStr}`)
86+
return outputStr
87+
},
88+
createBoiler (componentName, children) {
89+
let str = ''
90+
children.forEach(name => {
91+
str += `import ${name} from '@/components/${name}.vue';\n`
92+
})
93+
let childrenComponentNames = ''
94+
children.forEach(name => {
95+
childrenComponentNames += ` ${name},\n`
96+
})
97+
return `\n\n<script>\n${str}\nexport default {\n name: '${componentName}',\n components: {\n${childrenComponentNames} }\n};\n<\/script>\n\n<style scoped>\n</style>`
1798
}
99+
},
100+
mounted () {
101+
// https://vuejs.org/v2/api/#Vue-nextTick
102+
// kinda like a promise, used for the window resize
103+
this.$nextTick(() => {
104+
window.addEventListener('resize', this.getWindowHeight)
105+
106+
this.getWindowHeight()
107+
})
108+
// set code to this new string literal mofo
109+
// this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`
110+
},
111+
// updates code snippet, but broken cause children undefined, shows `function () { [native code] }`
112+
updated () {
113+
//console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
114+
this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`
115+
},
116+
beforeDestroy () {
117+
window.removeEventListener('resize', this.getWindowHeight)
18118
}
19119
}
20120
</script>
21121

22-
<style>
23-
.snip{
24-
height: 150px;
122+
<style lang="stylus" scoped>
123+
// resize handled by vue lifecycle methods
124+
.code-editor {
125+
font-size: 11px;
25126
}
26127
</style>

0 commit comments

Comments
 (0)