Skip to content

Commit b113d60

Browse files
committed
completed merge with updated export functionality
co-authored by: Terry Tilley [email protected]
2 parents 12f355e + ec4e74e commit b113d60

File tree

9 files changed

+374
-320
lines changed

9 files changed

+374
-320
lines changed

package-lock.json

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

src/components/ComponentDisplay.vue

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -148,9 +148,9 @@ export default {
148148
return this.activeComponentObj
149149
},
150150
151-
childList () {
152-
return this.componentMap[componentData.componentName].children
153-
},
151+
// childList () {
152+
// return this.componentMap[componentData.componentName].children
153+
// },
154154
155155
options () {
156156
// checks if component has any parents and pushes them into lineage
@@ -328,13 +328,15 @@ export default {
328328
329329
// unhighlights all inactive components
330330
onActivated (componentData) {
331-
this.$refs.boxes.forEach(element => {
332-
if (element.$attrs.id !== componentData.componentName) {
333-
element.enabled = false
334-
element.$emit('deactivated')
335-
element.$emit('update:active', false)
336-
}
337-
})
331+
if (this.$refs.boxes) {
332+
this.$refs.boxes.forEach(element => {
333+
if (element.$attrs.id !== componentData.componentName) {
334+
element.enabled = false
335+
element.$emit('deactivated')
336+
element.$emit('update:active', false)
337+
}
338+
})
339+
}
338340
if (!(componentData.componentName === this.activeComponent)) {
339341
this.setActiveComponent(componentData.componentName)
340342
}

src/components/dashboard_items/CodeSnippet.vue

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,16 @@ Description:
77

88
<template>
99
<div class="codesnippet-container">
10-
<div class="top-p" v-if="this.activeComponent === ''">Select a component</div>
10+
<div class="top-p" v-if="this.activeComponent === ''">
11+
Select a component
12+
</div>
1113
<div v-else>{{ `${this.activeComponent}.vue` }}</div>
1214
<prism-editor
1315
v-model="code"
1416
language="js"
1517
:line-numbers="lineNumbers"
1618
class="code-editor"
17-
:style="{ height: `${height}vh`}"
19+
:style="{ height: `${height}vh` }"
1820
:readonly="true"
1921
/>
2022
</div>
@@ -91,7 +93,7 @@ export default {
9193
let indented = indent + ' '
9294
let nestedString = ''
9395
94-
childrenArray.forEach(child => {
96+
childrenArray.forEach((child) => {
9597
nestedString += indented
9698
if (!child.text) {
9799
nestedString += `<${child}/>\n`
@@ -103,7 +105,10 @@ export default {
103105
nestedString += indented + htmlElementMap[child.text][1]
104106
nestedString += '\n'
105107
} else {
106-
nestedString += htmlElementMap[child.text][0] + htmlElementMap[child.text][1] + '\n'
108+
nestedString +=
109+
htmlElementMap[child.text][0] +
110+
htmlElementMap[child.text][1] +
111+
'\n'
107112
}
108113
}
109114
})
@@ -126,23 +131,22 @@ export default {
126131
outputStr += htmlElementMap[el.text][1]
127132
outputStr += ` \n`
128133
} else {
129-
outputStr += htmlElementMap[el.text][0] + htmlElementMap[el.text][1] + '\n'
134+
outputStr +=
135+
htmlElementMap[el.text][0] + htmlElementMap[el.text][1] + '\n'
130136
}
131137
}
132138
}
133139
return outputStr
134140
},
135141
// Creates boiler text for <script> and <style>
136142
createBoiler (componentName, children) {
137-
138143
// add import mapstate and mapactions if they exist
139144
let imports = ''
140-
if (this.activeComponentObj.actions.length || this.activeComponentObj.state.length){
145+
if (this.activeComponentObj.actions.length || this.activeComponentObj.state.length) {
141146
imports += 'import { '
142147
if (this.activeComponentObj.actions.length && this.activeComponentObj.state.length) {
143148
imports += 'mapState, mapActions'
144-
}
145-
else if (this.activeComponentObj.state.length) imports += 'mapState'
149+
} else if (this.activeComponentObj.state.length) imports += 'mapState'
146150
else imports += 'mapActions'
147151
imports += ' } from "vuex"\n'
148152
}
@@ -152,15 +156,15 @@ export default {
152156
imports += `import ${name} from '@/components/${name}.vue';\n`
153157
})
154158
155-
// add components section
159+
// add components section
156160
let childrenComponentNames = ''
157-
children.forEach(name => {
161+
children.forEach((name) => {
158162
childrenComponentNames += ` ${name},\n`
159163
})
160164
161165
// if true add data section and populate with props
162166
let data = ''
163-
if (this.activeComponentObj.props.length){
167+
if (this.activeComponentObj.props.length) {
164168
data += ' data () {\n return {'
165169
this.activeComponentObj.props.forEach(prop => {
166170
data += `\n ${prop}: "PLACEHOLDER FOR VALUE",`
@@ -172,10 +176,10 @@ export default {
172176
173177
// if true add computed section and populate with state
174178
let computed = ''
175-
if (this.activeComponentObj.state.length){
179+
if (this.activeComponentObj.state.length) {
176180
computed += ' computed: {'
177181
computed += '\n ...mapState(['
178-
this.activeComponentObj.state.forEach((state) =>{
182+
this.activeComponentObj.state.forEach((state) => {
179183
computed += `\n "${state}",`
180184
})
181185
computed += '\n ]),\n'
@@ -184,7 +188,7 @@ export default {
184188
185189
// if true add methods section and populate with actions
186190
let methods = ''
187-
if (this.activeComponentObj.actions.length){
191+
if (this.activeComponentObj.actions.length) {
188192
methods += ' methods: {'
189193
methods += '\n ...mapActions(['
190194
this.activeComponentObj.actions.forEach((action) => {
@@ -202,12 +206,12 @@ export default {
202206
output += data
203207
output += computed
204208
output += methods
209+
// eslint-disable-next-line no-useless-escape
205210
output += '};\n<\/script>\n\n<style scoped>\n</style>'
206211
// add props/data
207212
208-
209213
// eslint-disable-next-line no-useless-escape
210-
// return `\n\n<script>\n${str}\nexport default {\n name: '${componentName}',\n
214+
// return `\n\n<script>\n${str}\nexport default {\n name: '${componentName}',\n
211215
// components: {\n${childrenComponentNames} }\n};\n<\/script>\n\n<style scoped>\n
212216
// </style>`
213217
return output
@@ -244,7 +248,7 @@ export default {
244248
},
245249
beforeDestroy () {
246250
window.removeEventListener('resize', this.getWindowHeight)
247-
},
251+
}
248252
// watch: {
249253
// activeComponent: {
250254
// handler () {
@@ -275,15 +279,12 @@ export default {
275279

276280
<style lang="stylus" scoped>
277281
// resize handled by vue lifecycle methods
278-
.code-editor {
279-
font-size: 12px;
280-
}
282+
.code-editor
283+
font-size 12px
281284
282-
.codesnippet-container {
283-
margin-bottom: 1rem;
284-
}
285+
.codesnippet-container
286+
margin-bottom 1rem
285287
286-
::-webkit-scrollbar {
287-
display: none;
288-
}
288+
::-webkit-scrollbar
289+
display none
289290
</style>

src/components/dashboard_items/HTMLQueue.vue

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@ Description:
55
-->
66

77
<template>
8-
<section class="home-queue">
8+
<section class="html-queue">
99
<i v-if='this.activeLayer.id !== ""' class="fas fa fa-chevron-up fa-md" @click="setParentLayer"></i>
10-
<span class='list-title' v-if='this.activeLayer.id !== ""'> Viewing Elements in '{{ this.activeComponent }} {{ depth }}' </span>
11-
<span class='list-title' v-else-if='this.activeComponent !==""'> Viewing Elements in '{{ this.activeComponent }}' </span>
12-
<span class='list-title' v-else> Elements in Queue </span>
10+
<span class='list-title' v-if='this.activeLayer.id !== ""'> Viewing Elements in '{{ depth }}' </span>
11+
<span class='list-title' v-else-if='this.activeComponent !==""'> </span>
1312
<hr>
1413
<div
1514
group="people"
@@ -117,7 +116,7 @@ export default {
117116
</script>
118117

119118
<style lang="stylus" scoped>
120-
.home-queue {
119+
.html-queue {
121120
padding-bottom: 40px;
122121
}
123122

src/components/home_sidebar_items/CreateComponent.vue

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@ Description:
33
Handles create component menu on left-side
44
Functionality includes: creating a component, preventing users from entering invalid component file names
55
-->
6-
76
<template>
87
<div class="home-sidebar drawer-menu">
98
<br />
109
<form
1110
v-on:submit.prevent="createComponent"
12-
v-on:click="resetActiveComponent"
1311
>
1412
<q-input
1513
standout="bg-secondary text-white"
1614
bottom-slots
15+
v-on:keyup.delete.stop
1716
v-model="componentNameInputValue"
1817
label="Component Name"
1918
dense
@@ -106,16 +105,11 @@ export default {
106105
}
107106
108107
this.registerComponent(component)
109-
},
110-
111-
// clears active component during component creation
112-
resetActiveComponent () {
113-
if (this.activeComponent !== '') {
114-
this.setActiveComponent('')
115-
}
108+
this.setActiveComponent(component.componentName)
116109
}
117110
}
118111
}
112+
119113
</script>
120114

121115
<style type="stylus" scoped>

0 commit comments

Comments
 (0)