@vueform/multiselect - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

CHANGELOG.md

@@ -0,1 +1,12 @@
+## v1.1.3
+
+> `2020-12-18`
+
+### 🐞 Bug Fixes
+  - **Breaking**: Renamed slots to lowercase instead of camel case because of [DOM issue](https://github.com/vuejs/vue/issues/9449#issuecomment-461170017)
+
+### 🎉 Feature
+  - Added `change` event
+  - **Breaking**: renamed `hideSelectedTag` to `hideSelected` 
+
 ## v1.1.2
@@ -7,2 +18,3 @@
   - Async/await eliminated from code thus reducing bundle size without runtimeRegenerator
+  - UMD bundle replaced with global
 
@@ -9,0 +21,0 @@ ## v1.1.1

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.hideSelectedTag,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,O=u.clearOnSearch,B=u.clearOnSelect,x=i.internalValue,N=i.externalValue,M=i.search,P=i.blurSearch,T=i.clearSearch,q=i.update,C=i.blurInput,K=e.ref([]),j=e.ref([]),A=e.ref(!1),L=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})),D=e.computed((function(){var e=L.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})),R=e.computed((function(){switch(s.value){case"single":return!_.value;case"multiple":case"tags":return!_.value&&x.value.length>0}})),E=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!L.value.length})),H=e.computed((function(){return L.value.length>0&&0==D.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":q(e);break;case"multiple":case"tags":q((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":q(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){q(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 L.value[L.value.map((function(e){return e.value})).indexOf(e)]},Y=function(e){return L.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||(O.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:D,hasSelected:R,multipleLabelText:E,extendedOptions:L,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),B.value&&T();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),T()),B.value&&T(),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},hideSelectedTag:{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,l.emit("input",i(e)),l.emit("update:modelValue",i(e))}}}(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 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);

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.hideSelectedTag,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,L=r.blurSearch,C=r.clearSearch,E=r.update,M=r.blurInput,$=t([]),H=t([]),I=t(!1),N=l((function(){var e,t=H.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)})),$.value.length&&(t=t.concat($.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})),R=l((function(){switch(s.value){case"single":return!D.value;case"multiple":case"tags":return!D.value&&T.value.length>0}})),F=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||I.value})),J=function(e){switch("object"!==w(e)&&(e=ee(e)),s.value){case"single":E(e);break;case"multiple":case"tags":E((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":E(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){E(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){$.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&&(I.value=!0,c.value(A.value).then((function(e){H.value=e,I.value=!1}))):H.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&&(H.value=[]),setTimeout((function(){e==A.value&&(I.value=!0,c.value(A.value).then((function(t){e==A.value&&(H.value=t),I.value=!1})))}),S.value))}),{flush:"sync"}),{filteredOptions:K,hasSelected:R,multipleLabelText:F,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),L(),M();break;case"multiple":if(Z(e))return void Q(e);J(e),B.value&&C();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),C()),B.value&&C(),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},hideSelectedTag:{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,l.emit("input",r(e)),l.emit("update:modelValue",r(e))}}}(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"},L={class:"multiselect-tag"},C={class:"multiselect-spinner"},E={class:"multiselect-no-options"},M={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",L,[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",C,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",E,v(l.noOptionsText),1)]))],512),[[y,e.noOptions]]),p(c("span",null,[d(e.$slots,"noResults",{},(()=>[c("div",M,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 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;

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.hideSelectedTag,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,R=e.ref([]),A=e.ref([]),D=e.ref(!1),N=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 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)})),R.value.length&&(t=t.concat(R.value)),t})),j=e.computed((function(){var e=N.value;return $.value.length&&(e=$.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}})),L=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"})),H=e.computed((function(){return!N.value.length})),U=e.computed((function(){return N.value.length>0&&0==j.value.length})),$=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){R.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){A.value=e,D.value=!1}))):A.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&&(A.value=[]),setTimeout((function(){e==q.value&&(D.value=!0,c.value(q.value).then((function(t){e==q.value&&(A.value=t),D.value=!1})))}),k.value))}),{flush:"sync"}),{filteredOptions:j,hasSelected:I,multipleLabelText:L,extendedOptions:N,noOptions:H,noResults:U,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},hideSelectedTag:{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,n.emit("input",u(e)),n.emit("update:modelValue",u(e))}}}(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 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);

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.hideSelectedTag,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([]),L=t(!1),I=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})),H=n((function(){var e=I.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})),U=n((function(){switch(p.value){case"single":return!z.value;case"multiple":case"tags":return!z.value&&V.value.length>0}})),$=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!I.value.length})),M=n((function(){return I.value.length>0&&0==H.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||L.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 I.value[I.value.map((function(e){return e.value})).indexOf(e)]},te=function(e){return I.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&&(L.value=!0,v.value(B.value).then((function(e){R.value=e,L.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&&(L.value=!0,v.value(B.value).then((function(t){e==B.value&&(R.value=t),L.value=!1})))}),O.value))}),{flush:"sync"}),{filteredOptions:H,hasSelected:U,multipleLabelText:$,extendedOptions:I,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},hideSelectedTag:{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,n.emit("input",u(e)),n.emit("update:modelValue",u(e))}}}(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 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;

package.json

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

README.md

@@ -38,2 +38,3 @@ <div align="center">
   </a>
+  <br>
 
@@ -111,34 +112,43 @@ </div>
 
-## Props
+## Demo
 
+[Demo](https://jsfiddle.net/5sm71yt8/6/)
+
+## Basic props
+
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| appendNewTag | `boolean` | `true` | Whether should append new tag automatically to multiselect's options when using `tags` mode with `createTag`. If set to `false` you need to take care of appending a new tag to the `:options` list upon `@tag` event. |
-| caret | `boolean` | `true` | Whether should display a caret (small triangle on the right). |
-| clearOnSearch | `boolean` | `false` | Whether the option list should be cleared upon a new typed character when using async options. |
-| clearOnSelect | `boolean` | `true` | Whether the option list should be cleared upon selecting an option when using async options. |
-| createTag | `boolean` | `false` | Whether should allow creating new tag based on search query when using `tags` mode. |
-| delay | `number` | `-1` | The delay 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. The number refers to `milliseconds`. |
+| 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. |
-| filterResults | `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. |
-| hideSelectedTag | `boolean` | `true` | Whether selected tags should be excluded from the list when using `tags` mode. |
-| id | `string` | `'multiselect'` | The `id` of the multiselect container DOM. |
-| 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. |
 | 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. |
-| 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. |
-| mode | `string` | `single` | Possible values: `single\|multiple\|tags`. |
-| 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. |
-| 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. |
 | 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. |
-| object | `boolean` | `false` | Whether the value should be stored as an object. If set to `false` while using an array of objects as `:options` the `value` property will be used as value. If set to `true` without using an array of objects as `:options` an object that contains `value` property along with `:trackBy`'s and `:label`'s value will be set as value. |
-| 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 sync or async function with `query` input param that returns 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 and default to `label`). |
-| placeholder | `string` | `null` | The text that should be displayed before an options are selected. |
-| 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 initially while using async options. |
-| 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`. |
-| 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. |
 
+### Advanced Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| 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>`]` |
+
 ## Events
@@ -148,5 +158,5 @@
 | --- | --- | --- |
+| @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. |
-| @input | `value` | Emitted after the value is changed. |
 | @open | | Emitted after opening the option list. |
@@ -161,259 +171,243 @@ | @search-change | `query` | Emitted after a character is typed. |
 | --- | --- | --- |
-| 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`. |
+| 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. |
+| 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
 
-### Single select with **array** options
+* [Single select](#single-select)
+* [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)
+* [Autocomplete with async options](#autocomplete-with-async-options)
+* [Tags with async options](#tags-with-async-options)
+* [Select with custom options slot](#select-with-custom-options-slot)
+* [Multiselect with custom label slot](#multiselect-with-custom-label-slot)
+* [Tags with custom tags slot](#tags-with-custom-tags-slot)
 
+### Single select
+
 ``` html
-<template>
-  <div>
-    <Multiselect
-      v-model="value"
-      placeholder="Select your character"
-      :options="options"
-    />
-  </div>
-</template>
+<Multiselect
+  v-model="value"
+  :options="['Batman', 'Robin', 'Joker']"
+/>
+```
 
-<script>
-  import Multiselect from '@vueform/multiselect'
+[JSFiddle - Example #1](https://jsfiddle.net/5sm71yt8/6/)
 
-  export default {
-    components: { Multiselect },
-    data() {
-      return {
-        value: null,
-        options: ['Batman', 'Robin', 'Joker']
-      }
-    }
-  }
-</script>
+### Multiselect with object options
 
-<style src="@vueform/multiselect/themes/default.css"></style>
+``` html
+<Multiselect
+  v-model="value"
+  mode="multiple"
+  :options="{
+    batman: 'Batman',
+    robin: 'Robin',
+    joker: 'Joker'
+  }"
+/>
 ```
 
-### Single select with **object** options
+[JSFiddle - Example #2](https://jsfiddle.net/5sm71yt8/6/)
 
+### Tags with search and array of objects options
+
 ``` html
-<template>
-  <div>
-    <Multiselect
-      v-model="value"
-      placeholder="Select your character"
-      :options="options"
-    />
-  </div>
-</template>
+<Multiselect
+  v-model="value"
+  mode="tags"
+  :searchable="true"
+  :options="[
+    { value: 'batman', label: 'Batman' },
+    { value: 'robin', label: 'Robin' },
+    { value: 'joker', label: 'Joker' },
+  ]"
+/>
+```
 
-<script>
-  import Multiselect from '@vueform/multiselect'
+[JSFiddle - Example #3](https://jsfiddle.net/5sm71yt8/6/)
 
-  export default {
-    components: { Multiselect },
-    data() {
-      return {
-        value: null,
-        options: {
-          batman: 'Batman',
-          robin: 'Robin',
-          joker: 'Joker'
-        }
-      }
-    }
-  }
-</script>
+### Tags with create
 
-<style src="@vueform/multiselect/themes/default.css"></style>
+``` html
+<Multiselect
+  v-model="value"
+  mode="tags"
+  :searchable="true"
+  :createTag="true"
+  :options="[
+    { value: 'batman', label: 'Batman' },
+    { value: 'robin', label: 'Robin' },
+    { value: 'joker', label: 'Joker' },
+  ]"
+/>
 ```
 
-### Single select with **custom** options
+[JSFiddle - Example #4](https://jsfiddle.net/5sm71yt8/6/)
 
+### Autocomplete with async options
+
 ``` html
