vue-multiselect - npm Package Compare versions

Comparing version 2.1.6 to 3.0.0-alpha.1

package.json

 {
   "name": "vue-multiselect",
-  "version": "2.1.6",
+  "version": "3.0.0-alpha.1",
   "private": false,
-  "types": "index.d.ts",
+  "description": "Multiselect component for Vue 3",
+  "author": {
+    "name": "Damian Dulisz",
+    "email": "[e-mail]"
+  },
+  "contributors": [
+    "Matt Elen <[e-mail]>"
+  ],
   "scripts": {
-    "test": "vue-cli-service test:unit",
-    "lint": "eslint --ext .js,.vue src tests/unit/specs",
-    "dev": "node build/dev-server.js",
-    "bundle:dist": "rm -rf dist && webpack --config build/webpack.bundle.conf.js",
-    "bundle": "node build/bundle.js",
-    "prepare": "npm run bundle",
-    "docs": "rm -rf docs && mkdir docs && node build/build.js",
-    "unit": "vue-cli-service test:unit --watch",
-    "finish": "npm run lint && npm test && npm run bundle"
+    "lint": "vue-cli-service lint",
+    "bundle": "vue-cli-service build --target lib ./src/index.js && rm -rf ./dist/demo.html && rollup -c --environment BUILD:production",
+    "finish": "npm run lint && npm test && npm run bundle",
+    "test": "vue-cli-service test:unit"
   },
+  "main": "dist/vue-multiselect.esm.js",
+  "unpkg": "dist/vue-multiselect.umd.min.js",
+  "jsnext:main": "dist/vue-multiselect.esm.js",
+  "files": [
+    "dist",
+    "src"
+  ],
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.4",
-    "@vue/cli-plugin-unit-jest": "^3.0.4",
-    "@vue/cli-service": "^3.0.4",
-    "@vue/test-utils": "^1.0.0-beta.25",
-    "autoprefixer": "^6.7.2",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^7.0.0-0",
-    "babel-eslint": "^7.1.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.2",
-    "babel-jest": "^22.0.4",
-    "babel-loader": "^6.2.10",
-    "babel-plugin-istanbul": "^3.1.2",
-    "babel-plugin-syntax-jsx": "^6.13.0",
-    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
-    "babel-plugin-transform-export-extensions": "^6.8.0",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-plugin-transform-runtime": "^6.0.0",
-    "babel-plugin-transform-vue-jsx": "^2.0.2",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-stage-2": "^6.22.0",
-    "babel-register": "^6.26.0",
-    "chalk": "^1.1.3",
-    "connect-history-api-fallback": "^1.1.0",
-    "copy-webpack-plugin": "^4.0.0",
-    "cross-env": "^3.1.4",
-    "cssnano": "^4.1.7",
-    "css-loader": "^0.25.0",
-    "es6-promise": "^4.2.4",
-    "eslint": "^3.14.1",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/test-utils": "^2.0.0-0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "core-js": "^3.6.5",
+    "eslint": "^6.7.2",
     "eslint-config-standard": "^6.1.0",
-    "eslint-friendly-formatter": "^2.0.5",
-    "eslint-loader": "^1.6.1",
-    "eslint-plugin-html": "^2.0.0",
+    "eslint-plugin-html": "^6.0.0",
     "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^2.0.1",
-    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.16.3",
-    "extract-text-webpack-plugin": "^2.0.0-rc.3",
-    "file-loader": "^0.10.0",
-    "friendly-errors-webpack-plugin": "^1.1.3",
-    "function-bind": "^1.1.0",
-    "html-loader": "^0.4.4",
-    "html-webpack-plugin": "^2.28.0",
-    "http-proxy-middleware": "^0.19.0",
-    "inject-loader": "^2.0.1",
-    "json-loader": "^0.5.4",
-    "jstransformer-markdown-it": "^2.0.0",
-    "lolex": "^1.5.2",
-    "node-sass": "^4.9.3",
-    "opn": "^4.0.2",
-    "optimize-css-assets-webpack-plugin": "^1.3.0",
-    "ora": "^0.3.0",
-    "pug": "^2.0.0-beta11",
-    "pug-loader": "^2.3.0",
-    "raw-loader": "^0.5.1",
-    "sass-loader": "^6.0.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.4",
-    "url-loader": "^0.5.7",
-    "vue": "^2.5.15",
-    "vue-hot-reload-api": "^1.2.0",
-    "vue-html-loader": "^1.0.0",
-    "vue-loader": "^13.3.0",
-    "vue-style-loader": "^2.0.0",
-    "vue-template-compiler": "^2.5.15",
-    "vue-template-es2015-compiler": "^1.6.0",
-    "vuex": "^2.1.1",
-    "webpack": "^2.2.1",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "webpack-dev-middleware": "^1.10.0",
-    "webpack-hot-middleware": "^2.16.1",
-    "webpack-merge": "^2.6.1"
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^7.0.0-0",
+    "node-sass": "4.14.1",
+    "rollup": "^2.46.0",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "sass-loader": "10.1.1",
+    "typescript": "~3.9.3",
+    "vue": "^3.0.0",
+    "vue-jest": "^5.0.0-alpha.7"
   },
