vue-custom-select-box/dist/vue-custom-select-box.umd.cjs

Quick start [install component NPM packages](https://www.npmjs.com/package/vue-custom-select-box).

(function(e,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(e=typeof globalThis<"u"?globalThis:e||self,e.VueCustomSelectBox=r(e.Vue))})(this,function(e){"use strict";const r=(t,o)=>{const s=t.__vccOpts||t;for(const[l,i]of o)s[l]=i;return s},h={name:"IconComponent"};function m(t,o,s,l,i,d){const a=e.resolveComponent("v-icon");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(a,e.normalizeProps(e.guardReactiveProps(t.$attrs)),null,16)])}const f=r(h,[["render",m]]),b={props:{placeholder:{type:String,default:"-- Select --"},searchPlaceholder:{type:String,default:"Search e.g abc.."},selectAllLabel:{type:String,default:"Select all"},limit:{type:Number,default:void 0},selectAll:{type:Boolean,default:!0},multiple:{type:Boolean,default:!1},options:{type:Array,default:Array},modelValue:{type:[Object,Array,Number,String],default:void 0},optionValue:{type:String,default:void 0},optionText:{type:String,default:void 0},trackBy:{type:String,default:void 0},animated:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},closeOnSelect:{type:Boolean,default:!1},clearInputOnSelect:{type:Boolean,default:!1}},data(){return{items:this.modelValue,search:null}},watch:{items(t){this.$emit("update:modelValue",t)}},computed:{displayPlaceholder(){var s;const t=this.modelValue,o=typeof this.items;return t&&!this.multiple?(o==="object"?this.items[this.optionText]||this.items:(s=this.options.find(l=>l[this.optionValue]===this.items))==null?void 0:s[this.optionText])||this.placeholder:this.placeholder},filterTags(){const t=this.options.filter(o=>{const s=this.items,l=s==null?void 0:s.map(i=>i[this.optionValue]||i);if(l!=null&&l.length)return l.includes(o[this.optionValue])?o:!1});if(t.length)return typeof this.limit=="number"?t==null?void 0:t.slice(0,this.limit):t},allSelected(){return this.options.every(t=>{var o;return(o=this.items)==null?void 0:o.map(s=>s[this.optionValue]||s).includes(t[this.optionValue]||t)})},isSelected(){return t=>{var o;return Array.isArray(this.items)?(o=this.items)==null?void 0:o.some(s=>(s[this.optionValue]||s)===(t[this.optionValue]||t)):(t[this.optionValue]||t)===this.items}},filterOptions(){const t=this.trackBy||this.optionText,o=this.options.filter(s=>{var l,i;return(i=s[t])==null?void 0:i.toLowerCase().match((l=this.search)==null?void 0:l.toLowerCase())});return t?o:this.options},getLimitedLength(){if(typeof this.limit=="number")return this.items.length-this.limit}},methods:{pushOption(t,o){var l;if(!t.target.checked){if(this.multiple){if(!this.items)return;this.items=(l=this.items)==null?void 0:l.filter(i=>(i[this.optionValue]||i)!==(o[this.optionValue]||o))}else this.items=null;return}this.multiple?(this.items||(this.items=[]),this.items.push(o[this.optionValue]||o)):this.items=o[this.optionValue]||o,this.closeOnSelect&&this.openDropdown(),this.clearInputOnSelect&&this.search&&(this.search=null)},pushAllOptions(t){const o=t.target.checked,s=this.optionValue?this.options.map(d=>d[this.optionValue]):[];let l,i=0;if(o){if(this.items||(this.items=[]),s.length){if(this.items=[],!this.animated){this.items=s;return}l=setInterval(()=>{if(i++,i>this.options.length){clearInterval(l);return}this.items.push(s[i-1][this.optionValue]||s[i-1])},0)}}else{if(!this.animated){this.items=[];return}i=s.length,l=setInterval(()=>{if(i--,i<0){clearInterval(l);return}this.items.splice(i,1)},0)}this.closeOnSelect&&this.openDropdown(),this.clearInputOnSelect&&this.search&&(this.search=null)},openDropdown(){this.$refs.vsbContainer.classList.toggle("vsb-show")},clearAllSelected(){const t=this.items;Array.isArray(t)?this.items=[]:this.items=null}}},F="",u={name:"VueSelectBox",components:{Icon:f},mixins:[b]},k={style:{"max-width":"480px","margin-inline":"auto",padding:"20px"}},y={class:"vsb-container",ref:"vsbContainer"},g={class:"vsb-head"},V=["disabled"],B={class:"vsb-label-box"},S={key:0,class:"vsb-tags"},E={key:0,class:"vsb-tag"},w={key:1,class:"vsb-label"},N={class:"vsb-dropdown",ref:"vsbDropdown"},$={class:"vsb-dropdown-search"},C={class:"vsb-dropdown-search-box"},O={class:"vsb-dropdown-icon"},T=["placeholder","disabled","readOnly"],A={class:"vsb-dropdown-box"},_={key:0,class:"vsb-dropdown-item"},D={class:"vsb-dropdown-option"},L=["checked","disabled"],I={for:"vsb-checkbox-all",class:"vsb-dropdown-item-label"},P={key:1,class:"vsb-dropdown-option"},M=["id","onChange","checked","disabled"],z=["id","onChange","checked"],j=["for"],R={key:2,class:"vsb-dropdown-item vsb-dropdown-noresult"};function q(t,o,s,l,i,d){const a=e.resolveComponent("Icon");return e.openBlock(),e.createElementBlock("div",k,[e.createElementVNode("figure",y,[e.createElementVNode("figcaption",g,[t.$slots.selectButton?e.renderSlot(t.$slots,"selectButton",e.normalizeProps(e.mergeProps({key:0},{open:t.openDropdown,tags:t.filterTags,multiple:t.multiple,originalLimit:t.limit,limited:t.getLimitedLength,label:t.displayPlaceholder})),void 0,!0):(e.openBlock(),e.createElementBlock("button",{key:1,class:"vsb-btn",onClick:o[0]||(o[0]=e.withModifiers((...n)=>t.openDropdown&&t.openDropdown(...n),["prevent"])),disabled:t.disabled||!t.filterOptions.length},[e.createElementVNode("div",B,[t.multiple&&(t.filterTags||[]).length?(e.openBlock(),e.createElementBlock("ul",S,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filterTags,(n,c)=>(e.openBlock(),e.createElementBlock("li",{class:"vsb-tag",key:c},[e.createElementVNode("p",null,e.toDisplayString(n[t.optionText]),1),e.createElementVNode("button",null,[e.createVNode(a,{name:"io-close",class:"vsb-icon",fill:"#ffffff",scale:"0.7"})])]))),128)),t.limit&&typeof t.limit=="number"?(e.openBlock(),e.createElementBlock("li",E,[e.createElementVNode("p",null,e.toDisplayString(t.getLimitedLength),1)])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("p",w,e.toDisplayString(t.displayPlaceholder),1))]),e.createElementVNode("div",null,[e.createVNode(a,{name:"fa-sort",scale:"0.8",class:"vsb-icon"})])],8,V))]),e.createElementVNode("blockquote",N,[e.createElementVNode("div",$,[e.createElementVNode("div",C,[e.createElementVNode("div",O,[e.createVNode(a,{name:"io-search-outline",class:"vsb-icon",fill:"#6c757d"})]),e.withDirectives(e.createElementVNode("input",{type:"text",name:"vsb-search",id:"vsb-search",class:"vsb-search",autocomplete:"off",spellcheck:"false",placeholder:t.searchPlaceholder,"onUpdate:modelValue":o[1]||(o[1]=n=>t.search=n),disabled:!t.optionText||!t.trackBy,readOnly:!t.optionText||!t.trackBy},null,8,T),[[e.vModelText,t.search,void 0,{trim:!0}]]),t.items?(e.openBlock(),e.createElementBlock("button",{key:0,class:"vsb-dropdown-icon",onClick:o[2]||(o[2]=e.withModifiers((...n)=>t.clearAllSelected&&t.clearAllSelected(...n),["prevent"]))},[e.createVNode(a,{name:"io-close",class:"vsb-icon",fill:"#6c757d"})])):e.createCommentVNode("",!0)])]),e.createElementVNode("ul",A,[t.selectAll&&t.multiple&&(t.filterOptions||[]).length?(e.openBlock(),e.createElementBlock("li",_,[e.createElementVNode("div",D,[e.createElementVNode("input",{type:"checkbox",name:"vsb-checkbox",id:"vsb-checkbox-all",class:"vsb-checkbox",onChange:o[3]||(o[3]=e.withModifiers((...n)=>t.pushAllOptions&&t.pushAllOptions(...n),["prevent"])),checked:t.allSelected,disabled:!t.optionText||!t.optionValue},null,40,L),e.createElementVNode("label",I,e.toDisplayString(t.selectAllLabel),1)])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filterOptions,(n,c)=>(e.openBlock(),e.createElementBlock("li",{key:c,class:"vsb-dropdown-item"},[t.$slots.option?e.renderSlot(t.$slots,"option",e.normalizeProps(e.mergeProps({key:0},n)),void 0,!0):(e.openBlock(),e.createElementBlock("div",P,[t.multiple?(e.openBlock(),e.createElementBlock("input",{key:0,type:"checkbox",name:"vsb-checkbox",id:`vsb-checkbox-${c}`,class:"vsb-checkbox",onChange:e.withModifiers(p=>t.pushOption(p,n),["prevent"]),checked:t.isSelected(n),disabled:!t.optionText||!t.optionValue},null,40,M)):(e.openBlock(),e.createElementBlock("input",{key:1,type:"radio",name:"vsb-checkbox",id:`vsb-checkbox-${c}`,class:"vsb-checkbox",onChange:e.withModifiers(p=>t.pushOption(p,n),["prevent"]),checked:t.isSelected(n)},null,40,z)),e.createElementVNode("label",{for:`vsb-checkbox-${c}`,class:"vsb-dropdown-item-label"},e.toDisplayString(n[t.optionText]||n),9,j)]))]))),128)),t.$slots.noResult?e.renderSlot(t.$slots,"noResult",e.normalizeProps(e.mergeProps({key:1},t.search)),void 0,!0):(t.filterOptions||[]).length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("li",R,[e.createElementVNode("p",null,e.toDisplayString(t.search?`No result found by " ${t.search} "`:"No result"),1)]))])],512)],512)])}return r(u,[["render",q],["__scopeId","data-v-160bc553"]])});