Skip to content

Commit 68a7f4d

Browse files
keylakoizuminkeylakoizumin
authored
Merge pull request #15 from oslabs-beta/revert-14-katherine/vbinding
Revert "Katherine/vbinding"
2 parents d6a6e34 + 02e4885 commit 68a7f4d

File tree

9 files changed

+299
-329
lines changed

9 files changed

+299
-329
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
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",
3231
"fs-extra": "^10.0.0",
3332
"http": "^0.0.1-security",
3433
"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: 13 additions & 12 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,21 +44,22 @@ 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+
6263
if (!this.componentMap[component.componentName]) {
6364
this.registerComponent(component);
6465
this.setActiveComponent(component.componentName);

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

Lines changed: 27 additions & 41 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,13 +124,7 @@ export default {
124124
} else {
125125
nestedString += htmlElementMap[child.text][0];
126126
if (child.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-
}
127+
nestedString += " " + "class = " + `"${el.class}"`;
134128
}
135129
if (child.text === "img" || child.text === "input" || child.text === "link") {
136130
nestedString += "/>";
@@ -163,9 +157,6 @@ export default {
163157
if (el.class !== "") {
164158
outputStr += " " + "class = " + `"${el.class}"`;
165159
}
166-
if (el.binding !== "") {
167-
outputStr += ` v-model = "${el.binding}"`
168-
}
169160
outputStr += ">";
170161
if (el.children.length) {
171162
outputStr += "\n";
@@ -214,7 +205,7 @@ export default {
214205
children.forEach((name) => {
215206
childrenComponentNames += ` ${name},\n`;
216207
});
217-
console.log("lets look at data", this.componentMap[this.activeComponent])
208+
218209
// if true add data section and populate with props
219210
let data = "";
220211
if (this.componentMap[this.activeComponent].props.length) {
@@ -226,30 +217,14 @@ export default {
226217
data += " }\n";
227218
data += " },\n";
228219
}
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-
245220
246221
// if true add computed section and populate with state
247222
let computed = "";
248223
if (this.componentMap[this.activeComponent].state.length) {
249224
computed += " computed: {";
250225
computed += "\n ...mapState([";
251226
this.componentMap[this.activeComponent].state.forEach((state) => {
252-
computed += `\n "${state}", `;
227+
computed += `\n "${state}",`;
253228
});
254229
computed += "\n ]),\n";
255230
computed += " },\n";
@@ -261,7 +236,7 @@ export default {
261236
methods += " methods: {";
262237
methods += "\n ...mapActions([";
263238
this.componentMap[this.activeComponent].actions.forEach((action) => {
264-
methods += `\n "${action}", `;
239+
methods += `\n "${action}",`;
265240
});
266241
methods += "\n ]),\n";
267242
methods += " },\n";
@@ -270,20 +245,19 @@ export default {
270245
let htmlArray = this.componentMap[componentName].htmlList;
271246
let styleString = "";
272247
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`
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`
279254
}
280255
281256
for (const html of htmlArray) {
282257
if (html.class === ' ') styleString = "";
283258
if (html.class) {
284-
styleString += `.${html.class} {
285-
\n
286-
} \n`
259+
styleString += `.${html.class} {\n
260+
}\n`
287261
}
288262
}
289263
@@ -375,5 +349,17 @@ export default {
375349
.prism-editor__textarea:focus {
376350
outline: none;
377351
}
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+
378364
</style>
379365

0 commit comments

Comments
 (0)