V3 - Remove mutable class properties plus other misc changes

.travis.yml

@@ -5,5 +5,4 @@ node_js:
   - node
 
 script:
-  - yarn test --coverage --coverageReporters=text-lcov
-  - codecov
+  - yarn test --coverage --coverageReporters=text-lcov | coveralls

build/webpack.prod.conf.js

@@ -1,3 +1,4 @@
+const TerserPlugin = require('terser-webpack-plugin');
 const merge = require('webpack-merge');
 const baseWebpackConfig = require('./webpack.base.conf');
 
@@ -9,4 +10,16 @@ module.exports = merge(baseWebpackConfig, {
     libraryTarget: 'umd',
     globalObject: 'typeof self !== \'undefined\' ? self : this',
   },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        sourceMap: true,
+        terserOptions: {
+          compress: {
+            drop_console: true,
+          },
+        },
+      }),
+    ],
+  }
 });

dev/Dev.vue

@@ -2,7 +2,18 @@
   <div id="app">
     <sandbox hide-help>
       <template slot-scope="config">
+
+      <p>Value managed by `v-model`:</p>
+      <v-select v-model="vModelValue" v-bind="config" />
+      <pre><code>`v-model` value: {{ vModelValueStringified }}</code></pre>
+      <hr />
 
+      <p>Value managed by `:value` and `@input`:</p>
+      <v-select :value="valueProp" @input="changeValueProp" v-bind="config" />
+      <pre><code>value passed to `@input`: {{ valuePropStringified }}</code></pre>
+      <hr />
+
+      <p>Value managed by Vue Select internally:</p>
       <v-select v-bind="config" />
 
       </template>
@@ -18,6 +29,30 @@ import Sandbox from '../docs/.vuepress/components/Sandbox';
 
 export default {
   components: {Sandbox, vSelect},
+  data: () => ({
+    vModelValue: {
+      value: 'CA',
+      label: 'Canada'
+    },
+    valueProp: {
+      value: 'US',
+      label: 'United States'
+    }
+  }),
+  methods: {
+    changeValueProp(value) {
+      this.valueProp = value;
+    }
+  },
+  computed: {
+    vModelValueStringified() {
+      return JSON.stringify(this.vModelValue, null, 2);
+    },
+
+    valuePropStringified() {
+      return JSON.stringify(this.valueProp, null, 2);
+    }
+  }
 };
 </script>
 
@@ -32,4 +67,12 @@ export default {
   #app {
     height: 100%;
   }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid #cacaca;
+    margin-bottom: 1em;
+    padding-top: 1em;
+    width: 90%;
+  }
 </style>

docs/api/props.md

@@ -189,21 +189,6 @@ getOptionLabel: {
 },
 ```
 
-## onChange
-
-An optional callback function that is called each time the selected
-value(s) change. When integrating with Vuex, use this callback to trigger
-an action, rather than using `v-model` to retrieve the selected value.
-
-```js
-onChange: {
-	type: Function,
-	default: function(val) {
-		this.$emit("input", val);
-	}
-},
-```
-
 ## onTab
 
 Select the current value if `selectOnTab` is enabled
@@ -311,7 +296,7 @@ User defined function for adding Options
 createOption: {
 	type: Function,
 	default(newOption) {
-		if (typeof this.mutableOptions[0] === "object") {
+		if (typeof this.optionList[0] === "object") {
 			newOption = { [this.label]: newOption };
 		}
 		this.$emit("option:created", newOption);

package.json

@@ -51,6 +51,7 @@
     "postcss-loader": "^3.0.0",
     "postcss-scss": "^2.0.0",
     "sass-loader": "^7.1.0",
+    "terser-webpack-plugin": "^1.2.3",
     "url-loader": "^1.1.2",
     "vue": "^2.6.4",
     "vue-html-loader": "^1.2.4",