@vueform/multiselect - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

CHANGELOG.md

@@ -0,1 +1,9 @@
+## v1.2.0
+
+> `2020-12-23`
+
+### 🎉 Feature
+  - Options now can be disabled using an array of objects as value, with `disabled` property being set to `true`
+  - The `value` property of an object option now can be customized with `:valueProp`
+
 ## v1.1.3
@@ -2,0 +10,0 @@

dist/multiselect.global.js

@@ -1,1 +0,1 @@
-var VueformMultiselect=function(e,t){"use strict";function l(e){return String(e).toLowerCase().trim()}function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function r(e){return function(e){if(Array.isArray(e))return i(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return i(e,t);var l=Object.prototype.toString.call(e).slice(8,-1);"Object"===l&&e.constructor&&(l=e.constructor.name);if("Map"===l||"Set"===l)return Array.from(e);if("Arguments"===l||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(l))return i(e,t)}(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 i(e,t){(null==t||t>e.length)&&(t=e.length);for(var l=0,n=new Array(t);l<t;l++)n[l]=e[l];return n}function o(t,r,i){var o,u=e.toRefs(t),c=u.options,s=u.mode,d=u.trackBy,v=u.limit,f=u.hideSelected,p=u.createTag,h=u.label,m=u.appendNewTag,y=u.multipleLabel,b=u.object,g=u.loading,w=u.delay,S=u.resolveOnLoad,V=u.minChars,k=u.filterResults,B=u.clearOnSearch,O=u.clearOnSelect,x=i.internalValue,N=i.externalValue,M=i.search,P=i.blurSearch,q=i.clearSearch,T=i.update,C=i.blurInput,K=e.ref([]),j=e.ref([]),A=e.ref(!1),D=e.computed((function(){var e,t=j.value||[];return e=t,"[object Object]"===Object.prototype.toString.call(e)&&(t=Object.keys(t).map((function(e){var l,n=t[e];return a(l={value:e},d.value,n),a(l,h.value,n),l}))),t=t.map((function(e,t){var l;return"object"===n(e)?e:(a(l={value:t},d.value,e),a(l,h.value,e),l)})),K.value.length&&(t=t.concat(K.value)),t})),R=e.computed((function(){var e=D.value;return I.value.length&&(e=I.value.concat(e)),M.value&&k.value&&(e=e.filter((function(e){return-1!==l(e[d.value]).indexOf(l(M.value))}))),f.value&&(e=e.filter((function(e){return!Z(e)}))),v.value>0&&(e=e.slice(0,v.value)),e})),E=e.computed((function(){switch(s.value){case"single":return!_.value;case"multiple":case"tags":return!_.value&&x.value.length>0}})),L=e.computed((function(){return void 0!==y&&void 0!==y.value?y.value(x.value):x.value&&x.value.length>1?"".concat(x.value.length," options selected"):"1 option selected"})),$=e.computed((function(){return!D.value.length})),H=e.computed((function(){return D.value.length>0&&0==R.value.length})),I=e.computed((function(){var e;return!1!==p.value&&M.value?-1!==Y(M.value)?[]:[(e={},a(e,h.value,M.value),a(e,d.value,M.value),a(e,"value",M.value),e)]:[]})),F=e.computed((function(){switch(s.value){case"single":return null;case"multiple":case"tags":return[]}})),_=e.computed((function(){return-1!==[null,void 0,!1].indexOf(x.value)})),U=e.computed((function(){return g.value||A.value})),W=function(e){switch("object"!==n(e)&&(e=X(e)),s.value){case"single":T(e);break;case"multiple":case"tags":T((x.value||[]).concat(e))}r.emit("select",G(e))},z=function(e){switch("object"!==n(e)&&(e=X(e)),s.value){case"single":J();break;case"tags":case"multiple":T(x.value.filter((function(t){return t.value!=e.value})))}r.emit("deselect",G(e))},G=function(e){return b.value?e:e.value},J=function(e){T(F.value)},Q=function(e){switch(s.value){case"single":return!_.value&&x.value.value==e.value;case"tags":case"multiple":return!_.value&&-1!==x.value.map((function(e){return e.value})).indexOf(e.value)}},X=function(e){return D.value[D.value.map((function(e){return e.value})).indexOf(e)]},Y=function(e){return D.value.map((function(e){return l(e[d.value])})).indexOf(l(e))},Z=function(e){return"tags"===s.value&&f.value&&Q(e)},ee=function(e){K.value.push(e)};if("single"!==s.value&&-1===[null,void 0,!1].indexOf(N.value)&&!Array.isArray(N.value))throw new Error('v-model must be an array when using "'.concat(s.value,'" mode'));return c&&"function"==typeof c.value?S.value&&(A.value=!0,c.value(M.value).then((function(e){j.value=e,A.value=!1}))):j.value=c&&c.value?c.value:[],-1===[null,!1,void 0].indexOf(N.value)&&(x.value=(o=N.value,b.value?o:Array.isArray(o)?o.map((function(e){return X(e)})):X(o))),w.value>-1&&e.watch(M,(function(e){e.length<V.value||(B.value&&(j.value=[]),setTimeout((function(){e==M.value&&(A.value=!0,c.value(M.value).then((function(t){e==M.value&&(j.value=t),A.value=!1})))}),w.value))}),{flush:"sync"}),{filteredOptions:R,hasSelected:E,multipleLabelText:L,extendedOptions:D,noOptions:$,noResults:H,busy:U,select:W,deselect:z,remove:function(e){z(e)},clear:J,isSelected:Q,getOption:X,handleOptionClick:function(e){switch(s.value){case"single":if(Q(e))return void z(e);J(),W(e),P(),C();break;case"multiple":if(Q(e))return void z(e);W(e),O.value&&q();break;case"tags":if(Q(e))return void z(e);void 0===X(e.value)&&p.value&&(r.emit("tag",e.value),m.value&&ee(e),q()),O.value&&q(),W(e)}}}}var u={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","update:modelValue"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1},id:{type:[String,Number],required:!1,default:"multiselect"},name:{type:[String,Number],required:!1,default:"multiselect"},disabled:{type:Boolean,required:!1,default:!1},label:{type:String,required:!1,default:"label"},trackBy:{type:String,required:!1,default:"label"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},maxHeight:{type:Number,required:!1,default:160},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:!1},appendNewTag:{type:Boolean,required:!1,default:!0},caret:{type:Boolean,required:!1,default:!0},loading:{type:Boolean,required:!1,default:!1},noOptionsText:{type:String,required:!1,default:"The list is empty"},noResultsText:{type:String,required:!1,default:"No results found"},multipleLabel:{type:Function,required:!1},object:{type:Boolean,required:!1,default:!1},delay:{type:Number,required:!1,default:-1},minChars:{type:Number,required:!1,default:0},resolveOnLoad:{type:Boolean,required:!1,default:!0},filterResults:{type:Boolean,required:!1,default:!0},clearOnSearch:{type:Boolean,required:!1,default:!1},clearOnSelect:{type:Boolean,required:!1,default:!0}},setup(t,l){const n=function(t,l){var n=e.toRefs(t),a=n.value,r=n.modelValue,i=n.mode;return{internalValue:e.ref("single"!==i.value?[]:null),externalValue:e.computed((function(){return void 0!==l.expose?r.value:a.value}))}}(t,l),a=function(t,l,n){var a=e.toRefs(t).object,r=n.internalValue,i=function(e){return a.value||-1!==[null,!1,void 0].indexOf(e)?e:Array.isArray(e)?e.map((function(e){return e.value})):e.value};return{update:function(e){r.value=e;var t=i(e);l.emit("change",t),l.emit("input",t),l.emit("update:modelValue",t)}}}(t,l,{internalValue:n.internalValue}),i=function(t,l,n){var a=e.toRefs(t),r=a.searchable,i=a.mode,o=n.internalValue,u=e.ref(null),c=e.ref(null),s=e.computed((function(){return u.value?"".concat(u.value.length,"ch"):"tags"===i.value&&-1===[null,void 0].indexOf(o.value)&&o.value.length?"1ch":"100%"}));return e.watch(u,(function(e){l.emit("search-change",e)})),{search:u,input:c,tagsSearchWidth:s,clearSearch:function(){u.value=""},blurSearch:function(){r.value&&c.value.blur()},handleSearchBackspace:function(e){""!==u.value&&e.stopPropagation()}}}(t,l,{internalValue:n.internalValue}),u=function(t,l,n){var a=e.toRefs(t),r=a.maxHeight,i=a.disabled,o=e.ref(!1),u=e.computed((function(){return"".concat(r.value,"px")}));return{isOpen:o,contentMaxHeight:u,open:function(){i.value||(o.value=!0,l.emit("open"))},close:function(){o.value=!1,l.emit("close")}}}(t,l),c=function(t,l,n){var a=e.toRefs(t),r=a.searchable,i=a.id;return{multiselect:e.ref(null),tabindex:e.computed((function(){return r.value?-1:0})),blurInput:function(){document.getElementById(i.value).querySelector(".multiselect-input").blur()}}}(t),s=o(t,l,{externalValue:n.externalValue,internalValue:n.internalValue,search:i.search,blurSearch:i.blurSearch,clearSearch:i.clearSearch,update:a.update,blurInput:c.blurInput}),d=function(t,l,n){var a=e.toRefs(t).id,r=n.filteredOptions,i=n.handleOptionClick,o=n.search,u=e.ref(null),c=function(e){u.value=e},s=function(){u.value=r.value[0]||null},d=function(){u.value=null},v=function(){var e=document.getElementById(a.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop<t.scrollTop&&(t.scrollTop=e.offsetTop)}};return e.watch(o,(function(e){s()})),{pointer:u,isPointed:function(e){return!!u.value&&u.value.value==e.value},setPointer:c,setPointerFirst:s,clearPointer:d,selectPointer:function(){u.value&&(i(u.value),d())},forwardPointer:function(t){if(null===u.value)c(r.value[0]);else{var l=r.value.map((function(e){return e.value})).indexOf(u.value.value)+1;r.value.length<=l&&(l=0),c(r.value[l])}e.nextTick((function(){v()}))},backwardPointer:function(){if(null===u.value)c(r.value[r.value.length-1]);else{var t=r.value.map((function(e){return e.value})).indexOf(u.value.value)-1;t<0&&(t=r.value.length-1),c(r.value[t])}e.nextTick((function(){v()}))}}}(t,0,{filteredOptions:s.filteredOptions,handleOptionClick:s.handleOptionClick,search:i.search}),v=(f={internalValue:n.internalValue,update:a.update,close:u.close,clearPointer:d.clearPointer},p=f.internalValue,h=f.update,m=f.close,y=f.clearPointer,{handleBackspace:function(e){h(r(p.value).slice(0,-1))},handleEsc:function(e){m(),y(),e.target.blur()}});var f,p,h,m,y;return{...n,...a,...i,...u,...c,...s,...d,...v}}};const c={class:"multiselect-single-label"},s={class:"multiselect-multiple-label"},d={key:2,class:"multiselect-search"},v={key:3,class:"multiselect-tags"},f={class:"multiselect-tag"},p={class:"multiselect-spinner"},h={class:"multiselect-no-options"},m={class:"multiselect-no-results"};return u.render=function(e,l,n,a,r,i){return t.openBlock(),t.createBlock("div",{class:["multiselect",[`is-${n.mode}`,{"is-open":e.isOpen,"is-searchable":n.searchable,"is-disabled":n.disabled,"no-caret":!n.caret}]],id:n.id,onKeydown:l[26]||(l[26]=t.withKeys(t.withModifiers((()=>{}),["prevent"]),["enter"])),ref:"multiselect"},[t.createVNode("div",{class:"multiselect-input",tabindex:e.tabindex,onFocus:l[18]||(l[18]=(...t)=>e.open&&e.open(...t)),onBlur:l[19]||(l[19]=(...t)=>e.close&&e.close(...t)),onKeyup:[l[20]||(l[20]=t.withKeys(((...t)=>e.handleEsc&&e.handleEsc(...t)),["esc"])),l[21]||(l[21]=t.withKeys(((...t)=>e.selectPointer&&e.selectPointer(...t)),["enter"]))],onKeydown:[l[22]||(l[22]=t.withKeys(t.withModifiers(((...t)=>e.handleBackspace&&e.handleBackspace(...t)),["prevent"]),["delete"])),l[23]||(l[23]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["prevent"]),["up"])),l[24]||(l[24]=t.withKeys(t.withModifiers(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["prevent"]),["down"]))]},[t.createCommentVNode(" Single label "),"single"==n.mode&&e.hasSelected&&!e.search&&e.internalValue?t.renderSlot(e.$slots,"singlelabel",{key:0,value:e.internalValue},(()=>[t.createVNode("div",c,t.toDisplayString(e.internalValue[n.label]),1)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Multiple label "),"multiple"==n.mode&&e.hasSelected&&!e.search?t.renderSlot(e.$slots,"multiplelabel",{key:1,values:e.internalValue},(()=>[t.createVNode("div",s,t.toDisplayString(e.multipleLabelText),1)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Search "),"tags"!==n.mode&&n.searchable&&!n.disabled?(t.openBlock(),t.createBlock("div",d,[t.withDirectives(t.createVNode("input",{"onUpdate:modelValue":l[1]||(l[1]=t=>e.search=t),onFocus:l[2]||(l[2]=t.withModifiers(((...t)=>e.open&&e.open(...t)),["stop"])),onBlur:l[3]||(l[3]=t.withModifiers(((...t)=>e.close&&e.close(...t)),["stop"])),onKeyup:[l[4]||(l[4]=t.withKeys(t.withModifiers(((...t)=>e.handleEsc&&e.handleEsc(...t)),["stop"]),["esc"])),l[5]||(l[5]=t.withKeys(t.withModifiers(((...t)=>e.selectPointer&&e.selectPointer(...t)),["stop"]),["enter"]))],onKeydown:[l[6]||(l[6]=t.withKeys(((...t)=>e.handleSearchBackspace&&e.handleSearchBackspace(...t)),["delete"])),l[7]||(l[7]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["stop"]),["up"])),l[8]||(l[8]=t.withKeys(t.withModifiers(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["stop"]),["down"]))],ref:"input"},null,544),[[t.vModelText,e.search]])])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Tags (with search) "),"tags"==n.mode?(t.openBlock(),t.createBlock("div",v,[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.internalValue,((a,r,i)=>(t.openBlock(),t.createBlock("span",{key:i},[t.renderSlot(e.$slots,"tag",{option:a,remove:e.remove,disabled:n.disabled},(()=>[t.createVNode("div",f,[t.createTextVNode(t.toDisplayString(a[n.label])+" ",1),n.disabled?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock("i",{key:0,onClick:l[9]||(l[9]=t.withModifiers((()=>{}),["prevent"])),onMousedown:t.withModifiers((t=>e.remove(a)),["prevent"])},null,40,["onMousedown"]))])]))])))),128)),n.searchable&&!n.disabled?(t.openBlock(),t.createBlock("div",{key:0,class:"multiselect-search",style:{width:e.tagsSearchWidth}},[t.withDirectives(t.createVNode("input",{"onUpdate:modelValue":l[10]||(l[10]=t=>e.search=t),onFocus:l[11]||(l[11]=t.withModifiers(((...t)=>e.open&&e.open(...t)),["stop"])),onBlur:l[12]||(l[12]=t.withModifiers(((...t)=>e.close&&e.close(...t)),["stop"])),onKeyup:[l[13]||(l[13]=t.withKeys(t.withModifiers(((...t)=>e.handleEsc&&e.handleEsc(...t)),["stop"]),["esc"])),l[14]||(l[14]=t.withKeys(t.withModifiers(((...t)=>e.selectPointer&&e.selectPointer(...t)),["stop"]),["enter"]))],onKeydown:[l[15]||(l[15]=t.withKeys(((...t)=>e.handleSearchBackspace&&e.handleSearchBackspace(...t)),["delete"])),l[16]||(l[16]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["stop"]),["up"])),l[17]||(l[17]=t.withKeys(t.withModifiers(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["stop"]),["down"]))],style:{width:e.tagsSearchWidth},ref:"input"},null,36),[[t.vModelText,e.search]])],4)):t.createCommentVNode("v-if",!0)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Placeholder "),t.withDirectives(t.createVNode("div",{class:"multiselect-placeholder"},t.toDisplayString(n.placeholder),513),[[t.vShow,n.placeholder&&!e.hasSelected&&!e.search]]),t.createVNode(t.Transition,{name:"multiselect-loading"},{default:t.withCtx((()=>[t.withDirectives(t.createVNode("div",p,null,512),[[t.vShow,e.busy]])])),_:1})],40,["tabindex"]),t.createCommentVNode(" Options "),t.createVNode(t.Transition,{name:"multiselect",onAfterLeave:e.clearSearch},{default:t.withCtx((()=>[t.withDirectives(t.createVNode("div",{class:"multiselect-options",style:{maxHeight:e.contentMaxHeight}},[t.renderSlot(e.$slots,"beforelist"),(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.filteredOptions,((a,r,i)=>(t.openBlock(),t.createBlock("a",{href:"",class:["multiselect-option",{"is-pointed":e.isPointed(a),"is-selected":e.isSelected(a)}],key:i,onMousedown:l[25]||(l[25]=t.withModifiers((()=>{}),["prevent"])),onMouseenter:t=>e.setPointer(a),onClick:t.withModifiers((t=>e.handleOptionClick(a)),["stop","prevent"])},[t.renderSlot(e.$slots,"option",{option:a,search:e.search},(()=>[t.createVNode("span",null,t.toDisplayString(a[n.label]),1)]))],42,["onMouseenter","onClick"])))),128)),t.withDirectives(t.createVNode("span",null,[t.renderSlot(e.$slots,"nooptions",{},(()=>[t.createVNode("div",h,t.toDisplayString(n.noOptionsText),1)]))],512),[[t.vShow,e.noOptions]]),t.withDirectives(t.createVNode("span",null,[t.renderSlot(e.$slots,"noresults",{},(()=>[t.createVNode("div",m,t.toDisplayString(n.noResultsText),1)]))],512),[[t.vShow,e.noResults]]),t.renderSlot(e.$slots,"afterlist")],4),[[t.vShow,e.isOpen]])])),_:3},8,["onAfterLeave"])],42,["id"])},u.__file="src/Multiselect.vue",u}(Vue,Vue);
+var VueformMultiselect=function(e,t){"use strict";function l(e){return String(e).toLowerCase().trim()}function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function r(e){return function(e){if(Array.isArray(e))return i(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return i(e,t);var l=Object.prototype.toString.call(e).slice(8,-1);"Object"===l&&e.constructor&&(l=e.constructor.name);if("Map"===l||"Set"===l)return Array.from(e);if("Arguments"===l||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(l))return i(e,t)}(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 i(e,t){(null==t||t>e.length)&&(t=e.length);for(var l=0,n=new Array(t);l<t;l++)n[l]=e[l];return n}function u(t,r,i){var u,o=e.toRefs(t),c=o.options,s=o.mode,d=o.trackBy,v=o.limit,f=o.hideSelected,p=o.createTag,h=o.label,m=o.appendNewTag,y=o.multipleLabel,b=o.object,g=o.loading,w=o.delay,S=o.resolveOnLoad,V=o.minChars,k=o.filterResults,B=o.clearOnSearch,O=o.clearOnSelect,x=o.valueProp,N=i.internalValue,P=i.externalValue,M=i.search,q=i.blurSearch,T=i.clearSearch,C=i.update,K=i.blurInput,j=e.ref([]),A=e.ref([]),D=e.ref(!1),R=e.computed((function(){var e,t=A.value||[];return e=t,"[object Object]"===Object.prototype.toString.call(e)&&(t=Object.keys(t).map((function(e){var l,n=t[e];return a(l={},x.value,e),a(l,d.value,n),a(l,h.value,n),l}))),t=t.map((function(e,t){var l;return"object"===n(e)?e:(a(l={},x.value,t),a(l,d.value,e),a(l,h.value,e),l)})),j.value.length&&(t=t.concat(j.value)),t})),E=e.computed((function(){var e=R.value;return F.value.length&&(e=F.value.concat(e)),M.value&&k.value&&(e=e.filter((function(e){return-1!==l(e[d.value]).indexOf(l(M.value))}))),f.value&&(e=e.filter((function(e){return!te(e)}))),v.value>0&&(e=e.slice(0,v.value)),e})),L=e.computed((function(){switch(s.value){case"single":return!U.value;case"multiple":case"tags":return!U.value&&N.value.length>0}})),$=e.computed((function(){return void 0!==y&&void 0!==y.value?y.value(N.value):N.value&&N.value.length>1?"".concat(N.value.length," options selected"):"1 option selected"})),H=e.computed((function(){return!R.value.length})),I=e.computed((function(){return R.value.length>0&&0==E.value.length})),F=e.computed((function(){var e;return!1!==p.value&&M.value?-1!==ee(M.value)?[]:[(e={},a(e,x.value,M.value),a(e,h.value,M.value),a(e,d.value,M.value),e)]:[]})),_=e.computed((function(){switch(s.value){case"single":return null;case"multiple":case"tags":return[]}})),U=e.computed((function(){return-1!==[null,void 0,!1].indexOf(N.value)})),W=e.computed((function(){return g.value||D.value})),z=function(e){switch("object"!==n(e)&&(e=Z(e)),s.value){case"single":C(e);break;case"multiple":case"tags":C((N.value||[]).concat(e))}r.emit("select",J(e))},G=function(e){switch("object"!==n(e)&&(e=Z(e)),s.value){case"single":Q();break;case"tags":case"multiple":C(N.value.filter((function(t){return t[x.value]!=e[x.value]})))}r.emit("deselect",J(e))},J=function(e){return b.value?e:e[x.value]},Q=function(){C(_.value)},X=function(e){switch(s.value){case"single":return!U.value&&N.value[x.value]==e[x.value];case"tags":case"multiple":return!U.value&&-1!==N.value.map((function(e){return e[x.value]})).indexOf(e[x.value])}},Y=function(e){return!0===e.disabled},Z=function(e){return R.value[R.value.map((function(e){return e[x.value]})).indexOf(e)]},ee=function(e){return R.value.map((function(e){return l(e[d.value])})).indexOf(l(e))},te=function(e){return"tags"===s.value&&f.value&&X(e)},le=function(e){j.value.push(e)};if("single"!==s.value&&-1===[null,void 0,!1].indexOf(P.value)&&!Array.isArray(P.value))throw new Error('v-model must be an array when using "'.concat(s.value,'" mode'));return c&&"function"==typeof c.value?S.value&&(D.value=!0,c.value(M.value).then((function(e){A.value=e,D.value=!1}))):A.value=c&&c.value?c.value:[],-1===[null,!1,void 0].indexOf(P.value)&&(N.value=(u=P.value,b.value?u:Array.isArray(u)?u.map((function(e){return Z(e)})):Z(u))),w.value>-1&&e.watch(M,(function(e){e.length<V.value||(B.value&&(A.value=[]),setTimeout((function(){e==M.value&&(D.value=!0,c.value(M.value).then((function(t){e==M.value&&(A.value=t),D.value=!1})))}),w.value))}),{flush:"sync"}),{filteredOptions:E,hasSelected:L,multipleLabelText:$,extendedOptions:R,noOptions:H,noResults:I,busy:W,select:z,deselect:G,remove:function(e){G(e)},clear:Q,isSelected:X,isDisabled:Y,getOption:Z,handleOptionClick:function(e){if(!Y(e))switch(s.value){case"single":if(X(e))return void G(e);Q(),z(e),q(),K();break;case"multiple":if(X(e))return void G(e);z(e),O.value&&T();break;case"tags":if(X(e))return void G(e);void 0===Z(e[x.value])&&p.value&&(r.emit("tag",e[x.value]),m.value&&le(e),T()),O.value&&T(),z(e)}}}}var o={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","update:modelValue","change"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1},id:{type:[String,Number],required:!1,default:"multiselect"},name:{type:[String,Number],required:!1,default:"multiselect"},disabled:{type:Boolean,required:!1,default:!1},label:{type:String,required:!1,default:"label"},trackBy:{type:String,required:!1,default:"label"},valueProp:{type:String,required:!1,default:"value"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},maxHeight:{type:Number,required:!1,default:160},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:!1},appendNewTag:{type:Boolean,required:!1,default:!0},caret:{type:Boolean,required:!1,default:!0},loading:{type:Boolean,required:!1,default:!1},noOptionsText:{type:String,required:!1,default:"The list is empty"},noResultsText:{type:String,required:!1,default:"No results found"},multipleLabel:{type:Function,required:!1},object:{type:Boolean,required:!1,default:!1},delay:{type:Number,required:!1,default:-1},minChars:{type:Number,required:!1,default:0},resolveOnLoad:{type:Boolean,required:!1,default:!0},filterResults:{type:Boolean,required:!1,default:!0},clearOnSearch:{type:Boolean,required:!1,default:!1},clearOnSelect:{type:Boolean,required:!1,default:!0}},setup(t,l){const n=function(t,l){var n=e.toRefs(t),a=n.value,r=n.modelValue,i=n.mode;return{internalValue:e.ref("single"!==i.value?[]:null),externalValue:e.computed((function(){return void 0!==l.expose?r.value:a.value}))}}(t,l),a=function(t,l,n){var a=e.toRefs(t),r=a.object,i=a.valueProp,u=n.internalValue,o=function(e){return r.value||-1!==[null,!1,void 0].indexOf(e)?e:Array.isArray(e)?e.map((function(e){return e[i.value]})):e[i.value]};return{update:function(e){u.value=e;var t=o(e);l.emit("change",t),l.emit("input",t),l.emit("update:modelValue",t)}}}(t,l,{internalValue:n.internalValue}),i=function(t,l,n){var a=e.toRefs(t),r=a.searchable,i=a.mode,u=n.internalValue,o=e.ref(null),c=e.ref(null),s=e.computed((function(){return o.value?"".concat(o.value.length,"ch"):"tags"===i.value&&-1===[null,void 0].indexOf(u.value)&&u.value.length?"1ch":"100%"}));return e.watch(o,(function(e){l.emit("search-change",e)})),{search:o,input:c,tagsSearchWidth:s,clearSearch:function(){o.value=""},blurSearch:function(){r.value&&c.value.blur()},handleSearchBackspace:function(e){""!==o.value&&e.stopPropagation()}}}(t,l,{internalValue:n.internalValue}),o=function(t,l,n){var a=e.toRefs(t),r=a.maxHeight,i=a.disabled,u=e.ref(!1),o=e.computed((function(){return"".concat(r.value,"px")}));return{isOpen:u,contentMaxHeight:o,open:function(){i.value||(u.value=!0,l.emit("open"))},close:function(){u.value=!1,l.emit("close")}}}(t,l),c=function(t,l,n){var a=e.toRefs(t),r=a.searchable,i=a.id;return{multiselect:e.ref(null),tabindex:e.computed((function(){return r.value?-1:0})),blurInput:function(){document.getElementById(i.value).querySelector(".multiselect-input").blur()}}}(t),s=u(t,l,{externalValue:n.externalValue,internalValue:n.internalValue,search:i.search,blurSearch:i.blurSearch,clearSearch:i.clearSearch,update:a.update,blurInput:c.blurInput}),d=function(t,l,n){var a=e.toRefs(t),r=a.id,i=a.valueProp,u=n.filteredOptions,o=n.handleOptionClick,c=n.search,s=e.ref(null),d=e.computed((function(){return u.value.filter((function(e){return!0!==e.disabled}))})),v=function(e){s.value=e},f=function(){s.value=d.value[0]||null},p=function(){s.value=null},h=function(){var e=document.getElementById(r.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop<t.scrollTop&&(t.scrollTop=e.offsetTop)}};return e.watch(c,(function(e){f()})),{pointer:s,isPointed:function(e){return!!s.value&&s.value[i.value]==e[i.value]},setPointer:v,setPointerFirst:f,clearPointer:p,selectPointer:function(){s.value&&!0!==s.value.disabled?(o(s.value),p()):p()},forwardPointer:function(){if(null===s.value)v(d.value[0]||null);else{var t=d.value.map((function(e){return e[i.value]})).indexOf(s.value[i.value])+1;d.value.length<=t&&(t=0),v(d.value[t]||null)}e.nextTick((function(){h()}))},backwardPointer:function(){if(null===s.value)v(d.value[d.value.length-1]||null);else{var t=d.value.map((function(e){return e[i.value]})).indexOf(s.value[i.value])-1;t<0&&(t=d.value.length-1),v(d.value[t]||null)}e.nextTick((function(){h()}))}}}(t,0,{filteredOptions:s.filteredOptions,handleOptionClick:s.handleOptionClick,search:i.search}),v=(f={internalValue:n.internalValue,update:a.update,close:o.close,clearPointer:d.clearPointer},p=f.internalValue,h=f.update,m=f.close,y=f.clearPointer,{handleBackspace:function(e){h(r(p.value).slice(0,-1))},handleEsc:function(e){m(),y(),e.target.blur()}});var f,p,h,m,y;return{...n,...a,...i,...o,...c,...s,...d,...v}}};const c={class:"multiselect-single-label"},s={class:"multiselect-multiple-label"},d={key:2,class:"multiselect-search"},v={key:3,class:"multiselect-tags"},f={class:"multiselect-tag"},p={class:"multiselect-spinner"},h={class:"multiselect-no-options"},m={class:"multiselect-no-results"};return o.render=function(e,l,n,a,r,i){return t.openBlock(),t.createBlock("div",{class:["multiselect",[`is-${n.mode}`,{"is-open":e.isOpen,"is-searchable":n.searchable,"is-disabled":n.disabled,"no-caret":!n.caret}]],id:n.id,onKeydown:l[26]||(l[26]=t.withKeys(t.withModifiers((()=>{}),["prevent"]),["enter"])),ref:"multiselect"},[t.createVNode("div",{class:"multiselect-input",tabindex:e.tabindex,onFocus:l[18]||(l[18]=(...t)=>e.open&&e.open(...t)),onBlur:l[19]||(l[19]=(...t)=>e.close&&e.close(...t)),onKeyup:[l[20]||(l[20]=t.withKeys(((...t)=>e.handleEsc&&e.handleEsc(...t)),["esc"])),l[21]||(l[21]=t.withKeys(((...t)=>e.selectPointer&&e.selectPointer(...t)),["enter"]))],onKeydown:[l[22]||(l[22]=t.withKeys(t.withModifiers(((...t)=>e.handleBackspace&&e.handleBackspace(...t)),["prevent"]),["delete"])),l[23]||(l[23]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["prevent"]),["up"])),l[24]||(l[24]=t.withKeys(t.withModifiers(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["prevent"]),["down"]))]},[t.createCommentVNode(" Single label "),"single"==n.mode&&e.hasSelected&&!e.search&&e.internalValue?t.renderSlot(e.$slots,"singlelabel",{key:0,value:e.internalValue},(()=>[t.createVNode("div",c,t.toDisplayString(e.internalValue[n.label]),1)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Multiple label "),"multiple"==n.mode&&e.hasSelected&&!e.search?t.renderSlot(e.$slots,"multiplelabel",{key:1,values:e.internalValue},(()=>[t.createVNode("div",s,t.toDisplayString(e.multipleLabelText),1)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Search "),"tags"!==n.mode&&n.searchable&&!n.disabled?(t.openBlock(),t.createBlock("div",d,[t.withDirectives(t.createVNode("input",{"onUpdate:modelValue":l[1]||(l[1]=t=>e.search=t),onFocus:l[2]||(l[2]=t.withModifiers(((...t)=>e.open&&e.open(...t)),["stop"])),onBlur:l[3]||(l[3]=t.withModifiers(((...t)=>e.close&&e.close(...t)),["stop"])),onKeyup:[l[4]||(l[4]=t.withKeys(t.withModifiers(((...t)=>e.handleEsc&&e.handleEsc(...t)),["stop"]),["esc"])),l[5]||(l[5]=t.withKeys(t.withModifiers(((...t)=>e.selectPointer&&e.selectPointer(...t)),["stop"]),["enter"]))],onKeydown:[l[6]||(l[6]=t.withKeys(((...t)=>e.handleSearchBackspace&&e.handleSearchBackspace(...t)),["delete"])),l[7]||(l[7]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["stop"]),["up"])),l[8]||(l[8]=t.withKeys(t.withModifiers(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["stop"]),["down"]))],ref:"input"},null,544),[[t.vModelText,e.search]])])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Tags (with search) "),"tags"==n.mode?(t.openBlock(),t.createBlock("div",v,[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.internalValue,((a,r,i)=>(t.openBlock(),t.createBlock("span",{key:i},[t.renderSlot(e.$slots,"tag",{option:a,remove:e.remove,disabled:n.disabled},(()=>[t.createVNode("div",f,[t.createTextVNode(t.toDisplayString(a[n.label])+" ",1),n.disabled?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock("i",{key:0,onClick:l[9]||(l[9]=t.withModifiers((()=>{}),["prevent"])),onMousedown:t.withModifiers((t=>e.remove(a)),["prevent"])},null,40,["onMousedown"]))])]))])))),128)),n.searchable&&!n.disabled?(t.openBlock(),t.createBlock("div",{key:0,class:"multiselect-search",style:{width:e.tagsSearchWidth}},[t.withDirectives(t.createVNode("input",{"onUpdate:modelValue":l[10]||(l[10]=t=>e.search=t),onFocus:l[11]||(l[11]=t.withModifiers(((...t)=>e.open&&e.open(...t)),["stop"])),onBlur:l[12]||(l[12]=t.withModifiers(((...t)=>e.close&&e.close(...t)),["stop"])),onKeyup:[l[13]||(l[13]=t.withKeys(t.withModifiers(((...t)=>e.handleEsc&&e.handleEsc(...t)),["stop"]),["esc"])),l[14]||(l[14]=t.withKeys(t.withModifiers(((...t)=>e.selectPointer&&e.selectPointer(...t)),["stop"]),["enter"]))],onKeydown:[l[15]||(l[15]=t.withKeys(((...t)=>e.handleSearchBackspace&&e.handleSearchBackspace(...t)),["delete"])),l[16]||(l[16]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["stop"]),["up"])),l[17]||(l[17]=t.withKeys(t.withModifiers(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["stop"]),["down"]))],style:{width:e.tagsSearchWidth},ref:"input"},null,36),[[t.vModelText,e.search]])],4)):t.createCommentVNode("v-if",!0)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Placeholder "),t.withDirectives(t.createVNode("div",{class:"multiselect-placeholder"},t.toDisplayString(n.placeholder),513),[[t.vShow,n.placeholder&&!e.hasSelected&&!e.search]]),t.createVNode(t.Transition,{name:"multiselect-loading"},{default:t.withCtx((()=>[t.withDirectives(t.createVNode("div",p,null,512),[[t.vShow,e.busy]])])),_:1})],40,["tabindex"]),t.createCommentVNode(" Options "),t.createVNode(t.Transition,{name:"multiselect",onAfterLeave:e.clearSearch},{default:t.withCtx((()=>[t.withDirectives(t.createVNode("div",{class:"multiselect-options",style:{maxHeight:e.contentMaxHeight}},[t.renderSlot(e.$slots,"beforelist"),(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.filteredOptions,((a,r,i)=>(t.openBlock(),t.createBlock("a",{href:"",class:["multiselect-option",{"is-pointed":e.isPointed(a),"is-selected":e.isSelected(a),"is-disabled":e.isDisabled(a)}],key:i,onMousedown:l[25]||(l[25]=t.withModifiers((()=>{}),["prevent"])),onMouseenter:t=>e.setPointer(a),onClick:t.withModifiers((t=>e.handleOptionClick(a)),["stop","prevent"])},[t.renderSlot(e.$slots,"option",{option:a,search:e.search},(()=>[t.createVNode("span",null,t.toDisplayString(a[n.label]),1)]))],42,["onMouseenter","onClick"])))),128)),t.withDirectives(t.createVNode("span",null,[t.renderSlot(e.$slots,"nooptions",{},(()=>[t.createVNode("div",h,t.toDisplayString(n.noOptionsText),1)]))],512),[[t.vShow,e.noOptions]]),t.withDirectives(t.createVNode("span",null,[t.renderSlot(e.$slots,"noresults",{},(()=>[t.createVNode("div",m,t.toDisplayString(n.noResultsText),1)]))],512),[[t.vShow,e.noResults]]),t.renderSlot(e.$slots,"afterlist")],4),[[t.vShow,e.isOpen]])])),_:3},8,["onAfterLeave"])],42,["id"])},o.__file="src/Multiselect.vue",o}(Vue,Vue);

dist/multiselect.js

@@ -1,1 +0,1 @@
-import{toRefs as e,ref as t,computed as l,watch as n,nextTick as a,openBlock as u,createBlock as r,withKeys as i,withModifiers as o,createVNode as c,createCommentVNode as s,renderSlot as d,toDisplayString as v,withDirectives as p,vModelText as f,Fragment as h,renderList as m,createTextVNode as b,vShow as y,Transition as g,withCtx as S}from"vue";function O(e){return String(e).toLowerCase().trim()}function w(e){return(w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function k(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function x(a,u,r){var i,o=e(a),c=o.options,s=o.mode,d=o.trackBy,v=o.limit,p=o.hideSelected,f=o.createTag,h=o.label,m=o.appendNewTag,b=o.multipleLabel,y=o.object,g=o.loading,S=o.delay,x=o.resolveOnLoad,P=o.minChars,q=o.filterResults,V=o.clearOnSearch,B=o.clearOnSelect,T=r.internalValue,j=r.externalValue,A=r.search,C=r.blurSearch,E=r.clearSearch,M=r.update,$=r.blurInput,H=t([]),I=t([]),L=t(!1),N=l((function(){var e,t=I.value||[];return e=t,"[object Object]"===Object.prototype.toString.call(e)&&(t=Object.keys(t).map((function(e){var l,n=t[e];return k(l={value:e},d.value,n),k(l,h.value,n),l}))),t=t.map((function(e,t){var l;return"object"===w(e)?e:(k(l={value:t},d.value,e),k(l,h.value,e),l)})),H.value.length&&(t=t.concat(H.value)),t})),K=l((function(){var e=N.value;return W.value.length&&(e=W.value.concat(e)),A.value&&q.value&&(e=e.filter((function(e){return-1!==O(e[d.value]).indexOf(O(A.value))}))),p.value&&(e=e.filter((function(e){return!le(e)}))),v.value>0&&(e=e.slice(0,v.value)),e})),F=l((function(){switch(s.value){case"single":return!D.value;case"multiple":case"tags":return!D.value&&T.value.length>0}})),R=l((function(){return void 0!==b&&void 0!==b.value?b.value(T.value):T.value&&T.value.length>1?"".concat(T.value.length," options selected"):"1 option selected"})),_=l((function(){return!N.value.length})),U=l((function(){return N.value.length>0&&0==K.value.length})),W=l((function(){var e;return!1!==f.value&&A.value?-1!==te(A.value)?[]:[(e={},k(e,h.value,A.value),k(e,d.value,A.value),k(e,"value",A.value),e)]:[]})),z=l((function(){switch(s.value){case"single":return null;case"multiple":case"tags":return[]}})),D=l((function(){return-1!==[null,void 0,!1].indexOf(T.value)})),G=l((function(){return g.value||L.value})),J=function(e){switch("object"!==w(e)&&(e=ee(e)),s.value){case"single":M(e);break;case"multiple":case"tags":M((T.value||[]).concat(e))}u.emit("select",X(e))},Q=function(e){switch("object"!==w(e)&&(e=ee(e)),s.value){case"single":Y();break;case"tags":case"multiple":M(T.value.filter((function(t){return t.value!=e.value})))}u.emit("deselect",X(e))},X=function(e){return y.value?e:e.value},Y=function(e){M(z.value)},Z=function(e){switch(s.value){case"single":return!D.value&&T.value.value==e.value;case"tags":case"multiple":return!D.value&&-1!==T.value.map((function(e){return e.value})).indexOf(e.value)}},ee=function(e){return N.value[N.value.map((function(e){return e.value})).indexOf(e)]},te=function(e){return N.value.map((function(e){return O(e[d.value])})).indexOf(O(e))},le=function(e){return"tags"===s.value&&p.value&&Z(e)},ne=function(e){H.value.push(e)};if("single"!==s.value&&-1===[null,void 0,!1].indexOf(j.value)&&!Array.isArray(j.value))throw new Error('v-model must be an array when using "'.concat(s.value,'" mode'));return c&&"function"==typeof c.value?x.value&&(L.value=!0,c.value(A.value).then((function(e){I.value=e,L.value=!1}))):I.value=c&&c.value?c.value:[],-1===[null,!1,void 0].indexOf(j.value)&&(T.value=(i=j.value,y.value?i:Array.isArray(i)?i.map((function(e){return ee(e)})):ee(i))),S.value>-1&&n(A,(function(e){e.length<P.value||(V.value&&(I.value=[]),setTimeout((function(){e==A.value&&(L.value=!0,c.value(A.value).then((function(t){e==A.value&&(I.value=t),L.value=!1})))}),S.value))}),{flush:"sync"}),{filteredOptions:K,hasSelected:F,multipleLabelText:R,extendedOptions:N,noOptions:_,noResults:U,busy:G,select:J,deselect:Q,remove:function(e){Q(e)},clear:Y,isSelected:Z,getOption:ee,handleOptionClick:function(e){switch(s.value){case"single":if(Z(e))return void Q(e);Y(),J(e),C(),$();break;case"multiple":if(Z(e))return void Q(e);J(e),B.value&&E();break;case"tags":if(Z(e))return void Q(e);void 0===ee(e.value)&&f.value&&(u.emit("tag",e.value),m.value&&ne(e),E()),B.value&&E(),J(e)}}}}function P(e){return function(e){if(Array.isArray(e))return q(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return q(e,t);var l=Object.prototype.toString.call(e).slice(8,-1);"Object"===l&&e.constructor&&(l=e.constructor.name);if("Map"===l||"Set"===l)return Array.from(e);if("Arguments"===l||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(l))return q(e,t)}(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 q(e,t){(null==t||t>e.length)&&(t=e.length);for(var l=0,n=new Array(t);l<t;l++)n[l]=e[l];return n}var V={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","update:modelValue"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1},id:{type:[String,Number],required:!1,default:"multiselect"},name:{type:[String,Number],required:!1,default:"multiselect"},disabled:{type:Boolean,required:!1,default:!1},label:{type:String,required:!1,default:"label"},trackBy:{type:String,required:!1,default:"label"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},maxHeight:{type:Number,required:!1,default:160},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:!1},appendNewTag:{type:Boolean,required:!1,default:!0},caret:{type:Boolean,required:!1,default:!0},loading:{type:Boolean,required:!1,default:!1},noOptionsText:{type:String,required:!1,default:"The list is empty"},noResultsText:{type:String,required:!1,default:"No results found"},multipleLabel:{type:Function,required:!1},object:{type:Boolean,required:!1,default:!1},delay:{type:Number,required:!1,default:-1},minChars:{type:Number,required:!1,default:0},resolveOnLoad:{type:Boolean,required:!1,default:!0},filterResults:{type:Boolean,required:!1,default:!0},clearOnSearch:{type:Boolean,required:!1,default:!1},clearOnSelect:{type:Boolean,required:!1,default:!0}},setup(u,r){const i=function(n,a){var u=e(n),r=u.value,i=u.modelValue,o=u.mode;return{internalValue:t("single"!==o.value?[]:null),externalValue:l((function(){return void 0!==a.expose?i.value:r.value}))}}(u,r),o=function(t,l,n){var a=e(t).object,u=n.internalValue,r=function(e){return a.value||-1!==[null,!1,void 0].indexOf(e)?e:Array.isArray(e)?e.map((function(e){return e.value})):e.value};return{update:function(e){u.value=e;var t=r(e);l.emit("change",t),l.emit("input",t),l.emit("update:modelValue",t)}}}(u,r,{internalValue:i.internalValue}),c=function(a,u,r){var i=e(a),o=i.searchable,c=i.mode,s=r.internalValue,d=t(null),v=t(null),p=l((function(){return d.value?"".concat(d.value.length,"ch"):"tags"===c.value&&-1===[null,void 0].indexOf(s.value)&&s.value.length?"1ch":"100%"}));return n(d,(function(e){u.emit("search-change",e)})),{search:d,input:v,tagsSearchWidth:p,clearSearch:function(){d.value=""},blurSearch:function(){o.value&&v.value.blur()},handleSearchBackspace:function(e){""!==d.value&&e.stopPropagation()}}}(u,r,{internalValue:i.internalValue}),s=function(n,a,u){var r=e(n),i=r.maxHeight,o=r.disabled,c=t(!1),s=l((function(){return"".concat(i.value,"px")}));return{isOpen:c,contentMaxHeight:s,open:function(){o.value||(c.value=!0,a.emit("open"))},close:function(){c.value=!1,a.emit("close")}}}(u,r),d=function(n,a,u){var r=e(n),i=r.searchable,o=r.id;return{multiselect:t(null),tabindex:l((function(){return i.value?-1:0})),blurInput:function(){document.getElementById(o.value).querySelector(".multiselect-input").blur()}}}(u),v=x(u,r,{externalValue:i.externalValue,internalValue:i.internalValue,search:c.search,blurSearch:c.blurSearch,clearSearch:c.clearSearch,update:o.update,blurInput:d.blurInput}),p=function(l,u,r){var i=e(l).id,o=r.filteredOptions,c=r.handleOptionClick,s=r.search,d=t(null),v=function(e){d.value=e},p=function(){d.value=o.value[0]||null},f=function(){d.value=null},h=function(){var e=document.getElementById(i.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop<t.scrollTop&&(t.scrollTop=e.offsetTop)}};return n(s,(function(e){p()})),{pointer:d,isPointed:function(e){return!!d.value&&d.value.value==e.value},setPointer:v,setPointerFirst:p,clearPointer:f,selectPointer:function(){d.value&&(c(d.value),f())},forwardPointer:function(e){if(null===d.value)v(o.value[0]);else{var t=o.value.map((function(e){return e.value})).indexOf(d.value.value)+1;o.value.length<=t&&(t=0),v(o.value[t])}a((function(){h()}))},backwardPointer:function(){if(null===d.value)v(o.value[o.value.length-1]);else{var e=o.value.map((function(e){return e.value})).indexOf(d.value.value)-1;e<0&&(e=o.value.length-1),v(o.value[e])}a((function(){h()}))}}}(u,0,{filteredOptions:v.filteredOptions,handleOptionClick:v.handleOptionClick,search:c.search}),f=(h={internalValue:i.internalValue,update:o.update,close:s.close,clearPointer:p.clearPointer},m=h.internalValue,b=h.update,y=h.close,g=h.clearPointer,{handleBackspace:function(e){b(P(m.value).slice(0,-1))},handleEsc:function(e){y(),g(),e.target.blur()}});var h,m,b,y,g;return{...i,...o,...c,...s,...d,...v,...p,...f}}};const B={class:"multiselect-single-label"},T={class:"multiselect-multiple-label"},j={key:2,class:"multiselect-search"},A={key:3,class:"multiselect-tags"},C={class:"multiselect-tag"},E={class:"multiselect-spinner"},M={class:"multiselect-no-options"},$={class:"multiselect-no-results"};V.render=function(e,t,l,n,a,O){return u(),r("div",{class:["multiselect",[`is-${l.mode}`,{"is-open":e.isOpen,"is-searchable":l.searchable,"is-disabled":l.disabled,"no-caret":!l.caret}]],id:l.id,onKeydown:t[26]||(t[26]=i(o((()=>{}),["prevent"]),["enter"])),ref:"multiselect"},[c("div",{class:"multiselect-input",tabindex:e.tabindex,onFocus:t[18]||(t[18]=(...t)=>e.open&&e.open(...t)),onBlur:t[19]||(t[19]=(...t)=>e.close&&e.close(...t)),onKeyup:[t[20]||(t[20]=i(((...t)=>e.handleEsc&&e.handleEsc(...t)),["esc"])),t[21]||(t[21]=i(((...t)=>e.selectPointer&&e.selectPointer(...t)),["enter"]))],onKeydown:[t[22]||(t[22]=i(o(((...t)=>e.handleBackspace&&e.handleBackspace(...t)),["prevent"]),["delete"])),t[23]||(t[23]=i(o(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["prevent"]),["up"])),t[24]||(t[24]=i(o(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["prevent"]),["down"]))]},[s(" Single label "),"single"==l.mode&&e.hasSelected&&!e.search&&e.internalValue?d(e.$slots,"singlelabel",{key:0,value:e.internalValue},(()=>[c("div",B,v(e.internalValue[l.label]),1)])):s("v-if",!0),s(" Multiple label "),"multiple"==l.mode&&e.hasSelected&&!e.search?d(e.$slots,"multiplelabel",{key:1,values:e.internalValue},(()=>[c("div",T,v(e.multipleLabelText),1)])):s("v-if",!0),s(" Search "),"tags"!==l.mode&&l.searchable&&!l.disabled?(u(),r("div",j,[p(c("input",{"onUpdate:modelValue":t[1]||(t[1]=t=>e.search=t),onFocus:t[2]||(t[2]=o(((...t)=>e.open&&e.open(...t)),["stop"])),onBlur:t[3]||(t[3]=o(((...t)=>e.close&&e.close(...t)),["stop"])),onKeyup:[t[4]||(t[4]=i(o(((...t)=>e.handleEsc&&e.handleEsc(...t)),["stop"]),["esc"])),t[5]||(t[5]=i(o(((...t)=>e.selectPointer&&e.selectPointer(...t)),["stop"]),["enter"]))],onKeydown:[t[6]||(t[6]=i(((...t)=>e.handleSearchBackspace&&e.handleSearchBackspace(...t)),["delete"])),t[7]||(t[7]=i(o(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["stop"]),["up"])),t[8]||(t[8]=i(o(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["stop"]),["down"]))],ref:"input"},null,544),[[f,e.search]])])):s("v-if",!0),s(" Tags (with search) "),"tags"==l.mode?(u(),r("div",A,[(u(!0),r(h,null,m(e.internalValue,((n,a,i)=>(u(),r("span",{key:i},[d(e.$slots,"tag",{option:n,remove:e.remove,disabled:l.disabled},(()=>[c("div",C,[b(v(n[l.label])+" ",1),l.disabled?s("v-if",!0):(u(),r("i",{key:0,onClick:t[9]||(t[9]=o((()=>{}),["prevent"])),onMousedown:o((t=>e.remove(n)),["prevent"])},null,40,["onMousedown"]))])]))])))),128)),l.searchable&&!l.disabled?(u(),r("div",{key:0,class:"multiselect-search",style:{width:e.tagsSearchWidth}},[p(c("input",{"onUpdate:modelValue":t[10]||(t[10]=t=>e.search=t),onFocus:t[11]||(t[11]=o(((...t)=>e.open&&e.open(...t)),["stop"])),onBlur:t[12]||(t[12]=o(((...t)=>e.close&&e.close(...t)),["stop"])),onKeyup:[t[13]||(t[13]=i(o(((...t)=>e.handleEsc&&e.handleEsc(...t)),["stop"]),["esc"])),t[14]||(t[14]=i(o(((...t)=>e.selectPointer&&e.selectPointer(...t)),["stop"]),["enter"]))],onKeydown:[t[15]||(t[15]=i(((...t)=>e.handleSearchBackspace&&e.handleSearchBackspace(...t)),["delete"])),t[16]||(t[16]=i(o(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["stop"]),["up"])),t[17]||(t[17]=i(o(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["stop"]),["down"]))],style:{width:e.tagsSearchWidth},ref:"input"},null,36),[[f,e.search]])],4)):s("v-if",!0)])):s("v-if",!0),s(" Placeholder "),p(c("div",{class:"multiselect-placeholder"},v(l.placeholder),513),[[y,l.placeholder&&!e.hasSelected&&!e.search]]),c(g,{name:"multiselect-loading"},{default:S((()=>[p(c("div",E,null,512),[[y,e.busy]])])),_:1})],40,["tabindex"]),s(" Options "),c(g,{name:"multiselect",onAfterLeave:e.clearSearch},{default:S((()=>[p(c("div",{class:"multiselect-options",style:{maxHeight:e.contentMaxHeight}},[d(e.$slots,"beforelist"),(u(!0),r(h,null,m(e.filteredOptions,((n,a,i)=>(u(),r("a",{href:"",class:["multiselect-option",{"is-pointed":e.isPointed(n),"is-selected":e.isSelected(n)}],key:i,onMousedown:t[25]||(t[25]=o((()=>{}),["prevent"])),onMouseenter:t=>e.setPointer(n),onClick:o((t=>e.handleOptionClick(n)),["stop","prevent"])},[d(e.$slots,"option",{option:n,search:e.search},(()=>[c("span",null,v(n[l.label]),1)]))],42,["onMouseenter","onClick"])))),128)),p(c("span",null,[d(e.$slots,"nooptions",{},(()=>[c("div",M,v(l.noOptionsText),1)]))],512),[[y,e.noOptions]]),p(c("span",null,[d(e.$slots,"noresults",{},(()=>[c("div",$,v(l.noResultsText),1)]))],512),[[y,e.noResults]]),d(e.$slots,"afterlist")],4),[[y,e.isOpen]])])),_:3},8,["onAfterLeave"])],42,["id"])},V.__file="src/Multiselect.vue";export default V;
+import{toRefs as e,ref as l,computed as t,watch as n,nextTick as a,openBlock as u,createBlock as r,withKeys as i,withModifiers as o,createVNode as c,createCommentVNode as s,renderSlot as d,toDisplayString as v,withDirectives as p,vModelText as f,Fragment as h,renderList as m,createTextVNode as b,vShow as y,Transition as g,withCtx as S}from"vue";function O(e){return String(e).toLowerCase().trim()}function w(e){return(w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function k(e,l,t){return l in e?Object.defineProperty(e,l,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[l]=t,e}function P(a,u,r){var i,o=e(a),c=o.options,s=o.mode,d=o.trackBy,v=o.limit,p=o.hideSelected,f=o.createTag,h=o.label,m=o.appendNewTag,b=o.multipleLabel,y=o.object,g=o.loading,S=o.delay,P=o.resolveOnLoad,x=o.minChars,q=o.filterResults,V=o.clearOnSearch,B=o.clearOnSelect,T=o.valueProp,j=r.internalValue,A=r.externalValue,C=r.search,E=r.blurSearch,M=r.clearSearch,$=r.update,H=r.blurInput,I=l([]),L=l([]),N=l(!1),K=t((function(){var e,l=L.value||[];return e=l,"[object Object]"===Object.prototype.toString.call(e)&&(l=Object.keys(l).map((function(e){var t,n=l[e];return k(t={},T.value,e),k(t,d.value,n),k(t,h.value,n),t}))),l=l.map((function(e,l){var t;return"object"===w(e)?e:(k(t={},T.value,l),k(t,d.value,e),k(t,h.value,e),t)})),I.value.length&&(l=l.concat(I.value)),l})),F=t((function(){var e=K.value;return D.value.length&&(e=D.value.concat(e)),C.value&&q.value&&(e=e.filter((function(e){return-1!==O(e[d.value]).indexOf(O(C.value))}))),p.value&&(e=e.filter((function(e){return!ae(e)}))),v.value>0&&(e=e.slice(0,v.value)),e})),R=t((function(){switch(s.value){case"single":return!G.value;case"multiple":case"tags":return!G.value&&j.value.length>0}})),_=t((function(){return void 0!==b&&void 0!==b.value?b.value(j.value):j.value&&j.value.length>1?"".concat(j.value.length," options selected"):"1 option selected"})),U=t((function(){return!K.value.length})),W=t((function(){return K.value.length>0&&0==F.value.length})),D=t((function(){var e;return!1!==f.value&&C.value?-1!==ne(C.value)?[]:[(e={},k(e,T.value,C.value),k(e,h.value,C.value),k(e,d.value,C.value),e)]:[]})),z=t((function(){switch(s.value){case"single":return null;case"multiple":case"tags":return[]}})),G=t((function(){return-1!==[null,void 0,!1].indexOf(j.value)})),J=t((function(){return g.value||N.value})),Q=function(e){switch("object"!==w(e)&&(e=te(e)),s.value){case"single":$(e);break;case"multiple":case"tags":$((j.value||[]).concat(e))}u.emit("select",Y(e))},X=function(e){switch("object"!==w(e)&&(e=te(e)),s.value){case"single":Z();break;case"tags":case"multiple":$(j.value.filter((function(l){return l[T.value]!=e[T.value]})))}u.emit("deselect",Y(e))},Y=function(e){return y.value?e:e[T.value]},Z=function(){$(z.value)},ee=function(e){switch(s.value){case"single":return!G.value&&j.value[T.value]==e[T.value];case"tags":case"multiple":return!G.value&&-1!==j.value.map((function(e){return e[T.value]})).indexOf(e[T.value])}},le=function(e){return!0===e.disabled},te=function(e){return K.value[K.value.map((function(e){return e[T.value]})).indexOf(e)]},ne=function(e){return K.value.map((function(e){return O(e[d.value])})).indexOf(O(e))},ae=function(e){return"tags"===s.value&&p.value&&ee(e)},ue=function(e){I.value.push(e)};if("single"!==s.value&&-1===[null,void 0,!1].indexOf(A.value)&&!Array.isArray(A.value))throw new Error('v-model must be an array when using "'.concat(s.value,'" mode'));return c&&"function"==typeof c.value?P.value&&(N.value=!0,c.value(C.value).then((function(e){L.value=e,N.value=!1}))):L.value=c&&c.value?c.value:[],-1===[null,!1,void 0].indexOf(A.value)&&(j.value=(i=A.value,y.value?i:Array.isArray(i)?i.map((function(e){return te(e)})):te(i))),S.value>-1&&n(C,(function(e){e.length<x.value||(V.value&&(L.value=[]),setTimeout((function(){e==C.value&&(N.value=!0,c.value(C.value).then((function(l){e==C.value&&(L.value=l),N.value=!1})))}),S.value))}),{flush:"sync"}),{filteredOptions:F,hasSelected:R,multipleLabelText:_,extendedOptions:K,noOptions:U,noResults:W,busy:J,select:Q,deselect:X,remove:function(e){X(e)},clear:Z,isSelected:ee,isDisabled:le,getOption:te,handleOptionClick:function(e){if(!le(e))switch(s.value){case"single":if(ee(e))return void X(e);Z(),Q(e),E(),H();break;case"multiple":if(ee(e))return void X(e);Q(e),B.value&&M();break;case"tags":if(ee(e))return void X(e);void 0===te(e[T.value])&&f.value&&(u.emit("tag",e[T.value]),m.value&&ue(e),M()),B.value&&M(),Q(e)}}}}function x(e){return function(e){if(Array.isArray(e))return q(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,l){if(!e)return;if("string"==typeof e)return q(e,l);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return q(e,l)}(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 q(e,l){(null==l||l>e.length)&&(l=e.length);for(var t=0,n=new Array(l);t<l;t++)n[t]=e[t];return n}var V={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","update:modelValue","change"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1},id:{type:[String,Number],required:!1,default:"multiselect"},name:{type:[String,Number],required:!1,default:"multiselect"},disabled:{type:Boolean,required:!1,default:!1},label:{type:String,required:!1,default:"label"},trackBy:{type:String,required:!1,default:"label"},valueProp:{type:String,required:!1,default:"value"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},maxHeight:{type:Number,required:!1,default:160},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:!1},appendNewTag:{type:Boolean,required:!1,default:!0},caret:{type:Boolean,required:!1,default:!0},loading:{type:Boolean,required:!1,default:!1},noOptionsText:{type:String,required:!1,default:"The list is empty"},noResultsText:{type:String,required:!1,default:"No results found"},multipleLabel:{type:Function,required:!1},object:{type:Boolean,required:!1,default:!1},delay:{type:Number,required:!1,default:-1},minChars:{type:Number,required:!1,default:0},resolveOnLoad:{type:Boolean,required:!1,default:!0},filterResults:{type:Boolean,required:!1,default:!0},clearOnSearch:{type:Boolean,required:!1,default:!1},clearOnSelect:{type:Boolean,required:!1,default:!0}},setup(u,r){const i=function(n,a){var u=e(n),r=u.value,i=u.modelValue,o=u.mode;return{internalValue:l("single"!==o.value?[]:null),externalValue:t((function(){return void 0!==a.expose?i.value:r.value}))}}(u,r),o=function(l,t,n){var a=e(l),u=a.object,r=a.valueProp,i=n.internalValue,o=function(e){return u.value||-1!==[null,!1,void 0].indexOf(e)?e:Array.isArray(e)?e.map((function(e){return e[r.value]})):e[r.value]};return{update:function(e){i.value=e;var l=o(e);t.emit("change",l),t.emit("input",l),t.emit("update:modelValue",l)}}}(u,r,{internalValue:i.internalValue}),c=function(a,u,r){var i=e(a),o=i.searchable,c=i.mode,s=r.internalValue,d=l(null),v=l(null),p=t((function(){return d.value?"".concat(d.value.length,"ch"):"tags"===c.value&&-1===[null,void 0].indexOf(s.value)&&s.value.length?"1ch":"100%"}));return n(d,(function(e){u.emit("search-change",e)})),{search:d,input:v,tagsSearchWidth:p,clearSearch:function(){d.value=""},blurSearch:function(){o.value&&v.value.blur()},handleSearchBackspace:function(e){""!==d.value&&e.stopPropagation()}}}(u,r,{internalValue:i.internalValue}),s=function(n,a,u){var r=e(n),i=r.maxHeight,o=r.disabled,c=l(!1),s=t((function(){return"".concat(i.value,"px")}));return{isOpen:c,contentMaxHeight:s,open:function(){o.value||(c.value=!0,a.emit("open"))},close:function(){c.value=!1,a.emit("close")}}}(u,r),d=function(n,a,u){var r=e(n),i=r.searchable,o=r.id;return{multiselect:l(null),tabindex:t((function(){return i.value?-1:0})),blurInput:function(){document.getElementById(o.value).querySelector(".multiselect-input").blur()}}}(u),v=P(u,r,{externalValue:i.externalValue,internalValue:i.internalValue,search:c.search,blurSearch:c.blurSearch,clearSearch:c.clearSearch,update:o.update,blurInput:d.blurInput}),p=function(u,r,i){var o=e(u),c=o.id,s=o.valueProp,d=i.filteredOptions,v=i.handleOptionClick,p=i.search,f=l(null),h=t((function(){return d.value.filter((function(e){return!0!==e.disabled}))})),m=function(e){f.value=e},b=function(){f.value=h.value[0]||null},y=function(){f.value=null},g=function(){var e=document.getElementById(c.value).querySelector(".is-pointed");if(e){var l=e.parentElement;e.offsetTop+e.offsetHeight>l.clientHeight+l.scrollTop&&(l.scrollTop=e.offsetTop+e.offsetHeight-l.clientHeight),e.offsetTop<l.scrollTop&&(l.scrollTop=e.offsetTop)}};return n(p,(function(e){b()})),{pointer:f,isPointed:function(e){return!!f.value&&f.value[s.value]==e[s.value]},setPointer:m,setPointerFirst:b,clearPointer:y,selectPointer:function(){f.value&&!0!==f.value.disabled?(v(f.value),y()):y()},forwardPointer:function(){if(null===f.value)m(h.value[0]||null);else{var e=h.value.map((function(e){return e[s.value]})).indexOf(f.value[s.value])+1;h.value.length<=e&&(e=0),m(h.value[e]||null)}a((function(){g()}))},backwardPointer:function(){if(null===f.value)m(h.value[h.value.length-1]||null);else{var e=h.value.map((function(e){return e[s.value]})).indexOf(f.value[s.value])-1;e<0&&(e=h.value.length-1),m(h.value[e]||null)}a((function(){g()}))}}}(u,0,{filteredOptions:v.filteredOptions,handleOptionClick:v.handleOptionClick,search:c.search}),f=(h={internalValue:i.internalValue,update:o.update,close:s.close,clearPointer:p.clearPointer},m=h.internalValue,b=h.update,y=h.close,g=h.clearPointer,{handleBackspace:function(e){b(x(m.value).slice(0,-1))},handleEsc:function(e){y(),g(),e.target.blur()}});var h,m,b,y,g;return{...i,...o,...c,...s,...d,...v,...p,...f}}};const B={class:"multiselect-single-label"},T={class:"multiselect-multiple-label"},j={key:2,class:"multiselect-search"},A={key:3,class:"multiselect-tags"},C={class:"multiselect-tag"},E={class:"multiselect-spinner"},M={class:"multiselect-no-options"},$={class:"multiselect-no-results"};V.render=function(e,l,t,n,a,O){return u(),r("div",{class:["multiselect",[`is-${t.mode}`,{"is-open":e.isOpen,"is-searchable":t.searchable,"is-disabled":t.disabled,"no-caret":!t.caret}]],id:t.id,onKeydown:l[26]||(l[26]=i(o((()=>{}),["prevent"]),["enter"])),ref:"multiselect"},[c("div",{class:"multiselect-input",tabindex:e.tabindex,onFocus:l[18]||(l[18]=(...l)=>e.open&&e.open(...l)),onBlur:l[19]||(l[19]=(...l)=>e.close&&e.close(...l)),onKeyup:[l[20]||(l[20]=i(((...l)=>e.handleEsc&&e.handleEsc(...l)),["esc"])),l[21]||(l[21]=i(((...l)=>e.selectPointer&&e.selectPointer(...l)),["enter"]))],onKeydown:[l[22]||(l[22]=i(o(((...l)=>e.handleBackspace&&e.handleBackspace(...l)),["prevent"]),["delete"])),l[23]||(l[23]=i(o(((...l)=>e.backwardPointer&&e.backwardPointer(...l)),["prevent"]),["up"])),l[24]||(l[24]=i(o(((...l)=>e.forwardPointer&&e.forwardPointer(...l)),["prevent"]),["down"]))]},[s(" Single label "),"single"==t.mode&&e.hasSelected&&!e.search&&e.internalValue?d(e.$slots,"singlelabel",{key:0,value:e.internalValue},(()=>[c("div",B,v(e.internalValue[t.label]),1)])):s("v-if",!0),s(" Multiple label "),"multiple"==t.mode&&e.hasSelected&&!e.search?d(e.$slots,"multiplelabel",{key:1,values:e.internalValue},(()=>[c("div",T,v(e.multipleLabelText),1)])):s("v-if",!0),s(" Search "),"tags"!==t.mode&&t.searchable&&!t.disabled?(u(),r("div",j,[p(c("input",{"onUpdate:modelValue":l[1]||(l[1]=l=>e.search=l),onFocus:l[2]||(l[2]=o(((...l)=>e.open&&e.open(...l)),["stop"])),onBlur:l[3]||(l[3]=o(((...l)=>e.close&&e.close(...l)),["stop"])),onKeyup:[l[4]||(l[4]=i(o(((...l)=>e.handleEsc&&e.handleEsc(...l)),["stop"]),["esc"])),l[5]||(l[5]=i(o(((...l)=>e.selectPointer&&e.selectPointer(...l)),["stop"]),["enter"]))],onKeydown:[l[6]||(l[6]=i(((...l)=>e.handleSearchBackspace&&e.handleSearchBackspace(...l)),["delete"])),l[7]||(l[7]=i(o(((...l)=>e.backwardPointer&&e.backwardPointer(...l)),["stop"]),["up"])),l[8]||(l[8]=i(o(((...l)=>e.forwardPointer&&e.forwardPointer(...l)),["stop"]),["down"]))],ref:"input"},null,544),[[f,e.search]])])):s("v-if",!0),s(" Tags (with search) "),"tags"==t.mode?(u(),r("div",A,[(u(!0),r(h,null,m(e.internalValue,((n,a,i)=>(u(),r("span",{key:i},[d(e.$slots,"tag",{option:n,remove:e.remove,disabled:t.disabled},(()=>[c("div",C,[b(v(n[t.label])+" ",1),t.disabled?s("v-if",!0):(u(),r("i",{key:0,onClick:l[9]||(l[9]=o((()=>{}),["prevent"])),onMousedown:o((l=>e.remove(n)),["prevent"])},null,40,["onMousedown"]))])]))])))),128)),t.searchable&&!t.disabled?(u(),r("div",{key:0,class:"multiselect-search",style:{width:e.tagsSearchWidth}},[p(c("input",{"onUpdate:modelValue":l[10]||(l[10]=l=>e.search=l),onFocus:l[11]||(l[11]=o(((...l)=>e.open&&e.open(...l)),["stop"])),onBlur:l[12]||(l[12]=o(((...l)=>e.close&&e.close(...l)),["stop"])),onKeyup:[l[13]||(l[13]=i(o(((...l)=>e.handleEsc&&e.handleEsc(...l)),["stop"]),["esc"])),l[14]||(l[14]=i(o(((...l)=>e.selectPointer&&e.selectPointer(...l)),["stop"]),["enter"]))],onKeydown:[l[15]||(l[15]=i(((...l)=>e.handleSearchBackspace&&e.handleSearchBackspace(...l)),["delete"])),l[16]||(l[16]=i(o(((...l)=>e.backwardPointer&&e.backwardPointer(...l)),["stop"]),["up"])),l[17]||(l[17]=i(o(((...l)=>e.forwardPointer&&e.forwardPointer(...l)),["stop"]),["down"]))],style:{width:e.tagsSearchWidth},ref:"input"},null,36),[[f,e.search]])],4)):s("v-if",!0)])):s("v-if",!0),s(" Placeholder "),p(c("div",{class:"multiselect-placeholder"},v(t.placeholder),513),[[y,t.placeholder&&!e.hasSelected&&!e.search]]),c(g,{name:"multiselect-loading"},{default:S((()=>[p(c("div",E,null,512),[[y,e.busy]])])),_:1})],40,["tabindex"]),s(" Options "),c(g,{name:"multiselect",onAfterLeave:e.clearSearch},{default:S((()=>[p(c("div",{class:"multiselect-options",style:{maxHeight:e.contentMaxHeight}},[d(e.$slots,"beforelist"),(u(!0),r(h,null,m(e.filteredOptions,((n,a,i)=>(u(),r("a",{href:"",class:["multiselect-option",{"is-pointed":e.isPointed(n),"is-selected":e.isSelected(n),"is-disabled":e.isDisabled(n)}],key:i,onMousedown:l[25]||(l[25]=o((()=>{}),["prevent"])),onMouseenter:l=>e.setPointer(n),onClick:o((l=>e.handleOptionClick(n)),["stop","prevent"])},[d(e.$slots,"option",{option:n,search:e.search},(()=>[c("span",null,v(n[t.label]),1)]))],42,["onMouseenter","onClick"])))),128)),p(c("span",null,[d(e.$slots,"nooptions",{},(()=>[c("div",M,v(t.noOptionsText),1)]))],512),[[y,e.noOptions]]),p(c("span",null,[d(e.$slots,"noresults",{},(()=>[c("div",$,v(t.noResultsText),1)]))],512),[[y,e.noResults]]),d(e.$slots,"afterlist")],4),[[y,e.isOpen]])])),_:3},8,["onAfterLeave"])],42,["id"])},V.__file="src/Multiselect.vue";export default V;

dist/multiselect.vue2.global.js

@@ -1,1 +0,1 @@
-var VueformMultiselect=function(e){"use strict";function t(e){return String(e).toLowerCase().trim()}function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e){return function(e){if(Array.isArray(e))return r(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(e,t)}(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 r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function u(l,r,u){var i,o=e.toRefs(l),c=o.options,s=o.mode,d=o.trackBy,v=o.limit,p=o.hideSelected,f=o.createTag,m=o.label,y=o.appendNewTag,h=o.multipleLabel,g=o.object,b=o.loading,k=o.delay,_=o.resolveOnLoad,w=o.minChars,O=o.filterResults,x=o.clearOnSearch,S=o.clearOnSelect,C=u.internalValue,P=u.externalValue,q=u.search,V=u.blurSearch,T=u.clearSearch,B=u.update,E=u.blurInput,A=e.ref([]),R=e.ref([]),D=e.ref(!1),N=e.computed((function(){var e,t=R.value||[];return e=t,"[object Object]"===Object.prototype.toString.call(e)&&(t=Object.keys(t).map((function(e){var n,l=t[e];return a(n={value:e},d.value,l),a(n,m.value,l),n}))),t=t.map((function(e,t){var l;return"object"===n(e)?e:(a(l={value:t},d.value,e),a(l,m.value,e),l)})),A.value.length&&(t=t.concat(A.value)),t})),j=e.computed((function(){var e=N.value;return L.value.length&&(e=L.value.concat(e)),q.value&&O.value&&(e=e.filter((function(e){return-1!==t(e[d.value]).indexOf(t(q.value))}))),p.value&&(e=e.filter((function(e){return!Z(e)}))),v.value>0&&(e=e.slice(0,v.value)),e})),I=e.computed((function(){switch(s.value){case"single":return!M.value;case"multiple":case"tags":return!M.value&&C.value.length>0}})),H=e.computed((function(){return void 0!==h&&void 0!==h.value?h.value(C.value):C.value&&C.value.length>1?"".concat(C.value.length," options selected"):"1 option selected"})),U=e.computed((function(){return!N.value.length})),$=e.computed((function(){return N.value.length>0&&0==j.value.length})),L=e.computed((function(){var e;return!1!==f.value&&q.value?-1!==Y(q.value)?[]:[(e={},a(e,m.value,q.value),a(e,d.value,q.value),a(e,"value",q.value),e)]:[]})),F=e.computed((function(){switch(s.value){case"single":return null;case"multiple":case"tags":return[]}})),M=e.computed((function(){return-1!==[null,void 0,!1].indexOf(C.value)})),W=e.computed((function(){return b.value||D.value})),X=function(e){switch("object"!==n(e)&&(e=Q(e)),s.value){case"single":B(e);break;case"multiple":case"tags":B((C.value||[]).concat(e))}r.emit("select",G(e))},z=function(e){switch("object"!==n(e)&&(e=Q(e)),s.value){case"single":J();break;case"tags":case"multiple":B(C.value.filter((function(t){return t.value!=e.value})))}r.emit("deselect",G(e))},G=function(e){return g.value?e:e.value},J=function(e){B(F.value)},K=function(e){switch(s.value){case"single":return!M.value&&C.value.value==e.value;case"tags":case"multiple":return!M.value&&-1!==C.value.map((function(e){return e.value})).indexOf(e.value)}},Q=function(e){return N.value[N.value.map((function(e){return e.value})).indexOf(e)]},Y=function(e){return N.value.map((function(e){return t(e[d.value])})).indexOf(t(e))},Z=function(e){return"tags"===s.value&&p.value&&K(e)},ee=function(e){A.value.push(e)};if("single"!==s.value&&-1===[null,void 0,!1].indexOf(P.value)&&!Array.isArray(P.value))throw new Error('v-model must be an array when using "'.concat(s.value,'" mode'));return c&&"function"==typeof c.value?_.value&&(D.value=!0,c.value(q.value).then((function(e){R.value=e,D.value=!1}))):R.value=c&&c.value?c.value:[],-1===[null,!1,void 0].indexOf(P.value)&&(C.value=(i=P.value,g.value?i:Array.isArray(i)?i.map((function(e){return Q(e)})):Q(i))),k.value>-1&&e.watch(q,(function(e){e.length<w.value||(x.value&&(R.value=[]),setTimeout((function(){e==q.value&&(D.value=!0,c.value(q.value).then((function(t){e==q.value&&(R.value=t),D.value=!1})))}),k.value))}),{flush:"sync"}),{filteredOptions:j,hasSelected:I,multipleLabelText:H,extendedOptions:N,noOptions:U,noResults:$,busy:W,select:X,deselect:z,remove:function(e){z(e)},clear:J,isSelected:K,getOption:Q,handleOptionClick:function(e){switch(s.value){case"single":if(K(e))return void z(e);J(),X(e),V(),E();break;case"multiple":if(K(e))return void z(e);X(e),S.value&&T();break;case"tags":if(K(e))return void z(e);void 0===Q(e.value)&&f.value&&(r.emit("tag",e.value),y.value&&ee(e),T()),S.value&&T(),X(e)}}}}function i(e,t,n,a,l,r,u,i,o,c){"boolean"!=typeof u&&(o=i,i=u,u=!1);var s,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,l&&(d.functional=!0)),a&&(d._scopeId=a),r?(s=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,o(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},d._ssrRegister=s):t&&(s=u?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,i(e))}),s)if(d.functional){var v=d.render;d.render=function(e,t){return s.call(t),v(e,t)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,s):[s]}return n}const o={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","update:modelValue"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1},id:{type:[String,Number],required:!1,default:"multiselect"},name:{type:[String,Number],required:!1,default:"multiselect"},disabled:{type:Boolean,required:!1,default:!1},label:{type:String,required:!1,default:"label"},trackBy:{type:String,required:!1,default:"label"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},maxHeight:{type:Number,required:!1,default:160},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:!1},appendNewTag:{type:Boolean,required:!1,default:!0},caret:{type:Boolean,required:!1,default:!0},loading:{type:Boolean,required:!1,default:!1},noOptionsText:{type:String,required:!1,default:"The list is empty"},noResultsText:{type:String,required:!1,default:"No results found"},multipleLabel:{type:Function,required:!1},object:{type:Boolean,required:!1,default:!1},delay:{type:Number,required:!1,default:-1},minChars:{type:Number,required:!1,default:0},resolveOnLoad:{type:Boolean,required:!1,default:!0},filterResults:{type:Boolean,required:!1,default:!0},clearOnSearch:{type:Boolean,required:!1,default:!1},clearOnSelect:{type:Boolean,required:!1,default:!0}},setup(t,n){const a=function(t,n){var a=e.toRefs(t),l=a.value,r=a.modelValue,u=a.mode;return{internalValue:e.ref("single"!==u.value?[]:null),externalValue:e.computed((function(){return void 0!==n.expose?r.value:l.value}))}}(t,n),r=function(t,n,a){var l=e.toRefs(t).object,r=a.internalValue,u=function(e){return l.value||-1!==[null,!1,void 0].indexOf(e)?e:Array.isArray(e)?e.map((function(e){return e.value})):e.value};return{update:function(e){r.value=e;var t=u(e);n.emit("change",t),n.emit("input",t),n.emit("update:modelValue",t)}}}(t,n,{internalValue:a.internalValue}),i=function(t,n,a){var l=e.toRefs(t),r=l.searchable,u=l.mode,i=a.internalValue,o=e.ref(null),c=e.ref(null),s=e.computed((function(){return o.value?"".concat(o.value.length,"ch"):"tags"===u.value&&-1===[null,void 0].indexOf(i.value)&&i.value.length?"1ch":"100%"}));return e.watch(o,(function(e){n.emit("search-change",e)})),{search:o,input:c,tagsSearchWidth:s,clearSearch:function(){o.value=""},blurSearch:function(){r.value&&c.value.blur()},handleSearchBackspace:function(e){""!==o.value&&e.stopPropagation()}}}(t,n,{internalValue:a.internalValue}),o=function(t,n,a){var l=e.toRefs(t),r=l.maxHeight,u=l.disabled,i=e.ref(!1),o=e.computed((function(){return"".concat(r.value,"px")}));return{isOpen:i,contentMaxHeight:o,open:function(){u.value||(i.value=!0,n.emit("open"))},close:function(){i.value=!1,n.emit("close")}}}(t,n),c=function(t,n,a){var l=e.toRefs(t),r=l.searchable,u=l.id;return{multiselect:e.ref(null),tabindex:e.computed((function(){return r.value?-1:0})),blurInput:function(){document.getElementById(u.value).querySelector(".multiselect-input").blur()}}}(t),s=u(t,n,{externalValue:a.externalValue,internalValue:a.internalValue,search:i.search,blurSearch:i.blurSearch,clearSearch:i.clearSearch,update:r.update,blurInput:c.blurInput}),d=function(t,n,a){var l=e.toRefs(t).id,r=a.filteredOptions,u=a.handleOptionClick,i=a.search,o=e.ref(null),c=function(e){o.value=e},s=function(){o.value=r.value[0]||null},d=function(){o.value=null},v=function(){var e=document.getElementById(l.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop<t.scrollTop&&(t.scrollTop=e.offsetTop)}};return e.watch(i,(function(e){s()})),{pointer:o,isPointed:function(e){return!!o.value&&o.value.value==e.value},setPointer:c,setPointerFirst:s,clearPointer:d,selectPointer:function(){o.value&&(u(o.value),d())},forwardPointer:function(t){if(null===o.value)c(r.value[0]);else{var n=r.value.map((function(e){return e.value})).indexOf(o.value.value)+1;r.value.length<=n&&(n=0),c(r.value[n])}e.nextTick((function(){v()}))},backwardPointer:function(){if(null===o.value)c(r.value[r.value.length-1]);else{var t=r.value.map((function(e){return e.value})).indexOf(o.value.value)-1;t<0&&(t=r.value.length-1),c(r.value[t])}e.nextTick((function(){v()}))}}}(t,0,{filteredOptions:s.filteredOptions,handleOptionClick:s.handleOptionClick,search:i.search}),v=(p={internalValue:a.internalValue,update:r.update,close:o.close,clearPointer:d.clearPointer},f=p.internalValue,m=p.update,y=p.close,h=p.clearPointer,{handleBackspace:function(e){m(l(f.value).slice(0,-1))},handleEsc:function(e){y(),h(),e.target.blur()}});var p,f,m,y,h;return{...a,...r,...i,...o,...c,...s,...d,...v}}};var c=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"multiselect",staticClass:"multiselect",class:["is-"+e.mode,{"is-open":e.isOpen,"is-searchable":e.searchable,"is-disabled":e.disabled,"no-caret":!e.caret}],attrs:{id:e.id},on:{keydown:function(t){if(!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;t.preventDefault()}}},[n("div",{staticClass:"multiselect-input",attrs:{tabindex:e.tabindex},on:{focus:e.open,blur:e.close,keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:e.handleEsc(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.selectPointer(t)}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:(t.preventDefault(),e.handleBackspace(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.preventDefault(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.preventDefault(),e.forwardPointer(t))}]}},["single"==e.mode&&e.hasSelected&&!e.search&&e.internalValue?[e._t("singlelabel",[n("div",{staticClass:"multiselect-single-label"},[e._v("\n          "+e._s(e.internalValue[e.label])+"\n        ")])],{value:e.internalValue})]:e._e(),e._v(" "),"multiple"==e.mode&&e.hasSelected&&!e.search?[e._t("multiplelabel",[n("div",{staticClass:"multiselect-multiple-label"},[e._v("\n          "+e._s(e.multipleLabelText)+"\n        ")])],{values:e.internalValue})]:e._e(),e._v(" "),"tags"!==e.mode&&e.searchable&&!e.disabled?[n("div",{staticClass:"multiselect-search"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:e.handleSearchBackspace(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})])]:e._e(),e._v(" "),"tags"==e.mode?[n("div",{staticClass:"multiselect-tags"},[e._l(e.internalValue,(function(t,a,l){return n("span",{key:l},[e._t("tag",[n("div",{staticClass:"multiselect-tag"},[e._v("\n              "+e._s(t[e.label])+"\n              "),e.disabled?e._e():n("i",{on:{click:function(e){e.preventDefault()},mousedown:function(n){return n.preventDefault(),e.remove(t)}}})])],{option:t,remove:e.remove,disabled:e.disabled})],2)})),e._v(" "),e.searchable&&!e.disabled?n("div",{staticClass:"multiselect-search",style:{width:e.tagsSearchWidth}},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",style:{width:e.tagsSearchWidth},domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:e.handleSearchBackspace(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})]):e._e()],2)]:e._e(),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:e.placeholder&&!e.hasSelected&&!e.search,expression:"placeholder && !hasSelected && !search"}],staticClass:"multiselect-placeholder"},[e._v("\n      "+e._s(e.placeholder)+"\n    ")]),e._v(" "),n("transition",{attrs:{name:"multiselect-loading"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.busy,expression:"busy"}],staticClass:"multiselect-spinner"})])],2),e._v(" "),n("transition",{attrs:{name:"multiselect"},on:{"after-leave":e.clearSearch}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"multiselect-options",style:{maxHeight:e.contentMaxHeight}},[e._t("beforelist"),e._v(" "),e._l(e.filteredOptions,(function(t,a,l){return n("a",{key:l,staticClass:"multiselect-option",class:{"is-pointed":e.isPointed(t),"is-selected":e.isSelected(t)},attrs:{href:""},on:{mousedown:function(e){e.preventDefault()},mouseenter:function(n){return e.setPointer(t)},click:function(n){return n.stopPropagation(),n.preventDefault(),e.handleOptionClick(t)}}},[e._t("option",[n("span",[e._v(e._s(t[e.label]))])],{option:t,search:e.search})],2)})),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noOptions,expression:"noOptions"}]},[e._t("nooptions",[n("div",{staticClass:"multiselect-no-options"},[e._v(e._s(e.noOptionsText))])])],2),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noResults,expression:"noResults"}]},[e._t("noresults",[n("div",{staticClass:"multiselect-no-results"},[e._v(e._s(e.noResultsText))])])],2),e._v(" "),e._t("afterlist")],2)])],1)};c._withStripped=!0;return i({render:c,staticRenderFns:[]},undefined,o,undefined,false,undefined,!1,void 0,void 0,void 0)}(VueCompositionAPI);
+var VueformMultiselect=function(e){"use strict";function t(e){return String(e).toLowerCase().trim()}function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e){return function(e){if(Array.isArray(e))return u(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(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 u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function r(l,u,r){var i,o=e.toRefs(l),c=o.options,s=o.mode,d=o.trackBy,v=o.limit,p=o.hideSelected,f=o.createTag,m=o.label,y=o.appendNewTag,h=o.multipleLabel,g=o.object,b=o.loading,k=o.delay,_=o.resolveOnLoad,w=o.minChars,O=o.filterResults,x=o.clearOnSearch,S=o.clearOnSelect,C=o.valueProp,P=r.internalValue,q=r.externalValue,V=r.search,T=r.blurSearch,B=r.clearSearch,E=r.update,D=r.blurInput,A=e.ref([]),R=e.ref([]),N=e.ref(!1),j=e.computed((function(){var e,t=R.value||[];return e=t,"[object Object]"===Object.prototype.toString.call(e)&&(t=Object.keys(t).map((function(e){var n,l=t[e];return a(n={},C.value,e),a(n,d.value,l),a(n,m.value,l),n}))),t=t.map((function(e,t){var l;return"object"===n(e)?e:(a(l={},C.value,t),a(l,d.value,e),a(l,m.value,e),l)})),A.value.length&&(t=t.concat(A.value)),t})),I=e.computed((function(){var e=j.value;return F.value.length&&(e=F.value.concat(e)),V.value&&O.value&&(e=e.filter((function(e){return-1!==t(e[d.value]).indexOf(t(V.value))}))),p.value&&(e=e.filter((function(e){return!te(e)}))),v.value>0&&(e=e.slice(0,v.value)),e})),H=e.computed((function(){switch(s.value){case"single":return!W.value;case"multiple":case"tags":return!W.value&&P.value.length>0}})),U=e.computed((function(){return void 0!==h&&void 0!==h.value?h.value(P.value):P.value&&P.value.length>1?"".concat(P.value.length," options selected"):"1 option selected"})),$=e.computed((function(){return!j.value.length})),L=e.computed((function(){return j.value.length>0&&0==I.value.length})),F=e.computed((function(){var e;return!1!==f.value&&V.value?-1!==ee(V.value)?[]:[(e={},a(e,C.value,V.value),a(e,m.value,V.value),a(e,d.value,V.value),e)]:[]})),M=e.computed((function(){switch(s.value){case"single":return null;case"multiple":case"tags":return[]}})),W=e.computed((function(){return-1!==[null,void 0,!1].indexOf(P.value)})),X=e.computed((function(){return b.value||N.value})),z=function(e){switch("object"!==n(e)&&(e=Z(e)),s.value){case"single":E(e);break;case"multiple":case"tags":E((P.value||[]).concat(e))}u.emit("select",J(e))},G=function(e){switch("object"!==n(e)&&(e=Z(e)),s.value){case"single":K();break;case"tags":case"multiple":E(P.value.filter((function(t){return t[C.value]!=e[C.value]})))}u.emit("deselect",J(e))},J=function(e){return g.value?e:e[C.value]},K=function(){E(M.value)},Q=function(e){switch(s.value){case"single":return!W.value&&P.value[C.value]==e[C.value];case"tags":case"multiple":return!W.value&&-1!==P.value.map((function(e){return e[C.value]})).indexOf(e[C.value])}},Y=function(e){return!0===e.disabled},Z=function(e){return j.value[j.value.map((function(e){return e[C.value]})).indexOf(e)]},ee=function(e){return j.value.map((function(e){return t(e[d.value])})).indexOf(t(e))},te=function(e){return"tags"===s.value&&p.value&&Q(e)},ne=function(e){A.value.push(e)};if("single"!==s.value&&-1===[null,void 0,!1].indexOf(q.value)&&!Array.isArray(q.value))throw new Error('v-model must be an array when using "'.concat(s.value,'" mode'));return c&&"function"==typeof c.value?_.value&&(N.value=!0,c.value(V.value).then((function(e){R.value=e,N.value=!1}))):R.value=c&&c.value?c.value:[],-1===[null,!1,void 0].indexOf(q.value)&&(P.value=(i=q.value,g.value?i:Array.isArray(i)?i.map((function(e){return Z(e)})):Z(i))),k.value>-1&&e.watch(V,(function(e){e.length<w.value||(x.value&&(R.value=[]),setTimeout((function(){e==V.value&&(N.value=!0,c.value(V.value).then((function(t){e==V.value&&(R.value=t),N.value=!1})))}),k.value))}),{flush:"sync"}),{filteredOptions:I,hasSelected:H,multipleLabelText:U,extendedOptions:j,noOptions:$,noResults:L,busy:X,select:z,deselect:G,remove:function(e){G(e)},clear:K,isSelected:Q,isDisabled:Y,getOption:Z,handleOptionClick:function(e){if(!Y(e))switch(s.value){case"single":if(Q(e))return void G(e);K(),z(e),T(),D();break;case"multiple":if(Q(e))return void G(e);z(e),S.value&&B();break;case"tags":if(Q(e))return void G(e);void 0===Z(e[C.value])&&f.value&&(u.emit("tag",e[C.value]),y.value&&ne(e),B()),S.value&&B(),z(e)}}}}function i(e,t,n,a,l,u,r,i,o,c){"boolean"!=typeof r&&(o=i,i=r,r=!1);var s,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,l&&(d.functional=!0)),a&&(d._scopeId=a),u?(s=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,o(e)),e&&e._registeredComponents&&e._registeredComponents.add(u)},d._ssrRegister=s):t&&(s=r?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,i(e))}),s)if(d.functional){var v=d.render;d.render=function(e,t){return s.call(t),v(e,t)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,s):[s]}return n}const o={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","update:modelValue","change"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1},id:{type:[String,Number],required:!1,default:"multiselect"},name:{type:[String,Number],required:!1,default:"multiselect"},disabled:{type:Boolean,required:!1,default:!1},label:{type:String,required:!1,default:"label"},trackBy:{type:String,required:!1,default:"label"},valueProp:{type:String,required:!1,default:"value"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},maxHeight:{type:Number,required:!1,default:160},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:!1},appendNewTag:{type:Boolean,required:!1,default:!0},caret:{type:Boolean,required:!1,default:!0},loading:{type:Boolean,required:!1,default:!1},noOptionsText:{type:String,required:!1,default:"The list is empty"},noResultsText:{type:String,required:!1,default:"No results found"},multipleLabel:{type:Function,required:!1},object:{type:Boolean,required:!1,default:!1},delay:{type:Number,required:!1,default:-1},minChars:{type:Number,required:!1,default:0},resolveOnLoad:{type:Boolean,required:!1,default:!0},filterResults:{type:Boolean,required:!1,default:!0},clearOnSearch:{type:Boolean,required:!1,default:!1},clearOnSelect:{type:Boolean,required:!1,default:!0}},setup(t,n){const a=function(t,n){var a=e.toRefs(t),l=a.value,u=a.modelValue,r=a.mode;return{internalValue:e.ref("single"!==r.value?[]:null),externalValue:e.computed((function(){return void 0!==n.expose?u.value:l.value}))}}(t,n),u=function(t,n,a){var l=e.toRefs(t),u=l.object,r=l.valueProp,i=a.internalValue,o=function(e){return u.value||-1!==[null,!1,void 0].indexOf(e)?e:Array.isArray(e)?e.map((function(e){return e[r.value]})):e[r.value]};return{update:function(e){i.value=e;var t=o(e);n.emit("change",t),n.emit("input",t),n.emit("update:modelValue",t)}}}(t,n,{internalValue:a.internalValue}),i=function(t,n,a){var l=e.toRefs(t),u=l.searchable,r=l.mode,i=a.internalValue,o=e.ref(null),c=e.ref(null),s=e.computed((function(){return o.value?"".concat(o.value.length,"ch"):"tags"===r.value&&-1===[null,void 0].indexOf(i.value)&&i.value.length?"1ch":"100%"}));return e.watch(o,(function(e){n.emit("search-change",e)})),{search:o,input:c,tagsSearchWidth:s,clearSearch:function(){o.value=""},blurSearch:function(){u.value&&c.value.blur()},handleSearchBackspace:function(e){""!==o.value&&e.stopPropagation()}}}(t,n,{internalValue:a.internalValue}),o=function(t,n,a){var l=e.toRefs(t),u=l.maxHeight,r=l.disabled,i=e.ref(!1),o=e.computed((function(){return"".concat(u.value,"px")}));return{isOpen:i,contentMaxHeight:o,open:function(){r.value||(i.value=!0,n.emit("open"))},close:function(){i.value=!1,n.emit("close")}}}(t,n),c=function(t,n,a){var l=e.toRefs(t),u=l.searchable,r=l.id;return{multiselect:e.ref(null),tabindex:e.computed((function(){return u.value?-1:0})),blurInput:function(){document.getElementById(r.value).querySelector(".multiselect-input").blur()}}}(t),s=r(t,n,{externalValue:a.externalValue,internalValue:a.internalValue,search:i.search,blurSearch:i.blurSearch,clearSearch:i.clearSearch,update:u.update,blurInput:c.blurInput}),d=function(t,n,a){var l=e.toRefs(t),u=l.id,r=l.valueProp,i=a.filteredOptions,o=a.handleOptionClick,c=a.search,s=e.ref(null),d=e.computed((function(){return i.value.filter((function(e){return!0!==e.disabled}))})),v=function(e){s.value=e},p=function(){s.value=d.value[0]||null},f=function(){s.value=null},m=function(){var e=document.getElementById(u.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop<t.scrollTop&&(t.scrollTop=e.offsetTop)}};return e.watch(c,(function(e){p()})),{pointer:s,isPointed:function(e){return!!s.value&&s.value[r.value]==e[r.value]},setPointer:v,setPointerFirst:p,clearPointer:f,selectPointer:function(){s.value&&!0!==s.value.disabled?(o(s.value),f()):f()},forwardPointer:function(){if(null===s.value)v(d.value[0]||null);else{var t=d.value.map((function(e){return e[r.value]})).indexOf(s.value[r.value])+1;d.value.length<=t&&(t=0),v(d.value[t]||null)}e.nextTick((function(){m()}))},backwardPointer:function(){if(null===s.value)v(d.value[d.value.length-1]||null);else{var t=d.value.map((function(e){return e[r.value]})).indexOf(s.value[r.value])-1;t<0&&(t=d.value.length-1),v(d.value[t]||null)}e.nextTick((function(){m()}))}}}(t,0,{filteredOptions:s.filteredOptions,handleOptionClick:s.handleOptionClick,search:i.search}),v=(p={internalValue:a.internalValue,update:u.update,close:o.close,clearPointer:d.clearPointer},f=p.internalValue,m=p.update,y=p.close,h=p.clearPointer,{handleBackspace:function(e){m(l(f.value).slice(0,-1))},handleEsc:function(e){y(),h(),e.target.blur()}});var p,f,m,y,h;return{...a,...u,...i,...o,...c,...s,...d,...v}}};var c=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"multiselect",staticClass:"multiselect",class:["is-"+e.mode,{"is-open":e.isOpen,"is-searchable":e.searchable,"is-disabled":e.disabled,"no-caret":!e.caret}],attrs:{id:e.id},on:{keydown:function(t){if(!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;t.preventDefault()}}},[n("div",{staticClass:"multiselect-input",attrs:{tabindex:e.tabindex},on:{focus:e.open,blur:e.close,keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:e.handleEsc(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.selectPointer(t)}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:(t.preventDefault(),e.handleBackspace(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.preventDefault(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.preventDefault(),e.forwardPointer(t))}]}},["single"==e.mode&&e.hasSelected&&!e.search&&e.internalValue?[e._t("singlelabel",[n("div",{staticClass:"multiselect-single-label"},[e._v("\n          "+e._s(e.internalValue[e.label])+"\n        ")])],{value:e.internalValue})]:e._e(),e._v(" "),"multiple"==e.mode&&e.hasSelected&&!e.search?[e._t("multiplelabel",[n("div",{staticClass:"multiselect-multiple-label"},[e._v("\n          "+e._s(e.multipleLabelText)+"\n        ")])],{values:e.internalValue})]:e._e(),e._v(" "),"tags"!==e.mode&&e.searchable&&!e.disabled?[n("div",{staticClass:"multiselect-search"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:e.handleSearchBackspace(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})])]:e._e(),e._v(" "),"tags"==e.mode?[n("div",{staticClass:"multiselect-tags"},[e._l(e.internalValue,(function(t,a,l){return n("span",{key:l},[e._t("tag",[n("div",{staticClass:"multiselect-tag"},[e._v("\n              "+e._s(t[e.label])+"\n              "),e.disabled?e._e():n("i",{on:{click:function(e){e.preventDefault()},mousedown:function(n){return n.preventDefault(),e.remove(t)}}})])],{option:t,remove:e.remove,disabled:e.disabled})],2)})),e._v(" "),e.searchable&&!e.disabled?n("div",{staticClass:"multiselect-search",style:{width:e.tagsSearchWidth}},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",style:{width:e.tagsSearchWidth},domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:e.handleSearchBackspace(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})]):e._e()],2)]:e._e(),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:e.placeholder&&!e.hasSelected&&!e.search,expression:"placeholder && !hasSelected && !search"}],staticClass:"multiselect-placeholder"},[e._v("\n      "+e._s(e.placeholder)+"\n    ")]),e._v(" "),n("transition",{attrs:{name:"multiselect-loading"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.busy,expression:"busy"}],staticClass:"multiselect-spinner"})])],2),e._v(" "),n("transition",{attrs:{name:"multiselect"},on:{"after-leave":e.clearSearch}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"multiselect-options",style:{maxHeight:e.contentMaxHeight}},[e._t("beforelist"),e._v(" "),e._l(e.filteredOptions,(function(t,a,l){return n("a",{key:l,staticClass:"multiselect-option",class:{"is-pointed":e.isPointed(t),"is-selected":e.isSelected(t),"is-disabled":e.isDisabled(t)},attrs:{href:""},on:{mousedown:function(e){e.preventDefault()},mouseenter:function(n){return e.setPointer(t)},click:function(n){return n.stopPropagation(),n.preventDefault(),e.handleOptionClick(t)}}},[e._t("option",[n("span",[e._v(e._s(t[e.label]))])],{option:t,search:e.search})],2)})),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noOptions,expression:"noOptions"}]},[e._t("nooptions",[n("div",{staticClass:"multiselect-no-options"},[e._v(e._s(e.noOptionsText))])])],2),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noResults,expression:"noResults"}]},[e._t("noresults",[n("div",{staticClass:"multiselect-no-results"},[e._v(e._s(e.noResultsText))])])],2),e._v(" "),e._t("afterlist")],2)])],1)};c._withStripped=!0;return i({render:c,staticRenderFns:[]},undefined,o,undefined,false,undefined,!1,void 0,void 0,void 0)}(VueCompositionAPI);

