vue-multi-select
Version:
A multi/single select component made in vue
1 lines • 62.2 kB
JavaScript
(function(t){function e(e){for(var a,n,c=e[0],o=e[1],r=e[2],d=0,u=[];d<c.length;d++)n=c[d],Object.prototype.hasOwnProperty.call(l,n)&&l[n]&&u.push(l[n][0]),l[n]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(t[a]=o[a]);v&&v(e);while(u.length)u.shift()();return i.push.apply(i,r||[]),s()}function s(){for(var t,e=0;e<i.length;e++){for(var s=i[e],a=!0,c=1;c<s.length;c++){var o=s[c];0!==l[o]&&(a=!1)}a&&(i.splice(e--,1),t=n(n.s=s[0]))}return t}var a={},l={app:0},i=[];function n(e){if(a[e])return a[e].exports;var s=a[e]={i:e,l:!1,exports:{}};return t[e].call(s.exports,s,s.exports,n),s.l=!0,s.exports}n.m=t,n.c=a,n.d=function(t,e,s){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},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 s=Object.create(null);if(n.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)n.d(s,a,function(e){return t[e]}.bind(null,a));return s},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="/";var c=window["webpackJsonp"]=window["webpackJsonp"]||[],o=c.push.bind(c);c.push=e,c=c.slice();for(var r=0;r<c.length;r++)e(c[r]);var v=o;i.push([0,"chunk-vendors"]),s()})({0:function(t,e,s){t.exports=s("56d7")},"129d":function(t,e,s){},"18be":function(t,e,s){},"56d7":function(t,e,s){"use strict";s.r(e);s("e260"),s("e6cf"),s("cca6"),s("a79d");var a=s("2b0e"),l=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{attrs:{id:"app"}},[s("doc")],1)},i=[],n=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"container s-container"},[s("div",{staticClass:"columns"},[t._m(0),t._m(1),t._m(2),s("div",{staticClass:"s-content",attrs:{id:"content"}},[t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),s("div",{staticClass:"container",attrs:{id:"a_simple_multiselect"}},[t._m(11),s("div",{staticClass:"docs-note"},[s("p",[t._v("values selected. Each value selected is push in this Array.")]),s("p",[t._v("When a value is unselect, he is splice fron the Array")]),s("div",{staticClass:"columns"},[s("div",{staticClass:"column col-4"},[s("vue-multi-select",{ref:"multiSelect",attrs:{options:t.example1.options,historyButton:"",filters:t.example1.filters,btnLabel:t.example1.btnLabel,search:"",selectOptions:t.example1.selectOptions},on:{open:t.open,close:t.close},scopedSlots:t._u([{key:"option",fn:function(e){var a=e.option;return[s("input",{attrs:{type:"checkbox"},domProps:{checked:a.selected}}),s("span",[t._v(t._s(a.name))])]}}]),model:{value:t.example1.values,callback:function(e){t.$set(t.example1,"values",e)},expression:"example1.values"}})],1),s("div",{staticClass:"column col-4 col-ml-auto"},[s("button",{staticClass:"btn btn-primary",staticStyle:{"margin-right":"10px"},attrs:{type:"button"},on:{click:t.openManually}},[t._v("Open manually")]),s("button",{staticClass:"btn btn-primary",on:{click:function(e){return t.randomize(t.example1)}}},[t._v("Reset Data")])])]),s("ul",{staticClass:"tab tab-block"},[s("li",{staticClass:"tab-item"},[s("a",{staticClass:"hand",class:{active:"code"===t.example1.isActive},on:{click:function(e){return t.setActive(t.example1,"code")}}},[t._v("Code")])]),s("li",{staticClass:"tab-item"},[s("a",{staticClass:"hand",class:{active:"values"===t.example1.isActive},on:{click:function(e){return t.setActive(t.example1,"values")}}},[t._v("Values Selected")])])]),"code"===t.example1.isActive?s("div",[t._m(12)]):t._e(),"values"===t.example1.isActive?s("div",[s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[s("code",[t._v("\n"+t._s(t.example1.values)+"\n ")])])]):t._e()])]),s("div",{staticClass:"container",attrs:{id:"single_select_no_groups"}},[t._m(13),s("div",{staticClass:"docs-note"},[s("div",{staticClass:"columns"},[s("div",{staticClass:"column col-4"},[s("vue-multi-select",{attrs:{btnLabel:t.example2.btnLabel,search:"",historyButton:"",options:t.example2.options,filters:t.example2.filters,selectOptions:t.example2.selectOptions},model:{value:t.example2.values,callback:function(e){t.$set(t.example2,"values",e)},expression:"example2.values"}})],1),s("div",{staticClass:"column col-4 col-ml-auto"},[s("button",{staticClass:"btn btn-primary",on:{click:function(e){return t.randomize(t.example2)}}},[t._v("Reset Data ")])])]),s("ul",{staticClass:"tab tab-block"},[s("li",{staticClass:"tab-item"},[s("a",{staticClass:"hand",class:{active:"code"===t.example2.isActive},on:{click:function(e){return t.setActive(t.example2,"code")}}},[t._v("Code")])]),s("li",{staticClass:"tab-item"},[s("a",{staticClass:"hand",class:{active:"values"===t.example2.isActive},on:{click:function(e){return t.setActive(t.example2,"values")}}},[t._v("Values Selected")])])]),"code"===t.example2.isActive?s("div",[t._m(14)]):t._e(),"values"===t.example2.isActive?s("div",[s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[s("code",[t._v("\n"+t._s(t.example2.values)+"\n ")])])]):t._e()])]),s("div",{staticClass:"container",attrs:{id:"custom_multi_select"}},[t._m(15),s("div",{staticClass:"docs-note"},[t._m(16),t._m(17),s("div",{staticClass:"columns"},[s("div",{staticClass:"column col-4"},[s("vue-multi-select",{attrs:{search:"",historyButton:"",filters:t.example3.filters,options:t.example3.options,selectOptions:t.example3.selectOptions},model:{value:t.example3.values,callback:function(e){t.$set(t.example3,"values",e)},expression:"example3.values"}})],1),s("div",{staticClass:"column col-4 col-ml-auto"},[s("button",{staticClass:"btn btn-primary",on:{click:t.reloadFunction3}},[t._v("Change v-model")])])]),s("ul",{staticClass:"tab tab-block"},[s("li",{staticClass:"tab-item"},[s("a",{staticClass:"hand",class:{active:"code"===t.example3.isActive},on:{click:function(e){return t.setActive(t.example3,"code")}}},[t._v("Code")])]),s("li",{staticClass:"tab-item"},[s("a",{staticClass:"hand",class:{active:"values"===t.example3.isActive},on:{click:function(e){return t.setActive(t.example3,"values")}}},[t._v("Values Selected")])])]),"code"===t.example3.isActive?s("div",[t._m(18)]):t._e(),"values"===t.example3.isActive?s("div",[s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[s("code",[t._v("\n"+t._s(t.example3.values)+"\n ")])])]):t._e()])]),s("div",{staticClass:"container",attrs:{id:"a_multiselect_array"}},[t._m(19),s("div",{staticClass:"docs-note"},[s("p",[t._v("list of data can be an array")]),s("div",{staticClass:"columns"},[s("div",{staticClass:"column col-4"},[s("vue-multi-select",{attrs:{search:"",historyButton:"",filters:t.example4.filters,options:t.example4.options,position:t.example4.position,selectOptions:t.example4.selectOptions},model:{value:t.example4.values,callback:function(e){t.$set(t.example4,"values",e)},expression:"example4.values"}})],1),s("div",{staticClass:"column col-4 col-ml-auto"},[s("button",{staticClass:"btn btn-primary",on:{click:t.reloadFunction4}},[t._v("Change v-model")])])]),s("ul",{staticClass:"tab tab-block"},[s("li",{staticClass:"tab-item"},[s("a",{staticClass:"hand",class:{active:"code"===t.example4.isActive},on:{click:function(e){return t.setActive(t.example4,"code")}}},[t._v("Code")])]),s("li",{staticClass:"tab-item"},[s("a",{staticClass:"hand",class:{active:"values"===t.example4.isActive},on:{click:function(e){return t.setActive(t.example4,"values")}}},[t._v("Values Selected")])])]),"code"===t.example4.isActive?s("div",[t._m(20)]):t._e(),"values"===t.example4.isActive?s("div",[s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[s("code",[t._v("\n"+t._s(t.example4.values)+"\n ")])])]):t._e()])])])])])},c=[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"s-sidebar",attrs:{id:"sidebar"}},[s("div",{staticClass:"s-brand"},[s("a",{staticClass:"s-logo tooltip tooltip-bottom",attrs:{href:"#","data-tooltip":"Vue multi select"}},[s("h2",[t._v("Vue multi select")])])]),s("div",{staticClass:"s-nav"},[s("div",{staticClass:"accordion"},[s("div",{staticClass:"accordion-item"},[s("input",{attrs:{type:"checkbox",id:"docs-accordion-1",name:"docs-accordion-checkbox",checked:"",disabled:"",hidden:""}}),s("label",{staticClass:"accordion-header",attrs:{for:"docs-accordion-1"}},[t._v(" Getting started ")]),s("div",{staticClass:"accordion-body"},[s("ul",{staticClass:"menu menu-nav"},[s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#introduction"}},[t._v("Introduction")])]),s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#installation"}},[t._v("Installation")])]),s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#whatsnew"}},[t._v("What's new")])])])])]),s("div",{staticClass:"accordion-item"},[s("input",{attrs:{type:"checkbox",id:"docs-accordion-2",name:"docs-accordion-checkbox",checked:"",disabled:"",hidden:""}}),s("label",{staticClass:"accordion-header",attrs:{for:"docs-accordion-2"}},[t._v(" Doc ")]),s("div",{staticClass:"accordion-body"},[s("ul",{staticClass:"menu menu-nav"},[s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#general"}},[t._v("general")])]),s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#options"}},[t._v("options")])]),s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#filters"}},[t._v("filters")])]),s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#selectOptions"}},[t._v("selectOptions")])]),s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#eventName"}},[t._v("eventName")])])])])]),s("div",{staticClass:"accordion-item"},[s("input",{attrs:{type:"checkbox",id:"docs-accordion-3",name:"docs-accordion-checkbox",checked:"",disabled:"",hidden:""}}),s("label",{staticClass:"accordion-header",attrs:{for:"docs-accordion-3"}},[t._v(" Examples ")]),s("div",{staticClass:"accordion-body"},[s("ul",{staticClass:"menu menu-nav"},[s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#a_simple_multiselect"}},[t._v("A simple vue-multi-select")])]),s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#single_select_no_groups"}},[t._v("A single select with no groups")])]),s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#custom_multi_select"}},[t._v("A custom multi select")])]),s("li",{staticClass:"menu-item"},[s("a",{attrs:{href:"#a_multiselect_array"}},[t._v("A multi select with array")])])])])])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"float-btn"},[s("a",{staticClass:"btn btn-primary",attrs:{href:"https://github.com/IneoO/vue-multi-select",target:"_blank"}},[t._v("GitHub")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"s-footer"},[s("a",{staticClass:"s-logo hand",attrs:{href:"https://picturepan2.github.io/spectre/",target:"_blank"}},[s("img",{attrs:{src:"https://picturepan2.github.io/spectre/img/spectre-logo.svg",alt:"Spectre.css CSS Framework"}}),s("span",[t._v("Doc made with spectre.css")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"container",attrs:{id:"introduction"}},[s("h3",{staticClass:"s-title"},[s("a",{staticClass:"anchor",attrs:{href:"#introduction","aria-hidden":"true"}},[t._v("#")]),t._v(" Introduction ")]),s("div",{staticClass:"docs-note"},[s("p",[s("strong",[t._v("Vue multi select")]),t._v(" is a lightweight, multi/single select fast and fully custom.")]),s("p",[t._v("Vue multi select provides basic things like groups, research, buttons to select/deselect all many customisation to adapt the best way to your application.")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"container",attrs:{id:"installation"}},[s("h3",{staticClass:"s-title"},[s("a",{staticClass:"anchor",attrs:{href:"#installation","aria-hidden":"true"}},[t._v("#")]),t._v("Installation ")]),s("h4",[t._v("Dependencies")]),s("p",[t._v("- required: Vuejs >= 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(" <multi-select></multi-select> ")])]),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("<template>\n <div>\n <vue-multi-select")]),t._v("\n ref="),s("span",{staticClass:"red"},[t._v('"multiSelect"')]),t._v("\n v-model="),s("span",{staticClass:"red"},[t._v('"values"')]),t._v("\n search\n historyButton\n :options="),s("span",{staticClass:"red"},[t._v('"options"')]),t._v("\n :filters="),s("span",{staticClass:"red"},[t._v('"filters"')]),t._v("\n :btnLabel="),s("span",{staticClass:"red"},[t._v('"btnLabel"')]),t._v("\n @open="),s("span",{staticClass:"red"},[t._v('"open"')]),t._v("\n @close="),s("span",{staticClass:"red"},[t._v('"close"')]),t._v("\n :selectOptions="),s("span",{staticClass:"red"},[t._v('"data"')]),s("span",{staticClass:"blue"},[t._v(">\n <template")]),t._v(" v-slot:option="),s("span",{staticClass:"red"},[t._v('"{option}"')]),t._v(">\n "),s("span",{staticClass:"blue"},[t._v("<input")]),t._v(" type="),s("span",{staticClass:"red"},[t._v('"checkbox"')]),t._v(" :checked="),s("span",{staticClass:"red"},[t._v('"option.selected"')]),s("span",{staticClass:"blue"},[t._v("/>")]),t._v("\n "),s("span",{staticClass:"blue"},[t._v("<span>")]),t._v("{{"),s("span",{staticClass:"red"},[t._v("option.name")]),t._v("}}"),s("span",{staticClass:"blue"},[t._v("</span>")]),t._v("\n "),s("span",{staticClass:"blue"},[t._v("</template>\n </vue-multi-select>\n "),s("span",{staticClass:"blue"},[t._v("<button")]),t._v("\n @click="),s("span",{staticClass:"red"},[t._v('"openManually"')]),s("span",{staticClass:"blue"},[t._v(">")]),t._v("\n Open manually\n "),s("span",{staticClass:"blue"},[t._v("</button>")]),t._v("\n </div>\n</template>")]),t._v("\n\n"),s("span",{staticClass:"blue"},[t._v("<script>\nimport")]),t._v(" vueMultiSelect from "),s("span",{staticClass:"red wrap"},[t._v("'vue-multi-select'")]),t._v(";\n"),s("span",{staticClass:"blue"},[t._v("import")]),s("span",{staticClass:"red wrap"},[t._v("\n'vue-multi-select/dist/lib/vue-multi-select.css'")]),t._v(";\n\n"),s("span",{staticClass:"blue"},[t._v("export")]),t._v(" "),s("span",{staticClass:"blue"},[t._v("default")]),t._v(" {\n data() {\n return {\n btnLabel: values "),s("span",{staticClass:"blue"},[t._v("=>")]),t._v(" "),s("span",{staticClass:"red"},[t._v("`A simple vue multi select (")]),t._v("${values.length}"),s("span",{staticClass:"red"},[t._v(")`")]),t._v("\n name: "),s("span",{staticClass:"red"},[t._v("'first group'")]),t._v(",\n values: [],\n data: [{\n name: "),s("span",{staticClass:"red"},[t._v("'first group'")]),t._v(",\n list: [\n { name: "),s("span",{staticClass:"red"},[t._v("'0'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'2'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'3'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'8'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'9'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'11'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'13'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'14'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'15'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'18'")]),t._v(" },\n ],\n }, {\n name: "),s("span",{staticClass:"red"},[t._v("'second group'")]),t._v(",\n list: [\n { name: "),s("span",{staticClass:"red"},[t._v("'21'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'22'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'24'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'27'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'28'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'29'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'31'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'33'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'35'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'39'")]),t._v(" },\n ],\n }],\n filters: [{\n nameAll: "),s("span",{staticClass:"red"},[t._v("'Select all'")]),t._v(",\n nameNotAll: "),s("span",{staticClass:"red"},[t._v("'Deselect all'")]),t._v(",\n func() {\n "),s("span",{staticClass:"blue"},[t._v("return true;")]),t._v("\n },\n }, {\n nameAll: "),s("span",{staticClass:"red"},[t._v("'select <= 10'")]),t._v(",\n nameNotAll: "),s("span",{staticClass:"red"},[t._v("'Deselect <= 10'")]),t._v(",\n func(elem) {\n "),s("span",{staticClass:"blue"},[t._v("return")]),t._v(" elem.name <= 10;\n },\n }, {\n nameAll: "),s("span",{staticClass:"red"},[t._v("'Select contains 2'")]),t._v(",\n nameNotAll: "),s("span",{staticClass:"red"},[t._v("'Deselect contains 2'")]),t._v(",\n func(elem) {\n "),s("span",{staticClass:"blue"},[t._v("return")]),t._v(" elem.name.indexOf("),s("span",{staticClass:"red"},[t._v("'2'")]),t._v(") !== -1;\n },\n }],\n options: {\n multi: "),s("span",{staticClass:"red"},[t._v("true")]),t._v(",\n groups: "),s("span",{staticClass:"red"},[t._v("true")]),t._v(",\n },\n };\n },\n methods: {\n openManually() {\n this.$refs.multiSelect.openMultiSelect();\n },\n open() {\n console.log("),s("span",{staticClass:"red"},[t._v("'open'")]),t._v(");\n },\n close() {\n console.log("),s("span",{staticClass:"red"},[t._v("'close'")]),t._v(");\n },\n },\n components: {\n vueMultiSelect,\n },\n};\n"),s("span",{staticClass:"blue"},[t._v("<\/script>")]),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:"#single_select_no_groups","aria-hidden":"true"}},[t._v("#")]),t._v(" A single Select with no groups ")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[t._v(" "),s("code",[s("span",{staticClass:"blue"},[t._v("<template>\n <div>\n <vue-multi-select")]),t._v("\n v-model="),s("span",{staticClass:"red"},[t._v('"values"')]),t._v("\n :btnLabel="),s("span",{staticClass:"red"},[t._v('"btnLabel"')]),t._v("\n search\n historyButton\n :selectOptions="),s("span",{staticClass:"red"},[t._v('"data"')]),s("span",{staticClass:"blue"},[t._v(" />\n </div>\n</template>")]),t._v("\n\n"),s("span",{staticClass:"blue"},[t._v("<script>\nimport")]),t._v(" vueMultiSelect from "),s("span",{staticClass:"red wrap"},[t._v("'vue-multi-select'")]),t._v(";\n"),s("span",{staticClass:"blue"},[t._v("import")]),s("span",{staticClass:"red wrap"},[t._v("\n'vue-multi-select/dist/lib/vue-multi-select.css'")]),t._v(";\n\n"),s("span",{staticClass:"blue"},[t._v("export")]),t._v(" "),s("span",{staticClass:"blue"},[t._v("default")]),t._v(" {\n data() {\n return {\n btnLabel: values "),s("span",{staticClass:"blue"},[t._v("=>")]),t._v("values"),s("span",{staticClass:"blue"},[t._v(".length")]),t._v(" "),s("span",{staticClass:"red"},[t._v("0")]),t._v(" ? values["),s("span",{staticClass:"red"},[t._v("0")]),t._v("]."),s("span",{staticClass:"blue"},[t._v("name")]),t._v(" : "),s("span",{staticClass:"red"},[t._v("'Select ...'")]),t._v(",\n name: "),s("span",{staticClass:"red"},[t._v("'first group'")]),t._v(",\n values: [],\n data: [\n { name: "),s("span",{staticClass:"red"},[t._v("'0'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'2'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'3'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'8'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'9'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'11'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'13'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'14'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'15'")]),t._v(" },\n { name: "),s("span",{staticClass:"red"},[t._v("'18'")]),t._v(" },\n ],\n };\n },\n methods: {\n },\n components: {\n vueMultiSelect,\n },\n};\n"),s("span",{staticClass:"blue"},[t._v("<\/script>")]),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:"#custom_multi_select","aria-hidden":"true"}},[t._v("#")]),t._v(" A custom multi select ")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("p",[t._v("if the "),s("code",[t._v("labelSelected")]),t._v(" and "),s("code",[t._v("cssLabel")]),t._v(" are changed don't forget to update "),s("code",[t._v("option['selected']")]),t._v(" in "),s("code",[t._v("cssLabel")]),t._v(" with the labelSelected value")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("p",[t._v("It's possible to disable some value with attributes "),s("code",[t._v("disabled")]),t._v(" to true (it's possible to change the key with "),s("code",[t._v("options.labelDisabled")]),t._v(")")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[t._v(" "),s("code",[s("span",{staticClass:"blue"},[t._v("<template>\n <div>\n <vue-multi-select")]),t._v("\n v-model="),s("span",{staticClass:"red"},[t._v('"values"')]),t._v("\n search\n historyButton\n :filters="),s("span",{staticClass:"red"},[t._v('"filters"')]),t._v("\n :options="),s("span",{staticClass:"red"},[t._v('"options"')]),t._v("\n :selectOptions="),s("span",{staticClass:"red"},[t._v('"data"')]),s("span",{staticClass:"blue"},[t._v("/>")]),t._v("\n "),s("span",{staticClass:"blue"},[t._v("<button")]),t._v("\n @click="),s("span",{staticClass:"red"},[t._v('"reloadFunction"'),s("span",{staticClass:"blue"},[t._v(" >")])]),t._v("\n Change v-model\n "),s("span",{staticClass:"blue"},[t._v("</button>\n </div>\n</template>")]),t._v("\n\n"),s("span",{staticClass:"blue"},[t._v("<script>\nimport")]),t._v(" vueMultiSelect from "),s("span",{staticClass:"red wrap"},[t._v("'vue-multi-select'")]),t._v(";\n"),s("span",{staticClass:"blue"},[t._v("import")]),s("span",{staticClass:"red wrap"},[t._v("\n'vue-multi-select/dist/lib/vue-multi-select.css'")]),t._v(";\n\n"),s("span",{staticClass:"blue"},[t._v("export")]),t._v(" "),s("span",{staticClass:"blue"},[t._v("default")]),t._v(" {\n data() {\n return {\n name: "),s("span",{staticClass:"red"},[t._v("'first group'")]),t._v(",\n values: [\n { label: "),s("span",{staticClass:"red"},[t._v("'2'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'3'")]),t._v(" },\n ],\n data: [{\n title: "),s("span",{staticClass:"red"},[t._v("'part one'")]),t._v(",\n elements: [\n { label: "),s("span",{staticClass:"red"},[t._v("'0'")]),t._v(", disabled: "),s("span",{staticClass:"red"},[t._v("true")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'2'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'3'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'8'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'9'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'11'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'13'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'14'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'15'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'18'")]),t._v(" },\n ],\n }, {\n title: "),s("span",{staticClass:"red"},[t._v("'part two'")]),t._v(",\n elements: [\n { label: "),s("span",{staticClass:"red"},[t._v("'23'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'25'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'31'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'42'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'56'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'76'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'82'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'42'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'13'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'21'")]),t._v(" },\n ],\n }],\n filters: [{\n nameAll: "),s("span",{staticClass:"red"},[t._v("'Select all'")]),t._v(",\n nameNotAll: "),s("span",{staticClass:"red"},[t._v("'Deselect all'")]),t._v(",\n func() {\n "),s("span",{staticClass:"blue"},[t._v("return true;")]),t._v("\n },\n }],\n options: {\n multi: "),s("span",{staticClass:"red"},[t._v("true")]),t._v(",\n groups: "),s("span",{staticClass:"red"},[t._v("true")]),t._v(",\n labelName: "),s("span",{staticClass:"red"},[t._v("'label'")]),t._v(",\n labelList: "),s("span",{staticClass:"red"},[t._v("'elements'")]),t._v(",\n groupName: "),s("span",{staticClass:"red"},[t._v("'title'")]),t._v(",\n "),s("span",{staticClass:"wrap"},[t._v("cssSelected: option =>\n ("),s("span",{staticClass:"red"},[t._v("option.selected")]),t._v(" ?\n { "),s("span",{staticClass:"red"},[t._v("'background-color'")]),t._v(":\n "),s("span",{staticClass:"red"},[t._v("'#5764c6'")]),t._v(" } :\n "),s("span",{staticClass:"red"},[t._v("''")])]),t._v("),\n },\n };\n },\n methods: {\n reloadFunction() {\n "),s("span",{staticClass:"blue"},[t._v("this")]),t._v(".values = [\n { label: "),s("span",{staticClass:"red"},[t._v("'2'")]),t._v(" },\n { label: "),s("span",{staticClass:"red"},[t._v("'3'")]),t._v(" },\n ];\n },\n },\n components: {\n vueMultiSelect,\n },\n};\n"),s("span",{staticClass:"blue"},[t._v("<\/script>")])])])},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_multiselect_array","aria-hidden":"true"}},[t._v("#")]),t._v(" A multi select with array ")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("pre",{staticClass:"code grey",attrs:{"data-lang":"javascript"}},[t._v(" "),s("code",[s("span",{staticClass:"blue"},[t._v("<template>\n <div>\n <vue-multi-select")]),t._v("\n v-model="),s("span",{staticClass:"red"},[t._v('"values"')]),t._v("\n search\n historyButton\n :filters="),s("span",{staticClass:"red"},[t._v('"filters"')]),t._v("\n :position="),s("span",{staticClass:"red"},[t._v('"position"')]),t._v("\n :options="),s("span",{staticClass:"red"},[t._v('"options"')]),t._v("\n :selectOptions="),s("span",{staticClass:"red"},[t._v('"data"')]),s("span",{staticClass:"blue"},[t._v(" /> ")]),t._v("\n "),s("span",{staticClass:"blue"},[t._v("<button")]),t._v("\n @click="),s("span",{staticClass:"red"},[t._v('"reloadFunction"')]),s("span",{staticClass:"blue"},[t._v(">")]),t._v("\n Change v-model\n "),s("span",{staticClass:"blue"},[t._v("</button>\n </div>\n</template>")]),t._v("\n\n"),s("span",{staticClass:"blue"},[t._v("<script>\nimport")]),t._v(" vue-multiSelect from "),s("span",{staticClass:"red wrap"},[t._v("'vue-multi-select'")]),t._v(";\n"),s("span",{staticClass:"blue"},[t._v("import")]),s("span",{staticClass:"red wrap"},[t._v("\n'vue-multi-select/dist/lib/vue-multi-select.css'")]),t._v(";\n\n"),s("span",{staticClass:"blue"},[t._v("export")]),t._v(" "),s("span",{staticClass:"blue"},[t._v("default")]),t._v(" {\n data() {\n return {\n name: "),s("span",{staticClass:"red"},[t._v("'first group'")]),t._v(",\n values: [\n "),s("span",{staticClass:"red"},[t._v("'0'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'2'")]),t._v(",\n ],\n data: [{\n title: "),s("span",{staticClass:"red"},[t._v("'part one'")]),t._v(",\n elements: [\n "),s("span",{staticClass:"red"},[t._v("'0'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'2'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'3'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'8'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'9'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'11'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'13'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'14'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'15'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'18'")]),t._v(",\n ],\n }, {\n title: "),s("span",{staticClass:"red"},[t._v("'part two'")]),t._v(",\n elements: [\n "),s("span",{staticClass:"red"},[t._v("'23'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'25'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'31'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'42'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'56'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'76'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'82'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'42'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'13'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'21'")]),t._v(",\n ],\n }],\n filters: [{\n nameAll: "),s("span",{staticClass:"red"},[t._v("'Select all'")]),t._v(",\n nameNotAll: "),s("span",{staticClass:"red"},[t._v("'Deselect all'")]),t._v(",\n func() {\n "),s("span",{staticClass:"blue"},[t._v("return true;")]),t._v("\n },\n }],\n position: "),s("span",{staticClass:"red"},[t._v("'top-right'")]),t._v(",\n options: {\n multi: "),s("span",{staticClass:"red"},[t._v("true")]),t._v(",\n groups: "),s("span",{staticClass:"red"},[t._v("true")]),t._v(",\n labelList: "),s("span",{staticClass:"red"},[t._v("'elements'")]),t._v(",\n groupName: "),s("span",{staticClass:"red"},[t._v("'title'")]),t._v(",\n "),s("span",{staticClass:"wrap"},[t._v("cssSelected: option =>\n ("),s("span",{staticClass:"red"},[t._v("option.selected")]),t._v(" ?\n { "),s("span",{staticClass:"red"},[t._v("'background-color'")]),t._v(":\n "),s("span",{staticClass:"red"},[t._v("'#5764c6'")]),t._v(" } :\n "),s("span",{staticClass:"red"},[t._v("''")])]),t._v("),\n },\n };\n },\n methods: {\n reloadFunction() {\n "),s("span",{staticClass:"blue"},[t._v("this")]),t._v(".values = [\n "),s("span",{staticClass:"red"},[t._v("'2'")]),t._v(",\n "),s("span",{staticClass:"red"},[t._v("'3'")]),t._v(",\n ];\n },\n },\n components: {\n vueMultiSelect,\n },\n};\n"),s("span",{staticClass:"blue"},[t._v("<\/script>")]),t._v("\n ")])])}],o=(s("c975"),s("b0c0"),s("d3b7"),s("ddb0"),s("7a07"),s("7613"),s("2698"),function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"select"},[s("button",{ref:"buttonClick",class:"btn-select "+t.btnClass,attrs:{type:"button",disabled:t.disabled},on:{click:t.toggleCheckboxes}},[s("div",{staticClass:"buttonLabel"},[s("span",{domProps:{innerHTML:t._s(t.getBtnLabel)}}),s("span",{staticClass:"caret"})])]),s("div",{directives:[{name:"click-outside",rawName:"v-click-outside",value:t.externalClick,expression:"externalClick"}],staticClass:"checkboxLayer",class:(t.isOpen?"show":"")+" "+t.popoverClass,style:t.getPosition},[s("div",{staticClass:"helperContainer"},[s("div",{staticClass:"line"},[t._l(t.getButtonList,(function(e,a){return s("button",{key:a,staticClass:"helperButton",attrs:{type:"button"},on:{click:function(s){return t.selectCurrent(e)}}},[t._v(" "+t._s(e.selectAll?e.nameNotAll:e.nameAll)+" ")])})),t.historyButton&&t.previousSelected.length?s("button",{staticClass:"historyButton",on:{click:t.historyBack}},[t._v(" "+t._s(t.historyButtonText)+" ")]):t._e()],2),t.search?s("div",{staticClass:"line",staticStyle:{position:"relative"}},[s("input",{directives:[{name:"model",rawName:"v-model",value:t.searchInput,expression:"searchInput"}],staticClass:"inputFilter",attrs:{placeholder:t.searchPlaceholder,emptyTabText:t.emptyTabText,type:"text"},domProps:{value:t.searchInput},on:{input:[function(e){e.target.composing||(t.searchInput=e.target.value)},function(e){return t.searchfn()}]}}),s("button",{staticClass:"clearButton",attrs:{type:"button"},on:{click:function(e){return t.clearSearch()}}},[t._v("× ")])]):t._e()]),!0===t.groups?s("div",[s("ul",{staticClass:"tab tab-block"},t._l(t.globalModel,(function(e,a){return s("li",{directives:[{name:"show",rawName:"v-show",value:e[t.list].length,expression:"tab[list].length"}],key:a,staticClass:"tab-item",class:{active:t.idSelectedTab==a},on:{click:function(e){return t.selectTab(a)}}},[s("span",{staticClass:"pointer"},[t._v(t._s(e[t.groupName]))])])})),0)]):t._e(),s("div",{staticClass:"checkBoxContainer"},[t._l(t.globalModel,(function(e,a){return s("ul",{directives:[{name:"show",rawName:"v-show",value:t.idSelectedTab==a,expression:"idSelectedTab == index"}],key:a,staticClass:"selectList"},t._l(e[t.list],(function(e,a){return s("li",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"option.visible"}],key:a,class:[e[t.labelDisabled]?"disabled":"","selectItem"],style:t.cssSelected(e),on:{click:function(s){return t.selectOption(e)}}},[t._t("option",[e[t.labelSelected]?s("span",{staticClass:"right margin-right-10"},[t._v("✓")]):t._e(),s("span",{staticClass:"margin-left-20"},[t._v(t._s(e[t.labelName]))])],{option:e})],2)})),0)})),!t.valueSelected||t.optionsAllHide?s("div",{staticClass:"empty-tab"},[t._v(t._s(t.emptyTabText))]):t._e()],2)])])}),r=[],v=(s("4de4"),s("d81d"),s("fb6a"),s("a434"),s("b64b"),s("ac1f"),s("466d"),s("1276"),s("53ca")),d=s("5530"),u=s("ade3"),p={compareArrayObject:function(t,e,s){if(t.length!==e.length)return!1;for(var a=0;a<t.length;a+=1)if(t[a][s]!==e[a][s])return!1;return!0},compareSimpleArray:fun