Skip to content

Commit eb22b13

Browse files
rstoenescurstoenescu
committed
feat(QCollapsible): Boolean "opened" prop for initial state when not using v-model
1 parent 0cc7940 commit eb22b13

File tree

2 files changed

+110
-119
lines changed

2 files changed

+110
-119
lines changed

‎dev/components/components/collapsible.vue‎

Lines changed: 108 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,143 @@
11
<template>
22
<div class="layout-padding" style="max-width: 600px;">
3-
<q-list>
4-
{{ model }}
5-
<q-collapsible v-model="model" icon="explore" right-icon="map" label="With model" collapse-icon="help_outline">
6-
<div>
7-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
8-
</div>
3+
<p class="caption">QCollapsible is a QItem with extended functionality</p>
4+
<q-collapsible icon="explore" label="Explore">
5+
<div>{{ lorem }}</div>
6+
</q-collapsible>
7+
8+
<p class="caption">Explore the possibilities</p>
9+
<q-list separator>
10+
<q-collapsible
11+
v-model="open"
12+
icon="perm_identity"
13+
label="With a model and events"
14+
@show="notify('Opened a Collapsible')"
15+
@hide="notify('Closed a Collapsible', true)"
16+
>
17+
<div>{{ lorem }}</div>
918
</q-collapsible>
19+
20+
<q-collapsible icon="shopping_cart" label="Toggle by right-side icon only" icon-toggle>
21+
<div>{{ lorem }}</div>
22+
</q-collapsible>
23+
24+
<q-collapsible icon="explore" right-icon="map" label="With right-side icon too">
25+
<div>{{ lorem }}</div>
26+
</q-collapsible>
27+
1028
<q-collapsible>
1129
<template slot="header">
12-
<q-item-side icon="map" />
13-
<q-item-main label="Custom header" />
30+
<q-chip color="primary" small class="q-mr-sm">Custom header</q-chip>
31+
<q-item-main label="using slot" />
1432
<q-item-side right>
15-
<q-item-tile label>Custom</q-item-tile>
33+
<q-icon name="star" color="red" size="24px" />
1634
</q-item-side>
1735
</template>
1836

19-
<div>
20-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
21-
</div>
37+
<div>{{ lorem }}</div>
2238
</q-collapsible>
23-
<q-collapsible icon="perm_identity" label="Second" @show="disable_third" @hide="enable_third">
24-
<div>
25-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
26-
</div>
39+
40+
<q-collapsible avatar="statics/boy-avatar.png" label="With avatar">
41+
<div>{{ lorem }}</div>
2742
</q-collapsible>
28-
<q-collapsible icon="shopping_cart" label="Third (disabled when Second is open)" :disable="third_disabled">
29-
<div>
30-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
31-
</div>
43+
44+
<q-collapsible icon="drafts" label="Disabled" disable>
45+
<div>{{ lorem }}</div>
46+
</q-collapsible>
47+
48+
<q-collapsible letter="J" right-avatar="statics/boy-avatar.png" label="Jim">
49+
<div>{{ lorem }}</div>
3250
</q-collapsible>
3351
</q-list>
3452

35-
<p class="caption">With Item Separators</p>
53+
<p class="caption">Multiline</p>
3654
<q-list inset-separator>
3755
<q-collapsible icon="mail" label="Inbox" sublabel="5 unread emails">
38-
<div>
39-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
40-
</div>
56+
<div>{{ lorem }}</div>
4157
</q-collapsible>
4258
<q-collapsible icon="send" label="Outbox" sublabel="Empty">
43-
<div>
44-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
45-
</div>
46-
</q-collapsible>
47-
<q-collapsible icon="drafts" label="Draft" sublabel="Draft a new email">
48-
<div>
49-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
50-
</div>
59+
<div>{{ lorem }}</div>
5160
</q-collapsible>
5261
</q-list>
5362

