├── .gitignore
├── LICENSE
├── README.md
├── banner.tmpl
├── dist
    ├── vue-selectize.js
    └── vue-selectize.min.js
├── gulpfile.js
├── package.json
└── src
    └── vue-selectize.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | .idea
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2015, Michael Owens
2 | 
3 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
4 | 
5 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # DEPRECATED: Use vue2-selectize https://github.com/rhyek/vue2-selectize instead.
  2 | 
  3 | # vue-selectize
  4 | 
  5 | A Vue.js directive for selectize.js. 
  6 | 
  7 | # Requirements
  8 | 
  9 | - Vue.js ^`1.0.16`
 10 | - Selectize.js ^`0.12.1` (and its dependencies)
 11 | 
 12 | For vue-selectize compatible with Vue.js v0.*, see [link to earlier version goes here].
 13 | 
 14 | # Installation
 15 | 
 16 | ```shell
 17 | $ npm install vue-selectize --save
 18 | ```
 19 | 
 20 | # Usage
 21 | 
 22 | ```javascript
 23 | var Vue = require('vue');
 24 | Vue.use(require('vue-selectize'));
 25 | ```
 26 | 
 27 | If you want to set some global settings, you may do so when calling Vue.use:
 28 | 
 29 | ```javascript
 30 | Vue.use(require('vue-selectize', settings));
 31 | ```
 32 | 
 33 | After installing the plugin you can use the `v-selectize` directive.
 34 | 
 35 | ```html
 36 | <!-- With data-binding and a default option (if desired) -->
 37 | <select v-selectize="selected"
 38 |         v-model="selected"
 39 |         :options="options"
 40 |         :settings="customSettings">
 41 |     <option value="">-- Select --</option>
 42 | </select>
 43 | ```
 44 | 
 45 | - `selected` is the selected value. If maxItems is > 1, it will be a delimited string of values. Otherwise it's a single value.
 46 | - `options` is an array of the initial available options
 47 | - `customSettings` is an object with settings that will be passed to selectize. See https://github.com/selectize/selectize.js/blob/master/docs/usage.md#options for available options
 48 | 
 49 | ## Example 1
 50 | 
 51 | ```html
 52 | <select v-selectize="selectedItems"
 53 |         v-model="selectedItems"
 54 |         :options="options"
 55 |         :settings="customSettings">
 56 |     <option value="">-- Select --</option>
 57 | </select>
 58 | ```
 59 | 
 60 | ```javascript
 61 | var vm = new Vue({
 62 |     el: 'body',
 63 |     data: {
 64 |         selectedItems: '',
 65 |         options: [
 66 |             {code: 'en', name: 'English'},
 67 |             {code: 'fr', name: 'French'},
 68 |             {code: 'pt', name: 'Portuguese'}
 69 |         ],
 70 |         customSettings: {
 71 |             valueField: 'code',
 72 |             labelField: 'name',
 73 |             maxItems: 3,
 74 |             plugins: ['remove_button'],
 75 |             delimiter: "|"
 76 |         }
 77 |     }
 78 | });
 79 | ```
 80 | 
 81 | ## Example 2
 82 | 
 83 | Using VueSelectize in this way might be helpful for defining global settings for all your selectize inputs, which can then be overridden using the settings/options attributes on each specific input.
 84 | 
 85 | ```html
 86 | <select v-selectize="selectedItems"
 87 |         v-model="selectedItems">
 88 |     <option value="">-- Select --</option>
 89 | </select>
 90 | 
 91 | <select v-selectize="selectedItems2"
 92 |         v-model="selectedItems2"
 93 |         :options="options2">
 94 |     <option value="">-- Select Animal --</option>
 95 | </select>
 96 | 
 97 | ```
 98 | 
 99 | ```javascript
100 | var Vue = require('vue')
101 | var VueSelectize = require('vue-selectize')
102 | Vue.use(VueSelectize)
103 | window.VueSelectize = VueSelectize
104 | 
105 | ...
106 | 
107 | VueSelectize.settings = {
108 |     valueField: 'code',
109 |     labelField: 'name',
110 |     maxItems: 3,
111 |     plugins: ['remove_button'],
112 |     options: [
113 |         {code: 'en', name: 'English'},
114 |         {code: 'fr', name: 'French'},
115 |         {code: 'pt', name: 'Portuguese'}
116 |     ] 
117 | }
118 | 
119 | ...
120 | 
121 | var vm = new Vue({
122 |     el: 'body',
123 |     data: {
124 |         selectedItems: ''
125 |         selectedItems2: ''
126 |         options2: [
127 |             {code: 'a', name: 'Aardvark'},
128 |             {code: 'b', name: 'Bird'},
129 |             {code: 'c', name: 'Cat'},            
130 |             {code: 'd', name: 'Dog'}            
131 |         ]
132 |     }
133 | })
134 | 
135 | ```
136 | 