-  "license": "MIT",
-  "homepage": "https://shentao.github.io/vue-multiselect/",
-  "main": "dist/vue-multiselect.min.js",
-  "author": "Damian Dulisz <[e-mail]>",
-  "jsnext:main": "dist/vue-multiselect.min.js",
   "bugs": {
-    "url": "https://github.com/shentao/vue-multiselect/issues"
+    "url": "https://github.com/suadelabs/vue-multiselect/issues"
   },
-  "jspm": {
-    "main": "dist/vue-multiselect.min.js",
-    "registry": "npm",
-    "format": "esm"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/shentao/vue-multiselect.git"
-  },
-  "description": "Multiselect component for vue.js",
-  "unpkg": "dist/vue-multiselect.min.js",
   "engines": {
@@ -114,7 +58,7 @@ "node": ">= 4.0.0",
   },
-  "files": [
-    "dist",
-    "src",
-    "index.d.ts"
-  ]
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/suadelabs/vue-multiselect.git"
+  }
 }

README.md

@@ -1,7 +0,41 @@
-# vue-multiselect ![Build Status](https://circleci.com/gh/shentao/vue-multiselect/tree/2.0.svg?style=shield&circle-token=5c931ff28fd12587610f835472becdd514d09cef)[![Codecov branch](https://img.shields.io/codecov/c/github/shentao/vue-multiselect/2.0.svg)](https://codecov.io/gh/shentao/vue-multiselect/branch/2.0)[![npm](https://img.shields.io/npm/v/vue-multiselect.svg)](https://www.npmjs.com/package/vue-multiselect)
-Probably the most complete *selecting* solution for Vue.js 2.0, without jQuery.
+# vue-multiselect
 
