vue-multiselect - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

package.json

 {
   "name": "vue-multiselect",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Multiselect component for vue.js",
@@ -5,0 +5,0 @@ "author": "Damian Dulisz <[e-mail]>",

README.md

@@ -49,9 +49,22 @@ # vue-multiselect ![Build Status](https://circleci.com/gh/monterail/vue-multiselect/tree/master.svg?style=shield&circle-token=5c931ff28fd12587610f835472becdd514d09cef)
 
+You can now author custom components based on *vue-multiselect* mixins.
+
+``` javascript
+import { multiselectMixin, pointerMixin } from 'vue-multiselect'
+export default {
+  mixins: [multiselectMixin, pointerMixin],
+  data () {
+    return {
+      selected: null,
+      options: ['list', 'of', 'options']
+    }
+  }
+}
+```
+
 ## 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)
@@ -107,2 +120,32 @@ * 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.
 
+### Tagging
+with `:on-tag` and `:on-change` callback functions
+``` jade
+multiselect(
+  :options="taggingOptions",
+  :selected="taggingSelected",
+  :multiple="multiple",
+  :searchable="searchable",
+  :on-tag="addTag",
+  :on-change="updateSelectedTagging",
+  :taggable="true",
+  tag-placeholder="Add this as new tag"
+  placeholder="Type to search or add tag"
+  label="name"
+  key="code"
+)
+```
+
+``` javascript
+
+addTag (newTag) {
+  const tag = {
+    name: newTag,
+    code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
+  }
+  this.taggingOptions.push(tag)
+  this.taggingSelected.push(tag)
+},
+```
+
 ### Vuex supporting example
@@ -168,10 +211,6 @@ with `:on-change` callback function
     type: Array,
-    required: true,
-    /* istanbul ignore next  */
-    default () {
-      return []
-    }
+    required: true
   },
   /**
-   * Equivalent to the `multiple` attribute on a select input.
+   * Equivalent to the `multiple` attribute on a `<select>` input.
    * @default false
@@ -201,3 +240,3 @@ * @type {Boolean}
     type: String,
-    default: 'id'
+    default: false
   },
@@ -211,14 +250,5 @@ /**
     type: String,
-    default: 'label'
+    default: false
   },
   /**
-   * Label to look for in option Object
-   * @default 'label'
-   * @type {String}
-   */
-  limit: {
-    type: Number,
-    default: 99999
-  },
-  /**
    * Enable/disable search in options
@@ -251,3 +281,3 @@ * @default true
   /**
-   * Equivalent to the placeholder attribute on a select input.
+   * Equivalent to the `placeholder` attribute on a `<select>` input.
    * @default 'Select option'
@@ -330,2 +360,42 @@ * @type {String}
     default: true
+  },
+  /**
+   * Function to interpolate the custom label
+   * @default false
+   * @type {Function}
+   */
+  customLabel: {
+    type: Function,
+    default: false
+  },
+  /**
+   * Disable / Enable tagging
+   * @default false
+   * @type {Boolean}
+   */
+  taggable: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Callback function to run when attemting to add a tag
+   * @default suitable for primitive values
+   * @param {String} Tag string to build a tag
+   * @type {Function}
+   */
+  onTag: {
+    type: Function,
+    default: function (tag) {
+      this.options.push(tag)
+      this.value.push(tag)
+    }
+  },
+  /**
+   * String to show when highlighting a potential tag
+   * @default 'Press enter to create a tag'
+   * @type {String}
+  */
+  tagPlaceholder: {
+    type: String,
+    default: 'Press enter to create a tag'
   }
@@ -386,2 +456,22 @@ }
     default: true
+  },
+  /**
+   * Label to look for in option Object
+   * @default 'label'
+   * @type {String}
+   */
+  limit: {
+    type: Number,
+    default: 99999
+  },
+  /**
+   * Function that process the message shown when selected
+   * elements pass the defined limit.
+   * @default 'and * more'
+   * @param {Int} count Number of elements more than limit
+   * @type {Function}
+   */
+  limitText: {
+    type: Function,
+    default: count => `and ${count} more`
   }
@@ -388,0 +478,0 @@ }

src/index.js

@@ -0,1 +1,6 @@
+/*!
+ * vue-multiselect v0.1.20
+ * (c) 2016 Damian Dulisz
+ * Released under the MIT License.
+ */
 import Multiselect from './Multiselect'
@@ -2,0 +7,0 @@ import multiselectMixin from './multiselectMixin'

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

419691

increased by0.47%

Lines of code

2836

increased by0.18%

Number of lines in readme file

491

increased by22.44%

Number of medium supply chain risk alerts

1

decreased by-50%

No dependency changes