--------------------------------------------------------------------------------
/banner.tmpl:
--------------------------------------------------------------------------------
1 | /**
2 |  * <%= pkg.name %> v<%= pkg.version %>
3 |  * 
4 |  * Copyright (c) <%= pkg.year %> <%= pkg.author %>, contributors.
5 |  * Licensed under the <%= pkg.license %> license.
6 |  */
7 | 


--------------------------------------------------------------------------------
/dist/vue-selectize.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * vue-selectize v1.0.1
 3 |  * 
 4 |  * Copyright (c)  Michael Owens, contributors.
 5 |  * Licensed under the ISC license.
 6 |  */
 7 | ;(function () {
 8 |     var VueSelectize = {};
 9 |     var selectize = typeof require === 'function'
10 |         ? require('selectize')
11 |         : window.Selectize
12 | 
13 |     if (!selectize) {
14 |         throw new Error('[vue-selectize] cannot locate selectize.')
15 |     }
16 | 
17 |     VueSelectize.settings = {}
18 | 
19 |     VueSelectize.install = function(Vue, settings) {
20 | 
21 |         Vue.directive('selectize', {
22 |             twoWay: true,
23 |             priority: 1000,
24 | 
25 |             params: [
26 |                 'options', 'settings'
27 |             ],
28 | 
29 |             bind: function () {
30 |                 var self = this
31 |                 // Settings are set in the following order with the latter values overriding the former:
32 |                 // 1. Passed with Vue.use
33 |                 // 2. Set in Javascript
34 |                 // 3. Set on the select element
35 |                 var params = {}
36 |                 params = mergeData(params, settings)
37 |                 params = mergeData(params, VueSelectize.settings)
38 |                 params = mergeData(params, this.params.settings)
39 |                 // Options set on select element override those in settings
40 |                 if (this.params.options) {
41 |                     params.options = this.params.options
42 |                 }
43 |                 $(this.el)
44 |                     .selectize(params)
45 |                     .on('change', function (e) {
46 |                         // if multi-select enabled, value is a delimited string of selectedOptions values
47 |                         if (this.selectize.settings.mode == 'multi') {
48 |                             var values = [];
49 |                             for (var i = 0; i < this.selectedOptions.length; i++) {
50 |                                 values.push(this.selectedOptions[i].value)
51 |                             }
52 |                             self.set(values.join(this.selectize.settings.delimiter))
53 |                         } else {
54 |                             self.set(this.value)
55 |                         }
56 |                     })
57 |             },
58 |             update: function (value) {
59 |                 $(this.el).val(value).trigger('change')
60 |             },
61 |             unbind: function () {
62 |                 $(this.el).off().selectize('destroy')
63 |             }
64 |         });
65 | 
66 |     }
67 | 
68 |     function mergeData(to, from) {
69 |         var key, toVal, fromVal;
70 |         for (key in from) {
71 |             toVal = to[key];
72 |             fromVal = from[key];
73 |             if (Vue.util.isObject(toVal) && Vue.util.isObject(fromVal)) {
74 |                 mergeData(toVal, fromVal);
75 |             } else {
76 |                 Vue.util.set(to, key, fromVal);
77 |             }
78 |         }
79 |         return to;
80 |     }
81 | 
82 |     if (typeof exports == "object") {
83 |         module.exports = VueSelectize
84 |     } else if (typeof define == "function" && define.amd) {
85 |         define([], function(){ return VueSelectize })
86 |     } else if (window.Vue) {
87 |         window.VueSelectize = VueSelectize
88 |         Vue.use(VueSelectize)
89 |     }
90 | 
91 | })()
92 | 


--------------------------------------------------------------------------------
/dist/vue-selectize.min.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * vue-selectize v1.0.1
3 |  * 
4 |  * Copyright (c)  Michael Owens, contributors.
5 |  * Licensed under the ISC license.
6 |  */
7 | !function(){function e(t,i){var s,n,o;for(s in i)n=t[s],o=i[s],Vue.util.isObject(n)&&Vue.util.isObject(o)?e(n,o):Vue.util.set(t,s,o);return t}var t={},i="function"==typeof require?require("selectize"):window.Selectize;if(!i)throw new Error("[vue-selectize] cannot locate selectize.");t.settings={},t.install=function(i,s){i.directive("selectize",{twoWay:!0,priority:1e3,params:["options","settings"],bind:function(){var i=this,n={};n=e(n,s),n=e(n,t.settings),n=e(n,this.params.settings),this.params.options&&(n.options=this.params.options),$(this.el).selectize(n).on("change",function(e){if("multi"==this.selectize.settings.mode){for(var t=[],s=0;s<this.selectedOptions.length;s++)t.push(this.selectedOptions[s].value);i.set(t.join(this.selectize.settings.delimiter))}else i.set(this.value)})},update:function(e){$(this.el).val(e).trigger("change")},unbind:function(){$(this.el).off().selectize("destroy")}})},"object"==typeof exports?module.exports=t:"function"==typeof define&&define.amd?define([],function(){return t}):window.Vue&&(window.VueSelectize=t,Vue.use(t))}();


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp'),
 2 |     uglify = require('gulp-uglify'),
 3 |     header = require('gulp-header'),
 4 |     rename = require('gulp-rename'),
 5 |     pkg = require('./package.json'),
 6 |     del = require('del'),
 7 |     fs = require('fs'),
 8 |     bannerTemplate = fs.readFileSync('banner.tmpl', 'utf8');
 9 | 
