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

quasarframework#6523, quasarframework#6858
  • Loading branch information
@pdanpdan
pdanpdan committed Mar 4, 2021
1 parent 1e15f7c commit 9e55e84
Show file tree
Hide file tree
Showing 8 changed files with 564 additions and 229 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
68 changes: 64 additions & 4 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,12 @@
<template>
<div class="q-layout-padding">
<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 class="row items-center bg-black text-white q-pa-sm q-mb-xl">
<q-checkbox v-model="forceMenu" toggle-indeterminate dark :label="forceMenuLabel" />
<q-checkbox v-model="dialogCloseIcon" toggle-indeterminate dark :label="dialogCloseIconLabel" />

<div class="col text-right q-pr-md">
ModelS: {{ modelS || 'null' }} / ModelM: {{ modelM || 'null' }}
</div>
</div>

<div class="row q-col-gutter-md">
Expand All @@ -14,6 +19,7 @@
label="Single"
:options="options"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -23,6 +29,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 +49,7 @@
input-debounce="0"
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -44,6 +59,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 +80,7 @@
hide-selected
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -79,6 +103,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -101,6 +126,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -122,6 +148,7 @@
label="Multiple"
:options="options"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -143,6 +170,7 @@
input-debounce="0"
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -165,6 +193,7 @@
hide-selected
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -187,6 +216,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -210,6 +240,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -232,6 +263,7 @@
label="Multiple Chips"
:options="options"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -254,6 +286,7 @@
input-debounce="0"
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -277,6 +310,7 @@
hide-selected
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -300,6 +334,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -324,6 +359,7 @@
fill-input
@filter="filterFn"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -348,6 +384,7 @@
input-debounce="0"
@filter="filterFnObj"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
>
<template v-slot:no-option>
Expand All @@ -370,6 +407,7 @@
option-value="value"
option-label="label"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
/>

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

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

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

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

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

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

Expand All @@ -455,6 +499,7 @@
:option-value="kOptionValue"
:option-label="kOptionLabel"
clearable
:dialog-close-icon="dialogCloseIconValue"
:behavior="behavior"
/>
</div>
Expand Down Expand Up @@ -490,7 +535,8 @@ export default {
optionsK,
objOptions,
objOptionsK,
forceMenu: null
forceMenu: null,
dialogCloseIcon: false
}
},
Expand All @@ -507,7 +553,21 @@ 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'
},
},
methods: {
Expand Down
Loading

0 comments on commit 9e55e84

Please sign in to comment.