Skip to content

Commit 4134565

Browse files
author
Jaime de Venecia
committed
Fix export project functionality, handle edge cases, fix boilerplate code bugs in Code Preview.
Co-authored by: Janica Abagat [email protected] Trisha Duong [email protected] David Lee [email protected]
1 parent ab13c77 commit 4134565

File tree

2 files changed

+158
-21
lines changed

2 files changed

+158
-21
lines changed

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

Lines changed: 145 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,113 @@ const writeTemplateTag = (componentName: string) => {
235235
h4: ["<h4", "</h4>"],
236236
h5: ["<h5", "</h5>"],
237237
h6: ["<h6", "</h6>"],
238+
239+
// [OverVue v.10.0] Vuetensils elements
240+
VAlert: [
241+
`<VAlert class="info" dismissible`,
242+
`\n\t\t <a href="https://vuetensils.com/components/Alert.html">How to use Alert</a> \n\t\t This is an alert \n\t </VAlert>`,
243+
],
244+
VDate: ["<VDate", ""],
245+
VDialog: [
246+
`<VDialog class="test" :classes="{ bg: 'bg-black-alpha' }"`,
247+
`\n\t\t <template #toggle="{ bind, on }">
248+
<button v-bind="bind" v-on="on">
249+
Show the dialog
250+
</button>
251+
</template>
252+
<div class="color-black bg-white">
253+
This is the dialog content.
254+
</div> \n\t </VDialog>`,
255+
],
256+
VDrawer: [
257+
`<VDrawer transition="slide-right" bg-transition="fade">
258+
<template #toggle="{ bind, on }">
259+
<button v-bind="bind" v-on="on">
260+
Toggle Drawer
261+
</button>
262+
</template`,
263+
`\n\t\t My drawer content\n\t\t</VDrawer>`,
264+
],
265+
VDropdown: [
266+
`<VDropdown text="This is the dropdown."
267+
<div>
268+
<p>Dropdown content</p>
269+
</div`,
270+
`\n </VDropdown>`,
271+
],
272+
VFile: ["<VFile", ""],
273+
VNotifications: ["<VNotifications", ""],
274+
VResize: [
275+
`<VResize>
276+
<template #default="{ width } ">
277+
<div
278+
class="resize-example"
279+
:class="{
280+
lg: width > 500,
281+
md: width > 300 && width < 500,
282+
sm: width < 300,
283+
}"
284+
>
285+
<img src="https://fillmurray.lucidinternets.com/200/200" alt="description" />
286+
<p>This content is {{ width }}px wide.</p>
287+
</div>
288+
</template`,
289+
`\n </VResize>`,
290+
],
291+
VSkip: [
292+
`<div>
293+
<button>click here to focus</button>
294+
295+
<p>Tab to get to the skip component then press enter to skip to main content</p>
296+
297+
<VSkip to="#main">
298+
Skip To Main Content
299+
</VSkip>
300+
301+
<!-- perhaps a nav here -->
302+
<nav>
303+
<ul class="fake-nav">
304+
<li><a href="#">Example 1</a></li>
305+
<li><a href="#">Example 2</a></li>
306+
<li><a href="#">Example 3</a></li>
307+
<li><a href="#">Example 4</a></li>
308+
<li><a href="#">Example 5</a></li>
309+
<li><a href="#">Example 6</a></li>
310+
</ul>
311+
</nav>
312+
313+
<main id="main">
314+
<p>This is the main content section</p>
315+
<p>It could even be a router-link.</p>
316+
<p>We're adding some extra paragraphs here.</p>
317+
<p>Because otherwise the header blocks this content :)</p>
318+
</main`,
319+
`\n </div>`,
320+
],
321+
VTabs: [
322+
`<VTabs class="styled">
323+
<template #tab-1>Tab 1</template>
324+
<template #panel-1>
325+
Here's the content for tabpanel 1.
326+
</template>
327+
328+
<template #tab-2>Tab 2</template>
329+
<template #panel-2>
330+
Here's the content for tabpanel 2.
331+
</template>
332+
333+
<template #tab-3>Tab 3</template>
334+
<template #panel-3>
335+
Here's the content for tabpanel 3.
336+
</template`,
337+
`\n </VTabs>`,
338+
],
339+
VToggle: [
340+
`<VToggle label="Toggle label"`,
341+
`\n\t\tcontent here \n </VToggle>`,
342+
],
343+
344+
// deprecated by OV10.0: Elements+ elements
238345
"e-button": [`<el-button type="info"`, `</el-button>`],
239346
"e-input": ["<el-input", "</el-input>"],
240347
"e-link": [
@@ -300,6 +407,14 @@ const writeTemplateTag = (componentName: string) => {
300407
],
301408
};
302409
410+
// Helper function that recursively iterates through the given html element's children and their children's children.
411+
// also adds proper indentation to code snippet
412+
// add childComponents of the activeCompnent to the htmlElementMap
413+
const childComponents = componentMap.value[activeComponent.value].children;
414+
// childComponents.forEach((child) => {
415+
// htmlElementMap[child] = [`<${child}`, ""]; //single
416+
// });
417+
303418
const writeNested = (childrenArray: HtmlElement[], indent: string) => {
304419
if (!childrenArray.length) {
305420
return "";
@@ -312,7 +427,8 @@ const writeTemplateTag = (componentName: string) => {
312427
if (!child.text) {
313428
nestedString += `<${child}/>\n`;
314429
} else {
315-
nestedString += htmlElementMap[child.text][0];
430+
if (htmlElementMap[child.text])
431+
nestedString += htmlElementMap[child.text][0];
316432
if (child.class !== "") {
317433
nestedString += " " + "class = " + `"${child.class}"`;
318434
}
@@ -322,20 +438,25 @@ const writeTemplateTag = (componentName: string) => {
322438
if (
323439
child.text === "img" ||
324440
child.text === "input" ||
325-
child.text === "link"
441+
child.text === "link" ||
442+
child.text === "VDate" ||
443+
child.text === "VFile" ||
444+
child.text === "VNotifications"
326445
) {
327-
nestedString += "/>";
446+
nestedString += " `/>";
328447
} else {
329448
nestedString += ">";
330449
}
331450
332451
if (child.children.length) {
333452
nestedString += "\n";
334453
nestedString += writeNested(child.children, indented);
335-
nestedString += indented + htmlElementMap[child.text][1];
454+
if (htmlElementMap[child.text])
455+
nestedString += indented + htmlElementMap[child.text][1];
336456
nestedString += "\n";
337457
} else {
338-
nestedString += htmlElementMap[child.text][1] + "\n";
458+
if (htmlElementMap[child.text])
459+
nestedString += htmlElementMap[child.text][1] + "\n";
339460
}
340461
}
341462
});
@@ -351,14 +472,28 @@ const writeTemplateTag = (componentName: string) => {
351472
outputStr += ` <${el}/>\n`;
352473
} else {
353474
outputStr += ` `;
354-
outputStr += htmlElementMap[el.text][0];
475+
if (htmlElementMap[el.text]) outputStr += htmlElementMap[el.text][0];
355476
//if conditional to check class
356477
if (el.class !== "") {
357478
outputStr += " " + "class = " + `"${el.class}"`;
358479
}
359480
if (el.binding !== "") {
360481
outputStr += " " + "v-model = " + `"${el.binding}"`;
361482
}
483+
484+
// add an extra slash at the end for child Components and single tags
485+
if (
486+
childComponents.includes(el.text) ||
487+
el.text === "img" ||
488+
el.text === "input" ||
489+
el.text === "link" ||
490+
el.text === "VDate" ||
491+
el.text === "VFile" ||
492+
el.text === "VNotifications"
493+
) {
494+
outputStr += " /";
495+
}
496+
362497
outputStr += ">";
363498
if (el.note !== "") {
364499
outputStr += `${el.note}`;
@@ -367,10 +502,11 @@ const writeTemplateTag = (componentName: string) => {
367502
outputStr += "\n";
368503
outputStr += writeNested(el.children, ` `);
369504
outputStr += ` `;
370-
outputStr += htmlElementMap[el.text][1];
505+
if (htmlElementMap[el.text]) outputStr += htmlElementMap[el.text][1];
371506
outputStr += ` \n`;
372507
} else {
373-
outputStr += htmlElementMap[el.text][1] + "\n";
508+
if (htmlElementMap[el.text])
509+
outputStr += htmlElementMap[el.text][1] + "\n";
374510
}
375511
}
376512
}
@@ -638,7 +774,7 @@ const writeStyle = (componentName: string) => {
638774
routes.value[componentName].forEach((element) => {
639775
let styleSelector =
640776
element.htmlAttributes.class === ""
641-
? element.htmlList[0].text
777+
? element.htmlList[0]?.text
642778
: "." + element.htmlAttributes.class;
643779
styleString += `${styleSelector} {\n\tbackground-color: ${element.color};
644780
\tgrid-area: ${element.htmlAttributes.gridArea[0]} / ${element.htmlAttributes.gridArea[1]} / ${element.htmlAttributes.gridArea[2]} / ${element.htmlAttributes.gridArea[3]};

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -195,10 +195,11 @@ const writeTemplateTag = (componentName: string, activeComponent: string) => {
195195
`\n\t\t My drawer content\n\t\t</VDrawer>`,
196196
],
197197
VDropdown: [
198-
`<VDropdown text="This is the dropdown."`,
199-
` \n <div>
200-
<p>Dropdown content</p>
201-
<div/> \n\t </VDropdown>`,
198+
`<VDropdown text="This is the dropdown."
199+
<div>
200+
<p>Dropdown content</p>
201+
</div`,
202+
`\n </VDropdown>`,
202203
],
203204
VFile: ["<VFile", ""],
204205
VNotifications: ["<VNotifications", ""],
@@ -372,12 +373,12 @@ const writeTemplateTag = (componentName: string, activeComponent: string) => {
372373
child.text === "img" ||
373374
child.text === "input" ||
374375
child.text === "link" ||
375-
child.text === "date" ||
376-
child.text === "file" ||
377-
child.text === "notifications" ||
376+
child.text === "VDate" ||
377+
child.text === "VFile" ||
378+
child.text === "VNotifications" ||
378379
childComponents.includes(child.text)
379380
) {
380-
nestedString += "/>";
381+
nestedString += " />";
381382
} else {
382383
nestedString += ">";
383384
}
@@ -423,11 +424,11 @@ const writeTemplateTag = (componentName: string, activeComponent: string) => {
423424
el.text === "img" ||
424425
el.text === "input" ||
425426
el.text === "link" ||
426-
el.text === "date" ||
427-
el.text === "file" ||
428-
el.text === "notifications"
427+
el.text === "VDate" ||
428+
el.text === "VFile" ||
429+
el.text === "VNotifications"
429430
) {
430-
outputStr += "/";
431+
outputStr += " /";
431432
}
432433
433434
outputStr += ">";

0 commit comments

Comments
 (0)