10 | gulp.task('clean', function () {
11 |     return del(['dist']);
12 | });
13 | 
14 | gulp.task('default', ['clean'], function () {
15 |     return gulp.src('src/*.js')
16 |         .pipe(header(bannerTemplate, { pkg : pkg } ))
17 |         .pipe(gulp.dest('dist'))
18 |         .pipe(uglify())
19 |         .pipe(header(bannerTemplate, { pkg : pkg } ))
20 |         .pipe(rename(function (path) {
21 |             path.extname = '.min.js';
22 |         }))
23 |         .pipe(gulp.dest('dist'));
24 | });
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-selectize",
 3 |   "version": "1.0.2",
 4 |   "description": "A Vue.js directive for selectize.js",
 5 |   "repository": "michaelowens/vue-selectize",
 6 |   "bugs": {
 7 |     "url": "https://github.com/michaelowens/vue-selectize/issues"
 8 |   },
 9 |   "main": "./dist/vue-selectize.js",
10 |   "scripts": {
11 |     "test": "echo \"Error: no test specified\" && exit 1"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "vuejs",
16 |     "selectize",
17 |     "dropdown",
18 |     "select"
19 |   ],
20 |   "author": "Michael Owens",
21 |   "license": "ISC",
22 |   "devDependencies": {
23 |     "add-banner": "^0.1.0",
24 |     "del": "^2.0.2",
25 |     "gulp": "^3.9.0",
26 |     "gulp-header": "^1.7.1",
27 |     "gulp-rename": "^1.2.2",
28 |     "gulp-uglify": "^1.4.1"
29 |   },
30 |   "dependencies": {
31 |     "selectize": "^0.12.1",
32 |     "vue": "^1.0.16",
33 |     "jquery": "3.*"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/vue-selectize.js:
--------------------------------------------------------------------------------
 1 | ;(function () {
 2 |     var VueSelectize = {};
 3 |     var selectize = typeof require === 'function'
 4 |         ? require('selectize')
 5 |         : window.Selectize
 6 | 
 7 |     if (!selectize) {
 8 |         throw new Error('[vue-selectize] cannot locate selectize.')
 9 |     }
10 | 
11 |     VueSelectize.settings = {}
12 | 
13 |     VueSelectize.install = function(Vue, settings) {
14 | 
15 |         Vue.directive('selectize', {
16 |             twoWay: true,
17 |             priority: 1000,
18 | 
19 |             params: [
20 |                 'options', 'settings'
21 |             ],
22 | 
23 |             bind: function () {
24 |                 var self = this
25 |                 // Settings are set in the following order with the latter values overriding the former:
26 |                 // 1. Passed with Vue.use
27 |                 // 2. Set in Javascript
28 |                 // 3. Set on the select element
29 |                 var params = {}
30 |                 params = mergeData(params, settings)
31 |                 params = mergeData(params, VueSelectize.settings)
32 |                 params = mergeData(params, this.params.settings)
33 |                 // Options set on select element override those in settings
34 |                 if (this.params.options) {
35 |                     params.options = this.params.options
36 |                 }
37 |                 $(this.el)
38 |                     .selectize(params)
39 |                     .on('change', function (e) {
40 |                         // if multi-select enabled, value is a delimited string of selectedOptions values
41 |                         if (this.selectize.settings.mode == 'multi') {
42 |                             var values = [];
43 |                             for (var i = 0; i < this.selectedOptions.length; i++) {
44 |                                 values.push(this.selectedOptions[i].value)
45 |                             }
46 |                             self.set(values.join(this.selectize.settings.delimiter))
47 |                         } else {
48 |                             self.set(this.value)
49 |                         }
50 |                     })
51 |             },
52 |             update: function (value) {
53 |                 $(this.el).val(value).trigger('change')
54 |             },
55 |             unbind: function () {
56 |                 $(this.el).off().selectize('destroy')
57 |             }
58 |         });
59 | 
60 |     }
61 | 
62 |     function mergeData(to, from) {
63 |         var key, toVal, fromVal;
64 |         for (key in from) {
65 |             toVal = to[key];
66 |             fromVal = from[key];
67 |             if (Vue.util.isObject(toVal) && Vue.util.isObject(fromVal)) {
68 |                 mergeData(toVal, fromVal);
69 |             } else {
70 |                 Vue.util.set(to, key, fromVal);
71 |             }
72 |         }
73 |         return to;
74 |     }
75 | 
76 |     if (typeof exports == "object") {
77 |         module.exports = VueSelectize
78 |     } else if (typeof define == "function" && define.amd) {
79 |         define([], function(){ return VueSelectize })
80 |     } else if (window.Vue) {
81 |         window.VueSelectize = VueSelectize
82 |         Vue.use(VueSelectize)
83 |     }
84 | 
85 | })()
86 | 


--------------------------------------------------------------------------------