Skip to content

Commit f1d3bdf

Browse files
katherinek123katherinek123
committed
merge
1 parent 4bfb58e commit f1d3bdf

File tree

3 files changed

+84
-56
lines changed

3 files changed

+84
-56
lines changed

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

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,12 @@ export default {
126126
if (child.class !== "") {
127127
nestedString += " " + "class = " + `"${child.class}"`;
128128
}
129+
if (child.binding !== "") {
130+
if (child.text !== 'img' || child.text !== 'link') {
131+
nestedString += ` v-model = "${child.binding}"`
132+
133+
}
134+
}
129135
if (child.text === "img" || child.text === "input" || child.text === "link") {
130136
nestedString += "/>";
131137
} else { 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";
@@ -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";
@@ -246,18 +271,19 @@ export default {
246271
let styleString = "";
247272
248273
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`
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

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

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -31,54 +31,55 @@ Description:
3131
<i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1], element[2]])"></i>
3232
</div>
3333
</div>
34+
</div>
35+
36+
<!-- attribute pop-up -->
37+
<q-dialog v-model="attributeModal">
38+
<!-- @update:model-value="setActiveElement" -->
39+
<div class="AttributeBox">
40+
<p class="title">Add attributes to: {{ this.activeComponent }}</p>
41+
<!--attribute child-->
42+
<div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
43+
:key="element.id + Date.now()">
44+
<p v-if="element.id === this.activeHTML">Your class is - {{ element.class }}</p>
45+
<p v-if="element.id === this.activeHTML"> You've binded to - {{ element.binding }}</p>
46+
</div>
47+
<!--attribute child's child-->
48+
<div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
49+
:key="element.id + Date.now()">
50+
<ul v-for="element1 in element.children" :key="element1.id + Date.now()">
51+
<li v-if="element1.id === this.activeHTML">Your class is - {{ element1.class }}</li>
52+
</ul>
53+
</div>
3454

35-
<!-- attribute pop-up -->
36-
<q-dialog v-model="attributeModal">
37-
<!-- @update:model-value="setActiveElement" -->
38-
<div class="AttributeBox">
39-
<p class="title">Add attributes to: {{ this.activeComponent }}</p>
40-
<!--attribute child-->
41-
<div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
42-
:key="element.id + Date.now()">
43-
<p v-if="element.id === this.activeHTML">Your class is - {{ element.class }}</p>
44-
<p v-if="element.id === this.activeHTML"> You've binded to - {{ element.binding }}</p>
45-
</div>
46-
<!--attribute child's child-->
47-
<div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
48-
:key="element.id + Date.now()">
49-
<ul v-for="element1 in element.children" :key="element1.id + Date.now()">
50-
<li v-if="element1.id === this.activeHTML">Your class is - {{ element1.class }}</li>
51-
</ul>
52-
</div>
53-
54-
<div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
55-
:key="element.id + Date.now()">
56-
<ul v-for="element1 in element.children" :key="element1.id + Date.now()">
57-
<li v-if="element1.id === this.activeHTML">You've binded to - {{ element1.binding }}</li>
58-
</ul>
59-
</div>
60-
61-
<div class="formBox">
62-
<q-form autofocus v-on:submit.prevent="submitClass">
63-
<p class="title">Add Class Name:</p>
64-
<q-input label="Add your class here" filled dark autofocus true hide-bottom-space v-model="classText"
65-
@keyup.enter="submitClass"></q-input>
66-
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Submit Attribute"
67-
:disable="classText.length > 0 ? false : true" @click="submitClass(classText, this.activeHTML)" />
68-
</q-form>
69-
<q-form autofocus v-on:submit.prevent="addBinding">
70-
<p class="title">Add Binding:</p>
71-
72-
<q-input label="Add two way binding here" filled dark autofocus true hide-bottom-space
73-
v-model="bindingText" @keyup.enter="addBinding"></q-input>
74-
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Add Binding"
75-
:disable="bindingText.length > 0 ? false : true" @click="addBinding(bindingText, this.activeHTML)">
76-
</q-btn>
77-
</q-form>
78-
<q-btn label="Close" @click="this.openAttributeModal" />
79-
</div>
55+
<div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
56+
:key="element.id + Date.now()">
57+
<ul v-for="element1 in element.children" :key="element1.id + Date.now()">
58+
<li v-if="element1.id === this.activeHTML">You've binded to - {{ element1.binding }}</li>
59+
</ul>
8060
</div>
81-
</q-dialog>
61+
62+
<div class="formBox">
63+
<q-form autofocus v-on:submit.prevent="submitClass">
64+
<p class="title">Add Class Name:</p>
65+
<q-input label="Add your class here" filled dark autofocus true hide-bottom-space v-model="classText"
66+
@keyup.enter="submitClass"></q-input>
67+
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Submit Attribute"
68+
:disable="classText.length > 0 ? false : true" @click="submitClass(classText, this.activeHTML)" />
69+
</q-form>
70+
<q-form autofocus v-on:submit.prevent="addBinding">
71+
<p class="title">Add Binding:</p>
72+
73+
<q-input label="Add two way binding here" filled dark autofocus true hide-bottom-space v-model="bindingText"
74+
@keyup.enter="addBinding"></q-input>
75+
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Add Binding"
76+
:disable="bindingText.length > 0 ? false : true" @click="addBinding(bindingText, this.activeHTML)">
77+
</q-btn>
78+
</q-form>
79+
<q-btn label="Close" @click="this.openAttributeModal" />
80+
</div>
81+
</div>
82+
</q-dialog>
8283
</section>
8384
</template>
8485

‎src/store/mutations.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -366,7 +366,8 @@ const mutations = {
366366
text: payload.elementName,
367367
id: payload.date,
368368
children: [],
369-
class: ''
369+
class: '',
370+
binding: ''
370371
});
371372
},
372373

0 commit comments

Comments
 (0)