Skip to content

Commit

Permalink
feat(portals): improve refocusing with ESC with multiple stacked port…
Browse files Browse the repository at this point in the history 
…als; fix page background in dialogs
  • Loading branch information
@pdanpdan
pdanpdan committed May 5, 2023
1 parent cc02162 commit 53e6351
Show file tree
Hide file tree
Showing 14 changed files with 657 additions and 98 deletions.
2 changes: 1 addition & 1 deletion docs/src/examples/AppFullscreen/Basic.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<div class="q-pa-md">
<q-btn
color="secondary"
@click="$q.fullscreen.toggle()"
:icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
:label="$q.fullscreen.isActive ? 'Exit Fullscreen' : 'Go Fullscreen'"
@click="$q.fullscreen.toggle()"
/>
</div>
</template>
31 changes: 25 additions & 6 deletions docs/src/examples/AppFullscreen/Targeted.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,40 @@
<template>
<div class="q-pa-md">
<q-btn
ref="target"
color="secondary"
v-bind="btnProps"
@hook:mounted="target = $refs.target.$el"
@click="toggle"
:icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
:label="$q.fullscreen.isActive ? 'Exit Fullscreen' : 'Go Fullscreen'"
/>
</div>
</template>

<script>
export default {
methods: {
toggle (e) {
const target = e.target.parentNode.parentNode.parentNode
data () {
return {
target: null
}
},
this.$q.fullscreen.toggle(target)
computed: {
btnProps () {
return this.$q.fullscreen.activeEl !== this.target
? {
icon: 'fullscreen',
label: 'Make Button Fullscreen'
}
: {
icon: 'fullscreen_exit',
label: 'Exit Fullscreen'
}
}
},
methods: {
toggle () {
this.$q.fullscreen.toggle(this.target)
.then(() => {
// success!
})
Expand Down
262 changes: 260 additions & 2 deletions ui/dev/src/pages/form/select-part-8.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,80 @@
</q-item-section>
</q-item>
</q-list>

<q-select
v-model="quizSimple"
filled
use-input
behavior="menu"
label="simple + filter-delayed + no-options - menu"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
v-model="quizMultiple"
filled
multiple
use-input
behavior="menu"
label="multiple + filter-delayed + no-options - menu"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
v-model="quizSimple"
filled
use-input
behavior="dialog"
label="simple + filter-delayed + no-options - dialog"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
v-model="quizMultiple"
filled
multiple
use-input
behavior="dialog"
label="multiple + filter-delayed + no-options - dialog"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>
</q-menu>
</q-btn>
</div>
Expand Down Expand Up @@ -211,7 +285,15 @@
:options="userControl"
dense options-dense outlined
behavior="menu"
/>
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
label="multiple + use-input; menu"
Expand All @@ -233,12 +315,102 @@
</q-item-section>
</q-item>
</template>

<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select label="delayed filter" rounded outlined :options="quizList" v-model="quiz" @filter="getQuiz" behavior="menu">
<template v-slot:selected>
<div class="text-body1 text-black">{{ quiz.label }}</div>
</template>

<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
v-model="quizSimple"
filled
use-input
behavior="menu"
label="simple + filter-delayed + no-options - menu"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
v-model="quizMultiple"
filled
multiple
use-input
behavior="menu"
label="multiple + filter-delayed + no-options - menu"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
v-model="quizSimple"
filled
use-input
behavior="dialog"
label="simple + filter-delayed + no-options - dialog"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
v-model="quizMultiple"
filled
multiple
use-input
behavior="dialog"
label="multiple + filter-delayed + no-options - dialog"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>
</q-card-section>
</q-card>
Expand Down Expand Up @@ -284,6 +456,80 @@
behavior="dialog"
label="Multiple - Open as dialog with styling"
/>

<q-select
v-model="quizSimple"
filled
use-input
behavior="menu"
label="simple + filter-delayed + no-options - menu"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
v-model="quizMultiple"
filled
multiple
use-input
behavior="menu"
label="multiple + filter-delayed + no-options - menu"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
v-model="quizSimple"
filled
use-input
behavior="dialog"
label="simple + filter-delayed + no-options - dialog"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
v-model="quizMultiple"
filled
multiple
use-input
behavior="dialog"
label="multiple + filter-delayed + no-options - dialog"
:options="quizListFiltered"
@filter="filterQuiz"
>
<template v-slot:no-option>
<q-item>
<q-item-section>
No content
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
</template>
Expand Down Expand Up @@ -321,7 +567,11 @@ export default {
mic: 8,
quiz: {},
quizList: null
quizList: null,
quizListFiltered: null,
quizSimple: null,
quizMultiple: null
}
},
methods: {
Expand All @@ -336,6 +586,14 @@ export default {
this.quizList = quizOptions
})
}, 2000)
},
filterQuiz (value, update) {
setTimeout(() => {
update(() => {
this.quizListFiltered = quizOptions.filter(o => o.label.includes(value))
})
}, 50)
}
}
}
Expand Down
Loading

0 comments on commit 53e6351

Please sign in to comment.