dist/multiselect.vue2.js

@@ -1,1 +0,1 @@
-import{toRefs as e,ref as t,computed as n,watch as a,nextTick as l}from"@vue/composition-api";function r(e){return String(e).toLowerCase().trim()}function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(l,o,s){var c,d=e(l),v=d.options,p=d.mode,f=d.trackBy,y=d.limit,h=d.hideSelected,m=d.createTag,g=d.label,b=d.appendNewTag,k=d.multipleLabel,_=d.object,w=d.loading,O=d.delay,x=d.resolveOnLoad,S=d.minChars,C=d.filterResults,P=d.clearOnSearch,q=d.clearOnSelect,V=s.internalValue,T=s.externalValue,B=s.search,E=s.blurSearch,A=s.clearSearch,D=s.update,N=s.blurInput,j=t([]),R=t([]),I=t(!1),H=n((function(){var e,t=R.value||[];return e=t,"[object Object]"===Object.prototype.toString.call(e)&&(t=Object.keys(t).map((function(e){var n,a=t[e];return i(n={value:e},f.value,a),i(n,g.value,a),n}))),t=t.map((function(e,t){var n;return"object"===u(e)?e:(i(n={value:t},f.value,e),i(n,g.value,e),n)})),j.value.length&&(t=t.concat(j.value)),t})),U=n((function(){var e=H.value;return W.value.length&&(e=W.value.concat(e)),B.value&&C.value&&(e=e.filter((function(e){return-1!==r(e[f.value]).indexOf(r(B.value))}))),h.value&&(e=e.filter((function(e){return!ne(e)}))),y.value>0&&(e=e.slice(0,y.value)),e})),$=n((function(){switch(p.value){case"single":return!z.value;case"multiple":case"tags":return!z.value&&V.value.length>0}})),L=n((function(){return void 0!==k&&void 0!==k.value?k.value(V.value):V.value&&V.value.length>1?"".concat(V.value.length," options selected"):"1 option selected"})),F=n((function(){return!H.value.length})),M=n((function(){return H.value.length>0&&0==U.value.length})),W=n((function(){var e;return!1!==m.value&&B.value?-1!==te(B.value)?[]:[(e={},i(e,g.value,B.value),i(e,f.value,B.value),i(e,"value",B.value),e)]:[]})),X=n((function(){switch(p.value){case"single":return null;case"multiple":case"tags":return[]}})),z=n((function(){return-1!==[null,void 0,!1].indexOf(V.value)})),G=n((function(){return w.value||I.value})),J=function(e){switch("object"!==u(e)&&(e=ee(e)),p.value){case"single":D(e);break;case"multiple":case"tags":D((V.value||[]).concat(e))}o.emit("select",Q(e))},K=function(e){switch("object"!==u(e)&&(e=ee(e)),p.value){case"single":Y();break;case"tags":case"multiple":D(V.value.filter((function(t){return t.value!=e.value})))}o.emit("deselect",Q(e))},Q=function(e){return _.value?e:e.value},Y=function(e){D(X.value)},Z=function(e){switch(p.value){case"single":return!z.value&&V.value.value==e.value;case"tags":case"multiple":return!z.value&&-1!==V.value.map((function(e){return e.value})).indexOf(e.value)}},ee=function(e){return H.value[H.value.map((function(e){return e.value})).indexOf(e)]},te=function(e){return H.value.map((function(e){return r(e[f.value])})).indexOf(r(e))},ne=function(e){return"tags"===p.value&&h.value&&Z(e)},ae=function(e){j.value.push(e)};if("single"!==p.value&&-1===[null,void 0,!1].indexOf(T.value)&&!Array.isArray(T.value))throw new Error('v-model must be an array when using "'.concat(p.value,'" mode'));return v&&"function"==typeof v.value?x.value&&(I.value=!0,v.value(B.value).then((function(e){R.value=e,I.value=!1}))):R.value=v&&v.value?v.value:[],-1===[null,!1,void 0].indexOf(T.value)&&(V.value=(c=T.value,_.value?c:Array.isArray(c)?c.map((function(e){return ee(e)})):ee(c))),O.value>-1&&a(B,(function(e){e.length<S.value||(P.value&&(R.value=[]),setTimeout((function(){e==B.value&&(I.value=!0,v.value(B.value).then((function(t){e==B.value&&(R.value=t),I.value=!1})))}),O.value))}),{flush:"sync"}),{filteredOptions:U,hasSelected:$,multipleLabelText:L,extendedOptions:H,noOptions:F,noResults:M,busy:G,select:J,deselect:K,remove:function(e){K(e)},clear:Y,isSelected:Z,getOption:ee,handleOptionClick:function(e){switch(p.value){case"single":if(Z(e))return void K(e);Y(),J(e),E(),N();break;case"multiple":if(Z(e))return void K(e);J(e),q.value&&A();break;case"tags":if(Z(e))return void K(e);void 0===ee(e.value)&&m.value&&(o.emit("tag",e.value),b.value&&ae(e),A()),q.value&&A(),J(e)}}}}function s(e){return function(e){if(Array.isArray(e))return c(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return c(e,t)}(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 c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function d(e,t,n,a,l,r,u,i,o,s){"boolean"!=typeof u&&(o=i,i=u,u=!1);var c,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,l&&(d.functional=!0)),a&&(d._scopeId=a),r?(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,o(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},d._ssrRegister=c):t&&(c=u?function(e){t.call(this,s(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,i(e))}),c)if(d.functional){var v=d.render;d.render=function(e,t){return c.call(t),v(e,t)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,c):[c]}return n}const v={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","update:modelValue"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1},id:{type:[String,Number],required:!1,default:"multiselect"},name:{type:[String,Number],required:!1,default:"multiselect"},disabled:{type:Boolean,required:!1,default:!1},label:{type:String,required:!1,default:"label"},trackBy:{type:String,required:!1,default:"label"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},maxHeight:{type:Number,required:!1,default:160},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:!1},appendNewTag:{type:Boolean,required:!1,default:!0},caret:{type:Boolean,required:!1,default:!0},loading:{type:Boolean,required:!1,default:!1},noOptionsText:{type:String,required:!1,default:"The list is empty"},noResultsText:{type:String,required:!1,default:"No results found"},multipleLabel:{type:Function,required:!1},object:{type:Boolean,required:!1,default:!1},delay:{type:Number,required:!1,default:-1},minChars:{type:Number,required:!1,default:0},resolveOnLoad:{type:Boolean,required:!1,default:!0},filterResults:{type:Boolean,required:!1,default:!0},clearOnSearch:{type:Boolean,required:!1,default:!1},clearOnSelect:{type:Boolean,required:!1,default:!0}},setup(r,u){const i=function(a,l){var r=e(a),u=r.value,i=r.modelValue,o=r.mode;return{internalValue:t("single"!==o.value?[]:null),externalValue:n((function(){return void 0!==l.expose?i.value:u.value}))}}(r,u),c=function(t,n,a){var l=e(t).object,r=a.internalValue,u=function(e){return l.value||-1!==[null,!1,void 0].indexOf(e)?e:Array.isArray(e)?e.map((function(e){return e.value})):e.value};return{update:function(e){r.value=e;var t=u(e);n.emit("change",t),n.emit("input",t),n.emit("update:modelValue",t)}}}(r,u,{internalValue:i.internalValue}),d=function(l,r,u){var i=e(l),o=i.searchable,s=i.mode,c=u.internalValue,d=t(null),v=t(null),p=n((function(){return d.value?"".concat(d.value.length,"ch"):"tags"===s.value&&-1===[null,void 0].indexOf(c.value)&&c.value.length?"1ch":"100%"}));return a(d,(function(e){r.emit("search-change",e)})),{search:d,input:v,tagsSearchWidth:p,clearSearch:function(){d.value=""},blurSearch:function(){o.value&&v.value.blur()},handleSearchBackspace:function(e){""!==d.value&&e.stopPropagation()}}}(r,u,{internalValue:i.internalValue}),v=function(a,l,r){var u=e(a),i=u.maxHeight,o=u.disabled,s=t(!1),c=n((function(){return"".concat(i.value,"px")}));return{isOpen:s,contentMaxHeight:c,open:function(){o.value||(s.value=!0,l.emit("open"))},close:function(){s.value=!1,l.emit("close")}}}(r,u),p=function(a,l,r){var u=e(a),i=u.searchable,o=u.id;return{multiselect:t(null),tabindex:n((function(){return i.value?-1:0})),blurInput:function(){document.getElementById(o.value).querySelector(".multiselect-input").blur()}}}(r),f=o(r,u,{externalValue:i.externalValue,internalValue:i.internalValue,search:d.search,blurSearch:d.blurSearch,clearSearch:d.clearSearch,update:c.update,blurInput:p.blurInput}),y=function(n,r,u){var i=e(n).id,o=u.filteredOptions,s=u.handleOptionClick,c=u.search,d=t(null),v=function(e){d.value=e},p=function(){d.value=o.value[0]||null},f=function(){d.value=null},y=function(){var e=document.getElementById(i.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop<t.scrollTop&&(t.scrollTop=e.offsetTop)}};return a(c,(function(e){p()})),{pointer:d,isPointed:function(e){return!!d.value&&d.value.value==e.value},setPointer:v,setPointerFirst:p,clearPointer:f,selectPointer:function(){d.value&&(s(d.value),f())},forwardPointer:function(e){if(null===d.value)v(o.value[0]);else{var t=o.value.map((function(e){return e.value})).indexOf(d.value.value)+1;o.value.length<=t&&(t=0),v(o.value[t])}l((function(){y()}))},backwardPointer:function(){if(null===d.value)v(o.value[o.value.length-1]);else{var e=o.value.map((function(e){return e.value})).indexOf(d.value.value)-1;e<0&&(e=o.value.length-1),v(o.value[e])}l((function(){y()}))}}}(r,0,{filteredOptions:f.filteredOptions,handleOptionClick:f.handleOptionClick,search:d.search}),h=(m={internalValue:i.internalValue,update:c.update,close:v.close,clearPointer:y.clearPointer},g=m.internalValue,b=m.update,k=m.close,_=m.clearPointer,{handleBackspace:function(e){b(s(g.value).slice(0,-1))},handleEsc:function(e){k(),_(),e.target.blur()}});var m,g,b,k,_;return{...i,...c,...d,...v,...p,...f,...y,...h}}};var p=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"multiselect",staticClass:"multiselect",class:["is-"+e.mode,{"is-open":e.isOpen,"is-searchable":e.searchable,"is-disabled":e.disabled,"no-caret":!e.caret}],attrs:{id:e.id},on:{keydown:function(t){if(!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;t.preventDefault()}}},[n("div",{staticClass:"multiselect-input",attrs:{tabindex:e.tabindex},on:{focus:e.open,blur:e.close,keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:e.handleEsc(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.selectPointer(t)}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:(t.preventDefault(),e.handleBackspace(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.preventDefault(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.preventDefault(),e.forwardPointer(t))}]}},["single"==e.mode&&e.hasSelected&&!e.search&&e.internalValue?[e._t("singlelabel",[n("div",{staticClass:"multiselect-single-label"},[e._v("\n          "+e._s(e.internalValue[e.label])+"\n        ")])],{value:e.internalValue})]:e._e(),e._v(" "),"multiple"==e.mode&&e.hasSelected&&!e.search?[e._t("multiplelabel",[n("div",{staticClass:"multiselect-multiple-label"},[e._v("\n          "+e._s(e.multipleLabelText)+"\n        ")])],{values:e.internalValue})]:e._e(),e._v(" "),"tags"!==e.mode&&e.searchable&&!e.disabled?[n("div",{staticClass:"multiselect-search"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:e.handleSearchBackspace(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})])]:e._e(),e._v(" "),"tags"==e.mode?[n("div",{staticClass:"multiselect-tags"},[e._l(e.internalValue,(function(t,a,l){return n("span",{key:l},[e._t("tag",[n("div",{staticClass:"multiselect-tag"},[e._v("\n              "+e._s(t[e.label])+"\n              "),e.disabled?e._e():n("i",{on:{click:function(e){e.preventDefault()},mousedown:function(n){return n.preventDefault(),e.remove(t)}}})])],{option:t,remove:e.remove,disabled:e.disabled})],2)})),e._v(" "),e.searchable&&!e.disabled?n("div",{staticClass:"multiselect-search",style:{width:e.tagsSearchWidth}},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",style:{width:e.tagsSearchWidth},domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:e.handleSearchBackspace(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})]):e._e()],2)]:e._e(),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:e.placeholder&&!e.hasSelected&&!e.search,expression:"placeholder && !hasSelected && !search"}],staticClass:"multiselect-placeholder"},[e._v("\n      "+e._s(e.placeholder)+"\n    ")]),e._v(" "),n("transition",{attrs:{name:"multiselect-loading"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.busy,expression:"busy"}],staticClass:"multiselect-spinner"})])],2),e._v(" "),n("transition",{attrs:{name:"multiselect"},on:{"after-leave":e.clearSearch}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"multiselect-options",style:{maxHeight:e.contentMaxHeight}},[e._t("beforelist"),e._v(" "),e._l(e.filteredOptions,(function(t,a,l){return n("a",{key:l,staticClass:"multiselect-option",class:{"is-pointed":e.isPointed(t),"is-selected":e.isSelected(t)},attrs:{href:""},on:{mousedown:function(e){e.preventDefault()},mouseenter:function(n){return e.setPointer(t)},click:function(n){return n.stopPropagation(),n.preventDefault(),e.handleOptionClick(t)}}},[e._t("option",[n("span",[e._v(e._s(t[e.label]))])],{option:t,search:e.search})],2)})),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noOptions,expression:"noOptions"}]},[e._t("nooptions",[n("div",{staticClass:"multiselect-no-options"},[e._v(e._s(e.noOptionsText))])])],2),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noResults,expression:"noResults"}]},[e._t("noresults",[n("div",{staticClass:"multiselect-no-results"},[e._v(e._s(e.noResultsText))])])],2),e._v(" "),e._t("afterlist")],2)])],1)};p._withStripped=!0;const f=d({render:p,staticRenderFns:[]},undefined,v,undefined,false,undefined,!1,void 0,void 0,void 0);export default f;
+import{toRefs as e,ref as t,computed as n,watch as l,nextTick as a}from"@vue/composition-api";function r(e){return String(e).toLowerCase().trim()}function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(a,o,s){var c,d=e(a),v=d.options,p=d.mode,f=d.trackBy,y=d.limit,h=d.hideSelected,m=d.createTag,g=d.label,b=d.appendNewTag,k=d.multipleLabel,_=d.object,w=d.loading,O=d.delay,x=d.resolveOnLoad,S=d.minChars,C=d.filterResults,P=d.clearOnSearch,q=d.clearOnSelect,V=d.valueProp,T=s.internalValue,B=s.externalValue,E=s.search,D=s.blurSearch,A=s.clearSearch,N=s.update,j=s.blurInput,R=t([]),I=t([]),H=t(!1),U=n((function(){var e,t=I.value||[];return e=t,"[object Object]"===Object.prototype.toString.call(e)&&(t=Object.keys(t).map((function(e){var n,l=t[e];return i(n={},V.value,e),i(n,f.value,l),i(n,g.value,l),n}))),t=t.map((function(e,t){var n;return"object"===u(e)?e:(i(n={},V.value,t),i(n,f.value,e),i(n,g.value,e),n)})),R.value.length&&(t=t.concat(R.value)),t})),$=n((function(){var e=U.value;return X.value.length&&(e=X.value.concat(e)),E.value&&C.value&&(e=e.filter((function(e){return-1!==r(e[f.value]).indexOf(r(E.value))}))),h.value&&(e=e.filter((function(e){return!ae(e)}))),y.value>0&&(e=e.slice(0,y.value)),e})),L=n((function(){switch(p.value){case"single":return!G.value;case"multiple":case"tags":return!G.value&&T.value.length>0}})),F=n((function(){return void 0!==k&&void 0!==k.value?k.value(T.value):T.value&&T.value.length>1?"".concat(T.value.length," options selected"):"1 option selected"})),M=n((function(){return!U.value.length})),W=n((function(){return U.value.length>0&&0==$.value.length})),X=n((function(){var e;return!1!==m.value&&E.value?-1!==le(E.value)?[]:[(e={},i(e,V.value,E.value),i(e,g.value,E.value),i(e,f.value,E.value),e)]:[]})),z=n((function(){switch(p.value){case"single":return null;case"multiple":case"tags":return[]}})),G=n((function(){return-1!==[null,void 0,!1].indexOf(T.value)})),J=n((function(){return w.value||H.value})),K=function(e){switch("object"!==u(e)&&(e=ne(e)),p.value){case"single":N(e);break;case"multiple":case"tags":N((T.value||[]).concat(e))}o.emit("select",Y(e))},Q=function(e){switch("object"!==u(e)&&(e=ne(e)),p.value){case"single":Z();break;case"tags":case"multiple":N(T.value.filter((function(t){return t[V.value]!=e[V.value]})))}o.emit("deselect",Y(e))},Y=function(e){return _.value?e:e[V.value]},Z=function(){N(z.value)},ee=function(e){switch(p.value){case"single":return!G.value&&T.value[V.value]==e[V.value];case"tags":case"multiple":return!G.value&&-1!==T.value.map((function(e){return e[V.value]})).indexOf(e[V.value])}},te=function(e){return!0===e.disabled},ne=function(e){return U.value[U.value.map((function(e){return e[V.value]})).indexOf(e)]},le=function(e){return U.value.map((function(e){return r(e[f.value])})).indexOf(r(e))},ae=function(e){return"tags"===p.value&&h.value&&ee(e)},re=function(e){R.value.push(e)};if("single"!==p.value&&-1===[null,void 0,!1].indexOf(B.value)&&!Array.isArray(B.value))throw new Error('v-model must be an array when using "'.concat(p.value,'" mode'));return v&&"function"==typeof v.value?x.value&&(H.value=!0,v.value(E.value).then((function(e){I.value=e,H.value=!1}))):I.value=v&&v.value?v.value:[],-1===[null,!1,void 0].indexOf(B.value)&&(T.value=(c=B.value,_.value?c:Array.isArray(c)?c.map((function(e){return ne(e)})):ne(c))),O.value>-1&&l(E,(function(e){e.length<S.value||(P.value&&(I.value=[]),setTimeout((function(){e==E.value&&(H.value=!0,v.value(E.value).then((function(t){e==E.value&&(I.value=t),H.value=!1})))}),O.value))}),{flush:"sync"}),{filteredOptions:$,hasSelected:L,multipleLabelText:F,extendedOptions:U,noOptions:M,noResults:W,busy:J,select:K,deselect:Q,remove:function(e){Q(e)},clear:Z,isSelected:ee,isDisabled:te,getOption:ne,handleOptionClick:function(e){if(!te(e))switch(p.value){case"single":if(ee(e))return void Q(e);Z(),K(e),D(),j();break;case"multiple":if(ee(e))return void Q(e);K(e),q.value&&A();break;case"tags":if(ee(e))return void Q(e);void 0===ne(e[V.value])&&m.value&&(o.emit("tag",e[V.value]),b.value&&re(e),A()),q.value&&A(),K(e)}}}}function s(e){return function(e){if(Array.isArray(e))return c(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return c(e,t)}(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 c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function d(e,t,n,l,a,r,u,i,o,s){"boolean"!=typeof u&&(o=i,i=u,u=!1);var c,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,a&&(d.functional=!0)),l&&(d._scopeId=l),r?(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,o(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},d._ssrRegister=c):t&&(c=u?function(e){t.call(this,s(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,i(e))}),c)if(d.functional){var v=d.render;d.render=function(e,t){return c.call(t),v(e,t)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,c):[c]}return n}const v={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","update:modelValue","change"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1},id:{type:[String,Number],required:!1,default:"multiselect"},name:{type:[String,Number],required:!1,default:"multiselect"},disabled:{type:Boolean,required:!1,default:!1},label:{type:String,required:!1,default:"label"},trackBy:{type:String,required:!1,default:"label"},valueProp:{type:String,required:!1,default:"value"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},maxHeight:{type:Number,required:!1,default:160},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:!1},appendNewTag:{type:Boolean,required:!1,default:!0},caret:{type:Boolean,required:!1,default:!0},loading:{type:Boolean,required:!1,default:!1},noOptionsText:{type:String,required:!1,default:"The list is empty"},noResultsText:{type:String,required:!1,default:"No results found"},multipleLabel:{type:Function,required:!1},object:{type:Boolean,required:!1,default:!1},delay:{type:Number,required:!1,default:-1},minChars:{type:Number,required:!1,default:0},resolveOnLoad:{type:Boolean,required:!1,default:!0},filterResults:{type:Boolean,required:!1,default:!0},clearOnSearch:{type:Boolean,required:!1,default:!1},clearOnSelect:{type:Boolean,required:!1,default:!0}},setup(r,u){const i=function(l,a){var r=e(l),u=r.value,i=r.modelValue,o=r.mode;return{internalValue:t("single"!==o.value?[]:null),externalValue:n((function(){return void 0!==a.expose?i.value:u.value}))}}(r,u),c=function(t,n,l){var a=e(t),r=a.object,u=a.valueProp,i=l.internalValue,o=function(e){return r.value||-1!==[null,!1,void 0].indexOf(e)?e:Array.isArray(e)?e.map((function(e){return e[u.value]})):e[u.value]};return{update:function(e){i.value=e;var t=o(e);n.emit("change",t),n.emit("input",t),n.emit("update:modelValue",t)}}}(r,u,{internalValue:i.internalValue}),d=function(a,r,u){var i=e(a),o=i.searchable,s=i.mode,c=u.internalValue,d=t(null),v=t(null),p=n((function(){return d.value?"".concat(d.value.length,"ch"):"tags"===s.value&&-1===[null,void 0].indexOf(c.value)&&c.value.length?"1ch":"100%"}));return l(d,(function(e){r.emit("search-change",e)})),{search:d,input:v,tagsSearchWidth:p,clearSearch:function(){d.value=""},blurSearch:function(){o.value&&v.value.blur()},handleSearchBackspace:function(e){""!==d.value&&e.stopPropagation()}}}(r,u,{internalValue:i.internalValue}),v=function(l,a,r){var u=e(l),i=u.maxHeight,o=u.disabled,s=t(!1),c=n((function(){return"".concat(i.value,"px")}));return{isOpen:s,contentMaxHeight:c,open:function(){o.value||(s.value=!0,a.emit("open"))},close:function(){s.value=!1,a.emit("close")}}}(r,u),p=function(l,a,r){var u=e(l),i=u.searchable,o=u.id;return{multiselect:t(null),tabindex:n((function(){return i.value?-1:0})),blurInput:function(){document.getElementById(o.value).querySelector(".multiselect-input").blur()}}}(r),f=o(r,u,{externalValue:i.externalValue,internalValue:i.internalValue,search:d.search,blurSearch:d.blurSearch,clearSearch:d.clearSearch,update:c.update,blurInput:p.blurInput}),y=function(r,u,i){var o=e(r),s=o.id,c=o.valueProp,d=i.filteredOptions,v=i.handleOptionClick,p=i.search,f=t(null),y=n((function(){return d.value.filter((function(e){return!0!==e.disabled}))})),h=function(e){f.value=e},m=function(){f.value=y.value[0]||null},g=function(){f.value=null},b=function(){var e=document.getElementById(s.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop<t.scrollTop&&(t.scrollTop=e.offsetTop)}};return l(p,(function(e){m()})),{pointer:f,isPointed:function(e){return!!f.value&&f.value[c.value]==e[c.value]},setPointer:h,setPointerFirst:m,clearPointer:g,selectPointer:function(){f.value&&!0!==f.value.disabled?(v(f.value),g()):g()},forwardPointer:function(){if(null===f.value)h(y.value[0]||null);else{var e=y.value.map((function(e){return e[c.value]})).indexOf(f.value[c.value])+1;y.value.length<=e&&(e=0),h(y.value[e]||null)}a((function(){b()}))},backwardPointer:function(){if(null===f.value)h(y.value[y.value.length-1]||null);else{var e=y.value.map((function(e){return e[c.value]})).indexOf(f.value[c.value])-1;e<0&&(e=y.value.length-1),h(y.value[e]||null)}a((function(){b()}))}}}(r,0,{filteredOptions:f.filteredOptions,handleOptionClick:f.handleOptionClick,search:d.search}),h=(m={internalValue:i.internalValue,update:c.update,close:v.close,clearPointer:y.clearPointer},g=m.internalValue,b=m.update,k=m.close,_=m.clearPointer,{handleBackspace:function(e){b(s(g.value).slice(0,-1))},handleEsc:function(e){k(),_(),e.target.blur()}});var m,g,b,k,_;return{...i,...c,...d,...v,...p,...f,...y,...h}}};var p=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"multiselect",staticClass:"multiselect",class:["is-"+e.mode,{"is-open":e.isOpen,"is-searchable":e.searchable,"is-disabled":e.disabled,"no-caret":!e.caret}],attrs:{id:e.id},on:{keydown:function(t){if(!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;t.preventDefault()}}},[n("div",{staticClass:"multiselect-input",attrs:{tabindex:e.tabindex},on:{focus:e.open,blur:e.close,keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:e.handleEsc(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.selectPointer(t)}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:(t.preventDefault(),e.handleBackspace(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.preventDefault(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.preventDefault(),e.forwardPointer(t))}]}},["single"==e.mode&&e.hasSelected&&!e.search&&e.internalValue?[e._t("singlelabel",[n("div",{staticClass:"multiselect-single-label"},[e._v("\n          "+e._s(e.internalValue[e.label])+"\n        ")])],{value:e.internalValue})]:e._e(),e._v(" "),"multiple"==e.mode&&e.hasSelected&&!e.search?[e._t("multiplelabel",[n("div",{staticClass:"multiselect-multiple-label"},[e._v("\n          "+e._s(e.multipleLabelText)+"\n        ")])],{values:e.internalValue})]:e._e(),e._v(" "),"tags"!==e.mode&&e.searchable&&!e.disabled?[n("div",{staticClass:"multiselect-search"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:e.handleSearchBackspace(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})])]:e._e(),e._v(" "),"tags"==e.mode?[n("div",{staticClass:"multiselect-tags"},[e._l(e.internalValue,(function(t,l,a){return n("span",{key:a},[e._t("tag",[n("div",{staticClass:"multiselect-tag"},[e._v("\n              "+e._s(t[e.label])+"\n              "),e.disabled?e._e():n("i",{on:{click:function(e){e.preventDefault()},mousedown:function(n){return n.preventDefault(),e.remove(t)}}})])],{option:t,remove:e.remove,disabled:e.disabled})],2)})),e._v(" "),e.searchable&&!e.disabled?n("div",{staticClass:"multiselect-search",style:{width:e.tagsSearchWidth}},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",style:{width:e.tagsSearchWidth},domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:e.handleSearchBackspace(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})]):e._e()],2)]:e._e(),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:e.placeholder&&!e.hasSelected&&!e.search,expression:"placeholder && !hasSelected && !search"}],staticClass:"multiselect-placeholder"},[e._v("\n      "+e._s(e.placeholder)+"\n    ")]),e._v(" "),n("transition",{attrs:{name:"multiselect-loading"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.busy,expression:"busy"}],staticClass:"multiselect-spinner"})])],2),e._v(" "),n("transition",{attrs:{name:"multiselect"},on:{"after-leave":e.clearSearch}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"multiselect-options",style:{maxHeight:e.contentMaxHeight}},[e._t("beforelist"),e._v(" "),e._l(e.filteredOptions,(function(t,l,a){return n("a",{key:a,staticClass:"multiselect-option",class:{"is-pointed":e.isPointed(t),"is-selected":e.isSelected(t),"is-disabled":e.isDisabled(t)},attrs:{href:""},on:{mousedown:function(e){e.preventDefault()},mouseenter:function(n){return e.setPointer(t)},click:function(n){return n.stopPropagation(),n.preventDefault(),e.handleOptionClick(t)}}},[e._t("option",[n("span",[e._v(e._s(t[e.label]))])],{option:t,search:e.search})],2)})),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noOptions,expression:"noOptions"}]},[e._t("nooptions",[n("div",{staticClass:"multiselect-no-options"},[e._v(e._s(e.noOptionsText))])])],2),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noResults,expression:"noResults"}]},[e._t("noresults",[n("div",{staticClass:"multiselect-no-results"},[e._v(e._s(e.noResultsText))])])],2),e._v(" "),e._t("afterlist")],2)])],1)};p._withStripped=!0;const f=d({render:p,staticRenderFns:[]},undefined,v,undefined,false,undefined,!1,void 0,void 0,void 0);export default f;

