Skip to content

Commit 720f9e5

Browse files
rstoenescurstoenescu
committed
Standardize show/hide methods to use Promises (open/close also becomes show/hide)
1 parent 4060097 commit 720f9e5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+566
-609
lines changed

‎dev/components/components/button-dropdown.vue‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div style="padding: 25px">
33
<div v-for="(cfg, index) in conf" :key="`${cfg.split}-${cfg.compact}`">
4-
<q-btn-dropdown :ref="`first${index}`" :split="cfg.split" :compact="cfg.compact" @open="log('open')" @close="log('close')" @click="log('click')" color="primary" glossy label="Dropdown Button" style="margin: 15px">
4+
<q-btn-dropdown :ref="`first${index}`" :split="cfg.split" :compact="cfg.compact" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" glossy label="Dropdown Button" style="margin: 15px">
55
<q-list link>
66
<q-list-header inset>Folders</q-list-header>
7-
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].close()">
7+
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].hide()">
88
<q-item-side icon="folder" inverted color="grey-6" />
99
<q-item-main>
1010
<q-item-tile label>Photos</q-item-tile>
@@ -14,7 +14,7 @@
1414
</q-item>
1515
<q-item-separator inset />
1616
<q-list-header inset>Files</q-list-header>
17-
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].close()">
17+
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].hide()">
1818
<q-item-side icon="assignment" inverted color="grey-6" />
1919
<q-item-main>
2020
<q-item-tile label>Vacation</q-item-tile>
@@ -24,10 +24,10 @@
2424
</q-item>
2525
</q-list>
2626
</q-btn-dropdown>
27-
<q-btn-dropdown :ref="`first${index}`" :split="cfg.split" :compact="cfg.compact" @open="log('open')" @close="log('close')" @click="log('click')" color="primary" icon="map" glossy label="Dropdown Button" style="margin: 15px">
27+
<q-btn-dropdown :ref="`first${index}`" :split="cfg.split" :compact="cfg.compact" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" icon="map" glossy label="Dropdown Button" style="margin: 15px">
2828
<q-list link>
2929
<q-list-header inset>Folders</q-list-header>
30-
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].close()">
30+
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].hide()">
3131
<q-item-side icon="folder" inverted color="grey-6" />
3232
<q-item-main>
3333
<q-item-tile label>Photos</q-item-tile>
@@ -37,7 +37,7 @@
3737
</q-item>
3838
<q-item-separator inset />
3939
<q-list-header inset>Files</q-list-header>
40-
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].close()">
40+
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].hide()">
4141
<q-item-side icon="assignment" inverted color="grey-6" />
4242
<q-item-main>
4343
<q-item-tile label>Vacation</q-item-tile>
@@ -47,10 +47,10 @@
4747
</q-item>
4848
</q-list>
4949
</q-btn-dropdown>
50-
<q-btn-dropdown :ref="`first${index}`" :split="cfg.split" :compact="cfg.compact" @open="log('open')" @close="log('close')" @click="log('click')" color="primary" icon="map" glossy style="margin: 15px">
50+
<q-btn-dropdown :ref="`first${index}`" :split="cfg.split" :compact="cfg.compact" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" icon="map" glossy style="margin: 15px">
5151
<q-list link>
5252
<q-list-header inset>Folders</q-list-header>
53-
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].close()">
53+
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].hide()">
5454
<q-item-side icon="folder" inverted color="grey-6" />
5555
<q-item-main>
5656
<q-item-tile label>Photos</q-item-tile>
@@ -60,7 +60,7 @@
6060
</q-item>
6161
<q-item-separator inset />
6262
<q-list-header inset>Files</q-list-header>
63-
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].close()">
63+
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].hide()">
6464
<q-item-side icon="assignment" inverted color="grey-6" />
6565
<q-item-main>
6666
<q-item-tile label>Vacation</q-item-tile>
@@ -70,10 +70,10 @@
7070
</q-item>
7171
</q-list>
7272
</q-btn-dropdown>
73-
<q-btn-dropdown :ref="`second${index}`" :split="cfg.split" :compact="cfg.compact" @open="log('open')" @close="log('close')" @click="log('click')" color="yellow" glossy icon="map" label="Dropdown Button" style="margin: 15px">
73+
<q-btn-dropdown :ref="`second${index}`" :split="cfg.split" :compact="cfg.compact" @show="log('open')" @hide="log('close')" @click="log('click')" color="yellow" glossy icon="map" label="Dropdown Button" style="margin: 15px">
7474
<q-list link>
7575
<q-list-header inset>Folders</q-list-header>
76-
<q-item v-for="n in 3" :key="n" @click="$refs[`second${index}`].close()">
76+
<q-item v-for="n in 3" :key="n" @click="$refs[`second${index}`].hide()">
7777
<q-item-side icon="folder" inverted color="grey-6" />
7878
<q-item-main>
7979
<q-item-tile label>Photos</q-item-tile>
@@ -83,7 +83,7 @@
8383
</q-item>
8484
<q-item-separator inset />
8585
<q-list-header inset>Files</q-list-header>
86-
<q-item v-for="n in 3" :key="n" @click="$refs[`second${index}`].close()">
86+
<q-item v-for="n in 3" :key="n" @click="$refs[`second${index}`].hide()">
8787
<q-item-side icon="assignment" inverted color="grey-6" />
8888
<q-item-main>
8989
<q-item-tile label>Vacation</q-item-tile>

