Skip to content

Commit d6a2340

Browse files
jchan444jchan444
committed
Fixed import/exports
1 parent e5a0a9f commit d6a2340

File tree

5 files changed

+129
-52
lines changed

5 files changed

+129
-52
lines changed

‎src/components/composables/useExportComponent.js

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@ export function useExportComponent() {
7575
if (child.class !== "") {
7676
nestedString += " " + "class = " + `"${child.class}"`;
7777
}
78+
if(child.binding !== "") {
79+
nestedString += " " + "v-model = " + `"${child.binding}"`;
80+
}
7881
if (child.text === "img" || child.text === "input" || child.text === "link") {
7982
nestedString += "/>";
8083
} else { nestedString += ">"; }
@@ -105,6 +108,9 @@ export function useExportComponent() {
105108
if (el.class !== "") {
106109
outputStr += " " + "class = " + `"${el.class}"`;
107110
}
111+
if (el.binding !== "") {
112+
outputStr += " " + "v-model = " + `"${el.binding}"`;
113+
}
108114
outputStr += ">";
109115
if (el.children.length) {
110116
outputStr += "\n";
@@ -183,15 +189,23 @@ export function useExportComponent() {
183189
});
184190
// if true add data section and populate with props
185191
let data = "";
192+
data += " data () {\n return {";
186193
if (currentComponent.props.length) {
187-
data += " data () {\n return {";
188194
currentComponent.props.forEach((prop) => {
189195
data += `\n ${prop}: "PLACEHOLDER FOR VALUE",`;
190196
});
197+
}
198+
this.routes.HomeView.forEach((element) => {
199+
element.htmlList.forEach((html) => {
200+
if(html.binding !== '') {
201+
data += `\n ${html.binding}: "PLACEHOLDER FOR VALUE",`;
202+
}
203+
})
204+
})
191205
data += "\n";
192206
data += " }\n";
193207
data += " },\n";
194-
}
208+
195209
// if true add computed section and populate with state
196210
let computed = "";
197211
if (currentComponent.state.length) {
@@ -247,22 +261,30 @@ export function useExportComponent() {
247261
let htmlArray = this.componentMap[componentName].htmlList;
248262
let styleString = "";
249263

250-
if(this.componentMap[componentName].htmlAttributes.class !== "") {
251-
console.log(this)
252-
styleString += `.${this.componentMap[componentName].htmlAttributes.class} {\nbackground-color: ${this.componentMap[componentName].color};
253-
width: ${this.componentMap[componentName].w}px;
254-
height: ${this.componentMap[componentName].h}px;
255-
z-index: ${this.componentMap[componentName].z};
256-
}\n`
257-
}
264+
this.routes.HomeView.forEach((element) => {
265+
if(element.htmlAttributes.class !== "") {
266+
styleString += `.${element.htmlAttributes.class} {\nbackground-color: ${element.color};
267+
width: ${element.w}px;
268+
height: ${element.h}px;
269+
z-index: ${element.z};
270+
}\n`
271+
}
272+
})
273+
274+
258275

276+
277+
259278
for (const html of htmlArray) {
260-
if (html.class === ' ') styleString = "";
261-
if (html.class) {
262-
styleString += `.${html.class} {\n
263-
}\n`
279+
if (html.class !== '') {
280+
styleString += `.${html.class} {\nheight: ${html.h}%;
281+
width: ${html.w}%;
282+
top: ${html.x}%;
283+
left: ${html.y}%;
284+
z-index: ${html.z};
285+
}\n`
264286
}
265-
}
287+
}
266288

267289
return `\n\n<style scoped>\n${styleString}</style >`;
268290
}

‎src/components/left-sidebar/ComponentTab/ImportComponent.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ export default {
271271
}
272272
groupingObj[i].children = childrenArray;
273273
} else {
274-
groupingObj[i].children = [];
274+
// groupingObj[i].children = [];
275275
}
276276
}
277277
return groupingObj;

‎src/components/nav-buttons/ExportMenu.vue

