diff --git a/dist/multiselect.global.js b/dist/multiselect.global.js index ecc3006..1e7831b 100644 --- a/dist/multiselect.global.js +++ b/dist/multiselect.global.js @@ -1 +1 @@ -var VueformMultiselect=function(e,t){"use strict";function n(e){return-1!==[null,void 0,!1].indexOf(e)}function l(e){return(l="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 r(e){return function(e){if(Array.isArray(e))return u(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n0&&(e=e.slice(0,f.value)),e})),J=e.computed((function(){switch(d.value){case"single":return!n(T.value[N.value]);case"multiple":case"tags":return!n(T.value)&&T.value.length>0}})),_=e.computed((function(){return void 0!==g&&void 0!==g.value?g.value(T.value):T.value&&T.value.length>1?"".concat(T.value.length," options selected"):"1 option selected"})),U=e.computed((function(){return!$.value.length&&!H.value})),W=e.computed((function(){return $.value.length>0&&0==F.value.length})),z=e.computed((function(){var e;return!1!==h.value&&C.value?-1!==ue(C.value)?[]:[(e={},a(e,N.value,C.value),a(e,m.value,C.value),a(e,v.value,C.value),e)]:[]})),G=e.computed((function(){switch(d.value){case"single":return null;case"multiple":case"tags":return[]}})),Q=e.computed((function(){return b.value||H.value})),X=function(e){switch("object"!==l(e)&&(e=re(e)),d.value){case"single":j(e);break;case"multiple":case"tags":j(T.value.concat(e))}r.emit("select",Z(e))},Y=function(e){switch("object"!==l(e)&&(e=re(e)),d.value){case"single":te();break;case"tags":case"multiple":j(T.value.filter((function(t){return t[N.value]!=e[N.value]})))}r.emit("deselect",Z(e))},Z=function(e){return w.value?e:e[N.value]},ee=function(e){Y(e)},te=function(){j(G.value)},ne=function(e){switch(d.value){case"single":return!n(T.value)&&T.value[N.value]==e[N.value];case"tags":case"multiple":return!n(T.value)&&-1!==T.value.map((function(e){return e[N.value]})).indexOf(e[N.value])}},le=function(e){return!0===e.disabled},ae=function(){return!(void 0===M||-1===M.value||!J.value&&M.value>0)&&T.value.length>=M.value},re=function(e){return $.value[$.value.map((function(e){return String(e[N.value])})).indexOf(String(e))]},ue=function(e){return $.value.map((function(e){return o(e[v.value])})).indexOf(o(e))},oe=function(e){return"tags"===d.value&&p.value&&ne(e)},ie=function(e){E.value.push(e)},ce=function(){n(P.value)||(T.value=de(P.value))},se=function(e){H.value=!0,s.value(C.value).then((function(t){L.value=t,"function"==typeof e&&e(t),H.value=!1}))},de=function(e){return n(e)?"single"===d.value?{}:[]:w.value?e:"single"===d.value?re(e)||{}:e.filter((function(e){return!!re(e)})).map((function(e){return re(e)}))};if("single"!==d.value&&!n(P.value)&&!Array.isArray(P.value))throw new Error('v-model must be an array when using "'.concat(d.value,'" mode'));return s&&"function"==typeof s.value?k.value?se(ce):1==w.value&&ce():(L.value=s&&s.value?s.value:[],ce()),S.value>-1&&e.watch(C,(function(e){e.length["enter"]},required:{type:Boolean,required:!1,default:!1}},setup(t,l){const a=function(t,n){var l=e.toRefs(t),a=l.value,r=l.modelValue,u=l.mode,o=l.valueProp,i=e.ref("single"!==u.value?[]:{}),c=void 0!==n.expose?r:a,s=e.computed((function(){return Object.keys(i.value).length?"single"!==u.value?i.value.map((function(e){return e[o.value]})):i.value[o.value]:i.value})),d=e.computed((function(){return"single"!==u.value?i.value.map((function(e){return e[o.value]})).join(","):i.value[o.value]}));return{internalValue:i,externalValue:c,currentValue:s,textValue:d}}(t,l),u=function(t,n,l){var a=e.toRefs(t),r=a.searchable,u=(a.id,e.ref(null)),o=e.computed((function(){return r.value?-1:0}));return{multiselect:u,tabindex:o,focusInput:function(){u.value.querySelector(".multiselect-input").focus()},blurInput:function(){u.value.querySelector(".multiselect-input").blur()}}}(t),o={pointer:e.ref(null)},i=function(t,l,a){var r=e.toRefs(t),u=r.object,o=r.valueProp,i=r.mode,c=a.internalValue,s=function(e){return u.value||n(e)?e:Array.isArray(e)?e.map((function(e){return e[o.value]})):e[o.value]},d=function(e){return n(e)?"single"===i.value?{}:[]:e};return{update:function(e){c.value=d(e);var t=s(e);l.emit("change",t),l.emit("input",t),l.emit("update:modelValue",t)}}}(t,l,{internalValue:a.internalValue}),s=function(t,n,l){var a=e.toRefs(t),r=a.searchable,u=a.mode,o=l.internalValue,i=e.ref(null),c=e.ref(null),s=e.computed((function(){return i.value?"".concat(i.value.length,"ch"):"tags"===u.value&&-1===[null,void 0].indexOf(o.value)&&o.value.length?"1ch":"100%"}));return e.watch(i,(function(e){n.emit("search-change",e)})),{search:i,input:c,tagsSearchWidth:s,clearSearch:function(){i.value=""},focusSearch:function(){c.value.focus()},blurSearch:function(){r.value&&c.value.blur()}}}(t,l,{internalValue:a.internalValue}),d=function(t,n,l){var a=e.toRefs(t),r=a.maxHeight,u=a.disabled,o=a.searchable,i=l.multiselect,c=l.blurInput,s=l.blurSearch,d=l.focusInput,v=l.focusSearch,f=e.ref(!1),p=e.computed((function(){return"".concat(r.value,"px")}));return{isOpen:f,contentMaxHeight:p,openDropdown:function(){u.value||(f.value=!0,n.emit("open"))},closeDropdown:function(){f.value=!1,n.emit("close")},open:function(){o&&o.value?v():d()},close:function(){o&&o.value?s():c()},handleInputMousedown:function(e){f.value&&!o.value&&(i.value.querySelector(".multiselect-input").dispatchEvent(new Event("blur")),i.value.querySelector(".multiselect-input").blur(),e.preventDefault())}}}(t,l,{multiselect:u.multiselect,blurInput:u.blurInput,blurSearch:s.blurSearch,focusInput:u.focusInput,focusSearch:s.focusSearch}),v=c(t,l,{externalValue:a.externalValue,internalValue:a.internalValue,currentValue:a.currentValue,search:s.search,blurSearch:s.blurSearch,clearSearch:s.clearSearch,update:i.update,blurInput:u.blurInput,pointer:o.pointer}),f=function(t,n,l){var a=e.toRefs(t),r=a.id,u=a.valueProp,o=l.filteredOptions,i=l.handleOptionClick,c=l.search,s=l.pointer,d=e.computed((function(){return o.value.filter((function(e){return!0!==e.disabled}))})),v=function(e){s.value=e},f=function(){s.value=d.value[0]||null},p=function(){s.value=null},h=function(){var e=document.getElementById(r.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop{}),["prevent"]),["enter"])),ref:"multiselect"},[t.createVNode("div",{class:"multiselect-input",tabindex:e.tabindex,onMousedown:n[20]||(n[20]=(...t)=>e.handleInputMousedown&&e.handleInputMousedown(...t)),onFocus:n[21]||(n[21]=(...t)=>e.openDropdown&&e.openDropdown(...t)),onBlur:n[22]||(n[22]=(...t)=>e.closeDropdown&&e.closeDropdown(...t)),onKeyup:[n[23]||(n[23]=t.withKeys(((...t)=>e.handleEsc&&e.handleEsc(...t)),["esc"])),n[24]||(n[24]=t.withKeys(((...t)=>e.selectPointer&&e.selectPointer(...t)),["enter"]))],onKeydown:[n[25]||(n[25]=t.withKeys(t.withModifiers(((...t)=>e.handleBackspace&&e.handleBackspace(...t)),["prevent"]),["delete"])),n[26]||(n[26]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["prevent"]),["up"])),n[27]||(n[27]=t.withKeys(t.withModifiers(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["prevent"]),["down"]))]},[t.createCommentVNode(" Single label "),"single"==l.mode&&e.hasSelected&&!e.search&&e.internalValue?t.renderSlot(e.$slots,"singlelabel",{key:0,value:e.internalValue},(()=>[t.createVNode("div",d,t.toDisplayString(e.internalValue[l.label]),1)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Multiple label "),"multiple"==l.mode&&e.hasSelected&&!e.search?t.renderSlot(e.$slots,"multiplelabel",{key:1,values:e.internalValue},(()=>[t.createVNode("div",v,t.toDisplayString(e.multipleLabelText),1)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Search "),"tags"!==l.mode&&l.searchable&&!l.disabled?(t.openBlock(),t.createBlock("div",f,[t.withDirectives(t.createVNode("input",{"onUpdate:modelValue":n[1]||(n[1]=t=>e.search=t),onFocus:n[2]||(n[2]=t.withModifiers(((...t)=>e.openDropdown&&e.openDropdown(...t)),["stop"])),onBlur:n[3]||(n[3]=t.withModifiers(((...t)=>e.closeDropdown&&e.closeDropdown(...t)),["stop"])),onKeyup:[n[4]||(n[4]=t.withKeys(t.withModifiers(((...t)=>e.handleEsc&&e.handleEsc(...t)),["stop"]),["esc"])),n[5]||(n[5]=t.withKeys(t.withModifiers(((...t)=>e.selectPointer&&e.selectPointer(...t)),["stop"]),["enter"]))],onKeydown:[n[6]||(n[6]=t.withKeys(((...t)=>e.handleSearchBackspace&&e.handleSearchBackspace(...t)),["delete"])),n[7]||(n[7]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["stop"]),["up"])),n[8]||(n[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"==l.mode?(t.openBlock(),t.createBlock("div",p,[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.internalValue,((a,r,u)=>(t.openBlock(),t.createBlock("span",{key:u},[t.renderSlot(e.$slots,"tag",{option:a,handleTagRemove:e.handleTagRemove,disabled:l.disabled},(()=>[t.createVNode("div",h,[t.createTextVNode(t.toDisplayString(a[l.label])+" ",1),l.disabled?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock("i",{key:0,onClick:n[9]||(n[9]=t.withModifiers((()=>{}),["prevent"])),onMousedown:t.withModifiers((t=>e.handleTagRemove(a,t)),["prevent","stop"])},null,40,["onMousedown"]))])]))])))),128)),l.searchable&&!l.disabled?(t.openBlock(),t.createBlock("div",{key:0,class:"multiselect-search",style:{width:e.tagsSearchWidth}},[t.withDirectives(t.createVNode("input",{"onUpdate:modelValue":n[10]||(n[10]=t=>e.search=t),onFocus:n[11]||(n[11]=t.withModifiers(((...t)=>e.openDropdown&&e.openDropdown(...t)),["stop"])),onBlur:n[12]||(n[12]=t.withModifiers(((...t)=>e.closeDropdown&&e.closeDropdown(...t)),["stop"])),onKeyup:[n[13]||(n[13]=t.withKeys(t.withModifiers(((...t)=>e.handleEsc&&e.handleEsc(...t)),["stop"]),["esc"])),n[14]||(n[14]=t.withKeys(t.withModifiers(((...t)=>e.handleAddTag&&e.handleAddTag(...t)),["stop"]),["enter"])),n[15]||(n[15]=t.withKeys(t.withModifiers(((...t)=>e.handleAddTag&&e.handleAddTag(...t)),["stop"]),["space"]))],onKeydown:[n[16]||(n[16]=t.withKeys(((...t)=>e.handleSearchBackspace&&e.handleSearchBackspace(...t)),["delete"])),n[17]||(n[17]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["stop"]),["up"])),n[18]||(n[18]=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 "),!l.placeholder||e.hasSelected||e.search?t.createCommentVNode("v-if",!0):t.renderSlot(e.$slots,"placeholder",{key:4},(()=>[t.createVNode("div",m,t.toDisplayString(l.placeholder),1)])),t.createVNode(t.Transition,{name:"multiselect-loading"},{default:t.withCtx((()=>[t.withDirectives(t.createVNode("div",y,null,512),[[t.vShow,e.busy]])])),_:1}),"single"!==l.mode&&e.hasSelected&&!l.disabled?(t.openBlock(),t.createBlock("a",{key:5,class:"multiselect-clear",onClick:n[19]||(n[19]=t.withModifiers(((...t)=>e.clear&&e.clear(...t)),["prevent"]))})):t.createCommentVNode("v-if",!0)],40,["tabindex"]),t.createCommentVNode(" Options "),e.resolving&&l.clearOnSearch?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock(t.Transition,{key:0,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,u)=>(t.openBlock(),t.createBlock("span",{tabindex:-1,class:["multiselect-option",{"is-pointed":e.isPointed(a),"is-selected":e.isSelected(a),"is-disabled":e.isDisabled(a)}],key:u,onMousedown:n[28]||(n[28]=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[l.label]),1)]))],42,["onMouseenter","onClick"])))),128)),t.withDirectives(t.createVNode("span",null,[t.renderSlot(e.$slots,"nooptions",{},(()=>[t.createVNode("div",g,t.toDisplayString(l.noOptionsText),1)]))],512),[[t.vShow,e.noOptions]]),t.withDirectives(t.createVNode("span",null,[t.renderSlot(e.$slots,"noresults",{},(()=>[t.createVNode("div",w,t.toDisplayString(l.noResultsText),1)]))],512),[[t.vShow,e.noResults]]),t.renderSlot(e.$slots,"afterlist")],4),[[t.vShow,e.isOpen&&l.showOptions]])])),_:3},8,["onAfterLeave"])),t.createCommentVNode(" Hacky input element to show HTML5 required warning "),l.required?(t.openBlock(),t.createBlock("input",{key:1,class:"multiselect-fake-input",tabindex:"-1",value:e.textValue,required:""},null,8,["value"])):t.createCommentVNode("v-if",!0)],42,["id"])},s.__file="src/Multiselect.vue",s}(Vue,Vue); +var VueformMultiselect=function(e,t){"use strict";function n(e){return-1!==[null,void 0,!1].indexOf(e)}function l(e){return(l="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 r(e){return function(e){if(Array.isArray(e))return u(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n0&&(e=e.slice(0,p.value)),e})),J=e.computed((function(){switch(d.value){case"single":return!n(T.value[x.value]);case"multiple":case"tags":return!n(T.value)&&T.value.length>0}})),_=e.computed((function(){return void 0!==g&&void 0!==g.value?g.value(T.value):T.value&&T.value.length>1?"".concat(T.value.length," options selected"):"1 option selected"})),W=e.computed((function(){return!$.value.length&&!H.value})),U=e.computed((function(){return $.value.length>0&&0==F.value.length})),z=e.computed((function(){var e;return!1!==h.value&&D.value?-1!==ue(D.value)?[]:[(e={},a(e,x.value,D.value),a(e,m.value,D.value),a(e,v.value,D.value),e)]:[]})),G=e.computed((function(){switch(d.value){case"single":return null;case"multiple":case"tags":return[]}})),Q=e.computed((function(){return b.value||H.value})),X=function(e){switch("object"!==l(e)&&(e=re(e)),d.value){case"single":A(e);break;case"multiple":case"tags":A(T.value.concat(e))}r.emit("select",Z(e))},Y=function(e){switch("object"!==l(e)&&(e=re(e)),d.value){case"single":te();break;case"tags":case"multiple":A(T.value.filter((function(t){return t[x.value]!=e[x.value]})))}r.emit("deselect",Z(e))},Z=function(e){return w.value?e:e[x.value]},ee=function(e){Y(e)},te=function(){A(G.value)},ne=function(e){switch(d.value){case"single":return!n(T.value)&&T.value[x.value]==e[x.value];case"tags":case"multiple":return!n(T.value)&&-1!==T.value.map((function(e){return e[x.value]})).indexOf(e[x.value])}},le=function(e){return!0===e.disabled},ae=function(){return!(void 0===M||-1===M.value||!J.value&&M.value>0)&&T.value.length>=M.value},re=function(e){return $.value[$.value.map((function(e){return String(e[x.value])})).indexOf(String(e))]},ue=function(e){return $.value.map((function(e){return o(e[v.value])})).indexOf(o(e))},oe=function(e){return"tags"===d.value&&f.value&&ne(e)},ie=function(e){E.value.push(e)},ce=function(){n(P.value)||(T.value=de(P.value))},se=function(e){H.value=!0,s.value(D.value).then((function(t){L.value=t,"function"==typeof e&&e(t),H.value=!1}))},de=function(e){return n(e)?"single"===d.value?{}:[]:w.value?e:"single"===d.value?re(e)||{}:e.filter((function(e){return!!re(e)})).map((function(e){return re(e)}))};if("single"!==d.value&&!n(P.value)&&!Array.isArray(P.value))throw new Error('v-model must be an array when using "'.concat(d.value,'" mode'));return s&&"function"==typeof s.value?k.value?se(ce):1==w.value&&ce():(L.value=s&&s.value?s.value:[],ce()),S.value>-1&&e.watch(D,(function(e){e.length["enter"]},required:{type:Boolean,required:!1,default:!1}},setup(t,l){const a=function(t,n){var l=e.toRefs(t),a=l.value,r=l.modelValue,u=l.mode,o=l.valueProp,i=e.ref("single"!==u.value?[]:{}),c=void 0!==n.expose?r:a,s=e.computed((function(){return Object.keys(i.value).length?"single"!==u.value?i.value.map((function(e){return e[o.value]})):i.value[o.value]:i.value})),d=e.computed((function(){return"single"!==u.value?i.value.map((function(e){return e[o.value]})).join(","):i.value[o.value]}));return{internalValue:i,externalValue:c,currentValue:s,textValue:d}}(t,l),u=function(t,n,l){var a=e.toRefs(t),r=a.searchable,u=(a.id,e.ref(null)),o=e.computed((function(){return r.value?-1:0}));return{multiselect:u,tabindex:o,focusInput:function(){u.value.querySelector(".multiselect-input").focus()},blurInput:function(){u.value.querySelector(".multiselect-input").blur()}}}(t),o={pointer:e.ref(null)},i=function(t,l,a){var r=e.toRefs(t),u=r.object,o=r.valueProp,i=r.mode,c=a.internalValue,s=function(e){return u.value||n(e)?e:Array.isArray(e)?e.map((function(e){return e[o.value]})):e[o.value]},d=function(e){return n(e)?"single"===i.value?{}:[]:e};return{update:function(e){c.value=d(e);var t=s(e);l.emit("change",t),l.emit("input",t),l.emit("update:modelValue",t)}}}(t,l,{internalValue:a.internalValue}),s=function(t,n,l){var a=e.toRefs(t),r=a.searchable,u=a.mode,o=l.internalValue,i=e.ref(null),c=e.ref(null),s=e.computed((function(){return i.value?"".concat(i.value.length,"ch"):"tags"===u.value&&-1===[null,void 0].indexOf(o.value)&&o.value.length?"1ch":"100%"}));return e.watch(i,(function(e){n.emit("search-change",e)})),{search:i,input:c,tagsSearchWidth:s,clearSearch:function(){i.value=""},focusSearch:function(){c.value.focus()},blurSearch:function(){r.value&&c.value.blur()}}}(t,l,{internalValue:a.internalValue}),d=function(t,n,l){var a=e.toRefs(t),r=a.maxHeight,u=a.disabled,o=a.searchable,i=l.multiselect,c=l.blurInput,s=l.blurSearch,d=l.focusInput,v=l.focusSearch,p=e.ref(!1),f=e.computed((function(){return"".concat(r.value,"px")}));return{isOpen:p,contentMaxHeight:f,openDropdown:function(){u.value||(p.value=!0,n.emit("open"))},closeDropdown:function(){p.value=!1,n.emit("close")},open:function(){o&&o.value?v():d()},close:function(){o&&o.value?s():c()},handleInputMousedown:function(e){p.value&&!o.value&&(i.value.querySelector(".multiselect-input").dispatchEvent(new Event("blur")),i.value.querySelector(".multiselect-input").blur(),e.preventDefault())}}}(t,l,{multiselect:u.multiselect,blurInput:u.blurInput,blurSearch:s.blurSearch,focusInput:u.focusInput,focusSearch:s.focusSearch}),v=c(t,l,{externalValue:a.externalValue,internalValue:a.internalValue,currentValue:a.currentValue,search:s.search,blurSearch:s.blurSearch,clearSearch:s.clearSearch,update:i.update,blurInput:u.blurInput,pointer:o.pointer}),p=function(t,n,l){var a=e.toRefs(t),r=a.id,u=a.valueProp,o=l.filteredOptions,i=l.handleOptionClick,c=l.search,s=l.pointer,d=e.computed((function(){return o.value.filter((function(e){return!0!==e.disabled}))})),v=function(e){s.value=e},p=function(){s.value=d.value[0]||null},f=function(){s.value=null},h=function(){var e=document.getElementById(r.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop{}),["prevent"]),["enter"])),ref:"multiselect"},[t.createVNode("div",{class:"multiselect-input",tabindex:e.tabindex,onMousedown:n[22]||(n[22]=(...t)=>e.handleInputMousedown&&e.handleInputMousedown(...t)),onFocus:n[23]||(n[23]=(...t)=>e.openDropdown&&e.openDropdown(...t)),onBlur:n[24]||(n[24]=(...t)=>e.closeDropdown&&e.closeDropdown(...t)),onKeyup:[n[25]||(n[25]=t.withKeys(((...t)=>e.handleEsc&&e.handleEsc(...t)),["esc"])),n[26]||(n[26]=t.withKeys(((...t)=>e.selectPointer&&e.selectPointer(...t)),["enter"]))],onKeydown:[n[27]||(n[27]=t.withKeys(t.withModifiers(((...t)=>e.handleBackspace&&e.handleBackspace(...t)),["prevent"]),["delete"])),n[28]||(n[28]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["prevent"]),["up"])),n[29]||(n[29]=t.withKeys(t.withModifiers(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["prevent"]),["down"]))]},[t.createCommentVNode(" Single label "),"single"==l.mode&&e.hasSelected&&!e.search&&e.internalValue?t.renderSlot(e.$slots,"singlelabel",{key:0,value:e.internalValue},(()=>[t.createVNode("div",d,t.toDisplayString(e.internalValue[l.label]),1)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Multiple label "),"multiple"==l.mode&&e.hasSelected&&!e.search?t.renderSlot(e.$slots,"multiplelabel",{key:1,values:e.internalValue},(()=>[t.createVNode("div",v,t.toDisplayString(e.multipleLabelText),1)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Search "),"tags"!==l.mode&&l.searchable&&!l.disabled?(t.openBlock(),t.createBlock("div",p,[t.createVNode("input",{modelValue:e.search,value:e.search,onFocus:n[1]||(n[1]=t.withModifiers(((...t)=>e.openDropdown&&e.openDropdown(...t)),["stop"])),onBlur:n[2]||(n[2]=t.withModifiers(((...t)=>e.closeDropdown&&e.closeDropdown(...t)),["stop"])),onKeyup:[n[3]||(n[3]=t.withKeys(t.withModifiers(((...t)=>e.handleEsc&&e.handleEsc(...t)),["stop"]),["esc"])),n[4]||(n[4]=t.withKeys(t.withModifiers(((...t)=>e.selectPointer&&e.selectPointer(...t)),["stop"]),["enter"])),n[8]||(n[8]=(...t)=>e.handleSearchInput&&e.handleSearchInput(...t))],onKeydown:[n[5]||(n[5]=t.withKeys(((...t)=>e.handleSearchBackspace&&e.handleSearchBackspace(...t)),["delete"])),n[6]||(n[6]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["stop"]),["up"])),n[7]||(n[7]=t.withKeys(t.withModifiers(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["stop"]),["down"]))],onSelect:n[9]||(n[9]=(...t)=>e.handleSearchInput&&e.handleSearchInput(...t)),ref:"input"},null,40,["modelValue","value"])])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Tags (with search) "),"tags"==l.mode?(t.openBlock(),t.createBlock("div",f,[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.internalValue,((a,r,u)=>(t.openBlock(),t.createBlock("span",{key:u},[t.renderSlot(e.$slots,"tag",{option:a,handleTagRemove:e.handleTagRemove,disabled:l.disabled},(()=>[t.createVNode("div",h,[t.createTextVNode(t.toDisplayString(a[l.label])+" ",1),l.disabled?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock("i",{key:0,onClick:n[10]||(n[10]=t.withModifiers((()=>{}),["prevent"])),onMousedown:t.withModifiers((t=>e.handleTagRemove(a,t)),["prevent","stop"])},null,40,["onMousedown"]))])]))])))),128)),l.searchable&&!l.disabled?(t.openBlock(),t.createBlock("div",{key:0,class:"multiselect-search",style:{width:e.tagsSearchWidth}},[t.createVNode("input",{modelValue:e.search,value:e.search,onFocus:n[11]||(n[11]=t.withModifiers(((...t)=>e.openDropdown&&e.openDropdown(...t)),["stop"])),onBlur:n[12]||(n[12]=t.withModifiers(((...t)=>e.closeDropdown&&e.closeDropdown(...t)),["stop"])),onKeyup:[n[13]||(n[13]=t.withKeys(t.withModifiers(((...t)=>e.handleEsc&&e.handleEsc(...t)),["stop"]),["esc"])),n[14]||(n[14]=t.withKeys(t.withModifiers(((...t)=>e.handleAddTag&&e.handleAddTag(...t)),["stop"]),["enter"])),n[15]||(n[15]=t.withKeys(t.withModifiers(((...t)=>e.handleAddTag&&e.handleAddTag(...t)),["stop"]),["space"])),n[19]||(n[19]=(...t)=>e.handleSearchInput&&e.handleSearchInput(...t))],onKeydown:[n[16]||(n[16]=t.withKeys(((...t)=>e.handleSearchBackspace&&e.handleSearchBackspace(...t)),["delete"])),n[17]||(n[17]=t.withKeys(t.withModifiers(((...t)=>e.backwardPointer&&e.backwardPointer(...t)),["stop"]),["up"])),n[18]||(n[18]=t.withKeys(t.withModifiers(((...t)=>e.forwardPointer&&e.forwardPointer(...t)),["stop"]),["down"]))],onSelect:n[20]||(n[20]=(...t)=>e.handleSearchInput&&e.handleSearchInput(...t)),style:{width:e.tagsSearchWidth},ref:"input"},null,44,["modelValue","value"])],4)):t.createCommentVNode("v-if",!0)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Placeholder "),!l.placeholder||e.hasSelected||e.search?t.createCommentVNode("v-if",!0):t.renderSlot(e.$slots,"placeholder",{key:4},(()=>[t.createVNode("div",m,t.toDisplayString(l.placeholder),1)])),t.createVNode(t.Transition,{name:"multiselect-loading"},{default:t.withCtx((()=>[t.withDirectives(t.createVNode("div",y,null,512),[[t.vShow,e.busy]])])),_:1}),"single"!==l.mode&&e.hasSelected&&!l.disabled?(t.openBlock(),t.createBlock("a",{key:5,class:"multiselect-clear",onClick:n[21]||(n[21]=t.withModifiers(((...t)=>e.clear&&e.clear(...t)),["prevent"]))})):t.createCommentVNode("v-if",!0)],40,["tabindex"]),t.createCommentVNode(" Options "),e.resolving&&l.clearOnSearch?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock(t.Transition,{key:0,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,u)=>(t.openBlock(),t.createBlock("span",{tabindex:-1,class:["multiselect-option",{"is-pointed":e.isPointed(a),"is-selected":e.isSelected(a),"is-disabled":e.isDisabled(a)}],key:u,onMousedown:n[30]||(n[30]=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[l.label]),1)]))],42,["onMouseenter","onClick"])))),128)),t.withDirectives(t.createVNode("span",null,[t.renderSlot(e.$slots,"nooptions",{},(()=>[t.createVNode("div",g,t.toDisplayString(l.noOptionsText),1)]))],512),[[t.vShow,e.noOptions]]),t.withDirectives(t.createVNode("span",null,[t.renderSlot(e.$slots,"noresults",{},(()=>[t.createVNode("div",w,t.toDisplayString(l.noResultsText),1)]))],512),[[t.vShow,e.noResults]]),t.renderSlot(e.$slots,"afterlist")],4),[[t.vShow,e.isOpen&&l.showOptions]])])),_:3},8,["onAfterLeave"])),t.createCommentVNode(" Hacky input element to show HTML5 required warning "),l.required?(t.openBlock(),t.createBlock("input",{key:1,class:"multiselect-fake-input",tabindex:"-1",value:e.textValue,required:""},null,8,["value"])):t.createCommentVNode("v-if",!0)],42,["id"])},s.__file="src/Multiselect.vue",s}(Vue,Vue); diff --git a/dist/multiselect.js b/dist/multiselect.js index 4fdfa93..5446400 100644 --- a/dist/multiselect.js +++ b/dist/multiselect.js @@ -1 +1 @@ -import{toRefs as e,ref as l,computed as t,watch as n,nextTick as a,openBlock as u,createBlock as r,withKeys as i,withModifiers as o,createVNode as c,createCommentVNode as s,renderSlot as d,toDisplayString as v,withDirectives as p,vModelText as f,Fragment as h,renderList as m,createTextVNode as g,Transition as b,withCtx as y,vShow as w}from"vue";function S(e){return-1!==[null,void 0,!1].indexOf(e)}function O(e){return String(e).toLowerCase().trim()}var k={};function q(e){return(q="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 x(e,l,t){return l in e?Object.defineProperty(e,l,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[l]=t,e}function P(a,u,r){var i=e(a),o=i.options,c=i.mode,s=i.trackBy,d=i.limit,v=i.hideSelected,p=i.createTag,f=i.label,h=i.appendNewTag,m=i.multipleLabel,g=i.object,b=i.loading,y=i.delay,w=i.resolveOnLoad,P=i.minChars,T=i.filterResults,V=i.clearOnSearch,B=i.clearOnSelect,D=i.valueProp,A=i.canDeselect,j=i.max,I=r.internalValue,M=r.externalValue,C=r.currentValue,E=r.search,N=r.blurSearch,H=r.clearSearch,$=r.update,L=r.blurInput,R=r.pointer,K=l([]),F=l([]),J=l(!1),_=t((function(){var e,l=F.value||[];return e=l,"[object Object]"===Object.prototype.toString.call(e)&&(l=Object.keys(l).map((function(e){var t,n=l[e];return x(t={},D.value,e),x(t,s.value,n),x(t,f.value,n),t}))),l=l.map((function(e,l){var t;return"object"===q(e)?e:(x(t={},D.value,l),x(t,s.value,e),x(t,f.value,e),t)})),K.value.length&&(l=l.concat(K.value)),l})),U=t((function(){var e=_.value;return X.value.length&&(e=X.value.concat(e)),E.value&&T.value&&(e=e.filter((function(e){return-1!==O(e[s.value]).indexOf(O(E.value))}))),v.value&&(e=e.filter((function(e){return!se(e)}))),d.value>0&&(e=e.slice(0,d.value)),e})),W=t((function(){switch(c.value){case"single":return!S(I.value[D.value]);case"multiple":case"tags":return!S(I.value)&&I.value.length>0}})),z=t((function(){return void 0!==m&&void 0!==m.value?m.value(I.value):I.value&&I.value.length>1?"".concat(I.value.length," options selected"):"1 option selected"})),G=t((function(){return!_.value.length&&!J.value})),Q=t((function(){return _.value.length>0&&0==U.value.length})),X=t((function(){var e;return!1!==p.value&&E.value?-1!==ce(E.value)?[]:[(e={},x(e,D.value,E.value),x(e,f.value,E.value),x(e,s.value,E.value),e)]:[]})),Y=t((function(){switch(c.value){case"single":return null;case"multiple":case"tags":return[]}})),Z=t((function(){return b.value||J.value})),ee=function(e){switch("object"!==q(e)&&(e=oe(e)),c.value){case"single":$(e);break;case"multiple":case"tags":$(I.value.concat(e))}u.emit("select",te(e))},le=function(e){switch("object"!==q(e)&&(e=oe(e)),c.value){case"single":ae();break;case"tags":case"multiple":$(I.value.filter((function(l){return l[D.value]!=e[D.value]})))}u.emit("deselect",te(e))},te=function(e){return g.value?e:e[D.value]},ne=function(e){le(e)},ae=function(){$(Y.value)},ue=function(e){switch(c.value){case"single":return!S(I.value)&&I.value[D.value]==e[D.value];case"tags":case"multiple":return!S(I.value)&&-1!==I.value.map((function(e){return e[D.value]})).indexOf(e[D.value])}},re=function(e){return!0===e.disabled},ie=function(){return!(void 0===j||-1===j.value||!W.value&&j.value>0)&&I.value.length>=j.value},oe=function(e){return _.value[_.value.map((function(e){return String(e[D.value])})).indexOf(String(e))]},ce=function(e){return _.value.map((function(e){return O(e[s.value])})).indexOf(O(e))},se=function(e){return"tags"===c.value&&v.value&&ue(e)},de=function(e){K.value.push(e)},ve=function(){S(M.value)||(I.value=fe(M.value))},pe=function(e){J.value=!0,o.value(E.value).then((function(l){F.value=l,"function"==typeof e&&e(l),J.value=!1}))},fe=function(e){return S(e)?"single"===c.value?{}:[]:g.value?e:"single"===c.value?oe(e)||{}:e.filter((function(e){return!!oe(e)})).map((function(e){return oe(e)}))};if("single"!==c.value&&!S(M.value)&&!Array.isArray(M.value))throw new Error('v-model must be an array when using "'.concat(c.value,'" mode'));return o&&"function"==typeof o.value?w.value?pe(ve):1==g.value&&ve():(F.value=o&&o.value?o.value:[],ve()),y.value>-1&&n(E,(function(e){e.lengthe.length)&&(l=e.length);for(var t=0,n=new Array(l);t["enter"]},required:{type:Boolean,required:!1,default:!1}},setup(u,r){const i=function(n,a){var u=e(n),r=u.value,i=u.modelValue,o=u.mode,c=u.valueProp,s=l("single"!==o.value?[]:{}),d=void 0!==a.expose?i:r,v=t((function(){return Object.keys(s.value).length?"single"!==o.value?s.value.map((function(e){return e[c.value]})):s.value[c.value]:s.value})),p=t((function(){return"single"!==o.value?s.value.map((function(e){return e[c.value]})).join(","):s.value[c.value]}));return{internalValue:s,externalValue:d,currentValue:v,textValue:p}}(u,r),o=function(n,a,u){var r=e(n),i=r.searchable,o=(r.id,l(null)),c=t((function(){return i.value?-1:0}));return{multiselect:o,tabindex:c,focusInput:function(){o.value.querySelector(".multiselect-input").focus()},blurInput:function(){o.value.querySelector(".multiselect-input").blur()}}}(u),c={pointer:l(null)},s=function(l,t,n){var a=e(l),u=a.object,r=a.valueProp,i=a.mode,o=n.internalValue,c=function(e){return u.value||S(e)?e:Array.isArray(e)?e.map((function(e){return e[r.value]})):e[r.value]},s=function(e){return S(e)?"single"===i.value?{}:[]:e};return{update:function(e){o.value=s(e);var l=c(e);t.emit("change",l),t.emit("input",l),t.emit("update:modelValue",l)}}}(u,r,{internalValue:i.internalValue}),d=function(a,u,r){var i=e(a),o=i.searchable,c=i.mode,s=r.internalValue,d=l(null),v=l(null),p=t((function(){return d.value?"".concat(d.value.length,"ch"):"tags"===c.value&&-1===[null,void 0].indexOf(s.value)&&s.value.length?"1ch":"100%"}));return n(d,(function(e){u.emit("search-change",e)})),{search:d,input:v,tagsSearchWidth:p,clearSearch:function(){d.value=""},focusSearch:function(){v.value.focus()},blurSearch:function(){o.value&&v.value.blur()}}}(u,r,{internalValue:i.internalValue}),v=function(n,a,u){var r=e(n),i=r.maxHeight,o=r.disabled,c=r.searchable,s=u.multiselect,d=u.blurInput,v=u.blurSearch,p=u.focusInput,f=u.focusSearch,h=l(!1),m=t((function(){return"".concat(i.value,"px")}));return{isOpen:h,contentMaxHeight:m,openDropdown:function(){o.value||(h.value=!0,a.emit("open"))},closeDropdown:function(){h.value=!1,a.emit("close")},open:function(){c&&c.value?f():p()},close:function(){c&&c.value?v():d()},handleInputMousedown:function(e){h.value&&!c.value&&(s.value.querySelector(".multiselect-input").dispatchEvent(new Event("blur")),s.value.querySelector(".multiselect-input").blur(),e.preventDefault())}}}(u,r,{multiselect:o.multiselect,blurInput:o.blurInput,blurSearch:d.blurSearch,focusInput:o.focusInput,focusSearch:d.focusSearch}),p=P(u,r,{externalValue:i.externalValue,internalValue:i.internalValue,currentValue:i.currentValue,search:d.search,blurSearch:d.blurSearch,clearSearch:d.clearSearch,update:s.update,blurInput:o.blurInput,pointer:c.pointer}),f=function(l,u,r){var i=e(l),o=i.id,c=i.valueProp,s=r.filteredOptions,d=r.handleOptionClick,v=r.search,p=r.pointer,f=t((function(){return s.value.filter((function(e){return!0!==e.disabled}))})),h=function(e){p.value=e},m=function(){p.value=f.value[0]||null},g=function(){p.value=null},b=function(){var e=document.getElementById(o.value).querySelector(".is-pointed");if(e){var l=e.parentElement;e.offsetTop+e.offsetHeight>l.clientHeight+l.scrollTop&&(l.scrollTop=e.offsetTop+e.offsetHeight-l.clientHeight),e.offsetTop{}),["prevent"]),["enter"])),ref:"multiselect"},[c("div",{class:"multiselect-input",tabindex:e.tabindex,onMousedown:l[20]||(l[20]=(...l)=>e.handleInputMousedown&&e.handleInputMousedown(...l)),onFocus:l[21]||(l[21]=(...l)=>e.openDropdown&&e.openDropdown(...l)),onBlur:l[22]||(l[22]=(...l)=>e.closeDropdown&&e.closeDropdown(...l)),onKeyup:[l[23]||(l[23]=i(((...l)=>e.handleEsc&&e.handleEsc(...l)),["esc"])),l[24]||(l[24]=i(((...l)=>e.selectPointer&&e.selectPointer(...l)),["enter"]))],onKeydown:[l[25]||(l[25]=i(o(((...l)=>e.handleBackspace&&e.handleBackspace(...l)),["prevent"]),["delete"])),l[26]||(l[26]=i(o(((...l)=>e.backwardPointer&&e.backwardPointer(...l)),["prevent"]),["up"])),l[27]||(l[27]=i(o(((...l)=>e.forwardPointer&&e.forwardPointer(...l)),["prevent"]),["down"]))]},[s(" Single label "),"single"==t.mode&&e.hasSelected&&!e.search&&e.internalValue?d(e.$slots,"singlelabel",{key:0,value:e.internalValue},(()=>[c("div",D,v(e.internalValue[t.label]),1)])):s("v-if",!0),s(" Multiple label "),"multiple"==t.mode&&e.hasSelected&&!e.search?d(e.$slots,"multiplelabel",{key:1,values:e.internalValue},(()=>[c("div",A,v(e.multipleLabelText),1)])):s("v-if",!0),s(" Search "),"tags"!==t.mode&&t.searchable&&!t.disabled?(u(),r("div",j,[p(c("input",{"onUpdate:modelValue":l[1]||(l[1]=l=>e.search=l),onFocus:l[2]||(l[2]=o(((...l)=>e.openDropdown&&e.openDropdown(...l)),["stop"])),onBlur:l[3]||(l[3]=o(((...l)=>e.closeDropdown&&e.closeDropdown(...l)),["stop"])),onKeyup:[l[4]||(l[4]=i(o(((...l)=>e.handleEsc&&e.handleEsc(...l)),["stop"]),["esc"])),l[5]||(l[5]=i(o(((...l)=>e.selectPointer&&e.selectPointer(...l)),["stop"]),["enter"]))],onKeydown:[l[6]||(l[6]=i(((...l)=>e.handleSearchBackspace&&e.handleSearchBackspace(...l)),["delete"])),l[7]||(l[7]=i(o(((...l)=>e.backwardPointer&&e.backwardPointer(...l)),["stop"]),["up"])),l[8]||(l[8]=i(o(((...l)=>e.forwardPointer&&e.forwardPointer(...l)),["stop"]),["down"]))],ref:"input"},null,544),[[f,e.search]])])):s("v-if",!0),s(" Tags (with search) "),"tags"==t.mode?(u(),r("div",I,[(u(!0),r(h,null,m(e.internalValue,((n,a,i)=>(u(),r("span",{key:i},[d(e.$slots,"tag",{option:n,handleTagRemove:e.handleTagRemove,disabled:t.disabled},(()=>[c("div",M,[g(v(n[t.label])+" ",1),t.disabled?s("v-if",!0):(u(),r("i",{key:0,onClick:l[9]||(l[9]=o((()=>{}),["prevent"])),onMousedown:o((l=>e.handleTagRemove(n,l)),["prevent","stop"])},null,40,["onMousedown"]))])]))])))),128)),t.searchable&&!t.disabled?(u(),r("div",{key:0,class:"multiselect-search",style:{width:e.tagsSearchWidth}},[p(c("input",{"onUpdate:modelValue":l[10]||(l[10]=l=>e.search=l),onFocus:l[11]||(l[11]=o(((...l)=>e.openDropdown&&e.openDropdown(...l)),["stop"])),onBlur:l[12]||(l[12]=o(((...l)=>e.closeDropdown&&e.closeDropdown(...l)),["stop"])),onKeyup:[l[13]||(l[13]=i(o(((...l)=>e.handleEsc&&e.handleEsc(...l)),["stop"]),["esc"])),l[14]||(l[14]=i(o(((...l)=>e.handleAddTag&&e.handleAddTag(...l)),["stop"]),["enter"])),l[15]||(l[15]=i(o(((...l)=>e.handleAddTag&&e.handleAddTag(...l)),["stop"]),["space"]))],onKeydown:[l[16]||(l[16]=i(((...l)=>e.handleSearchBackspace&&e.handleSearchBackspace(...l)),["delete"])),l[17]||(l[17]=i(o(((...l)=>e.backwardPointer&&e.backwardPointer(...l)),["stop"]),["up"])),l[18]||(l[18]=i(o(((...l)=>e.forwardPointer&&e.forwardPointer(...l)),["stop"]),["down"]))],style:{width:e.tagsSearchWidth},ref:"input"},null,36),[[f,e.search]])],4)):s("v-if",!0)])):s("v-if",!0),s(" Placeholder "),!t.placeholder||e.hasSelected||e.search?s("v-if",!0):d(e.$slots,"placeholder",{key:4},(()=>[c("div",C,v(t.placeholder),1)])),c(b,{name:"multiselect-loading"},{default:y((()=>[p(c("div",E,null,512),[[w,e.busy]])])),_:1}),"single"!==t.mode&&e.hasSelected&&!t.disabled?(u(),r("a",{key:5,class:"multiselect-clear",onClick:l[19]||(l[19]=o(((...l)=>e.clear&&e.clear(...l)),["prevent"]))})):s("v-if",!0)],40,["tabindex"]),s(" Options "),e.resolving&&t.clearOnSearch?s("v-if",!0):(u(),r(b,{key:0,name:"multiselect",onAfterLeave:e.clearSearch},{default:y((()=>[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("span",{tabindex:-1,class:["multiselect-option",{"is-pointed":e.isPointed(n),"is-selected":e.isSelected(n),"is-disabled":e.isDisabled(n)}],key:i,onMousedown:l[28]||(l[28]=o((()=>{}),["prevent"])),onMouseenter:l=>e.setPointer(n),onClick:o((l=>e.handleOptionClick(n)),["stop","prevent"])},[d(e.$slots,"option",{option:n,search:e.search},(()=>[c("span",null,v(n[t.label]),1)]))],42,["onMouseenter","onClick"])))),128)),p(c("span",null,[d(e.$slots,"nooptions",{},(()=>[c("div",N,v(t.noOptionsText),1)]))],512),[[w,e.noOptions]]),p(c("span",null,[d(e.$slots,"noresults",{},(()=>[c("div",H,v(t.noResultsText),1)]))],512),[[w,e.noResults]]),d(e.$slots,"afterlist")],4),[[w,e.isOpen&&t.showOptions]])])),_:3},8,["onAfterLeave"])),s(" Hacky input element to show HTML5 required warning "),t.required?(u(),r("input",{key:1,class:"multiselect-fake-input",tabindex:"-1",value:e.textValue,required:""},null,8,["value"])):s("v-if",!0)],42,["id"])},B.__file="src/Multiselect.vue";export default B; +import{toRefs as e,ref as l,computed as t,watch as n,nextTick as a,openBlock as u,createBlock as r,withKeys as o,withModifiers as i,createVNode as c,createCommentVNode as s,renderSlot as d,toDisplayString as v,Fragment as p,renderList as f,createTextVNode as h,Transition as m,withCtx as g,withDirectives as b,vShow as y}from"vue";function S(e){return-1!==[null,void 0,!1].indexOf(e)}function w(e){return String(e).toLowerCase().trim()}var O={};function k(e){return(k="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 q(e,l,t){return l in e?Object.defineProperty(e,l,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[l]=t,e}function x(a,u,r){var o=e(a),i=o.options,c=o.mode,s=o.trackBy,d=o.limit,v=o.hideSelected,p=o.createTag,f=o.label,h=o.appendNewTag,m=o.multipleLabel,g=o.object,b=o.loading,y=o.delay,x=o.resolveOnLoad,P=o.minChars,V=o.filterResults,T=o.clearOnSearch,B=o.clearOnSelect,I=o.valueProp,D=o.canDeselect,A=o.max,j=r.internalValue,M=r.externalValue,C=r.currentValue,E=r.search,N=r.blurSearch,H=r.clearSearch,$=r.update,L=r.blurInput,R=r.pointer,K=l([]),F=l([]),J=l(!1),_=t((function(){var e,l=F.value||[];return e=l,"[object Object]"===Object.prototype.toString.call(e)&&(l=Object.keys(l).map((function(e){var t,n=l[e];return q(t={},I.value,e),q(t,s.value,n),q(t,f.value,n),t}))),l=l.map((function(e,l){var t;return"object"===k(e)?e:(q(t={},I.value,l),q(t,s.value,e),q(t,f.value,e),t)})),K.value.length&&(l=l.concat(K.value)),l})),W=t((function(){var e=_.value;return X.value.length&&(e=X.value.concat(e)),E.value&&V.value&&(e=e.filter((function(e){return-1!==w(e[s.value]).indexOf(w(E.value))}))),v.value&&(e=e.filter((function(e){return!se(e)}))),d.value>0&&(e=e.slice(0,d.value)),e})),U=t((function(){switch(c.value){case"single":return!S(j.value[I.value]);case"multiple":case"tags":return!S(j.value)&&j.value.length>0}})),z=t((function(){return void 0!==m&&void 0!==m.value?m.value(j.value):j.value&&j.value.length>1?"".concat(j.value.length," options selected"):"1 option selected"})),G=t((function(){return!_.value.length&&!J.value})),Q=t((function(){return _.value.length>0&&0==W.value.length})),X=t((function(){var e;return!1!==p.value&&E.value?-1!==ce(E.value)?[]:[(e={},q(e,I.value,E.value),q(e,f.value,E.value),q(e,s.value,E.value),e)]:[]})),Y=t((function(){switch(c.value){case"single":return null;case"multiple":case"tags":return[]}})),Z=t((function(){return b.value||J.value})),ee=function(e){switch("object"!==k(e)&&(e=ie(e)),c.value){case"single":$(e);break;case"multiple":case"tags":$(j.value.concat(e))}u.emit("select",te(e))},le=function(e){switch("object"!==k(e)&&(e=ie(e)),c.value){case"single":ae();break;case"tags":case"multiple":$(j.value.filter((function(l){return l[I.value]!=e[I.value]})))}u.emit("deselect",te(e))},te=function(e){return g.value?e:e[I.value]},ne=function(e){le(e)},ae=function(){$(Y.value)},ue=function(e){switch(c.value){case"single":return!S(j.value)&&j.value[I.value]==e[I.value];case"tags":case"multiple":return!S(j.value)&&-1!==j.value.map((function(e){return e[I.value]})).indexOf(e[I.value])}},re=function(e){return!0===e.disabled},oe=function(){return!(void 0===A||-1===A.value||!U.value&&A.value>0)&&j.value.length>=A.value},ie=function(e){return _.value[_.value.map((function(e){return String(e[I.value])})).indexOf(String(e))]},ce=function(e){return _.value.map((function(e){return w(e[s.value])})).indexOf(w(e))},se=function(e){return"tags"===c.value&&v.value&&ue(e)},de=function(e){K.value.push(e)},ve=function(){S(M.value)||(j.value=fe(M.value))},pe=function(e){J.value=!0,i.value(E.value).then((function(l){F.value=l,"function"==typeof e&&e(l),J.value=!1}))},fe=function(e){return S(e)?"single"===c.value?{}:[]:g.value?e:"single"===c.value?ie(e)||{}:e.filter((function(e){return!!ie(e)})).map((function(e){return ie(e)}))};if("single"!==c.value&&!S(M.value)&&!Array.isArray(M.value))throw new Error('v-model must be an array when using "'.concat(c.value,'" mode'));return i&&"function"==typeof i.value?x.value?pe(ve):1==g.value&&ve():(F.value=i&&i.value?i.value:[],ve()),y.value>-1&&n(E,(function(e){e.lengthe.length)&&(l=e.length);for(var t=0,n=new Array(l);t["enter"]},required:{type:Boolean,required:!1,default:!1}},setup(u,r){const o=function(n,a){var u=e(n),r=u.value,o=u.modelValue,i=u.mode,c=u.valueProp,s=l("single"!==i.value?[]:{}),d=void 0!==a.expose?o:r,v=t((function(){return Object.keys(s.value).length?"single"!==i.value?s.value.map((function(e){return e[c.value]})):s.value[c.value]:s.value})),p=t((function(){return"single"!==i.value?s.value.map((function(e){return e[c.value]})).join(","):s.value[c.value]}));return{internalValue:s,externalValue:d,currentValue:v,textValue:p}}(u,r),i=function(n,a,u){var r=e(n),o=r.searchable,i=(r.id,l(null)),c=t((function(){return o.value?-1:0}));return{multiselect:i,tabindex:c,focusInput:function(){i.value.querySelector(".multiselect-input").focus()},blurInput:function(){i.value.querySelector(".multiselect-input").blur()}}}(u),c={pointer:l(null)},s=function(l,t,n){var a=e(l),u=a.object,r=a.valueProp,o=a.mode,i=n.internalValue,c=function(e){return u.value||S(e)?e:Array.isArray(e)?e.map((function(e){return e[r.value]})):e[r.value]},s=function(e){return S(e)?"single"===o.value?{}:[]:e};return{update:function(e){i.value=s(e);var l=c(e);t.emit("change",l),t.emit("input",l),t.emit("update:modelValue",l)}}}(u,r,{internalValue:o.internalValue}),d=function(a,u,r){var o=e(a),i=o.searchable,c=o.mode,s=r.internalValue,d=l(null),v=l(null),p=t((function(){return d.value?"".concat(d.value.length,"ch"):"tags"===c.value&&-1===[null,void 0].indexOf(s.value)&&s.value.length?"1ch":"100%"}));return n(d,(function(e){u.emit("search-change",e)})),{search:d,input:v,tagsSearchWidth:p,clearSearch:function(){d.value=""},focusSearch:function(){v.value.focus()},blurSearch:function(){i.value&&v.value.blur()}}}(u,r,{internalValue:o.internalValue}),v=function(n,a,u){var r=e(n),o=r.maxHeight,i=r.disabled,c=r.searchable,s=u.multiselect,d=u.blurInput,v=u.blurSearch,p=u.focusInput,f=u.focusSearch,h=l(!1),m=t((function(){return"".concat(o.value,"px")}));return{isOpen:h,contentMaxHeight:m,openDropdown:function(){i.value||(h.value=!0,a.emit("open"))},closeDropdown:function(){h.value=!1,a.emit("close")},open:function(){c&&c.value?f():p()},close:function(){c&&c.value?v():d()},handleInputMousedown:function(e){h.value&&!c.value&&(s.value.querySelector(".multiselect-input").dispatchEvent(new Event("blur")),s.value.querySelector(".multiselect-input").blur(),e.preventDefault())}}}(u,r,{multiselect:i.multiselect,blurInput:i.blurInput,blurSearch:d.blurSearch,focusInput:i.focusInput,focusSearch:d.focusSearch}),p=x(u,r,{externalValue:o.externalValue,internalValue:o.internalValue,currentValue:o.currentValue,search:d.search,blurSearch:d.blurSearch,clearSearch:d.clearSearch,update:s.update,blurInput:i.blurInput,pointer:c.pointer}),f=function(l,u,r){var o=e(l),i=o.id,c=o.valueProp,s=r.filteredOptions,d=r.handleOptionClick,v=r.search,p=r.pointer,f=t((function(){return s.value.filter((function(e){return!0!==e.disabled}))})),h=function(e){p.value=e},m=function(){p.value=f.value[0]||null},g=function(){p.value=null},b=function(){var e=document.getElementById(i.value).querySelector(".is-pointed");if(e){var l=e.parentElement;e.offsetTop+e.offsetHeight>l.clientHeight+l.scrollTop&&(l.scrollTop=e.offsetTop+e.offsetHeight-l.clientHeight),e.offsetTop{}),["prevent"]),["enter"])),ref:"multiselect"},[c("div",{class:"multiselect-input",tabindex:e.tabindex,onMousedown:l[22]||(l[22]=(...l)=>e.handleInputMousedown&&e.handleInputMousedown(...l)),onFocus:l[23]||(l[23]=(...l)=>e.openDropdown&&e.openDropdown(...l)),onBlur:l[24]||(l[24]=(...l)=>e.closeDropdown&&e.closeDropdown(...l)),onKeyup:[l[25]||(l[25]=o(((...l)=>e.handleEsc&&e.handleEsc(...l)),["esc"])),l[26]||(l[26]=o(((...l)=>e.selectPointer&&e.selectPointer(...l)),["enter"]))],onKeydown:[l[27]||(l[27]=o(i(((...l)=>e.handleBackspace&&e.handleBackspace(...l)),["prevent"]),["delete"])),l[28]||(l[28]=o(i(((...l)=>e.backwardPointer&&e.backwardPointer(...l)),["prevent"]),["up"])),l[29]||(l[29]=o(i(((...l)=>e.forwardPointer&&e.forwardPointer(...l)),["prevent"]),["down"]))]},[s(" Single label "),"single"==t.mode&&e.hasSelected&&!e.search&&e.internalValue?d(e.$slots,"singlelabel",{key:0,value:e.internalValue},(()=>[c("div",B,v(e.internalValue[t.label]),1)])):s("v-if",!0),s(" Multiple label "),"multiple"==t.mode&&e.hasSelected&&!e.search?d(e.$slots,"multiplelabel",{key:1,values:e.internalValue},(()=>[c("div",I,v(e.multipleLabelText),1)])):s("v-if",!0),s(" Search "),"tags"!==t.mode&&t.searchable&&!t.disabled?(u(),r("div",D,[c("input",{modelValue:e.search,value:e.search,onFocus:l[1]||(l[1]=i(((...l)=>e.openDropdown&&e.openDropdown(...l)),["stop"])),onBlur:l[2]||(l[2]=i(((...l)=>e.closeDropdown&&e.closeDropdown(...l)),["stop"])),onKeyup:[l[3]||(l[3]=o(i(((...l)=>e.handleEsc&&e.handleEsc(...l)),["stop"]),["esc"])),l[4]||(l[4]=o(i(((...l)=>e.selectPointer&&e.selectPointer(...l)),["stop"]),["enter"])),l[8]||(l[8]=(...l)=>e.handleSearchInput&&e.handleSearchInput(...l))],onKeydown:[l[5]||(l[5]=o(((...l)=>e.handleSearchBackspace&&e.handleSearchBackspace(...l)),["delete"])),l[6]||(l[6]=o(i(((...l)=>e.backwardPointer&&e.backwardPointer(...l)),["stop"]),["up"])),l[7]||(l[7]=o(i(((...l)=>e.forwardPointer&&e.forwardPointer(...l)),["stop"]),["down"]))],onSelect:l[9]||(l[9]=(...l)=>e.handleSearchInput&&e.handleSearchInput(...l)),ref:"input"},null,40,["modelValue","value"])])):s("v-if",!0),s(" Tags (with search) "),"tags"==t.mode?(u(),r("div",A,[(u(!0),r(p,null,f(e.internalValue,((n,a,o)=>(u(),r("span",{key:o},[d(e.$slots,"tag",{option:n,handleTagRemove:e.handleTagRemove,disabled:t.disabled},(()=>[c("div",j,[h(v(n[t.label])+" ",1),t.disabled?s("v-if",!0):(u(),r("i",{key:0,onClick:l[10]||(l[10]=i((()=>{}),["prevent"])),onMousedown:i((l=>e.handleTagRemove(n,l)),["prevent","stop"])},null,40,["onMousedown"]))])]))])))),128)),t.searchable&&!t.disabled?(u(),r("div",{key:0,class:"multiselect-search",style:{width:e.tagsSearchWidth}},[c("input",{modelValue:e.search,value:e.search,onFocus:l[11]||(l[11]=i(((...l)=>e.openDropdown&&e.openDropdown(...l)),["stop"])),onBlur:l[12]||(l[12]=i(((...l)=>e.closeDropdown&&e.closeDropdown(...l)),["stop"])),onKeyup:[l[13]||(l[13]=o(i(((...l)=>e.handleEsc&&e.handleEsc(...l)),["stop"]),["esc"])),l[14]||(l[14]=o(i(((...l)=>e.handleAddTag&&e.handleAddTag(...l)),["stop"]),["enter"])),l[15]||(l[15]=o(i(((...l)=>e.handleAddTag&&e.handleAddTag(...l)),["stop"]),["space"])),l[19]||(l[19]=(...l)=>e.handleSearchInput&&e.handleSearchInput(...l))],onKeydown:[l[16]||(l[16]=o(((...l)=>e.handleSearchBackspace&&e.handleSearchBackspace(...l)),["delete"])),l[17]||(l[17]=o(i(((...l)=>e.backwardPointer&&e.backwardPointer(...l)),["stop"]),["up"])),l[18]||(l[18]=o(i(((...l)=>e.forwardPointer&&e.forwardPointer(...l)),["stop"]),["down"]))],onSelect:l[20]||(l[20]=(...l)=>e.handleSearchInput&&e.handleSearchInput(...l)),style:{width:e.tagsSearchWidth},ref:"input"},null,44,["modelValue","value"])],4)):s("v-if",!0)])):s("v-if",!0),s(" Placeholder "),!t.placeholder||e.hasSelected||e.search?s("v-if",!0):d(e.$slots,"placeholder",{key:4},(()=>[c("div",M,v(t.placeholder),1)])),c(m,{name:"multiselect-loading"},{default:g((()=>[b(c("div",C,null,512),[[y,e.busy]])])),_:1}),"single"!==t.mode&&e.hasSelected&&!t.disabled?(u(),r("a",{key:5,class:"multiselect-clear",onClick:l[21]||(l[21]=i(((...l)=>e.clear&&e.clear(...l)),["prevent"]))})):s("v-if",!0)],40,["tabindex"]),s(" Options "),e.resolving&&t.clearOnSearch?s("v-if",!0):(u(),r(m,{key:0,name:"multiselect",onAfterLeave:e.clearSearch},{default:g((()=>[b(c("div",{class:"multiselect-options",style:{maxHeight:e.contentMaxHeight}},[d(e.$slots,"beforelist"),(u(!0),r(p,null,f(e.filteredOptions,((n,a,o)=>(u(),r("span",{tabindex:-1,class:["multiselect-option",{"is-pointed":e.isPointed(n),"is-selected":e.isSelected(n),"is-disabled":e.isDisabled(n)}],key:o,onMousedown:l[30]||(l[30]=i((()=>{}),["prevent"])),onMouseenter:l=>e.setPointer(n),onClick:i((l=>e.handleOptionClick(n)),["stop","prevent"])},[d(e.$slots,"option",{option:n,search:e.search},(()=>[c("span",null,v(n[t.label]),1)]))],42,["onMouseenter","onClick"])))),128)),b(c("span",null,[d(e.$slots,"nooptions",{},(()=>[c("div",E,v(t.noOptionsText),1)]))],512),[[y,e.noOptions]]),b(c("span",null,[d(e.$slots,"noresults",{},(()=>[c("div",N,v(t.noResultsText),1)]))],512),[[y,e.noResults]]),d(e.$slots,"afterlist")],4),[[y,e.isOpen&&t.showOptions]])])),_:3},8,["onAfterLeave"])),s(" Hacky input element to show HTML5 required warning "),t.required?(u(),r("input",{key:1,class:"multiselect-fake-input",tabindex:"-1",value:e.textValue,required:""},null,8,["value"])):s("v-if",!0)],42,["id"])},T.__file="src/Multiselect.vue";export default T; diff --git a/dist/multiselect.vue2.global.js b/dist/multiselect.vue2.global.js index 16bb3ac..944cc9e 100644 --- a/dist/multiselect.vue2.global.js +++ b/dist/multiselect.vue2.global.js @@ -1 +1 @@ -var VueformMultiselect=function(e){"use strict";function t(e){return-1!==[null,void 0,!1].indexOf(e)}function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e){return function(e){if(Array.isArray(e))return u(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n0&&(e=e.slice(0,f.value)),e})),F=e.computed((function(){switch(d.value){case"single":return!t(T.value[P.value]);case"multiple":case"tags":return!t(T.value)&&T.value.length>0}})),J=e.computed((function(){return void 0!==g&&void 0!==g.value?g.value(T.value):T.value&&T.value.length>1?"".concat(T.value.length," options selected"):"1 option selected"})),W=e.computed((function(){return!$.value.length&&!M.value})),X=e.computed((function(){return $.value.length>0&&0==L.value.length})),z=e.computed((function(){var e;return!1!==h.value&&E.value?-1!==re(E.value)?[]:[(e={},a(e,P.value,E.value),a(e,m.value,E.value),a(e,v.value,E.value),e)]:[]})),G=e.computed((function(){switch(d.value){case"single":return null;case"multiple":case"tags":return[]}})),K=e.computed((function(){return k.value||M.value})),Q=function(e){switch("object"!==n(e)&&(e=ue(e)),d.value){case"single":N(e);break;case"multiple":case"tags":N(T.value.concat(e))}u.emit("select",Z(e))},Y=function(e){switch("object"!==n(e)&&(e=ue(e)),d.value){case"single":te();break;case"tags":case"multiple":N(T.value.filter((function(t){return t[P.value]!=e[P.value]})))}u.emit("deselect",Z(e))},Z=function(e){return b.value?e:e[P.value]},ee=function(e){Y(e)},te=function(){N(G.value)},ne=function(e){switch(d.value){case"single":return!t(T.value)&&T.value[P.value]==e[P.value];case"tags":case"multiple":return!t(T.value)&&-1!==T.value.map((function(e){return e[P.value]})).indexOf(e[P.value])}},ae=function(e){return!0===e.disabled},le=function(){return!(void 0===D||-1===D.value||!F.value&&D.value>0)&&T.value.length>=D.value},ue=function(e){return $.value[$.value.map((function(e){return String(e[P.value])})).indexOf(String(e))]},re=function(e){return $.value.map((function(e){return r(e[v.value])})).indexOf(r(e))},ie=function(e){return"tags"===d.value&&p.value&&ne(e)},oe=function(e){H.value.push(e)},ce=function(){t(V.value)||(T.value=de(V.value))},se=function(e){M.value=!0,s.value(E.value).then((function(t){U.value=t,"function"==typeof e&&e(t),M.value=!1}))},de=function(e){return t(e)?"single"===d.value?{}:[]:b.value?e:"single"===d.value?ue(e)||{}:e.filter((function(e){return!!ue(e)})).map((function(e){return ue(e)}))};if("single"!==d.value&&!t(V.value)&&!Array.isArray(V.value))throw new Error('v-model must be an array when using "'.concat(d.value,'" mode'));return s&&"function"==typeof s.value?_.value?se(ce):1==b.value&&ce():(U.value=s&&s.value?s.value:[],ce()),w.value>-1&&e.watch(E,(function(e){e.length["enter"]},required:{type:Boolean,required:!1,default:!1}},setup(n,a){const u=function(t,n){var a=e.toRefs(t),l=a.value,u=a.modelValue,r=a.mode,i=a.valueProp,o=e.ref("single"!==r.value?[]:{}),c=void 0!==n.expose?u:l,s=e.computed((function(){return Object.keys(o.value).length?"single"!==r.value?o.value.map((function(e){return e[i.value]})):o.value[i.value]:o.value})),d=e.computed((function(){return"single"!==r.value?o.value.map((function(e){return e[i.value]})).join(","):o.value[i.value]}));return{internalValue:o,externalValue:c,currentValue:s,textValue:d}}(n,a),r=function(t,n,a){var l=e.toRefs(t),u=l.searchable,r=(l.id,e.ref(null)),i=e.computed((function(){return u.value?-1:0}));return{multiselect:r,tabindex:i,focusInput:function(){r.value.querySelector(".multiselect-input").focus()},blurInput:function(){r.value.querySelector(".multiselect-input").blur()}}}(n),i={pointer:e.ref(null)},c=function(n,a,l){var u=e.toRefs(n),r=u.object,i=u.valueProp,o=u.mode,c=l.internalValue,s=function(e){return r.value||t(e)?e:Array.isArray(e)?e.map((function(e){return e[i.value]})):e[i.value]},d=function(e){return t(e)?"single"===o.value?{}:[]:e};return{update:function(e){c.value=d(e);var t=s(e);a.emit("change",t),a.emit("input",t),a.emit("update:modelValue",t)}}}(n,a,{internalValue:u.internalValue}),s=function(t,n,a){var l=e.toRefs(t),u=l.searchable,r=l.mode,i=a.internalValue,o=e.ref(null),c=e.ref(null),s=e.computed((function(){return o.value?"".concat(o.value.length,"ch"):"tags"===r.value&&-1===[null,void 0].indexOf(i.value)&&i.value.length?"1ch":"100%"}));return e.watch(o,(function(e){n.emit("search-change",e)})),{search:o,input:c,tagsSearchWidth:s,clearSearch:function(){o.value=""},focusSearch:function(){c.value.focus()},blurSearch:function(){u.value&&c.value.blur()}}}(n,a,{internalValue:u.internalValue}),d=function(t,n,a){var l=e.toRefs(t),u=l.maxHeight,r=l.disabled,i=l.searchable,o=a.multiselect,c=a.blurInput,s=a.blurSearch,d=a.focusInput,v=a.focusSearch,f=e.ref(!1),p=e.computed((function(){return"".concat(u.value,"px")}));return{isOpen:f,contentMaxHeight:p,openDropdown:function(){r.value||(f.value=!0,n.emit("open"))},closeDropdown:function(){f.value=!1,n.emit("close")},open:function(){i&&i.value?v():d()},close:function(){i&&i.value?s():c()},handleInputMousedown:function(e){f.value&&!i.value&&(o.value.querySelector(".multiselect-input").dispatchEvent(new Event("blur")),o.value.querySelector(".multiselect-input").blur(),e.preventDefault())}}}(n,a,{multiselect:r.multiselect,blurInput:r.blurInput,blurSearch:s.blurSearch,focusInput:r.focusInput,focusSearch:s.focusSearch}),v=o(n,a,{externalValue:u.externalValue,internalValue:u.internalValue,currentValue:u.currentValue,search:s.search,blurSearch:s.blurSearch,clearSearch:s.clearSearch,update:c.update,blurInput:r.blurInput,pointer:i.pointer}),f=function(t,n,a){var l=e.toRefs(t),u=l.id,r=l.valueProp,i=a.filteredOptions,o=a.handleOptionClick,c=a.search,s=a.pointer,d=e.computed((function(){return i.value.filter((function(e){return!0!==e.disabled}))})),v=function(e){s.value=e},f=function(){s.value=d.value[0]||null},p=function(){s.value=null},h=function(){var e=document.getElementById(u.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTope.length)&&(t=e.length);for(var n=0,l=new Array(t);n0&&(e=e.slice(0,v.value)),e})),F=e.computed((function(){switch(d.value){case"single":return!t(V.value[P.value]);case"multiple":case"tags":return!t(V.value)&&V.value.length>0}})),J=e.computed((function(){return void 0!==g&&void 0!==g.value?g.value(V.value):V.value&&V.value.length>1?"".concat(V.value.length," options selected"):"1 option selected"})),W=e.computed((function(){return!$.value.length&&!M.value})),X=e.computed((function(){return $.value.length>0&&0==L.value.length})),z=e.computed((function(){var e;return!1!==h.value&&E.value?-1!==re(E.value)?[]:[(e={},l(e,P.value,E.value),l(e,y.value,E.value),l(e,f.value,E.value),e)]:[]})),G=e.computed((function(){switch(d.value){case"single":return null;case"multiple":case"tags":return[]}})),K=e.computed((function(){return k.value||M.value})),Q=function(e){switch("object"!==n(e)&&(e=ue(e)),d.value){case"single":A(e);break;case"multiple":case"tags":A(V.value.concat(e))}u.emit("select",Z(e))},Y=function(e){switch("object"!==n(e)&&(e=ue(e)),d.value){case"single":te();break;case"tags":case"multiple":A(V.value.filter((function(t){return t[P.value]!=e[P.value]})))}u.emit("deselect",Z(e))},Z=function(e){return b.value?e:e[P.value]},ee=function(e){Y(e)},te=function(){A(G.value)},ne=function(e){switch(d.value){case"single":return!t(V.value)&&V.value[P.value]==e[P.value];case"tags":case"multiple":return!t(V.value)&&-1!==V.value.map((function(e){return e[P.value]})).indexOf(e[P.value])}},le=function(e){return!0===e.disabled},ae=function(){return!(void 0===D||-1===D.value||!F.value&&D.value>0)&&V.value.length>=D.value},ue=function(e){return $.value[$.value.map((function(e){return String(e[P.value])})).indexOf(String(e))]},re=function(e){return $.value.map((function(e){return r(e[f.value])})).indexOf(r(e))},oe=function(e){return"tags"===d.value&&p.value&&ne(e)},ie=function(e){H.value.push(e)},ce=function(){t(T.value)||(V.value=de(T.value))},se=function(e){M.value=!0,s.value(E.value).then((function(t){U.value=t,"function"==typeof e&&e(t),M.value=!1}))},de=function(e){return t(e)?"single"===d.value?{}:[]:b.value?e:"single"===d.value?ue(e)||{}:e.filter((function(e){return!!ue(e)})).map((function(e){return ue(e)}))};if("single"!==d.value&&!t(T.value)&&!Array.isArray(T.value))throw new Error('v-model must be an array when using "'.concat(d.value,'" mode'));return s&&"function"==typeof s.value?_.value?se(ce):1==b.value&&ce():(U.value=s&&s.value?s.value:[],ce()),w.value>-1&&e.watch(E,(function(e){e.length["enter"]},required:{type:Boolean,required:!1,default:!1}},setup(n,l){const u=function(t,n){var l=e.toRefs(t),a=l.value,u=l.modelValue,r=l.mode,o=l.valueProp,i=e.ref("single"!==r.value?[]:{}),c=void 0!==n.expose?u:a,s=e.computed((function(){return Object.keys(i.value).length?"single"!==r.value?i.value.map((function(e){return e[o.value]})):i.value[o.value]:i.value})),d=e.computed((function(){return"single"!==r.value?i.value.map((function(e){return e[o.value]})).join(","):i.value[o.value]}));return{internalValue:i,externalValue:c,currentValue:s,textValue:d}}(n,l),r=function(t,n,l){var a=e.toRefs(t),u=a.searchable,r=(a.id,e.ref(null)),o=e.computed((function(){return u.value?-1:0}));return{multiselect:r,tabindex:o,focusInput:function(){r.value.querySelector(".multiselect-input").focus()},blurInput:function(){r.value.querySelector(".multiselect-input").blur()}}}(n),o={pointer:e.ref(null)},c=function(n,l,a){var u=e.toRefs(n),r=u.object,o=u.valueProp,i=u.mode,c=a.internalValue,s=function(e){return r.value||t(e)?e:Array.isArray(e)?e.map((function(e){return e[o.value]})):e[o.value]},d=function(e){return t(e)?"single"===i.value?{}:[]:e};return{update:function(e){c.value=d(e);var t=s(e);l.emit("change",t),l.emit("input",t),l.emit("update:modelValue",t)}}}(n,l,{internalValue:u.internalValue}),s=function(t,n,l){var a=e.toRefs(t),u=a.searchable,r=a.mode,o=l.internalValue,i=e.ref(null),c=e.ref(null),s=e.computed((function(){return i.value?"".concat(i.value.length,"ch"):"tags"===r.value&&-1===[null,void 0].indexOf(o.value)&&o.value.length?"1ch":"100%"}));return e.watch(i,(function(e){n.emit("search-change",e)})),{search:i,input:c,tagsSearchWidth:s,clearSearch:function(){i.value=""},focusSearch:function(){c.value.focus()},blurSearch:function(){u.value&&c.value.blur()}}}(n,l,{internalValue:u.internalValue}),d=function(t,n,l){var a=e.toRefs(t),u=a.maxHeight,r=a.disabled,o=a.searchable,i=l.multiselect,c=l.blurInput,s=l.blurSearch,d=l.focusInput,f=l.focusSearch,v=e.ref(!1),p=e.computed((function(){return"".concat(u.value,"px")}));return{isOpen:v,contentMaxHeight:p,openDropdown:function(){r.value||(v.value=!0,n.emit("open"))},closeDropdown:function(){v.value=!1,n.emit("close")},open:function(){o&&o.value?f():d()},close:function(){o&&o.value?s():c()},handleInputMousedown:function(e){v.value&&!o.value&&(i.value.querySelector(".multiselect-input").dispatchEvent(new Event("blur")),i.value.querySelector(".multiselect-input").blur(),e.preventDefault())}}}(n,l,{multiselect:r.multiselect,blurInput:r.blurInput,blurSearch:s.blurSearch,focusInput:r.focusInput,focusSearch:s.focusSearch}),f=i(n,l,{externalValue:u.externalValue,internalValue:u.internalValue,currentValue:u.currentValue,search:s.search,blurSearch:s.blurSearch,clearSearch:s.clearSearch,update:c.update,blurInput:r.blurInput,pointer:o.pointer}),v=function(t,n,l){var a=e.toRefs(t),u=a.id,r=a.valueProp,o=l.filteredOptions,i=l.handleOptionClick,c=l.search,s=l.pointer,d=e.computed((function(){return o.value.filter((function(e){return!0!==e.disabled}))})),f=function(e){s.value=e},v=function(){s.value=d.value[0]||null},p=function(){s.value=null},h=function(){var e=document.getElementById(u.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop0&&(e=e.slice(0,y.value)),e})),X=n((function(){switch(p.value){case"single":return!u(E.value[T.value]);case"multiple":case"tags":return!u(E.value)&&E.value.length>0}})),z=n((function(){return void 0!==_&&void 0!==_.value?_.value(E.value):E.value&&E.value.length>1?"".concat(E.value.length," options selected"):"1 option selected"})),G=n((function(){return!J.value.length&&!F.value})),K=n((function(){return J.value.length>0&&0==W.value.length})),Q=n((function(){var e;return!1!==g.value&&j.value?-1!==ce(j.value)?[]:[(e={},c(e,T.value,j.value),c(e,b.value,j.value),c(e,h.value,j.value),e)]:[]})),Y=n((function(){switch(p.value){case"single":return null;case"multiple":case"tags":return[]}})),Z=n((function(){return O.value||F.value})),ee=function(e){switch("object"!==o(e)&&(e=oe(e)),p.value){case"single":H(e);break;case"multiple":case"tags":H(E.value.concat(e))}s.emit("select",ne(e))},te=function(e){switch("object"!==o(e)&&(e=oe(e)),p.value){case"single":ae();break;case"tags":case"multiple":H(E.value.filter((function(t){return t[T.value]!=e[T.value]})))}s.emit("deselect",ne(e))},ne=function(e){return w.value?e:e[T.value]},le=function(e){te(e)},ae=function(){H(Y.value)},ue=function(e){switch(p.value){case"single":return!u(E.value)&&E.value[T.value]==e[T.value];case"tags":case"multiple":return!u(E.value)&&-1!==E.value.map((function(e){return e[T.value]})).indexOf(e[T.value])}},re=function(e){return!0===e.disabled},ie=function(){return!(void 0===B||-1===B.value||!X.value&&B.value>0)&&E.value.length>=B.value},oe=function(e){return J.value[J.value.map((function(e){return String(e[T.value])})).indexOf(String(e))]},ce=function(e){return J.value.map((function(e){return r(e[h.value])})).indexOf(r(e))},se=function(e){return"tags"===p.value&&m.value&&ue(e)},de=function(e){L.value.push(e)},ve=function(){u(A.value)||(E.value=pe(A.value))},fe=function(e){F.value=!0,f.value(j.value).then((function(t){M.value=t,"function"==typeof e&&e(t),F.value=!1}))},pe=function(e){return u(e)?"single"===p.value?{}:[]:w.value?e:"single"===p.value?oe(e)||{}:e.filter((function(e){return!!oe(e)})).map((function(e){return oe(e)}))};if("single"!==p.value&&!u(A.value)&&!Array.isArray(A.value))throw new Error('v-model must be an array when using "'.concat(p.value,'" mode'));return f&&"function"==typeof f.value?x.value?fe(ve):1==w.value&&ve():(M.value=f&&f.value?f.value:[],ve()),S.value>-1&&l(j,(function(e){e.lengthe.length)&&(t=e.length);for(var n=0,l=new Array(t);n["enter"]},required:{type:Boolean,required:!1,default:!1}},setup(r,i){const o=function(l,a){var u=e(l),r=u.value,i=u.modelValue,o=u.mode,c=u.valueProp,s=t("single"!==o.value?[]:{}),d=void 0!==a.expose?i:r,v=n((function(){return Object.keys(s.value).length?"single"!==o.value?s.value.map((function(e){return e[c.value]})):s.value[c.value]:s.value})),f=n((function(){return"single"!==o.value?s.value.map((function(e){return e[c.value]})).join(","):s.value[c.value]}));return{internalValue:s,externalValue:d,currentValue:v,textValue:f}}(r,i),c=function(l,a,u){var r=e(l),i=r.searchable,o=(r.id,t(null)),c=n((function(){return i.value?-1:0}));return{multiselect:o,tabindex:c,focusInput:function(){o.value.querySelector(".multiselect-input").focus()},blurInput:function(){o.value.querySelector(".multiselect-input").blur()}}}(r),v={pointer:t(null)},f=function(t,n,l){var a=e(t),r=a.object,i=a.valueProp,o=a.mode,c=l.internalValue,s=function(e){return r.value||u(e)?e:Array.isArray(e)?e.map((function(e){return e[i.value]})):e[i.value]},d=function(e){return u(e)?"single"===o.value?{}:[]:e};return{update:function(e){c.value=d(e);var t=s(e);n.emit("change",t),n.emit("input",t),n.emit("update:modelValue",t)}}}(r,i,{internalValue:o.internalValue}),p=function(a,u,r){var i=e(a),o=i.searchable,c=i.mode,s=r.internalValue,d=t(null),v=t(null),f=n((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 l(d,(function(e){u.emit("search-change",e)})),{search:d,input:v,tagsSearchWidth:f,clearSearch:function(){d.value=""},focusSearch:function(){v.value.focus()},blurSearch:function(){o.value&&v.value.blur()}}}(r,i,{internalValue:o.internalValue}),h=function(l,a,u){var r=e(l),i=r.maxHeight,o=r.disabled,c=r.searchable,s=u.multiselect,d=u.blurInput,v=u.blurSearch,f=u.focusInput,p=u.focusSearch,h=t(!1),y=n((function(){return"".concat(i.value,"px")}));return{isOpen:h,contentMaxHeight:y,openDropdown:function(){o.value||(h.value=!0,a.emit("open"))},closeDropdown:function(){h.value=!1,a.emit("close")},open:function(){c&&c.value?p():f()},close:function(){c&&c.value?v():d()},handleInputMousedown:function(e){h.value&&!c.value&&(s.value.querySelector(".multiselect-input").dispatchEvent(new Event("blur")),s.value.querySelector(".multiselect-input").blur(),e.preventDefault())}}}(r,i,{multiselect:c.multiselect,blurInput:c.blurInput,blurSearch:p.blurSearch,focusInput:c.focusInput,focusSearch:p.focusSearch}),y=s(r,i,{externalValue:o.externalValue,internalValue:o.internalValue,currentValue:o.currentValue,search:p.search,blurSearch:p.blurSearch,clearSearch:p.clearSearch,update:f.update,blurInput:c.blurInput,pointer:v.pointer}),m=function(t,u,r){var i=e(t),o=i.id,c=i.valueProp,s=r.filteredOptions,d=r.handleOptionClick,v=r.search,f=r.pointer,p=n((function(){return s.value.filter((function(e){return!0!==e.disabled}))})),h=function(e){f.value=e},y=function(){f.value=p.value[0]||null},m=function(){f.value=null},g=function(){var e=document.getElementById(o.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.offsetTop0&&(e=e.slice(0,y.value)),e})),X=n((function(){switch(p.value){case"single":return!u(E.value[V.value]);case"multiple":case"tags":return!u(E.value)&&E.value.length>0}})),z=n((function(){return void 0!==_&&void 0!==_.value?_.value(E.value):E.value&&E.value.length>1?"".concat(E.value.length," options selected"):"1 option selected"})),G=n((function(){return!J.value.length&&!F.value})),K=n((function(){return J.value.length>0&&0==W.value.length})),Q=n((function(){var e;return!1!==g.value&&N.value?-1!==ce(N.value)?[]:[(e={},c(e,V.value,N.value),c(e,b.value,N.value),c(e,h.value,N.value),e)]:[]})),Y=n((function(){switch(p.value){case"single":return null;case"multiple":case"tags":return[]}})),Z=n((function(){return O.value||F.value})),ee=function(e){switch("object"!==o(e)&&(e=oe(e)),p.value){case"single":H(e);break;case"multiple":case"tags":H(E.value.concat(e))}s.emit("select",ne(e))},te=function(e){switch("object"!==o(e)&&(e=oe(e)),p.value){case"single":ae();break;case"tags":case"multiple":H(E.value.filter((function(t){return t[V.value]!=e[V.value]})))}s.emit("deselect",ne(e))},ne=function(e){return w.value?e:e[V.value]},le=function(e){te(e)},ae=function(){H(Y.value)},ue=function(e){switch(p.value){case"single":return!u(E.value)&&E.value[V.value]==e[V.value];case"tags":case"multiple":return!u(E.value)&&-1!==E.value.map((function(e){return e[V.value]})).indexOf(e[V.value])}},re=function(e){return!0===e.disabled},ie=function(){return!(void 0===B||-1===B.value||!X.value&&B.value>0)&&E.value.length>=B.value},oe=function(e){return J.value[J.value.map((function(e){return String(e[V.value])})).indexOf(String(e))]},ce=function(e){return J.value.map((function(e){return r(e[h.value])})).indexOf(r(e))},se=function(e){return"tags"===p.value&&m.value&&ue(e)},de=function(e){L.value.push(e)},ve=function(){u(I.value)||(E.value=pe(I.value))},fe=function(e){F.value=!0,f.value(N.value).then((function(t){M.value=t,"function"==typeof e&&e(t),F.value=!1}))},pe=function(e){return u(e)?"single"===p.value?{}:[]:w.value?e:"single"===p.value?oe(e)||{}:e.filter((function(e){return!!oe(e)})).map((function(e){return oe(e)}))};if("single"!==p.value&&!u(I.value)&&!Array.isArray(I.value))throw new Error('v-model must be an array when using "'.concat(p.value,'" mode'));return f&&"function"==typeof f.value?x.value?fe(ve):1==w.value&&ve():(M.value=f&&f.value?f.value:[],ve()),S.value>-1&&l(N,(function(e){e.lengthe.length)&&(t=e.length);for(var n=0,l=new Array(t);n["enter"]},required:{type:Boolean,required:!1,default:!1}},setup(r,i){const o=function(l,a){var u=e(l),r=u.value,i=u.modelValue,o=u.mode,c=u.valueProp,s=t("single"!==o.value?[]:{}),d=void 0!==a.expose?i:r,v=n((function(){return Object.keys(s.value).length?"single"!==o.value?s.value.map((function(e){return e[c.value]})):s.value[c.value]:s.value})),f=n((function(){return"single"!==o.value?s.value.map((function(e){return e[c.value]})).join(","):s.value[c.value]}));return{internalValue:s,externalValue:d,currentValue:v,textValue:f}}(r,i),c=function(l,a,u){var r=e(l),i=r.searchable,o=(r.id,t(null)),c=n((function(){return i.value?-1:0}));return{multiselect:o,tabindex:c,focusInput:function(){o.value.querySelector(".multiselect-input").focus()},blurInput:function(){o.value.querySelector(".multiselect-input").blur()}}}(r),v={pointer:t(null)},f=function(t,n,l){var a=e(t),r=a.object,i=a.valueProp,o=a.mode,c=l.internalValue,s=function(e){return r.value||u(e)?e:Array.isArray(e)?e.map((function(e){return e[i.value]})):e[i.value]},d=function(e){return u(e)?"single"===o.value?{}:[]:e};return{update:function(e){c.value=d(e);var t=s(e);n.emit("change",t),n.emit("input",t),n.emit("update:modelValue",t)}}}(r,i,{internalValue:o.internalValue}),p=function(a,u,r){var i=e(a),o=i.searchable,c=i.mode,s=r.internalValue,d=t(null),v=t(null),f=n((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 l(d,(function(e){u.emit("search-change",e)})),{search:d,input:v,tagsSearchWidth:f,clearSearch:function(){d.value=""},focusSearch:function(){v.value.focus()},blurSearch:function(){o.value&&v.value.blur()}}}(r,i,{internalValue:o.internalValue}),h=function(l,a,u){var r=e(l),i=r.maxHeight,o=r.disabled,c=r.searchable,s=u.multiselect,d=u.blurInput,v=u.blurSearch,f=u.focusInput,p=u.focusSearch,h=t(!1),y=n((function(){return"".concat(i.value,"px")}));return{isOpen:h,contentMaxHeight:y,openDropdown:function(){o.value||(h.value=!0,a.emit("open"))},closeDropdown:function(){h.value=!1,a.emit("close")},open:function(){c&&c.value?p():f()},close:function(){c&&c.value?v():d()},handleInputMousedown:function(e){h.value&&!c.value&&(s.value.querySelector(".multiselect-input").dispatchEvent(new Event("blur")),s.value.querySelector(".multiselect-input").blur(),e.preventDefault())}}}(r,i,{multiselect:c.multiselect,blurInput:c.blurInput,blurSearch:p.blurSearch,focusInput:c.focusInput,focusSearch:p.focusSearch}),y=s(r,i,{externalValue:o.externalValue,internalValue:o.internalValue,currentValue:o.currentValue,search:p.search,blurSearch:p.blurSearch,clearSearch:p.clearSearch,update:f.update,blurInput:c.blurInput,pointer:v.pointer}),m=function(t,u,r){var i=e(t),o=i.id,c=i.valueProp,s=r.filteredOptions,d=r.handleOptionClick,v=r.search,f=r.pointer,p=n((function(){return s.value.filter((function(e){return!0!==e.disabled}))})),h=function(e){f.value=e},y=function(){f.value=p.value[0]||null},m=function(){f.value=null},g=function(){var e=document.getElementById(o.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 @@ -81,7 +84,8 @@ :style="{ width: tagsSearchWidth }" > diff --git a/src/composables/useKeyboard.js b/src/composables/useKeyboard.js index f52b756..0522215 100644 --- a/src/composables/useKeyboard.js +++ b/src/composables/useKeyboard.js @@ -35,6 +35,10 @@ export default function useKeyboard (props, context, dependencies) } } + const handleSearchInput = (e) => { + search.value = e.target.value + } + const handleAddTag = (e) => { if (e.keyCode === 13 && (addTagOn.value.indexOf('enter') !== -1 || !createTag.value)) { selectPointer() @@ -49,6 +53,7 @@ export default function useKeyboard (props, context, dependencies) handleBackspace, handleEsc, handleSearchBackspace, + handleSearchInput, handleAddTag, } } \ No newline at end of file