Skip to content

Commit f972591

Browse files
owencontisagalbot
authored andcommitted
V3 - Remove mutable class properties plus other misc changes (sagalbot#781)
* Remove the mutableValue prop in the Select component. * Add back mutable value when Vue Select has to manage its own value. * Remove mutableOptions, valueAsAarray. Update webpack minifer to use Terser. * Fix tabbing * Fix bug with showClearButton * Fix tests. * Call clearSelection when possible * Update dev sandbox to have all three options for setting value. * Update dev sandbox to display current value * Remove unused karma test setup. * Revert onInput name change. * Use coveralls * Change this.internalValue to this.$data._value. * Remove onInput prop and replace with internal method, updateValue. * Update tests. * Rename optionObjectComparator to optionComparator.
1 parent f95b118 commit f972591

16 files changed

+250
-1950
lines changed

.travis.yml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,4 @@ node_js:
55
- node
66

77
script:
8-
- yarn test --coverage --coverageReporters=text-lcov
9-
- codecov
8+
- yarn test --coverage --coverageReporters=text-lcov | coveralls

build/webpack.prod.conf.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
const TerserPlugin = require('terser-webpack-plugin');
12
const merge = require('webpack-merge');
23
const baseWebpackConfig = require('./webpack.base.conf');
34

@@ -9,4 +10,16 @@ module.exports = merge(baseWebpackConfig, {
910
libraryTarget: 'umd',
1011
globalObject: 'typeof self !== \'undefined\' ? self : this',
1112
},
13+
optimization: {
14+
minimizer: [
15+
new TerserPlugin({
16+
sourceMap: true,
17+
terserOptions: {
18+
compress: {
19+
drop_console: true,
20+
},
21+
},
22+
}),
23+
],
24+
}
1225
});

dev/Dev.vue

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,18 @@
22
<div id="app">
33
<sandbox hide-help>
44
<template slot-scope="config">
5+
6+
<p>Value managed by `v-model`:</p>
7+
<v-select v-model="vModelValue" v-bind="config" />
8+
<pre><code>`v-model` value: {{ vModelValueStringified }}</code></pre>
9+
<hr />
510

11+
<p>Value managed by `:value` and `@input`:</p>
12+
<v-select :value="valueProp" @input="changeValueProp" v-bind="config" />
13+
<pre><code>value passed to `@input`: {{ valuePropStringified }}</code></pre>
14+
<hr />
15+
16+
<p>Value managed by Vue Select internally:</p>
617
<v-select v-bind="config" />
718

819
</template>
@@ -18,6 +29,30 @@ import Sandbox from '../docs/.vuepress/components/Sandbox';
1829
1930
export default {
2031
components: {Sandbox, vSelect},
32+
data: () => ({
33+
vModelValue: {
34+
value: 'CA',
35+
label: 'Canada'
36+
},
37+
valueProp: {
38+
value: 'US',
39+
label: 'United States'
40+
}
41+
}),
42+
methods: {
43+
changeValueProp(value) {
44+
this.valueProp = value;
45+
}
46+
},
47+
computed: {
48+
vModelValueStringified() {
49+
return JSON.stringify(this.vModelValue, null, 2);
50+
},
51+
52+
valuePropStringified() {
53+
return JSON.stringify(this.valueProp, null, 2);
54+
}
55+
}
2156
};
2257
</script>
2358

@@ -32,4 +67,12 @@ export default {
3267
#app {
3368
height: 100%;
3469
}
70+
71+
hr {
72+
border: none;
73+
border-bottom: 1px solid #cacaca;
74+
margin-bottom: 1em;
75+
padding-top: 1em;
76+
width: 90%;
77+
}
3578
</style>

docs/api/props.md

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -189,21 +189,6 @@ getOptionLabel: {
189189
},
190190
```
191191

192-
## onChange
193-
194-
An optional callback function that is called each time the selected
195-
value(s) change. When integrating with Vuex, use this callback to trigger
196-
an action, rather than using `v-model` to retrieve the selected value.
197-
198-
```js
199-
onChange: {
200-
type: Function,
201-
default: function(val) {
202-
this.$emit("input", val);
203-
}
204-
},
205-
```
206-
207192
## onTab
208193

209194
Select the current value if `selectOnTab` is enabled
@@ -311,7 +296,7 @@ User defined function for adding Options
311296
createOption: {
312297
type: Function,
313298
default(newOption) {
314-
if (typeof this.mutableOptions[0] === "object") {
299+
if (typeof this.optionList[0] === "object") {
315300
newOption = { [this.label]: newOption };
316301
}
317302
this.$emit("option:created", newOption);

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"postcss-loader": "^3.0.0",
5252
"postcss-scss": "^2.0.0",
5353
"sass-loader": "^7.1.0",
54+
"terser-webpack-plugin": "^1.2.3",
5455
"url-loader": "^1.1.2",
5556
"vue": "^2.6.4",
5657
"vue-html-loader": "^1.2.4",

0 commit comments

Comments
 (0)