package.json

 {
   "name": "@vueform/multiselect",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Vue 3 multiselect component with single select, multiselect and tagging options.",

README.md

@@ -24,7 +24,7 @@ <div align="center">
 
-  <h1>Vue 3 multiselect by <a href="https://vueform.com?r=github" target="_blank">Vueform</a></h1>
+  <h1>Vue 3 multiselect by <a href="https://vueform.com?ref=github" target="_blank">Vueform</a></h1>
   
-  <a href="https://vueform.com" target="_blank">
+  <a href="https://vueform.com?ref=github" target="_blank">
     <br>
-    <img align="center" src="https://github.com/vueform/multiselect/raw/main//assets/logo.svg" width="110">
+    <img align="center" src="https://github.com/vueform/multiselect/raw/main/assets/logo.svg" width="110">
     <br>
@@ -37,3 +37,3 @@ </a>
   <a href="https://www.npmjs.com/package/@vueform/multiselect" target="_blank">
-    <img align="center" src="https://github.com/vueform/multiselect/raw/main//assets/screenshot.png">
+    <img align="center" src="https://github.com/vueform/multiselect/raw/main/assets/screenshot-1.png">
   </a>
@@ -44,5 +44,11 @@ <br>
 
+## Sponsors
+
+<div align="center"><br>
+  <a href="https://vueform.com?ref=github"><img src="https://github.com/vueform/multiselect/raw/main/assets/logo-horizontal.svg" width="200"></a>
+</div>
+
 ## About Vueform
 
-[Vueform](https://vueform.com) is form library for Vue 2 & 3 with 30+ elements, file uploads, element nesting, 50+ validators, conditions, form steps and many more including reactive configuration, API access and ESM modules. Check out our [live demos](https://vueform.com#demo) or see [all the features](https://vueform.com#features) and [sign up for beta](https://vueform.com#beta) to get early access.
+[Vueform](https://vueform.com?ref=github) streamlines the entire form building process in Vue 2 & 3. It comes with 30+ elements, file uploads, element nesting, 50+ validators, conditions, form steps, i18n including reactive configuration, API access, ESM modules and many more. Check out our [live demos](https://vueform.com?ref=github#demo) or see [all the features](https://vueform.com?ref=github#features) and [sign up for beta](https://vueform.com?ref=github#beta) to get early access.
 
@@ -65,2 +71,6 @@ ## Multiselect features
 
+## Demo
+
+Check out our [demo](https://jsfiddle.net/z35wmd6u/).
+
 ## Installation
@@ -115,5 +125,5 @@
 
-## Demo
+## Support
 
-[Demo](https://jsfiddle.net/5sm71yt8/6/)
+Join our [Discord channel](https://discord.gg/vYAyYmqJ) or [open an issue](https://github.com/vueform/multiselect/issues).
 
@@ -124,19 +134,20 @@ ## Basic props
 | --- | --- | --- | --- |
-| mode | `string` | `single` | Possible values: `single\|multiple\|tags`. |
-| options | `array\|object\|function` | `[]` | List of options. Can be:<br>- an array (eg. `[1,2,3]`)<br>- an object (eg. `{a:1,b:2,c:3}`)<br>- an array of objects `[{value:1,label:'v1'},{value:2,label:'v2'},{value:3,label:'v3'}]`<br>- a function returning a Promise (async function) with `query` input param. The promise should return options as an **object** or as an **array of objects**.<br>When an array of objects is provided it **must** have a `value` property as well as properties that equal to `:trackBy`'s and `:label`'s value (both configurable with default value of `'label'`). |
-| value<br>*(for Vue 2)* | `string\|number\|array` | `null` | The variable that should store the select value when using **Vue 2**. If `v-model` is used it does not need to be set. |
-| modelValue<br>*(for Vue 3)* | `string\|number\|array` | `null` | The variable that should store the select value when using **Vue 3**. If `v-model` is used it does not need to be set. |
-| searchable | `boolean` | `false` | Whether the options should be searchable. |
-| trackBy | `string` | `label` | The name of the property that should be searched when `searchable` is `true` and an array of objects are provided as `:options`. |
-| placeholder | `string` | `null` | The text that should be displayed before an options are selected. |
-| label | `string` | `'label'` | If you provide an [array of objects](#single-select-with-object-options) as options this property of those objects will be displayed for options and selected label. |
-| multipleLabel | `function` |  | A function that should return how the label should be displayed when using `multiple` mode. It receives `value` as an argument. By default it renders `1 option selected` and `[n] options selected` based on `value` length. |
-| disabled | `boolean` | `false` | Whether the input should be disabled. |
-| limit | `number` | `-1` | The maximum number of options that should be displayed. If `-1` it won't be limited. |
-| loading | `boolean` | `false` | Whether a loading spinner should be shown. |
-| id | `string` | `'multiselect'` | The `id` of the multiselect container DOM. |
-| caret | `boolean` | `true` | Whether should display a caret (small triangle on the right). |
-| maxHeight | `number` | `160` | The maximum height of options list. |
-| noOptionsText | `string` | `'The list is empty'` | The text that should be displayed when options list is empty. |
-| noResultsText | `string` | `No results found` | The text that should be when there are no search results. |
+| **mode** | `string` | `single` | Possible values: `single\|multiple\|tags`. |
+| **options** | `array\|object\|function` | `[]` | List of options. Can be:<br>- an array (eg. `[1,2,3]`)<br>- an object (eg. `{a:1,b:2,c:3}`)<br>- an array of objects `[{value:1,label:'v1'},{value:2,label:'v2'},{value:3,label:'v3',disabled:true}]`<br>- a function returning a Promise (async function) with `query` input param. The promise should return options as an **object** or as an **array of objects**.<br>When an array of objects is provided it **must** have properties that equal to `:valueProp`'s, `:trackBy`'s and `:label`'s value. |
+| **value** | `string\|number\|array` | `null` | The variable that should store the select value when using **Vue 2**. If `v-model` is used it does not need to be set. |
+| **modelValue** | `string\|number\|array` | `null` | The variable that should store the select value when using **Vue 3**. If `v-model` is used it does not need to be set. |
+| **searchable** | `boolean` | `false` | Whether the options should be searchable. |
+| **valueProp** | `string` | `value` | If you provide an array of objects as options this property should be used as the value of the option. |
+| **trackBy** | `string` | `label` | The name of the property that should be searched when `searchable` is `true` and an array of objects are provided as `:options`. |
+| **label** | `string` | `'label'` | If you provide an array of objects as options the value this property will be displayed as selected option. |
+| **placeholder** | `string` | `null` | The text that should be displayed before any option is selected. |
+| **multipleLabel** | `function` |  | A function that returns the label to be displayed for selected options when using `multiple` mode. It receives `value` as an argument. By default it renders `1 option selected` and `[n] options selected` based on `value` length. |
+| **disabled** | `boolean` | `false` | Whether the input should be disabled for the user (API can still be used programmatically). |
+| **limit** | `number` | `-1` | The maximum number of options that should be displayed. If `-1` the number of options won't be limited. |
+| **loading** | `boolean` | `false` | Whether a loading spinner should be shown. |
+| **id** | `string` | `'multiselect'` | The `id` of the multiselect container DOM. |
+| **caret** | `boolean` | `true` | Whether should display the caret symbol on the right. |
+| **maxHeight** | `number` | `160` | The maximum height of options list (px). |
+| **noOptionsText** | `string` | `'The list is empty'` | The text that should be displayed when options list is empty. |
+| **noResultsText** | `string` | `No results found` | The text that should be displayed when there are no search results. |
 
@@ -147,12 +158,12 @@ ### Advanced Props
 | --- | --- | --- | --- |
-| clearOnSearch<br>*(async options)* | `boolean` | `false` | Whether the option list should be cleared when a new character is typed before loading new options list using async options. |
-| clearOnSelect<br>*(async options)* | `boolean` | `true` | Whether the option list should be cleared upon selecting an option when using async options. |
-| delay<br>*(async options)* | `number` | `-1` | The delay in milliseconds that should occur between the last typed character and refreshing an async option list. If `-1` the option list will not refresh when the search query changes. If `0` it will refresh without delay. |
-| filterResults<br>*(async options)* | `boolean` | `true` | Whether option list should be filtered by search query. This may be set to `false` if you are handling filtering when returning async options. |
-| minChars<br>*(async options)* | `number` | `0` | The minimum number of characters that should be typed to refresh async option list. If `0` it will refresh even when the search field becomes empty. |
-| resolveOnLoad<br>(async options) | `boolean` | `true` | Whether async options should be loaded initially (with an empty query). This should be `true` if you are planning to load non-object value(s) initially while using async options (to fetch matching objects for values). |
-| appendNewTag<br>*(tags)* | `boolean` | `true` | Whether should append new tag automatically to option list when using `tags` mode with `createTag`. If set to `false` you need to take care of appending a new tag to the provided `:options` list upon `@tag` event. |
-| createTag<br>*(tags)* | `boolean` | `false` | Whether should allow creating new tag based on search query when using `tags` mode. |
-| hideSelected<br>*(multiple, tags)* | `boolean` | `true` | Whether selected options should be excluded from the option list when using `multiple` or `tags` mode. |
-| object | `boolean` | `false` | Whether the value should be stored as an object.<br>If **false**:<br>`value: ['js','jsx','ts']`<br>If **true**:<br> `value: [`<br>&nbsp;&nbsp;`{value:'js',label:'Javascript'},`<br>&nbsp;&nbsp;`{value:'jsx',label:'JSX'},`<br>&nbsp;&nbsp;`{value:'ts',label:'Typescript'}`<br>`]` |
+| **clearOnSearch** | `boolean` | `false` | Whether the option list should be cleared when a new character is typed before loading new options list, when using async options. |
+| **clearOnSelect** | `boolean` | `true` | Whether the option list should be cleared upon selecting an option when using async options. |
+| **delay** | `number` | `-1` | The delay in milliseconds that should occur between the last typed character and refreshing an async option list. If `-1` the option list will not refresh when the search query changes. If `0` it will refresh without delay. |
+| **filterResults** | `boolean` | `true` | Whether option list should be filtered by search query. This may be set to `false` if you are handling filtering manually when returning async options. |
+| **minChars** | `number` | `0` | The minimum number of characters that should be typed to refresh async option list. If `0` it will refresh even when the search field becomes empty. |
+| **resolveOnLoad** | `boolean` | `true` | Whether async options should be loaded initially (with an empty query). This should be `true` if you are planning to load non-object value(s) initially while using async options (to fetch matching objects for values). |
+| **appendNewTag** | `boolean` | `true` | Whether it should append new tag automatically to option list when using `tags` mode with `createTag`. If set to `false` you need to take care of appending a new tag to the provided `:options` list upon `@tag` event. |
+| **createTag** | `boolean` | `false` | Whether it should allow creating new tag based on search query when using `tags` mode. |
+| **hideSelected** | `boolean` | `true` | Whether selected options should be excluded from the option list when using `multiple` or `tags` mode. |
+| **object** | `boolean` | `false` | Whether the value should be stored as an object.<br>If **false**:<br>`value: ['js','jsx','ts']`<br>If **true**:<br> `value: [`<br>&nbsp;&nbsp;`{value:'js',label:'Javascript'},`<br>&nbsp;&nbsp;`{value:'jsx',label:'JSX'},`<br>&nbsp;&nbsp;`{value:'ts',label:'Typescript'}`<br>`]` |
 
@@ -163,9 +174,9 @@ ## Events
 | --- | --- | --- |
-| @change | `value` | Emitted after the value is changed. |
-| @close |  | Emitted after closing the option list. |
-| @deselect | `option` | Emitted after an option is deselected or a tag is removed. |
-| @open | | Emitted after opening the option list. |
-| @search-change | `query` | Emitted after a character is typed. |
-| @select | `option` | Emitted after an option or tag is selected. |
-| @tag | `query` | Emitted after enter is hit when a new tag is being created. |
+| **@change** | `value` | Emitted after the value is changed. |
+| **@close** |  | Emitted after closing the option list. |
+| **@deselect** | `option` | Emitted after an option is deselected or a tag is removed. |
+| **@open** | | Emitted after opening the option list. |
+| **@search-change** | `query` | Emitted after a character is typed. |
+| **@select** | `option` | Emitted after an option or tag is selected. |
+| **@tag** | `query` | Emitted after enter is hit when a new tag is being created. |
 
@@ -176,13 +187,11 @@ ## Slots
 | --- | --- | --- |
-| afterlist | | Rendered after the options list. |
-| beforelist | | Rendered before the options list. |
-| multiplelabel | `values` | Rendered when using `multiple` mode and options are selected. By default it renders the return value of `multipleLabel` function. |
-| nooptions |  | Rendered when the options list is empty. By default renders `noOptionsText`. |
-| noresults |  | Rendered when there are no search results. By default renders `noResultsText`. |
-| option | `option, search` | Renders an option in options list. |
-| singlelabel | `value` | Rendered when using `single` mode and an option is selected. By default it renders the `:label` if the selected option. |
-| tag | `option, remove, disabled` | Renders a tag when using `tags` mode. When `disabled` the remove icon should not be displayed. The `remove` prop should be used to trigger the removal of the tag. |
+| **afterlist** | | Rendered after the options list. |
+| **beforelist** | | Rendered before the options list. |
+| **multiplelabel** | `values` | Rendered when using `multiple` mode and options are selected. By default it renders the return value of `multipleLabel` function. |
+| **nooptions** |  | Rendered when the options list is empty. By default renders `noOptionsText`. |
+| **noresults** |  | Rendered when there are no search results. By default renders `noResultsText`. |
+| **option** | `option, search` | Renders an option in options list. |
+| **singlelabel** | `value` | Rendered when using `single` mode and an option is selected. By default it renders the `:label` if the selected option. |
+| **tag** | `option, remove, disabled` | Renders a tag when using `tags` mode. When `disabled` the remove icon should not be displayed. The `remove` prop should be used to trigger the removal of the tag. |
 
-> Note: the reason we don't use camelCase is because they are [normalized back to lowercase](https://github.com/vuejs/vue/issues/9449#issuecomment-461170017) when written in DOM.
-
 ## Examples
@@ -192,4 +201,4 @@
 * [Multiselect with object options](#multiselect-with-object-options)
-* [Tags with search and array of objects options](#tags-with-search-and-array-of-objects-options)
-* [Tags with create](#tags-with-create)
+* [Multiselect with disabled options](#multiselect-with-disabled-options)
+* [Tags with search, create and array of objects options](#tags-with-search-create-and-array-of-objects-options)
 * [Autocomplete with async options](#autocomplete-with-async-options)
@@ -203,3 +212,3 @@ * [Tags with async options](#tags-with-async-options)
 
-``` html
+``` vue
 <Multiselect
@@ -211,7 +220,7 @@ v-model="value"
 
-[JSFiddle - Example #1](https://jsfiddle.net/5sm71yt8/6/)
+[JSFiddle - Example #1](https://jsfiddle.net/z35wmd6u/)
 
 ### Multiselect with object options
 
-``` html
+``` vue
 <Multiselect
@@ -228,14 +237,13 @@ v-model="value"
 
-[JSFiddle - Example #2](https://jsfiddle.net/5sm71yt8/6/)
+[JSFiddle - Example #2](https://jsfiddle.net/z35wmd6u/)
 
-### Tags with search and array of objects options
+### Multiselect with disabled options
 
-``` html
+``` vue
 <Multiselect
   v-model="value"
-  mode="tags"
-  :searchable="true"
+  mode="multiple"
   :options="[
     { value: 'batman', label: 'Batman' },
-    { value: 'robin', label: 'Robin' },
+    { value: 'robin', label: 'Robin', disabled: true },
     { value: 'joker', label: 'Joker' },
@@ -246,7 +254,7 @@ ]"
 
-[JSFiddle - Example #3](https://jsfiddle.net/5sm71yt8/6/)
+[JSFiddle - Example #3](https://jsfiddle.net/z35wmd6u/)
 
-### Tags with create
+### Tags with search, create and array of objects options
 
-``` html
+``` vue
 <Multiselect
@@ -265,7 +273,7 @@ v-model="value"
 
-[JSFiddle - Example #4](https://jsfiddle.net/5sm71yt8/6/)
+[JSFiddle - Example #4](https://jsfiddle.net/z35wmd6u/)
 
 ### Autocomplete with async options
 
-``` html
+``` vue
 <Multiselect
@@ -280,3 +288,3 @@ v-model="value"
   :options="async function(query) {
-    return await fetchLanguages(query) // check JS block for implementation
+    return await fetchLanguages(query) // check JS block in JSFiddle for implementation
   }"
@@ -286,7 +294,7 @@ />
 
-[JSFiddle - Example #5](https://jsfiddle.net/5sm71yt8/6/)
+[JSFiddle - Example #5](https://jsfiddle.net/z35wmd6u/)
 
 ### Tags with async options
 
-``` html
+``` vue
 <Multiselect
@@ -302,3 +310,3 @@ v-model="value"
   :options="async function(query) {
-    return await fetchLanguages(query) // check JS block for implementation
+    return await fetchLanguages(query) // check JS block in JSFiddle for implementation
   }"
@@ -308,7 +316,7 @@ />
 
-[JSFiddle - Example #6](https://jsfiddle.net/5sm71yt8/6/)
+[JSFiddle - Example #6](https://jsfiddle.net/z35wmd6u/)
 
 ### Select with custom options slot
 
-``` html
+``` vue
 <Multiselect
@@ -337,7 +345,7 @@ v-model="value"
 
-[JSFiddle - Example #7](https://jsfiddle.net/5sm71yt8/6/)
+[JSFiddle - Example #7](https://jsfiddle.net/z35wmd6u/)
 
 ### Multiselect with custom label slot
 
-``` html
+``` vue
 <Multiselect
@@ -362,7 +370,7 @@ v-model="value"
 
-[JSFiddle - Example #8](https://jsfiddle.net/5sm71yt8/6/)
+[JSFiddle - Example #8](https://jsfiddle.net/z35wmd6u/)
 
 ### Tags with custom tags slot
 
-``` html
+``` vue
 <template>
@@ -426,3 +434,3 @@ <Multiselect
 
-[JSFiddle - Example #9](https://jsfiddle.net/5sm71yt8/6/)
+[JSFiddle - Example #9](https://jsfiddle.net/z35wmd6u/)
 
@@ -429,0 +437,0 @@ ## License

src/composables/useData.js

@@ -5,3 +5,3 @@ import { toRefs } from 'composition-api'
 {
-  const { object } = toRefs(props)
+  const { object, valueProp } = toRefs(props)
 
@@ -42,3 +42,3 @@ // ============ DEPENDENCIES ============
     // value object to plain values
-    return !Array.isArray(val) ? val.value : val.map(v => v.value)
+    return !Array.isArray(val) ? val[valueProp.value] : val.map(v => v[valueProp.value])
   }
@@ -45,0 +45,0 @@

src/composables/useOptions.js

@@ -9,3 +9,3 @@ import { ref, toRefs, computed, watch } from 'composition-api'
           appendNewTag, multipleLabel, object, loading, delay, resolveOnLoad,
-          minChars, filterResults, clearOnSearch, clearOnSelect } = toRefs(props)
+          minChars, filterResults, clearOnSearch, clearOnSelect, valueProp } = toRefs(props)
 
@@ -44,3 +44,3 @@ // ============ DEPENDENCIES ============
 
-        return { value: key, [trackBy.value]: val, [label.value]: val}
+        return { [valueProp.value]: key, [trackBy.value]: val, [label.value]: val}
       })
@@ -51,3 +51,3 @@ }
     extendedOptions = extendedOptions.map((val, key) => {
-      return typeof val === 'object' ? val : { value: key, [trackBy.value]: val, [label.value]: val}
+      return typeof val === 'object' ? val : { [valueProp.value]: key, [trackBy.value]: val, [label.value]: val}
     })
@@ -118,5 +118,5 @@
     return getOptionByTrackBy(search.value) !== -1 ? [] : [{
+      [valueProp.value]: search.value,
       [label.value]: search.value,
       [trackBy.value]: search.value,
-      value: search.value,
     }]
@@ -179,3 +179,3 @@ })
       case 'multiple':
-        update(internalValue.value.filter((val) => val.value != option.value))
+        update(internalValue.value.filter((val) => val[valueProp.value] != option[valueProp.value]))
         break
@@ -189,3 +189,3 @@ }
   const finalValue = (option) => {
-    return object.value ? option : option.value
+    return object.value ? option : option[valueProp.value]
   }
@@ -197,3 +197,3 @@
 
-  const clear = (option) => {
+  const clear = () => {
     update(nullValue.value)
@@ -205,11 +205,19 @@ }
       case 'single':
-        return !isValueNull.value && internalValue.value.value == option.value
+        return !isValueNull.value && internalValue.value[valueProp.value] == option[valueProp.value]
 
       case 'tags':
       case 'multiple':
-        return !isValueNull.value && internalValue.value.map(o => o.value).indexOf(option.value) !== -1
+        return !isValueNull.value && internalValue.value.map(o => o[valueProp.value]).indexOf(option[valueProp.value]) !== -1
     }
   }
 
+  const isDisabled = (option) => {
+    return option.disabled === true
+  }
+
   const handleOptionClick = (option) => {
+    if (isDisabled(option)) {
+      return
+    }
+
     switch (mode.value) {
@@ -247,4 +255,4 @@ case 'single':
 
-        if (getOption(option.value) === undefined && createTag.value) {
-          context.emit('tag', option.value)
+        if (getOption(option[valueProp.value]) === undefined && createTag.value) {
+          context.emit('tag', option[valueProp.value])
 
@@ -268,3 +276,3 @@ if (appendNewTag.value) {
   const getOption = (val) => {
-    return extendedOptions.value[extendedOptions.value.map(o => o.value).indexOf(val)]
+    return extendedOptions.value[extendedOptions.value.map(o => o[valueProp.value]).indexOf(val)]
   }
@@ -370,2 +378,3 @@
     isSelected,
+    isDisabled,
     getOption,
@@ -372,0 +381,0 @@ handleOptionClick,

src/composables/usePointer.js

@@ -1,6 +0,6 @@
-import { ref, toRefs, watch, nextTick } from 'composition-api'
+import { ref, toRefs, watch, nextTick, computed } from 'composition-api'
 
 export default function usePointer (props, context, dependencies)
 {
-  const { id } = toRefs(props)
+  const { id, valueProp } = toRefs(props)
 
@@ -17,6 +17,13 @@ // ============ DEPENDENCIES ============
 
+  // ============== COMPUTED ==============
+
+  // no export
+  const options = computed(() => {
+    return filteredOptions.value.filter(o => o.disabled !== true)
+  })
+
   // =============== METHODS ==============
 
   const isPointed = (option) => {
-    return !!pointer.value && pointer.value.value == option.value
+    return !!pointer.value && pointer.value[valueProp.value] == option[valueProp.value]
   }
@@ -29,3 +36,3 @@
   const setPointerFirst = () => {
-    pointer.value = filteredOptions.value[0] || null
+    pointer.value = options.value[0] || null
   }
@@ -38,3 +45,4 @@
   const selectPointer = () => {
-    if (!pointer.value) {
+    if (!pointer.value || pointer.value.disabled === true) {
+      clearPointer()
       return
@@ -48,14 +56,14 @@ }
 
-  const forwardPointer = (option) => {
+  const forwardPointer = () => {
     if (pointer.value === null) {
-      setPointer(filteredOptions.value[0])
+      setPointer(options.value[0] || null)
     }
     else {
-      let next = filteredOptions.value.map(o => o.value).indexOf(pointer.value.value) + 1
+      let next = options.value.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) + 1
 
-      if (filteredOptions.value.length <= next) {
+      if (options.value.length <= next) {
         next = 0
       }
 
-      setPointer(filteredOptions.value[next])
+      setPointer(options.value[next] || null)
     }
@@ -70,12 +78,12 @@
     if (pointer.value === null) {
-      setPointer(filteredOptions.value[filteredOptions.value.length - 1])
+      setPointer(options.value[options.value.length - 1] || null)
     }
     else {
-      let prevIndex = filteredOptions.value.map(o => o.value).indexOf(pointer.value.value) - 1
+      let prevIndex = options.value.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) - 1
 
       if (prevIndex < 0) {
-        prevIndex = filteredOptions.value.length - 1
+        prevIndex = options.value.length - 1
       }
 
-      setPointer(filteredOptions.value[prevIndex])
+      setPointer(options.value[prevIndex] || null)
     }
@@ -82,0 +90,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

122952

increased by2.71%

Lines of code

812

increased by2.65%

Number of lines in readme file

417

increased by1.96%

No dependency changes