‎dev/components/components/card.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,13 @@
6767
<q-icon slot="right" name="more_vert">
6868
<q-popover ref="popover">
6969
<q-list link class="no-border">
70-
<q-item @click="$refs.popover.close()">
70+
<q-item @click="$refs.popover.hide()">
7171
<q-item-main label="Remove Card" />
7272
</q-item>
73-
<q-item @click="$refs.popover.close()">
73+
<q-item @click="$refs.popover.hide()">
7474
<q-item-main label="Send Feedback" />
7575
</q-item>
76-
<q-item @click="$refs.popover.close()">
76+
<q-item @click="$refs.popover.hide()">
7777
<q-item-main label="Share" />
7878
</q-item>
7979
</q-list>

‎dev/components/components/carousel.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -160,22 +160,22 @@
160160
<p class="caption">
161161
Launch Carousel on Fullscreen
162162
</p>
163-
<q-btn color="primary" class="glossy" @click="$refs.modal.open()">
163+
<q-btn color="primary" class="glossy" @click="$refs.modal.show()">
164164
Launch
165165
</q-btn>
166166
<q-modal ref="modal" maximized>
167167
<q-carousel arrows dots class="text-white full-height">
168168
<q-carousel-slide class="bg-primary centered">
169169
<h1>Slide 1</h1>
170-
<q-btn color="dark" class="glossy" @click="$refs.modal.close()">Close Me</q-btn>
170+
<q-btn color="dark" class="glossy" @click="$refs.modal.hide()">Close Me</q-btn>
171171
</div>
172172
<q-carousel-slide class="bg-secondary centered">
173173
<h1>Slide 2</h1>
174-
<q-btn color="dark" class="glossy" @click="$refs.modal.close()">Close Me</q-btn>
174+
<q-btn color="dark" class="glossy" @click="$refs.modal.hide()">Close Me</q-btn>
175175
</div>
176176
<q-carousel-slide class="bg-tertiary centered">
177177
<h1>Slide 3</h1>
178-
<q-btn color="dark" class="glossy" @click="$refs.modal.close()">Close Me</q-btn>
178+
<q-btn color="dark" class="glossy" @click="$refs.modal.hide()">Close Me</q-btn>
179179
</div>
180180
</q-carousel>
181181
</q-modal>

‎dev/components/components/collapsible.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22
<div>
33
<div class="layout-padding" style="max-width: 600px;">
44
<q-list>
5-
<q-collapsible icon="explore" label="First">
5+
{{ model }}
6+
<q-collapsible v-model="model" icon="explore" label="With model">
67
<div>
78
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.
89
</div>
910
</q-collapsible>
10-
<q-collapsible icon="perm_identity" label="Second" @open="disable_third" @close="enable_third">
11+
<q-collapsible icon="perm_identity" label="Second" @show="disable_third" @hide="enable_third">
1112
<div>
1213
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.
1314
</div>
@@ -64,7 +65,7 @@
6465
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.
6566
</div>
6667
</q-collapsible>
67-
<q-collapsible icon="perm_identity" label="Second" opened>
68+
<q-collapsible icon="perm_identity" label="Second" :value="true">
6869
<div>
6970
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.
7071
</div>
@@ -78,7 +79,7 @@
7879

7980
<p class="caption">Group a.k.a Accordion (opening one closes the other)</p>
8081
<q-list>
81-
<q-collapsible group="somegroup" icon="explore" label="First" opened>
82+
<q-collapsible group="somegroup" icon="explore" label="First" :value="true">
8283
<div>
8384
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.
8485
</div>
@@ -95,9 +96,9 @@
9596
</q-collapsible>
9697
</q-list>
9798

