vue-multiselect-component/dist/vue-multiselect-component.min.js

A multiselect component with support for Vue 2

var VueMultiselectComponent=function(){"use strict";function e(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var i,o,s=[],a=!0,r=!1;try{for(n=n.call(e);!(a=(i=n.next()).done)&&(s.push(i.value),!t||s.length!==t);a=!0);}catch(e){r=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(r)throw o}}return s}(e,t)||n(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e){return function(e){if(Array.isArray(e))return i(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||n(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){if(e){if("string"==typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(e,t):void 0}}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var o={props:{id:[String,Number]}};function s(e,t,n,i,o,s,a,r,l,u){"boolean"!=typeof a&&(l=r,r=a,a=!1);const d="function"==typeof n?n.options:n;let c;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),s?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},d._ssrRegister=c):t&&(c=a?function(e){t.call(this,u(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),c)if(d.functional){const e=d.render;d.render=function(t,n){return c.call(n),e(t,n)}}else{const e=d.beforeCreate;d.beforeCreate=e?[].concat(e,c):[c]}return n}const a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(e){return(e,t)=>function(e,t){const n=a?t.media||"default":e,i=u[n]||(u[n]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===l&&(l=document.head||document.getElementsByTagName("head")[0]),l.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(n),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const e=i.ids.size-1,t=document.createTextNode(n),o=i.element.childNodes;o[e]&&i.element.removeChild(o[e]),o.length?i.element.insertBefore(t,o[e]):i.element.appendChild(t)}}}(e,t)}let l;const u={};var d=s({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vue2-multi-select-wrap",attrs:{id:"vue2-multi-select-"+e._uid},on:{click:e.openDropdown}},[n("div",{staticClass:"vue2-multi-select",class:{"vue2-open":e.isOpen,"as-label":e.placeholderAsLabel}},[n("div",{staticClass:"vue2-value-items"},[e.placeholderAsLabel||!e.value.length&&!e.inputValue?n("span",{staticClass:"vue2-placeholder",class:{active:e.placeholderAsLabel&&e.value.length||e.placeholderAsLabel&&e.inputValue}},[e._v("\n        "+e._s(e.placeholder)+"\n      ")]):e._e(),e._v(" "),e._l(e.listValue,(function(t){return n("ValueItem",{key:t,attrs:{id:t},on:{click:e.select}},[e._v("\n        "+e._s(e.getItem(t)[e.labelText])+"\n      ")])})),e._v(" "),n("Editor",{key:"editor",ref:"editor",class:{"vue2-empty":!e.value.length},attrs:{"is-empty":!e.value.length,readonly:!e.writable},on:{delete:e.onDelete,focus:e.openOptions,"search-change":e.searchChange},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}}),e._v(" "),e.value.length>e.limit&&!e.isOpen?n("span",{staticClass:"vue2-input-info"},[e._v("\n        and "+e._s(e.value.length-e.limit)+" more\n      ")]):e._e()],2),e._v(" "),n("div",{staticClass:"vue2-actions"},[e.value.length?n("button",{staticClass:"vue2-action",on:{mouseenter:function(t){e.closeColor="#f65f5f"},mouseleave:function(t){e.closeColor="#ccd4dd"},click:function(t){return t.stopPropagation(),e.clearItems(t)}}},[n("Close",{attrs:{color:e.closeColor}})],1):e._e(),e._v(" "),n("button",{staticClass:"vue2-action",style:{transform:e.isOpen?"rotateX(180deg)":"rotateX(0)"},on:{mouseenter:function(t){e.dropdownColor="#9f9f9f"},mouseleave:function(t){e.dropdownColor="#ccd4dd"},click:function(t){return t.stopPropagation(),e.toggleDropdown(t)}}},[n("Dropdown",{staticClass:"dropdown",attrs:{color:e.dropdownColor}})],1)])]),e._v(" "),n("DropdownList",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],attrs:{"is-search":!!e.searchValue.trim(),loading:e.loading,options:e.searchItems,selected:e.value,"label-text":e.labelText},on:{remove:e.select,select:e.select}})],1)},staticRenderFns:[]},(function(e){e&&e("data-v-837aafce_0",{source:'@import url(https://fonts.googleapis.com/css2?family=Open+Sans&display=swap);*,::after,::before{margin:0;padding:0;box-sizing:border-box;font-family:"Open Sans",sans-serif}.vue2-multi-select-wrap{position:relative}.vue2-multi-select{width:100%;border:1px solid #ccd4dd;border-radius:5px;padding:0 5px 5px 5px;cursor:text;display:flex}.vue2-multi-select.as-label{padding:3px 5px 5px 5px}.vue2-multi-select.vue2-open{border-radius:5px 5px 0 0}.vue2-multi-select .vue2-value-items{display:flex;flex-wrap:wrap;width:calc(100% - 50px);position:relative}.vue2-multi-select .vue2-value-items .vue2-transition-list{display:flex;flex-wrap:wrap}.vue2-multi-select .vue2-value-items .vue2-placeholder{position:absolute;margin-left:5px;z-index:-1;transition:.25s;top:0}.vue2-multi-select .vue2-value-items .vue2-placeholder.active{top:-17px;line-height:14px;font-size:13px;background-color:#fff;padding:0 2px;z-index:5}.vue2-multi-select .vue2-value-items .vue2-input-info{cursor:pointer}.vue2-multi-select .vue2-value-items .vue2-input-info,.vue2-multi-select .vue2-value-items .vue2-placeholder{line-height:28px;margin-top:5px;font-size:14px;color:#a7a7a7;user-select:none}.vue2-multi-select .vue2-actions{width:50px;padding-top:5px;display:flex;justify-content:flex-end}.vue2-multi-select .vue2-actions .vue2-action{height:100%;width:25px;border:none;background-color:transparent;border-radius:0;cursor:pointer}.vue2-multi-select .vue2-actions .vue2-action .dropdown{width:11px}',map:void 0,media:void 0})}),{components:{ValueItem:s({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vue2-value-item",on:{click:function(t){return t.stopPropagation(),e.$emit("click",e.id)}}},[n("span",{staticClass:"vue2-value-item-text"},[e._t("default")],2),e._v(" "),n("span",{staticClass:"vue2-close-icon"},[e._v("×")])])},staticRenderFns:[]},(function(e){e&&e("data-v-a488532c_0",{source:'.vue2-value-item[data-v-a488532c]{user-select:none;min-height:28px;padding:3px 7px;background-color:rgba(11,149,214,.15);display:flex;justify-content:center;align-items:center;margin:5px 5px 0 0;border-radius:3px;cursor:pointer;transition:.15s}.vue2-value-item:hover .vue2-close-icon[data-v-a488532c]{color:#f65f5f}.vue2-value-item[data-v-a488532c]:hover{background-color:rgba(11,149,214,.2)}.vue2-value-item .vue2-value-item-text[data-v-a488532c]{color:#0b95d6;font-size:13px;padding-right:7px}.vue2-value-item .vue2-close-icon[data-v-a488532c]{color:#0b95d6;position:relative;padding-left:7px}.vue2-value-item .vue2-close-icon[data-v-a488532c]::before{content:"";width:1px;height:18px;background-color:rgba(255,255,255,.6);position:absolute;top:50%;left:0;transform:translateY(-50%)}',map:void 0,media:void 0})}),o,"data-v-a488532c",false,undefined,!1,r,void 0,void 0),Editor:s({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"vue2-editor",staticClass:"vue2-editor",class:{"vue2-empty":e.isEmpty}},[n("input",{staticClass:"vue2-editor-input",attrs:{readonly:e.readonly,type:"text"},domProps:{value:e.value},on:{blur:function(t){return e.$emit("blur")},focus:function(t){return e.$emit("focus")},input:e.onInput,keydown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:e.$emit("delete")}}}),e._v(" "),n("div",{ref:"fake-text",staticClass:"fake"},[e._v(e._s(e.value))])])},staticRenderFns:[]},(function(e){e&&e("data-v-09827013_0",{source:'.vue2-editor[data-v-09827013]{margin:5px 5px 0 0;max-width:100%}.vue2-editor.vue2-empty[data-v-09827013]{margin:5px 5px 0 5px}.vue2-editor input[data-v-09827013]{min-height:28px;font-size:14px;width:100%;outline:0;border:none;min-width:15px;background-color:transparent}.vue2-editor .fake[data-v-09827013]{font-size:14px;position:absolute;visibility:hidden;opacity:0;left:-6000px;font-family:"Open Sans",sans-serif;white-space:pre}',map:void 0,media:void 0})}),{props:{value:{type:String,default:""},readonly:Boolean,isEmpty:Boolean},methods:{onInput:function(e){this.$emit("input",e.target.value)},onChange:function(){var e=this;this.$nextTick((function(){e.$refs["vue2-editor"].style.width="".concat(e.$refs["fake-text"].offsetWidth,"px")}))}},mounted:function(){this.onChange()},watch:{value:function(e){this.onChange(),this.$emit("search-change",e)}}},"data-v-09827013",false,undefined,!1,r,void 0,void 0),Close:s({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("svg",{attrs:{fill:"none",height:"9",viewBox:"0 0 9 9",width:"9",xmlns:"http://www.w3.org/2000/svg"}},[n("path",{attrs:{stroke:e.color,d:"M1 1L8 8M8 1L1 8","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"}})])},staticRenderFns:[]},undefined,{props:{color:{type:String,default:"#000000"}}},undefined,false,undefined,!1,void 0,void 0,void 0),Dropdown:s({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("svg",{attrs:{fill:"none",height:"9",viewBox:"0 0 14 9",width:"14",xmlns:"http://www.w3.org/2000/svg"}},[n("path",{attrs:{fill:e.color,d:"M12.6777 0.699997H1.32226C0.806766 0.699997 0.531258 1.30715 0.870714 1.6951L6.54845 8.18394C6.7875 8.45714 7.2125 8.45714 7.45155 8.18394L13.1293 1.6951C13.4687 1.30715 13.1932 0.699997 12.6777 0.699997Z"}})])},staticRenderFns:[]},undefined,{props:{color:{type:String,default:"#ec5959"}}},undefined,false,undefined,!1,void 0,void 0,void 0),DropdownList:s({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vue2-dropdown-list"},[e.options.length&&!e.loading?n("ul",{staticClass:"vue2-list"},e._l(e.optionsList,(function(t){return n("li",{key:t.id,staticClass:"vue2-list-item",class:{"vue2-selected":e.selected.includes(t.id)},on:{click:function(n){e.selected.includes(t.id)?e.$emit("remove",t.id):e.$emit("select",t.id)}}},[n("div",{staticClass:"vue2-checkbox"},[n("CheckboxEmpty",{staticClass:"checkbox-empty"}),e._v(" "),n("Checkbox",{staticClass:"checkbox"})],1),e._v(" "),n("span",{staticClass:"vue2-item-text"},[e._v(e._s(t[e.labelText]))])])})),0):e._e(),e._v(" "),e.loading?n("div",{staticClass:"vue2-info"},[n("span",{staticClass:"vue2-info-text"},[e._v("Loading...")])]):e._e(),e._v(" "),e.loading||e.optionsList.length?e._e():n("div",{staticClass:"vue2-info"},[n("span",{staticClass:"vue2-info-text"},[e._v("No content")])])])},staticRenderFns:[]},(function(e){e&&e("data-v-b5449558_0",{source:".vue2-dropdown-list[data-v-b5449558]{border:1px solid #ccd4dd;border-top:none;border-radius:0 0 5px 5px;padding:5px 0;max-height:235px;overflow-x:auto;background-color:#fff;position:absolute;z-index:100;left:0;right:0}.vue2-dropdown-list .vue2-list[data-v-b5449558]{list-style:none}.vue2-dropdown-list .vue2-list .vue2-list-item[data-v-b5449558]{min-height:32px;padding:4px 7px;display:flex;align-items:center;cursor:pointer}.vue2-dropdown-list .vue2-list .vue2-list-item[data-v-b5449558]:hover{background-color:rgba(11,149,214,.06)}.vue2-dropdown-list .vue2-list .vue2-list-item .vue2-item-text[data-v-b5449558]{font-size:14px}.vue2-dropdown-list .vue2-list .vue2-list-item .checkbox-empty[data-v-b5449558]{display:block;width:16px;margin-right:7px}.vue2-dropdown-list .vue2-list .vue2-list-item .checkbox[data-v-b5449558]{display:none;width:16px;margin-right:7px}.vue2-dropdown-list .vue2-list .vue2-list-item.vue2-selected .vue2-checkbox .checkbox-empty[data-v-b5449558]{display:none}.vue2-dropdown-list .vue2-list .vue2-list-item.vue2-selected .vue2-checkbox .checkbox[data-v-b5449558]{display:block}.vue2-dropdown-list .vue2-info[data-v-b5449558]{text-align:center}.vue2-dropdown-list .vue2-info .vue2-info-text[data-v-b5449558]{font-size:14px}",map:void 0,media:void 0})}),{props:{options:Array,selected:Array,loading:Boolean,isSearch:Boolean,labelText:String},components:{CheckboxEmpty:s({render:function(){var e=this.$createElement,t=this._self._c||e;return t("svg",{attrs:{fill:"none",height:"16",viewBox:"0 0 16 16",width:"16",xmlns:"http://www.w3.org/2000/svg"}},[t("rect",{attrs:{height:"15",rx:"1.5",stroke:"#CCD4DD",width:"15",x:"0.5",y:"0.5"}})])},staticRenderFns:[]},undefined,{},undefined,false,undefined,!1,void 0,void 0,void 0),Checkbox:s({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("svg",{attrs:{fill:"none",height:"16",viewBox:"0 0 16 16",width:"16",xmlns:"http://www.w3.org/2000/svg"}},[n("rect",{attrs:{fill:"#0B95D6",height:"16",rx:"2",width:"16"}}),e._v(" "),n("g",{attrs:{"clip-path":"url(#clip0)"}},[n("path",{attrs:{d:"M4.4813 6.76042L6.75313 9.19848C6.7888 9.23677 6.84756 9.23677 6.88323 9.19848L11.6622 4.06982C11.6979 4.03154 11.7567 4.03154 11.7923 4.06982L12.9741 5.33811C12.9907 5.3559 13 5.37978 13 5.40464V5.5222C13 5.54706 12.9907 5.57094 12.9741 5.58873L7.02674 11.9713C7.00965 11.9897 6.9862 12 6.96171 12H6.67465C6.65016 12 6.62671 11.9897 6.60962 11.9713L3.06199 8.1641C3.02751 8.12709 3.02751 8.06804 3.06199 8.03103L4.24597 6.76042C4.26308 6.74206 4.28653 6.73172 4.31102 6.73172H4.41625C4.44073 6.73172 4.46419 6.74206 4.4813 6.76042Z",fill:"white"}})]),e._v(" "),n("defs",[n("clipPath",{attrs:{id:"clip0"}},[n("rect",{attrs:{fill:"white",height:"8",transform:"translate(3 4)",width:"10"}})])])])},staticRenderFns:[]},undefined,{},undefined,false,undefined,!1,void 0,void 0,void 0)},computed:{optionsList:function(){var e=this;return this.isSearch?this.options.filter((function(t){return!e.selected.includes(t.id)})):this.options||[]}}},"data-v-b5449558",false,undefined,!1,r,void 0,void 0)},props:{writable:{type:Boolean,default:!0},searchable:{type:Boolean,default:!0},placeholder:String,value:{type:Array,required:!0},options:{type:Array,required:!0},loading:Boolean,limit:{type:Number,default:10},labelText:{type:String,default:"label"},placeholderAsLabel:Boolean},data:function(){return{inputValue:"",closeColor:"#ccd4dd",dropdownColor:"#ccd4dd",isOpen:!1,searchValue:""}},mounted:function(){"undefined"!=typeof document&&document.addEventListener("mouseup",this.closeDropdown)},methods:{searchChange:function(e){this.$emit("search-change",e),this.searchValue=e},openDropdown:function(){this.$refs.editor.$el.querySelector("input").focus()},toggleDropdown:function(){this.isOpen?this.closeOptions():this.openDropdown()},closeOptions:function(){this.isOpen&&(this.$emit("close"),this.isOpen=!1,this.inputValue="")},openOptions:function(){this.isOpen||(this.$emit("open"),this.isOpen=!0)},closeDropdown:function(e){e.target.closest("#vue2-multi-select-".concat(this._uid))||this.closeOptions()},select:function(e){this.options.find((function(t){return t.id===e}))&&(!!this.internalValue.find((function(t){return t===e}))?this.removeItem(e):this.selectItem(e))},removeItem:function(e){var t=this.internalValue.findIndex((function(t){return t===e})),n=this.internalValue.slice(0,t).concat(this.internalValue.slice(t+1));this.$emit("input",n),this.$emit("removed",e)},selectItem:function(e){var n=[].concat(t(this.internalValue),[e]);this.$emit("input",n),this.$emit("selected",e)},onDelete:function(){this.inputValue||this.removeItem(this.internalValue[this.internalValue.length-1])},clearItems:function(){this.$emit("input",[])},getItem:function(e){return this.options.find((function(t){return t.id===e}))}},computed:{internalValue:function(){return this.value||[]},searchItems:function(){var e=this;return this.searchable&&this.searchValue.trim()&&this.options.length?this.options.filter((function(t){return t[e.labelText].toLowerCase().includes(e.searchValue.toLowerCase())})):this.options||[]},listValue:function(){return this.internalValue.length>this.limit&&!this.isOpen?this.internalValue.slice(0,this.limit):this.internalValue}},beforeDestroy:function(){document.removeEventListener("mouseup",this.closeDropdown)}},undefined,false,undefined,!1,r,void 0,void 0),c=function(){var e=d;return e.install=function(t){t.component("VueMultiselectComponent",e)},e}(),p=Object.freeze({__proto__:null,default:c});return Object.entries(p).forEach((function(t){var n=e(t,2),i=n[0],o=n[1];"default"!==i&&(c[i]=o)})),c}();