Skip to content

Commit d6a6e34

Browse files
jchan444jchan444
authored
Merge pull request #14 from oslabs-beta/katherine/vbinding
Katherine/vbinding
2 parents 2b0e819 + 0259939 commit d6a6e34

File tree

9 files changed

+329
-299
lines changed

9 files changed

+329
-299
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@ssthouse/vue3-tree-chart": "^0.2.3",
2929
"core-js": "^3.21.1",
3030
"dotenv": "^16.0.0",
31+
"electron-deeplink": "^1.0.10",
3132
"fs-extra": "^10.0.0",
3233
"http": "^0.0.1-security",
3334
"https": "^1.0.0",

‎src-electron/electron-main.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { app, BrowserWindow, nativeTheme, dialog, ipcMain } from "electron";
2-
// import { Deeplink } from "electron-deeplink";
2+
import { Deeplink } from "electron-deeplink";
33
import isDev from "electron-is-dev";
44
import path from "path";
55
import os from "os";
@@ -19,7 +19,7 @@ try {
1919
path.join(app.getPath("userData"), "DevTools Extensions")
2020
);
2121
}
22-
} catch (_) {}
22+
} catch (_) { }
2323

2424
let mainWindow;
2525
// Added

‎src/components/composables/useCreateComponent.js

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
export function useCreateComponent(importObj) {
22
const createComponent = (importObj) => {
33
let imported = false;
4-
if (importObj.hasOwnProperty('componentName')){
4+
if (importObj.hasOwnProperty('componentName')) {
55
imported = true;
66
//Check if state and actions on import exist in the store. If not, add them.
7-
for (let i = 0; i < importObj.actions.length; i++){
8-
if (!this.userActions.includes(importObj.actions[i])){
7+
for (let i = 0; i < importObj.actions.length; i++) {
8+
if (!this.userActions.includes(importObj.actions[i])) {
99
this.createAction(importObj.actions[i])
1010
}
1111
}
12-
for (let i = 0; i < importObj.state.length; i++){
13-
if (!this.userState.includes(importObj.state[i])){
12+
for (let i = 0; i < importObj.state.length; i++) {
13+
if (!this.userState.includes(importObj.state[i])) {
1414
this.createState(importObj.state[i])
1515
}
1616
}
17-
for (let i = 0; i < importObj.props.length; i++){
18-
if (!this.userProps.includes(importObj.props[i])){
17+
for (let i = 0; i < importObj.props.length; i++) {
18+
if (!this.userProps.includes(importObj.props[i])) {
1919
this.createProp(importObj.props[i])
2020
}
2121
}
@@ -44,22 +44,21 @@ export function useCreateComponent(importObj) {
4444
idDrag: '',
4545
idDrop: '',
4646
color: "#ffffff85",
47-
htmlAttributes:{
48-
class:"",
49-
id:"",
47+
htmlAttributes: {
48+
class: "",
49+
id: ""
5050
}
5151
};
5252

53-
if (imported === true){
53+
if (imported === true) {
5454
component.componentName = importObj.componentName;
5555
component.htmlList = importObj.htmlList;
5656
component.actions = importObj.actions;
5757
component.state = importObj.state;
5858
component.props = importObj.props;
5959
} else {
60-
component.componentName = this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi,"");
60+
component.componentName = this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, "");
6161
}
62-
6362
if (!this.componentMap[component.componentName]) {
6463
this.registerComponent(component);
6564
this.setActiveComponent(component.componentName);

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

Lines changed: 41 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,10 @@ export default {
7979
if (this.activeComponentObj.htmlAttributes.class !== "" && this.activeComponentObj.htmlAttributes.id !== "") {
8080
return `<template>\n <div id = "${this.activeComponentObj.htmlAttributes.id}" class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
8181
} else if (this.activeComponentObj.htmlAttributes.class !== "" && this.activeComponentObj.htmlAttributes.id === "") {
82-
return `<template>\n <div class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
82+
return `<template>\n <div class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
8383
} else if (this.activeComponentObj.htmlAttributes.class === "" && this.activeComponentObj.htmlAttributes.id !== "")
84-
return `<template>\n <div id = "${this.activeComponentObj.htmlAttributes.id}">\n${templateTagStr} </div>\n</template>`;
85-
else return `<template>\n <div>\n${templateTagStr} </div>\n</template>`;
84+
return `<template>\n <div id = "${this.activeComponentObj.htmlAttributes.id}">\n${templateTagStr} </div>\n</template>`;
85+
else return `<template>\n <div>\n${templateTagStr} </div>\n</template>`;
8686
},
8787
// Creates <template> boilerplate
8888
writeTemplateTag(componentName) {
@@ -124,7 +124,13 @@ export default {
124124
} else {
125125
nestedString += htmlElementMap[child.text][0];
126126
if (child.class !== "") {
127-
nestedString += " " + "class = " + `"${el.class}"`;
127+
nestedString += " " + "class = " + `"${child.class}"`;
128+
}
129+
if (child.binding !== "") {
130+
if (child.text !== 'img' || child.text !== 'link') {
131+
nestedString += ` v-model = "${child.binding}"`
132+
133+
}
128134
}
129135
if (child.text === "img" || child.text === "input" || child.text === "link") {
130136
nestedString += "/>";
@@ -157,6 +163,9 @@ export default {
157163
if (el.class !== "") {
158164
outputStr += " " + "class = " + `"${el.class}"`;
159165
}
166+
if (el.binding !== "") {
167+
outputStr += ` v-model = "${el.binding}"`
168+
}
160169
outputStr += ">";
161170
if (el.children.length) {
162171
outputStr += "\n";
@@ -205,7 +214,7 @@ export default {
205214
children.forEach((name) => {
206215
childrenComponentNames += ` ${name},\n`;
207216
});
208-
217+
console.log("lets look at data", this.componentMap[this.activeComponent])
209218
// if true add data section and populate with props
210219
let data = "";
211220
if (this.componentMap[this.activeComponent].props.length) {
@@ -217,14 +226,30 @@ export default {
217226
data += " }\n";
218227
data += " },\n";
219228
}
229+
const htmlBinding = this.componentMap[this.activeComponent].htmlList
230+
console.log('htmlbinding', htmlBinding.binding)
231+
console.log('2', htmlBinding)
232+
// if (htmlBinding.forEach) {
233+
234+
// }
235+
236+
data += " data () {\n return {\n"
237+
htmlBinding.forEach(el => {
238+
if (el.binding !== '') {
239+
data += ` "${el.binding}": "PLACEHOLDER FOR VALUE", `
240+
data += '\n'
241+
}
242+
})
243+
data += ` \n } \n `
244+
220245
221246
// if true add computed section and populate with state
222247
let computed = "";
223248
if (this.componentMap[this.activeComponent].state.length) {
224249
computed += " computed: {";
225250
computed += "\n ...mapState([";
226251
this.componentMap[this.activeComponent].state.forEach((state) => {
227-
computed += `\n "${state}",`;
252+
computed += `\n "${state}", `;
228253
});
229254
computed += "\n ]),\n";
230255
computed += " },\n";
@@ -236,7 +261,7 @@ export default {
236261
methods += " methods: {";
237262
methods += "\n ...mapActions([";
238263
this.componentMap[this.activeComponent].actions.forEach((action) => {
239-
methods += `\n "${action}",`;
264+
methods += `\n "${action}", `;
240265
});
241266
methods += "\n ]),\n";
242267
methods += " },\n";
@@ -245,19 +270,20 @@ export default {
245270
let htmlArray = this.componentMap[componentName].htmlList;
246271
let styleString = "";
247272
248-
if(this.activeComponentObj.htmlAttributes.class !== "") {
249-
styleString += `.${this.activeComponentObj.htmlAttributes.class} {\nbackground-color: ${this.activeComponentObj.color};
250-
width: ${this.activeComponentObj.w}px;
251-
height: ${this.activeComponentObj.h}px;
252-
z-index: ${this.activeComponentObj.z};
253-
}\n`
273+
if (this.activeComponentObj.htmlAttributes.class !== "") {
274+
styleString += `.${this.activeComponentObj.htmlAttributes.class} { \nbackground- color: ${this.activeComponentObj.color};
275+
width: ${this.activeComponentObj.w} px;
276+
height: ${this.activeComponentObj.h} px;
277+
z - index: ${this.activeComponentObj.z};
278+
} \n`
254279
}
255280
256281
for (const html of htmlArray) {
257282
if (html.class === ' ') styleString = "";
258283
if (html.class) {
259-
styleString += `.${html.class} {\n
260-
}\n`
284+
styleString += `.${html.class} {
285+
\n
286+
} \n`
261287
}
262288
}
263289
@@ -349,17 +375,5 @@ z-index: ${this.activeComponentObj.z};
349375
.prism-editor__textarea:focus {
350376
outline: none;
351377
}
352-
353-
.refreshCode {
354-
position:absolute;
355-
background-color:black;
356-
color: $secondary;
357-
bottom:96%;
358-
right:5%;
359-
}
360-
.refreshCode:hover {
361-
cursor:pointer;
362-
}
363-
364378
</style>
365379

0 commit comments

Comments
 (0)