├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── dist
├── doc
│ ├── css
│ │ ├── app.874d9e59.css
│ │ └── chunk-vendors.27f47f83.css
│ ├── favicon.ico
│ ├── index.html
│ └── js
│ │ ├── app.328cf413.js
│ │ ├── app.328cf413.js.map
│ │ ├── chunk-vendors.7b519f94.js
│ │ └── chunk-vendors.7b519f94.js.map
└── lib
│ ├── demo.html
│ ├── vue-multi-select.common.js
│ ├── vue-multi-select.common.js.map
│ ├── vue-multi-select.css
│ ├── vue-multi-select.umd.js
│ ├── vue-multi-select.umd.js.map
│ ├── vue-multi-select.umd.min.js
│ └── vue-multi-select.umd.min.js.map
├── package.json
├── postcss.config.js
├── public
├── favicon.ico
└── index.html
└── src
├── App.vue
├── Dev.vue
├── components
├── doc
│ ├── doc.css
│ ├── doc.js
│ └── doc.vue
└── vueMultiSelect
│ ├── vue-multi-select.css
│ ├── vue-multi-select.js
│ └── vue-multi-select.vue
├── dev.js
├── helper
└── equals.js
└── main.js
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | node: true,
5 | },
6 | extends: [
7 | 'plugin:vue/essential',
8 | '@vue/airbnb',
9 | ],
10 | rules: {
11 | 'max-len': ["error", { "code": 250 }],
12 | 'no-bitwise': [2, { allow: ["~"] }],
13 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
14 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
15 | },
16 | parserOptions: {
17 | parser: 'babel-eslint',
18 | },
19 | };
20 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log*
4 | yarn-debug.log*
5 | yarn-error.log*
6 | yarn.lock
7 | package-lock.json
8 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Valère
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This component gives you a multi/single select with the power of Vuejs components.
2 |
3 | ## Demo and doc site
4 | [vue-multi-select](https://vue-multi-select.tuturu.io)
5 |
6 | [https://github.com/IneoO/vue-multi-select](https://github.com/IneoO/vue-multi-select)
7 |
8 | ## What's new in v4.6.0
9 | Set a props for label when empty data
10 |
11 | ## Dependencies
12 | - required: Vuejs >= 2.x
13 |
14 | ## Install
15 | 1. Clone the repo or `npm install vue-multi-select --save`
16 | 2. Include the file in your app
17 | `import vueMultiSelect from 'vue-multi-select';`
18 | `import 'vue-multi-select/dist/lib/vue-multi-select.min.css'`
19 |
20 | ## Contributing
21 | Issues and PR's are much appreciated.
22 | When you create a new PR please make it against the develop branch when adding new features and to the fix branch when fixing small issues instead of master.
23 |
24 | ## Usage and Documentation
25 | | Params | Type |
26 | | ------------- | ----------- |
27 | | options | Object |
28 | | filters | Array |
29 | | selectOptions | Array |
30 | | v-model | Array |
31 | | reloadInit | Boolean |
32 | | btnLabel | Function |
33 | | btnClass | String |
34 | | popoverClass | String |
35 | | search | Boolean |
36 | | eventName | String |
37 | | position | String |
38 | | searchPlaceholder | String |
39 | | historyButton | Boolean |
40 | | historyButtonText | String |
41 | | disabled | Boolean |
42 | | disabledUnSelect | Boolean |
43 | | emptyTabText | String |
44 |
45 | (NB. position is a string ex: 'top-left', 'top-right', default is 'bottom-left')
46 |
47 | | Events | params |
48 | | ------------- | ----------- |
49 | | selectionChanged | values selected |
50 | | open | - |
51 | | close | - |
52 |
53 | (NB. selectionChanged naming can be change with eventName)
54 |
55 | ### 1. options (Contains options to set the multi-select)
56 |
57 | | Params | Type | Default | Description |
58 | | ------------- | -------- | ----------------------------------------------------------------------- | ------------------------------------- |
59 | | cssSelected | Function | (option) => option['selected'] ? { 'font-weight': 'bold',color: '#5755d9',} : '' | Css passed to value |
60 | | groups | Boolean | false | Display or not groups selection |
61 | | multi | Boolean | false | Set single or multiple selection |
62 | | labelList | String | 'list' | Name Attributes for list |
63 | | labelName | String | 'name' | Name Attributes for value to display |
64 | | labelValue | String | labelName | Name Attributes for value to comparaison between them |
65 | | labelSelected | String | 'selected' | Name attributes for value selected |
66 | | labelDisabled | String | 'disabled' | Name attributes for value disabled |
67 | | groupName | String | 'name' | Name Attributes for groups to display |
68 |
69 | \*if you use html balise and don't want to have them find in the search use labelHtml, search will just check the property labelName but v-html the labelHtml.
70 |
71 | ### 2. filters to apply to select many options
72 | ```javascript
73 | // Exemple with Select/Deselect all
74 | const filters = [];
75 | filters.push({
76 | nameAll: 'Select all', // label when want to select all elements who answer yes to the function
77 | nameNotAll: 'Deselect all', //label when want to deselect all elements who answer yes to the function
78 | func(elem) {
79 | return true;
80 | },
81 | });
82 |
83 | // Second exemple to select all elements who contain 2
84 | filters.push({
85 | nameAll: 'Select all elements with 2',
86 | nameNotAll: 'Deselect all elements with 2',
87 | func(elem) {
88 | return elem.name.indexOf('2') !== -1;
89 | }
90 | });
91 | ```
92 |
93 | ### 3. elements to select/deselect
94 | ``` javascript
95 |
96 | // when groups not set or false
97 | data = [
98 | {name: 'choice 1'}, // Name can be changed with labelName in options
99 | {name: 'choice 2'},
100 | {name: 'choice 3'},
101 | {name: 'choice 4'},
102 | {name: 'choice 5'},
103 | ]
104 |
105 | // or just an array
106 | // it's also possible when to have an array of strings
107 | // in list when groups is set to true.
108 | data = [
109 | 'choice 1',
110 | 'choice 2',
111 | 'choice 3',
112 | 'choice 4',
113 | 'choice 5',
114 | ]
115 |
116 | // when groups set to true
117 |
118 | data = [{
119 | name: 'choice 1', // Can be changed with tabName in options
120 | list: [
121 | {name: 'choice 1'}, // Name can be changed with labelName in options
122 | {name: 'choice 2'},
123 | {name: 'choice 3'},
124 | {name: 'choice 4'},
125 | {name: 'choice 5'},
126 | ]
127 | }, {
128 | name: 'choice 10', // Can be changed with tabName in options
129 | list: [
130 | {name: 'choice 11'}, // Name can be changed with labelName in options
131 | {name: 'choice 12'},
132 | {name: 'choice 13'},
133 | {name: 'choice 14'},
134 | {name: 'choice 15'},
135 | ]
136 | }]
137 | ```
138 |
139 | ### 4. values selected
140 | ``` javascript
141 | [ {name: 'choice 1'}, {name: 'choice 11'}] // In the case we selected choice 1 and choice 11
142 | ```
143 |
144 | ### 5. Manual open/close
145 | you can access to openMultiSelect()/closeMultiSelect() by ref to manualy open/close the mutliSelect
146 | ```html
147 |
148 |
149 |
150 |
151 |
158 | ```
159 |
160 |
161 | ### 6. Examples
162 | ```html
163 |
164 |
165 |
174 |
175 |
176 |
177 |
243 | ```
244 |
245 | It's possible to use slot-scope to custom option
246 |
247 | ```html
248 |
249 |
250 |
260 |
261 |
262 | {{option.name}}
263 |
264 |
265 |
266 |
267 | ```
268 |
269 | ## Build Setup
270 |
271 | ``` bash
272 | - `npm run dev`: Shortcut to run dev
273 |
274 | - `npm run doc`: Shortcut to run dev-doc
275 |
276 | - `npm run build:doc`: Shortcut to build doc.
277 |
278 | - `npm run build:lib`: Production ready build of your library as an ES6 module (via UMD), ready to import into another project via npm.
279 |
280 | ```
281 |
282 | Testing Supported By
283 |
284 |
285 | ## thanks
286 |
287 | [Patrice Clément](https://github.com/monsieurp)
288 |
289 | [Pierre Guilbert](https://github.com/guilbep)
290 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/app',
4 | ],
5 | };
6 |
--------------------------------------------------------------------------------
/dist/doc/css/app.874d9e59.css:
--------------------------------------------------------------------------------
1 | /* ! vertical layout */[data-v-0ea235da]::-webkit-scrollbar{width:10px}[data-v-0ea235da]::-webkit-scrollbar-track{border-radius:10px;-webkit-box-shadow:none}[data-v-0ea235da]::-webkit-scrollbar-thumb{background:#eee;border-radius:10px}.select[data-v-0ea235da]{display:inline-block;text-align:left;position:relative}.select .vertical[data-v-0ea235da]{float:none}
2 |
3 | /* ! horizontal layout */.select .horizontal[data-v-0ea235da]:not(.selectGroup){float:left}
4 |
5 |
6 | /* ! create a "row" */.select .line[data-v-0ea235da]{-webkit-box-sizing:content-box;box-sizing:content-box;max-height:30px;overflow:hidden;padding:2px 0 4px 0;position:relative}
7 |
8 |
9 | /* ! create a "column" */.select .acol[data-v-0ea235da]{display:inline-block;min-width:12px}
10 |
11 |
12 | /* ! */.select .inlineBlock[data-v-0ea235da]{display:inline-block}.select>button[data-v-0ea235da]{border:1px solid #c6c6c6;border-radius:4px;color:#555;cursor:pointer;display:inline-block;font-size:14px;min-height:31px;padding:1px 8px 1px 8px;position:relative;text-align:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;white-space:normal;background-color:#fff}.select>button[data-v-0ea235da]:disabled,.select>button[data-v-0ea235da]:hover{background-color:#f7f7f7}.select .buttonClicked[data-v-0ea235da]{-webkit-box-shadow:0 2px 5px rgba(0,0,0,.15) inset,0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 5px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05)}.select .buttonLabel[data-v-0ea235da]{word-break:break-word;display:inline-block;padding:0 0 0 0}.select .caret[data-v-0ea235da]{display:inline-block;width:0;height:0;margin:0 0 1px 12px;vertical-align:middle;border-top:4px solid #333;border-right:4px solid transparent;border-left:4px solid transparent;border-bottom:0 dotted}.select .checkboxLayer[data-v-0ea235da]{background-color:#fff;position:absolute;z-index:999;border:solid #d3d3d3;border-width:1px 1px 1px 1px;border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175);min-width:278px;display:none}.select .helperContainer[data-v-0ea235da]{padding:8px 8px 0 8px}.select .helperButton[data-v-0ea235da]:not(.reset){margin-right:4px}.select .helperButton[data-v-0ea235da]{margin:0 0 8px 0}.select .helperButton[data-v-0ea235da],.select .historyButton[data-v-0ea235da]{display:inline;text-align:center;cursor:pointer;border:1px solid #ccc;height:26px;font-size:13px;border-radius:2px;color:#666;background-color:#fff;line-height:1.6}.right[data-v-0ea235da],.select .historyButton[data-v-0ea235da]{float:right}.margin-right-10[data-v-0ea235da]{margin-right:10px}@-moz-document url-prefix(){.select .clearButton{height:24px!important}}.select .clearButton[data-v-0ea235da]{-webkit-box-sizing:inherit;box-sizing:inherit;position:absolute;display:inline;text-align:center;cursor:pointer;border:1px solid #ccc;height:22px;width:22px;font-size:13px;border-radius:2px;color:#666;background-color:#fff;line-height:1.4;right:0;top:2px}.select .inputFilter[data-v-0ea235da]{border-radius:2px;border:1px solid #ccc;height:26px;font-size:14px;width:100%;min-width:320px;padding-left:7px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#888;margin:0 0 8px 0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.select .clearButton[data-v-0ea235da]:hover,.select .helperButton[data-v-0ea235da]:hover,.select .historyButton[data-v-0ea235da]:hover{border:1px solid #ccc;color:#999;background-color:#f1f1f1}.select .clearButton[data-v-0ea235da]:focus,.select .helperButton[data-v-0ea235da]:focus,.select .historyButton[data-v-0ea235da]:focus,.select .inputFilter[data-v-0ea235da]:focus{border:1px solid #999;outline:0;-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,.065),0 0 5px rgba(102,175,233,.6);box-shadow:inset 0 0 1px rgba(0,0,0,.065),0 0 5px rgba(102,175,233,.6)}.select .checkBoxContainer[data-v-0ea235da]{display:block;padding-top:5px;overflow:hidden;max-height:300px;min-height:80px;overflow-y:auto}.margin-left-20[data-v-0ea235da]{margin-left:20px}
13 |
14 | /* ! to show / hide the checkbox layer above */.select .show[data-v-0ea235da]{display:block}.select .selectItem[data-v-0ea235da]{font-size:13px;color:#000;margin-top:0}.select .selectItem[data-v-0ea235da],.select .selectItemDeactive[data-v-0ea235da]{display:block;padding:3px;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;border:1px solid transparent;position:relative;min-width:278px;min-height:32px}.select .selectItemDeactive[data-v-0ea235da]{color:#444}.select .selectItemDeactive[data-v-0ea235da]:hover{cursor:not-allowed}.select .selectItem.selected[data-v-0ea235da]{background-color:#e9e9e9;color:#555;cursor:pointer;border-top:1px solid #e4e4e4;border-left:1px solid #e4e4e4;border-right:1px solid #d9d9d9}.select .selectItem .acol label[data-v-0ea235da]{display:inline-block;padding-right:30px;margin:0;font-weight:400;line-height:normal}.select .selectGroup[data-v-0ea235da]:hover,.select .selectItem[data-v-0ea235da]:hover{cursor:pointer;background-color:#f5f7fa}.select .selectFocus[data-v-0ea235da],.select .selectGroup span[data-v-0ea235da]:hover,.select .selectItem span[data-v-0ea235da]:hover{cursor:pointer}
15 |
16 |
17 | /* ! group labels */.select .selectGroup[data-v-0ea235da]{display:block;clear:both}.select .tickMark[data-v-0ea235da]{display:inline-block;position:absolute;right:10px;top:7px;font-size:10px}.select .checkbox[data-v-0ea235da]{color:#ddd;position:absolute;left:-9999px;cursor:pointer}.select .disabled[data-v-0ea235da],.select .disabled[data-v-0ea235da]:hover,.select .disabled label input:hover~span[data-v-0ea235da]{color:#c4c4c4;cursor:not-allowed}.select img[data-v-0ea235da]{vertical-align:middle;margin-bottom:0;max-height:22px;max-width:22px}.select .group[data-v-0ea235da]{font-weight:600;font-size:14px}.select .sousGroup[data-v-0ea235da]{margin-left:15px}.tab[data-v-0ea235da]{padding-left:0;-webkit-box-align:center;align-items:center;border-bottom:.05rem solid #e7e9ed;display:-webkit-box;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab-item[data-v-0ea235da]{margin-top:0}.tab .tab-item.active span[data-v-0ea235da],.tab .tab-item span.active[data-v-0ea235da]{border-bottom-color:#6e7991;color:#6e7991}.tab .tab-item span[data-v-0ea235da]{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .4rem .3rem .4rem;text-decoration:none}.select .empty-tab[data-v-0ea235da]{min-height:80px;text-align:center;padding-top:30px;font-size:15px;color:#747474}.selectList[data-v-0ea235da]{margin:0;list-style:inside disc;padding-left:0}.pointer[data-v-0ea235da]{cursor:pointer}.bold[data-v-0ea235da]{font-weight:700}.s-container>.columns[data-v-733fb95f]{-webkit-box-orient:initial;-webkit-box-direction:initial;-ms-flex-direction:initial;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-height:100vh}.s-sidebar[data-v-733fb95f]{background:#f8f9fa;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding:1.5rem 0 1.5rem 1.5rem;width:14rem}.s-brand[data-v-733fb95f]{color:#5764c6;left:0;padding:0 1.5rem;position:fixed;top:1.3rem}.s-brand .s-logo[data-v-733fb95f]{-webkit-box-align:center;align-items:center;border-radius:.1rem;display:-webkit-inline-box;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.s-brand .s-logo h2[data-v-733fb95f]{display:inline;font-size:.8rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.s-sidebar .s-nav[data-v-733fb95f]{bottom:1.5rem;overflow-y:auto;position:fixed;top:5rem;width:10.5rem}.s-sidebar .accordion input~.accordion-header[data-v-733fb95f]{color:#5b657a;font-weight:600}.float-btn[data-v-733fb95f]{position:fixed;right:4rem;top:1.5rem;z-index:100}.s-content[data-v-733fb95f]{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-width:960px;padding:0 4rem;width:calc(100vw - 12rem)}.s-content .anchor[data-v-733fb95f]{color:#626fca;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.s-content .anchor[data-v-733fb95f]:focus,.s-content .anchor[data-v-733fb95f]:hover{-webkit-box-shadow:none;box-shadow:none;height:auto;text-decoration:none;width:2em}.s-content .s-subtitle:hover .anchor[data-v-733fb95f],.s-content .s-title:hover .anchor[data-v-733fb95f]{height:auto;width:1em}.s-content .s-subtitle[data-v-733fb95f],.s-content .s-title[data-v-733fb95f]{position:sticky;position:-webkit-sticky;top:0;z-index:200;line-height:1.6rem;margin-bottom:0;padding-bottom:1.5rem;padding-top:1.5rem;position:static}.s-content .code .tag[data-v-733fb95f]{color:#5764c6}.s-content .code .atn[data-v-733fb95f]{color:#667189}.s-content .code .atv[data-v-733fb95f]{color:#e06870}.s-footer[data-v-733fb95f]{position:fixed;bottom:0;left:0;padding:1rem;text-align:center}.s-logo[data-v-733fb95f]{-webkit-box-align:center;align-items:center;border-radius:.1rem;display:-webkit-inline-box;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.s-footer .s-logo img[data-v-733fb95f]{display:inline;height:auto;width:1.6rem}.s-footer .s-logo span[data-v-733fb95f]{display:inline;font-size:.8rem;font-weight:500;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.classSelected[data-v-733fb95f]{font-weight:700;color:#5755d9}.hand[data-v-733fb95f]{cursor:pointer}.red[data-v-733fb95f]{color:#e06870}.blue[data-v-733fb95f]{color:#5764c6}.grey[data-v-733fb95f]{color:#667189}.light-grey[data-v-733fb95f]{color:#acb3c2;font-style:italic}.wrap[data-v-733fb95f]{white-space:nowrap}.bold[data-v-733fb95f]{font-weight:700}.table[data-v-733fb95f]{margin-bottom:20px}
--------------------------------------------------------------------------------
/dist/doc/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iNeoO/vue-multi-select/c64f7e63669485df4711a310461cb257edc675ba/dist/doc/favicon.ico
--------------------------------------------------------------------------------
/dist/doc/index.html:
--------------------------------------------------------------------------------
1 |
vue-multi-select We're sorry but vue-multi-select doesn't work properly without JavaScript enabled. Please enable it to continue.
--------------------------------------------------------------------------------
/dist/doc/js/app.328cf413.js:
--------------------------------------------------------------------------------
1 | (function(t){function e(e){for(var a,n,c=e[0],o=e[1],r=e[2],d=0,u=[];d= 2.x")]),s("h4",[t._v("Install")]),s("div",{staticClass:"docs-note"},[s("p",[t._v("Clone the repo "),s("a",{attrs:{href:"https://github.com/IneoO/vue-multi-select"}},[t._v("github")]),t._v(" or "),s("code",[t._v("npm install vue-multi-select --save")])]),s("p",[t._v("Include the file in your app import vueMultiSelect from")]),s("p",[s("code",[t._v(" import vueMultiSelect from 'vue-multi-select';"),s("br"),t._v(" import 'vue-multi-select/dist/lib/vue-multi-select.css'; ")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"container",attrs:{id:"whatsnew"}},[s("h3",{staticClass:"s-title"},[s("a",{staticClass:"anchor",attrs:{href:"#whatsnew","aria-hidden":"true"}},[t._v("#")]),t._v("What's new ")]),s("div",{staticClass:"docs-note"},[s("h3",[t._v("4.6.0")]),t._v(" Set a props for label when empty data "),s("h3",[t._v("4.5.0")]),t._v(" Set possible to open manually "),s("h3",[t._v("4.4.1")]),t._v(" Fix labelName for default slot "),s("h3",[t._v("4.4.0")]),t._v(" Set possible to use slot-scope for options. renderTemplate is no more Supported "),s("h3",[t._v("4.3.0")]),t._v(" Add disabledUnSelect popoverClass as props "),s("h3",[t._v("4.2.0")]),t._v(" Add btnClass popoverClass as props "),s("h3",[t._v("4.1.1")]),t._v(" Build lib "),s("h3",[t._v("4.1.0")]),t._v(" Use v-html to display button "),s("h3",[t._v("4.0.0")]),t._v(" Use vue-cli to bundle "),s("h3",[t._v("3.16.0")]),t._v(" Add open/close events "),s("h3",[t._v("3.15.0")]),t._v(" Use a function to render btnLabel "),s("h3",[t._v("3.14.1")]),t._v(" Fix event triggered 2 times in single select "),s("h3",[t._v("3.14.0")]),t._v(" Set possible to disable vueMultiSelect "),s("h3",[t._v("3.13.1")]),t._v(" Fix doc about css import "),s("h3",[t._v("3.13.0")]),t._v(" Set position custom "),s("h3",[t._v("3.12.1")]),t._v(" Small change about way to render name "),s("h3",[t._v("3.12.0")]),t._v(" Use v-html to render options "),s("h3",[t._v("3.11.1")]),s("p",[t._v("Fix button for simple array")]),s("h3",[t._v("3.11.0")]),s("p",[t._v("Set up an historic mode")]),s("h3",[t._v("3.10.0")]),s("p",[t._v("Remove default select all and update a little some css")]),s("h3",[t._v("3.9.1")]),s("p",[t._v("Remove reloadInit and for manual reload. Now just update v-model, vue-multi-select will reload automatically")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"container",attrs:{id:"general"}},[s("h3",{staticClass:"s-title"},[s("a",{staticClass:"anchor",attrs:{href:"#general","aria-hidden":"true"}},[t._v("#")]),t._v("General ")]),s("div",{staticClass:"docs-note"},[s("p",[t._v("Directive must be call like that in Html "),s("code",[t._v(" ")])]),s("h4",[t._v("Props for vue-multi-select :")]),s("table",{staticClass:"table table-striped table-hover"},[s("thead",[s("tr",[s("th",[t._v("Params")]),s("th",[t._v("Type")]),s("th",[t._v("Description")]),s("th",[t._v("Default")])])]),s("tbody",[s("tr",{staticClass:"active"},[s("td",[t._v("options")]),s("td",[t._v("Object")]),s("td",[t._v("Permit to params most the options of the multi Select")]),s("td",[s("code",[t._v("{}")])])]),s("tr",[s("td",[t._v("filters")]),s("td",[t._v("Array")]),s("td",[t._v("Permit to add some filters in the vueMultiSelect's input")]),s("td",[s("code",[t._v("[]")])])]),s("tr",{staticClass:"active"},[s("td",[t._v("selectOptions")]),s("td",[t._v("Array")]),s("td",[t._v("Variables who contains values for the select")]),s("td",[s("code",[t._v("[]")])])]),s("tr",[s("td",[t._v("eventName")]),s("td",[t._v("String")]),s("td",[t._v("eventName Name for the event triggered by the vue-multi-select default is selectionChanged (deprecated, use v-model or a watch)")]),s("td",[s("code",[t._v("'selectionChanged'")])])]),s("tr",{staticClass:"active"},[s("td",[t._v("v-model")]),s("td",[t._v("Array")]),s("td",[t._v("Variables who contains values selected")]),s("td",[s("code",[t._v("-")])])]),s("tr",[s("td",[t._v("search")]),s("td",[t._v("Boolean")]),s("td",[t._v("hide/show search bar (search isn't case sensitive)")]),s("td",[s("code",[t._v("False")])])]),s("tr",{staticClass:"active"},[s("td",[t._v("searchPlaceholder")]),s("td",[t._v("String")]),s("td",[t._v("Change placeholder of searchBar")]),s("td",[s("code",[t._v("'Search...'")])])]),s("tr",[s("td",[t._v("historyButton")]),s("td",[t._v("Boolean")]),s("td",[t._v("Display the button to use previous values selected")]),s("td",[s("code",[t._v("false")])])]),s("tr",{staticClass:"active"},[s("td",[t._v("historyButtonText")]),s("td",[t._v("String")]),s("td",[t._v("Label for previous button")]),s("td",[s("code",[t._v("'↶''")])])]),s("tr",[s("td",[t._v("position")]),s("td",[t._v("String")]),s("td",[t._v("Where to display options, top/bottom-left/right")]),s("td",[s("code",[t._v("'top-bottom'")])])]),s("tr",{staticClass:"active"},[s("td",[t._v("disabled")]),s("td",[t._v("Boolean")]),s("td",[t._v("Disable button")]),s("td",[s("code",[t._v("False")])])]),s("tr",[s("td",[t._v("disabledUnSelect")]),s("td",[t._v("Boolean")]),s("td",[t._v("To disable the possibility to unselect an option (only in singleSelect)")]),s("td",[s("code",[t._v("false")])])]),s("tr",{staticClass:"active"},[s("td",[t._v("emptyTabText")]),s("td",[t._v("String")]),s("td",[t._v("Label when empty tab")]),s("td",[s("code",[t._v("'No data'")])])])])]),s("h4",[t._v("Events for vue-multi-select :")]),s("table",{staticClass:"table table-striped table-hover"},[s("thead",[s("tr",[s("th",[t._v("name")]),s("th",[t._v("params")]),s("th",[t._v("Description")])])]),s("tbody",[s("tr",{staticClass:"active"},[s("td",[t._v("selectionChanged")]),s("td",[t._v("selected values")]),s("td",[t._v("triggered when an option is selected (the name can be changed with props eventName)")])]),s("tr",[s("td",[t._v("open")]),s("td",[t._v("-")]),s("td",[t._v("triggered when the vue-multi-select open")])]),s("tr",{staticClass:"active"},[s("td",[t._v("close")]),s("td",[t._v("-")]),s("td",[t._v("triggered when the vue-multi-select close")])])])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"container",attrs:{id:"options"}},[s("h3",{staticClass:"s-title"},[s("a",{staticClass:"anchor",attrs:{href:"#options","aria-hidden":"true"}},[t._v("#")]),t._v("options ")]),s("div",{staticClass:"docs-note"},[s("p",[t._v("This variable contains params to setup the vue-multi-select.")]),s("p",[t._v("Props for vue-multi-select :")]),s("table",{staticClass:"table table-striped table-hover"},[s("thead",[s("tr",[s("th",[t._v("Params")]),s("th",[t._v("Type")]),s("th",[t._v("Default")]),s("th",[t._v("Description")])])]),s("tbody",[s("tr",{staticClass:"active"},[s("td",[t._v("btnLabel")]),s("td",[t._v("Function")]),s("td",[s("code",[t._v("() => ('multi-select')")])]),s("td",[t._v("Label on the button")])]),s("tr",[s("td",[t._v("btnClass")]),s("td",[t._v("String")]),s("td",[s("code",[t._v("''")])]),s("td",[t._v("css class who apply on the button")])]),s("tr",[s("td",[t._v("popoverClass")]),s("td",[t._v("String")]),s("td",[s("code",[t._v("''")])]),s("td",[t._v("css class who apply on the popover")])]),s("tr",[s("td",[t._v("cssSelected")]),s("td",[t._v("Function")]),s("td",[s("code",[t._v("(option) => option['selected'] ? {'background-color': '#b4b4b4'} : ''")])]),s("td",[t._v("Css passed to value selected")])]),s("tr",{staticClass:"active"},[s("td",[t._v("groups")]),s("td",[t._v("Boolean")]),s("td",[s("code",[t._v("false")])]),s("td",[t._v("Display or not groups selection")])]),s("tr",[s("td",[t._v("multi")]),s("td",[t._v("Boolean")]),s("td",[s("code",[t._v("false")])]),s("td",[t._v("Set single or multiple selection")])]),s("tr",{staticClass:"active"},[s("td",[t._v("labelList")]),s("td",[t._v("String")]),s("td",[s("code",[t._v("'list'")])]),s("td",[t._v("Name Attributes for list")])]),s("tr",[s("td",[t._v("labelName")]),s("td",[t._v("String")]),s("td",[s("code",[t._v("'name'")])]),s("td",[t._v("Name Attributes for value to display")])]),s("tr",{staticClass:"active"},[s("td",[t._v("labelValue")]),s("td",[t._v("String")]),s("td",[s("code",[t._v("labelName")])]),s("td",[t._v("Attributes for value to compare them")])]),s("tr",[s("td",[t._v("labelSelected")]),s("td",[t._v("String")]),s("td",[s("code",[t._v("'selected'")])]),s("td",[t._v("Name Attributes for value to display")])]),s("tr",{staticClass:"active"},[s("td",[t._v("labelDisabled")]),s("td",[t._v("String")]),s("td",[s("code",[t._v("'disabled'")])]),s("td",[t._v("Name Attributes for value to disable")])]),s("tr",[s("td",[t._v("groupName")]),s("td",[t._v("String")]),s("td",[s("code",[t._v("'name'")])]),s("td",[t._v("Name Attributes for groups to display")])])])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"container",attrs:{id:"filters"}},[s("h3",{staticClass:"s-title"},[s("a",{staticClass:"anchor",attrs:{href:"#filters","aria-hidden":"true"}},[t._v("#")]),t._v("Filters")]),s("div",{staticClass:"docs-note"},[s("p",[t._v("filters to apply to select many options")]),s("p",[s("code",[t._v("nameAll")]),t._v(" Name displayed when all elements respect the condition")]),s("p",[s("code",[t._v("nameNotAll")]),t._v(" Name displayed when all elements don't respect the condition")]),s("p",[s("code",[t._v("func")]),t._v(" The function (must return true or false) who permit to test if the element respect a condition")]),s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[s("code",[t._v("\n"),s("span",{staticClass:"red bold"},[t._v("const")]),t._v(" filters = [];\nfilters.push({\n "),s("span",{staticClass:"light-grey"},[t._v("/* label when want to select all elements who\n answer yes to the function */")]),t._v("\n nameAll: "),s("span",{staticClass:"blue"},[t._v("'Select all'")]),t._v(",\n nameNotAll: "),s("span",{staticClass:"blue"},[t._v("'Deselect all'")]),t._v(",\n "),s("span",{staticClass:"light-grey"},[t._v("/* label when want to deselect all elements\n who answer yes to the function */")]),t._v("\n func(elem) {\n "),s("span",{staticClass:"red bold"},[t._v(" return true")]),t._v(";\n }\n});\n\n"),s("span",{staticClass:"light-grey"},[t._v("// Second exemple to select all elements who contain 2")]),t._v("\nfilters.push({\n nameAll: "),s("span",{staticClass:"blue"},[t._v("'Select all elements with 2'")]),t._v(",\n nameNotAll: "),s("span",{staticClass:"blue"},[t._v("'Deselect all elements with 2'")]),t._v(",\n func(elem) {\n "),s("span",{staticClass:"red bold"},[t._v("return")]),t._v(" elem.name.indexOf("),s("span",{staticClass:"blue"},[t._v("'2'")]),t._v(") !== -"),s("span",{staticClass:"blue"},[t._v("1")]),t._v(";\n },\n});\n ")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"container",attrs:{id:"selectOptions"}},[s("h3",{staticClass:"s-title"},[s("a",{staticClass:"anchor",attrs:{href:"#selectOptions","aria-hidden":"true"}},[t._v("#")]),t._v("selectOptions")]),s("div",{staticClass:"docs-note"},[s("p",[t._v("elements to select/deselect")]),s("h3",[t._v("if options.groups set to default/false")]),s("p",[t._v("just use an Array of objects")]),s("p",[s("code",[t._v("[{name: 1},{name: 2}, ...]")])]),s("p",[t._v("or of strings")]),s("p",[s("code",[t._v("['Germany', 'England', ...]")])]),s("h3",[t._v("If options.groups set to true")]),s("p",[s("code",[t._v("data.name")]),t._v(" group name displayed, can be changed with tabName")]),s("p",[s("code",[t._v("data.list")]),t._v(" Name of the attributes for the array of elements, can be changed with listName")]),s("p",[t._v("it can'be an array of string or an array of objects")]),s("p"),s("p",[s("code",[t._v("data.list[x].name")]),t._v(" Name of the attributes to display one elements, can be changed with labelName")]),s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[s("code",[t._v("\n"),s("span",{staticClass:"red bold"},[t._v("const ")]),t._v(" data = [{\n "),s("span",{staticClass:"wrap"},[t._v("name: "),s("span",{staticClass:"blue"},[t._v("'choice 1'")]),t._v(", "),s("span",{staticClass:"light-grey"},[t._v("\n // Can be changed with tabName in options")])]),t._v("\n list: "),s("span",{staticClass:"light-grey"},[t._v("[ // Can be changed with listName in options")]),t._v("\n "),s("span",{staticClass:"wrap"},[t._v("{name: "),s("span",{staticClass:"blue"},[t._v("'choice 1'")]),t._v("},\n "),s("span",{staticClass:"light-grey"},[t._v("// Mame can be changed with labelName in options")])]),t._v("\n {name: "),s("span",{staticClass:"blue"},[t._v("'choice 2'")]),t._v("},\n {name: "),s("span",{staticClass:"blue"},[t._v("'choice 3'")]),t._v("},\n {name: "),s("span",{staticClass:"blue"},[t._v("'choice 4'")]),t._v("},\n {name: "),s("span",{staticClass:"blue"},[t._v("'choice 5'")]),t._v("},\n ]\n}, {\n "),s("span",{staticClass:"wrap"},[t._v("name: "),s("span",{staticClass:"blue"},[t._v("'choice 10'")]),t._v(", "),s("span",{staticClass:"light-grey"},[t._v("\n // Can be changed with tabName in options")])]),t._v("\n list: [\n "),s("span",{staticClass:"wrap"},[t._v("{name: "),s("span",{staticClass:"blue"},[t._v("'choice 11'")]),t._v("},\n "),s("span",{staticClass:"light-grey"},[t._v("// Mame can be changed with labelName in options")]),t._v("\n ")]),t._v("\n {name: "),s("span",{staticClass:"blue"},[t._v("'choice 12'")]),t._v("},\n {name: "),s("span",{staticClass:"blue"},[t._v("'choice 13'")]),t._v("},\n {name: "),s("span",{staticClass:"blue"},[t._v("'choice 14'")]),t._v("},\n {name: "),s("span",{staticClass:"blue"},[t._v("'choice 15'")]),t._v("},\n ]\n}]\n ")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"container",attrs:{id:"eventName"}},[s("h3",{staticClass:"s-title"},[s("a",{staticClass:"anchor",attrs:{href:"#eventName","aria-hidden":"true"}},[t._v("#")]),t._v(" eventName ")]),s("div",{staticClass:"docs-note"},[s("p",[t._v("Variable containing the name of the event who will be launch when vue-multi-select value change")]),s("p",[t._v("Example of function to get data")]),s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[s("code",[t._v("\n"),s("span",{staticClass:"red bold",staticStyle:{"font-weight":"bold"}},[t._v("const")]),t._v(" event = (values) => {\n this.values = values;\n}\n")])]),s("p",[t._v("Each value selected is push in this Array.")]),s("p",[t._v("When a value is unselect, he is splice fron the Array")]),s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[s("code",[t._v("\n"),s("span",{staticClass:"wrap"},[t._v("[ {name: "),s("span",{staticClass:"blue"},[t._v("'choice 1'")]),t._v("},\n{name: "),s("span",{staticClass:"blue"},[t._v("'choice 11'")]),t._v("}]\n"),s("span",{staticClass:"light-grey"},[t._v("// In the case we selected choice 1 and choice 11")]),t._v("\n")]),t._v("\n ")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("h3",{staticClass:"s-title"},[s("a",{staticClass:"anchor",attrs:{href:"#a_simple_multiselect","aria-hidden":"true"}},[t._v("#")]),t._v(" A simple vue-multi-select with slot-scope ")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[s("code",[s("span",{staticClass:"blue"},[t._v("\n \n \n \n "),s("span",{staticClass:"blue"},[t._v(" ")]),t._v("\n "),s("span",{staticClass:"blue"},[t._v("")]),t._v("{{"),s("span",{staticClass:"red"},[t._v("option.name")]),t._v("}}"),s("span",{staticClass:"blue"},[t._v(" ")]),t._v("\n "),s("span",{staticClass:"blue"},[t._v(" \n \n "),s("span",{staticClass:"blue"},[t._v("")]),t._v("\n Open manually\n "),s("span",{staticClass:"blue"},[t._v(" ")]),t._v("\n
\n ")]),t._v("\n\n"),s("span",{staticClass:"blue"},[t._v("
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
20 |
--------------------------------------------------------------------------------
/dist/lib/vue-multi-select.css:
--------------------------------------------------------------------------------
1 | /* ! vertical layout */[data-v-0ea235da]::-webkit-scrollbar{width:10px}[data-v-0ea235da]::-webkit-scrollbar-track{border-radius:10px;-webkit-box-shadow:none}[data-v-0ea235da]::-webkit-scrollbar-thumb{background:#eee;border-radius:10px}.select[data-v-0ea235da]{display:inline-block;text-align:left;position:relative}.select .vertical[data-v-0ea235da]{float:none}
2 |
3 | /* ! horizontal layout */.select .horizontal[data-v-0ea235da]:not(.selectGroup){float:left}
4 |
5 |
6 | /* ! create a "row" */.select .line[data-v-0ea235da]{-webkit-box-sizing:content-box;box-sizing:content-box;max-height:30px;overflow:hidden;padding:2px 0 4px 0;position:relative}
7 |
8 |
9 | /* ! create a "column" */.select .acol[data-v-0ea235da]{display:inline-block;min-width:12px}
10 |
11 |
12 | /* ! */.select .inlineBlock[data-v-0ea235da]{display:inline-block}.select>button[data-v-0ea235da]{border:1px solid #c6c6c6;border-radius:4px;color:#555;cursor:pointer;display:inline-block;font-size:14px;min-height:31px;padding:1px 8px 1px 8px;position:relative;text-align:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;white-space:normal;background-color:#fff}.select>button[data-v-0ea235da]:disabled,.select>button[data-v-0ea235da]:hover{background-color:#f7f7f7}.select .buttonClicked[data-v-0ea235da]{-webkit-box-shadow:0 2px 5px rgba(0,0,0,.15) inset,0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 5px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05)}.select .buttonLabel[data-v-0ea235da]{word-break:break-word;display:inline-block;padding:0 0 0 0}.select .caret[data-v-0ea235da]{display:inline-block;width:0;height:0;margin:0 0 1px 12px;vertical-align:middle;border-top:4px solid #333;border-right:4px solid transparent;border-left:4px solid transparent;border-bottom:0 dotted}.select .checkboxLayer[data-v-0ea235da]{background-color:#fff;position:absolute;z-index:999;border:solid #d3d3d3;border-width:1px 1px 1px 1px;border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175);min-width:278px;display:none}.select .helperContainer[data-v-0ea235da]{padding:8px 8px 0 8px}.select .helperButton[data-v-0ea235da]:not(.reset){margin-right:4px}.select .helperButton[data-v-0ea235da]{margin:0 0 8px 0}.select .helperButton[data-v-0ea235da],.select .historyButton[data-v-0ea235da]{display:inline;text-align:center;cursor:pointer;border:1px solid #ccc;height:26px;font-size:13px;border-radius:2px;color:#666;background-color:#fff;line-height:1.6}.right[data-v-0ea235da],.select .historyButton[data-v-0ea235da]{float:right}.margin-right-10[data-v-0ea235da]{margin-right:10px}@-moz-document url-prefix(){.select .clearButton{height:24px!important}}.select .clearButton[data-v-0ea235da]{-webkit-box-sizing:inherit;box-sizing:inherit;position:absolute;display:inline;text-align:center;cursor:pointer;border:1px solid #ccc;height:22px;width:22px;font-size:13px;border-radius:2px;color:#666;background-color:#fff;line-height:1.4;right:0;top:2px}.select .inputFilter[data-v-0ea235da]{border-radius:2px;border:1px solid #ccc;height:26px;font-size:14px;width:100%;min-width:320px;padding-left:7px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#888;margin:0 0 8px 0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.select .clearButton[data-v-0ea235da]:hover,.select .helperButton[data-v-0ea235da]:hover,.select .historyButton[data-v-0ea235da]:hover{border:1px solid #ccc;color:#999;background-color:#f1f1f1}.select .clearButton[data-v-0ea235da]:focus,.select .helperButton[data-v-0ea235da]:focus,.select .historyButton[data-v-0ea235da]:focus,.select .inputFilter[data-v-0ea235da]:focus{border:1px solid #999;outline:0;-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,.065),0 0 5px rgba(102,175,233,.6);box-shadow:inset 0 0 1px rgba(0,0,0,.065),0 0 5px rgba(102,175,233,.6)}.select .checkBoxContainer[data-v-0ea235da]{display:block;padding-top:5px;overflow:hidden;max-height:300px;min-height:80px;overflow-y:auto}.margin-left-20[data-v-0ea235da]{margin-left:20px}
13 |
14 | /* ! to show / hide the checkbox layer above */.select .show[data-v-0ea235da]{display:block}.select .selectItem[data-v-0ea235da]{font-size:13px;color:#000;margin-top:0}.select .selectItem[data-v-0ea235da],.select .selectItemDeactive[data-v-0ea235da]{display:block;padding:3px;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;border:1px solid transparent;position:relative;min-width:278px;min-height:32px}.select .selectItemDeactive[data-v-0ea235da]{color:#444}.select .selectItemDeactive[data-v-0ea235da]:hover{cursor:not-allowed}.select .selectItem.selected[data-v-0ea235da]{background-color:#e9e9e9;color:#555;cursor:pointer;border-top:1px solid #e4e4e4;border-left:1px solid #e4e4e4;border-right:1px solid #d9d9d9}.select .selectItem .acol label[data-v-0ea235da]{display:inline-block;padding-right:30px;margin:0;font-weight:400;line-height:normal}.select .selectGroup[data-v-0ea235da]:hover,.select .selectItem[data-v-0ea235da]:hover{cursor:pointer;background-color:#f5f7fa}.select .selectFocus[data-v-0ea235da],.select .selectGroup span[data-v-0ea235da]:hover,.select .selectItem span[data-v-0ea235da]:hover{cursor:pointer}
15 |
16 |
17 | /* ! group labels */.select .selectGroup[data-v-0ea235da]{display:block;clear:both}.select .tickMark[data-v-0ea235da]{display:inline-block;position:absolute;right:10px;top:7px;font-size:10px}.select .checkbox[data-v-0ea235da]{color:#ddd;position:absolute;left:-9999px;cursor:pointer}.select .disabled[data-v-0ea235da],.select .disabled[data-v-0ea235da]:hover,.select .disabled label input:hover~span[data-v-0ea235da]{color:#c4c4c4;cursor:not-allowed}.select img[data-v-0ea235da]{vertical-align:middle;margin-bottom:0;max-height:22px;max-width:22px}.select .group[data-v-0ea235da]{font-weight:600;font-size:14px}.select .sousGroup[data-v-0ea235da]{margin-left:15px}.tab[data-v-0ea235da]{padding-left:0;-webkit-box-align:center;align-items:center;border-bottom:.05rem solid #e7e9ed;display:-webkit-box;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab-item[data-v-0ea235da]{margin-top:0}.tab .tab-item.active span[data-v-0ea235da],.tab .tab-item span.active[data-v-0ea235da]{border-bottom-color:#6e7991;color:#6e7991}.tab .tab-item span[data-v-0ea235da]{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .4rem .3rem .4rem;text-decoration:none}.select .empty-tab[data-v-0ea235da]{min-height:80px;text-align:center;padding-top:30px;font-size:15px;color:#747474}.selectList[data-v-0ea235da]{margin:0;list-style:inside disc;padding-left:0}.pointer[data-v-0ea235da]{cursor:pointer}.bold[data-v-0ea235da]{font-weight:700}
--------------------------------------------------------------------------------
/dist/lib/vue-multi-select.umd.min.js:
--------------------------------------------------------------------------------
1 | (function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-multi-select"]=e():t["vue-multi-select"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"00ee":function(t,e,n){var r=n("b622"),i=r("toStringTag"),o={};o[i]="z",t.exports="[object z]"===String(o)},"0366":function(t,e,n){var r=n("1c0b");t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 0:return function(){return t.call(e)};case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,i){return t.call(e,n,r,i)}}return function(){return t.apply(e,arguments)}}},"057f":function(t,e,n){var r=n("fc6a"),i=n("241c").f,o={}.toString,c="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[],s=function(t){try{return i(t)}catch(e){return c.slice()}};t.exports.f=function(t){return c&&"[object Window]"==o.call(t)?s(t):i(r(t))}},"06cf":function(t,e,n){var r=n("83ab"),i=n("d1e7"),o=n("5c6c"),c=n("fc6a"),s=n("c04e"),a=n("5135"),l=n("0cfb"),u=Object.getOwnPropertyDescriptor;e.f=r?u:function(t,e){if(t=c(t),e=s(e,!0),l)try{return u(t,e)}catch(n){}if(a(t,e))return o(!i.f.call(t,e),t[e])}},"0cfb":function(t,e,n){var r=n("83ab"),i=n("d039"),o=n("cc12");t.exports=!r&&!i((function(){return 7!=Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}))},1276:function(t,e,n){"use strict";var r=n("d784"),i=n("44e7"),o=n("825a"),c=n("1d80"),s=n("4840"),a=n("8aa5"),l=n("50c4"),u=n("14c3"),f=n("9263"),d=n("d039"),p=[].push,h=Math.min,b=4294967295,v=!d((function(){return!RegExp(b,"y")}));r("split",2,(function(t,e,n){var r;return r="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,n){var r=String(c(this)),o=void 0===n?b:n>>>0;if(0===o)return[];if(void 0===t)return[r];if(!i(t))return e.call(r,t,o);var s,a,l,u=[],d=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),h=0,v=new RegExp(t.source,d+"g");while(s=f.call(v,r)){if(a=v.lastIndex,a>h&&(u.push(r.slice(h,s.index)),s.length>1&&s.index=o))break;v.lastIndex===s.index&&v.lastIndex++}return h===r.length?!l&&v.test("")||u.push(""):u.push(r.slice(h)),u.length>o?u.slice(0,o):u}:"0".split(void 0,0).length?function(t,n){return void 0===t&&0===n?[]:e.call(this,t,n)}:e,[function(e,n){var i=c(this),o=void 0==e?void 0:e[t];return void 0!==o?o.call(e,i,n):r.call(String(i),e,n)},function(t,i){var c=n(r,t,this,i,r!==e);if(c.done)return c.value;var f=o(t),d=String(this),p=s(f,RegExp),g=f.unicode,y=(f.ignoreCase?"i":"")+(f.multiline?"m":"")+(f.unicode?"u":"")+(v?"y":"g"),m=new p(v?f:"^(?:"+f.source+")",y),S=void 0===i?b:i>>>0;if(0===S)return[];if(0===d.length)return null===u(m,d)?[d]:[];var x=0,O=0,w=[];while(O1?arguments[1]:void 0)}},"1be4":function(t,e,n){var r=n("d066");t.exports=r("document","documentElement")},"1c0b":function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(String(t)+" is not a function");return t}},"1d80":function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},"1dde":function(t,e,n){var r=n("d039"),i=n("b622"),o=n("2d00"),c=i("species");t.exports=function(t){return o>=51||!r((function(){var e=[],n=e.constructor={};return n[c]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},"23cb":function(t,e,n){var r=n("a691"),i=Math.max,o=Math.min;t.exports=function(t,e){var n=r(t);return n<0?i(n+e,0):o(n,e)}},"23e7":function(t,e,n){var r=n("da84"),i=n("06cf").f,o=n("9112"),c=n("6eeb"),s=n("ce4e"),a=n("e893"),l=n("94ca");t.exports=function(t,e){var n,u,f,d,p,h,b=t.target,v=t.global,g=t.stat;if(u=v?r:g?r[b]||s(b,{}):(r[b]||{}).prototype,u)for(f in e){if(p=e[f],t.noTargetGet?(h=i(u,f),d=h&&h.value):d=u[f],n=l(v?f:b+(g?".":"#")+f,t.forced),!n&&void 0!==d){if(typeof p===typeof d)continue;a(p,d)}(t.sham||d&&d.sham)&&o(p,"sham",!0),c(u,f,p,t)}}},"241c":function(t,e,n){var r=n("ca84"),i=n("7839"),o=i.concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},"2d00":function(t,e,n){var r,i,o=n("da84"),c=n("342f"),s=o.process,a=s&&s.versions,l=a&&a.v8;l?(r=l.split("."),i=r[0]+r[1]):c&&(r=c.match(/Edge\/(\d+)/),(!r||r[1]>=74)&&(r=c.match(/Chrome\/(\d+)/),r&&(i=r[1]))),t.exports=i&&+i},"342f":function(t,e,n){var r=n("d066");t.exports=r("navigator","userAgent")||""},"37e8":function(t,e,n){var r=n("83ab"),i=n("9bf2"),o=n("825a"),c=n("df75");t.exports=r?Object.defineProperties:function(t,e){o(t);var n,r=c(e),s=r.length,a=0;while(s>a)i.f(t,n=r[a++],e[n]);return t}},"3bbe":function(t,e,n){var r=n("861d");t.exports=function(t){if(!r(t)&&null!==t)throw TypeError("Can't set "+String(t)+" as a prototype");return t}},"3ca3":function(t,e,n){"use strict";var r=n("6547").charAt,i=n("69f3"),o=n("7dd0"),c="String Iterator",s=i.set,a=i.getterFor(c);o(String,"String",(function(t){s(this,{type:c,string:String(t),index:0})}),(function(){var t,e=a(this),n=e.string,i=e.index;return i>=n.length?{value:void 0,done:!0}:(t=r(n,i),e.index+=t.length,{value:t,done:!1})}))},"3f8c":function(t,e){t.exports={}},4160:function(t,e,n){"use strict";var r=n("23e7"),i=n("17c2");r({target:"Array",proto:!0,forced:[].forEach!=i},{forEach:i})},"428f":function(t,e,n){var r=n("da84");t.exports=r},"44ad":function(t,e,n){var r=n("d039"),i=n("c6b6"),o="".split;t.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(t){return"String"==i(t)?o.call(t,""):Object(t)}:Object},"44d2":function(t,e,n){var r=n("b622"),i=n("7c73"),o=n("9bf2"),c=r("unscopables"),s=Array.prototype;void 0==s[c]&&o.f(s,c,{configurable:!0,value:i(null)}),t.exports=function(t){s[c][t]=!0}},"44e7":function(t,e,n){var r=n("861d"),i=n("c6b6"),o=n("b622"),c=o("match");t.exports=function(t){var e;return r(t)&&(void 0!==(e=t[c])?!!e:"RegExp"==i(t))}},"466d":function(t,e,n){"use strict";var r=n("d784"),i=n("825a"),o=n("50c4"),c=n("1d80"),s=n("8aa5"),a=n("14c3");r("match",1,(function(t,e,n){return[function(e){var n=c(this),r=void 0==e?void 0:e[t];return void 0!==r?r.call(e,n):new RegExp(e)[t](String(n))},function(t){var r=n(e,t,this);if(r.done)return r.value;var c=i(t),l=String(this);if(!c.global)return a(c,l);var u=c.unicode;c.lastIndex=0;var f,d=[],p=0;while(null!==(f=a(c,l))){var h=String(f[0]);d[p]=h,""===h&&(c.lastIndex=s(l,o(c.lastIndex),u)),p++}return 0===p?null:d}]}))},4840:function(t,e,n){var r=n("825a"),i=n("1c0b"),o=n("b622"),c=o("species");t.exports=function(t,e){var n,o=r(t).constructor;return void 0===o||void 0==(n=r(o)[c])?e:i(n)}},4930:function(t,e,n){var r=n("d039");t.exports=!!Object.getOwnPropertySymbols&&!r((function(){return!String(Symbol())}))},"4d64":function(t,e,n){var r=n("fc6a"),i=n("50c4"),o=n("23cb"),c=function(t){return function(e,n,c){var s,a=r(e),l=i(a.length),u=o(c,l);if(t&&n!=n){while(l>u)if(s=a[u++],s!=s)return!0}else for(;l>u;u++)if((t||u in a)&&a[u]===n)return t||u||0;return!t&&-1}};t.exports={includes:c(!0),indexOf:c(!1)}},"4de4":function(t,e,n){"use strict";var r=n("23e7"),i=n("b727").filter,o=n("1dde"),c=n("ae40"),s=o("filter"),a=c("filter");r({target:"Array",proto:!0,forced:!s||!a},{filter:function(t){return i(this,t,arguments.length>1?arguments[1]:void 0)}})},"50c4":function(t,e,n){var r=n("a691"),i=Math.min;t.exports=function(t){return t>0?i(r(t),9007199254740991):0}},5135:function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},5692:function(t,e,n){var r=n("c430"),i=n("c6cd");(t.exports=function(t,e){return i[t]||(i[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.8.1",mode:r?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},"56ef":function(t,e,n){var r=n("d066"),i=n("241c"),o=n("7418"),c=n("825a");t.exports=r("Reflect","ownKeys")||function(t){var e=i.f(c(t)),n=o.f;return n?e.concat(n(t)):e}},"5c6c":function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},6547:function(t,e,n){var r=n("a691"),i=n("1d80"),o=function(t){return function(e,n){var o,c,s=String(i(e)),a=r(n),l=s.length;return a<0||a>=l?t?"":void 0:(o=s.charCodeAt(a),o<55296||o>56319||a+1===l||(c=s.charCodeAt(a+1))<56320||c>57343?t?s.charAt(a):o:t?s.slice(a,a+2):c-56320+(o-55296<<10)+65536)}};t.exports={codeAt:o(!1),charAt:o(!0)}},"65f0":function(t,e,n){var r=n("861d"),i=n("e8b5"),o=n("b622"),c=o("species");t.exports=function(t,e){var n;return i(t)&&(n=t.constructor,"function"!=typeof n||n!==Array&&!i(n.prototype)?r(n)&&(n=n[c],null===n&&(n=void 0)):n=void 0),new(void 0===n?Array:n)(0===e?0:e)}},"69f3":function(t,e,n){var r,i,o,c=n("7f9a"),s=n("da84"),a=n("861d"),l=n("9112"),u=n("5135"),f=n("c6cd"),d=n("f772"),p=n("d012"),h=s.WeakMap,b=function(t){return o(t)?i(t):r(t,{})},v=function(t){return function(e){var n;if(!a(e)||(n=i(e)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return n}};if(c){var g=f.state||(f.state=new h),y=g.get,m=g.has,S=g.set;r=function(t,e){return e.facade=t,S.call(g,t,e),e},i=function(t){return y.call(g,t)||{}},o=function(t){return m.call(g,t)}}else{var x=d("state");p[x]=!0,r=function(t,e){return e.facade=t,l(t,x,e),e},i=function(t){return u(t,x)?t[x]:{}},o=function(t){return u(t,x)}}t.exports={set:r,get:i,has:o,enforce:b,getterFor:v}},"6eeb":function(t,e,n){var r=n("da84"),i=n("9112"),o=n("5135"),c=n("ce4e"),s=n("8925"),a=n("69f3"),l=a.get,u=a.enforce,f=String(String).split("String");(t.exports=function(t,e,n,s){var a,l=!!s&&!!s.unsafe,d=!!s&&!!s.enumerable,p=!!s&&!!s.noTargetGet;"function"==typeof n&&("string"!=typeof e||o(n,"name")||i(n,"name",e),a=u(n),a.source||(a.source=f.join("string"==typeof e?e:""))),t!==r?(l?!p&&t[e]&&(d=!0):delete t[e],d?t[e]=n:i(t,e,n)):d?t[e]=n:c(e,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&l(this).source||s(this)}))},7418:function(t,e){e.f=Object.getOwnPropertySymbols},"746f":function(t,e,n){var r=n("428f"),i=n("5135"),o=n("e538"),c=n("9bf2").f;t.exports=function(t){var e=r.Symbol||(r.Symbol={});i(e,t)||c(e,t,{value:o.f(t)})}},7839:function(t,e){t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},"7b0b":function(t,e,n){var r=n("1d80");t.exports=function(t){return Object(r(t))}},"7c73":function(t,e,n){var r,i=n("825a"),o=n("37e8"),c=n("7839"),s=n("d012"),a=n("1be4"),l=n("cc12"),u=n("f772"),f=">",d="<",p="prototype",h="script",b=u("IE_PROTO"),v=function(){},g=function(t){return d+h+f+t+d+"/"+h+f},y=function(t){t.write(g("")),t.close();var e=t.parentWindow.Object;return t=null,e},m=function(){var t,e=l("iframe"),n="java"+h+":";return e.style.display="none",a.appendChild(e),e.src=String(n),t=e.contentWindow.document,t.open(),t.write(g("document.F=Object")),t.close(),t.F},S=function(){try{r=document.domain&&new ActiveXObject("htmlfile")}catch(e){}S=r?y(r):m();var t=c.length;while(t--)delete S[p][c[t]];return S()};s[b]=!0,t.exports=Object.create||function(t,e){var n;return null!==t?(v[p]=i(t),n=new v,v[p]=null,n[b]=t):n=S(),void 0===e?n:o(n,e)}},"7dd0":function(t,e,n){"use strict";var r=n("23e7"),i=n("9ed3"),o=n("e163"),c=n("d2bb"),s=n("d44e"),a=n("9112"),l=n("6eeb"),u=n("b622"),f=n("c430"),d=n("3f8c"),p=n("ae93"),h=p.IteratorPrototype,b=p.BUGGY_SAFARI_ITERATORS,v=u("iterator"),g="keys",y="values",m="entries",S=function(){return this};t.exports=function(t,e,n,u,p,x,O){i(n,e,u);var w,T,j,A=function(t){if(t===p&&P)return P;if(!b&&t in _)return _[t];switch(t){case g:return function(){return new n(this,t)};case y:return function(){return new n(this,t)};case m:return function(){return new n(this,t)}}return function(){return new n(this)}},C=e+" Iterator",E=!1,_=t.prototype,M=_[v]||_["@@iterator"]||p&&_[p],P=!b&&M||A(p),k="Array"==e&&_.entries||M;if(k&&(w=o(k.call(new t)),h!==Object.prototype&&w.next&&(f||o(w)===h||(c?c(w,h):"function"!=typeof w[v]&&a(w,v,S)),s(w,C,!0,!0),f&&(d[C]=S))),p==y&&M&&M.name!==y&&(E=!0,P=function(){return M.call(this)}),f&&!O||_[v]===P||a(_,v,P),d[e]=P,p)if(T={values:A(y),keys:x?P:A(g),entries:A(m)},O)for(j in T)(b||E||!(j in _))&&l(_,j,T[j]);else r({target:e,proto:!0,forced:b||E},T);return T}},"7f9a":function(t,e,n){var r=n("da84"),i=n("8925"),o=r.WeakMap;t.exports="function"===typeof o&&/native code/.test(i(o))},"825a":function(t,e,n){var r=n("861d");t.exports=function(t){if(!r(t))throw TypeError(String(t)+" is not an object");return t}},"83ab":function(t,e,n){var r=n("d039");t.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},8418:function(t,e,n){"use strict";var r=n("c04e"),i=n("9bf2"),o=n("5c6c");t.exports=function(t,e,n){var c=r(e);c in t?i.f(t,c,o(0,n)):t[c]=n}},"861d":function(t,e){t.exports=function(t){return"object"===typeof t?null!==t:"function"===typeof t}},8875:function(t,e,n){var r,i,o;(function(n,c){i=[],r=c,o="function"===typeof r?r.apply(e,i):r,void 0===o||(t.exports=o)})("undefined"!==typeof self&&self,(function(){function t(){var e=Object.getOwnPropertyDescriptor(document,"currentScript");if(!e&&"currentScript"in document&&document.currentScript)return document.currentScript;if(e&&e.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(p){var n,r,i,o=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,c=/@([^@]*):(\d+):(\d+)\s*$/gi,s=o.exec(p.stack)||c.exec(p.stack),a=s&&s[1]||!1,l=s&&s[2]||!1,u=document.location.href.replace(document.location.hash,""),f=document.getElementsByTagName("script");a===u&&(n=document.documentElement.outerHTML,r=new RegExp("(?:[^\\n]+?\\n){0,"+(l-2)+"}[^<]*
17 |
--------------------------------------------------------------------------------
/src/Dev.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 |
16 | {{option.name}}
17 |
18 |
19 | Open
20 |
21 |
22 |
23 |
92 |
--------------------------------------------------------------------------------
/src/components/doc/doc.css:
--------------------------------------------------------------------------------
1 | .s-container > .columns {
2 | flex-direction: initial;
3 | flex-wrap: nowrap;
4 | min-height: 100vh;
5 | }
6 |
7 | .s-sidebar {
8 | background: #f8f9fa;
9 | -ms-flex: 0 0 auto;
10 | flex: 0 0 auto;
11 | padding: 1.5rem 0 1.5rem 1.5rem;
12 | width: 14rem;
13 | }
14 |
15 | .s-brand {
16 | color: #5764c6;
17 | left: 0;
18 | padding: 0 1.5rem;
19 | position: fixed;
20 | top: 1.3rem;
21 | }
22 |
23 | .s-brand .s-logo {
24 | align-items: center;
25 | border-radius: .1rem;
26 | display: inline-flex;
27 | display: -ms-inline-flexbox;
28 | -ms-flex-align: center;
29 | height: 2rem;
30 | padding: .2rem;
31 | width: auto;
32 | }
33 |
34 | .s-brand .s-logo h2 {
35 | display: inline;
36 | font-size: .8rem;
37 | margin-bottom: 0;
38 | margin-left: .5rem;
39 | margin-right: .5rem;
40 | }
41 | .s-sidebar .s-nav {
42 | bottom: 1.5rem;
43 | overflow-y: auto;
44 | position: fixed;
45 | top: 5rem;
46 | width: 10.5rem;
47 | }
48 |
49 | .s-sidebar .accordion input ~ .accordion-header {
50 | color: #5b657a;
51 | font-weight: 600;
52 | }
53 |
54 | .float-btn {
55 | position: fixed;
56 | right: 4rem;
57 | top: 1.5rem;
58 | z-index: 100;
59 | }
60 |
61 | .s-content {
62 | flex: 1 1 auto;
63 | max-width: 960px;
64 | padding: 0 4rem;
65 | width: calc(100vw - 12rem);
66 | }
67 |
68 | .s-content .anchor {
69 | color: #626fca;
70 | height: 0;
71 | margin-left: -2em;
72 | overflow: hidden;
73 | padding: 0 1em;
74 | position: absolute;
75 | text-align: center;
76 | width: 0;
77 | z-index: 100;
78 | }
79 |
80 | .s-content .anchor:focus,
81 | .s-content .anchor:hover {
82 | box-shadow: none;
83 | height: auto;
84 | text-decoration: none;
85 | width: 2em;
86 | }
87 |
88 | .s-content .s-title,
89 | .s-content .s-subtitle {
90 | line-height: 1.6rem;
91 | margin-bottom: 0;
92 | padding-bottom: 1.5rem;
93 | padding-top: 1.5rem;
94 | position: static;
95 | }
96 |
97 |
98 | .s-content .s-title:hover .anchor,
99 | .s-content .s-subtitle:hover .anchor {
100 | height: auto;
101 | width: 1em;
102 | }
103 |
104 | .s-content .s-title, .s-content .s-subtitle {
105 | position: sticky;
106 | position: -webkit-sticky;
107 | top: 0;
108 | z-index: 200;
109 | }
110 |
111 | .s-content .s-title, .s-content .s-subtitle {
112 | line-height: 1.6rem;
113 | margin-bottom: 0;
114 | padding-bottom: 1.5rem;
115 | padding-top: 1.5rem;
116 | position: static;
117 | }
118 |
119 | .s-content .code .tag {
120 | color: #5764c6;
121 | }
122 |
123 | .s-content .code .atn {
124 | color: #667189;
125 | }
126 |
127 | .s-content .code .atv {
128 | color: #e06870;
129 | }
130 |
131 | .s-footer {
132 | position: fixed;
133 | bottom: 0;
134 | left: 0;
135 | padding: 1rem;
136 | text-align: center;
137 | }
138 |
139 | .s-logo {
140 | align-items: center;
141 | border-radius: .1rem;
142 | display: inline-flex;
143 | display: -ms-inline-flexbox;
144 | -ms-flex-align: center;
145 | height: 2rem;
146 | padding: .2rem;
147 | width: auto;
148 | }
149 |
150 | .s-footer .s-logo img {
151 | display: inline;
152 | height: auto;
153 | width: 1.6rem;
154 | }
155 |
156 | .s-footer .s-logo span {
157 | display: inline;
158 | font-size: .8rem;
159 | font-weight: 500;
160 | margin-bottom: 0;
161 | margin-left: .5rem;
162 | margin-right: .5rem;
163 | }
164 |
165 | .classSelected {
166 | font-weight: bold;
167 | color: #5755d9;
168 | }
169 |
170 | .hand {
171 | cursor: pointer;
172 | }
173 |
174 | .red {
175 | color: #e06870;
176 | }
177 |
178 | .blue {
179 | color: #5764c6;
180 | }
181 |
182 | .grey {
183 | color: #667189;
184 | }
185 |
186 | .light-grey {
187 | color: #acb3c2;
188 | font-style: italic;
189 | }
190 |
191 | .wrap {
192 | white-space: nowrap;
193 | }
194 |
195 | .bold {
196 | font-weight: bold;
197 | }
198 |
199 | .table {
200 | margin-bottom: 20px;
201 | }
202 |
--------------------------------------------------------------------------------
/src/components/doc/doc.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import 'spectre.css/dist/spectre.min.css';
3 | // eslint-disable-next-line
4 | import 'spectre.css/dist/spectre-icons.min.css';
5 | // eslint-disable-next-line
6 | import 'spectre.css/dist/spectre-exp.min.css';
7 |
8 | import vueMultiSelect from '@/components/vueMultiSelect/vue-multi-select.vue';
9 |
10 | export default {
11 | name: 'doc',
12 | components: { vueMultiSelect },
13 | data() {
14 | return {
15 | string: 'string',
16 | example1: {
17 | btnLabel: (values) => `A simple vue multi select (${values.length})`,
18 | selectOptions: [{
19 | name: 'first group',
20 | list: [
21 | { name: '0' },
22 | { name: '2' },
23 | { name: '3' },
24 | { name: '8' },
25 | { name: '9' },
26 | { name: '11' },
27 | { name: '13' },
28 | { name: '14' },
29 | { name: '15' },
30 | { name: '18' },
31 | ],
32 | }, {
33 | name: 'second group',
34 | list: [
35 | { name: '21' },
36 | { name: '22' },
37 | { name: '24' },
38 | { name: '27' },
39 | { name: '28' },
40 | { name: '29' },
41 | { name: '31' },
42 | { name: '33' },
43 | { name: '35' },
44 | { name: '39' },
45 | ],
46 | }],
47 | filters: [
48 | {
49 | nameAll: 'Select all',
50 | nameNotAll: 'Deselect all',
51 | func() {
52 | return true;
53 | },
54 | }, {
55 | nameAll: 'select <= 10',
56 | nameNotAll: 'Deselect <= 10',
57 | func(elem) {
58 | return elem.name <= 10;
59 | },
60 | }, {
61 | nameAll: 'Select contains 2',
62 | nameNotAll: 'Deselect contains 2',
63 | func(elem) {
64 | return elem.name.indexOf('2') !== -1;
65 | },
66 | },
67 | ],
68 | options: {
69 | multi: true,
70 | groups: true,
71 | },
72 | values: [],
73 | isActive: 'code',
74 | },
75 | example2: {
76 | btnLabel: (values) => (values.length > 0 ? values[0].name : 'Select...'),
77 | selectOptions: [
78 | { name: '0' },
79 | { name: '2' },
80 | { name: '3' },
81 | { name: '8' },
82 | { name: '9' },
83 | { name: '11' },
84 | { name: '13' },
85 | { name: '14' },
86 | { name: '15' },
87 | { name: '18' },
88 | ],
89 | options: {
90 | },
91 | values: [],
92 | isActive: 'code',
93 | },
94 | example3: {
95 | selectOptions: [{
96 | title: 'part one',
97 | elements: [
98 | { label: '0', disabled: true },
99 | { label: '2' },
100 | { label: '3' },
101 | { label: '8' },
102 | { label: '9' },
103 | { label: '11' },
104 | { label: '13' },
105 | { label: '14' },
106 | { label: '15' },
107 | { label: '18' },
108 | ],
109 | }, {
110 | title: 'part two',
111 | elements: [
112 | { label: '23' },
113 | { label: '25' },
114 | { label: '31' },
115 | { label: '42' },
116 | { label: '56' },
117 | { label: '76' },
118 | { label: '82' },
119 | { label: '42' },
120 | { label: '13' },
121 | { label: '21' },
122 | ],
123 | }],
124 | filters: [{
125 | nameAll: 'Select all',
126 | nameNotAll: 'Deselect all',
127 | func() {
128 | return true;
129 | },
130 | }],
131 | options: {
132 | multi: true,
133 | groups: true,
134 | labelName: 'label',
135 | labelList: 'elements',
136 | groupName: 'title',
137 | labelHtml: 'labelHtml',
138 | cssSelected: (option) => (option.selected ? { 'background-color': '#5764c6' } : ''),
139 | },
140 | values: [
141 | { label: '2' },
142 | { label: '3' },
143 | ],
144 | isActive: 'code',
145 | },
146 | example4: {
147 | selectOptions: [{
148 | title: 'part one',
149 | elements: [
150 | '0',
151 | '2',
152 | '3',
153 | '8',
154 | '9',
155 | '11',
156 | '13',
157 | '14',
158 | '15',
159 | '18',
160 | ],
161 | }, {
162 | title: 'part two',
163 | elements: [
164 | '23',
165 | '25',
166 | '31',
167 | '42',
168 | '56',
169 | '76',
170 | '82',
171 | '42',
172 | '13',
173 | '21',
174 | ],
175 | }],
176 | filters: [{
177 | nameAll: 'Select all',
178 | nameNotAll: 'Deselect all',
179 | func() {
180 | return true;
181 | },
182 | }],
183 | options: {
184 | multi: true,
185 | groups: true,
186 | labelList: 'elements',
187 | groupName: 'title',
188 | cssSelected: (option) => (option.selected ? { 'background-color': '#5764c6' } : ''),
189 | },
190 | position: 'top-right',
191 | values: ['0', '2'],
192 | isActive: 'code',
193 | },
194 | };
195 | },
196 | methods: {
197 | openManually() {
198 | this.$refs.multiSelect.openMultiSelect();
199 | },
200 | open() {
201 | // eslint-disable-next-line
202 | console.log('open');
203 | },
204 | close() {
205 | // eslint-disable-next-line
206 | console.log('close');
207 | },
208 | setActive(e, label) {
209 | e.isActive = label;
210 | },
211 | reloadFunction3() {
212 | this.example3.values = [
213 | { label: '2' },
214 | { label: '3' },
215 | ];
216 | },
217 | reloadFunction4() {
218 | this.example4.values = ['0', '2'];
219 | },
220 | randomize(e) {
221 | const list = e.options.labelList || 'list';
222 | const name = e.options.labelName || 'name';
223 | for (let i = 0; i < e.selectOptions.length; i += 1) {
224 | if (e.selectOptions[i][list]) {
225 | for (let j = 0; j < e.selectOptions[i][list].length; j += 1) {
226 | e.selectOptions[i][list][j][name] = String(Math.floor(Math.random() * 100) + 1);
227 | }
228 | } else {
229 | e.selectOptions[i][name] = String(Math.floor(Math.random() * 100) + 1);
230 | }
231 | }
232 | },
233 | },
234 | };
235 |
--------------------------------------------------------------------------------
/src/components/doc/doc.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
91 |
96 |
103 |
104 |
105 |
106 | #
107 | Introduction
108 |
109 |
110 |
Vue multi select is a lightweight,
111 | multi/single select fast and fully custom.
112 |
Vue multi select provides basic things like groups, research,
113 | buttons to select/deselect all many customisation to adapt the best way
114 | to your application.
115 |
116 |
117 |
118 |
119 | # Installation
120 |
121 |
Dependencies
122 |
- required: Vuejs >= 2.x
123 |
Install
124 |
125 |
Clone the repo
126 | github or
127 | npm install vue-multi-select --save
128 |
Include the file in your app import vueMultiSelect from
129 |
130 |
131 | import vueMultiSelect from 'vue-multi-select';
132 | import 'vue-multi-select/dist/lib/vue-multi-select.css';
133 |
134 |
135 |
136 |
137 |
138 |
139 | # What's new
140 |
141 |
142 |
4.6.0
143 | Set a props for label when empty data
144 |
4.5.0
145 | Set possible to open manually
146 |
4.4.1
147 | Fix labelName for default slot
148 |
4.4.0
149 | Set possible to use slot-scope for options. renderTemplate is no more Supported
150 |
4.3.0
151 | Add disabledUnSelect popoverClass as props
152 |
4.2.0
153 | Add btnClass popoverClass as props
154 |
4.1.1
155 | Build lib
156 |
4.1.0
157 | Use v-html to display button
158 |
4.0.0
159 | Use vue-cli to bundle
160 |
3.16.0
161 | Add open/close events
162 |
3.15.0
163 | Use a function to render btnLabel
164 |
3.14.1
165 | Fix event triggered 2 times in single select
166 |
3.14.0
167 | Set possible to disable vueMultiSelect
168 |
3.13.1
169 | Fix doc about css import
170 |
3.13.0
171 | Set position custom
172 |
3.12.1
173 | Small change about way to render name
174 |
3.12.0
175 | Use v-html to render options
176 |
3.11.1
177 |
Fix button for simple array
178 |
3.11.0
179 |
Set up an historic mode
180 |
3.10.0
181 |
Remove default select all and update a little some css
182 |
3.9.1
183 |
Remove reloadInit and for manual reload. Now just update v-model, vue-multi-select will reload automatically
184 |
185 |
186 |
187 |
188 | # General
189 |
190 |
191 |
Directive must be call like that in Html
192 |
193 | <multi-select></multi-select>
194 |
195 |
196 |
Props for vue-multi-select :
197 |
198 |
199 |
200 | Params
201 | Type
202 | Description
203 | Default
204 |
205 |
206 |
207 |
208 | options
209 | Object
210 | Permit to params most the options of the multi Select
211 | {}
212 |
213 |
214 | filters
215 | Array
216 | Permit to add some filters in the vueMultiSelect's input
217 | []
218 |
219 |
220 | selectOptions
221 | Array
222 | Variables who contains values for the select
223 | []
224 |
225 |
226 | eventName
227 | String
228 | eventName Name for the event triggered by
229 | the vue-multi-select default is selectionChanged (deprecated, use v-model or a watch)
230 | 'selectionChanged'
231 |
232 |
233 | v-model
234 | Array
235 | Variables who contains values selected
236 | -
237 |
238 |
239 | search
240 | Boolean
241 | hide/show search bar (search isn't case sensitive)
242 | False
243 |
244 |
245 | searchPlaceholder
246 | String
247 | Change placeholder of searchBar
248 | 'Search...'
249 |
250 |
251 | historyButton
252 | Boolean
253 | Display the button to use previous values selected
254 | false
255 |
256 |
257 | historyButtonText
258 | String
259 | Label for previous button
260 | '↶''
261 |
262 |
263 | position
264 | String
265 | Where to display options, top/bottom-left/right
266 | 'top-bottom'
267 |
268 |
269 | disabled
270 | Boolean
271 | Disable button
272 | False
273 |
274 |
275 | disabledUnSelect
276 | Boolean
277 | To disable the possibility to unselect an option (only in singleSelect)
278 | false
279 |
280 |
281 | emptyTabText
282 | String
283 | Label when empty tab
284 | 'No data'
285 |
286 |
287 |
288 |
Events for vue-multi-select :
289 |
290 |
291 |
292 | name
293 | params
294 | Description
295 |
296 |
297 |
298 |
299 | selectionChanged
300 | selected values
301 | triggered when an option is selected (the name can be changed with props eventName)
302 |
303 |
304 | open
305 | -
306 | triggered when the vue-multi-select open
307 |
308 |
309 | close
310 | -
311 | triggered when the vue-multi-select close
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 | # options
320 |
321 |
322 |
This variable contains params to setup the vue-multi-select.
323 |
Props for vue-multi-select :
324 |
325 |
326 |
327 | Params
328 | Type
329 | Default
330 | Description
331 |
332 |
333 |
334 |
335 | btnLabel
336 | Function
337 | () => ('multi-select')
338 | Label on the button
339 |
340 |
341 | btnClass
342 | String
343 | ''
344 | css class who apply on the button
345 |
346 |
347 | popoverClass
348 | String
349 | ''
350 | css class who apply on the popover
351 |
352 |
353 | cssSelected
354 | Function
355 | (option) => option['selected'] ?
356 | {'background-color': '#b4b4b4'} : ''
357 | Css passed to value selected
358 |
359 |
360 | groups
361 | Boolean
362 | false
363 | Display or not groups selection
364 |
365 |
366 | multi
367 | Boolean
368 | false
369 | Set single or multiple selection
370 |
371 |
372 | labelList
373 | String
374 | 'list'
375 | Name Attributes for list
376 |
377 |
378 | labelName
379 | String
380 | 'name'
381 | Name Attributes for value to display
382 |
383 |
384 | labelValue
385 | String
386 | labelName
387 | Attributes for value to compare them
388 |
389 |
390 | labelSelected
391 | String
392 | 'selected'
393 | Name Attributes for value to display
394 |
395 |
396 | labelDisabled
397 | String
398 | 'disabled'
399 | Name Attributes for value to disable
400 |
401 |
402 | groupName
403 | String
404 | 'name'
405 | Name Attributes for groups to display
406 |
407 |
408 |
409 |
410 |
411 |
412 |
# Filters
413 |
414 |
filters to apply to select many options
415 |
nameAll
416 | Name displayed when all elements respect the condition
417 |
nameNotAll
418 | Name displayed when all elements don't respect the condition
419 |
func
420 | The function (must return true or false) who permit to test if
421 | the element respect a condition
422 |
423 | const filters = [];
424 | filters.push({
425 | /* label when want to select all elements who
426 | answer yes to the function */
427 | nameAll: 'Select all' ,
428 | nameNotAll: 'Deselect all' ,
429 | /* label when want to deselect all elements
430 | who answer yes to the function */
431 | func(elem) {
432 | return true ;
433 | }
434 | });
435 |
436 | // Second exemple to select all elements who contain 2
437 | filters.push({
438 | nameAll: 'Select all elements with 2' ,
439 | nameNotAll: 'Deselect all elements with 2' ,
440 | func(elem) {
441 | return elem.name.indexOf('2' ) !== -1 ;
442 | },
443 | });
444 |
445 |
446 |
447 |
448 |
450 | # selectOptions
451 |
452 |
elements to select/deselect
453 |
if options.groups set to default/false
454 |
just use an Array of objects
455 |
[{name: 1},{name: 2}, ...]
456 |
or of strings
457 |
['Germany', 'England', ...]
458 |
If options.groups set to true
459 |
data.name
group name displayed, can be changed with tabName
460 |
data.list
Name of the attributes for the array of
461 | elements, can be changed with listName
462 |
it can'be an array of string or an array of objects
463 |
data.list[x].name
Name of the attributes to display one elements,
464 | can be changed with labelName
465 |
466 | const data = [{
467 | name: 'choice 1' ,
468 | // Can be changed with tabName in options
469 | list: [ // Can be changed with listName in options
470 | {name: 'choice 1' },
471 | // Mame can be changed with labelName in options
472 | {name: 'choice 2' },
473 | {name: 'choice 3' },
474 | {name: 'choice 4' },
475 | {name: 'choice 5' },
476 | ]
477 | }, {
478 | name: 'choice 10' ,
479 | // Can be changed with tabName in options
480 | list: [
481 | {name: 'choice 11' },
482 | // Mame can be changed with labelName in options
483 |
484 | {name: 'choice 12' },
485 | {name: 'choice 13' },
486 | {name: 'choice 14' },
487 | {name: 'choice 15' },
488 | ]
489 | }]
490 |
491 |
492 |
493 |
494 |
495 | #
496 | eventName
497 |
498 |
499 |
Variable containing the name of the event who will be launch
500 | when vue-multi-select value change
501 |
Example of function to get data
502 |
503 | const event = (values) => {
504 | this.values = values;
505 | }
506 |
507 |
Each value selected is push in this Array.
508 |
When a value is unselect, he is splice fron the Array
509 |
510 | [ {name: 'choice 1' },
511 | {name: 'choice 11' }]
512 | // In the case we selected choice 1 and choice 11
513 |
514 |
515 |
516 |
517 |
518 |
519 | #
520 | A simple vue-multi-select with slot-scope
521 |
522 |
523 |
values selected. Each value selected is push in this Array.
524 |
When a value is unselect, he is splice fron the Array
525 |
526 |
527 |
538 |
539 |
540 | {{option.name}}
541 |
542 |
543 |
544 |
545 | Open manually
546 | Reset Data
547 |
548 |
549 |
559 |
560 |
<template>
562 | <div>
563 | <vue-multi-select
564 | ref="multiSelect"
565 | v-model="values"
566 | search
567 | historyButton
568 | :options="options"
569 | :filters="filters"
570 | :btnLabel="btnLabel"
571 | @open="open"
572 | @close="close"
573 | :selectOptions="data" >
574 | <template v-slot:option="{option}" >
575 | <input type="checkbox" :checked="option.selected" />
576 | <span> {{option.name }}</span>
577 | </template>
578 | </vue-multi-select>
579 | <button
580 | @click="openManually" >
581 | Open manually
582 | </button>
583 | </div>
584 | </template>
585 |
586 | <script>
587 | import vueMultiSelect from 'vue-multi-select' ;
588 | import
589 | 'vue-multi-select/dist/lib/vue-multi-select.css' ;
590 |
591 | export default {
592 | data() {
593 | return {
594 | btnLabel: values => `A simple vue multi select ( ${values.length})`
595 | name: 'first group' ,
596 | values: [],
597 | data: [{
598 | name: 'first group' ,
599 | list: [
600 | { name: '0' },
601 | { name: '2' },
602 | { name: '3' },
603 | { name: '8' },
604 | { name: '9' },
605 | { name: '11' },
606 | { name: '13' },
607 | { name: '14' },
608 | { name: '15' },
609 | { name: '18' },
610 | ],
611 | }, {
612 | name: 'second group' ,
613 | list: [
614 | { name: '21' },
615 | { name: '22' },
616 | { name: '24' },
617 | { name: '27' },
618 | { name: '28' },
619 | { name: '29' },
620 | { name: '31' },
621 | { name: '33' },
622 | { name: '35' },
623 | { name: '39' },
624 | ],
625 | }],
626 | filters: [{
627 | nameAll: 'Select all' ,
628 | nameNotAll: 'Deselect all' ,
629 | func() {
630 | return true;
631 | },
632 | }, {
633 | nameAll: 'select <= 10' ,
634 | nameNotAll: 'Deselect <= 10' ,
635 | func(elem) {
636 | return elem.name <= 10;
637 | },
638 | }, {
639 | nameAll: 'Select contains 2' ,
640 | nameNotAll: 'Deselect contains 2' ,
641 | func(elem) {
642 | return elem.name.indexOf('2' ) !== -1;
643 | },
644 | }],
645 | options: {
646 | multi: true ,
647 | groups: true ,
648 | },
649 | };
650 | },
651 | methods: {
652 | openManually() {
653 | this.$refs.multiSelect.openMultiSelect();
654 | },
655 | open() {
656 | console.log('open' );
657 | },
658 | close() {
659 | console.log('close' );
660 | },
661 | },
662 | components: {
663 | vueMultiSelect,
664 | },
665 | };
666 | </script>
667 |
668 |
669 |
670 |
671 |
672 | {{example1.values}}
673 |
674 |
675 |
676 |
677 |
678 |
679 | #
680 | A single Select with no groups
681 |
682 |
683 |
684 |
685 |
693 |
694 |
695 |
696 | Reset Data
698 |
699 |
700 |
701 |
713 |
714 |
716 | <template>
717 | <div>
718 | <vue-multi-select
719 | v-model="values"
720 | :btnLabel="btnLabel"
721 | search
722 | historyButton
723 | :selectOptions="data" />
724 | </div>
725 | </template>
726 |
727 | <script>
728 | import vueMultiSelect from 'vue-multi-select' ;
729 | import
730 | 'vue-multi-select/dist/lib/vue-multi-select.css' ;
731 |
732 | export default {
733 | data() {
734 | return {
735 | btnLabel: values => values.length 0 ? values[0 ].name : 'Select ...' ,
736 | name: 'first group' ,
737 | values: [],
738 | data: [
739 | { name: '0' },
740 | { name: '2' },
741 | { name: '3' },
742 | { name: '8' },
743 | { name: '9' },
744 | { name: '11' },
745 | { name: '13' },
746 | { name: '14' },
747 | { name: '15' },
748 | { name: '18' },
749 | ],
750 | };
751 | },
752 | methods: {
753 | },
754 | components: {
755 | vueMultiSelect,
756 | },
757 | };
758 | </script>
759 |
760 |
761 |
762 |
763 |
764 | {{example2.values}}
765 |
766 |
767 |
768 |
769 |
770 |
771 | #
772 | A custom multi select
773 |
774 |
775 |
if the labelSelected
776 | and cssLabel
777 | are changed don't forget to update
778 | option['selected']
in
779 | cssLabel
with the labelSelected value
780 |
It's possible to disable some value with attributes disabled
to true
781 | (it's possible to change the key with options.labelDisabled
)
782 |
783 |
784 |
791 |
792 |
793 | Change v-model
794 |
795 |
796 |
808 |
809 |
811 | <template>
812 | <div>
813 | <vue-multi-select
814 | v-model="values"
815 | search
816 | historyButton
817 | :filters="filters"
818 | :options="options"
819 | :selectOptions="data" />
820 | <button
821 | @click="reloadFunction" >
822 | Change v-model
823 | </button>
824 | </div>
825 | </template>
826 |
827 | <script>
828 | import vueMultiSelect from 'vue-multi-select' ;
829 | import
830 | 'vue-multi-select/dist/lib/vue-multi-select.css' ;
831 |
832 | export default {
833 | data() {
834 | return {
835 | name: 'first group' ,
836 | values: [
837 | { label: '2' },
838 | { label: '3' },
839 | ],
840 | data: [{
841 | title: 'part one' ,
842 | elements: [
843 | { label: '0' , disabled: true },
844 | { label: '2' },
845 | { label: '3' },
846 | { label: '8' },
847 | { label: '9' },
848 | { label: '11' },
849 | { label: '13' },
850 | { label: '14' },
851 | { label: '15' },
852 | { label: '18' },
853 | ],
854 | }, {
855 | title: 'part two' ,
856 | elements: [
857 | { label: '23' },
858 | { label: '25' },
859 | { label: '31' },
860 | { label: '42' },
861 | { label: '56' },
862 | { label: '76' },
863 | { label: '82' },
864 | { label: '42' },
865 | { label: '13' },
866 | { label: '21' },
867 | ],
868 | }],
869 | filters: [{
870 | nameAll: 'Select all' ,
871 | nameNotAll: 'Deselect all' ,
872 | func() {
873 | return true;
874 | },
875 | }],
876 | options: {
877 | multi: true ,
878 | groups: true ,
879 | labelName: 'label' ,
880 | labelList: 'elements' ,
881 | groupName: 'title' ,
882 | cssSelected: option =>
883 | (option.selected ?
884 | { 'background-color' :
885 | '#5764c6' } :
886 | '' ),
887 | },
888 | };
889 | },
890 | methods: {
891 | reloadFunction() {
892 | this .values = [
893 | { label: '2' },
894 | { label: '3' },
895 | ];
896 | },
897 | },
898 | components: {
899 | vueMultiSelect,
900 | },
901 | };
902 | </script>
903 |
904 |
905 |
906 | {{example3.values}}
907 |
908 |
909 |
910 |
911 |
912 |
913 | #
914 | A multi select with array
915 |
916 |
917 |
list of data can be an array
918 |
919 |
920 |
927 |
928 |
929 | Change v-model
930 |
931 |
932 |
944 |
945 |
947 | <template>
948 | <div>
949 | <vue-multi-select
950 | v-model="values"
951 | search
952 | historyButton
953 | :filters="filters"
954 | :position="position"
955 | :options="options"
956 | :selectOptions="data" />
957 | <button
958 | @click="reloadFunction" >
959 | Change v-model
960 | </button>
961 | </div>
962 | </template>
963 |
964 | <script>
965 | import vue-multiSelect from 'vue-multi-select' ;
966 | import
967 | 'vue-multi-select/dist/lib/vue-multi-select.css' ;
968 |
969 | export default {
970 | data() {
971 | return {
972 | name: 'first group' ,
973 | values: [
974 | '0' ,
975 | '2' ,
976 | ],
977 | data: [{
978 | title: 'part one' ,
979 | elements: [
980 | '0' ,
981 | '2' ,
982 | '3' ,
983 | '8' ,
984 | '9' ,
985 | '11' ,
986 | '13' ,
987 | '14' ,
988 | '15' ,
989 | '18' ,
990 | ],
991 | }, {
992 | title: 'part two' ,
993 | elements: [
994 | '23' ,
995 | '25' ,
996 | '31' ,
997 | '42' ,
998 | '56' ,
999 | '76' ,
1000 | '82' ,
1001 | '42' ,
1002 | '13' ,
1003 | '21' ,
1004 | ],
1005 | }],
1006 | filters: [{
1007 | nameAll: 'Select all' ,
1008 | nameNotAll: 'Deselect all' ,
1009 | func() {
1010 | return true;
1011 | },
1012 | }],
1013 | position: 'top-right' ,
1014 | options: {
1015 | multi: true ,
1016 | groups: true ,
1017 | labelList: 'elements' ,
1018 | groupName: 'title' ,
1019 | cssSelected: option =>
1020 | (option.selected ?
1021 | { 'background-color' :
1022 | '#5764c6' } :
1023 | '' ),
1024 | },
1025 | };
1026 | },
1027 | methods: {
1028 | reloadFunction() {
1029 | this .values = [
1030 | '2' ,
1031 | '3' ,
1032 | ];
1033 | },
1034 | },
1035 | components: {
1036 | vueMultiSelect,
1037 | },
1038 | };
1039 | </script>
1040 |
1041 |
1042 |
1043 |
1044 | {{example4.values}}
1045 |
1046 |
1047 |
1048 |
1049 |
1050 |
1051 |
1052 |
1053 |
1054 |
1055 |
1056 |
--------------------------------------------------------------------------------
/src/components/vueMultiSelect/vue-multi-select.css:
--------------------------------------------------------------------------------
1 | /* ! vertical layout */
2 |
3 | ::-webkit-scrollbar {
4 | width: 10px;
5 | }
6 |
7 | ::-webkit-scrollbar-track {
8 | border-radius: 10px;
9 | -webkit-box-shadow: none;
10 | }
11 |
12 | ::-webkit-scrollbar-thumb {
13 | background: #eee;
14 | border-radius: 10px;
15 | }
16 |
17 | .select {
18 | display: inline-block;
19 | text-align:left;
20 | position: relative;
21 | }
22 |
23 | .select .vertical {
24 | float: none;
25 | }
26 |
27 | /* ! horizontal layout */
28 |
29 | .select .horizontal:not(.selectGroup) {
30 | float: left;
31 | }
32 |
33 |
34 | /* ! create a "row" */
35 |
36 | .select .line {
37 | box-sizing: content-box;
38 | max-height: 30px;
39 | overflow: hidden;
40 | padding: 2px 0 4px 0;
41 | position: relative;
42 | }
43 |
44 |
45 | /* ! create a "column" */
46 |
47 | .select .acol {
48 | display: inline-block;
49 | min-width: 12px;
50 | }
51 |
52 |
53 | /* ! */
54 |
55 | .select .inlineBlock {
56 | display: inline-block;
57 | }
58 |
59 |
60 | /* the select button */
61 |
62 | .select>button {
63 | border: 1px solid #c6c6c6;
64 | border-radius: 4px;
65 | color: #555;
66 | cursor: pointer;
67 | display: inline-block;
68 | font-size: 14px;
69 | min-height: 31px;
70 | padding: 1px 8px 1px 8px;
71 | position: relative;
72 | text-align: center;
73 | user-select: none;
74 | -webkit-user-select: none;
75 | -moz-user-select: none;
76 | -ms-user-select: none;
77 | -o-user-select: none;
78 | white-space: normal;
79 | background-color: #fff;
80 | /*background-image: linear-gradient(#fff, #f7f7f7); */
81 | }
82 |
83 |
84 | /* button: hover */
85 |
86 | .select>button:hover {
87 | background-color: #f7f7f7;
88 | }
89 |
90 | .select>button:disabled {
91 | background-color: #f7f7f7;
92 | }
93 |
94 |
95 | /* button: clicked */
96 |
97 | .select .buttonClicked {
98 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
99 | }
100 |
101 |
102 | /* labels on the button */
103 |
104 | .select .buttonLabel {
105 | word-break: break-word;
106 | display: inline-block;
107 | padding: 0px 0px 0px 0px;
108 | }
109 |
110 |
111 | /* downward pointing arrow */
112 |
113 | .select .caret {
114 | display: inline-block;
115 | width: 0;
116 | height: 0;
117 | margin: 0px 0px 1px 12px;
118 | vertical-align: middle;
119 | border-top: 4px solid #333;
120 | border-right: 4px solid transparent;
121 | border-left: 4px solid transparent;
122 | border-bottom: 0 dotted;
123 | }
124 |
125 |
126 | /* the main checkboxes and helper layer */
127 |
128 | .select .checkboxLayer {
129 | background-color: #fff;
130 | position: absolute;
131 | z-index: 999;
132 | border: solid lightgrey;
133 | border-width: 1px 1px 1px 1px;
134 | border-radius: 4px;
135 | -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
136 | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
137 | min-width: 278px;
138 | display: none;
139 | }
140 |
141 |
142 | /* container of helper elements */
143 |
144 | .select .helperContainer {
145 | padding: 8px 8px 0px 8px;
146 | }
147 |
148 |
149 | /* helper buttons (select all, none, reset); */
150 |
151 | .select .helperButton:not( .reset) {
152 | margin-right: 4px;
153 | }
154 |
155 | .select .helperButton {
156 | display: inline;
157 | text-align: center;
158 | cursor: pointer;
159 | border: 1px solid #ccc;
160 | height: 26px;
161 | font-size: 13px;
162 | border-radius: 2px;
163 | color: #666;
164 | background-color: #ffffff;
165 | line-height: 1.6;
166 | margin: 0 0 8px 0;
167 | }
168 |
169 | .select .historyButton {
170 | float: right;
171 | display: inline;
172 | text-align: center;
173 | cursor: pointer;
174 | border: 1px solid #ccc;
175 | height: 26px;
176 | font-size: 13px;
177 | border-radius: 2px;
178 | color: #666;
179 | background-color: #ffffff;
180 | line-height: 1.6;
181 | }
182 |
183 |
184 |
185 | .right {
186 | float: right;
187 | }
188 |
189 | .margin-right-10 {
190 | margin-right: 10px
191 | }
192 |
193 | /* clear button */
194 |
195 | @-moz-document url-prefix() {
196 | .select .clearButton {
197 | height: 24px!important;
198 | }
199 | }
200 |
201 | .select .clearButton {
202 | box-sizing: inherit;
203 | position: absolute;
204 | display: inline;
205 | text-align: center;
206 | cursor: pointer;
207 | border: 1px solid #ccc;
208 | height: 22px;
209 | width: 22px;
210 | font-size: 13px;
211 | border-radius: 2px;
212 | color: #666;
213 | background-color: #ffffff;
214 | line-height: 1.4;
215 | right: 0px;
216 | top: 2px;
217 | }
218 |
219 | /* filter */
220 |
221 | .select .inputFilter {
222 | border-radius: 2px;
223 | border: 1px solid #ccc;
224 | height: 26px;
225 | font-size: 14px;
226 | width: 100%;
227 | min-width: 320px;
228 | padding-left: 7px;
229 | -webkit-box-sizing: border-box;
230 | /* Safari/Chrome, other WebKit */
231 | -moz-box-sizing: border-box;
232 | /* Firefox, other Gecko */
233 | box-sizing: border-box;
234 | /* Opera/IE 8+ */
235 | color: #888;
236 | margin: 0 0 8px 0;
237 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
238 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
239 | }
240 |
241 |
242 | /* helper elements on hover & focus */
243 |
244 | .select .clearButton:hover,
245 | .select .helperButton:hover,
246 | .select .historyButton:hover {
247 | border: 1px solid #ccc;
248 | color: #999;
249 | background-color: #f1f1f1;
250 | }
251 |
252 | .select .clearButton:focus,
253 | .select .helperButton:focus,
254 | .select .inputFilter:focus,
255 | .select .historyButton:focus {
256 | border: 1px solid #999;
257 | outline: 0;
258 | -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .065), 0 0 5px rgba(102, 175, 233, .6);
259 | box-shadow: inset 0 0 1px rgba(0, 0, 0, .065), 0 0 5px rgba(102, 175, 233, .6);
260 | }
261 |
262 |
263 | /* container of single select items */
264 |
265 | .select .checkBoxContainer {
266 | display: block;
267 | padding-top: 5px;
268 | overflow: hidden;
269 | max-height: 300px;
270 | min-height: 80px;
271 | overflow-y: auto;
272 |
273 | }
274 |
275 | .margin-left-20 {
276 | margin-left: 20px;
277 | }
278 |
279 | /* ! to show / hide the checkbox layer above */
280 |
281 | .select .show {
282 | display: block;
283 | }
284 |
285 |
286 | /* item labels */
287 |
288 | .select .selectItem {
289 | display: block;
290 | padding: 3px;
291 | font-size: 13px;
292 | color: black;
293 | white-space: nowrap;
294 | -webkit-user-select: none;
295 | -moz-user-select: none;
296 | -ms-user-select: none;
297 | -o-user-select: none;
298 | user-select: none;
299 | border: 1px solid transparent;
300 | position: relative;
301 | min-width: 278px;
302 | min-height: 32px;
303 | margin-top: 0;
304 | }
305 |
306 |
307 | /* item labels when not active */
308 |
309 | .select .selectItemDeactive {
310 | display: block;
311 | padding: 3px;
312 | color: #444;
313 | white-space: nowrap;
314 | -webkit-user-select: none;
315 | -moz-user-select: none;
316 | -ms-user-select: none;
317 | -o-user-select: none;
318 | user-select: none;
319 | border: 1px solid transparent;
320 | position: relative;
321 | min-width: 278px;
322 | min-height: 32px;
323 | }
324 |
325 |
326 | /* item labels focus on mouse hover */
327 |
328 | .select .selectItemDeactive:hover {
329 | cursor: not-allowed;
330 | }
331 |
332 |
333 | /* Styling on selected items */
334 |
335 | .select .selectItem.selected {
336 | background-color: #e9e9e9;
337 | color: #555;
338 | cursor: pointer;
339 | border-top: 1px solid #e4e4e4;
340 | border-left: 1px solid #e4e4e4;
341 | border-right: 1px solid #d9d9d9;
342 | }
343 |
344 | .select .selectItem .acol label {
345 | display: inline-block;
346 | padding-right: 30px;
347 | margin: 0px;
348 | font-weight: normal;
349 | line-height: normal;
350 | }
351 |
352 |
353 | /* item labels focus on mouse hover */
354 |
355 | .select .selectItem:hover,
356 | .select .selectGroup:hover {
357 | cursor: pointer;
358 | background-color: #f5f7fa;
359 | }
360 |
361 |
362 | /* item labels focus using keyboard */
363 |
364 | .select .selectFocus {
365 | cursor: pointer;
366 | }
367 |
368 |
369 | /* change mouse pointer into the pointing finger */
370 |
371 | .select .selectItem span:hover,
372 | .select .selectGroup span:hover {
373 | cursor: pointer;
374 | }
375 |
376 |
377 | /* ! group labels */
378 |
379 | .select .selectGroup {
380 | display: block;
381 | clear: both;
382 | }
383 |
384 |
385 | /* right-align the tick mark (✔) */
386 |
387 | .select .tickMark {
388 | display: inline-block;
389 | position: absolute;
390 | right: 10px;
391 | top: 7px;
392 | font-size: 10px;
393 | }
394 |
395 |
396 | /* hide the original HTML checkbox away */
397 |
398 | .select .checkbox {
399 | color: #ddd;
400 | position: absolute;
401 | left: -9999px;
402 | cursor: pointer;
403 | }
404 |
405 |
406 | /* checkboxes currently disabled */
407 |
408 | .select .disabled,
409 | .select .disabled:hover,
410 | .select .disabled label input:hover~span {
411 | color: #c4c4c4;
412 | cursor: not-allowed;
413 | }
414 |
415 |
416 | /* If you use images in button / checkbox label, you might want to change the image style here. */
417 |
418 | .select img {
419 | vertical-align: middle;
420 | margin-bottom: 0px;
421 | max-height: 22px;
422 | max-width: 22px;
423 | }
424 |
425 | .select .group {
426 | font-weight: 600;
427 | font-size: 14px;
428 | }
429 |
430 | .select .sousGroup {
431 | margin-left: 15px;
432 | }
433 |
434 | .tab {
435 | padding-left: 0;
436 | align-items: center;
437 | border-bottom: .05rem solid #e7e9ed;
438 | display: flex;
439 | display: -ms-flexbox;
440 | -ms-flex-align: center;
441 | -ms-flex-wrap: wrap;
442 | flex-wrap: wrap;
443 | list-style: none;
444 | margin: .2rem 0 .15rem 0;
445 | }
446 |
447 | .tab-block {
448 |
449 | }
450 |
451 | .tab-item {
452 | margin-top: 0;
453 | }
454 |
455 | .tab .tab-item.active span, .tab .tab-item span.active {
456 | border-bottom-color: #6E7991;
457 | color: #6E7991;
458 | }
459 |
460 | .tab .tab-item span {
461 | border-bottom: .1rem solid transparent;
462 | color: inherit;
463 | display: block;
464 | margin: 0 .4rem 0 0;
465 | padding: .4rem .4rem .3rem .4rem;
466 | text-decoration: none;
467 | }
468 |
469 | .select .empty-tab {
470 | min-height: 80px;
471 | text-align: center;
472 | padding-top: 30px;
473 | font-size: 15px;
474 | color: rgb(116, 116, 116);
475 | }
476 |
477 | .selectList {
478 | margin: 0;
479 | list-style: inside disc;
480 | padding-left: 0px;
481 | }
482 |
483 | .pointer {
484 | cursor: pointer;
485 | }
486 |
487 | .bold {
488 | font-weight: bold;
489 | }
490 |
--------------------------------------------------------------------------------
/src/components/vueMultiSelect/vue-multi-select.js:
--------------------------------------------------------------------------------
1 | import compareHelper from '../../helper/equals';
2 |
3 | export default {
4 | name: 'multi-select',
5 | props: {
6 | options: {
7 | type: Object,
8 | default: () => ({}),
9 | },
10 | filters: {
11 | type: Array,
12 | default: () => [],
13 | },
14 | selectOptions: {
15 | type: Array,
16 | default: () => [],
17 | },
18 | eventName: {
19 | type: String,
20 | default: 'selectionChanged',
21 | },
22 | reloadInit: {
23 | type: Boolean,
24 | default: false,
25 | },
26 | value: {
27 | type: Array,
28 | default: () => ([]),
29 | },
30 | btnClass: {
31 | type: String,
32 | default: '',
33 | },
34 | popoverClass: {
35 | type: String,
36 | default: '',
37 | },
38 | btnLabel: {
39 | type: Function,
40 | default: () => ('multi-select'),
41 | },
42 | search: {
43 | type: Boolean,
44 | default: false,
45 | },
46 | searchPlaceholder: {
47 | type: String,
48 | default: 'Search...',
49 | },
50 | historyButton: {
51 | type: Boolean,
52 | default: false,
53 | },
54 | historyButtonText: {
55 | type: String,
56 | default: '↶',
57 | },
58 | position: {
59 | type: String,
60 | default: 'bottom-left',
61 | },
62 | disabled: {
63 | type: Boolean,
64 | default: false,
65 | },
66 | disabledUnSelect: {
67 | type: Boolean,
68 | default: false,
69 | },
70 | emptyTabText: {
71 | type: String,
72 | default: 'No Data',
73 | },
74 | },
75 | data() {
76 | return {
77 | valueSelected: [],
78 | simpleArray: false,
79 | multiSelect: null,
80 | groups: null,
81 | isOpen: false,
82 | globalModel: [],
83 | idSelectedTab: 0,
84 | searchInput: '',
85 | optionsAllHide: false,
86 | previousSelected: [],
87 | };
88 | },
89 | created() {
90 | this.setConfig();
91 | },
92 | methods: {
93 | openMultiSelect() {
94 | this.manualClick = true;
95 | this.isOpen = true;
96 | this.openStatus(this.isOpen);
97 | },
98 | closeMultiSelect() {
99 | this.manualClick = true;
100 | this.isOpen = false;
101 | this.openStatus(this.isOpen);
102 | },
103 | setConfig() {
104 | this.multi = typeof (this.options.multi) !== 'undefined'
105 | ? this.options.multi : false;
106 | this.groups = typeof (this.options.groups) !== 'undefined'
107 | ? this.options.groups : false;
108 | this.list = this.options.labelList || 'list';
109 | this.labelName = this.options.labelName || 'name';
110 | this.labelValue = this.options.labelValue || this.labelName;
111 | this.groupName = this.options.groupName || 'name';
112 | this.labelSelected = this.options.labelSelected || 'selected';
113 | this.labelDisabled = this.options.labelDisabled || 'disabled';
114 | this.cssSelected = this.options.cssSelected || (
115 | (option) => (option[this.labelSelected]
116 | ? {
117 | 'font-weight': 'bold',
118 | color: '#5755d9',
119 | } : ''));
120 | this.init();
121 | },
122 | init() {
123 | const clone = this.cloneData(this.selectOptions);
124 | if (!this.groups) {
125 | if (typeof this.selectOptions[0] === 'string'
126 | || typeof this.selectOptions[0] === 'number') {
127 | this.simpleArray = true;
128 | this.globalModel = [{ [this.list]: this.prepareArray(clone) }];
129 | } else {
130 | this.globalModel = [{ [this.list]: clone }];
131 | }
132 | } else {
133 | if (typeof clone[0][this.list][0] === 'string'
134 | || typeof clone[0][this.list][0] === 'number') {
135 | for (let i = 0; i < clone.length; i += 1) {
136 | clone[i][this.list] = this.prepareArray(clone[i][this.list]);
137 | }
138 | this.simpleArray = true;
139 | }
140 | this.globalModel = clone;
141 | }
142 | this.initValues();
143 | },
144 | initValues() {
145 | this.valueSelected = [];
146 | for (let i = 0; i < this.globalModel.length; i += 1) {
147 | for (let j = 0; j < this.globalModel[i][this.list].length; j += 1) {
148 | if (typeof this.globalModel[i][this.list][j][this.labelSelected]
149 | === 'boolean') {
150 | this.globalModel[i][this.list][j][this.labelSelected] = false;
151 | } else {
152 | this.$set(this.globalModel[i][this.list][j], this.labelSelected, false);
153 | this.$set(this.globalModel[i][this.list][j], 'visible', true);
154 | }
155 | for (let k = 0; k < this.value.length; k += 1) {
156 | if (this.simpleArray
157 | && this.globalModel[i][this.list][j][this.labelValue] === this.value[k]) {
158 | this.globalModel[i][this.list][j][this.labelSelected] = true;
159 | this.valueSelected.push(this.globalModel[i][
160 | this.list][j][this.labelValue]);
161 | } else if (!this.simpleArray
162 | && this.globalModel[i][this.list][j][this.labelValue]
163 | === this.value[k][this.labelValue]) {
164 | this.globalModel[i][this.list][j][this.labelSelected] = true;
165 | const opt = { ...this.globalModel[i][this.list][j] };
166 | delete opt[this.labelSelected];
167 | delete opt.visible;
168 | this.valueSelected.push(opt);
169 | }
170 | }
171 | }
172 | }
173 | this.filter();
174 | this.$emit('input', this.valueSelected.slice(0));
175 | this.$emit(this.eventName, this.valueSelected.slice(0));
176 | },
177 | toggleCheckboxes(event) {
178 | this.multiSelect = event.target;
179 | if (this.multiSelect.className === 'buttonLabel') {
180 | this.multiSelect = this.multiSelect.parentNode;
181 | }
182 | this.isOpen = !this.isOpen;
183 | this.openStatus(this.isOpen);
184 | },
185 | externalClick(event) {
186 | if (this.isOpen && !this.manualClick) {
187 | let elem = event.target;
188 | if (!!elem && elem.className === 'buttonLabel') {
189 | elem = elem.parentNode;
190 | }
191 | if (!!elem && elem.isSameNode(this.multiSelect)) {
192 | return;
193 | }
194 | this.isOpen = false;
195 | this.openStatus(this.isOpen);
196 | }
197 | this.manualClick = false;
198 | },
199 | /* eslint no-param-reassign: ["error", { "props": false }] */
200 | selectOption(option) {
201 | if (option[this.labelDisabled]) {
202 | return;
203 | }
204 | if (!option[this.labelSelected]) {
205 | this.previousSelected.push(this.cloneData(this.valueSelected));
206 | if (!this.multi) {
207 | this.deselctAll();
208 | this.valueSelected = [];
209 | this.externalClick({ path: [] });
210 | }
211 | this.pushOption(option);
212 | this.$emit('input', this.valueSelected.slice(0));
213 | this.$emit(this.eventName, this.valueSelected.slice(0));
214 | } else {
215 | if (!this.multi && this.disabledUnSelect) {
216 | return;
217 | }
218 | this.previousSelected.push(this.cloneData(this.valueSelected));
219 | this.popOption(option);
220 | this.$emit('input', this.valueSelected.slice(0));
221 | this.$emit(this.eventName, this.valueSelected.slice(0));
222 | }
223 | option[this.labelSelected] = !option[this.labelSelected];
224 | this.filter();
225 | },
226 | pushOption(option) {
227 | if (this.simpleArray) {
228 | this.valueSelected.push(option[this.labelValue]);
229 | } else {
230 | const opt = { ...option };
231 | delete opt[this.labelSelected];
232 | delete opt.visible;
233 | this.valueSelected.push(opt);
234 | }
235 | },
236 | popOption(opt) {
237 | for (let i = 0; i < this.valueSelected.length; i += 1) {
238 | if (this.valueSelected[i][this.labelValue] === opt[this.labelValue]
239 | || (this.simpleArray && this.valueSelected[i] === opt[this.labelValue])) {
240 | this.valueSelected.splice(i, 1);
241 | return;
242 | }
243 | }
244 | },
245 | selectTab(id) {
246 | this.idSelectedTab = id;
247 | this.searchfn();
248 | },
249 | searchfn() {
250 | let allHide = true;
251 | for (let i = 0; i < this.globalModel[this.idSelectedTab][this.list].length;
252 | i += 1) {
253 | if (~this.globalModel[this.idSelectedTab][this.list][i][this.labelName]
254 | .toLowerCase().indexOf(
255 | this.searchInput.toLowerCase(),
256 | )) {
257 | allHide = false;
258 | this.globalModel[this.idSelectedTab][this.list][i].visible = true;
259 | } else {
260 | this.globalModel[this.idSelectedTab][this.list][i].visible = false;
261 | }
262 | }
263 | this.optionsAllHide = allHide;
264 | this.filter();
265 | },
266 | clearSearch() {
267 | this.searchInput = '';
268 | this.searchfn();
269 | },
270 | selectCurrent(option) {
271 | this.previousSelected.push(this.cloneData(this.valueSelected));
272 | for (let i = 0; i < this.globalModel[this.idSelectedTab][this.list].length;
273 | i += 1) {
274 | if (this.globalModel[this.idSelectedTab][this.list][i].visible
275 | && !this.globalModel[this.idSelectedTab][this.list][i][this.labelDisabled]
276 | && option.func(this.globalModel[this.idSelectedTab][this.list][i])) {
277 | if (!option.selectAll) {
278 | if (!this.globalModel[this.idSelectedTab][this.list][i][this.labelSelected]) {
279 | this.globalModel[this.idSelectedTab][this.list][i][this.labelSelected] = true;
280 | this.pushOption(this.globalModel[this.idSelectedTab][this.list][i]);
281 | }
282 | } else if (this.globalModel[this.idSelectedTab][this.list][i][this.labelSelected]) {
283 | this.globalModel[this.idSelectedTab][this.list][i][this.labelSelected] = false;
284 | this.popOption(this.globalModel[this.idSelectedTab][this.list][i]);
285 | }
286 | }
287 | }
288 | this.$emit('input', this.valueSelected.slice(0));
289 | this.$emit(this.eventName, this.valueSelected.slice(0));
290 | option.selectAll = !option.selectAll;
291 | this.filter();
292 | },
293 | filter() {
294 | for (let i = 0; i < this.filters.length; i += 1) {
295 | let allSelected = true;
296 | for (let j = 0; j < this.globalModel[this.idSelectedTab][this.list].length;
297 | j += 1) {
298 | if (this.globalModel[this.idSelectedTab][this.list][j].visible
299 | && this.filters[i].func(
300 | this.globalModel[this.idSelectedTab][this.list][j],
301 | )
302 | && !this.globalModel[this.idSelectedTab][this.list][j][this.labelDisabled]
303 | && !this.globalModel[this.idSelectedTab][this.list][j][this.labelSelected]) {
304 | allSelected = false;
305 | break;
306 | }
307 | }
308 | this.filters[i].selectAll = allSelected;
309 | }
310 | },
311 | deselctAll() {
312 | for (let i = 0; i < this.globalModel.length; i += 1) {
313 | for (let j = 0; j < this.globalModel[i][this.list].length; j += 1) {
314 | if (!this.globalModel[i][this.list][j][this.labelDisabled]) {
315 | this.globalModel[i][this.list][j][this.labelSelected] = false;
316 | }
317 | }
318 | }
319 | },
320 | prepareArray(value) {
321 | return value.map((elem) => ({ [this.labelValue]: elem }));
322 | },
323 | cloneData(value) {
324 | if (Array.isArray(value)) {
325 | return value.map(this.cloneData);
326 | } if (value && typeof value === 'object') {
327 | const res = {};
328 | const keys = Object.keys(value);
329 | for (let i = 0; i < keys.length; i += 1) {
330 | res[keys[i]] = this.cloneData(value[keys[i]]);
331 | }
332 | return res;
333 | }
334 | return value;
335 | },
336 | historyBack() {
337 | const previousValues = this.previousSelected.pop();
338 | this.$emit('input', previousValues);
339 | this.$emit(this.eventName, previousValues);
340 | },
341 | openStatus(status) {
342 | const event = status ? 'open' : 'close';
343 | this.$emit(event);
344 | },
345 | },
346 | computed: {
347 | getBtnLabel() {
348 | return this.btnLabel(this.valueSelected);
349 | },
350 | getPosition() {
351 | if (this.multiSelect) {
352 | const btnHeight = this.multiSelect.offsetHeight;
353 | const positions = this.position.split('-');
354 | const style = {
355 | [positions[1]]: 0,
356 | };
357 | if (positions[0] === 'top') {
358 | style.bottom = `${btnHeight}px`;
359 | }
360 | return style;
361 | }
362 | return {};
363 | },
364 | getButtonList() {
365 | return !!this.filters && this.multi && this.filters;
366 | },
367 | },
368 | watch: {
369 | selectOptions: {
370 | handler() {
371 | this.setConfig();
372 | },
373 | deep: true,
374 | },
375 | reloadInit: {
376 | handler(value) {
377 | if (value) {
378 | this.initValues();
379 | this.$emit('vueMultiSelectInited');
380 | }
381 | },
382 | },
383 | value: {
384 | handler(newVal, oldval) {
385 | if (oldval && newVal && this.valueSelected) {
386 | if (this.simpleArray
387 | && !compareHelper.compareSimpleArray(newVal, this.valueSelected)) {
388 | this.initValues();
389 | } else if (!compareHelper.compareArrayObject(
390 | newVal, this.valueSelected, this.labelName,
391 | )) {
392 | this.initValues();
393 | }
394 | }
395 | },
396 | deep: true,
397 | },
398 | },
399 | directives: {
400 | 'click-outside': {
401 | bind(el, binding) {
402 | const { bubble } = binding.modifiers;
403 | const ua = navigator.userAgent;
404 | const event = (ua.match(/iPad|iPhone/i)) ? 'touchstart' : 'click';
405 | const handler = (e) => {
406 | if (bubble || (!el.contains(e.target) && el !== e.target)) {
407 | binding.value(e);
408 | }
409 | };
410 | el.vueClickOutside = handler;
411 | document.addEventListener(event, handler);
412 | },
413 | unbind(el) {
414 | const ua = navigator.userAgent;
415 | const event = (ua.match(/iPad|iPhone/i)) ? 'touchstart' : 'click';
416 | document.removeEventListener(event, el.vueClickOutside);
417 | el.vueClickOutside = null;
418 | },
419 | },
420 | },
421 | };
422 |
--------------------------------------------------------------------------------
/src/components/vueMultiSelect/vue-multi-select.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 |
11 |
12 |
13 |
14 |
19 |
20 |
21 |
26 | {{button.selectAll ? button.nameNotAll : button.nameAll}}
27 |
28 |
31 | {{ historyButtonText }}
32 |
33 |
34 |
35 |
42 | ×
43 |
44 |
45 |
46 |
47 |
48 |
49 |
54 | {{tab[groupName]}}
55 |
56 |
57 |
58 |
59 |
63 |
69 |
70 | ✓
71 | {{option[labelName]}}
72 |
73 |
74 |
75 |
{{ emptyTabText }}
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/src/dev.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Dev from './Dev.vue';
3 |
4 | Vue.config.productionTip = false;
5 |
6 | new Vue({
7 | render: (h) => h(Dev),
8 | }).$mount('#app');
9 |
--------------------------------------------------------------------------------
/src/helper/equals.js:
--------------------------------------------------------------------------------
1 | export default {
2 | compareArrayObject(value1, value2, key) {
3 | if (value1.length !== value2.length) return false;
4 | for (let i = 0; i < value1.length; i += 1) {
5 | if (value1[i][key] !== value2[i][key]) {
6 | return false;
7 | }
8 | }
9 | return true;
10 | },
11 | compareSimpleArray(value1, value2) {
12 | if (value1.length !== value2.length) return false;
13 | for (let i = 0; i < value1.length; i += 1) {
14 | if (value1[i] !== value2[i]) {
15 | return false;
16 | }
17 | }
18 | return true;
19 | },
20 | };
21 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 |
4 | Vue.config.productionTip = false;
5 |
6 | new Vue({
7 | render: h => h(App),
8 | }).$mount('#app');
9 |
--------------------------------------------------------------------------------