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

Vue Multi Select Component

var VMultiSelect=function(g,e,q,G,z,J,Q,X){"use strict";const V=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},B=V(q),Y=V(G),p=V(Q),Be="",be="",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"},ce={inheritAttrs:!1},D=e.defineComponent({...ce,__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:i}){const b=l,{maxBadge:d,items:h,placeholder:ie,id:T,delay:de,name:N,inputProps:fe,itemText:f,itemValue:w,searchBy:k,selectAll:me,loading:ue,disabled:$,readonly:A}=e.toRefs(b),I=e.ref(null),s=e.ref(!1),m=e.ref(""),o=e.ref(-1),E=e.ref([]),x=e.ref(null),{errorMessage:C,uncontrolledValue:r}=X.useFormValue(b,i,b.fieldOptions),ye=(t,a)=>String(t?.[a])?.toLowerCase()?.includes(m.value.toLowerCase()),ge=t=>m.value?[typeof k.value=="string"?k.value:"",f.value,w.value].filter(Boolean).some(a=>typeof k.value=="function"?k.value(t,m.value):ye(t,a)):!0,M=e.computed(()=>h.value.filter(ge)),pe=e.computed(()=>d.value>0?r.value.slice(0,d.value):r.value),he=(t,a)=>{t&&(E.value[a]=t)};e.onBeforeUpdate(()=>{E.value=[]});const P=t=>{const a=S(t);a>-1?r.value.splice(a,1):r.value.push(t),i("selected",r)},S=t=>r.value?.findIndex(a=>a[w.value]===t?.[w.value]),ke=t=>S(t)>-1,F=(t,a)=>t.selected||ke(t),K=()=>{r.value=[],o.value=-1,i("clear")},O=t=>{const a=S(t);a>-1&&r.value.splice(a,1)},L=z.useDebounceFn(t=>{s.value=!0,m.value=t.target.value,o.value=0,i("search",m)},de.value),u=e.computed(()=>r.value.length===h.value.length),j=()=>{u.value?K():h.value.forEach(t=>{S(t)<0&&r.value.push(t)})},R=()=>{!A.value&&!$.value&&(s.value=!0)};z.onClickOutside(I,()=>{i("click:outside"),s.value=!1});const Ce=()=>{const t=M.value[o.value];t&&P(t)},H=()=>{s.value||(s.value=!0),o.value===null?o.value=0:o.value<h.value.length-1&&o.value++,W()},U=()=>{s.value||(s.value=!0),o.value===null?o.value=0:o.value===0?o.value=-1:o.value--,W()},Se=t=>{t.shiftKey?U():H()},Ve=()=>{s.value=!1},W=()=>{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(N),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:R},[e.createElementVNode("div",v,[e.unref(r).length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(e.unref(pe),(n,c)=>e.renderSlot(t.$slots,"selection",{key:n.value,index:c,item:n,value:n[e.unref(f)],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(f)]),1)]),_:2},1040,["color","class","onDismiss"])])),128)):e.createCommentVNode("",!0),e.unref(d)>0&&e.unref(r).length>e.unref(d)?e.renderSlot(t.$slots,"max-selection",{key:1},()=>[e.createVNode(e.unref(B.default),{small:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r).length-e.unref(d))+" 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(ie),name:e.unref(N)},e.unref(fe),{readonly:e.unref(A),disabled:e.unref($),onInput:a[0]||(a[0]=(...n)=>e.unref(L)&&e.unref(L)(...n)),onFocus:R,onKeydown:[e.withKeys(e.withModifiers(Ce,["prevent"]),["enter"]),e.withKeys(e.withModifiers(H,["prevent"]),["down"]),e.withKeys(e.withModifiers(U,["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(r).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(p.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(p.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(()=>[s.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"dropdown",ref:x,class:e.normalizeClass(["v-multi-select-dropdown",l.dropdownClass])},[e.unref(ue)?(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(me)?e.renderSlot(t.$slots,"select-all",{key:0,onClick:j,isSelected:e.unref(u)},()=>[e.createElementVNode("div",{class:"v-multi-select-item",onClick:j},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(u)?"font-medium":"font-normal","block truncate"])},e.toDisplayString(e.unref(u)?"Deselect All":"Select All"),3),e.unref(u)?(e.openBlock(),e.createElementBlock("div",ae,[e.createVNode(e.unref(p.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(p.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(f)],isSelected:F(n)},()=>[e.createTextVNode(e.toDisplayString(n[e.unref(f)]),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(N)},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))}}),Ne="";return g.VMultiSelect=D,g.default=D,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),g}({},Vue,VBadge,VTooltip,core,veeValidate,Icon,forms);