98-
<p class="caption">use open and close emit</p>
99+
<p class="caption">use show and hide emit</p>
99100
<q-list>
100-
<q-collapsible group="somegroup" icon="explore" label="Counter" @open="counter_start" @close="counter_stop">
101+
<q-collapsible group="somegroup" icon="explore" label="Counter" @show="counter_start" @hide="counter_stop">
101102
<div>Will only count when opened, using the open and close event to control count timer</div>
102103
<label>Counter: {{counter}}</label>
103104
</q-collapsible>
@@ -175,6 +176,7 @@
175176
export default {
176177
data () {
177178
return {
179+
model: true,
178180
counter: 0,
179181
third_disabled: false
180182
}

‎dev/components/components/context-menu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<q-item
4141
v-for="n in 10"
4242
:key="n"
43-
@click="showToast(), $refs.context.close()"
43+
@click="showToast(), $refs.context.hide()"
4444
>
4545
<q-item-main label="Label" sublabel="Value" />
4646
</q-item>

‎dev/components/components/data-table2.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,11 @@
105105
<q-btn color="primary" flat round small icon="more_vert" class="on-right">
106106
<q-popover ref="popover">
107107
<q-list link>
108-
<q-item @click="$refs.popover.close()">
108+
<q-item @click="$refs.popover.hide()">
109109
<q-item-side icon="map" />
110110
<q-item-main label="View map" />
111111
</q-item>
112-
<q-item @click="$refs.popover.close()">
112+
<q-item @click="$refs.popover.hide()">
113113
<q-item-side icon="add" />
114114
<q-item-main label="Create new table" />
115115
</q-item>

‎dev/components/components/fab.vue‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -59,30 +59,14 @@
5959
You can close it by clicking/tapping on the whitey backdrop.
6060
</p>
6161

62-
<q-fab
63-
color="primary"
64-
active-icon="alarm"
65-
direction="up"
66-
class="fixed-bottom-right"
67-
style="right: 18px; bottom: 18px;"
68-
>
69-
<q-tooltip ref="tooltip0" slot="tooltip" anchor="center left" self="center right" :offset="[20, 0]">Tooltip in FAB</q-tooltip>
70-
<q-fab-action color="purple" @click="toast('mail')" icon="mail">
71-
<q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Mail</q-tooltip>
72-
</q-fab-action>
73-
<q-fab-action color="secondary" @click="toast('alarm')" icon="alarm">
74-
<q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Alarm</q-tooltip>
75-
</q-fab-action>
76-
</q-fab>
77-
7862
<q-fab
7963
class="fixed-bottom-right"
8064
style="right: 18px; bottom: 86px;"
8165
icon="add"
8266
direction="up"
8367
color="primary"
84-
@open="openFab"
85-
@close="closeFab"
68+
@show="openFab"
69+
@hide="closeFab"
8670
>
8771
<q-fab-action color="blue" class="white" icon="person add">
8872
<q-tooltip ref="tooltip1" anchor="center left" self="center right" :offset="[20, 0]">Add a person</q-tooltip>
@@ -93,6 +77,22 @@
9377
</q-fab>
9478

9579
<div style="height: 1000px">&nbsp;</div>
80+
81+
<q-fab
82+
color="primary"
83+
active-icon="alarm"
84+
direction="up"
85+
class="fixed-bottom-right"
86+
style="right: 18px; bottom: 18px;"
87+
>
88+
<q-tooltip ref="tooltip0" slot="tooltip" anchor="center left" self="center right" :offset="[20, 0]">Tooltip in FAB</q-tooltip>
89+
<q-fab-action color="purple" @click="toast('mail')" icon="mail">
90+
<q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Mail</q-tooltip>
91+
</q-fab-action>
92+
<q-fab-action color="secondary" @click="toast('alarm')" icon="alarm">
93+
<q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Alarm</q-tooltip>
94+
</q-fab-action>
95+
</q-fab>
9696
</div>
9797
</div>
9898
</template>
@@ -121,13 +121,13 @@ export default {
121121
},
122122
openFab () {
123123
setTimeout(() => {
124-
this.$refs.tooltip1.open()
125-
this.$refs.tooltip2.open()
124+
this.$refs.tooltip1.show()
125+
this.$refs.tooltip2.show()
126126
}, 300)
127127
},
128128
closeFab () {
129-
this.$refs.tooltip1.close()
130-
this.$refs.tooltip2.close()
129+
this.$refs.tooltip1.hide()
130+
this.$refs.tooltip2.hide()
131131
}
132132
}
133133
}

