Skip to content

Commit dbb5e4a

Browse files
rstoenescurstoenescu
committed
Merge branch 'ui-mutation' into dev
2 parents 367f973 + 34d4e6b commit dbb5e4a

File tree

12 files changed

+779
-0
lines changed

12 files changed

+779
-0
lines changed

‎docs/src/assets/menu.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -613,6 +613,11 @@ const directives = [
613613
name: 'Material Ripples',
614614
path: 'material-ripple'
615615
},
616+
{
617+
name: 'Mutation',
618+
badge: 'new',
619+
path: 'mutation'
620+
},
616621
{
617622
name: 'Scroll',
618623
path: 'scroll'

‎docs/src/examples/Mutation/Attributes.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div class="q-pa-md">
3+
</div>
4+
</template>
5+
6+
<script>
7+
export default {
8+
}
9+
</script>

‎docs/src/examples/Mutation/CatchAll.vue‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="row justify-around items-center q-pb-lg">
4+
<q-btn label="Add row" @click="addRow" />
5+
<q-btn label="Remove row" @click="removeRow" />
6+
</div>
7+
<div class="row">
8+
<div v-mutation="handler" class="col-4">
9+
<q-list v-if="listItems.length > 0" bordered separator>
10+
<q-item v-for="item in listItems" :key="item">
11+
<q-item-section>
12+
{{ item }}
13+
</q-item-section>
14+
</q-item>
15+
</q-list>
16+
</div>
17+
<div class="col-8">
18+
<q-card v-if="mutationInfo.length > 0">
19+
<q-card-section>
20+
<pre class="doc-code language-markup">
21+
<code class="doc-code__inner language-markup">{{ mutationInfo }}</code>
22+
</pre>
23+
</q-card-section>
24+
</q-card>
25+
</div>
26+
27+
</div>
28+
</div>
29+
</template>
30+
31+
<script>
32+
function domToObj (domEl, whitelist) {
33+
let obj = {}
34+
for (let i = 0; i < whitelist.length; i++) {
35+
if (domEl[whitelist[i]] instanceof NodeList) {
36+
obj[whitelist[i]] = Array.from(domEl[whitelist[i]])
37+
}
38+
else {
39+
obj[whitelist[i]] = domEl[whitelist[i]]
40+
}
41+
}
42+
return obj
43+
}
44+
45+
export default {
46+
data () {
47+
return {
48+
listItems: [],
49+
mutationInfo: ''
50+
}
51+
},
52+
53+
methods: {
54+
handler (mutationRecords) {
55+
const whitelist = ['id', 'type', 'addedNodes', 'removedNodes', 'attributeName', 'attributeNamespace', 'nextSibling', 'oldValue', 'previousSibling', 'target', 'tagName', 'className', 'childNodes']
56+
this.mutationInfo = ''
57+
58+
for (let index in mutationRecords) {
59+
const record = mutationRecords[index]
60+
console.log(record)
61+
this.mutationInfo += JSON.stringify(record, function (name, value) {
62+
if (name === '') {
63+
return domToObj(value, whitelist)
64+
}
65+
if (Array.isArray(this)) {
66+
if (typeof value === 'object') {
67+
return domToObj(value, whitelist)
68+
}
69+
return value
70+
}
71+
if (whitelist.find(x => (x === name))) {
72+
return value
73+
}
74+
}, 2)
75+
this.mutationInfo += '\n'
76+
}
77+
},
78+
79+
addRow () {
80+
if (this.listItems.length < 10) {
81+
this.listItems.push(`List item #${this.listItems.length + 1}`)
82+
}
83+
},
84+
85+
removeRow () {
86+
if (this.listItems.length > 0) {
87+
this.listItems.pop()
88+
}
89+
}
90+
}
91+
}
92+
</script>

‎docs/src/examples/Mutation/CharacterData.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div class="q-pa-md">
3+
</div>
4+
</template>
5+
6+
<script>
7+
export default {
8+
}
9+
</script>

‎docs/src/examples/Mutation/ChildList.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div class="q-pa-md">
3+
</div>
4+
</template>
5+
6+
<script>
7+
export default {
8+
}
9+
</script>

‎docs/src/examples/Mutation/DragDrop.vue‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="row justify-around items-center q-pb-lg">
4+
<div class="col">
5+
<!--First Drop Target-->
6+
<div
7+
v-mutation="handler1"
8+
data-drop-target="true"
9+
@dragenter="onDragEnter"
10+
@dragleave="onDragLeave"
11+
@dragover="onDragOver"
12+
@drop="onDrop"
13+
>
14+
<div
15+
id="box1"
16+
draggable="true"
17+
@dragstart="onDragStart"
18+
class="box navy"
19+
></div>
20+
<div
21+
id="box2"
22+
draggable="true"
23+
@dragstart="onDragStart"
24+
class="box red"
25+
></div>
26+
<div
27+
id="box3"
28+
draggable="true"
29+
@dragstart="onDragStart"
30+
class="box green"
31+
></div>
32+
<div
33+
id="box4"
34+
draggable="true"
35+
@dragstart="onDragStart"
36+
class="box orange"
37+
></div>
38+
<div
39+
id="box5"
40+
draggable="true"
41+
@dragstart="onDragStart"
42+
class="box navy"
43+
></div>
44+
<div
45+
id="box6"
46+
draggable="true"
47+
@dragstart="onDragStart"
48+
class="box red"
49+
></div>
50+
<div
51+
id="box7"
52+
draggable="true"
53+
@dragstart="onDragStart"
54+
class="box green"
55+
></div>
56+
<div
57+
id="box8"
58+
draggable="true"
59+
@dragstart="onDragStart"
60+
class="box orange"
61+
></div>
62+
</div>
63+
</div>
64+
65+
<div class="col">
66+
<!--Second Drop Target-->
67+
<div
68+
v-mutation="handler2"
69+
data-drop-target="true"
70+
@dragenter="onDragEnter"
71+
@dragleave="onDragLeave"
72+
@dragover="onDragOver"
73+
@drop="onDrop"
74+
></div>
75+
</div>
76+
</div>
77+
<!--Mutation Information-->
78+
<div class="row justify-around items-start q-pb-lg">
79+
<div class="col">
80+
<div class="text-subtitle1">Mutation Info</div>
81+
<p v-for="status in status1" :key="status">{{ status }}</p>
82+
</div>
83+
<div class="col">
84+
<div class="text-subtitle1">Mutation Info</div>
85+
<p v-for="status in status2" :key="status">{{ status }}</p>
86+
</div>
87+
</div>
88+
</div>
89+
</template>
90+
91+
<script>
92+
export default {
93+
data () {
94+
return {
95+
status1: [],
96+
status2: []
97+
}
98+
},
99+
100+
methods: {
101+
handler1 (mutationRecords) {
102+
this.status1 = []
103+
for (let index in mutationRecords) {
104+
const record = mutationRecords[index]
105+
const info = `type: ${record.type}, nodes added: ${record.addedNodes.length > 0 ? 'true' : 'false'}, nodes removed: ${record.removedNodes.length > 0 ? 'true' : 'false'}, oldValue: ${record.oldValue}`
106+
this.status1.push(info)
107+
}
108+
},
109+
handler2 (mutationRecords) {
110+
this.status2 = []
111+
for (let index in mutationRecords) {
112+
const record = mutationRecords[index]
113+
const info = `type: ${record.type}, nodes added: ${record.addedNodes.length > 0 ? 'true' : 'false'}, nodes removed: ${record.removedNodes.length > 0 ? 'true' : 'false'}, oldValue: ${record.oldValue}`
114+
this.status2.push(info)
115+
}
116+
},
117+
// store the id of the draggable element
118+
onDragStart (e) {
119+
e.dataTransfer.setData('text', e.target.id)
120+
e.dataTransfer.dropEffect = 'move'
121+
},
122+
onDragEnter (e) {
123+
// don't drop on other draggables
124+
if (e.target.draggable === true) {
125+
return
126+
}
127+
e.target.classList.add('drag-enter')
128+
},
129+
onDragLeave (e) {
130+
e.target.classList.remove('drag-enter')
131+
},
132+
onDragOver (e) {
133+
e.preventDefault()
134+
},
135+
onDrop (e) {
136+
e.preventDefault()
137+
138+
// don't drop on other draggables
139+
if (e.target.draggable === true) {
140+
return
141+
}
142+
143+
const draggedId = e.dataTransfer.getData('text')
144+
const draggedEl = document.getElementById(draggedId)
145+
146+
// check if original parent node
147+
if (draggedEl.parentNode === e.target) {
148+
e.target.classList.remove('drag-enter')
149+
return
150+
}
151+
152+
// make the exchange
153+
draggedEl.parentNode.removeChild(draggedEl)
154+
e.target.appendChild(draggedEl)
155+
e.target.classList.remove('drag-enter')
156+
}
157+
}
158+
}
159+
</script>
160+
161+
<style scoped lang="sass">
162+
[data-drop-target]
163+
height: 400px
164+
width: 200px
165+
margin: 25px
166+
background-color: gainsboro
167+
float: left
168+
169+
.drag-enter
170+
outline-style: dashed
171+
172+
.box
173+
width: 100px
174+
height: 100px
175+
float: left
176+
177+
@media only screen and (max-width: 500px)
178+
[data-drop-target]
179+
height: 200px
180+
width: 100px
181+
margin: 25px
182+
background-color: gainsboro
183+
float: left
184+
185+
.box
186+
width: 50px
187+
height: 50px
188+
float: left
189+
190+
.box:nth-child(3)
191+
clear: both
192+
193+
.navy
194+
background-color: navy
195+
196+
.red
197+
background-color: firebrick
198+
199+
.green
200+
background-color: darkgreen
201+
202+
.orange
203+
background-color: orange
204+
</style>

0 commit comments

Comments
 (0)