vue-multiselect - npm Package Compare versions

Comparing version 0.1.9 to 0.2.0

build/build.js

@@ -9,3 +9,3 @@ // https://github.com/shelljs/shelljs
 var webpack = require('webpack')
-var webpackConfig = require('./webpack.prod.conf')
+var webpackConfig = require('./webpack.docs.conf')
 
@@ -21,3 +21,3 @@ console.log(
 
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
+var assetsPath = path.join(config.docs.assetsRoot, config.docs.assetsSubDirectory)
 rm('-rf', assetsPath)
@@ -24,0 +24,0 @@ mkdir('-p', assetsPath)

build/dev-server.js

@@ -7,3 +7,3 @@ var path = require('path')
 var webpackConfig = process.env.NODE_ENV === 'testing'
-  ? require('./webpack.prod.conf')
+  ? require('./webpack.docs.conf')
   : require('./webpack.dev.conf')
@@ -10,0 +10,0 @@

build/webpack.base.conf.js

@@ -8,3 +8,3 @@ var path = require('path')
   entry: {
-    app: './src/main.js'
+    app: './docs/main.js'
   },
@@ -21,4 +21,3 @@ output: {
       'src': path.resolve(__dirname, '../src'),
-      'assets': path.resolve(__dirname, '../src/assets'),
-      'components': path.resolve(__dirname, '../src/components')
+      'docs': path.resolve(__dirname, '../docs')
     }
@@ -25,0 +24,0 @@ },

config.js

@@ -12,6 +12,18 @@ // see http://vuejs-templates.github.io/webpack for documentation.
   },
+  bundle: {
+    assetsRoot: path.resolve(__dirname, 'lib'),
+    assetsPublicPath: '/'
+  },
+  docs: {
+    index: path.resolve(__dirname, 'gh-pages/index.html'),
+    assetsRoot: path.resolve(__dirname, 'gh-pages'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '',
+    productionSourceMap: true
+  },
   dev: {
     port: 8080,
-    proxyTable: {}
+    proxyTable: {},
+    assetsPublicPath: '/'
   }
 }

package.json

 {
   "name": "vue-multiselect",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "Multiselect component for vue.js",
@@ -8,6 +8,6 @@ "author": "Damian Dulisz <[e-mail]>",
   "license": "MIT",
-  "main": "src/components/Multiselect.vue",
-  "jsnext:main": "src/components/Multiselect.vue",
+  "main": "lib/vue-multiselect.js",
+  "jsnext:main": "lib/vue-multiselect.js",
   "jspm": {
-    "main": "src/components/Multiselect.vue",
+    "main": "lib/vue-multiselect.js",
     "registry": "npm",
@@ -22,9 +22,13 @@ "format": "esm"
     "dev": "node build/dev-server.js",
-    "build": "node build/build.js",
+    "docs": "rm -rf gh-pages && mkdir gh-pages && node build/build.js",
     "test": "karma start test/unit/karma.conf.js --single-run",
     "unit-watch": "karma start test/unit/karma.conf.js --watch",
-    "lint": "eslint --ext .js,.vue src test/unit/specs"
+    "lint": "eslint --ext .js,.vue src test/unit/specs",
+    "bundle": "webpack --config build/webpack.bundle.conf.js"
   },
   "browserify": {
-    "transform": ["vueify", "babelify"]
+    "transform": [
+      "vueify",
+      "babelify"
+    ]
   },
@@ -40,2 +44,3 @@ "devDependencies": {
     "connect-history-api-fallback": "^1.1.0",
+    "copy-webpack-plugin": "^3.0.1",
     "cross-spawn": "^2.1.5",
@@ -42,0 +47,0 @@ "css-loader": "^0.23.0",

src/index.js

@@ -1,1 +0,9 @@
-require('./components/Multiselect')
+import Multiselect from './Multiselect'
+import multiselectMixin from './multiselectMixin'
+import pointerMixin from './pointerMixin'
+
+module.exports = {
+  Multiselect: Multiselect,
+  multiselectMixin: multiselectMixin,
+  pointerMixin: pointerMixin
+}

test/unit/index.js

@@ -12,3 +12,3 @@ // Polyfill fn.bind() for PhantomJS
 // you want coverage for.
-var srcContext = require.context('../../src/mixins', true, /^\.\/(?!main(\.js)?$)/)
+var srcContext = require.context('../../src/', true, /^\.\/(?!main(\.js)?$)/)
 srcContext.keys().forEach(srcContext)

test/unit/specs/Multiselect.spec.js

 import Vue from 'vue'
-import Multiselect from 'src/components/Multiselect'
+import Multiselect from 'src/Multiselect'
 
@@ -773,2 +773,29 @@ describe('Multiselect.vue', () => {
 
+  describe('#isExistingOption()', () => {
+    it('should return FALSE when there are no options to look into', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :options="source" :multiple="true"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: null,
+          source: []
+        }
+      }).$mount()
+      expect(vm.$children[0].isExistingOption('test')).to.equal(false)
+    })
+
+    it('should return TRUE only when query has matching option', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :options="source" :multiple="true"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: ['2'],
+          source: ['1', '2', '3']
+        }
+      }).$mount()
+      expect(vm.$children[0].isExistingOption('1')).to.equal(true)
+      expect(vm.$children[0].isExistingOption('4')).to.equal(false)
+    })
+  })
+
   describe('#isNotSelected()', () => {
@@ -867,4 +894,84 @@ it('should return FALSE when passed option is selected when multiple == TRUE', () => {
     })
+
+    it('should return customLabel’s interpolation if set', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :options="source" :multiple="true" label="id" key="id" :custom-label="idWithId"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: [],
+          source: [{ id: '1' }, { id: '2' }, { id: '3' }],
+          idWithId ({id}) {
+            return `${id}+${id}`
+          }
+        }
+      }).$mount()
+      const option = vm.$children[0].options[2]
+      expect(vm.$children[0].getOptionLabel(option)).to.equal('3+3')
+    })
   })
 