-![Vue-Multiselect Screen](https://raw.githubusercontent.com/shentao/vue-multiselect/2.0/multiselect-screen-203.png)
+## Documentation
 
-### Features & characteristics:
+> Documentation for v3.0.0 is the same as for v2.x as it is mostly backward compatible.
+
+Visit: [vue-multiselect.js.org](https://vue-multiselect.js.org/#sub-getting-started)
+
+## Sponsors
+
+### Gold
+
+<p align="center">
+  <a href="https://vuejs.amsterdam/?utm_source=newsletter&utm_medium=logo&utm_campaign=vuejs-newsletter" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/793583797454503976/793583831369646120/vuejsamsterdam.png" alt="Vuejs Amsterdam" width="380px">
+  </a>
+</p>
+<p align="center">
+  <a href="https://theroadtoenterprise.com/?utm_source=newsletter&utm_medium=logo&utm_campaign=vuejs-newsletter" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/793583797454503976/809062891420123166/logo.png" alt="Vue - The Road To Enterprise" width="380px">
+  </a>
+</p>
+
+### Silver
+
+<p align="center">
+  <a href="https://www.storyblok.com/developers?utm_source=newsletter&utm_medium=logo&utm_campaign=vuejs-newsletter" target="_blank">
+    <img src="https://a.storyblok.com/f/51376/3856x824/fea44d52a9/colored-full.png" alt="Storyblok" width="240px">
+  </a>
+</p>
+
+### Bronze
+
+<p align="center">
+  <a href="https://www.vuemastery.com/" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png" alt="Vue Mastery logo" width="180px">
+  </a>
+</p>
+
+## Features & characteristics:
 * NO dependencies
@@ -19,12 +53,4 @@ * Single select
 * Async options support
-* \> 95% test coverage
-* Fully configurable (see props list below)
+* Fully configurable
 
-## Breaking changes:
-* Instead of Vue.partial for custom option templates you can use a custom render function.
-* The `:key` props has changed to `:track-by`, due to conflicts with Vue 2.0.
-* Support for `v-model`
-* `@update` has changed to `@input` to also work with v-model
-* `:selected` has changed to `:value` for the same reason
-* Browserify users: if you wish to import `.vue` files, please add `vueify` transform.
 
@@ -34,3 +60,3 @@ ## Install & basic usage
 ```bash
-npm install vue-multiselect
+npm install vue-multiselect@next
 ```
@@ -41,6 +67,6 @@
   <div>
-    <multiselect
+    <VueMultiselect
       v-model="selected"
       :options="options">
-    </multiselect>
+    </VueMultiselect>
   </div>
@@ -50,28 +76,24 @@ </template>
 <script>
-  import Multiselect from 'vue-multiselect'
-  export default {
-    components: { Multiselect },
-    data () {
-      return {
-        selected: null,
-        options: ['list', 'of', 'options']
-      }
+import VueMultiselect from 'vue-multiselect'
+export default {
+  components: { VueMultiselect },
+  data () {
+    return {
+      selected: null,
+      options: ['list', 'of', 'options']
     }
   }
+}
 </script>
 
-<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
 ```
 
-## JSFiddle
-
-[Example JSFiddle](https://jsfiddle.net/shentao/s0ugwmjp/) – Use this for issue reproduction.
-
 ## Examples
-in jade-lang/pug-lang
+inhtml-lang/pug-lang
 
 ### Single select / dropdown
-``` jade
-multiselect(
-  :value="value",
+```vue
+<VueMultiselect
+  :model-value="value",
   :options="source",
@@ -81,12 +103,12 @@ :searchable="false",
   :allow-empty="false",
-  @input="updateSelected",
+  @update:model-value="updateSelected",
   label="name",
   placeholder="Select one",
   track-by="name"
-)
+/>
 ```
 
 ### Single select with search
-``` jade
-multiselect(
+```vue
+<VueMultiselect
   v-model="value",
@@ -99,8 +121,8 @@ :options="source",
   track-by="name"
-)
+/>
 ```
 
 ### Multiple select with search
-``` jade
-multiselect(
+```vue
+<VueMultiselect
   v-model="multiValue",
@@ -113,3 +135,3 @@ :options="source",
   track-by="name"
-)
+/>
 ```
@@ -119,4 +141,4 @@
 with `@tag` event
-``` jade
-multiselect(
+```vue
+<VueMultiselect
   v-model="taggingSelected",
@@ -131,3 +153,3 @@ :options="taggingOptions",
   track-by="code"
-)
+/>
 ```
@@ -148,4 +170,4 @@
 ### Asynchronous dropdown
-``` jade
-multiselect(
+```vue
+<VueMultiselect
   v-model="selectedCountries",
@@ -159,5 +181,7 @@ :options="countries",
   track-by="code"
-)
-  span(slot="noResult").
+>
+  <span slot="noResult">
     Oops! No elements found. Consider changing the search query.
+  </span>
+</VueMultiselect>
 ```
@@ -173,22 +197,17 @@
 
+## Special Thanks
+
+Thanks to Matt Elen for contributing this version!
+
+> A Vue 3 upgrade of [@shentao's](https://github.com/shentao) [vue-mulitselect](https://github.com/shentao/vue-multiselect) component. The idea is that when you upgrade to Vue 3, you can swap the two components out, and everything should simply work. Feel free to check out our story of how we upgraded our product to Vue 3 on our blog at  [suade.org](https://suade.org/dev/a-products-vue-3-migration-a-real-life-story/)
+
 ## Contributing
 
 ``` bash
-# serve with hot reload at localhost:8080
-npm run dev
-
 # distribution build with minification
 npm run bundle
 
-# build the documentation into docs
-npm run docs
-
 # run unit tests
 npm run test
 
-# run unit tests watch
-npm run unit
-
 ```
-
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

src/index.js

@@ -1,7 +0,7 @@
-import Multiselect from './Multiselect'
-import multiselectMixin from './multiselectMixin'
-import pointerMixin from './pointerMixin'
+import Multiselect from './Multiselect.vue'
+import multiselectMixin from './multiselectMixin.js'
+import pointerMixin from './pointerMixin.js'
 
 export default Multiselect
 
-export { Multiselect, multiselectMixin, pointerMixin }
+export {Multiselect, multiselectMixin, pointerMixin}

src/multiselectMixin.js

@@ -21,7 +21,9 @@ function isEmpty (opt) {
 function filterOptions (options, search, label, customLabel) {
-  return options.filter(option => includes(customLabel(option, label), search))
+  return search ? options
+    .filter((option) => includes(customLabel(option, label), search))
+    .sort((a, b) => customLabel(a, label).length - customLabel(b, label).length) : options
 }
 
 function stripGroups (options) {
-  return options.filter(option => !option.$isLabel)
+  return options.filter((option) => !option.$isLabel)
 }
@@ -46,3 +48,3 @@
   return (groups) =>
-    groups.map(group => {
+    groups.map((group) => {
       /* istanbul ignore else */
@@ -64,3 +66,3 @@ if (!group[values]) {
 
-const flow = (...fns) => x => fns.reduce((v, f) => f(v), x)
+const flow = (...fns) => (x) => fns.reduce((v, f) => f(v), x)
 
@@ -106,12 +108,2 @@ export default {
     /**
-     * Presets the selected options value.
-     * @type {Object||Array||String||Integer}
-     */
-    value: {
-      type: null,
-      default () {
-        return []
-      }
-    },
-    /**
      * Key to compare objects
@@ -339,4 +331,4 @@ * @default 'id'
     internalValue () {
-      return this.value || this.value === 0
-        ? Array.isArray(this.value) ? this.value : [this.value]
+      return this.modelValue || this.modelValue === 0
+        ? Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue]
         : []
@@ -366,5 +358,5 @@ },
         if (this.tagPosition === 'bottom') {
-          options.push({ isTag: true, label: search })
+          options.push({isTag: true, label: search})
         } else {
-          options.unshift({ isTag: true, label: search })
+          options.unshift({isTag: true, label: search})
         }
@@ -377,3 +369,3 @@ }
       if (this.trackBy) {
-        return this.internalValue.map(element => element[this.trackBy])
+        return this.internalValue.map((element) => element[this.trackBy])
       } else {
@@ -385,3 +377,3 @@ return this.internalValue
       const options = this.groupValues ? this.flatAndStrip(this.options) : this.options
-      return options.map(element => this.customLabel(element, this.label).toString().toLowerCase())
+      return options.map((element) => this.customLabel(element, this.label).toString().toLowerCase())
     },
@@ -401,9 +393,10 @@ currentOptionLabel () {
         this.search = ''
-        this.$emit('input', this.multiple ? [] : null)
+        this.$emit('update:modelValue', this.multiple ? [] : null)
       }
     },
     search () {
-      this.$emit('search-change', this.search, this.id)
+      this.$emit('search-change', this.search)
     }
   },
+  emits: ['open', 'search-change', 'close', 'select', 'update:modelValue', 'remove', 'tag'],
   methods: {
@@ -424,3 +417,3 @@ /**
      * @param  {Array}
-     * @returns {Array} returns a filtered and flat options list
+     * @return {Array} returns a filtered and flat options list
      */
@@ -436,3 +429,3 @@ filterAndFlat (options, search, label) {
      * @param  {Array}
-     * @returns {Array} returns a flat options list without group labels
+     * @return {Array} returns a flat options list without group labels
      */
@@ -456,3 +449,3 @@ flatAndStrip (options) {
      * @param  {String}
-     * @returns {Boolean} returns true if element is available
+     * @return {Boolean} returns true if element is available
      */
@@ -499,3 +492,3 @@ isExistingOption (query) {
 
-      let label = this.customLabel(option, this.label)
+      const label = this.customLabel(option, this.label)
       /* istanbul ignore else */
@@ -543,5 +536,5 @@ if (isEmpty(label)) return ''
         if (this.multiple) {
-          this.$emit('input', this.internalValue.concat([option]), this.id)
+          this.$emit('update:modelValue', this.internalValue.concat([option]))
         } else {
-          this.$emit('input', option, this.id)
+          this.$emit('update:modelValue', option)
         }
@@ -562,3 +555,3 @@
     selectGroup (selectedGroup) {
-      const group = this.options.find(option => {
+      const group = this.options.find((option) => {
         return option[this.groupLabel] === selectedGroup.$groupLabel
@@ -573,9 +566,9 @@ })
         const newValue = this.internalValue.filter(
-          option => group[this.groupValues].indexOf(option) === -1
+          (option) => group[this.groupValues].indexOf(option) === -1
         )
 
-        this.$emit('input', newValue, this.id)
+        this.$emit('update:modelValue', newValue)
       } else {
         const optionsToAdd = group[this.groupValues].filter(
-          option => !(this.isOptionDisabled(option) || this.isSelected(option))
+          (option) => !(this.isOptionDisabled(option) || this.isSelected(option))
         )
@@ -585,7 +578,8 @@
         this.$emit(
-          'input',
-          this.internalValue.concat(optionsToAdd),
-          this.id
+          'update:modelValue',
+          this.internalValue.concat(optionsToAdd)
         )
       }
+
+      if (this.closeOnSelect) this.deactivate()
     },
@@ -598,3 +592,3 @@ /**
     wholeGroupSelected (group) {
-      return group[this.groupValues].every(option => this.isSelected(option) || this.isOptionDisabled(option)
+      return group[this.groupValues].every((option) => this.isSelected(option) || this.isOptionDisabled(option)
       )
@@ -616,3 +610,3 @@ },
      * @param  {type} option description
-     * @returns {type}        description
+     * @return {type}        description
      */
@@ -637,5 +631,5 @@ removeElement (option, shouldClose = true) {
         const newValue = this.internalValue.slice(0, index).concat(this.internalValue.slice(index + 1))
-        this.$emit('input', newValue, this.id)
+        this.$emit('update:modelValue', newValue)
       } else {
-        this.$emit('input', null, this.id)
+        this.$emit('update:modelValue', null)
       }
@@ -678,3 +672,3 @@
         if (!this.preserveSearch) this.search = ''
-        this.$nextTick(() => this.$refs.search.focus())
+        this.$nextTick(() => this.$refs.search && this.$refs.search.focus())
       } else {
@@ -696,3 +690,3 @@ this.$el.focus()
       if (this.searchable) {
-        this.$refs.search.blur()
+        this.$refs.search && this.$refs.search.blur()
       } else {
@@ -699,0 +693,0 @@ this.$el.blur()

src/pointerMixin.js

@@ -37,2 +37,5 @@ export default {
       this.pointerDirty = false
+    },
+    pointer () {
+      this.$refs.search.setAttribute('aria-activedescendant', this.id + '-' + this.pointer.toString())
     }
@@ -49,6 +52,9 @@ },
       if (!this.groupSelect) {
-        return ['multiselect__option--group', 'multiselect__option--disabled']
+        return [
+          'multiselect__option--disabled',
+          {'multiselect__option--group': selectedGroup.$isLabel}
+        ]
       }
 
-      const group = this.options.find(option => {
+      const group = this.options.find((option) => {
         return option[this.groupLabel] === selectedGroup.$groupLabel
@@ -59,7 +65,7 @@ })
         'multiselect__option--group',
-        { 'multiselect__option--highlight': index === this.pointer && this.showPointer },
-        { 'multiselect__option--group-selected': this.wholeGroupSelected(group) }
+        {'multiselect__option--highlight': index === this.pointer && this.showPointer},
+        {'multiselect__option--group-selected': this.wholeGroupSelected(group)}
       ] : 'multiselect__option--disabled'
     },
-    addPointerElement ({ key } = 'Enter') {
+    addPointerElement ({key} = 'Enter') {
       /* istanbul ignore else */
@@ -66,0 +72,0 @@ if (this.filteredOptions.length > 0) {

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

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

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

1103216

increased by834.37%

Dev dependency count

23

decreased by-68.06%

Number of package files

20

increased by81.82%

Lines of code

13062

increased by1477.54%

Number of lines in readme file

202

increased by10.38%

Worsened metrics

Number of low quality alerts

3

increased byInfinity%

Number of medium supply chain risk alerts

7

increased byInfinity%

No dependency changes