Skip to content

Commit 5658a3b

Browse files
rstoenescurstoenescu
committed
refactor: Toggle model
1 parent cbdb798 commit 5658a3b

File tree

14 files changed

+296
-246
lines changed

14 files changed

+296
-246
lines changed

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

Lines changed: 17 additions & 13 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" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" glossy label="Dropdown Button" style="margin: 15px">
4+
<q-btn-dropdown ref="first" :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>
6-
<q-list-header inset>Folders</q-list-header>
7-
<q-item v-for="n in 3" :key="n" @click="$refs[`first${index}`].hide()">
6+
<q-list-header inset>Folders X</q-list-header>
7+
<q-item v-for="n in 3" :key="n" @click="hideDropdown(index)">
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}`].hide()">
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" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" icon="map" glossy label="Dropdown Button" style="margin: 15px">
27+
<q-btn-dropdown ref="second" :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}`].hide()">
30+
<q-item v-for="n in 3" :key="n" @click="$refs.second[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}`].hide()">
40+
<q-item v-for="n in 3" :key="n" @click="$refs.second[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" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" icon="map" glossy style="margin: 15px">
50+
<q-btn-dropdown ref="third" :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}`].hide()">
53+
<q-item v-for="n in 3" :key="n" @click="$refs.third[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}`].hide()">
63+
<q-item v-for="n in 3" :key="n" @click="$refs.third[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" @show="log('open')" @hide="log('close')" @click="log('click')" color="yellow" glossy icon="map" label="Dropdown Button" style="margin: 15px">
73+
<q-btn-dropdown ref="fourth" :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}`].hide()">
76+
<q-item v-for="n in 3" :key="n" @click="$refs.fourth[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}`].hide()">
86+
<q-item v-for="n in 3" :key="n" @click="$refs.fourth[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>
@@ -123,6 +123,10 @@ export default {
123123
label += ' Compact'
124124
}
125125
return label
126+
},
127+
hideDropdown (index) {
128+
console.log(this.$refs)
129+
this.$refs.first[index].hide()
126130
}
127131
}
128132
}

‎dev/components/components/modal.vue‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,14 @@
5656
<q-btn color="primary" @click="$refs.eventsModal.hide()">Close</q-btn>
5757
</q-modal>
5858

