Skip to content

Commit fea3fc2

Browse files
rstoenescurstoenescu
committed
refactor(QTree): Revamp; still WIP
1 parent 18aacfe commit fea3fc2

File tree

6 files changed

+375
-109
lines changed

6 files changed

+375
-109
lines changed

‎dev/components/components/tree.vue‎

Lines changed: 107 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
<template>
22
<div>
33
<div class="layout-padding">
4-
<p class="caption">
5-
<span class="desktop-only">Click</span>
6-
<span class="mobile-only">Tap</span>
7-
on items to expand/contract and especially on "Item 1.3"
8-
to trigger an event.
9-
</p>
10-
<p class="caption">
11-
Trees are stripped out of any design by default so you can
12-
turn them into anything you want.
13-
</p>
4+
<h1>WIP</h1>
5+
<div class="row sm-gutter items-center">
6+
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
7+
<q-select v-model="selection" :options="[{label: 'None', value: 'none'}, {label: 'Single', value: 'single'}, {label: 'Multiple', value: 'multiple'}]" stack-label="Selection" />
8+
</div>
9+
</div>
1410

1511
<q-tree
16-
:model="treeModel"
17-
contract-html="<i class='material-icons'>remove_circle</i>"
18-
expand-html="<i class='material-icons'>add_circle</i>"
19-
/>
12+
v-model="treeModel"
13+
node-key="label"
14+
:selection="selection"
15+
@expand="onExpand"
16+
@select="onSelect"
17+
>
18+
<div slot="content-2-1-2-1" slot-scope="prop">
19+
Content for 2-1-2-1: {{prop.node.__key}}
20+
</div>
21+
</q-tree>
2022
</div>
2123
</div>
2224
</template>
@@ -25,119 +27,157 @@
2527
export default {
2628
data () {
2729
return {
30+
selection: 'multiple',
2831
treeModel: [
2932
{
30-
title: 'Item 1',
33+
label: 'Node 1',
3134
expanded: true,
35+
selected: false,
3236
icon: 'alarm',
3337
children: [
3438
{
35-
title: 'Item 1.1',
39+
label: 'Node 1.1',
3640
expanded: false,
41+
selected: false,
3742
children: [
3843
{
39-
title: 'Item 1.1.1',
44+
label: 'Node 1.1.1',
4045
expanded: false,
46+
selected: false,
4147
children: [
4248
{
43-
title: 'Item 1.1.1.1',
49+
label: 'Node 1.1.1.1',
4450
expanded: false,
45-
children: []
51+
selected: false
4652
}
4753
]
4854
},
4955
{
50-
title: 'Item 1.1.2',
56+
label: 'Node 1.1.2',
5157
expanded: false,
52-
children: []
58+
selected: false
5359
}
5460
]
5561
},
5662
{
57-
title: 'Item 1.2',
63+
label: 'Node 1.2',
5864
expanded: false,
59-
children: []
65+
selected: false
6066
},
6167
{
62-
title: 'Item 1.3',
68+
label: 'Node 1.3',
6369
expanded: false,
70+
selected: false,
6471
handler: () => {
65-
this.$q.notify('Tapped on item 1.3')
66-
},
67-
children: []
72+
this.$q.notify('Tapped on node 1.3')
73+
}
6874
}
6975
]
7076
},
7177
{
72-
title: 'Item 2',
73-
expanded: false,
78+
label: 'Node 2',
79+
expanded: true,
80+
selected: false,
7481
children: [
7582
{
76-
title: 'Item 2.1',
77-
expanded: false,
83+
label: 'Node 2.1',
84+
expanded: true,
85+
selected: false,
7886
children: [
7987
{
80-
title: 'Item 2.1.1',
88+
label: 'Node 2.1.1',
8189
expanded: false,
82-
children: []
90+
selected: false
8391
},
8492
{
85-
title: 'Item 2.1.2',
86-
expanded: false,
93+
label: 'Node 2.1.2',
94+
expanded: true,
95+
selected: false,
8796
children: [
8897
{
89-
title: 'Item 2.1.2.1',
90-
expanded: false,
91-
children: []
98+
label: 'Node 2.1.2.1',
99+
expanded: true,
100+
selected: false,
101+
body: '2-1-2-1'
92102
},
93103
{
94-
title: 'Item 2.1.2.2',
104+
label: 'Node 2.1.2.2',
95105
expanded: false,
96-
children: []
106+
selected: false,
107+
header: '2-1-2-2'
97108
}
98109
]
99110
}
100111
]
101112
},
102113
{
103-
title: 'Item 2.2',
114+
label: 'Node 2.2',
104115
expanded: false,
105-
children: []
116+
selected: false
106117
},
107118
{
108-
title: 'Item 2.3 - Click to add children to it',
119+
label: 'Node 2.3 - Lazy load',
109120
expanded: false,
110-
handler: (item) => {
111-
item.children = [
112-
{ title: 'Item 2.3.1', expanded: false },
113-
{ title: 'Item 2.3.2', expanded: false },
114-
{ title: 'Item 2.3.3', expanded: false },
115-
{
116-
title: 'Item 2.3.4',
117-
expanded: false,
118-
children: [
119-
{ title: 'Item 2.3.4.1', expanded: false },
120-
{ title: 'Item 2.3.4.2', expanded: false }
121+
selected: false,
122+
lazyLoad: node => {
123+
return new Promise((resolve, reject) => {
124+
setTimeout(() => {
125+
node.children = [
126+
{ label: 'Node 2.3.1', expanded: false },
127+
{ label: 'Node 2.3.2', expanded: false },
128+
{ label: 'Node 2.3.3', expanded: false },
129+
{
130+
label: 'Node 2.3.4',
131+
expanded: false,
132+
selected: false,
133+
children: [
134+
{ label: 'Node 2.3.4.1', expanded: false, selected: true },
135+
{ label: 'Node 2.3.4.2', expanded: false, selected: false }
136+
]
137+
}
121138
]
122-
}
123-
]
124-
item.expanded = true
125-
const prevTitle = item.title
126-
const prevHandler = item.handler
127-
item.title = 'Item 2.3 - Click to remove children from it'
128-
item.handler = (item) => {
129-
item.title = prevTitle
130-
delete item.children
131-
item.handler = prevHandler
132-
this.$q.notify('Children removed')
133-
}
134-
this.$q.notify('Children added')
139+
/*
140+
const prevLabel = node.label
141+
const prevHandler = node.handler
142+
node.label = 'Node 2.3 - Click to remove children from it'
143+
node.handler = node => {
144+
node.label = prevLabel
145+
node.children = []
146+
node.handler = prevHandler
147+
this.$q.notify('Children removed')
148+
} */
149+
this.$q.notify('Children added')
150+
resolve()
151+
}, 2000)
152+
})
153+
}
154+
},
155+
{
156+
label: 'Node 2.4 - Lazy load empty',
157+
expanded: false,
158+
selected: false,
159+
children: [],
160+
lazyLoad: node => {
161+
return new Promise((resolve, reject) => {
162+
setTimeout(() => {
163+
node.children = []
164+
resolve()
165+
}, 2000)
166+
})
135167
}
136168
}
137169
]
138170
}
139171
]
140172
}
173+
},
174+
methods: {
175+
onExpand (node, val) {
176+
console.log(`@expand(${val})`, node.__key, node)
177+
},
178+
onSelect (node, val) {
179+
console.log(`@select(${val})`, node.__key, node)
180+
}
141181
}
142182
}
143183
</script>

‎src/components/alert/alert.ios.styl‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.q-alert
22
border-radius $generic-border-radius
3-
min-width 200px
43
box-shadow none
54

65
.avatar

‎src/components/alert/alert.mat.styl‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.q-alert
22
border-radius $generic-border-radius
3-
min-width 200px
43
box-shadow none
54

65
.avatar

‎src/components/spinner/spinner-mixin.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export default {
33
color: String,
44
size: {
55
type: [Number, String],
6-
default: '1rem'
6+
default: '1em'
77
}
88
},
99
computed: {

0 commit comments

Comments
 (0)