‎dev/components/components/modal.vue‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
link
1313
v-for="modal in types"
1414
:key="modal.label"
15-
@click="$refs[modal.ref].open()"
15+
@click="$refs[modal.ref].show()"
1616
v-ripple.mat
1717
>
1818
<q-item-side icon="open_in_new" />
@@ -41,26 +41,26 @@
4141
<q-modal v-model="toggle" ref="basicModal" :content-css="{padding: '50px', minWidth: '50vw'}">
4242
<h4>Basic Modal</h4>
4343
<p v-for="n in 25">Scroll down to close</p>
44-
<q-btn color="primary" @click="$refs.basicModal.close()">Close</q-btn>
44+
<q-btn color="primary" @click="$refs.basicModal.hide()">Close</q-btn>
4545
</q-modal>
4646

4747
<q-modal
4848
ref="eventsModal"
49-
@open="notify('open')"
49+
@show="notify('open')"
5050
@escape-key="notify('escape-key')"
51-
@close="notify('close')"
51+
@hide="notify('close')"
5252
:content-css="{padding: '50px', minWidth: '50vw'}"
5353
>
5454
<h4>Modal with Events</h4>
5555
<p v-for="n in 25">Scroll down to close</p>
56-
<q-btn color="primary" @click="$refs.eventsModal.close()">Close</q-btn>
56+
<q-btn color="primary" @click="$refs.eventsModal.hide()">Close</q-btn>
5757
</q-modal>
5858

5959
<q-modal ref="layoutModal" :content-css="{minWidth: '80vw', minHeight: '80vh'}">
6060
<q-modal-layout>
6161
<q-toolbar slot="header">
6262
<q-icon style="font-size: 500%" class="cursor-pointer" name="map" @click="closeMe" />
63-
<q-btn flat @click="$refs.layoutModal.close()">
63+
<q-btn flat @click="$refs.layoutModal.hide()">
6464
<q-icon name="keyboard_arrow_left" />
6565
</q-btn>
6666
<q-toolbar-title>
@@ -81,7 +81,7 @@
8181
<div class="layout-padding">
8282
<h1>Modal</h1>
8383

84-
<q-btn color="primary" @click="$refs.layoutModal.close()">Close</q-btn>
84+
<q-btn color="primary" @click="$refs.layoutModal.hide()">Close</q-btn>
8585
<p class="caption" v-for="n in 15">This is a Modal presenting a Layout.</p>
8686
</div>
8787
</q-modal-layout>
@@ -90,17 +90,17 @@
9090
<q-modal ref="minimizedModal" minimized :content-css="{padding: '50px'}">
9191
<h4>Minimized Modal</h4>
9292
<p>This one has backdrop on small screens too.</p>
93-
<q-btn color="red" @click="$refs.minimizedModal.close()">Close Me</q-btn>
93+
<q-btn color="red" @click="$refs.minimizedModal.hide()">Close Me</q-btn>
9494
</q-modal>
9595

9696
<q-modal ref="maximizedModal" maximized :content-css="{padding: '50px'}">
9797
<h4>Maximized Modal</h4><p>This one is maximized on bigger screens too.</p>
98-
<q-btn color="tertiary" @click="$refs.maximizedModal.close()">Close Me</q-btn>
98+
<q-btn color="tertiary" @click="$refs.maximizedModal.hide()">Close Me</q-btn>
9999
</q-modal>
100100

101101
<q-modal ref="positionModal" :position="position" :content-css="{padding: '20px'}">
102102
<h4>Modal</h4><p>This one gets displayed from {{position}}.</p>
103-
<q-btn color="orange" @click="$refs.positionModal.close()">Close Me</q-btn>
103+
<q-btn color="orange" @click="$refs.positionModal.hide()">Close Me</q-btn>
104104
</q-modal>
105105
</div>
106106
</template>
@@ -145,13 +145,13 @@ export default {
145145
openSpecialPosition (position) {
146146
this.position = position
147147
this.$nextTick(() => {
148-
this.$refs.positionModal.open()
148+
this.$refs.positionModal.show()
149149
})
150150
},
151151
closeMe () {
152152
console.log('click')
153-
this.$refs.layoutModal.close()
154-
this.$refs.layoutModal.close()
153+
this.$refs.layoutModal.hide()
154+
this.$refs.layoutModal.hide()
155155
}
156156
}
157157
}

‎dev/components/components/parallax.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<p v-for="n in 7" class="par-text">{{loremipsum}}</p>
1010
</div>
1111

12-
<q-parallax :src="'statics/parallax1.jpg'" :height="200">
12+
<q-parallax src="statics/parallax1.jpg" :height="200">
1313
<div slot="loading">Loading...</div>
1414
<h1>Parallax Title</h1>
1515
</q-parallax>

0 commit comments

Comments
 (0)