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

Vue Multi Select Component

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