v3.0.1 - IE11 Patch

In v3.0.0 the toggleDropdown method had calls to Array.from and Array.includes that were breaking the component in IE11. This patch restores IE11 support.

---

Merged #838
Closes #836

v3.0.0

New

• input slot
• import scss directly to adjust variables

Refined CSS Selectors

All internal CSS selectors use the lowest level of specificity (usually just one class), expect when global component states like vs--searching are involved. The refined selectors shave ~2.5kb off the build, and removes a lot of friction when attempting to override component styles.

Ecosystem

• Enabled Netlify deploys for MRs for easier reviews
• Removed CodeClimate, added Coveralls coverage reporter
• VuePress docs https://vueselect.org
• Test suite updated to Jest + vue-test-utils
• Updated build to Webpack 4, thanks to @yamsellem

Breaking Changes

index prop replaced with reduce

• v2.x provided the index {String} prop to return a single key from a selected object
• v3.x removes the index prop, replacing it with the reduce {Function} prop.

Using a function instead of a string provides a whole lot more flexibility, allowing for things like
deeply nested values, and really cleaned up the code internally.

const options = [{country: 'Canada', code: 'CA'},];

<!-- v2: using index --->
<v-select :options="options" label="country" index="code"  />

<!-- v3: using reduce --->
<v-select :options="options" label="country" :reduce="country => country.code" />

View the full documentation for reduce.

Removed onChange, onInput & onSearch props

onChange and onInput props have been removed. Overwriting onChange in an application was more likely to break vue-select's internals and cause issues. The input event provides identical functionality and can be swapped out in your application. Additionally, the change event has been removed. This event was redundant, input should be used instead.

onSearch was also removed in favor of the @search event. Both receive the same parameters.

CSS is now separate from JS and must be included separately

@import vSelect from 'vue-select`;
@import 'vue-select/dist/vue-select.css';

New Class Prefix: vs__

In order to avoid CSS collisions and allow for low specificity overrides of CSS, all classes have been renamed to include the vs__ prefix. The full list of renamed classes are listed below:

original	renamed
.open-indicator	.vs__open-indicator
.dropdown-toggle	.vs__dropdown-toggle
.dropdown-menu	.vs__dropdown-menu
.clear	.vs__clear
.selected-tag	.vs__selected
.no-options	.vs__no-options
.spinner	.vs__spinner
.close	.vs__deselect
.active	.vs__active

Internal State

The changes listed below are unlikely to break your apps unless you've been hooking into vue-select internal values. #781 (thanks @owenconti!) introduced a number of optimizations to the way that the component handles internal state.

• value: the value prop is undefined by default. vue-select no longer maintains an internal mutableValue state when a value prop has been passed. When :value or v-model is not used, vue-select will maintain internal state using the _value property.
• mutableOptions has been removed in favor of an optionList computed property.

Misc

• fade transition renamed to vs__fade
• Removed a element that was serving as the click handler within dropdown options

v2.6.4 - Unsearchable Placeholders

Fixes #222 when unsearchable inputs would not display placeholder text.

Before:

After:

v2.6.3 - Bootstrap 4

Fixes Bootstrap 4 CSS collisions.

Before:

After:

---

Closes #662

v2.6.2 - Bug Fixes

Great to get another contributor driven release out. Thanks to @hrobertson for #787 and #789. Shout out to @bartvosman for #792 that closes a bunch of mobile issues.

Fixes

• #777 Dropdown was not hiding after clicking on scroll bar fixed with #787
• #784, #776, #613, #580 solves v-model issues on android with #792
• prevent mutableValue from being mutated with #789

v2.6.0 - Stability Improvements

v2.5.1 introduced some regressions that have been patched in this release. The release is primarily maintenance with the exception of #730 adding a backwards compatible prop.

Big thanks to all the contributors helping out with bug fixes and improving the component.

• Shout out to @eriknygren for tons of support from new features to code reviews
• Big thanks to @MrStobbart for fixing many of the regressions that were introduced in 2.5.1.

Fixes

• issues where dropdown could not be closed in certain instances
• #664 multiple selects could choose same option multiple times
• #645 fix docs to show filterBy instead of filterFunction
• #744 only show scrollbar when necessary
• #723 cannot clear disabled selects
• #703 fix unresponsive selects
• #671 improves isOptionSelected
• #711 only emit input on actual events
• #702 support Vuex strict mode

New

• #730 add autocomplete prop for search input, defaults to off

Changes

#747 dist files are no longer tracked

• the majority of PRs had compiled /dist files in them making merges more difficult and cumbersome, despite contribution guide that states not to
• downside is that when installing using npm install [email protected]/sagalbot/vue-select.git, you must require the component file import vSelect from 'vue-select/src/components/Select.vue' - note that this file is not transpiled to ES5

Closes

#575 #634 #671 #717 #659 #573 #545 #526 #504 #455 #533 #689 #648 #722 #736 #732 #529

v2.5.1

Changes

• removes hidden class & inputClasses property
• fixes minor alignment issue

Merged

#631 #621

Flexbox Layout, Custom Filters, v-model Object Handling

Big thanks to @stevenharman, @eriknygren and @SimoTod for their significant contributions to this release!

New

• Switched to Flexbox based layout, significantly improved UI for multiple selects.

Props:

• filterBy
  • Callback to determine if the provided option should match the current search text.
    Used to determine if the option should be displayed.
• filter
  • Callback to filter results when search text is provided. Default implementation loops each option,
    and returns the result of this.filterBy.
• index
  • type: string
  • Tells vue-select what key to use when generating option values when each option is an object.
• clearable
  • type: boolean
  • Can the user clear the selected property?
• selectOnTab
  • type: boolean
  • When true, hitting the 'tab' key will select the current select value

Changes

• clicking selected options from the dropdown no longer deselects the option to mimic native <select> behavior
• font-family set to inherit instead of sans-serif
• clicking a selected tag will open the dropdown

Added Clear Button

New

• added clear button for single selects, thanks to @andywarren86 for #416!

UI Fixes

Fixes

• #414
  • hide unsearchable inputs, don't display a caret when focused
  • fix selected tag jump for single select
• #413
  • use pointer cursor when hovering unsearchable input