Lines changed: 85 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Description:
99
<q-menu class="dropdown" :offset="[0, 15]">
1010
<div class="column items-center">
1111
<p class="center">Export:</p>
12-
<q-btn class="menu-btn" no-caps color="secondary" label="Project" @click="exportProject" />
12+
<q-btn class="menu-btn" no-caps color="secondary" label="Vue Project" @click="exportProject" />
1313
<q-btn class="menu-btn" id="export-component-nav-btn" no-caps color="secondary" label="Active Component"
1414
@click="useExportComponentBound" :disabled="!activeComponent.trim()" />
1515
</div>
@@ -152,28 +152,31 @@ export default {
152152
let nestedString = "";
153153
154154
childrenArray.forEach((child) => {
155-
nestedString += indented;
156-
if (!child.text) {
157-
nestedString += `<${child}/>\n`;
158-
} else {
159-
nestedString += htmlElementMap[child.text][0];
160-
if (child.class !== "") {
161-
nestedString += " " + "class = " + `"${child.class}"`;
162-
}
163-
if (child.text === "img" || child.text === "input" || child.text === "link") {
164-
nestedString += "/>";
165-
} else { nestedString += ">"; }
166-
167-
if (child.children.length) {
168-
nestedString += "\n";
169-
nestedString += writeNested(child.children, indented);
170-
nestedString += indented + htmlElementMap[child.text][1];
171-
nestedString += "\n";
155+
nestedString += indented;
156+
if (!child.text) {
157+
nestedString += `<${child}/>\n`;
172158
} else {
173-
nestedString += htmlElementMap[child.text][1] + "\n";
159+
nestedString += htmlElementMap[child.text][0];
160+
if (child.class !== "") {
161+
nestedString += " " + "class = " + `"${child.class}"`;
162+
}
163+
if(child.binding !== "") {
164+
nestedString += " " + "v-model = " + `"${child.binding}"`;
165+
}
166+
if (child.text === "img" || child.text === "input" || child.text === "link") {
167+
nestedString += "/>";
168+
} else { nestedString += ">"; }
169+
170+
if (child.children.length) {
171+
nestedString += "\n";
172+
nestedString += writeNested(child.children, indented);
173+
nestedString += indented + htmlElementMap[child.text][1];
174+
nestedString += "\n";
175+
} else {
176+
nestedString += htmlElementMap[child.text][1] + "\n";
177+
}
174178
}
175-
}
176-
});
179+
});
177180
return nestedString;
178181
}
179182
// iterate through component's htmllist
@@ -190,6 +193,9 @@ export default {
190193
if (el.class !== "") {
191194
outputStr += " " + "class = " + `"${el.class}"`;
192195
}
196+
if (el.binding !== "") {
197+
outputStr += " " + "v-model = " + `"${el.binding}"`;
198+
}
193199
outputStr += ">";
194200
if (el.children.length) {
195201
outputStr += "\n";
@@ -223,6 +229,7 @@ export default {
223229
*/
224230
writeTemplate(componentName, children) {
225231
let str = "";
232+
226233
if (componentName === "App") {
227234
str += `<div id="app">\n\t\t<div id="nav">\n`;
228235
children.forEach((name) => {
@@ -233,12 +240,19 @@ export default {
233240
}
234241
});
235242
str += "\t\t\t<router-view></router-view>\n\t\t</div>\n";
236-
} else {
237-
str += `<div>\n`;
238243
}
239244
// writes the HTML tag boilerplate
240245
let templateTagStr = this.writeTemplateTag(componentName);
241-
return `<template>\n\t${str}${templateTagStr}\t</div>\n</template>`;
246+
247+
if(this.componentMap[componentName].htmlAttributes) {
248+
if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id !== "") {
249+
return `<template>\n <div id = "${this.componentMap[componentName].htmlAttributes.id}" class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
250+
} else if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id === "") {
251+
return `<template>\n <div class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
252+
} else if (this.componentMap[componentName].htmlAttributes.class === "" && this.componentMap[componentName].htmlAttributes.id !== "")
253+
return `<template>\n <div id = "${this.componentMap[componentName].htmlAttributes.id}">\n${templateTagStr} </div>\n</template>`;
254+
else return `<template>\n <div>\n\t${str}${templateTagStr} </div>\n</template>`;
255+
} else return `<template>\n <div>\n\t${str}${templateTagStr} </div>\n</template>`
242256
},
243257
/**
244258
* @description imports child components into <script>
@@ -277,15 +291,23 @@ export default {
277291
});
278292
// if true add data section and populate with props
279293
let data = "";
294+
data += " data () {\n return {";
280295
if (currentComponent.props.length) {
281-
data += " data () {\n return {";
282296
currentComponent.props.forEach((prop) => {
283297
data += `\n ${prop}: "PLACEHOLDER FOR VALUE",`;
284298
});
299+
}
300+
this.routes.HomeView.forEach((element) => {
301+
element.htmlList.forEach((html) => {
302+
if(html.binding !== '') {
303+
data += `\n ${html.binding}: "PLACEHOLDER FOR VALUE",`;
304+
}
305+
})
306+
})
285307
data += "\n";
286308
data += " }\n";
287309
data += " },\n";
288-
}
310+
289311
// if true add computed section and populate with state
290312
let computed = "";
291313
if (currentComponent.state.length) {
@@ -331,6 +353,7 @@ export default {
331353
return output;
332354
} else {
333355
let str = "";
356+
334357
children.forEach((name) => {
335358
str += `import ${name} from '@/components/${name}.vue';\n`;
336359
});
@@ -350,12 +373,37 @@ export default {
350373
* if component is 'App', writes css, else returns <style scoped>
351374
*/
352375
writeStyle(componentName) {
353-
let style =
354-
componentName !== "App"
355-
? ""
356-
: `#app {\n\tfont-family: 'Avenir', Helvetica, Arial, sans-serif;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\ttext-align: center;\n\tcolor: #2C3E50;\n\tmargin-top: 60px;\n}\n`;
357-
return `\n\n<style scoped>\n${style}</style>`;
376+
let htmlArray = this.componentMap[componentName].htmlList;
377+
let styleString = "";
378+
379+
this.routes.HomeView.forEach((element) => {
380+
if(element.htmlAttributes.class !== "") {
381+
styleString += `.${element.htmlAttributes.class} {\nbackground-color: ${element.color};
382+
width: ${element.w}px;
383+
height: ${element.h}px;
384+
z-index: ${element.z};
385+
}\n`
386+
}
387+
})
388+
389+
390+
391+
392+
393+
for (const html of htmlArray) {
394+
if (html.class !== '') {
395+
styleString += `.${html.class} {\nheight: ${html.h}%;
396+
width: ${html.w}%;
397+
top: ${html.x}%;
398+
left: ${html.y}%;
399+
z-index: ${html.z};
400+
}\n`
401+
}
402+
}
403+
404+
return `\n\n<style scoped>\n${styleString}</style >`;
358405
},
406+
359407
// creates index html
360408
createIndexFile(location) {
361409
let str = `<!DOCTYPE html>\n<html lang="en">\n\n<head>`;
@@ -617,4 +665,10 @@ export default {
617665
#export-component-nav-btn {
618666
margin-bottom: 20px;
619667
}
668+
669+
.menu-btn{
670+
width: 60%;
671+
margin: 10px 0px;
672+
max-height: 55px !important;
673+
}
620674
</style>

‎src/components/nav-buttons/ImportMenu.vue

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ Description:
99
<q-menu :offset="[0, 15]" class="dropdown">
1010
<div class="column items-center">
1111
<p class="center">Import:</p>
12-
<q-btn class="menu-btn" no-caps color="secondary" label="Project JSON" @click="openProjectJSON"/>
13-
<ImportComponent class="import-comp menu-btn" no-caps title="Vue Component"/>
12+
<q-btn class="menu-btn" no-caps color="secondary" label="Project JSON" @click="openProjectJSON"/>
13+
<ImportComponent class="import-comp menu-btn" no-caps title="Vue Component (coming soon)" :disable = "true"/>
1414
</div>
1515
</q-menu>
1616

@@ -69,13 +69,14 @@ export default {
6969
margin-right: 0.2rem;
7070
}
7171
.menu-btn{
72-
width: 80%;
72+
width: 70%;
7373
margin: 10px 0px;
74-
max-height: 36px !important;
74+
max-height: 50px !important;
7575
}
7676
7777
.import-comp{
7878
width: 80% !important;
7979
margin: 10px 0 20px 0 !important;
8080
}
81+
8182
</style>

‎src/css/quasar.variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
// **************** Taken from OverVue *******************
2828
$primary : #737578;
29-
$secondary : #42B883;
29+
$secondary : #a349be;
3030
$accent : #a1ddc2;
3131
$subaccent : #0d0d0d;
3232
$subaccentbtn : #2c384d;

0 commit comments

Comments
 (0)