@gits-id/multi-select/dist/multi-select.umd.js

Vue Multi Select Component

(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@gits-id/badge"),require("@gits-id/tooltip"),require("@vueuse/core"),require("vee-validate"),require("@gits-id/icon"),require("@gits-id/forms")):typeof define=="function"&&define.amd?define(["exports","vue","@gits-id/badge","@gits-id/tooltip","@vueuse/core","vee-validate","@gits-id/icon","@gits-id/forms"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.VMultiSelect={},r.Vue,r.VBadge,r.VTooltip,r.core,r.veeValidate,r.Icon,r.forms))})(this,function(r,e,W,G,z,J,Q,X){"use strict";const V=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},B=V(W),Y=V(G),g=V(Q),Be="",Ne="",Z=["for"],_={class:"v-multi-select-panel"},v={class:"v-multi-select-badges"},ee=["id","placeholder","name","readonly","disabled","onKeydown"],te={class:"v-multi-select-action"},le=e.createElementVNode("span",null,"Clear",-1),ae={key:0,class:"v-multi-select-item-check"},ne=e.createElementVNode("div",{class:"border-b h-1"},null,-1),oe=["onClick","onMouseover"],re={class:"v-multi-select-item-text"},se={key:1,class:"v-multi-select-hint"},ie={inheritAttrs:!1},D=e.defineComponent({...ie,__name:"VMultiSelect",props:{modelValue:{type:Array,default:()=>[]},items:{type:Array,default:()=>[]},itemText:{type:String,default:"text"},itemValue:{type:String,default:"value"},searchBy:{type:[String,Function],default:"text"},maxBadge:{type:Number,default:0},placeholder:{type:String,default:"Search..."},delay:{type:Number,default:500},id:{type:String,default:""},name:{type:String,default:""},inputProps:{type:Object,default:()=>({})},selectAll:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},error:{type:Boolean,default:!1},errorMessages:{type:Array,default:()=>[]},wrapperClass:{type:String,default:""},inputClass:{type:String,default:""},badgeColor:{type:String,default:"primary"},badgeClass:{type:String,default:""},badgeProps:{type:Object,default:()=>({})},dropdownClass:{type:String,default:""},itemClass:{type:String,default:""},checkWrapperClass:{type:String,default:""},checkIconClass:{type:String,default:""},noDataClass:{type:String,default:""},loadingClass:{type:String,default:""},label:{type:String,default:""},labelClass:{type:String,default:"mb-2 block"},rules:{type:String,default:""},errorClass:{type:String,default:"text-error-600 mt-1 text-sm"},transition:{type:String,default:"fade"},iconSize:{type:String,default:"sm"},readonly:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},validationMode:{type:String,default:"aggressive"},fieldOptions:{type:Object,default:()=>({})},hideError:{type:Boolean,default:!1},hint:{type:String,default:""}},emits:["click:outside","update:modelValue","search","selected","clear"],setup(l,{emit:d}){const N=l,{maxBadge:f,items:h,placeholder:ce,id:T,delay:de,name:b,inputProps:fe,itemText:u,itemValue:w,searchBy:k,selectAll:ue,loading:me,disabled:$,readonly:A}=e.toRefs(N),I=e.ref(null),i=e.ref(!1),m=e.ref(""),o=e.ref(-1),E=e.ref([]),x=e.ref(null),{errorMessage:C,uncontrolledValue:s}=X.useFormValue(N,d,N.fieldOptions),pe=(t,a)=>String(t?.[a])?.toLowerCase()?.includes(m.value.toLowerCase()),ye=t=>m.value?[typeof k.value=="string"?k.value:"",u.value,w.value].filter(Boolean).some(a=>typeof k.value=="function"?k.value(t,m.value):pe(t,a)):!0,M=e.computed(()=>h.value.filter(ye)),ge=e.computed(()=>f.value>0?s.value.slice(0,f.value):s.value),he=(t,a)=>{t&&(E.value[a]=t)};e.onBeforeUpdate(()=>{E.value=[]});const P=t=>{const a=S(t);a>-1?s.value.splice(a,1):s.value.push(t),d("selected",s)},S=t=>s.value?.findIndex(a=>a[w.value]===t?.[w.value]),ke=t=>S(t)>-1,F=(t,a)=>t.selected||ke(t),K=()=>{s.value=[],o.value=-1,d("clear")},O=t=>{const a=S(t);a>-1&&s.value.splice(a,1)},q=z.useDebounceFn(t=>{i.value=!0,m.value=t.target.value,o.value=0,d("search",m)},de.value),p=e.computed(()=>s.value.length===h.value.length),j=()=>{p.value?K():h.value.forEach(t=>{S(t)<0&&s.value.push(t)})},L=()=>{!A.value&&!$.value&&(i.value=!0)};z.onClickOutside(I,()=>{d("click:outside"),i.value=!1});const Ce=()=>{const t=M.value[o.value];t&&P(t)},R=()=>{i.value||(i.value=!0),o.value===null?o.value=0:o.value<h.value.length-1&&o.value++,U()},H=()=>{i.value||(i.value=!0),o.value===null?o.value=0:o.value===0?o.value=-1:o.value--,U()},Se=t=>{t.shiftKey?H():R()},Ve=()=>{i.value=!1},U=()=>{e.nextTick(()=>{const t=o.value,n=E.value[t]?.offsetTop-(x.value.offsetHeight-100);x.value?.scrollTo({top:n,behavior:"smooth"})})};return(t,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[l.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(T)||e.unref(b),class:e.normalizeClass(["v-multi-select-label",l.labelClass])},e.toDisplayString(l.label),11,Z)):e.createCommentVNode("",!0),e.createElementVNode("div",e.mergeProps({ref_key:"target",ref:I,class:["v-multi-select",{"v-multi-select--error":l.error||l.errorMessages.length>0||!!e.unref(C)}]},t.$attrs),[e.createElementVNode("div",null,[e.createElementVNode("div",_,[e.createElementVNode("div",{class:e.normalizeClass(["v-multi-select-input",[{"v-multi-select-normal":l.error||!!e.unref(C)},l.wrapperClass]]),onClick:L},[e.createElementVNode("div",v,[e.unref(s).length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(e.unref(ge),(n,c)=>e.renderSlot(t.$slots,"selection",{key:n.value,index:c,item:n,value:n[e.unref(u)],onRemove:()=>O(n)},()=>[e.createVNode(e.unref(B.default),e.mergeProps({color:l.badgeColor,dismissable:"",class:["truncate",l.badgeClass],onDismiss:y=>O(n)},l.badgeProps),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n[e.unref(u)]),1)]),_:2},1040,["color","class","onDismiss"])])),128)):e.createCommentVNode("",!0),e.unref(f)>0&&e.unref(s).length>e.unref(f)?e.renderSlot(t.$slots,"max-selection",{key:1},()=>[e.createVNode(e.unref(B.default),{small:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s).length-e.unref(f))+" more",1)]),_:1})]):e.createCommentVNode("",!0),e.createElementVNode("input",e.mergeProps({id:e.unref(T),type:"text",class:["v-multi-select-input-control",l.inputClass],autofill:"false",autocomplete:"off",placeholder:e.unref(ce),name:e.unref(b)},e.unref(fe),{readonly:e.unref(A),disabled:e.unref($),onInput:a[0]||(a[0]=(...n)=>e.unref(q)&&e.unref(q)(...n)),onFocus:L,onKeydown:[e.withKeys(e.withModifiers(Ce,["prevent"]),["enter"]),e.withKeys(e.withModifiers(R,["prevent"]),["down"]),e.withKeys(e.withModifiers(H,["prevent"]),["up"]),e.withKeys(e.withModifiers(Se,["prevent"]),["tab"]),e.withKeys(e.withModifiers(Ve,["prevent"]),["esc"])]}),null,16,ee)]),e.createElementVNode("div",te,[e.unref(s).length>1?(e.openBlock(),e.createBlock(e.unref(Y.default),{key:0},{activator:e.withCtx(({on:n})=>[e.createVNode(e.unref(B.default),e.mergeProps({circle:"",class:"!p-1 !bg-transparent",onClick:K},e.toHandlers(n)),{default:e.withCtx(()=>[e.createVNode(e.unref(g.default),{name:"ri:close-line",size:l.iconSize,class:"v-multi-select-icon","aria-hidden":"true"},null,8,["size"])]),_:2},1040)]),default:e.withCtx(()=>[le]),_:1})):e.createCommentVNode("",!0),e.createVNode(e.unref(g.default),{name:"heroicons:chevron-down",size:l.iconSize,class:"v-multi-select-icon","aria-hidden":"true"},null,8,["size"])])],2),e.createVNode(e.Transition,{name:l.transition},{default:e.withCtx(()=>[i.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"dropdown",ref:x,class:e.normalizeClass(["v-multi-select-dropdown",l.dropdownClass])},[e.unref(me)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["v-multi-select-dropdown-loading",l.loadingClass])}," Loading... ",2)):e.unref(M).length?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.unref(ue)?e.renderSlot(t.$slots,"select-all",{key:0,onClick:j,isSelected:e.unref(p)},()=>[e.createElementVNode("div",{class:"v-multi-select-item",onClick:j},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(p)?"font-medium":"font-normal","block truncate"])},e.toDisplayString(e.unref(p)?"Deselect All":"Select All"),3),e.unref(p)?(e.openBlock(),e.createElementBlock("div",ae,[e.createVNode(e.unref(g.default),{name:"heroicons:check",class:"w-5 h-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)]),ne]):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"prepend.item"),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(M),(n,c)=>(e.openBlock(),e.createElementBlock("div",{key:n.value,ref_for:!0,ref:y=>he(y,c),onClick:y=>P(n),onMouseover:y=>o.value=c,onMouseout:a[1]||(a[1]=y=>o.value=-1),class:e.normalizeClass(["v-multi-select-item group",[l.itemClass,{"v-multi-select-item--focused":o.value===c,"v-multi-select-item--active":F(n)}]])},[e.createElementVNode("div",{class:e.normalizeClass(["v-multi-select-item-check",l.checkWrapperClass])},[e.createVNode(e.unref(g.default),{name:"heroicons:check",size:l.iconSize,class:e.normalizeClass(["v-multi-select-check-icon",l.checkIconClass]),"aria-hidden":"true"},null,8,["size","class"])],2),e.createElementVNode("div",re,[e.renderSlot(t.$slots,"item.label",{index:c,item:n,value:n[e.unref(u)],isSelected:F(n)},()=>[e.createTextVNode(e.toDisplayString(n[e.unref(u)]),1)])])],42,oe))),128)),e.renderSlot(t.$slots,"append.item")],64)):(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["pl-6 pr-4 py-2 text-gray-600",l.noDataClass])}," No Data ",2))],2)):e.createCommentVNode("",!0)]),_:3},8,["name"])])])],16),l.hint?(e.openBlock(),e.createElementBlock("p",se,[e.renderSlot(t.$slots,"hint",{},()=>[e.createTextVNode(e.toDisplayString(l.hint),1)])])):e.createCommentVNode("",!0),l.errorMessages.length&&!l.hideError?(e.openBlock(),e.createBlock(e.unref(J.ErrorMessage),{key:2,class:"text-error-500 text-sm",name:e.unref(b)},null,8,["name"])):e.unref(C)?(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(l.errorClass)},e.toDisplayString(e.unref(C)),3)):e.createCommentVNode("",!0)],64))}}),be="";r.VMultiSelect=D,r.default=D,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});