Skip to content

Commit

Permalink
feat(QSelect): dialog - add close icon; add class and style; open whe…
Browse files Browse the repository at this point in the history 
…n typing in field; fix focus on field quasarframework#6523, quasarframework#6858
  • Loading branch information
@pdanpdan
pdanpdan committed May 12, 2023
1 parent 4e3c10a commit 7fe73a6
Show file tree
Hide file tree
Showing 8 changed files with 567 additions and 227 deletions.
115 changes: 115 additions & 0 deletions docs/src/examples/QSelect/DialogCloseIcon.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<template>
<div class="q-pa-md">
<div class="q-gutter-md row">
<q-select
filled
v-model="model"
label="Default close icon"
:options="options"
style="width: 250px"
behavior="dialog"
dialog-close-icon
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
No results
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
filled
v-model="model"
use-input
input-debounce="0"
label="Filter with default close icon"
:options="options"
@filter="filterFn"
style="width: 250px"
behavior="dialog"
dialog-close-icon
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
No results
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
filled
v-model="model"
label="Custom close icon"
:options="options"
style="width: 250px"
behavior="dialog"
dialog-close-icon="close"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
No results
</q-item-section>
</q-item>
</template>
</q-select>

<q-select
filled
v-model="model"
use-input
input-debounce="0"
label="Filter with custom close icon"
:options="options"
@filter="filterFn"
style="width: 250px"
behavior="dialog"
dialog-close-icon="close"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
No results
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
</template>

<script>
const stringOptions = [
'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
]
export default {
data () {
return {
model: null,
stringOptions,
options: stringOptions
}
},
methods: {
filterFn (val, update) {
if (val === '') {
update(() => {
this.options = stringOptions
})
return
}
update(() => {
const needle = val.toLowerCase()
this.options = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
})
}
}
}
</script>
4 changes: 4 additions & 0 deletions docs/src/pages/vue-components/select.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@ Please note that on iOS menu behavior might generate problems, especially when u

<doc-example title="Show options in dialog" file="QSelect/BehaviorDialog" />

### Dialog mode close icon

<doc-example title="Close icon in dialog" file="QSelect/DialogCloseIcon" />

## The model

::: danger
Expand Down
65 changes: 63 additions & 2 deletions ui/dev/src/pages/form/select-part-5-kbd.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
<template>
<div class="q-layout-padding">
<div class="row items-center bg-black text-white q-pa-sm">
<q-checkbox v-model="forceMenu" toggle-indeterminate dark :label="forceMenuLabel" />
<q-checkbox v-model="dialogCloseIcon" toggle-indeterminate dark :label="dialogCloseIconLabel" />
</div>

<div class="bg-black text-white q-pa-sm q-mb-xl">
<q-checkbox v-model="forceMenu" toggle-indeterminate dark :label="forceMenuLabel" /> / ModelS: {{ modelS || 'null' }} / ModelM: {{ modelM || 'null' }}
<div>ModelS: {{ modelS || 'null' }}</div>
<div>ModelM: {{ modelM || 'null' }}</div>
</div>

<div class="row q-col-gutter-md">
Expand All @@ -14,6 +20,7 @@
label="Single"
:options="options"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -23,6 +30,14 @@
</q-item-section>
</q-item>
</template>

<template v-slot:prepend>
<q-icon name="colorize" />
</template>

<template v-slot:append>
<q-icon name="lock" />
</template>
</q-select>

<q-select
Expand All @@ -35,6 +50,7 @@
input-debounce="0"
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -44,6 +60,14 @@
</q-item-section>
</q-item>
</template>

<template v-slot:prepend>
<q-icon name="colorize" />
</template>

<template v-slot:append>
<q-icon name="lock" />
</template>
</q-select>

<q-select
Expand All @@ -57,6 +81,7 @@
hide-selected
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -79,6 +104,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -101,6 +127,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -122,6 +149,7 @@
label="Multiple"
:options="options"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -143,6 +171,7 @@
input-debounce="0"
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -165,6 +194,7 @@
hide-selected
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -187,6 +217,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -210,6 +241,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -232,6 +264,7 @@
label="Multiple Chips"
:options="options"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -254,6 +287,7 @@
input-debounce="0"
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -277,6 +311,7 @@
hide-selected
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -300,6 +335,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -324,6 +360,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -348,6 +385,7 @@
input-debounce="0"
@filter="filterFnObj"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -370,6 +408,7 @@
option-value="value"
option-label="label"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
/>

Expand All @@ -383,6 +422,7 @@
emit-value
map-options
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
/>

Expand All @@ -396,6 +436,7 @@
emit-value
map-options
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
/>

Expand All @@ -407,6 +448,7 @@
option-value="value"
option-label="label"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
/>

Expand All @@ -418,6 +460,7 @@
:option-value="kOptionValue"
:option-label="kOptionLabel"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
/>

Expand All @@ -431,6 +474,7 @@
emit-value
map-options
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
/>

Expand All @@ -444,6 +488,7 @@
emit-value
map-options
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
/>

Expand All @@ -455,6 +500,7 @@
:option-value="kOptionValue"
:option-label="kOptionLabel"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
/>
</div>
Expand Down Expand Up @@ -490,7 +536,8 @@ export default {
optionsK,
objOptions,
objOptionsK,
forceMenu: null
forceMenu: null,
dialogCloseIcon: false
}
},
Expand All @@ -507,6 +554,20 @@ export default {
}
return this.forceMenu === false ? 'Force dialog' : 'Based on platform'
},
dialogCloseIconValue () {
return this.dialogCloseIcon === null
? 'close'
: this.dialogCloseIcon
},
dialogCloseIconLabel () {
if (this.dialogCloseIcon === true) {
return 'Default dialog close icon'
}
return this.dialogCloseIcon === false ? 'No dialog close icon' : 'Custom dialog close icon'
}
},
Expand Down
Loading

0 comments on commit 7fe73a6

Please sign in to comment.