Skip to content

Commit 33e5124

Browse files
jchan444jchan444
committed
updated export
1 parent bd62c6b commit 33e5124

File tree

5 files changed

+125
-77
lines changed

5 files changed

+125
-77
lines changed

‎quasar.conf.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,3 +264,4 @@ module.exports = configure(function (ctx) {
264264
},
265265
};
266266
});
267+
``

‎src/components/composables/useExportComponent.js

Lines changed: 84 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function useExportComponent() {
2727
const createComponentCode = (componentLocation, componentName, children) => {
2828
fs.writeFileSync(
2929
componentLocation + ".vue",
30-
writeComments(componentName) +
30+
// writeComments(componentName) +
3131
writeTemplate(componentName, children) +
3232
writeScript(componentName, children) +
3333
writeStyle(componentName)
@@ -37,26 +37,26 @@ export function useExportComponent() {
3737
const writeTemplateTag = (componentName) => {
3838
// create reference object
3939
const htmlElementMap = {
40-
div: ["<div>", "</div>"],
41-
button: ["<button>", "</button>"],
42-
form: ["<form>", "</form>"],
43-
img: ["<img>", ""],
44-
link: ['<a href="#"/>', ""],
45-
list: ["<li>", "</li>"],
46-
paragraph: ["<p>", "</p>"],
47-
"list-ol": ["<ol>", "</ol>"],
48-
"list-ul": ["<ul>", "</ul>"],
49-
input: ["<input />", ""],
50-
navbar: ["<nav>", "</nav>"],
51-
header:["<header>", "</header>"],
52-
footer:["<footer>", "</footer>"],
53-
meta: ["<meta>", "</meta>"],
54-
h1:["<h1>", "</h1>"],
55-
h2:["<h2>", "</h2>"],
56-
h3:["<h3>", "</h3>"],
57-
h4:["<h4>", "</h4>"],
58-
h5:["<h5>", "</h5>"],
59-
h6:["<h6>", "</h6>"],
40+
div: ["<div", "</div>"],
41+
button: ["<button", "</button>"],
42+
form: ["<form", "</form>"],
43+
img: ["<img", ""], //single
44+
link: ['<a href="#"', ""], //single
45+
list: ["<li", "</li>"],
46+
paragraph: ["<p", "</p>"],
47+
"list-ol": ["<ol", "</ol>"],
48+
"list-ul": ["<ul", "</ul>"],
49+
input: ["<input", ""], //single
50+
navbar: ["<nav", "</nav>"],
51+
header: ["<header", "</header>"],
52+
footer: ["<footer", "</footer>"],
53+
meta: ["<meta", "</meta>"],
54+
h1: ["<h1", "</h1>"],
55+
h2: ["<h2", "</h2>"],
56+
h3: ["<h3", "</h3>"],
57+
h4: ["<h4", "</h4>"],
58+
h5: ["<h5", "</h5>"],
59+
h6: ["<h6", "</h6>"],
6060
};
6161
// function to loop through nested elements
6262
const writeNested = (childrenArray, indent) => {
@@ -65,51 +65,60 @@ export function useExportComponent() {
6565
}
6666
let indented = indent + " ";
6767
let nestedString = "";
68+
6869
childrenArray.forEach((child) => {
6970
nestedString += indented;
7071
if (!child.text) {
7172
nestedString += `<${child}/>\n`;
7273
} else {
74+
nestedString += htmlElementMap[child.text][0];
75+
if (child.class !== "") {
76+
nestedString += " " + "class = " + `"${child.class}"`;
77+
}
78+
if (child.text === "img" || child.text === "input" || child.text === "link") {
79+
nestedString += "/>";
80+
} else { nestedString += ">"; }
81+
7382
if (child.children.length) {
74-
nestedString += htmlElementMap[child.text][0];
7583
nestedString += "\n";
7684
nestedString += writeNested(child.children, indented);
7785
nestedString += indented + htmlElementMap[child.text][1];
7886
nestedString += "\n";
7987
} else {
80-
nestedString +=
81-
htmlElementMap[child.text][0] +
82-
htmlElementMap[child.text][1] +
83-
"\n";
88+
nestedString += htmlElementMap[child.text][1] + "\n";
8489
}
8590
}
8691
});
8792
return nestedString;
8893
}
8994
// iterate through component's htmllist
9095
let htmlArr = this.componentMap[componentName].htmlList;
91-
let outputStr = ``;
92-
// eslint-disable-next-line no-unused-vars
93-
for (let el of htmlArr) {
94-
if (!el.text) {
95-
outputStr += ` <${el}/>\n`;
96-
} else {
96+
let outputStr = ``;
97+
// eslint-disable-next-line no-unused-vars
98+
for (let el of htmlArr) {
99+
if (!el.text) {
100+
outputStr += ` <${el}/>\n`;
101+
} else {
102+
outputStr += ` `;
103+
outputStr += htmlElementMap[el.text][0]
104+
//if conditional to check class
105+
if (el.class !== "") {
106+
outputStr += " " + "class = " + `"${el.class}"`;
107+
}
108+
outputStr += ">";
109+
if (el.children.length) {
110+
outputStr += "\n";
111+
outputStr += writeNested(el.children, ` `);
97112
outputStr += ` `;
98-
if (el.children.length) {
99-
outputStr += htmlElementMap[el.text][0];
100-
outputStr += "\n";
101-
outputStr += writeNested(el.children, ` `);
102-
outputStr += ` `;
103-
outputStr += htmlElementMap[el.text][1];
104-
outputStr += ` \n`;
105-
} else {
106-
outputStr +=
107-
htmlElementMap[el.text][0] + htmlElementMap[el.text][1] + "\n";
108-
}
113+
outputStr += htmlElementMap[el.text][1];
114+
outputStr += ` \n`;
115+
} else {
116+
outputStr += htmlElementMap[el.text][1] + "\n";
109117
}
110118
}
111-
return outputStr;
112119
}
120+
return outputStr;
121+
}
113122

114123
const writeComments = (componentName) => {
115124
if (this.componentMap[componentName]?.noteList?.length > 0){
@@ -128,11 +137,18 @@ export function useExportComponent() {
128137
* also creates the <template></template> tag for each component
129138
*/
130139
const writeTemplate = (componentName, children) => {
131-
let str = "";
132-
str += `<div>\n`;
140+
// let str = "";
141+
// str += `<div>\n`;
133142
// writes the HTML tag boilerplate
134143
let templateTagStr = writeTemplateTag(componentName);
135-
return `<template>\n\t${str}${templateTagStr}\t</div>\n</template>`;
144+
145+
if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id !== "") {
146+
return `<template>\n <div id = "${this.componentMap[componentName].htmlAttributes.id}" class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
147+
} else if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id === "") {
148+
return `<template>\n <div class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
149+
} else if (this.componentMap[componentName].htmlAttributes.class === "" && this.componentMap[componentName].htmlAttributes.id !== "")
150+
return `<template>\n <div id = "${this.componentMap[componentName].htmlAttributes.id}">\n${templateTagStr} </div>\n</template>`;
151+
else return `<template>\n <div>\n${templateTagStr} </div>\n</template>`;
136152
}
137153

138154
/**
@@ -228,7 +244,27 @@ export function useExportComponent() {
228244
* if component is 'App', writes css, else returns <style scoped>
229245
*/
230246
const writeStyle = (componentName) => {
231-
return `\n\n<style scoped>\n</style>`;
247+
let htmlArray = this.componentMap[componentName].htmlList;
248+
let styleString = "";
249+
250+
console.log(this.componentMap[componentName])
251+
if(this.componentMap[componentName].htmlAttributes.class !== "") {
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+
}
258+
259+
for (const html of htmlArray) {
260+
if (html.class === ' ') styleString = "";
261+
if (html.class) {
262+
styleString += `.${html.class} {\n
263+
}\n`
264+
}
265+
}
266+
267+
return `\n <\/script>\n\n<style scoped>\n${styleString}</style >`;
232268
}
233269

234270
const exportComponentFile = (data) => {

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

Lines changed: 37 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -122,26 +122,26 @@ export default {
122122
writeTemplateTag(componentName) {
123123
// create reference object
124124
const htmlElementMap = {
125-
div: ["<div>", "</div>"],
126-
button: ["<button>", "</button>"],
127-
form: ["<form>", "</form>"],
128-
img: ["<img>", ""],
129-
link: ['<a href="#"/>', ""],
130-
list: ["<li>", "</li>"],
131-
paragraph: ["<p>", "</p>"],
132-
"list-ol": ["<ol>", "</ol>"],
133-
"list-ul": ["<ul>", "</ul>"],
134-
input: ["<input />", ""],
135-
navbar: ["<nav>", "</nav>"],
136-
header:["<header>", "</header>"],
137-
footer:["<footer>", "</footer>"],
138-
meta: ["<meta>", "</meta>"],
139-
h1:["<h1>", "</h1>"],
140-
h2:["<h2>", "</h2>"],
141-
h3:["<h3>", "</h3>"],
142-
h4:["<h4>", "</h4>"],
143-
h5:["<h5>", "</h5>"],
144-
h6:["<h6>", "</h6>"],
125+
div: ["<div", "</div>"],
126+
button: ["<button", "</button>"],
127+
form: ["<form", "</form>"],
128+
img: ["<img", ""], //single
129+
link: ['<a href="#"', ""], //single
130+
list: ["<li", "</li>"],
131+
paragraph: ["<p", "</p>"],
132+
"list-ol": ["<ol", "</ol>"],
133+
"list-ul": ["<ul", "</ul>"],
134+
input: ["<input", ""], //single
135+
navbar: ["<nav", "</nav>"],
136+
header: ["<header", "</header>"],
137+
footer: ["<footer", "</footer>"],
138+
meta: ["<meta", "</meta>"],
139+
h1: ["<h1", "</h1>"],
140+
h2: ["<h2", "</h2>"],
141+
h3: ["<h3", "</h3>"],
142+
h4: ["<h4", "</h4>"],
143+
h5: ["<h5", "</h5>"],
144+
h6: ["<h6", "</h6>"],
145145
};
146146
// function to loop through nested elements
147147
function writeNested(childrenArray, indent) {
@@ -150,22 +150,27 @@ export default {
150150
}
151151
let indented = indent + " ";
152152
let nestedString = "";
153+
153154
childrenArray.forEach((child) => {
154155
nestedString += indented;
155156
if (!child.text) {
156157
nestedString += `<${child}/>\n`;
157158
} 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+
158167
if (child.children.length) {
159-
nestedString += htmlElementMap[child.text][0];
160168
nestedString += "\n";
161169
nestedString += writeNested(child.children, indented);
162170
nestedString += indented + htmlElementMap[child.text][1];
163171
nestedString += "\n";
164172
} else {
165-
nestedString +=
166-
htmlElementMap[child.text][0] +
167-
htmlElementMap[child.text][1] +
168-
"\n";
173+
nestedString += htmlElementMap[child.text][1] + "\n";
169174
}
170175
}
171176
});
@@ -180,16 +185,20 @@ export default {
180185
outputStr += ` <${el}/>\n`;
181186
} else {
182187
outputStr += ` `;
188+
outputStr += htmlElementMap[el.text][0]
189+
//if conditional to check class
190+
if (el.class !== "") {
191+
outputStr += " " + "class = " + `"${el.class}"`;
192+
}
193+
outputStr += ">";
183194
if (el.children.length) {
184-
outputStr += htmlElementMap[el.text][0];
185195
outputStr += "\n";
186196
outputStr += writeNested(el.children, ` `);
187197
outputStr += ` `;
188198
outputStr += htmlElementMap[el.text][1];
189199
outputStr += ` \n`;
190200
} else {
191-
outputStr +=
192-
htmlElementMap[el.text][0] + htmlElementMap[el.text][1] + "\n";
201+
outputStr += htmlElementMap[el.text][1] + "\n";
193202
}
194203
}
195204
}

‎src/components/right-sidebar/CodeSnippet.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ export default {
147147
let htmlArr = this.componentMap[componentName].htmlList;
148148
let outputStr = ``;
149149
// eslint-disable-next-line no-unused-vars
150-
for (const el of htmlArr) {
150+
for (let el of htmlArr) {
151151
if (!el.text) {
152152
outputStr += ` <${el}/>\n`;
153153
} else {

‎src/store/mutations.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -567,6 +567,7 @@ const mutations = {
567567
idDrag,
568568
idDrop,
569569
htmlAttributes,
570+
color,
570571
} = payload;
571572
const s = payload.state;
572573
state.componentMap = {
@@ -588,6 +589,7 @@ const mutations = {
588589
idDrag,
589590
idDrop,
590591
htmlAttributes,
592+
color,
591593
},
592594
};
593595
},

0 commit comments

Comments
 (0)