@vueform/multiselect
Advanced tools
Comparing version 2.3.4 to 2.4.0
@@ -0,1 +1,36 @@ | ||
## v2.4.0 | ||
> `2021-05-30` | ||
### 🎉 Feature | ||
- 🎉 Added accessibility (a11y) support [#22](https://github.com/vueform/multiselect/issues/22), [#179](https://github.com/vueform/multiselect/issues/179). | ||
- 🎉 Added infinite scroll [#76](https://github.com/vueform/multiselect/issues/76), [#165](https://github.com/vueform/multiselect/issues/165), [#198](https://github.com/vueform/multiselect/issues/198). | ||
- 🎉 Added RTL support [#206](https://github.com/vueform/multiselect/issues/206). | ||
- 🎉 Close on click if opened [#162](https://github.com/vueform/multiselect/issues/162). | ||
- Added `id` to input when searchable. | ||
- Re-open input on arrows & search type if closed. | ||
- Close dropdown instead of blur on select. | ||
- Added `regex` option [#138](https://github.com/vueform/multiselect/issues/138). | ||
- Scroll to first selected on open [#168](https://github.com/vueform/multiselect/issues/168). | ||
- Options are not reversed when `openPosition: true`. | ||
- Added `reverse` option. | ||
- Added `searchStart` option [#169](https://github.com/vueform/multiselect/issues/169). | ||
- Added `disabledProp` option [#202](https://github.com/vueform/multiselect/issues/202). | ||
- Added `onCreate` option [#204](https://github.com/vueform/multiselect/issues/204). | ||
- Added `select$` as second param to events and async options. | ||
- Added `isSelected` & `isPointed` to `option` slot scope [#195](https://github.com/vueform/multiselect/issues/195). | ||
### 🐞 Bug Fixes | ||
- Headless UI conflict resolved [#182](https://github.com/vueform/multiselect/issues/182). | ||
- Keep selected options when async [#228](https://github.com/vueform/multiselect/issues/228). | ||
- Show spinner even when not active [#223](https://github.com/vueform/multiselect/issues/223). | ||
- Allow `false` value [#222](https://github.com/vueform/multiselect/issues/222). | ||
- Resolve options on `minChars: 0` too [#230](https://github.com/vueform/multiselect/issues/230). | ||
- Added `keyup`, `keydown` events. | ||
- Resolved number tag creation duplicate bug. | ||
- Input height fix when `searchable` for FF. | ||
- CSS: moved max height to dropdown container from wrapper. | ||
- Vite & Nuxt 3 build warn fixes. | ||
## v2.3.4 | ||
@@ -2,0 +37,0 @@ |
@@ -1,1 +0,1 @@ | ||
var VueformMultiselect=function(e,t){"use strict";function u(e){return-1!==[null,void 0,!1].indexOf(e)}function a(e){return(a="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 l(e,t,u){return t in e?Object.defineProperty(e,t,{value:u,enumerable:!0,configurable:!0,writable:!0}):e[t]=u,e}function n(e,t){var u=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),u.push.apply(u,a)}return u}function r(e){for(var t=1;t<arguments.length;t++){var u=null!=arguments[t]?arguments[t]:{};t%2?n(Object(u),!0).forEach((function(t){l(e,t,u[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(u)):n(Object(u)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(u,t))}))}return e}function o(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 u=Object.prototype.toString.call(e).slice(8,-1);"Object"===u&&e.constructor&&(u=e.constructor.name);if("Map"===u||"Set"===u)return Array.from(e);if("Arguments"===u||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(u))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 u=0,a=new Array(t);u<t;u++)a[u]=e[u];return a}function c(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return t?String(e).toLowerCase().trim():String(e).normalize("NFD").replace(/(?:[\^`\xA8\xAF\xB4\xB7\xB8\u02B0-\u034E\u0350-\u0357\u035D-\u0362\u0374\u0375\u037A\u0384\u0385\u0483-\u0487\u0559\u0591-\u05A1\u05A3-\u05BD\u05BF\u05C1\u05C2\u05C4\u064B-\u0652\u0657\u0658\u06DF\u06E0\u06E5\u06E6\u06EA-\u06EC\u0730-\u074A\u07A6-\u07B0\u07EB-\u07F5\u0818\u0819\u08E3-\u08FE\u093C\u094D\u0951-\u0954\u0971\u09BC\u09CD\u0A3C\u0A4D\u0ABC\u0ACD\u0AFD-\u0AFF\u0B3C\u0B4D\u0B55\u0BCD\u0C4D\u0CBC\u0CCD\u0D3B\u0D3C\u0D4D\u0DCA\u0E47-\u0E4C\u0E4E\u0EBA\u0EC8-\u0ECC\u0F18\u0F19\u0F35\u0F37\u0F39\u0F3E\u0F3F\u0F82-\u0F84\u0F86\u0F87\u0FC6\u1037\u1039\u103A\u1063\u1064\u1069-\u106D\u1087-\u108D\u108F\u109A\u109B\u135D-\u135F\u17C9-\u17D3\u17DD\u1939-\u193B\u1A75-\u1A7C\u1A7F\u1AB0-\u1ABD\u1B34\u1B44\u1B6B-\u1B73\u1BAA\u1BAB\u1C36\u1C37\u1C78-\u1C7D\u1CD0-\u1CE8\u1CED\u1CF4\u1CF7-\u1CF9\u1D2C-\u1D6A\u1DC4-\u1DCF\u1DF5-\u1DF9\u1DFD-\u1DFF\u1FBD\u1FBF-\u1FC1\u1FCD-\u1FCF\u1FDD-\u1FDF\u1FED-\u1FEF\u1FFD\u1FFE\u2CEF-\u2CF1\u2E2F\u302A-\u302F\u3099-\u309C\u30FC\uA66F\uA67C\uA67D\uA67F\uA69C\uA69D\uA6F0\uA6F1\uA700-\uA721\uA788-\uA78A\uA7F8\uA7F9\uA8C4\uA8E0-\uA8F1\uA92B-\uA92E\uA953\uA9B3\uA9C0\uA9E5\uAA7B-\uAA7D\uAABF-\uAAC2\uAAF6\uAB5B-\uAB5F\uAB69-\uAB6B\uABEC\uABED\uFB1E\uFE20-\uFE2F\uFF3E\uFF40\uFF70\uFF9E\uFF9F\uFFE3]|\uD800\uDEE0|\uD802[\uDEE5\uDEE6]|\uD803[\uDD22-\uDD27\uDF46-\uDF50]|\uD804[\uDCB9\uDCBA\uDD33\uDD34\uDD73\uDDC0\uDDCA-\uDDCC\uDE35\uDE36\uDEE9\uDEEA\uDF3C\uDF4D\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC42\uDC46\uDCC2\uDCC3\uDDBF\uDDC0\uDE3F\uDEB6\uDEB7\uDF2B]|\uD806[\uDC39\uDC3A\uDD3D\uDD3E\uDD43\uDDE0\uDE34\uDE47\uDE99]|\uD807[\uDC3F\uDD42\uDD44\uDD45\uDD97]|\uD81A[\uDEF0-\uDEF4\uDF30-\uDF36]|\uD81B[\uDF8F-\uDF9F\uDFF0\uDFF1]|\uD834[\uDD67-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD]|\uD838[\uDD30-\uDD36\uDEEC-\uDEEF]|\uD83A[\uDCD0-\uDCD6\uDD44-\uDD46\uDD48-\uDD4A])/g,"").toLowerCase().trim()}function s(t,n,o){var i=e.toRefs(t),s=i.options,v=i.mode,d=i.trackBy,p=i.limit,f=i.hideSelected,m=i.createTag,g=i.createOption,h=i.label,D=i.appendNewTag,b=i.appendNewOption,y=i.multipleLabel,C=i.object,B=i.loading,F=i.delay,S=i.resolveOnLoad,k=i.minChars,O=i.filterResults,A=i.clearOnSearch,L=i.clearOnSelect,E=i.valueProp,V=i.canDeselect,P=i.max,w=i.strict,N=i.closeOnSelect,T=i.groups,q=(i.groupLabel,i.groupOptions),x=i.groupHideEmpty,I=i.groupSelect,_=e.getCurrentInstance().proxy,j=o.iv,R=o.ev,M=o.search,H=o.clearSearch,$=o.update,G=o.pointer,K=o.clearPointer,W=o.blur,U=o.focus,z=o.deactivate,J=e.ref([]),Q=e.ref([]),X=e.ref(!1),Y=e.ref(null),Z=e.computed((function(){return m.value||g.value||!1})),ee=e.computed((function(){return void 0!==D.value?D.value:void 0===b.value||b.value})),te=e.computed((function(){if(T.value){var e=Q.value||[],t=[];return e.forEach((function(e){Ee(e[q.value]).forEach((function(u){t.push(Object.assign({},u,e.disabled?{disabled:!0}:{}))}))})),t}var u=Ee(Q.value||[]);return J.value.length&&(u=u.concat(J.value)),u})),ue=e.computed((function(){return T.value?Ae((Q.value||[]).map((function(e){var t,u=Ee(e[q.value]);return r(r({},e),{},(l(t={group:!0},q.value,Le(u,!1).map((function(t){return Object.assign({},t,e.disabled?{disabled:!0}:{})}))),l(t,"__VISIBLE__",Le(u).map((function(t){return Object.assign({},t,e.disabled?{disabled:!0}:{})}))),t))}))):[]})),ae=e.computed((function(){var e=te.value;return ie.value.length&&(e=ie.value.concat(e)),e=Le(e),p.value>0&&(e=e.slice(0,p.value)),e})),le=e.computed((function(){switch(v.value){case"single":return!u(j.value[E.value]);case"multiple":case"tags":return!u(j.value)&&j.value.length>0}})),ne=e.computed((function(){return void 0!==y&&void 0!==y.value?y.value(j.value,_):j.value&&j.value.length>1?"".concat(j.value.length," options selected"):"1 option selected"})),re=e.computed((function(){return!te.value.length&&!X.value&&!ie.value.length})),oe=e.computed((function(){return te.value.length>0&&0==ae.value.length&&(M.value&&T.value||!T.value)})),ie=e.computed((function(){var e;return!1!==Z.value&&M.value?-1!==Se(M.value)?[]:[(e={},l(e,E.value,M.value),l(e,h.value,M.value),l(e,ce.value,M.value),e)]:[]})),ce=e.computed((function(){return d.value||h.value})),se=e.computed((function(){switch(v.value){case"single":return null;case"multiple":case"tags":return[]}})),ve=e.computed((function(){return B.value||X.value})),de=function(e){switch("object"!==a(e)&&(e=Fe(e)),v.value){case"single":$(e);break;case"multiple":case"tags":$(j.value.concat(e))}n.emit("select",fe(e),e)},pe=function(e){switch("object"!==a(e)&&(e=Fe(e)),v.value){case"single":ge();break;case"tags":case"multiple":$(Array.isArray(e)?j.value.filter((function(t){return-1===e.map((function(e){return e[E.value]})).indexOf(t[E.value])})):j.value.filter((function(t){return t[E.value]!=e[E.value]})))}n.emit("deselect",fe(e),e)},fe=function(e){return C.value?e:e[E.value]},me=function(e){pe(e)},ge=function(){n.emit("clear"),$(se.value)},he=function(e){if(void 0!==e.group)return"single"!==v.value&&(Be(e[q.value])&&e[q.value].length);switch(v.value){case"single":return!u(j.value)&&j.value[E.value]==e[E.value];case"tags":case"multiple":return!u(j.value)&&-1!==j.value.map((function(e){return e[E.value]})).indexOf(e[E.value])}},De=function(e){return!0===e.disabled},be=function(){return!(void 0===P||-1===P.value||!le.value&&P.value>0)&&j.value.length>=P.value},ye=function(e){void 0===Fe(e[E.value])&&Z.value&&(n.emit("tag",e[E.value]),n.emit("option",e[E.value]),ee.value&&Oe(e),H())},Ce=function(e){return void 0===e.find((function(e){return!he(e)&&!e.disabled}))},Be=function(e){return void 0===e.find((function(e){return!he(e)}))},Fe=function(e){return te.value[te.value.map((function(e){return String(e[E.value])})).indexOf(String(e))]},Se=function(e){return te.value.map((function(e){return e[ce.value]})).indexOf(e)},ke=function(e){return-1!==["tags","multiple"].indexOf(v.value)&&f.value&&he(e)},Oe=function(e){J.value.push(e)},Ae=function(e){return x.value?e.filter((function(e){return M.value?e.__VISIBLE__.length:e[q.value].length})):e.filter((function(e){return!M.value||e.__VISIBLE__.length}))},Le=function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],u=e;return M.value&&O.value&&(u=u.filter((function(e){return-1!==c(e[ce.value],w.value).indexOf(c(M.value,w.value))}))),f.value&&t&&(u=u.filter((function(e){return!ke(e)}))),u},Ee=function(e){var t,u=e;return t=u,"[object Object]"===Object.prototype.toString.call(t)&&(u=Object.keys(u).map((function(e){var t,a=u[e];return l(t={},E.value,e),l(t,ce.value,a),l(t,h.value,a),t}))),u=u.map((function(e){var t;return"object"===a(e)?e:(l(t={},E.value,e),l(t,ce.value,e),l(t,h.value,e),t)}))},Ve=function(){u(R.value)||(j.value=Ne(R.value))},Pe=function(e){return X.value=!0,new Promise((function(t,u){s.value(M.value,_).then((function(t){Q.value=t||[],"function"==typeof e&&e(t),X.value=!1})).catch((function(e){console.error(e),Q.value=[],X.value=!1})).finally((function(){t()}))}))},we=function(){if(le.value)if("single"===v.value){var e=Fe(j.value[E.value]);if(void 0!==e){var t=e[h.value];j.value[h.value]=t,C.value&&(R.value[h.value]=t)}}else j.value.forEach((function(e,t){var u=Fe(j.value[t][E.value]);if(void 0!==u){var a=u[h.value];j.value[t][h.value]=a,C.value&&(R.value[t][h.value]=a)}}))},Ne=function(e){return u(e)?"single"===v.value?{}:[]:C.value?e:"single"===v.value?Fe(e)||{}:e.filter((function(e){return!!Fe(e)})).map((function(e){return Fe(e)}))},Te=function(){Y.value=e.watch(M,(function(e){e.length<k.value||!e||(X.value=!0,A.value&&(Q.value=[]),setTimeout((function(){e==M.value&&s.value(M.value,_).then((function(t){e!=M.value&&M.value||(Q.value=t,G.value=ae.value.filter((function(e){return!0!==e.disabled}))[0]||null,X.value=!1)})).catch((function(e){console.error(e)}))}),F.value))}),{flush:"sync"})};if("single"!==v.value&&!u(R.value)&&!Array.isArray(R.value))throw new Error('v-model must be an array when using "'.concat(v.value,'" mode'));return s&&"function"==typeof s.value?S.value?Pe(Ve):1==C.value&&Ve():(Q.value=s.value,Ve()),F.value>-1&&Te(),e.watch(F,(function(e,t){Y.value&&Y.value(),e>=0&&Te()})),e.watch(R,(function(e){var t,a,l;if(u(e))j.value=Ne(e);else switch(v.value){case"single":(C.value?e[E.value]!=j.value[E.value]:e!=j.value[E.value])&&(j.value=Ne(e));break;case"multiple":case"tags":t=C.value?e.map((function(e){return e[E.value]})):e,a=j.value.map((function(e){return e[E.value]})),l=a.slice().sort(),t.length===a.length&&t.slice().sort().every((function(e,t){return e===l[t]}))||(j.value=Ne(e))}}),{deep:!0}),e.watch(s,(function(e,u){"function"==typeof t.options?S.value&&Pe((function(){Object.keys(j.value).length&&Ve()})):(Q.value=t.options,Object.keys(j.value).length||Ve(),we())})),e.watch(h,we),{fo:ae,filteredOptions:ae,hasSelected:le,multipleLabelText:ne,eo:te,extendedOptions:te,fg:ue,filteredGroups:ue,noOptions:re,noResults:oe,resolving:X,busy:ve,select:de,deselect:pe,remove:me,selectAll:function(){"single"!==v.value&&de(ae.value)},clear:ge,isSelected:he,isDisabled:De,isMax:be,getOption:Fe,handleOptionClick:function(e){if(!De(e)){switch(v.value){case"single":if(he(e))return void(V.value&&pe(e));ye(e),W(),de(e);break;case"multiple":if(he(e))return void pe(e);if(be())return;ye(e),de(e),L.value&&H(),f.value&&K(),N.value&&W();break;case"tags":if(he(e))return void pe(e);if(be())return;ye(e),L.value&&H(),de(e),f.value&&K(),N.value&&W()}N.value?z():U()}},handleGroupClick:function(e){if(!De(e)&&"single"!==v.value&&I.value){switch(v.value){case"multiple":case"tags":Ce(e[q.value])?pe(e[q.value]):de(e[q.value].filter((function(e){return-1===j.value.map((function(e){return e[E.value]})).indexOf(e[E.value])})).filter((function(e){return!e.disabled})).filter((function(e,t){return j.value.length+1+t<=P.value||-1===P.value})))}N.value&&z()}},handleTagRemove:function(e,t){0===t.button?me(e):t.preventDefault()},refreshOptions:function(e){Pe(e)},resolveOptions:Pe,refreshLabels:we}}var v={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","option","update:modelValue","change","clear"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1,default:()=>[]},id:{type:[String,Number],required:!1},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:void 0},valueProp:{type:String,required:!1,default:"value"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:void 0},createOption:{type:Boolean,required:!1,default:void 0},appendNewTag:{type:Boolean,required:!1,default:void 0},appendNewOption:{type:Boolean,required:!1,default:void 0},addTagOn:{type:Array,required:!1,default:void 0},addOptionOn:{type:Array,required:!1,default:void 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},canDeselect:{type:Boolean,required:!1,default:!0},canClear:{type:Boolean,required:!1,default:!0},max:{type:Number,required:!1,default:-1},showOptions:{type:Boolean,required:!1,default:!0},required:{type:Boolean,required:!1,default:!1},openDirection:{type:String,required:!1,default:"bottom"},nativeSupport:{type:Boolean,required:!1,default:!1},classes:{type:Object,required:!1,default:()=>({})},strict:{type:Boolean,required:!1,default:!0},closeOnSelect:{type:Boolean,required:!1,default:!0},autocomplete:{type:String,required:!1},groups:{type:Boolean,required:!1,default:!1},groupLabel:{type:String,required:!1,default:"label"},groupOptions:{type:String,required:!1,default:"options"},groupHideEmpty:{type:Boolean,required:!1,default:!1},groupSelect:{type:Boolean,required:!1,default:!0},inputType:{type:String,required:!1,default:"text"},attrs:{required:!1,type:[Object],default:()=>({})}},setup(t,a){const l=function(t,u){var a=e.toRefs(t),l=a.value,n=a.modelValue,r=a.mode,o=a.valueProp,i=e.ref("single"!==r.value?[]:{}),c=void 0!==u.expose?n:l,s=e.computed((function(){return"single"===r.value?i.value[o.value]:i.value.map((function(e){return e[o.value]}))})),v=e.computed((function(){return"single"!==r.value?i.value.map((function(e){return e[o.value]})).join(","):i.value[o.value]}));return{iv:i,internalValue:i,ev:c,externalValue:c,textValue:v,plainValue:s}}(t,a),n=function(t,u,a){var l=e.toRefs(t),n=l.groupSelect,r=l.mode,o=l.groups,i=e.ref(null),c=function(e){void 0===e||null!==e&&e.disabled||o.value&&e&&e.group&&("single"===r.value||!n.value)||(i.value=e)};return{pointer:i,setPointer:c,clearPointer:function(){c(null)}}}(t),i=function(t,u,a){var l=e.toRefs(t).disabled,n=e.ref(!1);return{isOpen:n,open:function(){n.value||l.value||(n.value=!0,u.emit("open"))},close:function(){n.value&&(n.value=!1,u.emit("close"))}}}(t,a),c=function(t,u,a){var l=e.ref(null),n=e.ref(null);return e.watch(l,(function(e){u.emit("search-change",e)})),{search:l,input:n,clearSearch:function(){l.value=""},handleSearchInput:function(e){l.value=e.target.value},handlePaste:function(e){u.emit("paste",e)}}}(0,a),v=function(t,a,l){var n=e.toRefs(t),r=n.object,o=n.valueProp,i=n.mode,c=l.iv,s=function(e){return r.value||u(e)?e:Array.isArray(e)?e.map((function(e){return e[o.value]})):e[o.value]},v=function(e){return u(e)?"single"===i.value?{}:[]:e};return{update:function(e){c.value=v(e);var t=s(e);a.emit("change",t),a.emit("input",t),a.emit("update:modelValue",t)}}}(t,a,{iv:l.iv}),d=function(t,u,a){var l=e.toRefs(t),n=l.searchable,r=l.disabled,o=a.input,i=a.open,c=a.close,s=a.clearSearch,v=e.ref(null),d=e.ref(!1),p=e.computed((function(){return n.value||r.value?-1:0})),f=function(){n.value&&o.value.blur(),v.value.blur()},m=function(){n.value&&!r.value&&o.value.focus()},g=function(){d.value=!1,setTimeout((function(){d.value||(c(),s())}),1)};return{multiselect:v,tabindex:p,isActive:d,blur:f,focus:m,handleFocus:function(){m()},activate:function(){r.value||(d.value=!0,i())},deactivate:g,handleCaretClick:function(){g(),f()}}}(t,0,{input:c.input,open:i.open,close:i.close,clearSearch:c.clearSearch}),p=s(t,a,{ev:l.ev,iv:l.iv,search:c.search,clearSearch:c.clearSearch,update:v.update,pointer:n.pointer,clearPointer:n.clearPointer,blur:d.blur,focus:d.focus,deactivate:d.deactivate}),f=function(t,u,a){var l=e.toRefs(t),n=l.valueProp,r=l.showOptions,i=l.searchable,c=l.groupLabel,s=l.groups,v=l.mode,d=l.groupSelect,p=a.fo,f=a.fg,m=a.handleOptionClick,g=a.handleGroupClick,h=a.search,D=a.pointer,b=a.setPointer,y=a.clearPointer,C=a.multiselect,B=e.computed((function(){return p.value.filter((function(e){return!e.disabled}))})),F=e.computed((function(){return f.value.filter((function(e){return!e.disabled}))})),S=e.computed((function(){return"single"!==v.value&&d.value})),k=e.computed((function(){return D.value&&D.value.group})),O=e.computed((function(){return x(D.value)})),A=e.computed((function(){var e=k.value?D.value:x(D.value),t=F.value.map((function(e){return e[c.value]})).indexOf(e[c.value]),u=F.value[t-1];return void 0===u&&(u=E.value),u})),L=e.computed((function(){var e=F.value.map((function(e){return e.label})).indexOf(k.value?D.value[c.value]:x(D.value)[c.value])+1;return F.value.length<=e&&(e=0),F.value[e]})),E=e.computed((function(){return o(F.value).slice(-1)[0]})),V=e.computed((function(){return D.value.__VISIBLE__.filter((function(e){return!e.disabled}))[0]})),P=e.computed((function(){var e=O.value.__VISIBLE__.filter((function(e){return!e.disabled}));return e[e.map((function(e){return e[n.value]})).indexOf(D.value[n.value])-1]})),w=e.computed((function(){var e=x(D.value).__VISIBLE__.filter((function(e){return!e.disabled}));return e[e.map((function(e){return e[n.value]})).indexOf(D.value[n.value])+1]})),N=e.computed((function(){return o(A.value.__VISIBLE__.filter((function(e){return!e.disabled}))).slice(-1)[0]})),T=e.computed((function(){return o(E.value.__VISIBLE__.filter((function(e){return!e.disabled}))).slice(-1)[0]})),q=function(){b(B.value[0]||null)},x=function(e){return F.value.find((function(t){return-1!==t.__VISIBLE__.map((function(e){return e[n.value]})).indexOf(e[n.value])}))},I=function(){var e=C.value.querySelector("[data-pointed]");if(e){var t=e.parentElement.parentElement;s.value&&(t=k.value?e.parentElement.parentElement.parentElement:e.parentElement.parentElement.parentElement.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(h,(function(e){i.value&&(e.length&&r.value?q():y())})),{pointer:D,canPointGroups:S,isPointed:function(e){return!(!D.value||!(!e.group&&D.value[n.value]==e[n.value]||void 0!==e.group&&D.value[c.value]==e[c.value]))||void 0},setPointerFirst:q,selectPointer:function(){D.value&&!0!==D.value.disabled&&(k.value?g(D.value):m(D.value))},forwardPointer:function(){if(null===D.value)b((s.value&&S.value?F.value[0]:B.value[0])||null);else if(s.value&&S.value){var t=k.value?V.value:w.value;void 0===t&&(t=L.value),b(t||null)}else{var u=B.value.map((function(e){return e[n.value]})).indexOf(D.value[n.value])+1;B.value.length<=u&&(u=0),b(B.value[u]||null)}e.nextTick((function(){I()}))},backwardPointer:function(){if(null===D.value){var t=B.value[B.value.length-1];s.value&&S.value&&void 0===(t=T.value)&&(t=E.value),b(t||null)}else if(s.value&&S.value){var u=k.value?N.value:P.value;void 0===u&&(u=k.value?A.value:O.value),b(u||null)}else{var a=B.value.map((function(e){return e[n.value]})).indexOf(D.value[n.value])-1;a<0&&(a=B.value.length-1),b(B.value[a]||null)}e.nextTick((function(){I()}))}}}(t,0,{fo:p.fo,fg:p.fg,handleOptionClick:p.handleOptionClick,handleGroupClick:p.handleGroupClick,search:c.search,pointer:n.pointer,setPointer:n.setPointer,clearPointer:n.clearPointer,multiselect:d.multiselect}),m=function(t,u,a){var l=e.toRefs(t),n=l.mode,r=l.addTagOn,i=l.openDirection,c=l.searchable,s=l.showOptions,v=l.valueProp,d=l.groups,p=l.addOptionOn,f=l.createTag,m=l.createOption,g=a.iv,h=a.update,D=a.search,b=a.setPointer,y=a.selectPointer,C=a.backwardPointer,B=a.forwardPointer,F=a.blur,S=a.fo,k=e.computed((function(){return f.value||m.value||!1})),O=e.computed((function(){return void 0!==r.value?r.value:void 0!==p.value?p.value:["enter"]})),A=function(){"tags"===n.value&&!s.value&&k.value&&c.value&&!d.value&&b(S.value[S.value.map((function(e){return e[v.value]})).indexOf(D.value)])};return{handleKeydown:function(e){switch(e.key){case"Backspace":if("single"===n.value)return;if(c.value&&-1===[null,""].indexOf(D.value))return;if(0===g.value.length)return;h(o(g.value).slice(0,-1));break;case"Enter":if(e.preventDefault(),-1===O.value.indexOf("enter")&&k.value)return;A(),y();break;case" ":if(!k.value&&!c.value)return e.preventDefault(),A(),void y();if(!k.value)return!1;if(-1===O.value.indexOf("space")&&k.value)return;e.preventDefault(),A(),y();break;case"Tab":case";":case",":if(-1===O.value.indexOf(e.key.toLowerCase())||!k.value)return;A(),y(),e.preventDefault();break;case"Escape":F();break;case"ArrowUp":if(e.preventDefault(),!s.value)return;"top"===i.value?B():C();break;case"ArrowDown":if(e.preventDefault(),!s.value)return;"top"===i.value?C():B()}},preparePointer:A}}(t,0,{iv:l.iv,update:v.update,search:c.search,setPointer:n.setPointer,selectPointer:f.selectPointer,backwardPointer:f.backwardPointer,forwardPointer:f.forwardPointer,blur:d.blur,fo:p.fo}),g=function(t,u,a){var l=e.toRefs(t),n=l.classes,o=l.disabled,i=l.openDirection,c=l.showOptions,s=a.isOpen,v=a.isPointed,d=a.isSelected,p=a.isDisabled,f=a.isActive,m=a.canPointGroups,g=a.resolving,h=a.fo,D=e.computed((function(){return r({container:"multiselect",containerDisabled:"is-disabled",containerOpen:"is-open",containerOpenTop:"is-open-top",containerActive:"is-active",singleLabel:"multiselect-single-label",singleLabelText:"multiselect-single-label-text",multipleLabel:"multiselect-multiple-label",search:"multiselect-search",tags:"multiselect-tags",tag:"multiselect-tag",tagDisabled:"is-disabled",tagRemove:"multiselect-tag-remove",tagRemoveIcon:"multiselect-tag-remove-icon",tagsSearchWrapper:"multiselect-tags-search-wrapper",tagsSearch:"multiselect-tags-search",tagsSearchCopy:"multiselect-tags-search-copy",placeholder:"multiselect-placeholder",caret:"multiselect-caret",caretOpen:"is-open",clear:"multiselect-clear",clearIcon:"multiselect-clear-icon",spinner:"multiselect-spinner",dropdown:"multiselect-dropdown",dropdownTop:"is-top",dropdownHidden:"is-hidden",options:"multiselect-options",optionsTop:"is-top",group:"multiselect-group",groupLabel:"multiselect-group-label",groupLabelPointable:"is-pointable",groupLabelPointed:"is-pointed",groupLabelSelected:"is-selected",groupLabelDisabled:"is-disabled",groupLabelSelectedPointed:"is-selected is-pointed",groupLabelSelectedDisabled:"is-selected is-disabled",groupOptions:"multiselect-group-options",option:"multiselect-option",optionPointed:"is-pointed",optionSelected:"is-selected",optionDisabled:"is-disabled",optionSelectedPointed:"is-selected is-pointed",optionSelectedDisabled:"is-selected is-disabled",noOptions:"multiselect-no-options",noResults:"multiselect-no-results",fakeInput:"multiselect-fake-input",spacer:"multiselect-spacer"},n.value)})),b=e.computed((function(){return!!(s.value&&c.value&&(!g.value||g.value&&h.value.length))}));return{classList:e.computed((function(){var e=D.value;return{container:[e.container].concat(o.value?e.containerDisabled:[]).concat(b.value&&"top"===i.value?e.containerOpenTop:[]).concat(b.value&&"top"!==i.value?e.containerOpen:[]).concat(f.value?e.containerActive:[]),spacer:e.spacer,singleLabel:e.singleLabel,singleLabelText:e.singleLabelText,multipleLabel:e.multipleLabel,search:e.search,tags:e.tags,tag:[e.tag].concat(o.value?e.tagDisabled:[]),tagRemove:e.tagRemove,tagRemoveIcon:e.tagRemoveIcon,tagsSearchWrapper:e.tagsSearchWrapper,tagsSearch:e.tagsSearch,tagsSearchCopy:e.tagsSearchCopy,placeholder:e.placeholder,caret:[e.caret].concat(s.value?e.caretOpen:[]),clear:e.clear,clearIcon:e.clearIcon,spinner:e.spinner,dropdown:[e.dropdown].concat("top"===i.value?e.dropdownTop:[]).concat(s.value&&c.value&&b.value?[]:e.dropdownHidden),options:[e.options].concat("top"===i.value?e.optionsTop:[]),group:e.group,groupLabel:function(t){var u=[e.groupLabel];return v(t)?u.push(d(t)?e.groupLabelSelectedPointed:e.groupLabelPointed):d(t)&&m.value?u.push(p(t)?e.groupLabelSelectedDisabled:e.groupLabelSelected):p(t)&&u.push(e.groupLabelDisabled),m.value&&u.push(e.groupLabelPointable),u},groupOptions:e.groupOptions,option:function(t,u){var a=[e.option];return v(t)?a.push(d(t)?e.optionSelectedPointed:e.optionPointed):d(t)?a.push(p(t)?e.optionSelectedDisabled:e.optionSelected):(p(t)||u&&p(u))&&a.push(e.optionDisabled),a},noOptions:e.noOptions,noResults:e.noResults,fakeInput:e.fakeInput}})),showDropdown:b}}(t,0,{isOpen:i.isOpen,isPointed:f.isPointed,canPointGroups:f.canPointGroups,isSelected:p.isSelected,isDisabled:p.isDisabled,isActive:d.isActive,resolving:p.resolving,fo:p.fo});return{...l,...i,...d,...n,...v,...c,...p,...f,...m,...g}}};return v.render=function(e,u,a,l,n,r){return t.openBlock(),t.createBlock("div",{ref:"multiselect",tabindex:e.tabindex,class:e.classList.container,id:a.id,onFocusin:u[7]||(u[7]=(...t)=>e.activate&&e.activate(...t)),onFocusout:u[8]||(u[8]=(...t)=>e.deactivate&&e.deactivate(...t)),onKeydown:u[9]||(u[9]=(...t)=>e.handleKeydown&&e.handleKeydown(...t)),onFocus:u[10]||(u[10]=(...t)=>e.handleFocus&&e.handleFocus(...t))},[t.createCommentVNode(" Search "),"tags"!==a.mode&&a.searchable&&!a.disabled?(t.openBlock(),t.createBlock("input",t.mergeProps({key:0,type:a.inputType,modelValue:e.search,value:e.search,class:e.classList.search,autocomplete:a.autocomplete},a.attrs,{onInput:u[1]||(u[1]=(...t)=>e.handleSearchInput&&e.handleSearchInput(...t)),onPaste:u[2]||(u[2]=t.withModifiers(((...t)=>e.handlePaste&&e.handlePaste(...t)),["stop"])),ref:"input"}),null,16,["type","modelValue","value","autocomplete"])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Tags (with search) "),"tags"==a.mode?(t.openBlock(),t.createBlock("div",{key:1,class:e.classList.tags},[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.iv,((u,l,n)=>t.renderSlot(e.$slots,"tag",{option:u,handleTagRemove:e.handleTagRemove,disabled:a.disabled},(()=>[(t.openBlock(),t.createBlock("span",{class:e.classList.tag,key:n},[t.createTextVNode(t.toDisplayString(u[a.label])+" ",1),a.disabled?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock("span",{key:0,class:e.classList.tagRemove,onClick:t=>e.handleTagRemove(u,t)},[t.createVNode("span",{class:e.classList.tagRemoveIcon},null,2)],10,["onClick"]))],2))])))),256)),t.createVNode("div",{class:e.classList.tagsSearchWrapper},[t.createCommentVNode(" Used for measuring search width "),t.createVNode("span",{class:e.classList.tagsSearchCopy},t.toDisplayString(e.search),3),t.createCommentVNode(" Actual search input "),a.searchable&&!a.disabled?(t.openBlock(),t.createBlock("input",t.mergeProps({key:0,type:a.inputType,modelValue:e.search,value:e.search,class:e.classList.tagsSearch,autocomplete:a.autocomplete},a.attrs,{onInput:u[3]||(u[3]=(...t)=>e.handleSearchInput&&e.handleSearchInput(...t)),onPaste:u[4]||(u[4]=t.withModifiers(((...t)=>e.handlePaste&&e.handlePaste(...t)),["stop"])),ref:"input"}),null,16,["type","modelValue","value","autocomplete"])):t.createCommentVNode("v-if",!0)],2)],2)):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Single label "),"single"==a.mode&&e.hasSelected&&!e.search&&e.iv?t.renderSlot(e.$slots,"singlelabel",{key:2,value:e.iv},(()=>[t.createVNode("div",{class:e.classList.singleLabel},[t.createVNode("span",{class:e.classList.singleLabelText,innerHTML:e.iv[a.label]},null,10,["innerHTML"])],2)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Multiple label "),"multiple"==a.mode&&e.hasSelected&&!e.search?t.renderSlot(e.$slots,"multiplelabel",{key:3,values:e.iv},(()=>[t.createVNode("div",{class:e.classList.multipleLabel,innerHTML:e.multipleLabelText},null,10,["innerHTML"])])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Placeholder "),!a.placeholder||e.hasSelected||e.search?t.createCommentVNode("v-if",!0):t.renderSlot(e.$slots,"placeholder",{key:4},(()=>[t.createVNode("div",{class:e.classList.placeholder},t.toDisplayString(a.placeholder),3)])),t.createCommentVNode(" Spinner "),e.busy&&e.isActive?t.renderSlot(e.$slots,"spinner",{key:5},(()=>[t.createVNode("span",{class:e.classList.spinner},null,2)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Clear "),e.hasSelected&&!a.disabled&&a.canClear&&!e.busy?t.renderSlot(e.$slots,"clear",{key:6,clear:e.clear},(()=>[t.createVNode("span",{class:e.classList.clear,onMousedown:u[5]||(u[5]=(...t)=>e.clear&&e.clear(...t))},[t.createVNode("span",{class:e.classList.clearIcon},null,2)],34)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Caret "),a.caret&&a.showOptions?t.renderSlot(e.$slots,"caret",{key:7},(()=>[t.createVNode("span",{class:e.classList.caret,onClick:u[6]||(u[6]=(...t)=>e.handleCaretClick&&e.handleCaretClick(...t))},null,2)])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Options "),t.createVNode("div",{class:e.classList.dropdown,tabindex:"-1"},[t.renderSlot(e.$slots,"beforelist",{options:e.fo}),t.createVNode("ul",{class:e.classList.options},[a.groups?(t.openBlock(!0),t.createBlock(t.Fragment,{key:0},t.renderList(e.fg,((u,l,n)=>(t.openBlock(),t.createBlock("li",{class:e.classList.group,key:n},[t.createVNode("div",{class:e.classList.groupLabel(u),"data-pointed":e.isPointed(u),onMouseenter:t=>e.setPointer(u),onClick:t=>e.handleGroupClick(u)},[t.renderSlot(e.$slots,"grouplabel",{group:u},(()=>[t.createVNode("span",{innerHTML:u[a.groupLabel]},null,8,["innerHTML"])]))],42,["data-pointed","onMouseenter","onClick"]),t.createVNode("ul",{class:e.classList.groupOptions},[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(u.__VISIBLE__,((l,n,r)=>(t.openBlock(),t.createBlock("li",{class:e.classList.option(l,u),key:r,"data-pointed":e.isPointed(l),onMouseenter:t=>e.setPointer(l),onClick:t=>e.handleOptionClick(l)},[t.renderSlot(e.$slots,"option",{option:l,search:e.search},(()=>[t.createVNode("span",{innerHTML:l[a.label]},null,8,["innerHTML"])]))],42,["data-pointed","onMouseenter","onClick"])))),128))],2)],2)))),128)):(t.openBlock(!0),t.createBlock(t.Fragment,{key:1},t.renderList(e.fo,((u,l,n)=>(t.openBlock(),t.createBlock("li",{class:e.classList.option(u),key:n,"data-pointed":e.isPointed(u),onMouseenter:t=>e.setPointer(u),onClick:t=>e.handleOptionClick(u)},[t.renderSlot(e.$slots,"option",{option:u,search:e.search},(()=>[t.createVNode("span",{innerHTML:u[a.label]},null,8,["innerHTML"])]))],42,["data-pointed","onMouseenter","onClick"])))),128))],2),e.noOptions?t.renderSlot(e.$slots,"nooptions",{key:0},(()=>[t.createVNode("div",{class:e.classList.noOptions,innerHTML:a.noOptionsText},null,10,["innerHTML"])])):t.createCommentVNode("v-if",!0),e.noResults?t.renderSlot(e.$slots,"noresults",{key:1},(()=>[t.createVNode("div",{class:e.classList.noResults,innerHTML:a.noResultsText},null,10,["innerHTML"])])):t.createCommentVNode("v-if",!0),t.renderSlot(e.$slots,"afterlist",{options:e.fo})],2),t.createCommentVNode(" Hacky input element to show HTML5 required warning "),a.required?(t.openBlock(),t.createBlock("input",{key:8,class:e.classList.fakeInput,tabindex:"-1",value:e.textValue,required:""},null,10,["value"])):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Native input support "),a.nativeSupport?(t.openBlock(),t.createBlock(t.Fragment,{key:9},["single"==a.mode?(t.openBlock(),t.createBlock("input",{key:0,type:"hidden",name:a.name,value:void 0!==e.plainValue?e.plainValue:""},null,8,["name","value"])):(t.openBlock(!0),t.createBlock(t.Fragment,{key:1},t.renderList(e.plainValue,((e,u)=>(t.openBlock(),t.createBlock("input",{type:"hidden",name:`${a.name}[]`,value:e,key:u},null,8,["name","value"])))),128))],64)):t.createCommentVNode("v-if",!0),t.createCommentVNode(" Create height for empty input "),t.createVNode("div",{class:e.classList.spacer},null,2)],42,["tabindex","id"])},v.__file="src/Multiselect.vue",v}(Vue,Vue); | ||
var VueformMultiselect=function(e){"use strict";function l(e){return-1!==[null,void 0].indexOf(e)}function a(a,t,n){const{object:u,valueProp:o,mode:i}=e.toRefs(a),r=e.getCurrentInstance().proxy,s=n.iv,c=e=>u.value||l(e)?e:Array.isArray(e)?e.map((e=>e[o.value])):e[o.value],d=e=>l(e)?"single"===i.value?{}:[]:e;return{update:e=>{s.value=d(e);const l=c(e);t.emit("change",l,r),t.emit("input",l),t.emit("update:modelValue",l)}}}function t(l,a){const{value:t,modelValue:n,mode:u,valueProp:o}=e.toRefs(l),i=e.ref("single"!==u.value?[]:{}),r=void 0!==a.expose?n:t,s=e.computed((()=>"single"===u.value?i.value[o.value]:i.value.map((e=>e[o.value])))),c=e.computed((()=>"single"!==u.value?i.value.map((e=>e[o.value])).join(","):i.value[o.value]));return{iv:i,internalValue:i,ev:r,externalValue:r,textValue:c,plainValue:s}}function n(l,a,t){const{regex:n}=e.toRefs(l),u=e.getCurrentInstance().proxy,o=t.isOpen,i=t.open,r=e.ref(null),s=e.ref(null);return e.watch(r,(e=>{!o.value&&e&&i(),a.emit("search-change",e,u)})),{search:r,input:s,clearSearch:()=>{r.value=""},handleSearchInput:e=>{r.value=e.target.value},handleKeypress:e=>{if(n&&n.value){let l=n.value;"string"==typeof l&&(l=new RegExp(l)),e.key.match(l)||e.preventDefault()}},handlePaste:e=>{if(n&&n.value){let l=(e.clipboardData||window.clipboardData).getData("Text"),a=n.value;"string"==typeof a&&(a=new RegExp(a)),l.split("").every((e=>!!e.match(a)))||e.preventDefault()}a.emit("paste",e,u)}}}function u(l,a,t){const{groupSelect:n,mode:u,groups:o,disabledProp:i}=e.toRefs(l),r=e.ref(null),s=e=>{void 0===e||null!==e&&e[i.value]||o.value&&e&&e.group&&("single"===u.value||!n.value)||(r.value=e)};return{pointer:r,setPointer:s,clearPointer:()=>{s(null)}}}function o(e,l=!0){return l?String(e).toLowerCase().trim():String(e).normalize("NFD").replace(/\p{Diacritic}/gu,"").toLowerCase().trim()}function i(a,t,n){const{options:u,mode:i,trackBy:r,limit:s,hideSelected:c,createTag:d,createOption:v,label:p,appendNewTag:m,appendNewOption:f,multipleLabel:g,object:h,loading:b,delay:y,resolveOnLoad:S,minChars:k,filterResults:L,clearOnSearch:O,clearOnSelect:C,valueProp:w,canDeselect:E,max:V,strict:B,closeOnSelect:T,groups:x,reverse:N,infinite:P,groupOptions:q,groupHideEmpty:_,groupSelect:I,onCreate:D,disabledProp:R,searchStart:M}=e.toRefs(a),z=e.getCurrentInstance().proxy,A=n.iv,j=n.ev,H=n.search,$=n.clearSearch,F=n.update,K=n.pointer,G=n.clearPointer,W=n.focus,U=n.deactivate,J=n.close,Q=e.ref([]),X=e.ref([]),Y=e.ref(!1),Z=e.ref(null),ee=e.ref(P.value&&-1===s.value?10:s.value),le=e.computed((()=>d.value||v.value||!1)),ae=e.computed((()=>void 0!==m.value?m.value:void 0===f.value||f.value)),te=e.computed((()=>{if(x.value){let e=X.value||[],l=[];return e.forEach((e=>{Pe(e[q.value]).forEach((a=>{l.push(Object.assign({},a,e[R.value]?{[R.value]:!0}:{}))}))})),l}{let e=Pe(X.value||[]);return Q.value.length&&(e=e.concat(Q.value)),e}})),ne=e.computed((()=>x.value?xe((X.value||[]).map((e=>{const l=Pe(e[q.value]);return{...e,group:!0,[q.value]:Ne(l,!1).map((l=>Object.assign({},l,e[R.value]?{[R.value]:!0}:{}))),__VISIBLE__:Ne(l).map((l=>Object.assign({},l,e[R.value]?{[R.value]:!0}:{})))}}))):[])),ue=e.computed((()=>{let e=te.value;return N.value&&(e=e.reverse()),de.value.length&&(e=de.value.concat(e)),Ne(e)})),oe=e.computed((()=>{let e=ue.value;return ee.value>0&&(e=e.slice(0,ee.value)),e})),ie=e.computed((()=>{switch(i.value){case"single":return!l(A.value[w.value]);case"multiple":case"tags":return!l(A.value)&&A.value.length>0}})),re=e.computed((()=>void 0!==g&&void 0!==g.value?g.value(A.value,z):A.value&&A.value.length>1?`${A.value.length} options selected`:"1 option selected")),se=e.computed((()=>!te.value.length&&!Y.value&&!de.value.length)),ce=e.computed((()=>te.value.length>0&&0==oe.value.length&&(H.value&&x.value||!x.value))),de=e.computed((()=>!1!==le.value&&H.value?-1!==Be(H.value)?[]:[{[w.value]:H.value,[p.value]:H.value,[ve.value]:H.value,__CREATE__:!0}]:[])),ve=e.computed((()=>r.value||p.value)),pe=e.computed((()=>{switch(i.value){case"single":return null;case"multiple":case"tags":return[]}})),me=e.computed((()=>b.value||Y.value)),fe=e=>{switch("object"!=typeof e&&(e=Ve(e)),i.value){case"single":F(e);break;case"multiple":case"tags":F(A.value.concat(e))}t.emit("select",he(e),e,z)},ge=e=>{switch("object"!=typeof e&&(e=Ve(e)),i.value){case"single":ye();break;case"tags":case"multiple":F(Array.isArray(e)?A.value.filter((l=>-1===e.map((e=>e[w.value])).indexOf(l[w.value]))):A.value.filter((l=>l[w.value]!=e[w.value])))}t.emit("deselect",he(e),e,z)},he=e=>h.value?e:e[w.value],be=e=>{ge(e)},ye=()=>{t.emit("clear",z),F(pe.value)},Se=e=>{if(void 0!==e.group)return"single"!==i.value&&(Ee(e[q.value])&&e[q.value].length);switch(i.value){case"single":return!l(A.value)&&A.value[w.value]==e[w.value];case"tags":case"multiple":return!l(A.value)&&-1!==A.value.map((e=>e[w.value])).indexOf(e[w.value])}},ke=e=>!0===e[R.value],Le=()=>!(void 0===V||-1===V.value||!ie.value&&V.value>0)&&A.value.length>=V.value,Oe=e=>{switch(e.__CREATE__&&delete(e={...e}).__CREATE__,i.value){case"single":if(e&&Se(e))return void(E.value&&ge(e));e&&Ce(e),C.value&&$(),T.value&&(G(),J()),e&&fe(e);break;case"multiple":if(e&&Se(e))return void ge(e);if(Le())return;e&&(Ce(e),fe(e)),C.value&&$(),c.value&&G(),T.value&&J();break;case"tags":if(e&&Se(e))return void ge(e);if(Le())return;e&&Ce(e),C.value&&$(),e&&fe(e),c.value&&G(),T.value&&J()}T.value||W()},Ce=e=>{void 0===Ve(e[w.value])&&le.value&&(t.emit("tag",e[w.value],z),t.emit("option",e[w.value],z),ae.value&&Te(e),$())},we=e=>void 0===e.find((e=>!Se(e)&&!e[R.value])),Ee=e=>void 0===e.find((e=>!Se(e))),Ve=e=>te.value[te.value.map((e=>String(e[w.value]))).indexOf(String(e))],Be=(e,l)=>te.value.map((e=>parseInt(e[ve.value])==e[ve.value]?parseInt(e[ve.value]):e[ve.value])).indexOf(parseInt(e)==e?parseInt(e):e),Te=e=>{Q.value.push(e)},xe=e=>_.value?e.filter((e=>H.value?e.__VISIBLE__.length:e[q.value].length)):e.filter((e=>!H.value||e.__VISIBLE__.length)),Ne=(e,l=!0)=>{let a=e;return H.value&&L.value&&(a=a.filter((e=>M.value?o(e[ve.value],B.value).startsWith(o(H.value,B.value)):-1!==o(e[ve.value],B.value).indexOf(o(H.value,B.value))))),c.value&&l&&(a=a.filter((e=>!(e=>-1!==["tags","multiple"].indexOf(i.value)&&c.value&&Se(e))(e)))),a},Pe=e=>{let l=e;var a;return a=l,"[object Object]"===Object.prototype.toString.call(a)&&(l=Object.keys(l).map((e=>{let a=l[e];return{[w.value]:e,[ve.value]:a,[p.value]:a}}))),l=l.map((e=>"object"==typeof e?e:{[w.value]:e,[ve.value]:e,[p.value]:e})),l},qe=()=>{l(j.value)||(A.value=De(j.value))},_e=e=>(Y.value=!0,new Promise(((l,a)=>{u.value(H.value,z).then((l=>{X.value=l||[],"function"==typeof e&&e(l),Y.value=!1})).catch((e=>{console.error(e),X.value=[],Y.value=!1})).finally((()=>{l()}))}))),Ie=()=>{if(ie.value)if("single"===i.value){let e=Ve(A.value[w.value]);if(void 0!==e){let l=e[p.value];A.value[p.value]=l,h.value&&(j.value[p.value]=l)}}else A.value.forEach(((e,l)=>{let a=Ve(A.value[l][w.value]);if(void 0!==a){let e=a[p.value];A.value[l][p.value]=e,h.value&&(j.value[l][p.value]=e)}}))},De=e=>l(e)?"single"===i.value?{}:[]:h.value?e:"single"===i.value?Ve(e)||{}:e.filter((e=>!!Ve(e))).map((e=>Ve(e))),Re=()=>{Z.value=e.watch(H,(e=>{e.length<k.value||!e&&0!==k.value||(Y.value=!0,O.value&&(X.value=[]),setTimeout((()=>{e==H.value&&u.value(H.value,z).then((l=>{e!=H.value&&H.value||(X.value=l,K.value=oe.value.filter((e=>!0!==e[R.value]))[0]||null,Y.value=!1)})).catch((e=>{console.error(e)}))}),y.value))}),{flush:"sync"})};if("single"!==i.value&&!l(j.value)&&!Array.isArray(j.value))throw new Error(`v-model must be an array when using "${i.value}" mode`);return u&&"function"==typeof u.value?S.value?_e(qe):1==h.value&&qe():(X.value=u.value,qe()),y.value>-1&&Re(),e.watch(y,((e,l)=>{Z.value&&Z.value(),e>=0&&Re()})),e.watch(j,(e=>{if(l(e))A.value=De(e);else switch(i.value){case"single":(h.value?e[w.value]!=A.value[w.value]:e!=A.value[w.value])&&(A.value=De(e));break;case"multiple":case"tags":(function(e,l){const a=l.slice().sort();return e.length===l.length&&e.slice().sort().every((function(e,l){return e===a[l]}))})(h.value?e.map((e=>e[w.value])):e,A.value.map((e=>e[w.value])))||(A.value=De(e))}}),{deep:!0}),e.watch(u,((e,l)=>{"function"==typeof a.options?S.value&&_e():(X.value=a.options,Object.keys(A.value).length||qe(),Ie())})),e.watch(p,Ie),{pfo:ue,fo:oe,filteredOptions:oe,hasSelected:ie,multipleLabelText:re,eo:te,extendedOptions:te,fg:ne,filteredGroups:ne,noOptions:se,noResults:ce,resolving:Y,busy:me,offset:ee,select:fe,deselect:ge,remove:be,selectAll:()=>{"single"!==i.value&&fe(oe.value)},clear:ye,isSelected:Se,isDisabled:ke,isMax:Le,getOption:Ve,handleOptionClick:e=>{if(!ke(e))return D&&D.value&&!Se(e)&&e.__CREATE__&&(delete(e={...e}).__CREATE__,(e=D.value(e,z))instanceof Promise)?(Y.value=!0,void e.then((e=>{Y.value=!1,Oe(e)}))):void Oe(e)},handleGroupClick:e=>{if(!ke(e)&&"single"!==i.value&&I.value){switch(i.value){case"multiple":case"tags":we(e[q.value])?ge(e[q.value]):fe(e[q.value].filter((e=>-1===A.value.map((e=>e[w.value])).indexOf(e[w.value]))).filter((e=>!e[R.value])).filter(((e,l)=>A.value.length+1+l<=V.value||-1===V.value)))}T.value&&U()}},handleTagRemove:(e,l)=>{0===l.button?be(e):l.preventDefault()},refreshOptions:e=>{_e(e)},resolveOptions:_e,refreshLabels:Ie}}function r(l,a,t){const{valueProp:n,showOptions:u,searchable:o,groupLabel:i,groups:r,mode:s,groupSelect:c,disabledProp:d}=e.toRefs(l),v=t.fo,p=t.fg,m=t.handleOptionClick,f=t.handleGroupClick,g=t.search,h=t.pointer,b=t.setPointer,y=t.clearPointer,S=t.multiselect,k=t.isOpen,L=e.computed((()=>v.value.filter((e=>!e[d.value])))),O=e.computed((()=>p.value.filter((e=>!e[d.value])))),C=e.computed((()=>"single"!==s.value&&c.value)),w=e.computed((()=>h.value&&h.value.group)),E=e.computed((()=>D(h.value))),V=e.computed((()=>{const e=w.value?h.value:D(h.value),l=O.value.map((e=>e[i.value])).indexOf(e[i.value]);let a=O.value[l-1];return void 0===a&&(a=T.value),a})),B=e.computed((()=>{let e=O.value.map((e=>e.label)).indexOf(w.value?h.value[i.value]:D(h.value)[i.value])+1;return O.value.length<=e&&(e=0),O.value[e]})),T=e.computed((()=>[...O.value].slice(-1)[0])),x=e.computed((()=>h.value.__VISIBLE__.filter((e=>!e[d.value]))[0])),N=e.computed((()=>{const e=E.value.__VISIBLE__.filter((e=>!e[d.value]));return e[e.map((e=>e[n.value])).indexOf(h.value[n.value])-1]})),P=e.computed((()=>{const e=D(h.value).__VISIBLE__.filter((e=>!e[d.value]));return e[e.map((e=>e[n.value])).indexOf(h.value[n.value])+1]})),q=e.computed((()=>[...V.value.__VISIBLE__.filter((e=>!e[d.value]))].slice(-1)[0])),_=e.computed((()=>[...T.value.__VISIBLE__.filter((e=>!e[d.value]))].slice(-1)[0])),I=()=>{b(L.value[0]||null)},D=e=>O.value.find((l=>-1!==l.__VISIBLE__.map((e=>e[n.value])).indexOf(e[n.value]))),R=()=>{let e=S.value.querySelector("[data-pointed]");if(!e)return;let l=e.parentElement.parentElement;r.value&&(l=w.value?e.parentElement.parentElement.parentElement:e.parentElement.parentElement.parentElement.parentElement),e.offsetTop+e.offsetHeight>l.clientHeight+l.scrollTop&&(l.scrollTop=e.offsetTop+e.offsetHeight-l.clientHeight),e.offsetTop<l.scrollTop&&(l.scrollTop=e.offsetTop)};return e.watch(g,(e=>{o.value&&(e.length&&u.value?I():y())})),e.watch(k,(l=>{if(l){let l=S.value.querySelectorAll("[data-selected]")[0];if(!l)return;let a=l.parentElement.parentElement;e.nextTick((()=>{a.scrollTop>0||(a.scrollTop=l.offsetTop)}))}})),{pointer:h,canPointGroups:C,isPointed:e=>!(!h.value||!(!e.group&&h.value[n.value]==e[n.value]||void 0!==e.group&&h.value[i.value]==e[i.value]))||void 0,setPointerFirst:I,selectPointer:()=>{h.value&&!0!==h.value[d.value]&&(w.value?f(h.value):m(h.value))},forwardPointer:()=>{if(null===h.value)b((r.value&&C.value?O.value[0]:L.value[0])||null);else if(r.value&&C.value){let e=w.value?x.value:P.value;void 0===e&&(e=B.value),b(e||null)}else{let e=L.value.map((e=>e[n.value])).indexOf(h.value[n.value])+1;L.value.length<=e&&(e=0),b(L.value[e]||null)}e.nextTick((()=>{R()}))},backwardPointer:()=>{if(null===h.value){let e=L.value[L.value.length-1];r.value&&C.value&&(e=_.value,void 0===e&&(e=T.value)),b(e||null)}else if(r.value&&C.value){let e=w.value?q.value:N.value;void 0===e&&(e=w.value?V.value:E.value),b(e||null)}else{let e=L.value.map((e=>e[n.value])).indexOf(h.value[n.value])-1;e<0&&(e=L.value.length-1),b(L.value[e]||null)}e.nextTick((()=>{R()}))}}}function s(l,a,t){const{disabled:n}=e.toRefs(l),u=e.getCurrentInstance().proxy,o=e.ref(!1);return{isOpen:o,open:()=>{o.value||n.value||(o.value=!0,a.emit("open",u))},close:()=>{o.value&&(o.value=!1,a.emit("close",u))}}}function c(l,a,t){const{searchable:n,disabled:u}=e.toRefs(l),o=t.input,i=t.open,r=t.close,s=t.clearSearch,c=t.isOpen,d=e.ref(null),v=e.ref(null),p=e.ref(!1),m=e.computed((()=>n.value||u.value?-1:0)),f=()=>{n.value&&o.value.blur(),d.value.blur()},g=()=>{n.value&&!u.value&&o.value.focus()},h=()=>{u.value||(p.value=!0,i())},b=()=>{p.value=!1,setTimeout((()=>{p.value||(r(),s())}),1)};return{multiselect:d,tags:v,tabindex:m,isActive:p,blur:f,focus:g,handleFocus:()=>{g()},activate:h,deactivate:b,handleCaretClick:()=>{b(),f()},handleMousedown:e=>{c.value&&(e.target.isEqualNode(d.value)||e.target.isEqualNode(v.value))?setTimeout((()=>{b()}),0):document.activeElement.isEqualNode(d.value)&&!c.value&&h()}}}function d(l,a,t){const{mode:n,addTagOn:u,openDirection:o,searchable:i,showOptions:r,valueProp:s,groups:c,addOptionOn:d,createTag:v,createOption:p,reverse:m}=e.toRefs(l),f=e.getCurrentInstance().proxy,g=t.iv,h=t.update,b=t.search,y=t.setPointer,S=t.selectPointer,k=t.backwardPointer,L=t.forwardPointer,O=t.isOpen,C=t.open,w=t.blur,E=t.fo,V=e.computed((()=>v.value||p.value||!1)),B=e.computed((()=>void 0!==u.value?u.value:void 0!==d.value?d.value:["enter"])),T=()=>{"tags"===n.value&&!r.value&&V.value&&i.value&&!c.value&&y(E.value[E.value.map((e=>e[s.value])).indexOf(b.value)])};return{handleKeydown:e=>{switch(a.emit("keydown",e,f),e.key){case"Backspace":if("single"===n.value)return;if(i.value&&-1===[null,""].indexOf(b.value))return;if(0===g.value.length)return;h([...g.value].slice(0,-1));break;case"Enter":if(e.preventDefault(),-1===B.value.indexOf("enter")&&V.value)return;T(),S();break;case" ":if(!V.value&&!i.value)return e.preventDefault(),T(),void S();if(!V.value)return!1;if(-1===B.value.indexOf("space")&&V.value)return;e.preventDefault(),T(),S();break;case"Tab":case";":case",":if(-1===B.value.indexOf(e.key.toLowerCase())||!V.value)return;T(),S(),e.preventDefault();break;case"Escape":w();break;case"ArrowUp":if(e.preventDefault(),!r.value)return;O.value||C(),k();break;case"ArrowDown":if(e.preventDefault(),!r.value)return;O.value||C(),L()}},handleKeyup:e=>{a.emit("keyup",e,f)},preparePointer:T}}function v(l,a,t){const{classes:n,disabled:u,openDirection:o,showOptions:i}=e.toRefs(l),r=t.isOpen,s=t.isPointed,c=t.isSelected,d=t.isDisabled,v=t.isActive,p=t.canPointGroups,m=t.resolving,f=t.fo,g=e.computed((()=>({container:"multiselect",containerDisabled:"is-disabled",containerOpen:"is-open",containerOpenTop:"is-open-top",containerActive:"is-active",singleLabel:"multiselect-single-label",singleLabelText:"multiselect-single-label-text",multipleLabel:"multiselect-multiple-label",search:"multiselect-search",tags:"multiselect-tags",tag:"multiselect-tag",tagDisabled:"is-disabled",tagRemove:"multiselect-tag-remove",tagRemoveIcon:"multiselect-tag-remove-icon",tagsSearchWrapper:"multiselect-tags-search-wrapper",tagsSearch:"multiselect-tags-search",tagsSearchCopy:"multiselect-tags-search-copy",placeholder:"multiselect-placeholder",caret:"multiselect-caret",caretOpen:"is-open",clear:"multiselect-clear",clearIcon:"multiselect-clear-icon",spinner:"multiselect-spinner",inifinite:"multiselect-inifite",inifiniteSpinner:"multiselect-inifite-spinner",dropdown:"multiselect-dropdown",dropdownTop:"is-top",dropdownHidden:"is-hidden",options:"multiselect-options",optionsTop:"is-top",group:"multiselect-group",groupLabel:"multiselect-group-label",groupLabelPointable:"is-pointable",groupLabelPointed:"is-pointed",groupLabelSelected:"is-selected",groupLabelDisabled:"is-disabled",groupLabelSelectedPointed:"is-selected is-pointed",groupLabelSelectedDisabled:"is-selected is-disabled",groupOptions:"multiselect-group-options",option:"multiselect-option",optionPointed:"is-pointed",optionSelected:"is-selected",optionDisabled:"is-disabled",optionSelectedPointed:"is-selected is-pointed",optionSelectedDisabled:"is-selected is-disabled",noOptions:"multiselect-no-options",noResults:"multiselect-no-results",fakeInput:"multiselect-fake-input",spacer:"multiselect-spacer",...n.value}))),h=e.computed((()=>!!(r.value&&i.value&&(!m.value||m.value&&f.value.length))));return{classList:e.computed((()=>{const e=g.value;return{container:[e.container].concat(u.value?e.containerDisabled:[]).concat(h.value&&"top"===o.value?e.containerOpenTop:[]).concat(h.value&&"top"!==o.value?e.containerOpen:[]).concat(v.value?e.containerActive:[]),spacer:e.spacer,singleLabel:e.singleLabel,singleLabelText:e.singleLabelText,multipleLabel:e.multipleLabel,search:e.search,tags:e.tags,tag:[e.tag].concat(u.value?e.tagDisabled:[]),tagRemove:e.tagRemove,tagRemoveIcon:e.tagRemoveIcon,tagsSearchWrapper:e.tagsSearchWrapper,tagsSearch:e.tagsSearch,tagsSearchCopy:e.tagsSearchCopy,placeholder:e.placeholder,caret:[e.caret].concat(r.value?e.caretOpen:[]),clear:e.clear,clearIcon:e.clearIcon,spinner:e.spinner,inifinite:e.inifinite,inifiniteSpinner:e.inifiniteSpinner,dropdown:[e.dropdown].concat("top"===o.value?e.dropdownTop:[]).concat(r.value&&i.value&&h.value?[]:e.dropdownHidden),options:[e.options].concat("top"===o.value?e.optionsTop:[]),group:e.group,groupLabel:l=>{let a=[e.groupLabel];return s(l)?a.push(c(l)?e.groupLabelSelectedPointed:e.groupLabelPointed):c(l)&&p.value?a.push(d(l)?e.groupLabelSelectedDisabled:e.groupLabelSelected):d(l)&&a.push(e.groupLabelDisabled),p.value&&a.push(e.groupLabelPointable),a},groupOptions:e.groupOptions,option:(l,a)=>{let t=[e.option];return s(l)?t.push(c(l)?e.optionSelectedPointed:e.optionPointed):c(l)?t.push(d(l)?e.optionSelectedDisabled:e.optionSelected):(d(l)||a&&d(a))&&t.push(e.optionDisabled),t},noOptions:e.noOptions,noResults:e.noResults,fakeInput:e.fakeInput}})),showDropdown:h}}function p(l,a,t){const{limit:n,infinite:u}=e.toRefs(l),o=t.isOpen,i=t.offset,r=t.search,s=t.pfo,c=t.eo,d=e.ref(null),v=e.ref(null),p=e.computed((()=>i.value<s.value.length)),m=l=>{const{isIntersecting:a,target:t}=l[0];if(a){const l=t.offsetParent,a=l.scrollTop;i.value+=-1==n.value?10:n.value,e.nextTick((()=>{l.scrollTop=a}))}},f=()=>{o.value&&i.value<s.value.length?d.value.observe(v.value):!o.value&&d.value&&d.value.disconnect()};return e.watch(o,(()=>{u.value&&f()})),e.watch(r,(()=>{u.value&&(i.value=n.value,f())}),{flush:"post"}),e.watch(c,(()=>{u.value&&f()}),{immediate:!1,flush:"post"}),e.onMounted((()=>{window&&window.IntersectionObserver&&(d.value=new IntersectionObserver(m))})),{hasMore:p,infiniteLoader:v}}function m(l,a,t){const{placeholder:n,id:u,valueProp:o,label:i,mode:r,groupLabel:s}=e.toRefs(l),c=t.pointer,d=t.iv,v=t.isSelected,p=t.hasSelected,m=t.multipleLabelText,f=e.ref(null),g=e.computed((()=>{let e=[];return u&&u.value&&e.push(u.value),e.push("multiselect-options"),e.join("-")})),h=e.computed((()=>{let e=[];if(u&&u.value&&e.push(u.value),e.push("multiselect-option"),c.value&&void 0!==c.value[o.value])return e.push(c.value[o.value]),e.join("-")})),b=e.computed((()=>{let e=[];return f.value&&e.push(f.value),n.value&&!p.value&&e.push(n.value),"single"===r.value&&d.value&&void 0!==d.value[i.value]&&e.push(d.value[i.value]),"multiple"===r.value&&p.value&&e.push(m.value),"tags"===r.value&&p.value&&e.push(...d.value.map((e=>e[i.value]))),e.join(", ")})),y=e.computed((()=>b.value));return e.onMounted((()=>{u&&u.value&&(f.value=document.querySelector(`[for="${u.value}"]`)?.innerText||null)})),{ariaOwns:g,ariaLabel:b,ariaPlaceholder:y,ariaActiveDescendant:h,ariaOptionId:e=>{let l=[];return u&&u.value&&l.push(u.value),l.push("multiselect-option"),l.push(e[o.value]),l.join("-")},ariaOptionLabel:e=>{let l=[];return v(e)&&l.push("✓"),l.push(e[i.value]),l.join(" ")},ariaGroupLabel:e=>{let l=[];return l.push(e[s.value]),l.join(" ")}}}var f={name:"Multiselect",emits:["paste","open","close","select","deselect","input","search-change","tag","option","update:modelValue","change","clear","keydown","keyup"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1,default:()=>[]},id:{type:[String,Number],required:!1},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:void 0},valueProp:{type:String,required:!1,default:"value"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:void 0},createOption:{type:Boolean,required:!1,default:void 0},appendNewTag:{type:Boolean,required:!1,default:void 0},appendNewOption:{type:Boolean,required:!1,default:void 0},addTagOn:{type:Array,required:!1,default:void 0},addOptionOn:{type:Array,required:!1,default:void 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},canDeselect:{type:Boolean,required:!1,default:!0},canClear:{type:Boolean,required:!1,default:!0},max:{type:Number,required:!1,default:-1},showOptions:{type:Boolean,required:!1,default:!0},required:{type:Boolean,required:!1,default:!1},openDirection:{type:String,required:!1,default:"bottom"},nativeSupport:{type:Boolean,required:!1,default:!1},classes:{type:Object,required:!1,default:()=>({})},strict:{type:Boolean,required:!1,default:!0},closeOnSelect:{type:Boolean,required:!1,default:!0},autocomplete:{type:String,required:!1},groups:{type:Boolean,required:!1,default:!1},groupLabel:{type:String,required:!1,default:"label"},groupOptions:{type:String,required:!1,default:"options"},groupHideEmpty:{type:Boolean,required:!1,default:!1},groupSelect:{type:Boolean,required:!1,default:!0},inputType:{type:String,required:!1,default:"text"},attrs:{required:!1,type:Object,default:()=>({})},onCreate:{required:!1,type:Function},disabledProp:{type:String,required:!1,default:"disabled"},searchStart:{type:Boolean,required:!1,default:!1},reverse:{type:Boolean,required:!1,default:!1},regex:{type:[Object,String,RegExp],required:!1,default:void 0},rtl:{type:Boolean,required:!1,default:!1},infinite:{type:Boolean,required:!1,default:!1}},setup:(e,l)=>function(e,l,a,t={}){return a.forEach((a=>{a&&(t={...t,...a(e,l,t)})})),t}(e,l,[t,u,s,n,a,c,i,p,r,d,v,m])};const g=["tabindex","id","dir","aria-owns","aria-expanded","aria-label","aria-placeholder","aria-activedescendant"],h=["type","modelValue","value","autocomplete","id","aria-owns","aria-expanded","aria-label","aria-placeholder","aria-activedescendant"],b=["onClick"],y=["type","modelValue","value","id","autocomplete","aria-owns","aria-expanded","aria-label","aria-placeholder","aria-activedescendant"],S=["innerHTML"],k=["innerHTML"],L=["id"],O=["data-pointed","onMouseenter","onClick"],C=["innerHTML"],w=["aria-label"],E=["data-pointed","data-selected","id","aria-label","onMouseenter","onClick"],V=["innerHTML"],B=["id","aria-label","data-pointed","data-selected","onMouseenter","onClick"],T=["innerHTML"],x=["innerHTML"],N=["innerHTML"],P=["value"],q=["name","value"],_=["name","value"];return f.render=function(l,a,t,n,u,o){return e.openBlock(),e.createElementBlock("div",{ref:"multiselect",tabindex:l.tabindex,class:e.normalizeClass(l.classList.container),id:t.searchable?void 0:t.id,dir:t.rtl?"rtl":void 0,"aria-owns":l.ariaOwns,"aria-expanded":l.isOpen,"aria-label":l.ariaLabel,"aria-placeholder":l.ariaPlaceholder,"aria-activedescendant":l.ariaActiveDescendant,onFocusin:a[8]||(a[8]=(...e)=>l.activate&&l.activate(...e)),onFocusout:a[9]||(a[9]=(...e)=>l.deactivate&&l.deactivate(...e)),onKeydown:a[10]||(a[10]=(...e)=>l.handleKeydown&&l.handleKeydown(...e)),onKeyup:a[11]||(a[11]=(...e)=>l.handleKeyup&&l.handleKeyup(...e)),onFocus:a[12]||(a[12]=(...e)=>l.handleFocus&&l.handleFocus(...e)),onMousedown:a[13]||(a[13]=(...e)=>l.handleMousedown&&l.handleMousedown(...e)),role:"combobox"},[e.createCommentVNode(" Search "),"tags"!==t.mode&&t.searchable&&!t.disabled?(e.openBlock(),e.createElementBlock("input",e.mergeProps({key:0,type:t.inputType,modelValue:l.search,value:l.search,class:l.classList.search,autocomplete:t.autocomplete,id:t.searchable?t.id:void 0},t.attrs,{"aria-owns":l.ariaOwns,"aria-expanded":l.isOpen,"aria-label":l.ariaLabel,"aria-placeholder":l.ariaPlaceholder,"aria-activedescendant":l.ariaActiveDescendant,onInput:a[0]||(a[0]=(...e)=>l.handleSearchInput&&l.handleSearchInput(...e)),onKeypress:a[1]||(a[1]=(...e)=>l.handleKeypress&&l.handleKeypress(...e)),onPaste:a[2]||(a[2]=e.withModifiers(((...e)=>l.handlePaste&&l.handlePaste(...e)),["stop"])),ref:"input",role:"combobox"}),null,16,h)):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Tags (with search) "),"tags"==t.mode?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(l.classList.tags)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.iv,((a,n,u)=>e.renderSlot(l.$slots,"tag",{option:a,handleTagRemove:l.handleTagRemove,disabled:t.disabled},(()=>[(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(l.classList.tag),key:u},[e.createTextVNode(e.toDisplayString(a[t.label])+" ",1),t.disabled?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(l.classList.tagRemove),onClick:e=>l.handleTagRemove(a,e)},[e.createElementVNode("span",{class:e.normalizeClass(l.classList.tagRemoveIcon)},null,2)],10,b))],2))])))),256)),e.createElementVNode("div",{class:e.normalizeClass(l.classList.tagsSearchWrapper),ref:"tags"},[e.createCommentVNode(" Used for measuring search width "),e.createElementVNode("span",{class:e.normalizeClass(l.classList.tagsSearchCopy)},e.toDisplayString(l.search),3),e.createCommentVNode(" Actual search input "),t.searchable&&!t.disabled?(e.openBlock(),e.createElementBlock("input",e.mergeProps({key:0,type:t.inputType,modelValue:l.search,value:l.search,class:l.classList.tagsSearch,id:t.searchable?t.id:void 0,autocomplete:t.autocomplete},t.attrs,{"aria-owns":l.ariaOwns,"aria-expanded":l.isOpen,"aria-label":l.ariaLabel,"aria-placeholder":l.ariaPlaceholder,"aria-activedescendant":l.ariaActiveDescendant,onInput:a[3]||(a[3]=(...e)=>l.handleSearchInput&&l.handleSearchInput(...e)),onKeypress:a[4]||(a[4]=(...e)=>l.handleKeypress&&l.handleKeypress(...e)),onPaste:a[5]||(a[5]=e.withModifiers(((...e)=>l.handlePaste&&l.handlePaste(...e)),["stop"])),ref:"input",role:"combobox"}),null,16,y)):e.createCommentVNode("v-if",!0)],2)],2)):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Single label "),"single"==t.mode&&l.hasSelected&&!l.search&&l.iv?e.renderSlot(l.$slots,"singlelabel",{key:2,value:l.iv},(()=>[e.createElementVNode("div",{class:e.normalizeClass(l.classList.singleLabel)},[e.createElementVNode("span",{class:e.normalizeClass(l.classList.singleLabelText),innerHTML:l.iv[t.label]},null,10,S)],2)])):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Multiple label "),"multiple"==t.mode&&l.hasSelected&&!l.search?e.renderSlot(l.$slots,"multiplelabel",{key:3,values:l.iv},(()=>[e.createElementVNode("div",{class:e.normalizeClass(l.classList.multipleLabel),innerHTML:l.multipleLabelText},null,10,k)])):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Placeholder "),!t.placeholder||l.hasSelected||l.search?e.createCommentVNode("v-if",!0):e.renderSlot(l.$slots,"placeholder",{key:4},(()=>[e.createElementVNode("div",{class:e.normalizeClass(l.classList.placeholder)},e.toDisplayString(t.placeholder),3)])),e.createCommentVNode(" Spinner "),t.loading||l.resolving?e.renderSlot(l.$slots,"spinner",{key:5},(()=>[e.createElementVNode("span",{class:e.normalizeClass(l.classList.spinner)},null,2)])):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Clear "),l.hasSelected&&!t.disabled&&t.canClear&&!l.busy?e.renderSlot(l.$slots,"clear",{key:6,clear:l.clear},(()=>[e.createElementVNode("span",{class:e.normalizeClass(l.classList.clear),onClick:a[6]||(a[6]=(...e)=>l.clear&&l.clear(...e))},[e.createElementVNode("span",{class:e.normalizeClass(l.classList.clearIcon)},null,2)],2)])):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Caret "),t.caret&&t.showOptions?e.renderSlot(l.$slots,"caret",{key:7},(()=>[e.createElementVNode("span",{class:e.normalizeClass(l.classList.caret),onClick:a[7]||(a[7]=(...e)=>l.handleCaretClick&&l.handleCaretClick(...e))},null,2)])):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Options "),e.createElementVNode("div",{class:e.normalizeClass(l.classList.dropdown),tabindex:"-1"},[e.renderSlot(l.$slots,"beforelist",{options:l.fo}),e.createElementVNode("ul",{class:e.normalizeClass(l.classList.options),id:l.ariaOwns,role:"listbox"},[t.groups?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.fg,((a,n,u)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(l.classList.group),key:u},[e.createElementVNode("div",{class:e.normalizeClass(l.classList.groupLabel(a)),"data-pointed":l.isPointed(a),onMouseenter:e=>l.setPointer(a),onClick:e=>l.handleGroupClick(a),role:"none"},[e.renderSlot(l.$slots,"grouplabel",{group:a,isSelected:l.isSelected,isPointed:l.isPointed},(()=>[e.createElementVNode("span",{innerHTML:a[t.groupLabel]},null,8,C)]))],42,O),e.createElementVNode("ul",{class:e.normalizeClass(l.classList.groupOptions),"aria-label":l.ariaGroupLabel(a),role:"group"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.__VISIBLE__,((n,u,o)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(l.classList.option(n,a)),key:o,"data-pointed":l.isPointed(n),"data-selected":l.isSelected(n)||void 0,id:l.ariaOptionId(n),"aria-label":l.ariaOptionLabel(n),onMouseenter:e=>l.setPointer(n),onClick:e=>l.handleOptionClick(n),role:"option"},[e.renderSlot(l.$slots,"option",{option:n,isSelected:l.isSelected,isPointed:l.isPointed,search:l.search},(()=>[e.createElementVNode("span",{innerHTML:n[t.label]},null,8,V)]))],42,E)))),128))],10,w)],2)))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(l.fo,((a,n,u)=>(e.openBlock(),e.createElementBlock("li",{id:l.ariaOptionId(a),"aria-label":l.ariaOptionLabel(a),class:e.normalizeClass(l.classList.option(a)),key:u,"data-pointed":l.isPointed(a),"data-selected":l.isSelected(a)||void 0,onMouseenter:e=>l.setPointer(a),onClick:e=>l.handleOptionClick(a),role:"option"},[e.renderSlot(l.$slots,"option",{option:a,isSelected:l.isSelected,isPointed:l.isPointed,search:l.search},(()=>[e.createElementVNode("span",{innerHTML:a[t.label]},null,8,T)]))],42,B)))),128))],10,L),l.noOptions?e.renderSlot(l.$slots,"nooptions",{key:0},(()=>[e.createElementVNode("div",{class:e.normalizeClass(l.classList.noOptions),innerHTML:t.noOptionsText},null,10,x)])):e.createCommentVNode("v-if",!0),l.noResults?e.renderSlot(l.$slots,"noresults",{key:1},(()=>[e.createElementVNode("div",{class:e.normalizeClass(l.classList.noResults),innerHTML:t.noResultsText},null,10,N)])):e.createCommentVNode("v-if",!0),t.infinite&&l.hasMore?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(l.classList.inifinite),ref:"infiniteLoader"},[e.renderSlot(l.$slots,"infinite",{},(()=>[e.createElementVNode("span",{class:e.normalizeClass(l.classList.inifiniteSpinner)},null,2)]))],2)):e.createCommentVNode("v-if",!0),e.renderSlot(l.$slots,"afterlist",{options:l.fo})],2),e.createCommentVNode(" Hacky input element to show HTML5 required warning "),t.required?(e.openBlock(),e.createElementBlock("input",{key:8,class:e.normalizeClass(l.classList.fakeInput),tabindex:"-1",value:l.textValue,required:""},null,10,P)):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Native input support "),t.nativeSupport?(e.openBlock(),e.createElementBlock(e.Fragment,{key:9},["single"==t.mode?(e.openBlock(),e.createElementBlock("input",{key:0,type:"hidden",name:t.name,value:void 0!==l.plainValue?l.plainValue:""},null,8,q)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(l.plainValue,((l,a)=>(e.openBlock(),e.createElementBlock("input",{type:"hidden",name:`${t.name}[]`,value:l,key:a},null,8,_)))),128))],64)):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Create height for empty input "),e.createElementVNode("div",{class:e.normalizeClass(l.classList.spacer)},null,2)],42,g)},f.__file="src/Multiselect.vue",f}(Vue); |
@@ -1,1 +0,1 @@ | ||
var VueformMultiselect=function(e){"use strict";function u(e){return-1!==[null,void 0,!1].indexOf(e)}function t(e){return(t="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 n(e,u,t){return u in e?Object.defineProperty(e,u,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[u]=t,e}function a(e,u){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);u&&(n=n.filter((function(u){return Object.getOwnPropertyDescriptor(e,u).enumerable}))),t.push.apply(t,n)}return t}function l(e){for(var u=1;u<arguments.length;u++){var t=null!=arguments[u]?arguments[u]:{};u%2?a(Object(t),!0).forEach((function(u){n(e,u,t[u])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(u){Object.defineProperty(e,u,Object.getOwnPropertyDescriptor(t,u))}))}return 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,u){if(!e)return;if("string"==typeof e)return i(e,u);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return i(e,u)}(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,u){(null==u||u>e.length)&&(u=e.length);for(var t=0,n=new Array(u);t<u;t++)n[t]=e[t];return n}function o(e){var u=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return u?String(e).toLowerCase().trim():String(e).normalize("NFD").replace(/(?:[\^`\xA8\xAF\xB4\xB7\xB8\u02B0-\u034E\u0350-\u0357\u035D-\u0362\u0374\u0375\u037A\u0384\u0385\u0483-\u0487\u0559\u0591-\u05A1\u05A3-\u05BD\u05BF\u05C1\u05C2\u05C4\u064B-\u0652\u0657\u0658\u06DF\u06E0\u06E5\u06E6\u06EA-\u06EC\u0730-\u074A\u07A6-\u07B0\u07EB-\u07F5\u0818\u0819\u08E3-\u08FE\u093C\u094D\u0951-\u0954\u0971\u09BC\u09CD\u0A3C\u0A4D\u0ABC\u0ACD\u0AFD-\u0AFF\u0B3C\u0B4D\u0B55\u0BCD\u0C4D\u0CBC\u0CCD\u0D3B\u0D3C\u0D4D\u0DCA\u0E47-\u0E4C\u0E4E\u0EBA\u0EC8-\u0ECC\u0F18\u0F19\u0F35\u0F37\u0F39\u0F3E\u0F3F\u0F82-\u0F84\u0F86\u0F87\u0FC6\u1037\u1039\u103A\u1063\u1064\u1069-\u106D\u1087-\u108D\u108F\u109A\u109B\u135D-\u135F\u17C9-\u17D3\u17DD\u1939-\u193B\u1A75-\u1A7C\u1A7F\u1AB0-\u1ABD\u1B34\u1B44\u1B6B-\u1B73\u1BAA\u1BAB\u1C36\u1C37\u1C78-\u1C7D\u1CD0-\u1CE8\u1CED\u1CF4\u1CF7-\u1CF9\u1D2C-\u1D6A\u1DC4-\u1DCF\u1DF5-\u1DF9\u1DFD-\u1DFF\u1FBD\u1FBF-\u1FC1\u1FCD-\u1FCF\u1FDD-\u1FDF\u1FED-\u1FEF\u1FFD\u1FFE\u2CEF-\u2CF1\u2E2F\u302A-\u302F\u3099-\u309C\u30FC\uA66F\uA67C\uA67D\uA67F\uA69C\uA69D\uA6F0\uA6F1\uA700-\uA721\uA788-\uA78A\uA7F8\uA7F9\uA8C4\uA8E0-\uA8F1\uA92B-\uA92E\uA953\uA9B3\uA9C0\uA9E5\uAA7B-\uAA7D\uAABF-\uAAC2\uAAF6\uAB5B-\uAB5F\uAB69-\uAB6B\uABEC\uABED\uFB1E\uFE20-\uFE2F\uFF3E\uFF40\uFF70\uFF9E\uFF9F\uFFE3]|\uD800\uDEE0|\uD802[\uDEE5\uDEE6]|\uD803[\uDD22-\uDD27\uDF46-\uDF50]|\uD804[\uDCB9\uDCBA\uDD33\uDD34\uDD73\uDDC0\uDDCA-\uDDCC\uDE35\uDE36\uDEE9\uDEEA\uDF3C\uDF4D\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC42\uDC46\uDCC2\uDCC3\uDDBF\uDDC0\uDE3F\uDEB6\uDEB7\uDF2B]|\uD806[\uDC39\uDC3A\uDD3D\uDD3E\uDD43\uDDE0\uDE34\uDE47\uDE99]|\uD807[\uDC3F\uDD42\uDD44\uDD45\uDD97]|\uD81A[\uDEF0-\uDEF4\uDF30-\uDF36]|\uD81B[\uDF8F-\uDF9F\uDFF0\uDFF1]|\uD834[\uDD67-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD]|\uD838[\uDD30-\uDD36\uDEEC-\uDEEF]|\uD83A[\uDCD0-\uDCD6\uDD44-\uDD46\uDD48-\uDD4A])/g,"").toLowerCase().trim()}function c(a,r,i){var c=e.toRefs(a),s=c.options,v=c.mode,p=c.trackBy,d=c.limit,f=c.hideSelected,m=c.createTag,g=c.createOption,b=c.label,h=c.appendNewTag,D=c.appendNewOption,y=c.multipleLabel,_=c.object,F=c.loading,O=c.delay,C=c.resolveOnLoad,A=c.minChars,S=c.filterResults,E=c.clearOnSearch,B=c.clearOnSelect,L=c.valueProp,P=c.canDeselect,w=c.max,T=c.strict,k=c.closeOnSelect,x=c.groups,q=(c.groupLabel,c.groupOptions),I=c.groupHideEmpty,R=c.groupSelect,j=e.getCurrentInstance().proxy,V=i.iv,H=i.ev,N=i.search,M=i.clearSearch,G=i.update,$=i.pointer,U=i.clearPointer,W=i.blur,K=i.focus,X=i.deactivate,z=e.ref([]),J=e.ref([]),Q=e.ref(!1),Y=e.ref(null),Z=e.computed((function(){return m.value||g.value||!1})),ee=e.computed((function(){return void 0!==h.value?h.value:void 0===D.value||D.value})),ue=e.computed((function(){if(x.value){var e=J.value||[],u=[];return e.forEach((function(e){Le(e[q.value]).forEach((function(t){u.push(Object.assign({},t,e.disabled?{disabled:!0}:{}))}))})),u}var t=Le(J.value||[]);return z.value.length&&(t=t.concat(z.value)),t})),te=e.computed((function(){return x.value?Ee((J.value||[]).map((function(e){var u,t=Le(e[q.value]);return l(l({},e),{},(n(u={group:!0},q.value,Be(t,!1).map((function(u){return Object.assign({},u,e.disabled?{disabled:!0}:{})}))),n(u,"__VISIBLE__",Be(t).map((function(u){return Object.assign({},u,e.disabled?{disabled:!0}:{})}))),u))}))):[]})),ne=e.computed((function(){var e=ue.value;return oe.value.length&&(e=oe.value.concat(e)),e=Be(e),d.value>0&&(e=e.slice(0,d.value)),e})),ae=e.computed((function(){switch(v.value){case"single":return!u(V.value[L.value]);case"multiple":case"tags":return!u(V.value)&&V.value.length>0}})),le=e.computed((function(){return void 0!==y&&void 0!==y.value?y.value(V.value,j):V.value&&V.value.length>1?"".concat(V.value.length," options selected"):"1 option selected"})),re=e.computed((function(){return!ue.value.length&&!Q.value&&!oe.value.length})),ie=e.computed((function(){return ue.value.length>0&&0==ne.value.length&&(N.value&&x.value||!x.value)})),oe=e.computed((function(){var e;return!1!==Z.value&&N.value?-1!==Ce(N.value)?[]:[(e={},n(e,L.value,N.value),n(e,b.value,N.value),n(e,ce.value,N.value),e)]:[]})),ce=e.computed((function(){return p.value||b.value})),se=e.computed((function(){switch(v.value){case"single":return null;case"multiple":case"tags":return[]}})),ve=e.computed((function(){return F.value||Q.value})),pe=function(e){switch("object"!==t(e)&&(e=Oe(e)),v.value){case"single":G(e);break;case"multiple":case"tags":G(V.value.concat(e))}r.emit("select",fe(e),e)},de=function(e){switch("object"!==t(e)&&(e=Oe(e)),v.value){case"single":ge();break;case"tags":case"multiple":G(Array.isArray(e)?V.value.filter((function(u){return-1===e.map((function(e){return e[L.value]})).indexOf(u[L.value])})):V.value.filter((function(u){return u[L.value]!=e[L.value]})))}r.emit("deselect",fe(e),e)},fe=function(e){return _.value?e:e[L.value]},me=function(e){de(e)},ge=function(){r.emit("clear"),G(se.value)},be=function(e){if(void 0!==e.group)return"single"!==v.value&&(Fe(e[q.value])&&e[q.value].length);switch(v.value){case"single":return!u(V.value)&&V.value[L.value]==e[L.value];case"tags":case"multiple":return!u(V.value)&&-1!==V.value.map((function(e){return e[L.value]})).indexOf(e[L.value])}},he=function(e){return!0===e.disabled},De=function(){return!(void 0===w||-1===w.value||!ae.value&&w.value>0)&&V.value.length>=w.value},ye=function(e){void 0===Oe(e[L.value])&&Z.value&&(r.emit("tag",e[L.value]),r.emit("option",e[L.value]),ee.value&&Se(e),M())},_e=function(e){return void 0===e.find((function(e){return!be(e)&&!e.disabled}))},Fe=function(e){return void 0===e.find((function(e){return!be(e)}))},Oe=function(e){return ue.value[ue.value.map((function(e){return String(e[L.value])})).indexOf(String(e))]},Ce=function(e){return ue.value.map((function(e){return e[ce.value]})).indexOf(e)},Ae=function(e){return-1!==["tags","multiple"].indexOf(v.value)&&f.value&&be(e)},Se=function(e){z.value.push(e)},Ee=function(e){return I.value?e.filter((function(e){return N.value?e.__VISIBLE__.length:e[q.value].length})):e.filter((function(e){return!N.value||e.__VISIBLE__.length}))},Be=function(e){var u=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],t=e;return N.value&&S.value&&(t=t.filter((function(e){return-1!==o(e[ce.value],T.value).indexOf(o(N.value,T.value))}))),f.value&&u&&(t=t.filter((function(e){return!Ae(e)}))),t},Le=function(e){var u,a=e;return u=a,"[object Object]"===Object.prototype.toString.call(u)&&(a=Object.keys(a).map((function(e){var u,t=a[e];return n(u={},L.value,e),n(u,ce.value,t),n(u,b.value,t),u}))),a=a.map((function(e){var u;return"object"===t(e)?e:(n(u={},L.value,e),n(u,ce.value,e),n(u,b.value,e),u)}))},Pe=function(){u(H.value)||(V.value=ke(H.value))},we=function(e){return Q.value=!0,new Promise((function(u,t){s.value(N.value,j).then((function(u){J.value=u||[],"function"==typeof e&&e(u),Q.value=!1})).catch((function(e){console.error(e),J.value=[],Q.value=!1})).finally((function(){u()}))}))},Te=function(){if(ae.value)if("single"===v.value){var e=Oe(V.value[L.value]);if(void 0!==e){var u=e[b.value];V.value[b.value]=u,_.value&&(H.value[b.value]=u)}}else V.value.forEach((function(e,u){var t=Oe(V.value[u][L.value]);if(void 0!==t){var n=t[b.value];V.value[u][b.value]=n,_.value&&(H.value[u][b.value]=n)}}))},ke=function(e){return u(e)?"single"===v.value?{}:[]:_.value?e:"single"===v.value?Oe(e)||{}:e.filter((function(e){return!!Oe(e)})).map((function(e){return Oe(e)}))},xe=function(){Y.value=e.watch(N,(function(e){e.length<A.value||!e||(Q.value=!0,E.value&&(J.value=[]),setTimeout((function(){e==N.value&&s.value(N.value,j).then((function(u){e!=N.value&&N.value||(J.value=u,$.value=ne.value.filter((function(e){return!0!==e.disabled}))[0]||null,Q.value=!1)})).catch((function(e){console.error(e)}))}),O.value))}),{flush:"sync"})};if("single"!==v.value&&!u(H.value)&&!Array.isArray(H.value))throw new Error('v-model must be an array when using "'.concat(v.value,'" mode'));return s&&"function"==typeof s.value?C.value?we(Pe):1==_.value&&Pe():(J.value=s.value,Pe()),O.value>-1&&xe(),e.watch(O,(function(e,u){Y.value&&Y.value(),e>=0&&xe()})),e.watch(H,(function(e){var t,n,a;if(u(e))V.value=ke(e);else switch(v.value){case"single":(_.value?e[L.value]!=V.value[L.value]:e!=V.value[L.value])&&(V.value=ke(e));break;case"multiple":case"tags":t=_.value?e.map((function(e){return e[L.value]})):e,n=V.value.map((function(e){return e[L.value]})),a=n.slice().sort(),t.length===n.length&&t.slice().sort().every((function(e,u){return e===a[u]}))||(V.value=ke(e))}}),{deep:!0}),e.watch(s,(function(e,u){"function"==typeof a.options?C.value&&we((function(){Object.keys(V.value).length&&Pe()})):(J.value=a.options,Object.keys(V.value).length||Pe(),Te())})),e.watch(b,Te),{fo:ne,filteredOptions:ne,hasSelected:ae,multipleLabelText:le,eo:ue,extendedOptions:ue,fg:te,filteredGroups:te,noOptions:re,noResults:ie,resolving:Q,busy:ve,select:pe,deselect:de,remove:me,selectAll:function(){"single"!==v.value&&pe(ne.value)},clear:ge,isSelected:be,isDisabled:he,isMax:De,getOption:Oe,handleOptionClick:function(e){if(!he(e)){switch(v.value){case"single":if(be(e))return void(P.value&&de(e));ye(e),W(),pe(e);break;case"multiple":if(be(e))return void de(e);if(De())return;ye(e),pe(e),B.value&&M(),f.value&&U(),k.value&&W();break;case"tags":if(be(e))return void de(e);if(De())return;ye(e),B.value&&M(),pe(e),f.value&&U(),k.value&&W()}k.value?X():K()}},handleGroupClick:function(e){if(!he(e)&&"single"!==v.value&&R.value){switch(v.value){case"multiple":case"tags":_e(e[q.value])?de(e[q.value]):pe(e[q.value].filter((function(e){return-1===V.value.map((function(e){return e[L.value]})).indexOf(e[L.value])})).filter((function(e){return!e.disabled})).filter((function(e,u){return V.value.length+1+u<=w.value||-1===w.value})))}k.value&&X()}},handleTagRemove:function(e,u){0===u.button?me(e):u.preventDefault()},refreshOptions:function(e){we(e)},resolveOptions:we,refreshLabels:Te}}function s(e,u,t,n,a,l,r,i,o,c){"boolean"!=typeof r&&(o=i,i=r,r=!1);var s,v="function"==typeof t?t.options:t;if(e&&e.render&&(v.render=e.render,v.staticRenderFns=e.staticRenderFns,v._compiled=!0,a&&(v.functional=!0)),n&&(v._scopeId=n),l?(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__),u&&u.call(this,o(e)),e&&e._registeredComponents&&e._registeredComponents.add(l)},v._ssrRegister=s):u&&(s=r?function(e){u.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){u.call(this,i(e))}),s)if(v.functional){var p=v.render;v.render=function(e,u){return s.call(u),p(e,u)}}else{var d=v.beforeCreate;v.beforeCreate=d?[].concat(d,s):[s]}return t}const v={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","option","update:modelValue","change","clear"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1,default:()=>[]},id:{type:[String,Number],required:!1},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:void 0},valueProp:{type:String,required:!1,default:"value"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:void 0},createOption:{type:Boolean,required:!1,default:void 0},appendNewTag:{type:Boolean,required:!1,default:void 0},appendNewOption:{type:Boolean,required:!1,default:void 0},addTagOn:{type:Array,required:!1,default:void 0},addOptionOn:{type:Array,required:!1,default:void 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},canDeselect:{type:Boolean,required:!1,default:!0},canClear:{type:Boolean,required:!1,default:!0},max:{type:Number,required:!1,default:-1},showOptions:{type:Boolean,required:!1,default:!0},required:{type:Boolean,required:!1,default:!1},openDirection:{type:String,required:!1,default:"bottom"},nativeSupport:{type:Boolean,required:!1,default:!1},classes:{type:Object,required:!1,default:()=>({})},strict:{type:Boolean,required:!1,default:!0},closeOnSelect:{type:Boolean,required:!1,default:!0},autocomplete:{type:String,required:!1},groups:{type:Boolean,required:!1,default:!1},groupLabel:{type:String,required:!1,default:"label"},groupOptions:{type:String,required:!1,default:"options"},groupHideEmpty:{type:Boolean,required:!1,default:!1},groupSelect:{type:Boolean,required:!1,default:!0},inputType:{type:String,required:!1,default:"text"},attrs:{required:!1,type:[Object],default:()=>({})}},setup(t,n){const a=function(u,t){var n=e.toRefs(u),a=n.value,l=n.modelValue,r=n.mode,i=n.valueProp,o=e.ref("single"!==r.value?[]:{}),c=void 0!==t.expose?l:a,s=e.computed((function(){return"single"===r.value?o.value[i.value]:o.value.map((function(e){return e[i.value]}))})),v=e.computed((function(){return"single"!==r.value?o.value.map((function(e){return e[i.value]})).join(","):o.value[i.value]}));return{iv:o,internalValue:o,ev:c,externalValue:c,textValue:v,plainValue:s}}(t,n),i=function(u,t,n){var a=e.toRefs(u),l=a.groupSelect,r=a.mode,i=a.groups,o=e.ref(null),c=function(e){void 0===e||null!==e&&e.disabled||i.value&&e&&e.group&&("single"===r.value||!l.value)||(o.value=e)};return{pointer:o,setPointer:c,clearPointer:function(){c(null)}}}(t),o=function(u,t,n){var a=e.toRefs(u).disabled,l=e.ref(!1);return{isOpen:l,open:function(){l.value||a.value||(l.value=!0,t.emit("open"))},close:function(){l.value&&(l.value=!1,t.emit("close"))}}}(t,n),s=function(u,t,n){var a=e.ref(null),l=e.ref(null);return e.watch(a,(function(e){t.emit("search-change",e)})),{search:a,input:l,clearSearch:function(){a.value=""},handleSearchInput:function(e){a.value=e.target.value},handlePaste:function(e){t.emit("paste",e)}}}(0,n),v=function(t,n,a){var l=e.toRefs(t),r=l.object,i=l.valueProp,o=l.mode,c=a.iv,s=function(e){return r.value||u(e)?e:Array.isArray(e)?e.map((function(e){return e[i.value]})):e[i.value]},v=function(e){return u(e)?"single"===o.value?{}:[]:e};return{update:function(e){c.value=v(e);var u=s(e);n.emit("change",u),n.emit("input",u),n.emit("update:modelValue",u)}}}(t,n,{iv:a.iv}),p=function(u,t,n){var a=e.toRefs(u),l=a.searchable,r=a.disabled,i=n.input,o=n.open,c=n.close,s=n.clearSearch,v=e.ref(null),p=e.ref(!1),d=e.computed((function(){return l.value||r.value?-1:0})),f=function(){l.value&&i.value.blur(),v.value.blur()},m=function(){l.value&&!r.value&&i.value.focus()},g=function(){p.value=!1,setTimeout((function(){p.value||(c(),s())}),1)};return{multiselect:v,tabindex:d,isActive:p,blur:f,focus:m,handleFocus:function(){m()},activate:function(){r.value||(p.value=!0,o())},deactivate:g,handleCaretClick:function(){g(),f()}}}(t,0,{input:s.input,open:o.open,close:o.close,clearSearch:s.clearSearch}),d=c(t,n,{ev:a.ev,iv:a.iv,search:s.search,clearSearch:s.clearSearch,update:v.update,pointer:i.pointer,clearPointer:i.clearPointer,blur:p.blur,focus:p.focus,deactivate:p.deactivate}),f=function(u,t,n){var a=e.toRefs(u),l=a.valueProp,i=a.showOptions,o=a.searchable,c=a.groupLabel,s=a.groups,v=a.mode,p=a.groupSelect,d=n.fo,f=n.fg,m=n.handleOptionClick,g=n.handleGroupClick,b=n.search,h=n.pointer,D=n.setPointer,y=n.clearPointer,_=n.multiselect,F=e.computed((function(){return d.value.filter((function(e){return!e.disabled}))})),O=e.computed((function(){return f.value.filter((function(e){return!e.disabled}))})),C=e.computed((function(){return"single"!==v.value&&p.value})),A=e.computed((function(){return h.value&&h.value.group})),S=e.computed((function(){return I(h.value)})),E=e.computed((function(){var e=A.value?h.value:I(h.value),u=O.value.map((function(e){return e[c.value]})).indexOf(e[c.value]),t=O.value[u-1];return void 0===t&&(t=L.value),t})),B=e.computed((function(){var e=O.value.map((function(e){return e.label})).indexOf(A.value?h.value[c.value]:I(h.value)[c.value])+1;return O.value.length<=e&&(e=0),O.value[e]})),L=e.computed((function(){return r(O.value).slice(-1)[0]})),P=e.computed((function(){return h.value.__VISIBLE__.filter((function(e){return!e.disabled}))[0]})),w=e.computed((function(){var e=S.value.__VISIBLE__.filter((function(e){return!e.disabled}));return e[e.map((function(e){return e[l.value]})).indexOf(h.value[l.value])-1]})),T=e.computed((function(){var e=I(h.value).__VISIBLE__.filter((function(e){return!e.disabled}));return e[e.map((function(e){return e[l.value]})).indexOf(h.value[l.value])+1]})),k=e.computed((function(){return r(E.value.__VISIBLE__.filter((function(e){return!e.disabled}))).slice(-1)[0]})),x=e.computed((function(){return r(L.value.__VISIBLE__.filter((function(e){return!e.disabled}))).slice(-1)[0]})),q=function(){D(F.value[0]||null)},I=function(e){return O.value.find((function(u){return-1!==u.__VISIBLE__.map((function(e){return e[l.value]})).indexOf(e[l.value])}))},R=function(){var e=_.value.querySelector("[data-pointed]");if(e){var u=e.parentElement.parentElement;s.value&&(u=A.value?e.parentElement.parentElement.parentElement:e.parentElement.parentElement.parentElement.parentElement),e.offsetTop+e.offsetHeight>u.clientHeight+u.scrollTop&&(u.scrollTop=e.offsetTop+e.offsetHeight-u.clientHeight),e.offsetTop<u.scrollTop&&(u.scrollTop=e.offsetTop)}};return e.watch(b,(function(e){o.value&&(e.length&&i.value?q():y())})),{pointer:h,canPointGroups:C,isPointed:function(e){return!(!h.value||!(!e.group&&h.value[l.value]==e[l.value]||void 0!==e.group&&h.value[c.value]==e[c.value]))||void 0},setPointerFirst:q,selectPointer:function(){h.value&&!0!==h.value.disabled&&(A.value?g(h.value):m(h.value))},forwardPointer:function(){if(null===h.value)D((s.value&&C.value?O.value[0]:F.value[0])||null);else if(s.value&&C.value){var u=A.value?P.value:T.value;void 0===u&&(u=B.value),D(u||null)}else{var t=F.value.map((function(e){return e[l.value]})).indexOf(h.value[l.value])+1;F.value.length<=t&&(t=0),D(F.value[t]||null)}e.nextTick((function(){R()}))},backwardPointer:function(){if(null===h.value){var u=F.value[F.value.length-1];s.value&&C.value&&void 0===(u=x.value)&&(u=L.value),D(u||null)}else if(s.value&&C.value){var t=A.value?k.value:w.value;void 0===t&&(t=A.value?E.value:S.value),D(t||null)}else{var n=F.value.map((function(e){return e[l.value]})).indexOf(h.value[l.value])-1;n<0&&(n=F.value.length-1),D(F.value[n]||null)}e.nextTick((function(){R()}))}}}(t,0,{fo:d.fo,fg:d.fg,handleOptionClick:d.handleOptionClick,handleGroupClick:d.handleGroupClick,search:s.search,pointer:i.pointer,setPointer:i.setPointer,clearPointer:i.clearPointer,multiselect:p.multiselect}),m=function(u,t,n){var a=e.toRefs(u),l=a.mode,i=a.addTagOn,o=a.openDirection,c=a.searchable,s=a.showOptions,v=a.valueProp,p=a.groups,d=a.addOptionOn,f=a.createTag,m=a.createOption,g=n.iv,b=n.update,h=n.search,D=n.setPointer,y=n.selectPointer,_=n.backwardPointer,F=n.forwardPointer,O=n.blur,C=n.fo,A=e.computed((function(){return f.value||m.value||!1})),S=e.computed((function(){return void 0!==i.value?i.value:void 0!==d.value?d.value:["enter"]})),E=function(){"tags"===l.value&&!s.value&&A.value&&c.value&&!p.value&&D(C.value[C.value.map((function(e){return e[v.value]})).indexOf(h.value)])};return{handleKeydown:function(e){switch(e.key){case"Backspace":if("single"===l.value)return;if(c.value&&-1===[null,""].indexOf(h.value))return;if(0===g.value.length)return;b(r(g.value).slice(0,-1));break;case"Enter":if(e.preventDefault(),-1===S.value.indexOf("enter")&&A.value)return;E(),y();break;case" ":if(!A.value&&!c.value)return e.preventDefault(),E(),void y();if(!A.value)return!1;if(-1===S.value.indexOf("space")&&A.value)return;e.preventDefault(),E(),y();break;case"Tab":case";":case",":if(-1===S.value.indexOf(e.key.toLowerCase())||!A.value)return;E(),y(),e.preventDefault();break;case"Escape":O();break;case"ArrowUp":if(e.preventDefault(),!s.value)return;"top"===o.value?F():_();break;case"ArrowDown":if(e.preventDefault(),!s.value)return;"top"===o.value?_():F()}},preparePointer:E}}(t,0,{iv:a.iv,update:v.update,search:s.search,setPointer:i.setPointer,selectPointer:f.selectPointer,backwardPointer:f.backwardPointer,forwardPointer:f.forwardPointer,blur:p.blur,fo:d.fo}),g=function(u,t,n){var a=e.toRefs(u),r=a.classes,i=a.disabled,o=a.openDirection,c=a.showOptions,s=n.isOpen,v=n.isPointed,p=n.isSelected,d=n.isDisabled,f=n.isActive,m=n.canPointGroups,g=n.resolving,b=n.fo,h=e.computed((function(){return l({container:"multiselect",containerDisabled:"is-disabled",containerOpen:"is-open",containerOpenTop:"is-open-top",containerActive:"is-active",singleLabel:"multiselect-single-label",singleLabelText:"multiselect-single-label-text",multipleLabel:"multiselect-multiple-label",search:"multiselect-search",tags:"multiselect-tags",tag:"multiselect-tag",tagDisabled:"is-disabled",tagRemove:"multiselect-tag-remove",tagRemoveIcon:"multiselect-tag-remove-icon",tagsSearchWrapper:"multiselect-tags-search-wrapper",tagsSearch:"multiselect-tags-search",tagsSearchCopy:"multiselect-tags-search-copy",placeholder:"multiselect-placeholder",caret:"multiselect-caret",caretOpen:"is-open",clear:"multiselect-clear",clearIcon:"multiselect-clear-icon",spinner:"multiselect-spinner",dropdown:"multiselect-dropdown",dropdownTop:"is-top",dropdownHidden:"is-hidden",options:"multiselect-options",optionsTop:"is-top",group:"multiselect-group",groupLabel:"multiselect-group-label",groupLabelPointable:"is-pointable",groupLabelPointed:"is-pointed",groupLabelSelected:"is-selected",groupLabelDisabled:"is-disabled",groupLabelSelectedPointed:"is-selected is-pointed",groupLabelSelectedDisabled:"is-selected is-disabled",groupOptions:"multiselect-group-options",option:"multiselect-option",optionPointed:"is-pointed",optionSelected:"is-selected",optionDisabled:"is-disabled",optionSelectedPointed:"is-selected is-pointed",optionSelectedDisabled:"is-selected is-disabled",noOptions:"multiselect-no-options",noResults:"multiselect-no-results",fakeInput:"multiselect-fake-input",spacer:"multiselect-spacer"},r.value)})),D=e.computed((function(){return!!(s.value&&c.value&&(!g.value||g.value&&b.value.length))}));return{classList:e.computed((function(){var e=h.value;return{container:[e.container].concat(i.value?e.containerDisabled:[]).concat(D.value&&"top"===o.value?e.containerOpenTop:[]).concat(D.value&&"top"!==o.value?e.containerOpen:[]).concat(f.value?e.containerActive:[]),spacer:e.spacer,singleLabel:e.singleLabel,singleLabelText:e.singleLabelText,multipleLabel:e.multipleLabel,search:e.search,tags:e.tags,tag:[e.tag].concat(i.value?e.tagDisabled:[]),tagRemove:e.tagRemove,tagRemoveIcon:e.tagRemoveIcon,tagsSearchWrapper:e.tagsSearchWrapper,tagsSearch:e.tagsSearch,tagsSearchCopy:e.tagsSearchCopy,placeholder:e.placeholder,caret:[e.caret].concat(s.value?e.caretOpen:[]),clear:e.clear,clearIcon:e.clearIcon,spinner:e.spinner,dropdown:[e.dropdown].concat("top"===o.value?e.dropdownTop:[]).concat(s.value&&c.value&&D.value?[]:e.dropdownHidden),options:[e.options].concat("top"===o.value?e.optionsTop:[]),group:e.group,groupLabel:function(u){var t=[e.groupLabel];return v(u)?t.push(p(u)?e.groupLabelSelectedPointed:e.groupLabelPointed):p(u)&&m.value?t.push(d(u)?e.groupLabelSelectedDisabled:e.groupLabelSelected):d(u)&&t.push(e.groupLabelDisabled),m.value&&t.push(e.groupLabelPointable),t},groupOptions:e.groupOptions,option:function(u,t){var n=[e.option];return v(u)?n.push(p(u)?e.optionSelectedPointed:e.optionPointed):p(u)?n.push(d(u)?e.optionSelectedDisabled:e.optionSelected):(d(u)||t&&d(t))&&n.push(e.optionDisabled),n},noOptions:e.noOptions,noResults:e.noResults,fakeInput:e.fakeInput}})),showDropdown:D}}(t,0,{isOpen:o.isOpen,isPointed:f.isPointed,canPointGroups:f.canPointGroups,isSelected:d.isSelected,isDisabled:d.isDisabled,isActive:p.isActive,resolving:d.resolving,fo:d.fo});return{...a,...o,...p,...i,...v,...s,...d,...f,...m,...g}}};var p=function(){var e=this,u=e.$createElement,t=e._self._c||u;return t("div",{ref:"multiselect",class:e.classList.container,attrs:{tabindex:e.tabindex,id:e.id},on:{focusin:e.activate,focusout:e.deactivate,keydown:e.handleKeydown,focus:e.handleFocus}},["tags"!==e.mode&&e.searchable&&!e.disabled?[t("input",e._b({ref:"input",class:e.classList.search,attrs:{type:e.inputType,modelValue:e.search,autocomplete:e.autocomplete},domProps:{value:e.search},on:{input:e.handleSearchInput,paste:function(u){return u.stopPropagation(),e.handlePaste(u)}}},"input",e.attrs,!1))]:e._e(),e._v(" "),"tags"==e.mode?[t("div",{class:e.classList.tags},[e._l(e.iv,(function(u,n,a){return e._t("tag",[t("span",{key:a,class:e.classList.tag},[e._v("\n "+e._s(u[e.label])+"\n "),e.disabled?e._e():t("span",{class:e.classList.tagRemove,on:{click:function(t){return e.handleTagRemove(u,t)}}},[t("span",{class:e.classList.tagRemoveIcon})])])],{option:u,handleTagRemove:e.handleTagRemove,disabled:e.disabled})})),e._v(" "),t("div",{class:e.classList.tagsSearchWrapper},[t("span",{class:e.classList.tagsSearchCopy},[e._v(e._s(e.search))]),e._v(" "),e.searchable&&!e.disabled?t("input",e._b({ref:"input",class:e.classList.tagsSearch,attrs:{type:e.inputType,modelValue:e.search,autocomplete:e.autocomplete},domProps:{value:e.search},on:{input:e.handleSearchInput,paste:function(u){return u.stopPropagation(),e.handlePaste(u)}}},"input",e.attrs,!1)):e._e()])],2)]:e._e(),e._v(" "),"single"==e.mode&&e.hasSelected&&!e.search&&e.iv?[e._t("singlelabel",[t("div",{class:e.classList.singleLabel},[t("span",{class:e.classList.singleLabelText,domProps:{innerHTML:e._s(e.iv[e.label])}})])],{value:e.iv})]:e._e(),e._v(" "),"multiple"==e.mode&&e.hasSelected&&!e.search?[e._t("multiplelabel",[t("div",{class:e.classList.multipleLabel,domProps:{innerHTML:e._s(e.multipleLabelText)}})],{values:e.iv})]:e._e(),e._v(" "),!e.placeholder||e.hasSelected||e.search?e._e():[e._t("placeholder",[t("div",{class:e.classList.placeholder},[e._v("\n "+e._s(e.placeholder)+"\n ")])])],e._v(" "),e.busy&&e.isActive?e._t("spinner",[t("span",{class:e.classList.spinner})]):e._e(),e._v(" "),e.hasSelected&&!e.disabled&&e.canClear&&!e.busy?e._t("clear",[t("span",{class:e.classList.clear,on:{mousedown:e.clear}},[t("span",{class:e.classList.clearIcon})])],{clear:e.clear}):e._e(),e._v(" "),e.caret&&e.showOptions?e._t("caret",[t("span",{class:e.classList.caret,on:{click:e.handleCaretClick}})]):e._e(),e._v(" "),t("div",{class:e.classList.dropdown,attrs:{tabindex:"-1"}},[e._t("beforelist",null,{options:e.fo}),e._v(" "),t("ul",{class:e.classList.options},[e.groups?e._l(e.fg,(function(u,n,a){return t("li",{key:a,class:e.classList.group},[t("div",{class:e.classList.groupLabel(u),attrs:{"data-pointed":e.isPointed(u)},on:{mouseenter:function(t){return e.setPointer(u)},click:function(t){return e.handleGroupClick(u)}}},[e._t("grouplabel",[t("span",{domProps:{innerHTML:e._s(u[e.groupLabel])}})],{group:u})],2),e._v(" "),t("ul",{class:e.classList.groupOptions},e._l(u.__VISIBLE__,(function(n,a,l){return t("li",{key:l,class:e.classList.option(n,u),attrs:{"data-pointed":e.isPointed(n)},on:{mouseenter:function(u){return e.setPointer(n)},click:function(u){return e.handleOptionClick(n)}}},[e._t("option",[t("span",{domProps:{innerHTML:e._s(n[e.label])}})],{option:n,search:e.search})],2)})),0)])})):e._l(e.fo,(function(u,n,a){return t("li",{key:a,class:e.classList.option(u),attrs:{"data-pointed":e.isPointed(u)},on:{mouseenter:function(t){return e.setPointer(u)},click:function(t){return e.handleOptionClick(u)}}},[e._t("option",[t("span",{domProps:{innerHTML:e._s(u[e.label])}})],{option:u,search:e.search})],2)}))],2),e._v(" "),e.noOptions?e._t("nooptions",[t("div",{class:e.classList.noOptions,domProps:{innerHTML:e._s(e.noOptionsText)}})]):e._e(),e._v(" "),e.noResults?e._t("noresults",[t("div",{class:e.classList.noResults,domProps:{innerHTML:e._s(e.noResultsText)}})]):e._e(),e._v(" "),e._t("afterlist",null,{options:e.fo})],2),e._v(" "),e.required?t("input",{class:e.classList.fakeInput,attrs:{tabindex:"-1",required:""},domProps:{value:e.textValue}}):e._e(),e._v(" "),e.nativeSupport?["single"==e.mode?t("input",{attrs:{type:"hidden",name:e.name},domProps:{value:void 0!==e.plainValue?e.plainValue:""}}):e._l(e.plainValue,(function(u,n){return t("input",{key:n,attrs:{type:"hidden",name:e.name+"[]"},domProps:{value:u}})}))]:e._e(),e._v(" "),t("div",{class:e.classList.spacer})],2)};p._withStripped=!0;return s({render:p,staticRenderFns:[]},undefined,v,undefined,false,undefined,!1,void 0,void 0,void 0)}(VueCompositionAPI); | ||
var VueformMultiselect=function(e){"use strict";function a(e){return-1!==[null,void 0].indexOf(e)}function l(l,t,u){const{object:n,valueProp:i,mode:r}=e.toRefs(l),o=e.getCurrentInstance().proxy,s=u.iv,c=e=>n.value||a(e)?e:Array.isArray(e)?e.map((e=>e[i.value])):e[i.value],v=e=>a(e)?"single"===r.value?{}:[]:e;return{update:e=>{s.value=v(e);const a=c(e);t.emit("change",a,o),t.emit("input",a),t.emit("update:modelValue",a)}}}function t(a,l){const{value:t,modelValue:u,mode:n,valueProp:i}=e.toRefs(a),r=e.ref("single"!==n.value?[]:{}),o=void 0!==l.expose?u:t,s=e.computed((()=>"single"===n.value?r.value[i.value]:r.value.map((e=>e[i.value])))),c=e.computed((()=>"single"!==n.value?r.value.map((e=>e[i.value])).join(","):r.value[i.value]));return{iv:r,internalValue:r,ev:o,externalValue:o,textValue:c,plainValue:s}}function u(a,l,t){const{regex:u}=e.toRefs(a),n=e.getCurrentInstance().proxy,i=t.isOpen,r=t.open,o=e.ref(null),s=e.ref(null);return e.watch(o,(e=>{!i.value&&e&&r(),l.emit("search-change",e,n)})),{search:o,input:s,clearSearch:()=>{o.value=""},handleSearchInput:e=>{o.value=e.target.value},handleKeypress:e=>{if(u&&u.value){let a=u.value;"string"==typeof a&&(a=new RegExp(a)),e.key.match(a)||e.preventDefault()}},handlePaste:e=>{if(u&&u.value){let a=(e.clipboardData||window.clipboardData).getData("Text"),l=u.value;"string"==typeof l&&(l=new RegExp(l)),a.split("").every((e=>!!e.match(l)))||e.preventDefault()}l.emit("paste",e,n)}}}function n(a,l,t){const{groupSelect:u,mode:n,groups:i,disabledProp:r}=e.toRefs(a),o=e.ref(null),s=e=>{void 0===e||null!==e&&e[r.value]||i.value&&e&&e.group&&("single"===n.value||!u.value)||(o.value=e)};return{pointer:o,setPointer:s,clearPointer:()=>{s(null)}}}function i(e,a=!0){return a?String(e).toLowerCase().trim():String(e).normalize("NFD").replace(/\p{Diacritic}/gu,"").toLowerCase().trim()}function r(l,t,u){const{options:n,mode:r,trackBy:o,limit:s,hideSelected:c,createTag:v,createOption:p,label:d,appendNewTag:f,appendNewOption:m,multipleLabel:g,object:h,loading:b,delay:_,resolveOnLoad:y,minChars:O,filterResults:S,clearOnSearch:L,clearOnSelect:w,valueProp:P,canDeselect:x,max:T,strict:q,closeOnSelect:k,groups:E,reverse:I,infinite:R,groupOptions:C,groupHideEmpty:B,groupSelect:D,onCreate:V,disabledProp:A,searchStart:j}=e.toRefs(l),N=e.getCurrentInstance().proxy,M=u.iv,H=u.ev,F=u.search,$=u.clearSearch,G=u.update,K=u.pointer,W=u.clearPointer,U=u.focus,X=u.deactivate,z=u.close,J=e.ref([]),Q=e.ref([]),Y=e.ref(!1),Z=e.ref(null),ee=e.ref(R.value&&-1===s.value?10:s.value),ae=e.computed((()=>v.value||p.value||!1)),le=e.computed((()=>void 0!==f.value?f.value:void 0===m.value||m.value)),te=e.computed((()=>{if(E.value){let e=Q.value||[],a=[];return e.forEach((e=>{Re(e[C.value]).forEach((l=>{a.push(Object.assign({},l,e[A.value]?{[A.value]:!0}:{}))}))})),a}{let e=Re(Q.value||[]);return J.value.length&&(e=e.concat(J.value)),e}})),ue=e.computed((()=>E.value?Ee((Q.value||[]).map((e=>{const a=Re(e[C.value]);return{...e,group:!0,[C.value]:Ie(a,!1).map((a=>Object.assign({},a,e[A.value]?{[A.value]:!0}:{}))),__VISIBLE__:Ie(a).map((a=>Object.assign({},a,e[A.value]?{[A.value]:!0}:{})))}}))):[])),ne=e.computed((()=>{let e=te.value;return I.value&&(e=e.reverse()),ve.value.length&&(e=ve.value.concat(e)),Ie(e)})),ie=e.computed((()=>{let e=ne.value;return ee.value>0&&(e=e.slice(0,ee.value)),e})),re=e.computed((()=>{switch(r.value){case"single":return!a(M.value[P.value]);case"multiple":case"tags":return!a(M.value)&&M.value.length>0}})),oe=e.computed((()=>void 0!==g&&void 0!==g.value?g.value(M.value,N):M.value&&M.value.length>1?`${M.value.length} options selected`:"1 option selected")),se=e.computed((()=>!te.value.length&&!Y.value&&!ve.value.length)),ce=e.computed((()=>te.value.length>0&&0==ie.value.length&&(F.value&&E.value||!E.value))),ve=e.computed((()=>!1!==ae.value&&F.value?-1!==qe(F.value)?[]:[{[P.value]:F.value,[d.value]:F.value,[pe.value]:F.value,__CREATE__:!0}]:[])),pe=e.computed((()=>o.value||d.value)),de=e.computed((()=>{switch(r.value){case"single":return null;case"multiple":case"tags":return[]}})),fe=e.computed((()=>b.value||Y.value)),me=e=>{switch("object"!=typeof e&&(e=Te(e)),r.value){case"single":G(e);break;case"multiple":case"tags":G(M.value.concat(e))}t.emit("select",he(e),e,N)},ge=e=>{switch("object"!=typeof e&&(e=Te(e)),r.value){case"single":_e();break;case"tags":case"multiple":G(Array.isArray(e)?M.value.filter((a=>-1===e.map((e=>e[P.value])).indexOf(a[P.value]))):M.value.filter((a=>a[P.value]!=e[P.value])))}t.emit("deselect",he(e),e,N)},he=e=>h.value?e:e[P.value],be=e=>{ge(e)},_e=()=>{t.emit("clear",N),G(de.value)},ye=e=>{if(void 0!==e.group)return"single"!==r.value&&(xe(e[C.value])&&e[C.value].length);switch(r.value){case"single":return!a(M.value)&&M.value[P.value]==e[P.value];case"tags":case"multiple":return!a(M.value)&&-1!==M.value.map((e=>e[P.value])).indexOf(e[P.value])}},Oe=e=>!0===e[A.value],Se=()=>!(void 0===T||-1===T.value||!re.value&&T.value>0)&&M.value.length>=T.value,Le=e=>{switch(e.__CREATE__&&delete(e={...e}).__CREATE__,r.value){case"single":if(e&&ye(e))return void(x.value&&ge(e));e&&we(e),w.value&&$(),k.value&&(W(),z()),e&&me(e);break;case"multiple":if(e&&ye(e))return void ge(e);if(Se())return;e&&(we(e),me(e)),w.value&&$(),c.value&&W(),k.value&&z();break;case"tags":if(e&&ye(e))return void ge(e);if(Se())return;e&&we(e),w.value&&$(),e&&me(e),c.value&&W(),k.value&&z()}k.value||U()},we=e=>{void 0===Te(e[P.value])&&ae.value&&(t.emit("tag",e[P.value],N),t.emit("option",e[P.value],N),le.value&&ke(e),$())},Pe=e=>void 0===e.find((e=>!ye(e)&&!e[A.value])),xe=e=>void 0===e.find((e=>!ye(e))),Te=e=>te.value[te.value.map((e=>String(e[P.value]))).indexOf(String(e))],qe=(e,a)=>te.value.map((e=>parseInt(e[pe.value])==e[pe.value]?parseInt(e[pe.value]):e[pe.value])).indexOf(parseInt(e)==e?parseInt(e):e),ke=e=>{J.value.push(e)},Ee=e=>B.value?e.filter((e=>F.value?e.__VISIBLE__.length:e[C.value].length)):e.filter((e=>!F.value||e.__VISIBLE__.length)),Ie=(e,a=!0)=>{let l=e;return F.value&&S.value&&(l=l.filter((e=>j.value?i(e[pe.value],q.value).startsWith(i(F.value,q.value)):-1!==i(e[pe.value],q.value).indexOf(i(F.value,q.value))))),c.value&&a&&(l=l.filter((e=>!(e=>-1!==["tags","multiple"].indexOf(r.value)&&c.value&&ye(e))(e)))),l},Re=e=>{let a=e;var l;return l=a,"[object Object]"===Object.prototype.toString.call(l)&&(a=Object.keys(a).map((e=>{let l=a[e];return{[P.value]:e,[pe.value]:l,[d.value]:l}}))),a=a.map((e=>"object"==typeof e?e:{[P.value]:e,[pe.value]:e,[d.value]:e})),a},Ce=()=>{a(H.value)||(M.value=Ve(H.value))},Be=e=>(Y.value=!0,new Promise(((a,l)=>{n.value(F.value,N).then((a=>{Q.value=a||[],"function"==typeof e&&e(a),Y.value=!1})).catch((e=>{console.error(e),Q.value=[],Y.value=!1})).finally((()=>{a()}))}))),De=()=>{if(re.value)if("single"===r.value){let e=Te(M.value[P.value]);if(void 0!==e){let a=e[d.value];M.value[d.value]=a,h.value&&(H.value[d.value]=a)}}else M.value.forEach(((e,a)=>{let l=Te(M.value[a][P.value]);if(void 0!==l){let e=l[d.value];M.value[a][d.value]=e,h.value&&(H.value[a][d.value]=e)}}))},Ve=e=>a(e)?"single"===r.value?{}:[]:h.value?e:"single"===r.value?Te(e)||{}:e.filter((e=>!!Te(e))).map((e=>Te(e))),Ae=()=>{Z.value=e.watch(F,(e=>{e.length<O.value||!e&&0!==O.value||(Y.value=!0,L.value&&(Q.value=[]),setTimeout((()=>{e==F.value&&n.value(F.value,N).then((a=>{e!=F.value&&F.value||(Q.value=a,K.value=ie.value.filter((e=>!0!==e[A.value]))[0]||null,Y.value=!1)})).catch((e=>{console.error(e)}))}),_.value))}),{flush:"sync"})};if("single"!==r.value&&!a(H.value)&&!Array.isArray(H.value))throw new Error(`v-model must be an array when using "${r.value}" mode`);return n&&"function"==typeof n.value?y.value?Be(Ce):1==h.value&&Ce():(Q.value=n.value,Ce()),_.value>-1&&Ae(),e.watch(_,((e,a)=>{Z.value&&Z.value(),e>=0&&Ae()})),e.watch(H,(e=>{if(a(e))M.value=Ve(e);else switch(r.value){case"single":(h.value?e[P.value]!=M.value[P.value]:e!=M.value[P.value])&&(M.value=Ve(e));break;case"multiple":case"tags":(function(e,a){const l=a.slice().sort();return e.length===a.length&&e.slice().sort().every((function(e,a){return e===l[a]}))})(h.value?e.map((e=>e[P.value])):e,M.value.map((e=>e[P.value])))||(M.value=Ve(e))}}),{deep:!0}),e.watch(n,((e,a)=>{"function"==typeof l.options?y.value&&Be():(Q.value=l.options,Object.keys(M.value).length||Ce(),De())})),e.watch(d,De),{pfo:ne,fo:ie,filteredOptions:ie,hasSelected:re,multipleLabelText:oe,eo:te,extendedOptions:te,fg:ue,filteredGroups:ue,noOptions:se,noResults:ce,resolving:Y,busy:fe,offset:ee,select:me,deselect:ge,remove:be,selectAll:()=>{"single"!==r.value&&me(ie.value)},clear:_e,isSelected:ye,isDisabled:Oe,isMax:Se,getOption:Te,handleOptionClick:e=>{if(!Oe(e))return V&&V.value&&!ye(e)&&e.__CREATE__&&(delete(e={...e}).__CREATE__,(e=V.value(e,N))instanceof Promise)?(Y.value=!0,void e.then((e=>{Y.value=!1,Le(e)}))):void Le(e)},handleGroupClick:e=>{if(!Oe(e)&&"single"!==r.value&&D.value){switch(r.value){case"multiple":case"tags":Pe(e[C.value])?ge(e[C.value]):me(e[C.value].filter((e=>-1===M.value.map((e=>e[P.value])).indexOf(e[P.value]))).filter((e=>!e[A.value])).filter(((e,a)=>M.value.length+1+a<=T.value||-1===T.value)))}k.value&&X()}},handleTagRemove:(e,a)=>{0===a.button?be(e):a.preventDefault()},refreshOptions:e=>{Be(e)},resolveOptions:Be,refreshLabels:De}}function o(a,l,t){const{valueProp:u,showOptions:n,searchable:i,groupLabel:r,groups:o,mode:s,groupSelect:c,disabledProp:v}=e.toRefs(a),p=t.fo,d=t.fg,f=t.handleOptionClick,m=t.handleGroupClick,g=t.search,h=t.pointer,b=t.setPointer,_=t.clearPointer,y=t.multiselect,O=t.isOpen,S=e.computed((()=>p.value.filter((e=>!e[v.value])))),L=e.computed((()=>d.value.filter((e=>!e[v.value])))),w=e.computed((()=>"single"!==s.value&&c.value)),P=e.computed((()=>h.value&&h.value.group)),x=e.computed((()=>V(h.value))),T=e.computed((()=>{const e=P.value?h.value:V(h.value),a=L.value.map((e=>e[r.value])).indexOf(e[r.value]);let l=L.value[a-1];return void 0===l&&(l=k.value),l})),q=e.computed((()=>{let e=L.value.map((e=>e.label)).indexOf(P.value?h.value[r.value]:V(h.value)[r.value])+1;return L.value.length<=e&&(e=0),L.value[e]})),k=e.computed((()=>[...L.value].slice(-1)[0])),E=e.computed((()=>h.value.__VISIBLE__.filter((e=>!e[v.value]))[0])),I=e.computed((()=>{const e=x.value.__VISIBLE__.filter((e=>!e[v.value]));return e[e.map((e=>e[u.value])).indexOf(h.value[u.value])-1]})),R=e.computed((()=>{const e=V(h.value).__VISIBLE__.filter((e=>!e[v.value]));return e[e.map((e=>e[u.value])).indexOf(h.value[u.value])+1]})),C=e.computed((()=>[...T.value.__VISIBLE__.filter((e=>!e[v.value]))].slice(-1)[0])),B=e.computed((()=>[...k.value.__VISIBLE__.filter((e=>!e[v.value]))].slice(-1)[0])),D=()=>{b(S.value[0]||null)},V=e=>L.value.find((a=>-1!==a.__VISIBLE__.map((e=>e[u.value])).indexOf(e[u.value]))),A=()=>{let e=y.value.querySelector("[data-pointed]");if(!e)return;let a=e.parentElement.parentElement;o.value&&(a=P.value?e.parentElement.parentElement.parentElement:e.parentElement.parentElement.parentElement.parentElement),e.offsetTop+e.offsetHeight>a.clientHeight+a.scrollTop&&(a.scrollTop=e.offsetTop+e.offsetHeight-a.clientHeight),e.offsetTop<a.scrollTop&&(a.scrollTop=e.offsetTop)};return e.watch(g,(e=>{i.value&&(e.length&&n.value?D():_())})),e.watch(O,(a=>{if(a){let a=y.value.querySelectorAll("[data-selected]")[0];if(!a)return;let l=a.parentElement.parentElement;e.nextTick((()=>{l.scrollTop>0||(l.scrollTop=a.offsetTop)}))}})),{pointer:h,canPointGroups:w,isPointed:e=>!(!h.value||!(!e.group&&h.value[u.value]==e[u.value]||void 0!==e.group&&h.value[r.value]==e[r.value]))||void 0,setPointerFirst:D,selectPointer:()=>{h.value&&!0!==h.value[v.value]&&(P.value?m(h.value):f(h.value))},forwardPointer:()=>{if(null===h.value)b((o.value&&w.value?L.value[0]:S.value[0])||null);else if(o.value&&w.value){let e=P.value?E.value:R.value;void 0===e&&(e=q.value),b(e||null)}else{let e=S.value.map((e=>e[u.value])).indexOf(h.value[u.value])+1;S.value.length<=e&&(e=0),b(S.value[e]||null)}e.nextTick((()=>{A()}))},backwardPointer:()=>{if(null===h.value){let e=S.value[S.value.length-1];o.value&&w.value&&(e=B.value,void 0===e&&(e=k.value)),b(e||null)}else if(o.value&&w.value){let e=P.value?C.value:I.value;void 0===e&&(e=P.value?T.value:x.value),b(e||null)}else{let e=S.value.map((e=>e[u.value])).indexOf(h.value[u.value])-1;e<0&&(e=S.value.length-1),b(S.value[e]||null)}e.nextTick((()=>{A()}))}}}function s(a,l,t){const{disabled:u}=e.toRefs(a),n=e.getCurrentInstance().proxy,i=e.ref(!1);return{isOpen:i,open:()=>{i.value||u.value||(i.value=!0,l.emit("open",n))},close:()=>{i.value&&(i.value=!1,l.emit("close",n))}}}function c(a,l,t){const{searchable:u,disabled:n}=e.toRefs(a),i=t.input,r=t.open,o=t.close,s=t.clearSearch,c=t.isOpen,v=e.ref(null),p=e.ref(null),d=e.ref(!1),f=e.computed((()=>u.value||n.value?-1:0)),m=()=>{u.value&&i.value.blur(),v.value.blur()},g=()=>{u.value&&!n.value&&i.value.focus()},h=()=>{n.value||(d.value=!0,r())},b=()=>{d.value=!1,setTimeout((()=>{d.value||(o(),s())}),1)};return{multiselect:v,tags:p,tabindex:f,isActive:d,blur:m,focus:g,handleFocus:()=>{g()},activate:h,deactivate:b,handleCaretClick:()=>{b(),m()},handleMousedown:e=>{c.value&&(e.target.isEqualNode(v.value)||e.target.isEqualNode(p.value))?setTimeout((()=>{b()}),0):document.activeElement.isEqualNode(v.value)&&!c.value&&h()}}}function v(a,l,t){const{mode:u,addTagOn:n,openDirection:i,searchable:r,showOptions:o,valueProp:s,groups:c,addOptionOn:v,createTag:p,createOption:d,reverse:f}=e.toRefs(a),m=e.getCurrentInstance().proxy,g=t.iv,h=t.update,b=t.search,_=t.setPointer,y=t.selectPointer,O=t.backwardPointer,S=t.forwardPointer,L=t.isOpen,w=t.open,P=t.blur,x=t.fo,T=e.computed((()=>p.value||d.value||!1)),q=e.computed((()=>void 0!==n.value?n.value:void 0!==v.value?v.value:["enter"])),k=()=>{"tags"===u.value&&!o.value&&T.value&&r.value&&!c.value&&_(x.value[x.value.map((e=>e[s.value])).indexOf(b.value)])};return{handleKeydown:e=>{switch(l.emit("keydown",e,m),e.key){case"Backspace":if("single"===u.value)return;if(r.value&&-1===[null,""].indexOf(b.value))return;if(0===g.value.length)return;h([...g.value].slice(0,-1));break;case"Enter":if(e.preventDefault(),-1===q.value.indexOf("enter")&&T.value)return;k(),y();break;case" ":if(!T.value&&!r.value)return e.preventDefault(),k(),void y();if(!T.value)return!1;if(-1===q.value.indexOf("space")&&T.value)return;e.preventDefault(),k(),y();break;case"Tab":case";":case",":if(-1===q.value.indexOf(e.key.toLowerCase())||!T.value)return;k(),y(),e.preventDefault();break;case"Escape":P();break;case"ArrowUp":if(e.preventDefault(),!o.value)return;L.value||w(),O();break;case"ArrowDown":if(e.preventDefault(),!o.value)return;L.value||w(),S()}},handleKeyup:e=>{l.emit("keyup",e,m)},preparePointer:k}}function p(a,l,t){const{classes:u,disabled:n,openDirection:i,showOptions:r}=e.toRefs(a),o=t.isOpen,s=t.isPointed,c=t.isSelected,v=t.isDisabled,p=t.isActive,d=t.canPointGroups,f=t.resolving,m=t.fo,g=e.computed((()=>({container:"multiselect",containerDisabled:"is-disabled",containerOpen:"is-open",containerOpenTop:"is-open-top",containerActive:"is-active",singleLabel:"multiselect-single-label",singleLabelText:"multiselect-single-label-text",multipleLabel:"multiselect-multiple-label",search:"multiselect-search",tags:"multiselect-tags",tag:"multiselect-tag",tagDisabled:"is-disabled",tagRemove:"multiselect-tag-remove",tagRemoveIcon:"multiselect-tag-remove-icon",tagsSearchWrapper:"multiselect-tags-search-wrapper",tagsSearch:"multiselect-tags-search",tagsSearchCopy:"multiselect-tags-search-copy",placeholder:"multiselect-placeholder",caret:"multiselect-caret",caretOpen:"is-open",clear:"multiselect-clear",clearIcon:"multiselect-clear-icon",spinner:"multiselect-spinner",inifinite:"multiselect-inifite",inifiniteSpinner:"multiselect-inifite-spinner",dropdown:"multiselect-dropdown",dropdownTop:"is-top",dropdownHidden:"is-hidden",options:"multiselect-options",optionsTop:"is-top",group:"multiselect-group",groupLabel:"multiselect-group-label",groupLabelPointable:"is-pointable",groupLabelPointed:"is-pointed",groupLabelSelected:"is-selected",groupLabelDisabled:"is-disabled",groupLabelSelectedPointed:"is-selected is-pointed",groupLabelSelectedDisabled:"is-selected is-disabled",groupOptions:"multiselect-group-options",option:"multiselect-option",optionPointed:"is-pointed",optionSelected:"is-selected",optionDisabled:"is-disabled",optionSelectedPointed:"is-selected is-pointed",optionSelectedDisabled:"is-selected is-disabled",noOptions:"multiselect-no-options",noResults:"multiselect-no-results",fakeInput:"multiselect-fake-input",spacer:"multiselect-spacer",...u.value}))),h=e.computed((()=>!!(o.value&&r.value&&(!f.value||f.value&&m.value.length))));return{classList:e.computed((()=>{const e=g.value;return{container:[e.container].concat(n.value?e.containerDisabled:[]).concat(h.value&&"top"===i.value?e.containerOpenTop:[]).concat(h.value&&"top"!==i.value?e.containerOpen:[]).concat(p.value?e.containerActive:[]),spacer:e.spacer,singleLabel:e.singleLabel,singleLabelText:e.singleLabelText,multipleLabel:e.multipleLabel,search:e.search,tags:e.tags,tag:[e.tag].concat(n.value?e.tagDisabled:[]),tagRemove:e.tagRemove,tagRemoveIcon:e.tagRemoveIcon,tagsSearchWrapper:e.tagsSearchWrapper,tagsSearch:e.tagsSearch,tagsSearchCopy:e.tagsSearchCopy,placeholder:e.placeholder,caret:[e.caret].concat(o.value?e.caretOpen:[]),clear:e.clear,clearIcon:e.clearIcon,spinner:e.spinner,inifinite:e.inifinite,inifiniteSpinner:e.inifiniteSpinner,dropdown:[e.dropdown].concat("top"===i.value?e.dropdownTop:[]).concat(o.value&&r.value&&h.value?[]:e.dropdownHidden),options:[e.options].concat("top"===i.value?e.optionsTop:[]),group:e.group,groupLabel:a=>{let l=[e.groupLabel];return s(a)?l.push(c(a)?e.groupLabelSelectedPointed:e.groupLabelPointed):c(a)&&d.value?l.push(v(a)?e.groupLabelSelectedDisabled:e.groupLabelSelected):v(a)&&l.push(e.groupLabelDisabled),d.value&&l.push(e.groupLabelPointable),l},groupOptions:e.groupOptions,option:(a,l)=>{let t=[e.option];return s(a)?t.push(c(a)?e.optionSelectedPointed:e.optionPointed):c(a)?t.push(v(a)?e.optionSelectedDisabled:e.optionSelected):(v(a)||l&&v(l))&&t.push(e.optionDisabled),t},noOptions:e.noOptions,noResults:e.noResults,fakeInput:e.fakeInput}})),showDropdown:h}}function d(a,l,t){const{limit:u,infinite:n}=e.toRefs(a),i=t.isOpen,r=t.offset,o=t.search,s=t.pfo,c=t.eo,v=e.ref(null),p=e.ref(null),d=e.computed((()=>r.value<s.value.length)),f=a=>{const{isIntersecting:l,target:t}=a[0];if(l){const a=t.offsetParent,l=a.scrollTop;r.value+=-1==u.value?10:u.value,e.nextTick((()=>{a.scrollTop=l}))}},m=()=>{i.value&&r.value<s.value.length?v.value.observe(p.value):!i.value&&v.value&&v.value.disconnect()};return e.watch(i,(()=>{n.value&&m()})),e.watch(o,(()=>{n.value&&(r.value=u.value,m())}),{flush:"post"}),e.watch(c,(()=>{n.value&&m()}),{immediate:!1,flush:"post"}),e.onMounted((()=>{window&&window.IntersectionObserver&&(v.value=new IntersectionObserver(f))})),{hasMore:d,infiniteLoader:p}}function f(a,l,t){const{placeholder:u,id:n,valueProp:i,label:r,mode:o,groupLabel:s}=e.toRefs(a),c=t.pointer,v=t.iv,p=t.isSelected,d=t.hasSelected,f=t.multipleLabelText,m=e.ref(null),g=e.computed((()=>{let e=[];return n&&n.value&&e.push(n.value),e.push("multiselect-options"),e.join("-")})),h=e.computed((()=>{let e=[];if(n&&n.value&&e.push(n.value),e.push("multiselect-option"),c.value&&void 0!==c.value[i.value])return e.push(c.value[i.value]),e.join("-")})),b=e.computed((()=>{let e=[];return m.value&&e.push(m.value),u.value&&!d.value&&e.push(u.value),"single"===o.value&&v.value&&void 0!==v.value[r.value]&&e.push(v.value[r.value]),"multiple"===o.value&&d.value&&e.push(f.value),"tags"===o.value&&d.value&&e.push(...v.value.map((e=>e[r.value]))),e.join(", ")})),_=e.computed((()=>b.value));return e.onMounted((()=>{n&&n.value&&(m.value=document.querySelector(`[for="${n.value}"]`)?.innerText||null)})),{ariaOwns:g,ariaLabel:b,ariaPlaceholder:_,ariaActiveDescendant:h,ariaOptionId:e=>{let a=[];return n&&n.value&&a.push(n.value),a.push("multiselect-option"),a.push(e[i.value]),a.join("-")},ariaOptionLabel:e=>{let a=[];return p(e)&&a.push("✓"),a.push(e[r.value]),a.join(" ")},ariaGroupLabel:e=>{let a=[];return a.push(e[s.value]),a.join(" ")}}}function m(e,a,l,t,u,n,i,r,o,s){"boolean"!=typeof i&&(o=r,r=i,i=!1);const c="function"==typeof l?l.options:l;let v;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,u&&(c.functional=!0)),t&&(c._scopeId=t),n?(v=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__),a&&a.call(this,o(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},c._ssrRegister=v):a&&(v=i?function(e){a.call(this,s(e,this.$root.$options.shadowRoot))}:function(e){a.call(this,r(e))}),v)if(c.functional){const e=c.render;c.render=function(a,l){return v.call(l),e(a,l)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,v):[v]}return l}const g={name:"Multiselect",emits:["paste","open","close","select","deselect","input","search-change","tag","option","update:modelValue","change","clear","keydown","keyup"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object,Function],required:!1,default:()=>[]},id:{type:[String,Number],required:!1},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:void 0},valueProp:{type:String,required:!1,default:"value"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},hideSelected:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:void 0},createOption:{type:Boolean,required:!1,default:void 0},appendNewTag:{type:Boolean,required:!1,default:void 0},appendNewOption:{type:Boolean,required:!1,default:void 0},addTagOn:{type:Array,required:!1,default:void 0},addOptionOn:{type:Array,required:!1,default:void 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},canDeselect:{type:Boolean,required:!1,default:!0},canClear:{type:Boolean,required:!1,default:!0},max:{type:Number,required:!1,default:-1},showOptions:{type:Boolean,required:!1,default:!0},required:{type:Boolean,required:!1,default:!1},openDirection:{type:String,required:!1,default:"bottom"},nativeSupport:{type:Boolean,required:!1,default:!1},classes:{type:Object,required:!1,default:()=>({})},strict:{type:Boolean,required:!1,default:!0},closeOnSelect:{type:Boolean,required:!1,default:!0},autocomplete:{type:String,required:!1},groups:{type:Boolean,required:!1,default:!1},groupLabel:{type:String,required:!1,default:"label"},groupOptions:{type:String,required:!1,default:"options"},groupHideEmpty:{type:Boolean,required:!1,default:!1},groupSelect:{type:Boolean,required:!1,default:!0},inputType:{type:String,required:!1,default:"text"},attrs:{required:!1,type:Object,default:()=>({})},onCreate:{required:!1,type:Function},disabledProp:{type:String,required:!1,default:"disabled"},searchStart:{type:Boolean,required:!1,default:!1},reverse:{type:Boolean,required:!1,default:!1},regex:{type:[Object,String,RegExp],required:!1,default:void 0},rtl:{type:Boolean,required:!1,default:!1},infinite:{type:Boolean,required:!1,default:!1}},setup:(e,a)=>function(e,a,l,t={}){return l.forEach((l=>{l&&(t={...t,...l(e,a,t)})})),t}(e,a,[t,n,s,u,l,c,r,d,o,v,p,f])};var h=function(){var e=this,a=e.$createElement,l=e._self._c||a;return l("div",{ref:"multiselect",class:e.classList.container,attrs:{tabindex:e.tabindex,id:e.searchable?void 0:e.id,dir:e.rtl?"rtl":void 0,"aria-owns":e.ariaOwns,"aria-expanded":e.isOpen,"aria-label":e.ariaLabel,"aria-placeholder":e.ariaPlaceholder,"aria-activedescendant":e.ariaActiveDescendant,role:"combobox"},on:{focusin:e.activate,focusout:e.deactivate,keydown:e.handleKeydown,keyup:e.handleKeyup,focus:e.handleFocus,mousedown:e.handleMousedown}},["tags"!==e.mode&&e.searchable&&!e.disabled?[l("input",e._b({ref:"input",class:e.classList.search,attrs:{type:e.inputType,modelValue:e.search,autocomplete:e.autocomplete,id:e.searchable?e.id:void 0,"aria-owns":e.ariaOwns,"aria-expanded":e.isOpen,"aria-label":e.ariaLabel,"aria-placeholder":e.ariaPlaceholder,"aria-activedescendant":e.ariaActiveDescendant,role:"combobox"},domProps:{value:e.search},on:{input:e.handleSearchInput,keypress:e.handleKeypress,paste:function(a){return a.stopPropagation(),e.handlePaste.apply(null,arguments)}}},"input",e.attrs,!1))]:e._e(),e._v(" "),"tags"==e.mode?[l("div",{class:e.classList.tags},[e._l(e.iv,(function(a,t,u){return e._t("tag",(function(){return[l("span",{key:u,class:e.classList.tag},[e._v("\n "+e._s(a[e.label])+"\n "),e.disabled?e._e():l("span",{class:e.classList.tagRemove,on:{click:function(l){return e.handleTagRemove(a,l)}}},[l("span",{class:e.classList.tagRemoveIcon})])])]}),{option:a,handleTagRemove:e.handleTagRemove,disabled:e.disabled})})),e._v(" "),l("div",{ref:"tags",class:e.classList.tagsSearchWrapper},[l("span",{class:e.classList.tagsSearchCopy},[e._v(e._s(e.search))]),e._v(" "),e.searchable&&!e.disabled?l("input",e._b({ref:"input",class:e.classList.tagsSearch,attrs:{type:e.inputType,modelValue:e.search,id:e.searchable?e.id:void 0,autocomplete:e.autocomplete,"aria-owns":e.ariaOwns,"aria-expanded":e.isOpen,"aria-label":e.ariaLabel,"aria-placeholder":e.ariaPlaceholder,"aria-activedescendant":e.ariaActiveDescendant,role:"combobox"},domProps:{value:e.search},on:{input:e.handleSearchInput,keypress:e.handleKeypress,paste:function(a){return a.stopPropagation(),e.handlePaste.apply(null,arguments)}}},"input",e.attrs,!1)):e._e()])],2)]:e._e(),e._v(" "),"single"==e.mode&&e.hasSelected&&!e.search&&e.iv?[e._t("singlelabel",(function(){return[l("div",{class:e.classList.singleLabel},[l("span",{class:e.classList.singleLabelText,domProps:{innerHTML:e._s(e.iv[e.label])}})])]}),{value:e.iv})]:e._e(),e._v(" "),"multiple"==e.mode&&e.hasSelected&&!e.search?[e._t("multiplelabel",(function(){return[l("div",{class:e.classList.multipleLabel,domProps:{innerHTML:e._s(e.multipleLabelText)}})]}),{values:e.iv})]:e._e(),e._v(" "),!e.placeholder||e.hasSelected||e.search?e._e():[e._t("placeholder",(function(){return[l("div",{class:e.classList.placeholder},[e._v("\n "+e._s(e.placeholder)+"\n ")])]}))],e._v(" "),e.loading||e.resolving?e._t("spinner",(function(){return[l("span",{class:e.classList.spinner})]})):e._e(),e._v(" "),e.hasSelected&&!e.disabled&&e.canClear&&!e.busy?e._t("clear",(function(){return[l("span",{class:e.classList.clear,on:{click:e.clear}},[l("span",{class:e.classList.clearIcon})])]}),{clear:e.clear}):e._e(),e._v(" "),e.caret&&e.showOptions?e._t("caret",(function(){return[l("span",{class:e.classList.caret,on:{click:e.handleCaretClick}})]})):e._e(),e._v(" "),l("div",{class:e.classList.dropdown,attrs:{tabindex:"-1"}},[e._t("beforelist",null,{options:e.fo}),e._v(" "),l("ul",{class:e.classList.options,attrs:{id:e.ariaOwns,role:"listbox"}},[e.groups?e._l(e.fg,(function(a,t,u){return l("li",{key:u,class:e.classList.group},[l("div",{class:e.classList.groupLabel(a),attrs:{"data-pointed":e.isPointed(a),role:"none"},on:{mouseenter:function(l){return e.setPointer(a)},click:function(l){return e.handleGroupClick(a)}}},[e._t("grouplabel",(function(){return[l("span",{domProps:{innerHTML:e._s(a[e.groupLabel])}})]}),{group:a,isSelected:e.isSelected,isPointed:e.isPointed})],2),e._v(" "),l("ul",{class:e.classList.groupOptions,attrs:{"aria-label":e.ariaGroupLabel(a),role:"group"}},e._l(a.__VISIBLE__,(function(t,u,n){return l("li",{key:n,class:e.classList.option(t,a),attrs:{"data-pointed":e.isPointed(t),"data-selected":e.isSelected(t)||void 0,id:e.ariaOptionId(t),"aria-label":e.ariaOptionLabel(t),role:"option"},on:{mouseenter:function(a){return e.setPointer(t)},click:function(a){return e.handleOptionClick(t)}}},[e._t("option",(function(){return[l("span",{domProps:{innerHTML:e._s(t[e.label])}})]}),{option:t,isSelected:e.isSelected,isPointed:e.isPointed,search:e.search})],2)})),0)])})):e._l(e.fo,(function(a,t,u){return l("li",{key:u,class:e.classList.option(a),attrs:{id:e.ariaOptionId(a),"aria-label":e.ariaOptionLabel(a),"data-pointed":e.isPointed(a),"data-selected":e.isSelected(a)||void 0,role:"option"},on:{mouseenter:function(l){return e.setPointer(a)},click:function(l){return e.handleOptionClick(a)}}},[e._t("option",(function(){return[l("span",{domProps:{innerHTML:e._s(a[e.label])}})]}),{option:a,isSelected:e.isSelected,isPointed:e.isPointed,search:e.search})],2)}))],2),e._v(" "),e.noOptions?e._t("nooptions",(function(){return[l("div",{class:e.classList.noOptions,domProps:{innerHTML:e._s(e.noOptionsText)}})]})):e._e(),e._v(" "),e.noResults?e._t("noresults",(function(){return[l("div",{class:e.classList.noResults,domProps:{innerHTML:e._s(e.noResultsText)}})]})):e._e(),e._v(" "),e.infinite&&e.hasMore?l("div",{ref:"infiniteLoader",class:e.classList.inifinite},[e._t("infinite",(function(){return[l("span",{class:e.classList.inifiniteSpinner})]}))],2):e._e(),e._v(" "),e._t("afterlist",null,{options:e.fo})],2),e._v(" "),e.required?l("input",{class:e.classList.fakeInput,attrs:{tabindex:"-1",required:""},domProps:{value:e.textValue}}):e._e(),e._v(" "),e.nativeSupport?["single"==e.mode?l("input",{attrs:{type:"hidden",name:e.name},domProps:{value:void 0!==e.plainValue?e.plainValue:""}}):e._l(e.plainValue,(function(a,t){return l("input",{key:t,attrs:{type:"hidden",name:e.name+"[]"},domProps:{value:a}})}))]:e._e(),e._v(" "),l("div",{class:e.classList.spacer})],2)};h._withStripped=!0;return m({render:h,staticRenderFns:[]},undefined,g,undefined,false,undefined,!1,void 0,void 0,void 0)}(VueCompositionAPI); |
{ | ||
"name": "@vueform/multiselect", | ||
"version": "2.3.4", | ||
"version": "2.4.0", | ||
"private": false, | ||
@@ -5,0 +5,0 @@ "description": "Vue 3 multiselect component with single select, multiselect and tagging options.", |
368
README.md
@@ -83,2 +83,4 @@ <div align="center"> | ||
* ESM support | ||
* Accessibility | ||
* RTL support | ||
* Single select options | ||
@@ -89,2 +91,3 @@ * Multiple select options | ||
* Async options | ||
* Infinite scroll | ||
* Search & filtering | ||
@@ -100,33 +103,43 @@ * Custom slots | ||
* [Demo](#demo) | ||
* [Installation](#installation) | ||
* [Using with Vue 3](#using-with-vue-3) | ||
* [Using with Vue 2](#using-with-vue-2) | ||
* [Using with Nuxt.js](#using-with-nuxtjs) | ||
* [Support](#support) | ||
* [Configuration](#configuration) | ||
* [Basic props](#basic-props) | ||
* [Advanced props](#advanced-props) | ||
* [API](#api) | ||
* [Events](#events) | ||
* [Slots](#slots) | ||
* [Styling](#styling) | ||
* [Styling with CSS vars](#styling-with-css-vars) | ||
* [Styling with Tailwind CSS](#styling-with-tailwind-css) | ||
* [Examples](#examples) | ||
* [Single select](#single-select) | ||
* [Multiselect with object options](#multiselect-with-object-options) | ||
* [Multiselect with disabled options](#multiselect-with-disabled-options) | ||
* [Multiselect with groups](#multiselect-with-groups) | ||
* [Tags with search, create and array of objects options](#tags-with-search-create-and-array-of-objects-options) | ||
* [Autocomplete with async options](#autocomplete-with-async-options) | ||
* [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) | ||
* [License](#license) | ||
- [Sponsors](#sponsors) | ||
- [About Vueform](#about-vueform) | ||
- [Other libraries](#other-libraries) | ||
- [Multiselect features](#multiselect-features) | ||
- [Sections](#sections) | ||
- [Demo](#demo) | ||
- [Installation](#installation) | ||
- [Using with Vue 3](#using-with-vue-3) | ||
- [Using with Vue 2](#using-with-vue-2) | ||
- [Using with Nuxt.js](#using-with-nuxtjs) | ||
- [Support](#support) | ||
- [Configuration](#configuration) | ||
- [Basic props](#basic-props) | ||
- [Advanced Props](#advanced-props) | ||
- [API](#api) | ||
- [Events](#events) | ||
- [Slots](#slots) | ||
- [Styling](#styling) | ||
- [Styling with CSS vars](#styling-with-css-vars) | ||
- [Styling with Tailwind CSS](#styling-with-tailwind-css) | ||
- [Using `:classes` prop](#using-classes-prop) | ||
- [Examples](#examples) | ||
- [Single select](#single-select) | ||
- [Multiselect with object options](#multiselect-with-object-options) | ||
- [Multiselect with disabled options](#multiselect-with-disabled-options) | ||
- [Multiselect with groups](#multiselect-with-groups) | ||
- [Tags with search, create and array of objects options](#tags-with-search-create-and-array-of-objects-options) | ||
- [Autocomplete with async options](#autocomplete-with-async-options) | ||
- [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) | ||
- [Async options with default values](#async-options-with-default-values) | ||
- [Default values that are not among the options](#default-values-that-are-not-among-the-options) | ||
- [Manage created tag asynchronously](#manage-created-tag-asynchronously) | ||
- [Load async options from API on open with infinite scroll](#load-async-options-from-api-on-open-with-infinite-scroll) | ||
- [License](#license) | ||
## Demo | ||
Check out our <a href="https://jsfiddle.net/xf0jzoct/" target="_blank">demo</a>. | ||
Check out our <a href="https://jsfiddle.net/t421d7cg/" target="_blank">demo</a>. | ||
@@ -234,3 +247,3 @@ ## Installation | ||
| **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:<br>`[`<br> `{`<br> `[valueProp]: 1,`<br> `[label]: 'v1',`<br> `disabled:true\|false`<br> `},`<br> `//...`<br>`]`<br>- a function returning a Promise (async function) with `query` input param. The promise should return options as an **object** or as an **array of objects**.<br>When an array of objects is provided it **must** have properties that equal to `:valueProp`'s, `:trackBy`'s and `:label`'s value. | | ||
| **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:<br>`[`<br> `{`<br> `[valueProp]: 1,`<br> `[label]: 'v1',`<br> `disabled:true\|false`<br> `},`<br> `//...`<br>`]`<br>- a function returning a Promise (async function) with `query` and `select$` param. The `select$` represents the Multiselect component and its API can be accessed. The promise should return options as an **object** or as an **array of objects**.<br>When an array of objects is provided it **must** have properties that equal to `:valueProp`'s, `:trackBy`'s and `:label`'s value. | | ||
| **groups** | `boolean` | `false` | Whether options should be groupped. Example:<br>`{`<br> `groups: true,`<br> `options: [`<br> `{`<br> `[groupLabel]: 'Group label',`<br> `[groupOptions]: {options},`<br> `disabled: true\|false,`<br> `}`<br> `//...`<Br> `]`<br>`}`<br>The `{options}` should equal to regular `options` definition. | | ||
@@ -242,2 +255,3 @@ | **groupLabel** | `string` | `label` | The name of the property that contains the label of a group when `options` are provided in group format and `groups` is `true`. | | ||
| **required** | `boolean` | `false` | Whether the HTML5 required attribute should be used for multiselect (using an invisible fake input). | | ||
| **infinite** | `boolean` | `false` | Whether the actual option nodes should only be loaded on scroll. The `limit` option defines how many options are loaded initially and in each new batch. | | ||
| **searchable** | `boolean` | `false` | Whether the options should be searchable. | | ||
@@ -247,2 +261,3 @@ | **valueProp** | `string` | `'value'` | If you provide an array of objects as `options` this property should be used as the value of the option. | | ||
| **label** | `string` | `'label'` | If you provide an array of objects as `options` the value of this property will be displayed as selected option. | | ||
| **disabledProp** | `string` | `'disabled'` | If you provide an array of objects as `options` this property should be used to determine whether the option is disabled. | | ||
| **placeholder** | `string` | `null` | The text that should be displayed before any option is selected. | | ||
@@ -253,2 +268,3 @@ | **multipleLabel** | `function` | | A function that returns the label to be displayed for selected options when using `multiple` mode. It receives `value` as an argument. By default it renders `1 option selected` and `[n] options selected` based on `value` length. | | ||
| **autocomplete** | `string` | `undefined` | The `autocomplete` attribute of the search input. | | ||
| **rtl** | `boolean` | `false` | Whether the multiselect should be right-to-left. It also respects `dir="rtl"` on any parent element. | | ||
| **max** | `number` | `-1` | The maximum number of options that **can be selected** when using `multiple` or `tags` mode. If `-1` the number of options won't be limited. | | ||
@@ -262,3 +278,6 @@ | **limit** | `number` | `-1` | The maximum number of options that **should be displayed**. If `-1` the number of options won't be limited. | | ||
| **openDirection** | `string` | `bottom` | Whether the option list should be displayed above or below the multiselect. Possible values: `top\|bottom` | | ||
| **reverse** | `boolean` | `false` | Whether the option list should be reversed. | | ||
| **regex** | `regex|string` | `undefined` | The regex that search input should be tested against when `searchable: true`. | | ||
| **strict** | `boolean` | `true` | Whether should regard accents/diacritics in search. | | ||
| **searchStart** | `boolean` | `false` | Whether the search should match the start of the options' `trackBy`s. | | ||
| **classes** | `object` | | An object of class names that gets merged with the default values. Default: `{`<br> `container: 'multiselect',`<br> `containerDisabled: 'is-disabled',`<br> `containerOpen: 'is-open',`<br> `containerOpenTop: 'is-open-top',`<br> `containerActive: 'is-active',`<br> `singleLabel: 'multiselect-single-label',`<br> `singleLabelText: 'multiselect-single-label-text',`<br> `multipleLabel: 'multiselect-multiple-label',`<br> `search: 'multiselect-search',`<br> `tags: 'multiselect-tags',`<br> `tag: 'multiselect-tag',`<br> `tagDisabled: 'is-disabled',`<br> `tagRemove: 'multiselect-tag-remove',`<br> `tagRemoveIcon: 'multiselect-tag-remove-icon',`<br> `tagsSearchWrapper: 'multiselect-tags-search-wrapper',`<br> `tagsSearch: 'multiselect-tags-search',`<br> `tagsSearchCopy: 'multiselect-tags-search-copy',`<br> `placeholder: 'multiselect-placeholder',`<br> `caret: 'multiselect-caret',`<br> `caretOpen: 'is-open',`<br> `clear: 'multiselect-clear',`<br> `clearIcon: 'multiselect-clear-icon',`<br> `spinner: 'multiselect-spinner',`<br> `dropdown: 'multiselect-dropdown',`<br> `dropdownTop: 'is-top',`<br> `dropdownHidden: 'is-hidden',`<br> `options: 'multiselect-options',`<br> `optionsTop: 'is-top',`<br> `group: 'multiselect-group',`<br> `groupLabel: 'multiselect-group-label',`<br> `groupLabelPointable: 'is-pointable',`<br> `groupLabelPointed: 'is-pointed',`<br> `groupLabelSelected: 'is-selected',`<br> `groupLabelDisabled: 'is-disabled',`<br> `groupLabelSelectedPointed: 'is-selected is-pointed',`<br> `groupLabelSelectedDisabled: 'is-selected is-disabled',`<br> `groupOptions: 'multiselect-group-options',`<br> `option: 'multiselect-option',`<br> `optionPointed: 'is-pointed',`<br> `optionSelected: 'is-selected',`<br> `optionDisabled: 'is-disabled',`<br> `optionSelectedPointed: 'is-selected is-pointed',`<br> `optionSelectedDisabled: 'is-selected is-disabled',`<br> `noOptions: 'multiselect-no-options',`<br> `noResults: 'multiselect-no-results',`<br> `fakeInput: 'multiselect-fake-input',`<br> `spacer: 'multiselect-spacer'`<br>`}` | | ||
@@ -289,2 +308,3 @@ | ||
| **addOptionOn** | `array` | `['enter']` | The list of keys that creates a new option while typing in the search field when having `createOption` enabled. Possible values: `'enter'\|'space'\|'tab'\|';'\|','`. | | ||
| **onCreate** | `function` | | Transforms the created tag before being added when `createOption` is enabled. It receives the original `option` as first param, which is the object that would be added to the option list (`{value: 'Value', label: 'Label'}`) and the Multiselect `component` as the second. It should return an object that contains at least the keys defined by `valueProp`, `label` & `trackBy` options. If defined and returns `false` the option will not be added (the add can be handled manually by updating `options` & `v-model`). | | ||
| **hideSelected** | `boolean` | `true` | Whether selected options should be excluded from the option list when using `multiple` or `tags` mode. | | ||
@@ -341,13 +361,17 @@ | **showOptions** | `boolean` | `true` | Whether option list should be displayed. Can be used to create free-typed tags. | | ||
| --- | --- | --- | | ||
| **@change** | `value` | Emitted after the value is changed. | | ||
| **@close** | | Emitted after closing the option list. | | ||
| **@deselect** | `option` | Emitted after an option is deselected or a tag is removed. | | ||
| **@open** | | Emitted after opening the option list. | | ||
| **@search-change** | `query` | Emitted after a character is typed. | | ||
| **@select** | `option` | Emitted after an option or tag is selected. | | ||
| **@tag** | `query` | **Deprecated 2.3.0: use `@option` instead**. Emitted after enter is hit when a new tag is being created. | | ||
| **@option** | `query` | Emitted after enter is hit when a new option is being created. | | ||
| **@clear** | | Emitted when the options are cleared. | | ||
| **@paste** | `Event` | Emitted when value is pasted into the search field. | | ||
| **@change** | `value, select$` | Emitted after the value is changed. | | ||
| **@close** | `select$` | Emitted after closing the option list. | | ||
| **@deselect** | `option, select$` | Emitted after an option is deselected or a tag is removed. | | ||
| **@open** | `select$` | Emitted after opening the option list. | | ||
| **@search-change** | `query, select$` | Emitted after a character is typed. | | ||
| **@select** | `option, select$` | Emitted after an option or tag is selected. | | ||
| **@tag** | `query, select$` | **Deprecated 2.3.0: use `@option` instead**. Emitted after enter is hit when a new tag is being created. | | ||
| **@option** | `query, select$` | Emitted after enter is hit when a new option is being created. | | ||
| **@clear** | `select$` | Emitted when the options are cleared. | | ||
| **@paste** | `Event, select$` | Emitted when value is pasted into the search field. | | ||
| **@keydown** | `Event, select$` | Emitted on `keydown`. | | ||
| **@keyup** | `Event, select$` | Emitted on `keyup`. | | ||
The `select$` param is each event is Multiselect component's instance. | ||
## Slots | ||
@@ -363,4 +387,4 @@ | ||
| **noresults** | | Rendered when there are no search results. By default renders `noResultsText`. | | ||
| **grouplabel** | `group` | Renders an option group label. | | ||
| **option** | `option, search` | Renders an option in options list. | | ||
| **grouplabel** | `group, isPointed, isSelected` | Renders an option group label. The `isPointed` and `isSelected` props are function that used be used like `isPointed(option)` to determine the state. | | ||
| **option** | `option, isPointed, isSelected, search` | Renders an option in options list. The `isPointed` and `isSelected` props are function that used be used like `isPointed(option)` to determine the state. | | ||
| **singlelabel** | `value` | Rendered when using `single` mode and an option is selected. By default it renders the `:label` if the selected option. | | ||
@@ -371,2 +395,3 @@ | **tag** | `option, handleTagRemove, disabled` | Renders a tag when using `tags` mode. When `disabled` the remove icon should not be displayed. The `handleTagRemove` prop should be used to trigger the removal of the tag. | | ||
| **spinner** | | Renders a loader icon when async options are being fetched. | | ||
| **infinite** | | Renders a loader icon when infinite scroll is in progress. | | ||
@@ -526,3 +551,3 @@ > Note: we don't use camelCase because they are [normalized back to lowercase](https://github.com/vuejs/vue/issues/9449#issuecomment-461170017) when written in DOM. | ||
Then you need to import `themes/tailwind.scss` to you main component: | ||
Then you need to import `themes/tailwind.css` to you main component: | ||
@@ -540,4 +565,4 @@ ``` vue | ||
<style lang="scss"> | ||
@import 'path/to/node_modules/@vueform/multiselect/themes/tailwind.scss' | ||
<style> | ||
@import 'path/to/node_modules/@vueform/multiselect/themes/tailwind.css' | ||
</style> | ||
@@ -548,3 +573,3 @@ ``` | ||
Alternatively you can define class names directly by passing them to the `Multiselect` component via `classes` property. When using this approach you don't need to import `tailwind.scss`. Here's a default styling for Tailwind CSS (the same included in `tailwind.scss`): | ||
Alternatively you can define class names directly by passing them to the `Multiselect` component via `classes` property. When using this approach you don't need to import `tailwind.css`. Here's a default styling for Tailwind CSS (the same included in `tailwind.css`): | ||
@@ -558,9 +583,9 @@ ``` vue | ||
containerActive: 'ring ring-green-500 ring-opacity-30', | ||
singleLabel: 'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border', | ||
singleLabel: 'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5', | ||
singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full', | ||
multipleLabel: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5', | ||
search: 'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5', | ||
tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2', | ||
tag: 'bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap', | ||
tagDisabled: 'pr-2 opacity-50', | ||
multipleLabel: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5', | ||
search: 'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5', | ||
tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 rtl:pl-0 rtl:pr-2', | ||
tag: 'bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1', | ||
tagDisabled: 'pr-2 opacity-50 rtl:pl-2', | ||
tagRemove: 'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group', | ||
@@ -571,8 +596,10 @@ tagRemoveIcon: 'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60', | ||
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px', | ||
placeholder: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400', | ||
caret: 'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none', | ||
placeholder: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5', | ||
caret: 'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5', | ||
caretOpen: 'rotate-180 pointer-events-auto', | ||
clear: 'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80', | ||
clear: 'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5', | ||
clearIcon: 'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block', | ||
spinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0', | ||
spinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5', | ||
inifite: 'flex items-center justify-center w-full', | ||
inifiteSpinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5', | ||
dropdown: 'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b', | ||
@@ -614,12 +641,39 @@ dropdownTop: '-translate-y-full top-px bottom-auto flex-col-reverse rounded-b-none rounded-t', | ||
* [Single select](#single-select) | ||
* [Multiselect with object options](#multiselect-with-object-options) | ||
* [Multiselect with disabled options](#multiselect-with-disabled-options) | ||
* [Multiselect with groups](#multiselect-with-groups) | ||
* [Tags with search, create and array of objects options](#tags-with-search-create-and-array-of-objects-options) | ||
* [Autocomplete with async options](#autocomplete-with-async-options) | ||
* [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) | ||
- [Sponsors](#sponsors) | ||
- [About Vueform](#about-vueform) | ||
- [Other libraries](#other-libraries) | ||
- [Multiselect features](#multiselect-features) | ||
- [Sections](#sections) | ||
- [Demo](#demo) | ||
- [Installation](#installation) | ||
- [Using with Vue 3](#using-with-vue-3) | ||
- [Using with Vue 2](#using-with-vue-2) | ||
- [Using with Nuxt.js](#using-with-nuxtjs) | ||
- [Support](#support) | ||
- [Configuration](#configuration) | ||
- [Basic props](#basic-props) | ||
- [Advanced Props](#advanced-props) | ||
- [API](#api) | ||
- [Events](#events) | ||
- [Slots](#slots) | ||
- [Styling](#styling) | ||
- [Styling with CSS vars](#styling-with-css-vars) | ||
- [Styling with Tailwind CSS](#styling-with-tailwind-css) | ||
- [Using `:classes` prop](#using-classes-prop) | ||
- [Examples](#examples) | ||
- [Single select](#single-select) | ||
- [Multiselect with object options](#multiselect-with-object-options) | ||
- [Multiselect with disabled options](#multiselect-with-disabled-options) | ||
- [Multiselect with groups](#multiselect-with-groups) | ||
- [Tags with search, create and array of objects options](#tags-with-search-create-and-array-of-objects-options) | ||
- [Autocomplete with async options](#autocomplete-with-async-options) | ||
- [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) | ||
- [Async options with default values](#async-options-with-default-values) | ||
- [Default values that are not among the options](#default-values-that-are-not-among-the-options) | ||
- [Manage created tag asynchronously](#manage-created-tag-asynchronously) | ||
- [Load async options from API on open with infinite scroll](#load-async-options-from-api-on-open-with-infinite-scroll) | ||
- [License](#license) | ||
@@ -635,3 +689,3 @@ ### Single select | ||
<a href="https://jsfiddle.net/xf0jzoct/" target="_blank">JSFiddle - Example #1</a> | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #1</a> | ||
@@ -653,3 +707,3 @@ ### Multiselect with object options | ||
<a href="https://jsfiddle.net/xf0jzoct/" target="_blank">JSFiddle - Example #2</a> | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #2</a> | ||
@@ -671,3 +725,3 @@ ### Multiselect with disabled options | ||
<a href="https://jsfiddle.net/xf0jzoct/" target="_blank">JSFiddle - Example #3</a> | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #3</a> | ||
@@ -695,3 +749,3 @@ ### Multiselect with groups | ||
<a href="https://jsfiddle.net/xf0jzoct/" target="_blank">JSFiddle - Example #4</a> | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #4</a> | ||
@@ -715,3 +769,3 @@ ### Tags with search, create and array of objects options | ||
<a href="https://jsfiddle.net/xf0jzoct/" target="_blank">JSFiddle - Example #5</a> | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #5</a> | ||
@@ -735,3 +789,3 @@ ### Autocomplete with async options | ||
<a href="https://jsfiddle.net/xf0jzoct/" target="_blank">JSFiddle - Example #6</a> | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #6</a> | ||
@@ -751,3 +805,3 @@ ### Tags with async options | ||
:searchable="true" | ||
:options="async function(query) { | ||
:options="async function(query, select$) { | ||
return await fetchLanguages(query) // check JS block in JSFiddle for implementation | ||
@@ -758,3 +812,3 @@ }" | ||
<a href="https://jsfiddle.net/xf0jzoct/" target="_blank">JSFiddle - Example #7</a> | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #7</a> | ||
@@ -787,3 +841,3 @@ ### Select with custom options slot | ||
<a href="https://jsfiddle.net/xf0jzoct/" target="_blank">JSFiddle - Example #8</a> | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #8</a> | ||
@@ -813,3 +867,3 @@ ### Multiselect with custom label slot | ||
<a href="https://jsfiddle.net/xf0jzoct/" target="_blank">JSFiddle - Example #9</a> | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #9</a> | ||
@@ -836,3 +890,8 @@ ### Tags with custom tags slot | ||
<template v-slot:tag="{ option, handleTagRemove, disabled }"> | ||
<div class="multiselect-tag is-user"> | ||
<div | ||
class="multiselect-tag is-user" | ||
:class="{ | ||
'is-disabled': disabled | ||
}" | ||
> | ||
<img :src="option.image"> | ||
@@ -843,3 +902,3 @@ {{ option.name }} | ||
class="multiselect-tag-remove" | ||
@mousedown.prevent="handleTagRemove(option, $event)" | ||
@click="handleTagRemove(option, $event)" | ||
> | ||
@@ -882,6 +941,159 @@ <span class="multiselect-tag-remove-icon"></span> | ||
<a href="https://jsfiddle.net/xf0jzoct/" target="_blank">JSFiddle - Example #10</a> | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #10</a> | ||
### Async options with default values | ||
When using `resolveOnLoad: false` we can add default values with `object: true` and providing options as objects, containing both `label` and `value` props. This is because option list is not resolved when the component is mounted so Multiselect has no idea of what option labels should be if only plain values were provided. | ||
``` vue | ||
<template> | ||
<Multiselect | ||
mode="tags" | ||
v-model="value" | ||
placeholder="Select options" | ||
:close-on-select="false" | ||
:searchable="true" | ||
:object="true" | ||
:resolve-on-load="false" | ||
:delay="0" | ||
:min-chars="1" | ||
:options="async (query) => { | ||
return await fetchLanguages(query) | ||
}" | ||
/> | ||
</template> | ||
<script> | ||
export default { | ||
data: () => ({ | ||
value: [ | ||
{ value: 'Java', label: 'Java' }, | ||
{ value: 'JavaScript', label: 'JavaScript' }, | ||
] | ||
}) | ||
} | ||
</script> | ||
``` | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #11</a> | ||
### Default values that are not among the options | ||
If we want to add default values without having to add them to options list we can use `object: true` and provide them as objects, containing both `label` and `value` props. This is because if a plain value is not among Multiselect options it has no idea of what option label should be. | ||
``` vue | ||
<template> | ||
<Multiselect | ||
mode="tags" | ||
v-model="value" | ||
placeholder="Select options" | ||
:close-on-select="false" | ||
:searchable="true" | ||
:object="true" | ||
:resolve-on-load="false" | ||
:delay="0" | ||
:min-chars="1" | ||
:options="async (query) => { | ||
return await fetchLanguages(query) | ||
}" | ||
/> | ||
</template> | ||
<script> | ||
export default { | ||
data: () => ({ | ||
value: [ | ||
{ value: 'Java', label: 'Java' }, | ||
{ value: 'JavaScript', label: 'JavaScript' }, | ||
] | ||
}) | ||
} | ||
</script> | ||
``` | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #12</a> | ||
### Manage created tag asynchronously | ||
Search is restricted by `regex` and tag creation is controlled by `onCreate(option, select$)`. | ||
``` vue | ||
<template> | ||
<Multiselect | ||
mode="tags" | ||
v-model="value" | ||
placeholder="Accepts numbers <= 67 (delay: 1000ms)" | ||
:options="[]" | ||
:create-option="true" | ||
:searchable="true" | ||
:regex="/\d/" | ||
:on-create="handleTagCreate" | ||
/> | ||
</template> | ||
<script> | ||
export default { | ||
methods: { | ||
handleTagCreate: async (option, select$) => { | ||
// Do not allow create tags above 67 | ||
if (parseInt(option.value) > 67) { | ||
alert(`${option.value} is not allowed. Option must by <= 67.`) | ||
// If returns `false` the tag will not be added | ||
return false | ||
} | ||
// Async request (eg. for validating) | ||
await new Promise((resolve, reject) => { | ||
setTimeout(() => { | ||
resolve() | ||
}, 1000) | ||
}) | ||
// Modifying option label | ||
option.label = option.label + ' - confirmed' | ||
return option | ||
} | ||
} | ||
} | ||
</script> | ||
``` | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #13</a> | ||
### Load async options from API on open with infinite scroll | ||
Options are not loaded initially, only when the users clicks the dropdown the first time. It also virtualizes the option list with `infinite: true` even large list of options can be loaded. | ||
``` vue | ||
<Multiselect | ||
v-model="value" | ||
mode="tags" | ||
placeholder="Choose your stack" | ||
:close-on-select="false" | ||
:filter-results="false" | ||
:min-chars="0" | ||
:resolve-on-load="false" | ||
:infinite="true" | ||
:limit="10" | ||
:clear-on-search="true" | ||
:delay="0" | ||
:searchable="true" | ||
:options="async (query) => { | ||
return await fetchLanguages(query) | ||
}" | ||
@open="(select$) => { | ||
if (select$.noOptions) { | ||
select$.resolveOptions() | ||
} | ||
}" | ||
/> | ||
``` | ||
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #14</a> | ||
## License | ||
[MIT](https://github.com/vueform/multiselect/blob/main/LICENSE.md) |
@@ -43,2 +43,4 @@ import { computed, toRefs } from 'composition-api' | ||
spinner: 'multiselect-spinner', | ||
inifinite: 'multiselect-inifite', | ||
inifiniteSpinner: 'multiselect-inifite-spinner', | ||
dropdown: 'multiselect-dropdown', | ||
@@ -105,2 +107,4 @@ dropdownTop: 'is-top', | ||
spinner: c.spinner, | ||
inifinite: c.inifinite, | ||
inifiniteSpinner: c.inifiniteSpinner, | ||
dropdown: [c.dropdown] | ||
@@ -107,0 +111,0 @@ .concat(openDirection.value === 'top' ? c.dropdownTop : []) |
@@ -1,2 +0,2 @@ | ||
import { toRefs } from 'composition-api' | ||
import { toRefs, getCurrentInstance } from 'composition-api' | ||
import isNullish from './../utils/isNullish' | ||
@@ -8,2 +8,4 @@ | ||
const $this = getCurrentInstance().proxy | ||
// ============ DEPENDENCIES ============ | ||
@@ -23,3 +25,3 @@ | ||
context.emit('change', externalVal) | ||
context.emit('change', externalVal, $this) | ||
context.emit('input', externalVal) | ||
@@ -26,0 +28,0 @@ context.emit('update:modelValue', externalVal) |
@@ -1,2 +0,2 @@ | ||
import { ref, toRefs } from 'composition-api' | ||
import { ref, toRefs, getCurrentInstance } from 'composition-api' | ||
@@ -7,2 +7,4 @@ export default function useDropdown (props, context, dep) | ||
const $this = getCurrentInstance().proxy | ||
// ================ DATA ================ | ||
@@ -20,3 +22,3 @@ | ||
isOpen.value = true | ||
context.emit('open') | ||
context.emit('open', $this) | ||
} | ||
@@ -30,3 +32,3 @@ | ||
isOpen.value = false | ||
context.emit('close') | ||
context.emit('close', $this) | ||
} | ||
@@ -33,0 +35,0 @@ |
@@ -1,2 +0,2 @@ | ||
import { toRefs, computed } from 'composition-api' | ||
import { toRefs, computed, getCurrentInstance } from 'composition-api' | ||
@@ -6,7 +6,10 @@ export default function useKeyboard (props, context, dep) | ||
const { | ||
mode, addTagOn, openDirection, searchable, | ||
showOptions, valueProp, groups: groupped, | ||
addOptionOn: addOptionOn_, createTag, createOption: createOption_, | ||
} = toRefs(props) | ||
mode, addTagOn, openDirection, searchable, | ||
showOptions, valueProp, groups: groupped, | ||
addOptionOn: addOptionOn_, createTag, createOption: createOption_, | ||
reverse, | ||
} = toRefs(props) | ||
const $this = getCurrentInstance().proxy | ||
// ============ DEPENDENCIES ============ | ||
@@ -21,2 +24,4 @@ | ||
const forwardPointer = dep.forwardPointer | ||
const isOpen = dep.isOpen | ||
const open = dep.open | ||
const blur = dep.blur | ||
@@ -59,2 +64,4 @@ const fo = dep.fo | ||
const handleKeydown = (e) => { | ||
context.emit('keydown', e, $this) | ||
switch (e.key) { | ||
@@ -134,3 +141,8 @@ case 'Backspace': | ||
openDirection.value === 'top' ? forwardPointer() : backwardPointer() | ||
/* istanbul ignore else */ | ||
if (!isOpen.value) { | ||
open() | ||
} | ||
backwardPointer() | ||
break | ||
@@ -145,3 +157,8 @@ | ||
openDirection.value === 'top' ? backwardPointer() : forwardPointer() | ||
/* istanbul ignore else */ | ||
if (!isOpen.value) { | ||
open() | ||
} | ||
forwardPointer() | ||
break | ||
@@ -151,6 +168,11 @@ } | ||
const handleKeyup = (e) => { | ||
context.emit('keyup', e, $this) | ||
} | ||
return { | ||
handleKeydown, | ||
handleKeyup, | ||
preparePointer, | ||
} | ||
} |
@@ -13,2 +13,3 @@ import { ref, toRefs, computed } from 'composition-api' | ||
const clearSearch = dep.clearSearch | ||
const isOpen = dep.isOpen | ||
@@ -18,2 +19,3 @@ // ================ DATA ================ | ||
const multiselect = ref(null) | ||
const tags = ref(null) | ||
@@ -74,4 +76,16 @@ const isActive = ref(false) | ||
/* istanbul ignore next */ | ||
const handleMousedown = (e) => { | ||
if (isOpen.value && (e.target.isEqualNode(multiselect.value) || e.target.isEqualNode(tags.value))) { | ||
setTimeout(() => { | ||
deactivate() | ||
}, 0) | ||
} else if (document.activeElement.isEqualNode(multiselect.value) && !isOpen.value) { | ||
activate() | ||
} | ||
} | ||
return { | ||
multiselect, | ||
tags, | ||
tabindex, | ||
@@ -85,3 +99,4 @@ isActive, | ||
handleCaretClick, | ||
handleMousedown, | ||
} | ||
} |
@@ -1,2 +0,2 @@ | ||
import { ref, toRefs, computed, watch, nextTick, getCurrentInstance } from 'composition-api' | ||
import { ref, toRefs, computed, watch, getCurrentInstance } from 'composition-api' | ||
import normalize from './../utils/normalize' | ||
@@ -13,4 +13,4 @@ import isObject from './../utils/isObject' | ||
minChars, filterResults, clearOnSearch, clearOnSelect, valueProp, | ||
canDeselect, max, strict, closeOnSelect, groups: groupped, groupLabel, | ||
groupOptions, groupHideEmpty, groupSelect, | ||
canDeselect, max, strict, closeOnSelect, groups: groupped, reverse, infinite, | ||
groupOptions, groupHideEmpty, groupSelect, onCreate, disabledProp, searchStart, | ||
} = toRefs(props) | ||
@@ -29,5 +29,5 @@ | ||
const clearPointer = dep.clearPointer | ||
const blur = dep.blur | ||
const focus = dep.focus | ||
const deactivate = dep.deactivate | ||
const close = dep.close | ||
@@ -49,2 +49,4 @@ // ================ DATA ================ | ||
const offset = ref(infinite.value && limit.value === -1 ? 10 : limit.value) | ||
// ============== COMPUTED ============== | ||
@@ -78,3 +80,3 @@ | ||
optionsToArray(group[groupOptions.value]).forEach((option) => { | ||
eo.push(Object.assign({}, option, group.disabled ? { disabled: true } : {})) | ||
eo.push(Object.assign({}, option, group[disabledProp.value] ? { [disabledProp.value]: true } : {})) | ||
}) | ||
@@ -106,4 +108,4 @@ }) | ||
group: true, | ||
[groupOptions.value]: filterOptions(arrayOptions, false).map(o => Object.assign({}, o, group.disabled ? { disabled: true } : {})), | ||
__VISIBLE__: filterOptions(arrayOptions).map(o => Object.assign({}, o, group.disabled ? { disabled: true } : {})), | ||
[groupOptions.value]: filterOptions(arrayOptions, false).map(o => Object.assign({}, o, group[disabledProp.value] ? { [disabledProp.value]: true } : {})), | ||
__VISIBLE__: filterOptions(arrayOptions).map(o => Object.assign({}, o, group[disabledProp.value] ? { [disabledProp.value]: true } : {})), | ||
} | ||
@@ -114,6 +116,10 @@ // Difference between __VISIBLE__ and {groupOptions}: visible does not contain selected options when hideSelected=true | ||
// filteredOptions | ||
const fo = computed(() => { | ||
// preFilteredOptions | ||
const pfo = computed(() => { | ||
let options = eo.value | ||
if (reverse.value) { | ||
options = options.reverse() | ||
} | ||
if (createdOption.value.length) { | ||
@@ -123,6 +129,11 @@ options = createdOption.value.concat(options) | ||
options = filterOptions(options) | ||
return filterOptions(options) | ||
}) | ||
if (limit.value > 0) { | ||
options = options.slice(0, limit.value) | ||
// filteredOptions | ||
const fo = computed(() => { | ||
let options = pfo.value | ||
if (offset.value > 0) { | ||
options = options.slice(0, offset.value) | ||
} | ||
@@ -169,2 +180,3 @@ | ||
[trackBy.value]: search.value, | ||
__CREATE__: true, | ||
}] | ||
@@ -214,3 +226,3 @@ }) | ||
context.emit('select', finalValue(option), option) | ||
context.emit('select', finalValue(option), option, $this) | ||
} | ||
@@ -236,3 +248,3 @@ | ||
context.emit('deselect', finalValue(option), option) | ||
context.emit('deselect', finalValue(option), option, $this) | ||
} | ||
@@ -259,3 +271,3 @@ | ||
const clear = () => { | ||
context.emit('clear') | ||
context.emit('clear', $this) | ||
update(nullValue.value) | ||
@@ -280,3 +292,3 @@ } | ||
const isDisabled = (option) => { | ||
return option.disabled === true | ||
return option[disabledProp.value] === true | ||
} | ||
@@ -297,5 +309,31 @@ | ||
if (onCreate && onCreate.value && !isSelected(option) && option.__CREATE__) { | ||
option = { ...option } | ||
delete option.__CREATE__ | ||
option = onCreate.value(option, $this) | ||
if (option instanceof Promise) { | ||
resolving.value = true | ||
option.then((result) => { | ||
resolving.value = false | ||
handleOptionSelect(result) | ||
}) | ||
return | ||
} | ||
} | ||
handleOptionSelect(option) | ||
} | ||
const handleOptionSelect = (option) => { | ||
if (option.__CREATE__) { | ||
option = { ...option } | ||
delete option.__CREATE__ | ||
} | ||
switch (mode.value) { | ||
case 'single': | ||
if (isSelected(option)) { | ||
if (option && isSelected(option)) { | ||
if (canDeselect.value) { | ||
@@ -307,10 +345,23 @@ deselect(option) | ||
handleOptionAppend(option) | ||
if (option) { | ||
handleOptionAppend(option) | ||
} | ||
blur() | ||
select(option) | ||
/* istanbul ignore else */ | ||
if (clearOnSelect.value) { | ||
clearSearch() | ||
} | ||
if (closeOnSelect.value) { | ||
clearPointer() | ||
close() | ||
} | ||
if (option) { | ||
select(option) | ||
} | ||
break | ||
case 'multiple': | ||
if (isSelected(option)) { | ||
if (option && isSelected(option)) { | ||
deselect(option) | ||
@@ -324,6 +375,7 @@ return | ||
handleOptionAppend(option) | ||
if (option) { | ||
handleOptionAppend(option) | ||
select(option) | ||
} | ||
select(option) | ||
if (clearOnSelect.value) { | ||
@@ -337,7 +389,4 @@ clearSearch() | ||
// If we need to close the dropdown on select we also need | ||
// to blur the input, otherwise further searches will not | ||
// display any options | ||
if (closeOnSelect.value) { | ||
blur() | ||
close() | ||
} | ||
@@ -347,3 +396,3 @@ break | ||
case 'tags': | ||
if (isSelected(option)) { | ||
if (option && isSelected(option)) { | ||
deselect(option) | ||
@@ -357,3 +406,5 @@ return | ||
handleOptionAppend(option) | ||
if (option) { | ||
handleOptionAppend(option) | ||
} | ||
@@ -364,3 +415,5 @@ if (clearOnSelect.value) { | ||
select(option) | ||
if (option) { | ||
select(option) | ||
} | ||
@@ -371,7 +424,4 @@ if (hideSelected.value) { | ||
// If we need to close the dropdown on select we also need | ||
// to blur the input, otherwise further searches will not | ||
// display any options | ||
if (closeOnSelect.value) { | ||
blur() | ||
close() | ||
} | ||
@@ -381,5 +431,3 @@ break | ||
if (closeOnSelect.value) { | ||
deactivate() | ||
} else { | ||
if (!closeOnSelect.value) { | ||
focus() | ||
@@ -402,3 +450,3 @@ } | ||
.filter(o => iv.value.map(v => v[valueProp.value]).indexOf(o[valueProp.value]) === -1) | ||
.filter(o => !o.disabled) | ||
.filter(o => !o[disabledProp.value]) | ||
.filter((o, k) => iv.value.length + 1 + k <= max.value || max.value === -1) | ||
@@ -417,4 +465,4 @@ ) | ||
if (getOption(option[valueProp.value]) === undefined && createOption.value) { | ||
context.emit('tag', option[valueProp.value]) | ||
context.emit('option', option[valueProp.value]) | ||
context.emit('tag', option[valueProp.value], $this) | ||
context.emit('option', option[valueProp.value], $this) | ||
@@ -439,3 +487,3 @@ if (appendNewOption.value) { | ||
const areAllEnabledSelected = (options) => { | ||
return options.find(o => !isSelected(o) && !o.disabled) === undefined | ||
return options.find(o => !isSelected(o) && !o[disabledProp.value]) === undefined | ||
} | ||
@@ -454,3 +502,5 @@ | ||
const getOptionByTrackBy = (val, norm = true) => { | ||
return eo.value.map(o => o[trackBy.value]).indexOf(val) | ||
return eo.value.map(o => parseInt(o[trackBy.value]) == o[trackBy.value] ? parseInt(o[trackBy.value]) : o[trackBy.value]).indexOf( | ||
parseInt(val) == val ? parseInt(val) : val | ||
) | ||
} | ||
@@ -488,3 +538,5 @@ | ||
fo = fo.filter((option) => { | ||
return normalize(option[trackBy.value], strict.value).indexOf(normalize(search.value, strict.value)) !== -1 | ||
return searchStart.value | ||
? normalize(option[trackBy.value], strict.value).startsWith(normalize(search.value, strict.value)) | ||
: normalize(option[trackBy.value], strict.value).indexOf(normalize(search.value, strict.value)) !== -1 | ||
}) | ||
@@ -611,3 +663,3 @@ } | ||
searchWatcher.value = watch(search, (query) => { | ||
if (query.length < minChars.value || !query) { | ||
if (query.length < minChars.value || (!query && minChars.value !== 0)) { | ||
return | ||
@@ -629,3 +681,3 @@ } | ||
ro.value = response | ||
pointer.value = fo.value.filter(o => o.disabled !== true)[0] || null | ||
pointer.value = fo.value.filter(o => o[disabledProp.value] !== true)[0] || null | ||
resolving.value = false | ||
@@ -702,7 +754,3 @@ } | ||
if (resolveOnLoad.value) { | ||
resolveOptions(() => { | ||
if (Object.keys(iv.value).length) { | ||
initInternalValue() | ||
} | ||
}) | ||
resolveOptions() | ||
} | ||
@@ -723,2 +771,3 @@ } else { | ||
return { | ||
pfo, | ||
fo, | ||
@@ -736,2 +785,3 @@ filteredOptions: fo, | ||
busy, | ||
offset, | ||
select, | ||
@@ -738,0 +788,0 @@ deselect, |
@@ -5,3 +5,3 @@ import { ref, toRefs } from 'composition-api' | ||
{ | ||
const { groupSelect, mode, groups } = toRefs(props) | ||
const { groupSelect, mode, groups, disabledProp } = toRefs(props) | ||
@@ -15,3 +15,3 @@ // ================ DATA ================ | ||
const setPointer = (option) => { | ||
if (option === undefined || (option !== null && option.disabled)) { | ||
if (option === undefined || (option !== null && option[disabledProp.value])) { | ||
return | ||
@@ -18,0 +18,0 @@ } |
@@ -7,3 +7,3 @@ import { toRefs, watch, nextTick, computed } from 'composition-api' | ||
valueProp, showOptions, searchable, groupLabel, | ||
groups: groupped, mode, groupSelect, | ||
groups: groupped, mode, groupSelect, disabledProp, | ||
} = toRefs(props) | ||
@@ -22,2 +22,3 @@ | ||
const multiselect = dep.multiselect | ||
const isOpen = dep.isOpen | ||
@@ -28,7 +29,7 @@ // ============== COMPUTED ============== | ||
const options = computed(() => { | ||
return fo.value.filter(o => !o.disabled) | ||
return fo.value.filter(o => !o[disabledProp.value]) | ||
}) | ||
const groups = computed(() => { | ||
return fg.value.filter(o => !o.disabled) | ||
return fg.value.filter(o => !o[disabledProp.value]) | ||
}) | ||
@@ -77,7 +78,7 @@ | ||
const currentGroupFirstEnabledOption = computed(() => { | ||
return pointer.value.__VISIBLE__.filter(o => !o.disabled)[0] | ||
return pointer.value.__VISIBLE__.filter(o => !o[disabledProp.value])[0] | ||
}) | ||
const currentGroupPrevEnabledOption = computed(() => { | ||
const options = currentGroup.value.__VISIBLE__.filter(o => !o.disabled) | ||
const options = currentGroup.value.__VISIBLE__.filter(o => !o[disabledProp.value]) | ||
return options[options.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) - 1] | ||
@@ -87,3 +88,3 @@ }) | ||
const currentGroupNextEnabledOption = computed(() => { | ||
const options = getParentGroup(pointer.value).__VISIBLE__.filter(o => !o.disabled) | ||
const options = getParentGroup(pointer.value).__VISIBLE__.filter(o => !o[disabledProp.value]) | ||
return options[options.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) + 1] | ||
@@ -93,7 +94,7 @@ }) | ||
const prevGroupLastEnabledOption = computed(() => { | ||
return [...prevGroup.value.__VISIBLE__.filter(o => !o.disabled)].slice(-1)[0] | ||
return [...prevGroup.value.__VISIBLE__.filter(o => !o[disabledProp.value])].slice(-1)[0] | ||
}) | ||
const lastGroupLastEnabledOption = computed(() => { | ||
return [...lastGroup.value.__VISIBLE__.filter(o => !o.disabled)].slice(-1)[0] | ||
return [...lastGroup.value.__VISIBLE__.filter(o => !o[disabledProp.value])].slice(-1)[0] | ||
}) | ||
@@ -115,3 +116,3 @@ | ||
const selectPointer = () => { | ||
if (!pointer.value || pointer.value.disabled === true) { | ||
if (!pointer.value || pointer.value[disabledProp.value] === true) { | ||
return | ||
@@ -235,2 +236,23 @@ } | ||
watch(isOpen, (val) => { | ||
if (val) { | ||
let firstSelected = multiselect.value.querySelectorAll(`[data-selected]`)[0] | ||
if (!firstSelected) { | ||
return | ||
} | ||
let wrapper = firstSelected.parentElement.parentElement | ||
nextTick(() => { | ||
/* istanbul ignore next */ | ||
if (wrapper.scrollTop > 0) { | ||
return | ||
} | ||
wrapper.scrollTop = firstSelected.offsetTop | ||
}) | ||
} | ||
}) | ||
return { | ||
@@ -237,0 +259,0 @@ pointer, |
@@ -1,5 +0,14 @@ | ||
import { ref, toRefs, computed, watch } from 'composition-api' | ||
import { ref, getCurrentInstance, watch, toRefs } from 'composition-api' | ||
export default function useSearch (props, context, dep) | ||
{ | ||
{7 | ||
const { regex } = toRefs(props) | ||
const $this = getCurrentInstance().proxy | ||
// ============ DEPENDENCIES ============ | ||
const isOpen = dep.isOpen | ||
const open = dep.open | ||
// ================ DATA ================ | ||
@@ -11,3 +20,2 @@ | ||
// =============== METHODS ============== | ||
@@ -23,4 +31,33 @@ | ||
const handleKeypress = (e) => { | ||
if (regex && regex.value) { | ||
let regexp = regex.value | ||
if (typeof regexp === 'string') { | ||
regexp = new RegExp(regexp) | ||
} | ||
if (!e.key.match(regexp)) { | ||
e.preventDefault() | ||
} | ||
} | ||
} | ||
const handlePaste = (e) => { | ||
context.emit('paste', e) | ||
if (regex && regex.value) { | ||
let clipboardData = e.clipboardData || /* istanbul ignore next */ window.clipboardData | ||
let pastedData = clipboardData.getData('Text') | ||
let regexp = regex.value | ||
if (typeof regexp === 'string') { | ||
regexp = new RegExp(regexp) | ||
} | ||
if (!pastedData.split('').every(c => !!c.match(regexp))) { | ||
e.preventDefault() | ||
} | ||
} | ||
context.emit('paste', e, $this) | ||
} | ||
@@ -31,3 +68,7 @@ | ||
watch(search, (val) => { | ||
context.emit('search-change', val) | ||
if (!isOpen.value && val) { | ||
open() | ||
} | ||
context.emit('search-change', val, $this) | ||
}) | ||
@@ -40,4 +81,5 @@ | ||
handleSearchInput, | ||
handleKeypress, | ||
handlePaste, | ||
} | ||
} |
@@ -47,9 +47,15 @@ import Vue,{ VNode } from 'vue'; | ||
autocomplete?: string; | ||
groups: boolean; | ||
groupLabel: string; | ||
groupOptions: string; | ||
groupHideEmpty: boolean; | ||
groupSelect: boolean; | ||
inputType: string; | ||
groups?: boolean; | ||
groupLabel?: string; | ||
groupOptions?: string; | ||
groupHideEmpty?: boolean; | ||
groupSelect?: boolean; | ||
inputType?: string; | ||
attrs?: object; | ||
onCreate?: Function; | ||
searchStart?: boolean; | ||
reverse?: boolean; | ||
regex?: string|object; | ||
rtl?: boolean; | ||
infinite?: boolean; | ||
@@ -64,2 +70,4 @@ $emit(eventName: 'change', e: {originalEvent: Event, value: any}): this; | ||
$emit(eventName: 'paste', e: {originalEvent: Event}): this; | ||
$emit(eventName: 'keydown', e: {originalEvent: Event}): this; | ||
$emit(eventName: 'keyup', e: {originalEvent: Event}): this; | ||
$emit(eventName: 'open'): this; | ||
@@ -79,2 +87,3 @@ $emit(eventName: 'close'): this; | ||
tag: VNode[]; | ||
infinite: VNode[]; | ||
}; | ||
@@ -81,0 +90,0 @@ } |
export default function isNullish (val) { | ||
return [null, undefined, false].indexOf(val) !== -1 | ||
return [null, undefined].indexOf(val) !== -1 | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
372339
36
6501
1068
1