Skip to content

Commit 1cebfef

Browse files
sunhonghaoparissunhonghaoparis
committed
import/export
1 parent 2e0203f commit 1cebfef

File tree

19 files changed

+756
-114
lines changed

19 files changed

+756
-114
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
"@quasar/cli": "^1.3.2",
2929
"@quasar/extras": "^1.12.5",
3030
"@ssthouse/vue3-tree-chart": "^0.2.3",
31+
"bootstrap": "^5.2.0",
32+
"bootstrap-vue": "^2.22.0",
3133
"core-js": "^3.21.1",
3234
"dotenv": "^16.0.0",
3335
"electron-deeplink": "^1.0.10",

‎src/components/Canvas.vue

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<div class="cssContainer" :style="{ 'background-size': `${this.gridLayout[0]}px ${this.gridLayout[1]}px, ${this.gridLayout[0]}px ${this.gridLayout[1]}px` }">
1111
<!-- This is the actual component box -->
1212
<!-- https://www.npmjs.com/package/vue-draggable-resizable -->
13-
<p class="cssContainerText"> CSS Container {{ this.activeComponentObj }}</p>
13+
<p class="cssContainerText"> CSS Container </p>
1414
<!--each component box in canvas will have these properties-->
1515
<!-- !For property :Grid - look into setting it as a store variable/ input variable - no dynamic :grid changing for props- need to implement -->
1616
<vue-draggable-resizable
@@ -35,67 +35,67 @@
3535
:style="{'background-color': componentData.color}"
3636
:parent="true"
3737
>
38-
38+
3939
<div class="component-title">
4040
<p>{{ componentData.componentName }}</p>
4141
</div>
42-
<q-icon v-if="componentData.componentName === this.activeComponent"
43-
size="25px"
44-
z-layer="0"
45-
name="edit_note"
46-
class="compNoteLogo"
47-
@click="handleAddNotes"
42+
<q-icon v-if="componentData.componentName === this.activeComponent"
43+
size="25px"
44+
z-layer="0"
45+
name="edit_note"
46+
class="compNoteLogo"
47+
@click="handleAddNotes"
4848
/>
4949
<!-- Rendering HTML Elements for each Component -->
5050
<div v-for="element in this.componentMap[componentData.componentName].htmlList" :key="element.id+ new Date()">
51-
<div v-if="element.text === 'button'"
51+
<div v-if="element.text === 'button'"
5252
class="htmlButton"
53-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '70%'},
53+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '70%'},
5454
element.y !== 0 ? {'left': element.y + '%'} : {'left': '60%'},
5555
element.w !== 0 ? {'width': element.w + '%'} : {'width': '25%'},
5656
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '10%'},
5757
element.z !== 0 ? {'z-index' : element.z + '%'} : {'z-index' : '0'},
5858
{'background-color': componentData.color}]"
5959
>
60-
<p class="innerHtmlText">{{element.note !== '' ? element.note : element.text}}</p>
60+
<p class="innerHtmlText">{{element.note !== '' ? element.note : element.text}}</p>
6161
</div>
6262
<div v-if="element.text === 'div'"
6363
class="htmlDiv"
64-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '10%'},
64+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '10%'},
6565
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
6666
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
6767
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '75%'},
6868
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
6969
{'background-color': componentData.color}]"
7070
>
71-
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
71+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
7272
</div>sss
7373
<div v-if="element.text === 'footer'" class="htmlFooter"></div>
7474
<div v-if="element.text === 'form'"
7575
class="htmlGeneral"
76-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '50%'},
76+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '50%'},
7777
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
7878
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
7979
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
8080
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
8181
{'background-color': componentData.color}]"
8282
>
83-
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
83+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
8484
</div>
85-
<div v-if="element.text === 'h1'"
85+
<div v-if="element.text === 'h1'"
8686
class="htmlHead"
87-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '10%'},
87+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '10%'},
8888
element.y !== 0 ? {'left': element.y + '%'} : {'left': '5%'},
8989
element.w !== 0 ? {'width': element.w + '%'} : {'width': '90%'},
9090
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '20%'},
9191
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
9292
{'background-color': componentData.color}]"
93-
>
93+
>
9494
<p class="innerHtmlText" style="font-size: 4em">{{element.note !== '' ? element.note :element.text}}</p>
9595
</div>
96-
<div v-if="element.text === 'h2'"
96+
<div v-if="element.text === 'h2'"
9797
class="htmlHead"
98-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '15%'},
98+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '15%'},
9999
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
100100
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
101101
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '15%'},
@@ -104,9 +104,9 @@
104104
>
105105
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
106106
</div>
107-
<div v-if="element.text === 'h3'"
107+
<div v-if="element.text === 'h3'"
108108
class="htmlHead"
109-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '18%'},
109+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '18%'},
110110
element.y !== 0 ? {'left': element.y + '%'} : {'left': '15%'},
111111
element.w !== 0 ? {'width': element.w} + '%' : {'width': '70%'},
112112
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '12%'},
@@ -115,9 +115,9 @@
115115
>
116116
<p class="innerHtmlText" style="font-size: 2.5em">{{element.note !== '' ? element.note : element.text }}</p>
117117
</div>
118-
<div v-if="element.text === 'h4'"
118+
<div v-if="element.text === 'h4'"
119119
class="htmlHead"
120-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
120+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
121121
element.y !== 0 ? {'left': element.y + '%'} : {'left': '20%'},
122122
element.w !== 0 ? {'width': element.w + '%'} : {'width': '60%'},
123123
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '10%'},
@@ -126,9 +126,9 @@
126126
>
127127
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : element.text}}</p>
128128
</div>
129-
<div v-if="element.text === 'h5'"
129+
<div v-if="element.text === 'h5'"
130130
class="htmlHead"
131-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
131+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
132132
element.y !== 0 ? {'left': element.y + '%'} : {'left': '25%'},
133133
element.w !== 0 ? {'width': element.w + '%'} : {'width': '50%'},
134134
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '8%'},
@@ -137,9 +137,9 @@
137137
>
138138
<p class="innerHtmlText" style="font-size: 1.5em">{{element.note !== '' ? element.note : element.text}}</p>
139139
</div>
140-
<div v-if="element.text === 'h6'"
140+
<div v-if="element.text === 'h6'"
141141
class="htmlHead"
142-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
142+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
143143
element.y !== 0 ? {'left': element.y + '%'} : {'left': '30%'},
144144
element.w !== 0 ? {'width': element.w + '%'} : {'width': '40%'},
145145
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '5%'},
@@ -151,30 +151,30 @@
151151
<div v-if="element.text === 'header'" class="htmlHeader"></div>
152152
<div v-if="element.text === 'img'"
153153
class="htmlGeneral"
154-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
154+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
155155
element.y !== 0 ? {'left': element.y + '%'} : {'left': '20%'},
156156
element.w !== 0 ? {'width': element.w + '%'} : {'width': '40%'},
157157
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
158158
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
159159
{'background-color': componentData.color}]"
160160
>
161-
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
161+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
162162
</div>
163163
<input v-if="element.text === 'input'" class="htmlInput"/>
164-
<div v-if="element.text === 'list'"
164+
<div v-if="element.text === 'list'"
165165
class="htmlList"
166-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '30%'},
166+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '30%'},
167167
element.y !== 0 ? {'left': element.y + '%'} : {'left': '30%'},
168168
element.w !== 0 ? {'width': element.w + '%'} : {'width': '60%'},
169169
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '10%'},
170170
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
171171
{'background-color': componentData.color}]"
172172
>
173-
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : element.text}}</p>
173+
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : element.text}}</p>
174174
</div>
175-
<div v-if="element.text === 'list-ol'"
175+
<div v-if="element.text === 'list-ol'"
176176
class="htmlGeneral"
177-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
177+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
178178
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
179179
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
180180
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
@@ -191,7 +191,7 @@
191191
</div>
192192
<div v-if="element.text === 'list-ul'"
193193
class="htmlGeneral"
194-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
194+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
195195
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
196196
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
197197
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
@@ -206,25 +206,25 @@
206206
</ol>
207207
</p>
208208
</div>
209-
<div v-if="element.text === 'paragraph'"
209+
<div v-if="element.text === 'paragraph'"
210210
class="htmlGeneral"
211-
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '50%'},
211+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '50%'},
212212
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
213213
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
214214
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
215215
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
216216
{'background-color': componentData.color}]"
217217
>
218-
<p>{{element.note !== '' ? element.note : element.text }}</p>
218+
<p>{{element.note !== '' ? element.note : element.text }}</p>
219219
</div>
220220
<div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
221221
</div>
222222
<!--change color icon-->
223223
<q-icon v-if="componentData.componentName === this.activeComponent"
224-
size="25px"
225-
z-layer="0"
226-
name="palette"
227-
class="colorLogo"
224+
size="25px"
225+
z-layer="0"
226+
name="palette"
227+
class="colorLogo"
228228
@click="handleEditColor" />
229229
<!-- start of right click on component box function-->
230230
<q-menu context-menu>
@@ -514,7 +514,7 @@ export default {
514514
if (this.activeComponent !== e.target.id) {
515515
if (e.target.parentElement?.classList.contains('draggable')) {
516516
this.setActiveComponent(e.target.parentElement.id)
517-
}
517+
}
518518
else if (typeof `${e.target.id}` !== 'number') {
519519
this.setActiveComponent(e.target.id);
520520
}
@@ -585,6 +585,7 @@ export default {
585585
routeArray: this.routes[this.activeRoute],
586586
activeComponentData: this.activeComponentData,
587587
};
588+
588589
if (
589590
payload.x !== this.initialPosition.x ||
590591
payload.y !== this.initialPosition.y
@@ -611,7 +612,7 @@ export default {
611612
this.activeComponent === element.$attrs.id &&
612613
element.enabled === false
613614
) {
614-
element.enabled = true;
615+
element.enabled = false;
615616
element.$emit("activated");
616617
element.$emit("update:active", true);
617618
}
@@ -630,6 +631,7 @@ export default {
630631
this.activeComponentData.isActive = false;
631632
}
632633
},
634+
633635
// renders modal with Update Children and Layer in it
634636
handleAddNotes() {
635637
if (this.wasDragged === false && this.activeComponent !== '') {

‎src/components/composables/useExportComponent.js

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
export function useExportComponent() {
2-
// OVERVUE 6.0: export active component
2+
// OVERVUE 6.0: export active component
33
/**
44
* @description: makes files, directories and boilerplate when exporting a single Vue component
5-
*
5+
*
66
* @param: none -- uses this.activeComponent from state to create file
77
* @return: none -- outputs file to fs
8-
*
8+
*
99
*/
10-
10+
1111
const showExportComponentDialog = () => {
1212
ipcRenderer
1313
.invoke("exportComponent", {
@@ -18,12 +18,12 @@ export function useExportComponent() {
1818
.then((result) => exportComponentFile(result.filePath))
1919
.catch((err) => console.log(err));
2020
}
21-
21+
2222
/**
2323
* @description: creates component code <template>, <script>, <style>
2424
* invokes writeTemplate, writeScript, writeStyle
2525
*/
26-
26+
2727
const createComponentCode = (componentLocation, componentName, children) => {
2828
fs.writeFileSync(
2929
componentLocation + ".vue",
@@ -57,6 +57,7 @@ export function useExportComponent() {
5757
h4: ["<h4", "</h4>"],
5858
h5: ["<h5", "</h5>"],
5959
h6: ["<h6", "</h6>"],
60+
element:["<el-button", "</el-button>"]
6061
};
6162
// function to loop through nested elements
6263
const writeNested = (childrenArray, indent) => {
@@ -65,7 +66,7 @@ export function useExportComponent() {
6566
}
6667
let indented = indent + " ";
6768
let nestedString = "";
68-
69+
6970
childrenArray.forEach((child) => {
7071
nestedString += indented;
7172
if (!child.text) {
@@ -81,7 +82,7 @@ export function useExportComponent() {
8182
if (child.text === "img" || child.text === "input" || child.text === "link") {
8283
nestedString += "/>";
8384
} else { nestedString += ">"; }
84-
85+
8586
if (child.children.length) {
8687
nestedString += "\n";
8788
nestedString += writeNested(child.children, indented);
@@ -206,7 +207,7 @@ export function useExportComponent() {
206207
data += "\n";
207208
data += " }\n";
208209
data += " },\n";
209-
210+
210211
// if true add computed section and populate with state
211212
let computed = "";
212213
if (currentComponent.state.length) {
@@ -270,10 +271,10 @@ height: ${element.h}px;
270271
z-index: ${element.z};
271272
}\n`
272273
}
273-
})
274-
275-
276-
274+
})
275+
276+
277+
277278

278279

279280
for (const html of htmlArray) {
@@ -304,4 +305,4 @@ z-index: ${html.z};
304305
);
305306
}
306307
showExportComponentDialog();
307-
}
308+
}

0 commit comments

Comments
 (0)