Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
bug fix for slider, improved select single-line autocomplete feel and…
… functionality
  • Loading branch information
johnleider committed Aug 27, 2017
1 parent c046371 commit 8f34860
Show file tree
Hide file tree
Showing 7 changed files with 82 additions and 9 deletions.
1 change: 1 addition & 0 deletions src/components/VSelect/VSelect.spec.js
Expand Up @@ -65,6 +65,7 @@ test('VSelect.js', ({ mount, shallow }) => {
const update = jest.fn()

wrapper.vm.$on('update:searchInput', update)
wrapper.vm.isBooted = true
wrapper.vm.searchValue = 'test'

expect(update).toBeCalledWith('test')
Expand Down
41 changes: 34 additions & 7 deletions src/components/VSelect/VSelect.vue
Expand Up @@ -152,7 +152,11 @@
},
set (val) {
this.lazySearch = val
val !== this.searchInput && this.$emit('update:searchInput', val)
// Do not emit input changes if not booted
val !== this.searchInput &&
this.isBooted &&
this.$emit('update:searchInput', val)
}
},
selectedItems () {
Expand All @@ -179,7 +183,11 @@
value (val) {
this.inputValue = val
this.validate()
if (this.isAutocomplete) {
// Async calls may not have data ready at boot
if (!this.multiple) this.searchValue = this.getText(val)
this.$nextTick(this.$refs.menu.updateDimensions)
}
},
Expand All @@ -198,7 +206,11 @@
})
},
searchValue (val) {
if (val && !this.isActive) this.isActive = true
// Search value could change from async data
// don't open menu if not booted
if (!this.isBooted) return
if (!this.isActive) this.isActive = true
this.$refs.menu.listIndex = null
this.$nextTick(() => {
Expand All @@ -212,6 +224,14 @@
if (this._isDestroyed) return
this.content = this.$refs.menu.$refs.content
// Set input text
if (this.isAutocomplete &&
!this.multiple &&
this.isDirty
) {
this.searchValue = this.getText(this.inputValue)
}
})
},
Expand All @@ -227,15 +247,21 @@
blur (e) {
this.$nextTick(() => {
this.focused = false
this.searchValue = null
if (this.multiple) this.searchValue = null
this.$emit('blur', this.inputValue)
})
},
focus (e) {
this.focused = true
this.$refs.input &&
(this.isAutocomplete) &&
this.$refs.input.focus()
if (this.$refs.input && this.isAutocomplete) {
this.multiple &&
this.$refs.input.focus() ||
this.$refs.input.setSelectionRange(
0,
(this.searchValue || '').toString().length
)
}
this.$emit('focus', e)
},
Expand Down Expand Up @@ -304,7 +330,8 @@
})
}
this.searchValue = null
if (this.multiple) this.searchValue = null
this.$emit('change', this.inputValue)
}
},
Expand Down
2 changes: 2 additions & 0 deletions src/components/VSelect/mixins/generators.js
Expand Up @@ -60,6 +60,8 @@ export default {
}, [selections])
},
genSelections () {
if (this.isAutocomplete && !this.multiple) return []

const children = []
const chips = this.chips
const slots = this.$scopedSlots.selection
Expand Down
12 changes: 12 additions & 0 deletions src/components/VSlider/VSlider.spec.js
@@ -0,0 +1,12 @@
import { test } from '~util/testing'
import VSlider from './VSlider'

const warning = 'The v-slider component requires the present of v-app or a non-body wrapping element with the [data-app] attribute.'
test('Vslider.vue', ({ mount }) => {
it('shoud work', () => {
const wrapper = mount(VSlider)

expect(wrapper.html()).toMatchSnapshot()
expect(warning).toHaveBeenTipped()
})
})
2 changes: 1 addition & 1 deletion src/components/VSlider/VSlider.vue
Expand Up @@ -58,7 +58,7 @@
set (val) {
const { min, max, step, snap } = this
val = val < min ? min : val > max ? max : val
if (Math.ceil(val) !== Math.ceil(this.lazyValue)) {
if (Math.ceil(val) % Math.ceil(this.lazyValue) < 2) {
this.inputWidth = this.calculateWidth(val)
}
Expand Down
31 changes: 31 additions & 0 deletions src/components/VSlider/__snapshots__/VSlider.spec.js.snap
@@ -0,0 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Vslider.vue shoud work 1`] = `
<div role="slider"
tabindex="0"
class="input-group input-group--slider"
>
<div class="input-group__input">
<div class="slider">
<div class="slider__track__container">
<div class="slider__track">
</div>
<div class="slider__track-fill">
</div>
</div>
<div class="slider__thumb-container"
style="left: 0%;"
>
<div class="slider__thumb">
</div>
</div>
</div>
</div>
<div class="input-group__details">
<div class="input-group__messages">
</div>
</div>
</div>
`;
2 changes: 1 addition & 1 deletion src/stylus/components/_select.styl
Expand Up @@ -3,6 +3,7 @@
.input-group--select
.input-group--select__autocomplete
display: block
padding-bottom: 1px

.input-group__append-icon
transition: .3s $transition.linear-out-slow-in
Expand All @@ -12,7 +13,6 @@
display: inline-block
height: 30px
opacity: 1
padding-bottom: 1px

.input-group__append-icon
transform: rotate(-180deg)
Expand Down

0 comments on commit 8f34860

Please sign in to comment.