vue-multiselect - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

package.json

 {
   "name": "vue-multiselect",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Multiselect component for vue.js",
@@ -37,3 +37,2 @@ "author": "Damian Dulisz <[e-mail]>",
     "chai": "3.5.0",
-    "chromedriver": "2.21.2",
     "connect-history-api-fallback": "1.1.0",
@@ -40,0 +39,0 @@ "cross-spawn": "2.1.5",

README.md

@@ -49,2 +49,12 @@ # vue-multiselect ![Build Status](https://circleci.com/gh/monterail/vue-multiselect/tree/master.svg?style=shield&circle-token=5c931ff28fd12587610f835472becdd514d09cef)
 
+## TODO:
+
+* Update docs: How to use available slots and configuration props
+* Update docs: How to use mixins to create custom select components
+* Add option groups
+* Update docs: Add more examples
+* Provide a way to customize the option list (showing more than just the label). Probably using slots/partials.
+* Create a headless and stateless dropdown component (could be attached to buttons or icons and act as a action trigger)
+* Fix problem with not counting the height of the option element when creating a custom element. This is important for scrolling the options viewport when using highlighting pointer.
+
 ## Examples
@@ -331,2 +341,43 @@ in jade-lang/pug-lang
 }
+
+// Multiselect.vue
+
+props: {
+  /**
+   * String to show when pointing to an option
+   * @default 'Press enter to select'
+   * @type {String}
+   */
+  selectLabel: {
+    type: String,
+    default: 'Press enter to select'
+  },
+  /**
+   * String to show next to selected option
+   * @default 'Selected'
+   * @type {String}
+  */
+  selectedLabel: {
+    type: String,
+    default: 'Selected'
+  },
+  /**
+   * String to show when pointing to an alredy selected option
+   * @default 'Press enter to remove'
+   * @type {String}
+  */
+  deselectLabel: {
+    type: String,
+    default: 'Press enter to remove'
+  },
+  /**
+   * Decide whether to show pointer labels
+   * @default true
+   * @type {Boolean}
+  */
+  showLabels: {
+    type: Boolean,
+    default: true
+  }
+}
 ```
@@ -344,3 +395,3 @@
 # run unit tests
-npm run unit
+npm run test
 
@@ -347,0 +398,0 @@ # run unit tests watch

src/mixins/multiselectMixin.js

@@ -0,1 +1,18 @@
+// Copied from Vuex’s util.js
+function deepClone (obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(deepClone)
+  } else if (obj && typeof obj === 'object') {
+    var cloned = {}
+    var keys = Object.keys(obj)
+    for (var i = 0, l = keys.length; i < l; i++) {
+      var key = keys[i]
+      cloned[key] = deepClone(obj[key])
+    }
+    return cloned
+  } else {
+    return obj
+  }
+}
+
 module.exports = {
@@ -179,3 +196,3 @@ data () {
     } else {
-      this.$set('value', JSON.parse(JSON.stringify(this.selected)))
+      this.value = deepClone(this.selected)
     }
@@ -206,6 +223,6 @@ if (this.searchable && !this.multiple) {
     'value' () {
-      if (this.onChange) {
-        this.onChange(this.value)
+      if (this.onChange && JSON.stringify(this.value) !== JSON.stringify(this.selected)) {
+        this.onChange(deepClone(this.value))
       } else {
-        this.$set('selected', this.value)
+        this.$set('selected', deepClone(this.value))
       }
@@ -217,3 +234,3 @@ if (this.resetAfter) {
       }
-      if (!this.multiple && this.searchable && !this.clearOnSelect) {
+      if (!this.multiple && this.searchable && this.clearOnSelect) {
         this.search = this.getOptionLabel(this.value)
@@ -232,3 +249,5 @@ }
     'selected' (newVal, oldVal) {
-      newVal !== oldVal && (this.value = this.selected)
+      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+        this.value = deepClone(this.selected)
+      }
     }
@@ -274,4 +293,5 @@ },
         }
+      } else {
+        return option
       }
-      return option
     },
@@ -278,0 +298,0 @@ /**

test/unit/specs/Multiselect.spec.js

@@ -503,3 +503,3 @@ import Vue from 'vue'
   describe('#watch:selected', () => {
-    it('updates multiselect value when parent selected changes', (done) => {
+    it('updates multiselect private value when parent selected changes to a different value than private value', (done) => {
       const vm = new Vue({
@@ -543,4 +543,5 @@ template: '<multiselect :selected="sel" :options="source" label="id" key="id" :searchable="false" :on-change="addMore" :multiple="false"></multiselect>',
       vm.$children[0].select(vm.$children[0].options[0])
+      vm.$children[0].select(vm.$children[0].options[1])
       Vue.nextTick(function () {
-        expect(vm.newValue).to.deep.equal({ id: '1' })
+        expect(vm.newValue).to.deep.equal({ id: '2' })
         expect(vm.$children[0].selected).to.deep.equal(null)
@@ -589,5 +590,5 @@ done()
 
-    it('set search to value after change when clearOnSelect and multiple are FALSE and searchable is TRUE', (done) => {
+    it('set search to value after change when clearOnSelect is TRUE and multiple is FALSE and searchable is TRUE', (done) => {
       const vm = new Vue({
-        template: '<multiselect :selected="value" :options="source" label="id" key="id" :searchable="true" :clear-on-select="false"></multiselect>',
+        template: '<multiselect :selected="value" :options="source" label="id" key="id" :searchable="true" :clear-on-select="true"></multiselect>',
         components: { Multiselect },
@@ -611,3 +612,3 @@ data: {
       const vm = new Vue({
-        template: '<multiselect :selected="value" :options="source" label="id" key="id" :searchable="true" :on-search-change="afterSearch"></multiselect>',
+        template: '<multiselect :selected="value" :options="source" label="id" key="id" :searchable="true" :on-search-change="afterSearch" :clear-on-select="false"></multiselect>',
         components: { Multiselect },
@@ -614,0 +615,0 @@ data: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

225759

increased by9.72%

Dev dependency count

55

decreased by-1.79%

Number of package files

62

increased by1.64%

Lines of code

2876

increased by0.7%

Number of lines in readme file

401

increased by14.57%

No dependency changes