5463
<p class="caption">Popups</p>
5564
<div>
56-
<q-collapsible popup v-model="model" icon="explore" right-icon="map" label="With model">
57-
<div>
58-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
59-
</div>
60-
</q-collapsible>
61-
<q-collapsible popup>
62-
<template slot="header">
63-
<q-item-side icon="map" />
64-
<q-item-main label="Custom header" />
65-
<q-item-side right>
66-
<q-item-tile label>Custom</q-item-tile>
67-
</q-item-side>
68-
</template>
69-
70-
<div>
71-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
72-
</div>
65+
<q-collapsible popup icon="mail" label="Inbox" sublabel="5 unread emails">
66+
<div>{{ lorem }}</div>
7367
</q-collapsible>
74-
<q-collapsible popup icon="perm_identity" label="Second" @show="disable_third" @hide="enable_third">
75-
<div>
76-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
77-
</div>
68+
<q-collapsible popup icon="send" label="Outbox" sublabel="Empty">
69+
<div>{{ lorem }}</div>
7870
</q-collapsible>
79-
<q-collapsible popup icon="shopping_cart" label="Third (disabled when Second is open)" :disable="third_disabled">
80-
<div>
81-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
82-
</div>
71+
<q-collapsible popup icon="drafts" label="Draft" sublabel="Draft a new email">
72+
<div>{{ lorem }}</div>
8373
</q-collapsible>
8474
</div>
8575

86-
<p class="caption">Group a.k.a Accordion (opening one closes the other)</p>
87-
<q-list>
88-
<q-collapsible group="somegroup" icon="explore" label="First" :value="true" header-class="bg-primary text-white">
89-
<div>
90-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
91-
</div>
76+
<p class="caption">Menu</p>
77+
<q-list separator>
78+
<q-collapsible indent icon="mail" label="Inbox" sublabel="5 unread emails" opened>
79+
80+
<q-collapsible indent icon="receipt" label="Receipts">
81+
82+
<q-collapsible label="Today">
83+
<div>{{ lorem }}</div>
84+
</q-collapsible>
85+
<q-collapsible label="Yesterday">
86+
<div>{{ lorem }}</div>
87+
</q-collapsible>
88+
89+
</q-collapsible>
90+
91+
<q-collapsible indent icon="schedule" label="Postponed">
92+
<div>{{ lorem }}</div>
93+
</q-collapsible>
94+
9295
</q-collapsible>
93-
<q-collapsible group="somegroup" icon="perm_identity" label="Second" header-class="text-negative">
94-
<div>
95-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
96-
</div>
96+
97+
<q-collapsible indent icon="send" label="Outbox" sublabel="Empty">
98+
<q-collapsible label="Today">
99+
<div>{{ lorem }}</div>
100+
</q-collapsible>
101+
<q-collapsible label="Yesterday">
102+
<div>{{ lorem }}</div>
103+
</q-collapsible>
97104
</q-collapsible>
98-
<q-collapsible group="somegroup" icon="shopping_cart" label="Third">
99-
<div>
100-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
101-
</div>
105+
106+
<q-collapsible indent icon="drafts" label="Draft" sublabel="Draft a new email">
107+
<div>{{ lorem }}</div>
102108
</q-collapsible>
103109
</q-list>
104110

105-
<p class="caption">Toggle only on icon (on right)</p>
106-
<q-list separator>
107-
<q-collapsible icon-toggle icon="mail" label="Inbox" sublabel="5 unread emails">
108-
<div>
109-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
110-
</div>
111+
<p class="caption">Group a.k.a Accordion (opening one closes the other)</p>
112+
<q-list>
113+
<q-collapsible group="somegroup" icon="explore" label="First" opened>
114+
<div>{{ lorem }}</div>
111115
</q-collapsible>
112-
<q-collapsible icon-toggle icon="send" label="Outbox" sublabel="Empty">
113-
<div>
114-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
115-
</div>
116+
<q-collapsible group="somegroup" icon="perm_identity" label="Second" header-class="text-red">
117+
<div>{{ lorem }}</div>
116118
</q-collapsible>
117-
<q-collapsible icon-toggle icon="drafts" label="Draft" sublabel="Draft a new email">
118-
<div>
119-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
120-
</div>
119+
<q-collapsible group="somegroup" icon="shopping_cart" label="Third">
120+
<div>{{ lorem }}</div>
121121
</q-collapsible>
122122
</q-list>
123123