-<template>
-  <div>
-    <Multiselect
-      v-model="value"
-      placeholder="Select your character"
-      label="name"
-      trackBy="name"
-      :options="options"
-      :searchable="true"
-    >
-      <template v-slot:singleLabel="{ value }">
-        <div class="multiselect-single-label">
-          <img height="26" style="margin: 0 6px 0 0;" :src="value.icon"> {{ value.name }}
-        </div>
-      </template>
+<Multiselect
+  v-model="value"
+  placeholder="Choose a programming language"
+  :filterResults="false"
+  :minChars="1"
+  :resolveOnLoad="false"
+  :delay="0"
+  :searchable="true"
+  :options="async function(query) {
+    return await fetchLanguages(query) // check JS block for implementation
+  }"
+/>
+```
 
-      <template v-slot:option="{ option }">
-        <img height="22" style="margin: 0 6px 0 0;" :src="option.icon">{{ option.name }}
-      </template>
-    </Multiselect>
-  </div>
-</template>
+[JSFiddle - Example #5](https://jsfiddle.net/5sm71yt8/6/)
 
-<script>
-  import Multiselect from '@vueform/multiselect'
+### Tags with async options
 
-  export default {
-    components: { Multiselect },
-    data() {
-      return {
-        value: null,
-        options: [
-          { value: 'captainamerica', name: 'Captain America', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/03_-_Captain_America_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
-          { value: 'spiderman', name: 'Spiderman', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/12_-_Spiderman_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
-          { value: 'ironman', name: 'Iron Man', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/02_-_IRONMAN_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
-        ]
-      }
-    }
-  }
-</script>
-
-<style src="@vueform/multiselect/themes/default.css"></style>
+``` html
+<Multiselect
+  v-model="value"
+  mode="tags"
+  placeholder="Choose your stack"
+  :filterResults="false"
+  :minChars="1"
+  :resolveOnLoad="false"
+  :delay="0"
+  :searchable="true"
+  :options="async function(query) {
+    return await fetchLanguages(query) // check JS block for implementation
+  }"
+/>
 ```
 
-### Multiselect
+[JSFiddle - Example #6](https://jsfiddle.net/5sm71yt8/6/)
 
+### Select with custom options slot
+
 ``` html
