Skip to content

Commit

Permalink
className for QSelect, QSearch before|after, QInput focus on marginal…
Browse files Browse the repository at this point in the history 
…ia (#2215)

* className for QSelect, QSearch before|after, QInput focus on marginalia

- QSelect: use className from option item in list
- QSearch: combine before/after with search and clear icons (can be disabled)
- QInput and friends: focus input field in __onFocus

close #2017, close #2005, close #1953

* Some demos for navigation in dropdown

* Update QInput.vue
  • Loading branch information
@pdanpdan @rstoenescu
pdanpdan authored and rstoenescu committed Jun 29, 2018
1 parent 7d5ba1c commit 33ea19c
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 33 deletions.
24 changes: 12 additions & 12 deletions dev/components/components/button-dropdown.vue
View file
Expand Up @@ -4,7 +4,7 @@
<q-btn-dropdown v-model="toggle" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" glossy label="Dropdown Button" style="margin: 15px">
<q-list link>
<q-list-header inset>Folders X</q-list-header>
<q-item v-for="n in 3" :key="`x.${n}`" @click.native="toggle = false">
<q-item v-for="n in 3" :key="`x.${n}`" @click.native="toggle = false" :tabindex="0">
<q-item-side icon="folder" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Photos</q-item-tile>
Expand All @@ -14,7 +14,7 @@
</q-item>
<q-item-separator inset />
<q-list-header inset>Files</q-list-header>
<q-item v-for="n in 3" :key="`y.${n}`" @click.native="toggle = false">
<q-item v-for="n in 3" :key="`y.${n}`" @click.native="toggle = false" :tabindex="0">
<q-item-side icon="assignment" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Vacation</q-item-tile>
Expand All @@ -28,7 +28,7 @@
<q-btn-dropdown to="/" color="primary" split glossy label="Link /" style="margin: 15px">
<q-list link>
<q-list-header inset>Folders X</q-list-header>
<q-item v-for="n in 3" :key="`x.${n}`" @click.native="toggle = false">
<q-item v-for="n in 3" :key="`x.${n}`" @click.native="toggle = false" :tabindex="0">
<q-item-side icon="folder" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Photos</q-item-tile>
Expand All @@ -38,7 +38,7 @@
</q-item>
<q-item-separator inset />
<q-list-header inset>Files</q-list-header>
<q-item v-for="n in 3" :key="`y.${n}`" @click.native="toggle = false">
<q-item v-for="n in 3" :key="`y.${n}`" @click.native="toggle = false" :tabindex="0">
<q-item-side icon="assignment" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Vacation</q-item-tile>
Expand All @@ -57,7 +57,7 @@
<q-btn-dropdown ref="first" :size="size" :split="cfg.split" :dense="cfg.dense" :disable="cfg.disable" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" glossy label="Dropdown Button" style="margin: 15px">
<q-list link>
<q-list-header inset>Folders X</q-list-header>
<q-item v-for="n in 3" :key="`1.${n}`" @click.native="hideDropdown(index1 * 3 + index2)">
<q-item v-for="n in 3" :key="`1.${n}`" @click.native="hideDropdown(index1 * 3 + index2)" :tabindex="0">
<q-item-side icon="folder" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Photos</q-item-tile>
Expand All @@ -67,7 +67,7 @@
</q-item>
<q-item-separator inset />
<q-list-header inset>Files</q-list-header>
<q-item v-for="n in 3" :key="`2.${n}`" @click.native="$refs.first[index1 * 3 + index2].hide()">
<q-item v-for="n in 3" :key="`2.${n}`" @click.native="$refs.first[index1 * 3 + index2].hide()" :tabindex="0">
<q-item-side icon="assignment" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Vacation</q-item-tile>
Expand All @@ -80,7 +80,7 @@
<q-btn-dropdown ref="second" :size="size" :split="cfg.split" :dense="cfg.dense" :disable="cfg.disable" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" icon="map" glossy label="Dropdown Button" style="margin: 15px">
<q-list link>
<q-list-header inset>Folders</q-list-header>
<q-item v-for="n in 3" :key="`1.${n}`" @click.native="$refs.second[index1 * 3 + index2].hide()">
<q-item v-for="n in 3" :key="`1.${n}`" @click.native="$refs.second[index1 * 3 + index2].hide()" :tabindex="0">
<q-item-side icon="folder" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Photos</q-item-tile>
Expand All @@ -90,7 +90,7 @@
</q-item>
<q-item-separator inset />
<q-list-header inset>Files</q-list-header>
<q-item v-for="n in 3" :key="`2.${n}`" @click.native="$refs.second[index1 * 3 + index2].hide()">
<q-item v-for="n in 3" :key="`2.${n}`" @click.native="$refs.second[index1 * 3 + index2].hide()" :tabindex="0">
<q-item-side icon="assignment" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Vacation</q-item-tile>
Expand All @@ -103,7 +103,7 @@
<q-btn-dropdown ref="third" :size="size" :split="cfg.split" :dense="cfg.dense" :disable="cfg.disable" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" icon="map" glossy style="margin: 15px">
<q-list link>
<q-list-header inset>Folders</q-list-header>
<q-item v-for="n in 3" :key="`1.${n}`" @click.native="$refs.third[index1 * 3 + index2].hide()">
<q-item v-for="n in 3" :key="`1.${n}`" @click.native="$refs.third[index1 * 3 + index2].hide()" :tabindex="0">
<q-item-side icon="folder" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Photos</q-item-tile>
Expand All @@ -113,7 +113,7 @@
</q-item>
<q-item-separator inset />
<q-list-header inset>Files</q-list-header>
<q-item v-for="n in 3" :key="`2.${n}`" @click.native="$refs.third[index1 * 3 + index2].hide()">
<q-item v-for="n in 3" :key="`2.${n}`" @click.native="$refs.third[index1 * 3 + index2].hide()" :tabindex="0">
<q-item-side icon="assignment" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Vacation</q-item-tile>
Expand All @@ -126,7 +126,7 @@
<q-btn-dropdown ref="fourth" :size="size" :split="cfg.split" :dense="cfg.dense" :disable="cfg.disable" @show="log('open')" @hide="log('close')" @click="log('click')" color="yellow" glossy icon="map" label="Dropdown Button" style="margin: 15px">
<q-list link>
<q-list-header inset>Folders</q-list-header>
<q-item v-for="n in 3" :key="`1.${n}`" @click.native="$refs.fourth[index1 * 3 + index2].hide()">
<q-item v-for="n in 3" :key="`1.${n}`" @click.native="$refs.fourth[index1 * 3 + index2].hide()" :tabindex="0">
<q-item-side icon="folder" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Photos</q-item-tile>
Expand All @@ -136,7 +136,7 @@
</q-item>
<q-item-separator inset />
<q-list-header inset>Files</q-list-header>
<q-item v-for="n in 3" :key="`2.${n}`" @click.native="$refs.fourth[index1 * 3 + index2].hide()">
<q-item v-for="n in 3" :key="`2.${n}`" @click.native="$refs.fourth[index1 * 3 + index2].hide()" :tabindex="0">
<q-item-side icon="assignment" inverted color="grey-6" />
<q-item-main>
<q-item-tile label>Vacation</q-item-tile>
Expand Down
7 changes: 6 additions & 1 deletion src/components/input/QInput.vue
View file
Expand Up @@ -278,7 +278,12 @@ export default {
__setModel (val) {
clearTimeout(this.timer)
this.focus()
this.__set(val || (this.isNumber ? null : ''), true)
this.__set(
this.isNumber && val === 0
? val
: val || (this.isNumber ? null : ''),
true
)
},
__set (e, forceUpdate) {
let val = e && e.target ? e.target.value : e
Expand Down
31 changes: 15 additions & 16 deletions src/components/search/QSearch.js
View file
Expand Up @@ -64,31 +64,30 @@ export default {
: this.debounce
},
controlBefore () {
return this.before || (
this.noIcon
? null
: [{
icon: this.icon || this.$q.icon.search.icon,
handler: this.focus
}]
)
const before = (this.before || []).slice()
if (!this.noIcon) {
before.unshift({
icon: this.icon || this.$q.icon.search.icon,
handler: this.focus
})
}
return before
},
controlAfter () {
if (this.after) {
return this.after
}
if (this.editable && this.clearable) {
return [{
const after = (this.after || []).slice()
if (this.isClearable) {
after.push({
icon: this.$q.icon.search[`clear${this.isInverted ? 'Inverted' : ''}`],
content: true,
handler: this.clear
}]
})
}
return after
}
},
methods: {
clear () {
this.$refs.input.clear()
clear (evt) {
this.$refs.input.clear(evt)
}
},
render (h) {
Expand Down
9 changes: 5 additions & 4 deletions src/components/select/QSelect.vue
View file
Expand Up @@ -71,7 +71,7 @@
<q-popover
ref="popover"
fit
:disable="readonly || disable"
:disable="!editable"
:anchor-click="false"
class="column no-wrap"
:class="dark ? 'bg-dark' : null"
Expand Down Expand Up @@ -108,7 +108,8 @@
:class="[
opt.disable ? 'text-faded' : 'cursor-pointer',
index === keyboardIndex ? 'q-select-highlight' : '',
opt.disable ? '' : 'cursor-pointer'
opt.disable ? '' : 'cursor-pointer',
opt.className || ''
]"
slot-replace
@click.capture.native="__toggleMultiple(opt.value, opt.disable)"
Expand Down Expand Up @@ -144,7 +145,8 @@
:class="[
opt.disable ? 'text-faded' : 'cursor-pointer',
index === keyboardIndex ? 'q-select-highlight' : '',
opt.disable ? '' : 'cursor-pointer'
opt.disable ? '' : 'cursor-pointer',
opt.className || ''
]"
slot-replace
:active="value === opt.value"
Expand Down Expand Up @@ -211,7 +213,6 @@ export default {
multiple: Boolean,
toggle: Boolean,
chips: Boolean,
readonly: Boolean,
options: {
type: Array,
required: true,
Expand Down
1 change: 1 addition & 0 deletions src/mixins/input.js
View file
Expand Up @@ -32,6 +32,7 @@ export default {
return
}
this.focused = true
this.$refs.input && this.$refs.input.focus()
this.$emit('focus', e)
},
__onInputBlur (e) {
Expand Down

0 comments on commit 33ea19c

Please sign in to comment.