+  describe('valueKeys', () => {
+    it('should return primitive value Array when no :key is provided', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :searchable="true" :options="source" :multiple="true"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: [1, 2],
+          source: [1, 2, 3]
+        }
+      }).$mount()
+      expect(vm.$children[0].valueKeys).to.deep.equal([1, 2])
+    })
+
+    it('should return an Array maped from option[key] values when multiple is TRUE', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :searchable="true" :options="source" label="id" key="id" :multiple="true"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: [{ id: '1' }, { id: '2' }],
+          source: [{ id: '1' }, { id: '2' }, { id: '3' }]
+        }
+      }).$mount()
+      expect(vm.$children[0].valueKeys).to.deep.equal(['1', '2'])
+    })
+
+    it('should return option[key] value when multiple is FALSE', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :searchable="true" :options="source" label="id" key="id" :multiple="false"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: { id: '2' },
+          source: [{ id: '1' }, { id: '2' }, { id: '3' }]
+        }
+      }).$mount()
+      expect(vm.$children[0].valueKeys).to.deep.equal('2')
+    })
+  })
+
+  describe('optionKeys', () => {
+    it('should return primitive value Array when no :label is provided', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :searchable="true" :options="source" :multiple="true"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: [1, 2],
+          source: [1, 2, 3]
+        }
+      }).$mount()
+      expect(vm.$children[0].optionKeys).to.deep.equal([1, 2, 3])
+    })
+
+    it('should return an Array maped from option[label] values', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :searchable="true" :options="source" label="id" key="id" :multiple="true"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: [{ id: '1' }, { id: '2' }],
+          source: [{ id: '1' }, { id: '2' }, { id: '3' }]
+        }
+      }).$mount()
+      expect(vm.$children[0].optionKeys).to.deep.equal(['1', '2', '3'])
+    })
+  })
+
   describe('filteredOptions', () => {
@@ -912,3 +1019,91 @@ it('should return matched options according to search value', () => {
     })
+
+    it('should add additional option at the begining when search is filled and :taggable is TRUE', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :searchable="true" :options="source" :multiple="true" :taggable="true"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: [],
+          source: [10, 20, 30]
+        }
+      }).$mount()
+      expect(vm.$children[0].filteredOptions).to.deep.equal([10, 20, 30])
+      expect(vm.$children[0].filteredOptions.length).to.equal(3)
+      vm.$children[0].search = 'test'
+      expect(vm.$children[0].filteredOptions).to.deep.equal([{ isTag: true, label: 'test' }])
+      expect(vm.$children[0].filteredOptions.length).to.equal(1)
+      vm.$children[0].search = '1'
+      expect(vm.$children[0].filteredOptions).to.deep.equal([{ isTag: true, label: '1' }, 10])
+      expect(vm.$children[0].filteredOptions.length).to.equal(2)
+    })
   })
+
+  describe('#onTag', () => {
+    it('should should push to value and options with default settings and :taggable is TRUE', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :searchable="true" :options="source" :multiple="true" :taggable="true"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: ['1'],
+          source: ['1', '2', '3']
+        }
+      }).$mount()
+      vm.$children[0].search = 'test'
+      vm.$children[0].select(vm.$children[0].filteredOptions[0])
+      expect(vm.$children[0].options.length).to.equal(4)
+      expect(vm.$children[0].options).to.deep.equal(['1', '2', '3', 'test'])
+      expect(vm.$children[0].value.length).to.equal(2)
+      expect(vm.$children[0].value).to.deep.equal(['1', 'test'])
+    })
+  })
+
+  describe('#limitText', () => {
+    it('should by default interpolate the limit text', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :searchable="true" :options="source" :multiple="true" :limit="2"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: ['1', '2', '3'],
+          source: ['1', '2', '3', '4', '5']
+        }
+      }).$mount()
+      vm.$children[0].limitText(20)
+      expect(vm.$children[0].limitText(20)).to.equal('and 20 more')
+    })
+  })
+
+  describe('visibleValue', () => {
+    it('should by default interpolate the limit text', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :searchable="true" :options="source" :multiple="true" :limit="1"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: ['1', '2', '3'],
+          source: ['1', '2', '3', '4', '5']
+        }
+      }).$mount()
+      expect(vm.$children[0].value.length).to.equal(3)
+      expect(vm.$children[0].visibleValue.length).to.equal(1)
+    })
+  })
+
+  describe('@ready:showLabels', () => {
+    beforeEach(function () {
+      document.body.insertAdjacentHTML('afterbegin', '<app></app>')
+    })
+    it('should hide all layers if :show-labels is FALSE', () => {
+      const vm = new Vue({
+        el: 'App',
+        template: '<multiselect :selected="value" :searchable="true" :options="source" :multiple="true" :limit="1" :show-labels="false"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: ['1', '2', '3'],
+          source: ['1', '2', '3', '4', '5']
+        }
+      })
+      expect(vm.$children[0].selectLabel).to.equal('')
+      expect(vm.$children[0].deselectLabel).to.equal('')
+      expect(vm.$children[0].selectedLabel).to.equal('')
+    })
+  })
 })

New alerts

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

417748

77.68%

Worsened metrics

Dev dependency count

58

1.75%

Number of package files

34

-46.87%

Lines of code

2831

-1.63%

Number of medium supply chain risk alerts

2

100%

No dependency changes