@@ -7,14 +7,16 @@ Description:
7
7
8
8
<template >
9
9
<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 >
11
13
<div v-else >{{ `${this.activeComponent}.vue` }}</div >
12
14
<prism-editor
13
15
v-model =" code"
14
16
language =" js"
15
17
:line-numbers =" lineNumbers"
16
18
class =" code-editor"
17
- :style =" { height: `${height}vh`}"
19
+ :style =" { height: `${height}vh` }"
18
20
:readonly =" true"
19
21
/>
20
22
</div >
@@ -91,7 +93,7 @@ export default {
91
93
let indented = indent + ' '
92
94
let nestedString = ' '
93
95
94
- childrenArray .forEach (child => {
96
+ childrenArray .forEach (( child ) => {
95
97
nestedString += indented
96
98
if (! child .text ) {
97
99
nestedString += ` <${ child} />\n `
@@ -103,7 +105,10 @@ export default {
103
105
nestedString += indented + htmlElementMap[child .text ][1 ]
104
106
nestedString += ' \n '
105
107
} 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 '
107
112
}
108
113
}
109
114
})
@@ -126,23 +131,22 @@ export default {
126
131
outputStr += htmlElementMap[el .text ][1 ]
127
132
outputStr += ` \n `
128
133
} else {
129
- outputStr += htmlElementMap[el .text ][0 ] + htmlElementMap[el .text ][1 ] + ' \n '
134
+ outputStr +=
135
+ htmlElementMap[el .text ][0 ] + htmlElementMap[el .text ][1 ] + ' \n '
130
136
}
131
137
}
132
138
}
133
139
return outputStr
134
140
},
135
141
// Creates boiler text for <script> and <style>
136
142
createBoiler (componentName , children ) {
137
-
138
143
// add import mapstate and mapactions if they exist
139
144
let imports = ' '
140
- if (this .activeComponentObj .actions .length || this .activeComponentObj .state .length ){
145
+ if (this .activeComponentObj .actions .length || this .activeComponentObj .state .length ) {
141
146
imports += ' import { '
142
147
if (this .activeComponentObj .actions .length && this .activeComponentObj .state .length ) {
143
148
imports += ' mapState, mapActions'
144
- }
145
- else if (this .activeComponentObj .state .length ) imports += ' mapState'
149
+ } else if (this .activeComponentObj .state .length ) imports += ' mapState'
146
150
else imports += ' mapActions'
147
151
imports += ' } from "vuex"\n '
148
152
}
@@ -152,15 +156,15 @@ export default {
152
156
imports += ` import ${ name} from '@/components/${ name} .vue';\n `
153
157
})
154
158
155
- // add components section
159
+ // add components section
156
160
let childrenComponentNames = ' '
157
- children .forEach (name => {
161
+ children .forEach (( name ) => {
158
162
childrenComponentNames += ` ${ name} ,\n `
159
163
})
160
164
161
165
// if true add data section and populate with props
162
166
let data = ' '
163
- if (this .activeComponentObj .props .length ){
167
+ if (this .activeComponentObj .props .length ) {
164
168
data += ' data () {\n return {'
165
169
this .activeComponentObj .props .forEach (prop => {
166
170
data += ` \n ${ prop} : "PLACEHOLDER FOR VALUE",`
@@ -172,10 +176,10 @@ export default {
172
176
173
177
// if true add computed section and populate with state
174
178
let computed = ' '
175
- if (this .activeComponentObj .state .length ){
179
+ if (this .activeComponentObj .state .length ) {
176
180
computed += ' computed: {'
177
181
computed += ' \n ...mapState(['
178
- this .activeComponentObj .state .forEach ((state ) => {
182
+ this .activeComponentObj .state .forEach ((state ) => {
179
183
computed += ` \n "${ state} ",`
180
184
})
181
185
computed += ' \n ]),\n '
@@ -184,7 +188,7 @@ export default {
184
188
185
189
// if true add methods section and populate with actions
186
190
let methods = ' '
187
- if (this .activeComponentObj .actions .length ){
191
+ if (this .activeComponentObj .actions .length ) {
188
192
methods += ' methods: {'
189
193
methods += ' \n ...mapActions(['
190
194
this .activeComponentObj .actions .forEach ((action ) => {
@@ -202,12 +206,12 @@ export default {
202
206
output += data
203
207
output += computed
204
208
output += methods
209
+ // eslint-disable-next-line no-useless-escape
205
210
output += ' };\n <\/ script>\n\n <style scoped>\n </style>'
206
211
// add props/data
207
212
208
-
209
213
// 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
211
215
// components: {\n${childrenComponentNames} }\n};\n<\/script>\n\n<style scoped>\n
212
216
// </style>`
213
217
return output
@@ -244,7 +248,7 @@ export default {
244
248
},
245
249
beforeDestroy () {
246
250
window .removeEventListener (' resize' , this .getWindowHeight )
247
- },
251
+ }
248
252
// watch: {
249
253
// activeComponent: {
250
254
// handler () {
@@ -275,15 +279,12 @@ export default {
275
279
276
280
<style lang="stylus" scoped>
277
281
// resize handled by vue lifecycle methods
278
- .code-editor {
279
- font-size : 12px ;
280
- }
282
+ .code-editor
283
+ font-size 12px
281
284
282
- .codesnippet-container {
283
- margin-bottom : 1rem ;
284
- }
285
+ .codesnippet-container
286
+ margin-bottom 1rem
285
287
286
- :: -webkit-scrollbar {
287
- display : none ;
288
- }
288
+ :: -webkit-scrollbar
289
+ display none
289
290
</style >
0 commit comments