├── .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 | 150 | 151 | 158 | ``` 159 | 160 | 161 | ### 6. Examples 162 | ```html 163 | 176 | 177 | 243 | ``` 244 | 245 | It's possible to use slot-scope to custom option 246 | 247 | ```html 248 | 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 | BrowserStack 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
-------------------------------------------------------------------------------- /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 "),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 | 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 | 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 | 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 | --------------------------------------------------------------------------------