|
| 1 | +## Removed Function Callbacks |
| 2 | + |
| 3 | +Three function callbacks have been removed in favor of using events. |
| 4 | + |
| 5 | +- `onChange` |
| 6 | +- `onInput` |
| 7 | +- `onSearch` |
| 8 | + |
| 9 | +While this is a breaking change, the change in your application should be as simple as swapping the |
| 10 | +prop you were using for an event. |
| 11 | + |
| 12 | +### `onChange` & `onInput` |
| 13 | + |
| 14 | +In v2.x, Overwriting `onChange` in an application was more likely to break vue-select's internals |
| 15 | +and cause issues. The `input` event provides identical functionality and can be swapped out in your |
| 16 | +application. |
| 17 | + |
| 18 | +```html |
| 19 | +<!-- version 2: --> |
| 20 | +<v-select :on-change="doSomething" /> |
| 21 | + |
| 22 | +<!-- version 3: --> |
| 23 | +<v-select @input="doSomething" /> |
| 24 | +``` |
| 25 | + |
| 26 | +Additionally, the `change` event has been removed. This event was redundant, `input` should be used |
| 27 | +instead. |
| 28 | + |
| 29 | +```html |
| 30 | +<!-- version 2: --> |
| 31 | +<v-select @change="doSomething" /> |
| 32 | + |
| 33 | +<!-- version 3: --> |
| 34 | +<v-select @input="doSomething" /> |
| 35 | +``` |
| 36 | + |
| 37 | +### `onSearch` |
| 38 | + |
| 39 | +The `onSearch` prop was removed for the same reason as `onChange` and `onInput`. The `search` event |
| 40 | +has always provided the same parameters and can be used in it's place. |
| 41 | + |
| 42 | +```html |
| 43 | +<!-- version 2: --> |
| 44 | +<v-select :on-search="doSomeAjax" /> |
| 45 | + |
| 46 | +<!-- version 3: --> |
| 47 | +<v-select @search="doSomeAjax" /> |
| 48 | +``` |
| 49 | + |
| 50 | +## Separated CSS |
| 51 | + |
| 52 | +CSS was removed from the JS bundle in favor of a separate CSS file to support SSR and easier |
| 53 | +customization. |
| 54 | + |
| 55 | + ```js |
| 56 | + @import vSelect from 'vue-select`; |
| 57 | + @import 'vue-select/dist/vue-select.css'; |
| 58 | + ``` |
| 59 | +
|
| 60 | +## New Class Selector Prefix |
| 61 | +
|
| 62 | +In order to avoid CSS collisions and allow for low specificity overrides of CSS, all classes have |
| 63 | +been renamed to include the `vs__` prefix. The full list of renamed classes are listed below: |
| 64 | +
|
| 65 | +| original | renamed | |
| 66 | +| ------- | --------- | |
| 67 | +| `.open-indicator` | `.vs__open-indicator` | |
| 68 | +| `.dropdown-toggle` | `.vs__dropdown-toggle` | |
| 69 | +| `.dropdown-menu` | `.vs__dropdown-menu` | |
| 70 | +| `.clear` | `.vs__clear` | |
| 71 | +| `.selected-tag` | `.vs__selected` | |
| 72 | +| `.no-options` | `.vs__no-options` | |
| 73 | +| `.spinner` | `.vs__spinner` | |
| 74 | +| `.close` | `.vs__deselect` | |
| 75 | +| `.active` | `.vs__active` | |
| 76 | +
|
| 77 | +## Internal State |
| 78 | +
|
| 79 | +**The changes listed below are very unlikely to break your apps** unless you've been hooking into |
| 80 | +vue-select internal values. [#781](https://github.com/sagalbot/vue-select/pull/781) |
| 81 | +(thanks [@owenconti!](https://github.com/owenconti)) introduced a number of optimizations to the |
| 82 | +way that the component handles internal state. |
| 83 | + |
| 84 | +- `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. |
| 85 | +- `mutableOptions` has been removed in favor of an `optionList` computed property. |
| 86 | + |
| 87 | +## Misc |
| 88 | + |
| 89 | +- `fade` transition renamed to `vs__fade` |
| 90 | +- Removed `a` element that was serving as the click handler within dropdown options |
0 commit comments