-<template>
-  <div>
-    <Multiselect
-      v-model="value"
-      mode="multiple"
-      placeholder="Select your characters"
-      :options="options"
-    />
-  </div>
-</template>
+<Multiselect
+  v-model="value"
+  placeholder="Select your character"
+  label="name"
+  :options="[
+    { value: 'captainamerica', name: 'Captain America', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/03_-_Captain_America_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
+    { value: 'spiderman', name: 'Spiderman', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/12_-_Spiderman_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
+    { value: 'ironman', name: 'Iron Man', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/02_-_IRONMAN_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
+  ]"
+>
+  <template v-slot:singlelabel="{ value }">
+    <div class="multiselect-single-label">
+      <img class="character-label-icon" :src="value.icon"> {{ value.name }}
+    </div>
+  </template>
 
-<script>
-  import Multiselect from '@vueform/multiselect'
+  <template v-slot:option="{ option }">
+    <img class="character-option-icon" :src="option.icon"> {{ option.name }}
+  </template>
+</Multiselect>
 
-  export default {
-    components: { Multiselect },
-    data() {
-      return {
-        value: [],
-        options: ['Batman', 'Robin', 'Joker']
-      }
-    }
-  }
-</script>
-
-<style src="@vueform/multiselect/themes/default.css"></style>
 ```
 
-### Multiselect with custom label
+[JSFiddle - Example #7](https://jsfiddle.net/5sm71yt8/6/)
 
+### Multiselect with custom label slot
+
 ``` html
-<template>
-  <div>
-    <Multiselect
-      v-model="value"
-      mode="multiple"
-      placeholder="Select your characters"
-      :options="options"
-    >
-      <template v-slot:multipleLabel="{ values }">
-        <div class="multiselect-multiple-label">
-          {{ values.length }} characters selected
-        </div>
-      </template>
-    </Multiselect>
-  </div>
-</template>
+<Multiselect
+  v-model="value"
+  mode="multiple"
+  placeholder="Select your characters"
+  :options="{
+    batman: 'Batman',
+    robin: 'Robin',
+    joker: 'Joker'
+  }"
+>
+  <template v-slot:multiplelabel="{ values }">
+    <div class="multiselect-multiple-label">
+      {{ values.length }} characters selected
+    </div>
+  </template>
+</Multiselect>
 
-<script>
-  import Multiselect from '@vueform/multiselect'
+```
 
-  export default {
-    components: { Multiselect },
-    data() {
-      return {
-        value: [],
-        options: ['Batman', 'Robin', 'Joker']
-      }
-    }
-  }
-</script>
+[JSFiddle - Example #8](https://jsfiddle.net/5sm71yt8/6/)
 
-<style src="@vueform/multiselect/themes/default.css"></style>
-```
+### Tags with custom tags slot
 
-### Tags with search
-
 ``` html
 <template>
-  <div>
-    <Multiselect
-      v-model="value"
-      mode="tags"
-      placeholder="Select your characters"
-      :options="options"
-      :search="true"
-    />
-  </div>
+  <Multiselect
+    v-model="value"
+    mode="tags"
+    placeholder="Select employees"
+    trackBy="name"
+    label="name"
+    :search="true"
+    :options="[
+      { value: 'judy', name: 'Judy', image: 'https://randomuser.me/api/portraits/med/women/1.jpg' },
+      { value: 'jane', name: 'Jane', image: 'https://randomuser.me/api/portraits/med/women/2.jpg' },
+      { value: 'john', name: 'John', image: 'https://randomuser.me/api/portraits/med/men/1.jpg' },
+      { value: 'joe', name: 'Joe', image: 'https://randomuser.me/api/portraits/med/men/2.jpg' }
+    ]"
+  >
+      <template v-slot:tag="{ option, remove, disabled }">
+        <div class="multiselect-tag is-user">
+          <img :src="option.image">
+          {{ option.name }}
+          <i
+            v-if="!disabled"
+            @click.prevent
+            @mousedown.prevent="remove(option)"
+          />
+        </div>
+      </template>
+  </Multiselect>
 </template>
 
-<script>
-  import Multiselect from '@vueform/multiselect'
+<style>
+  .multiselect-tag.is-user {
+    padding: 5px 8px;
+    border-radius: 22px;
+    background: #35495e;
+    margin: 3px 3px 8px;
+  }
 
-  export default {
-    components: { Multiselect },
-    data() {
-      return {
-        value: [],
-        options: ['Batman', 'Robin', 'Joker']
-      }
-    }
+  .multiselect-tag.is-user img {
+    width: 18px;
+    border-radius: 50%;
+    height: 18px;
+    margin-right: 8px;
+    border: 2px solid #ffffffbf;
   }
-</script>
 
-<style src="@vueform/multiselect/themes/default.css"></style>
-```
+  .multiselect-tag.is-user i:before {
+    color: #ffffff;
+    border-radius: 50%;;
+  }
 
-### Tags with create option
-
-``` html
-<template>
-  <div>
-    <Multiselect
-      v-model="value"
-      mode="tags"
-      placeholder="Select your characters"
-      :options="options"
-      :searchable="true"
-      :createTag="true"
-    />
-  </div>
-</template>
-
-<script>
-  import Multiselect from '@vueform/multiselect'
-
-  export default {
-    components: { Multiselect },
-    data() {
-      return {
-        value: [],
-        options: ['Batman', 'Robin', 'Joker']
-      }
-    }
+  .user-image {
+    margin: 0 6px 0 0;
+    border-radius: 50%;
+    height: 22px;
   }
-</script>
-
-<style src="@vueform/multiselect/themes/default.css"></style>
+</style>
 ```
 
+[JSFiddle - Example #9](https://jsfiddle.net/5sm71yt8/6/)
+
 ## License
 
 [MIT](https://github.com/vueform/multiselect/blob/main/LICENSE.md)

src/composables/useData.js

@@ -19,4 +19,7 @@ import { toRefs } from 'composition-api'
     // value based on `option` setting
-    context.emit('input', makeExternal(val))
-    context.emit('update:modelValue', makeExternal(val))
+    const externalVal = makeExternal(val)
+
+    context.emit('change', externalVal)
+    context.emit('input', externalVal)
+    context.emit('update:modelValue', externalVal)
   } 
@@ -23,0 +26,0 @@

src/composables/useOptions.js

@@ -7,3 +7,3 @@ import { ref, toRefs, computed, watch } from 'composition-api'
 {
-  const { options, mode, trackBy, limit, hideSelectedTag, createTag, label,
+  const { options, mode, trackBy, limit, hideSelected, createTag, label,
           appendNewTag, multipleLabel, object, loading, delay, resolveOnLoad,
@@ -73,3 +73,3 @@ minChars, filterResults, clearOnSearch, clearOnSelect } = toRefs(props)
 
-    if (hideSelectedTag.value) {
+    if (hideSelected.value) {
       filteredOptions = filteredOptions.filter((option) => !shouldHideOption(option))
@@ -271,3 +271,3 @@ }
   const shouldHideOption = (option) => {
-    return mode.value === 'tags' && hideSelectedTag.value && isSelected(option)
+    return mode.value === 'tags' && hideSelected.value && isSelected(option)
   }
@@ -274,0 +274,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

119711

increased by1.45%

Lines of code

791

increased by0.25%

Worsened metrics

Number of lines in readme file

409

decreased by-1.45%

No dependency changes