Skip to content

v3.0.0
Compare
Choose a tag to compare
@sagalbot sagalbot released this 14 Apr 21:45
v3.0.0
3056f47

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
Assets 2
Loading