124-
<p class="caption">Preselected/Opened Collapsible</p>
124+
<p class="caption">Preselected/Opened Collapsible (or use a model)</p>
125125
<q-list separator>
126126
<q-collapsible icon="explore" label="First">
127-
<div>
128-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
129-
</div>
130-
</q-collapsible>
131-
<q-collapsible icon="perm_identity" label="Second" :value="true">
132-
<div>
133-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
134-
</div>
127+
<div>{{ lorem }}</div>
135128
</q-collapsible>
136-
<q-collapsible icon="shopping_cart" label="Third">
137-
<div>
138-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
139-
</div>
140-
</q-collapsible>
141-
</q-list>
142-
143-
<p class="caption">use show and hide emit</p>
144-
<q-list>
145-
<q-collapsible group="somegroup" icon="explore" label="Counter" @show="counter_start" @hide="counter_stop">
146-
<div>Will only count when opened, using the open and close event to control count timer</div>
147-
<label>Counter: {{counter}}</label>
129+
<q-collapsible icon="perm_identity" label="Second" opened>
130+
<div>{{ lorem }}</div>
148131
</q-collapsible>
149132
</q-list>
150133

134+
<p class="caption">Make use of events</p>
135+
<q-collapsible indent icon="explore" label="Counter" @show="startCounting" @hide="stopCounting">
136+
<div>
137+
<q-chip color="secondary">Counting: {{ counter }}</q-chip>
138+
</div>
139+
<div class="q-mt-md">Will only count when opened, using the show/hide events to control count timer.</div>
140+
</q-collapsible>
151141

152142
<p class="caption">Ubiquity. Using Cards as content.</p>
153143
<q-list separator>
@@ -164,7 +154,7 @@
164154
<q-collapsible icon="perm_identity" label="Second Card">
165155
<q-card>
166156
<q-card-media>
167-
<img src="~assets/mountains.jpg">
157+
<img src="statics/mountains.jpg">
168158
</q-card-media>
169159
<q-card-main>
170160
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -206,7 +196,7 @@
206196
<div>
207197
(1 mile)
208198
</div>
209-
<div class="col"></div>
199+
<div class="col" />
210200
<q-btn flat color="primary" size="sm" icon="directions" label="Start" />
211201
</q-card-actions>
212202
</q-card>
@@ -219,29 +209,29 @@
219209
export default {
220210
data () {
221211
return {
222-
model: true,
212+
open: false,
223213
counter: 0,
224-
third_disabled: false
214+
lorem: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, nemo minus dolore facere saepe molestias, fugiat officia aspernatur expedita pariatur, accusantium hic exercitationem perspiciatis voluptate possimus nobis temporibus ipsa officiis!'
225215
}
226216
},
227217
methods: {
228-
counter_start () {
218+
notify (message, close) {
219+
this.$q.notify({
220+
color: close ? 'tertiary' : 'secondary',
221+
message
222+
})
223+
},
224+
startCounting () {
229225
console.log('counter start')
230226
231227
this.hndl = setInterval(() => {
232228
this.counter++
233229
}, 1000)
234230
},
235-
counter_stop () {
231+
stopCounting () {
236232
console.log('counter stop')
237233
238234
clearInterval(this.hndl)
239-
},
240-
enable_third () {
241-
this.third_disabled = false
242-
},
243-
disable_third () {
244-
this.third_disabled = true
245235
}
246236
}
247237
}

‎src/components/collapsible/QCollapsible.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default {
2424
insetSeparator: Boolean,
2525
noRipple: Boolean,
2626
collapseIcon: String,
27+
opened: Boolean,
2728

2829
dense: Boolean,
2930
sparse: Boolean,
@@ -144,7 +145,7 @@ export default {
144145
},
145146
created () {
146147
this.$root.$on(eventName, this.__eventHandler)
147-
if (this.value) {
148+
if (this.opened || this.value) {
148149
this.show()
149150
}
150151
},

0 commit comments

Comments
 (0)