59-
<q-modal ref="layoutModal" :content-css="{minWidth: '80vw', minHeight: '80vh'}">
59+
<div class="fixed-bottom-right z-max bg-yellow">
60+
Ref <q-btn @click="show" label="Show" /><q-btn @click="hide" label="Hide" />
61+
<br>
62+
Model <q-btn @click="someModel = true" label="Show" /><q-btn @click="someModel = false" label="Hide" />
63+
<br>
64+
{{ someModel }}
65+
</div>
66+
<q-modal ref="layoutModal" v-model="someModel" :content-css="{minWidth: '80vw', minHeight: '80vh'}" @show="onShow" @hide="onHide">
6067
<q-modal-layout>
6168
<q-toolbar slot="header">
6269
<q-icon style="font-size: 500%" class="cursor-pointer" name="map" @click="closeMe" />
@@ -113,6 +120,7 @@ export default {
113120
return {
114121
search: '',
115122
toggle: false,
123+
someModel: false,
116124
types: [
117125
{
118126
label: 'Basic',
@@ -152,6 +160,28 @@ export default {
152160
console.log('click')
153161
this.$refs.layoutModal.hide()
154162
this.$refs.layoutModal.hide()
163+
},
164+
onShow () {
165+
console.log('onShow')
166+
},
167+
onHide () {
168+
console.log('onHide')
169+
},
170+
show () {
171+
console.log('show')
172+
this.$refs.layoutModal.show().then(() => {
173+
console.log('---show finished')
174+
}, () => {
175+
console.log('---show cancelled')
176+
})
177+
},
178+
hide () {
179+
console.log('hide')
180+
this.$refs.layoutModal.hide().then(() => {
181+
console.log('---hide finished')
182+
}, () => {
183+
console.log('---hide cancelled')
184+
})
155185
}
156186
}
157187
}

‎src/components/action-sheet/QActionSheet.js‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { QModal } from '../modal'
22
import { QIcon } from '../icon'
33
import { QList, QItem, QItemSide, QItemMain, QItemSeparator } from '../list'
4-
import ModelToggleMixin from '../../mixins/model-toggle'
54

65
export default {
76
name: 'q-action-sheet',
8-
mixins: [ModelToggleMixin],
97
props: {
8+
value: Boolean,
109
title: String,
1110
grid: Boolean,
1211
actions: Array,
@@ -15,6 +14,11 @@ export default {
1514
default: 'Cancel'
1615
}
1716
},
17+
watch: {
18+
value (val) {
19+
this[val ? 'show' : 'hide']()
20+
}
21+
},
1822
computed: {
1923
contentCss () {
2024
if (this.$q.theme === 'ios') {
@@ -80,11 +84,22 @@ export default {
8084
contentCss: this.contentCss
8185
},
8286
on: {
83-
dismiss: this.__onCancel,
87+
show: () => {
88+
this.$emit('show')
89+
this.$emit('input', true)
90+
},
91+
hide: () => {
92+
this.$emit('hide')
93+
this.$emit('input', false)
94+
},
95+
dismiss: () => {
96+
console.log('DIALOG received dismiss, hiding then emitting cancel')
97+
this.__onCancel()
98+
},
8499
'escape-key': () => {
85100
this.hide().then(() => {
86101
this.$emit('escape-key')
87-
this.$emit('cancel')
102+
this.__onCancel()
88103
})
89104
}
90105
}
@@ -93,27 +108,11 @@ export default {
93108
methods: {
94109
show () {
95110
console.log('AS show')
96-
if (this.showing) {
97-
console.log('AS show already showing; promise.resolve')
98-
return Promise.resolve()
99-
}
100-
101-
return this.$refs.modal.show().then(() => {
102-
console.log('AS show emitting show')
103-
this.$emit('show')
104-
this.__updateModel(true)
105-
})
111+
return this.$refs.modal.show()
106112
},
107113
hide () {
108114
console.log('AS hide')
109-
console.log(!this.showing ? 'AS hide already hidden; promise.resolve' : '')
110-
return this.showing
111-
? this.$refs.modal.hide().then(() => {
112-
console.log('AS hide emitting hide')
113-
this.$emit('hide')
114-
this.__updateModel(false)
115-
})
116-
: Promise.resolve()
115+
return this.$refs.modal.hide()
117116
},
118117
__getActions (h) {
119118
return this.actions.map(action => action.label

‎src/components/btn/QBtnDropdown.js‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import BtnMixin from './btn-mixin'
22
import QBtn from './QBtn'
33
import QBtnGroup from './QBtnGroup'
44
import { QPopover } from '../popover'
5-
import ModelToggleMixin from '../../mixins/model-toggle'
65

76
export default {
87
name: 'q-btn-dropdown',
9-
mixins: [BtnMixin, ModelToggleMixin],
8+
mixins: [BtnMixin],
109
props: {
10+
value: Boolean,
1111
label: String,
1212
split: Boolean
1313
},
@@ -25,12 +25,12 @@ export default {
2525
},
2626
on: {
2727
show: e => {
28-
this.__updateModel(true)
2928
this.$emit('show', e)
29+
this.$emit('input', true)
3030
},
3131
hide: e => {
32-
this.__updateModel(false)
3332
this.$emit('hide', e)
33+
this.$emit('input', false)
3434
}
3535
}
3636
},
@@ -122,7 +122,7 @@ export default {
122122
on: {
123123
click: () => {
124124
if (!this.disable) {
125-
this.$refs.popover.show()
125+
this.show()
126126
}
127127
}
128128
}
@@ -135,14 +135,10 @@ export default {
135135
},
136136
methods: {
137137
show () {
138-
return this.$refs.popover
139-
? this.$refs.popover.show()
140-
: Promise.resolve()
138+
return this.$refs.popover.show()
141139
},
142140
hide () {
143-
return this.$refs.popover
144-
? this.$refs.popover.hide()
145-
: Promise.resolve()
141+
return this.$refs.popover.hide()
146142
}
147143
}
148144
}

‎src/components/collapsible/QCollapsible.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -104,17 +104,11 @@ export default {
104104
}
105105
},
106106
methods: {
107-
show () {
108-
if (!this.disable) {
109-
this.__updateModel(true, false)
110-
}
111-
return Promise.resolve()
107+
__show () {
108+
this.showPromiseResolve()
112109
},
113-
hide () {
114-
if (!this.disable) {
115-
this.__updateModel(false, false)
116-
}
117-
return Promise.resolve()
110+
__hide () {
111+
this.hidePromiseResolve && this.hidePromiseResolve()
118112
},
119113
__toggleItem () {
120114
if (!this.iconToggle) {
@@ -130,6 +124,11 @@ export default {
130124
created () {
131125
this.$root.$on(eventName, this.__eventHandler)
132126
},
127+
mounted () {
128+
if (this.value) {
129+
this.show()
130+
}
131+
},
133132
beforeDestroy () {
134133
this.$root.$off(eventName, this.__eventHandler)
135134
}

0 commit comments

Comments
 (0)