vue-multiselect-dropdown/dist/vue-multiselect-dropdown.umd.js

A reusable Vue dropdown component with multi-select and search support

const style = document.createElement('style'); style.innerHTML = ".dropdown-container[data-v-618a1610]{position:relative;width:100%;max-width:400px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.dropdown-label[data-v-618a1610]{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:#374151;line-height:1.5}.required[data-v-618a1610]{color:#ef4444}.dropdown-input-container[data-v-618a1610]{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;padding:10px 14px;cursor:pointer;transition:all .2s ease;min-height:44px}.dropdown-input-container[data-v-618a1610]:hover{border-color:#9ca3af}.dropdown-input-container.dropdown-focused[data-v-618a1610],.dropdown-input-container.dropdown-open[data-v-618a1610]{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.dropdown-input-container.dropdown-error[data-v-618a1610]{border-color:#ef4444}.tag-item[data-v-618a1610]{display:inline-flex;align-items:center;background-color:#e0e7ff;color:#1d4ed8;font-size:13px;font-weight:500;border-radius:6px;padding:4px 8px;transition:all .2s ease}.tag-item[data-v-618a1610]:hover{background-color:#d0d7ff}.tag-remove[data-v-618a1610]{display:flex;align-items:center;justify-content:center;margin-left:6px;color:#3b82f6;background:none;border:none;cursor:pointer;padding:0;width:16px;height:16px;border-radius:4px;transition:all .2s ease}.tag-remove[data-v-618a1610]:hover{color:#1e40af;background-color:#3b82f61a}.dropdown-input[data-v-618a1610]{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:#111827;min-width:50px;padding:0;margin:0;height:24px}.dropdown-input[data-v-618a1610]::placeholder{color:#9ca3af}.selected-text[data-v-618a1610]{font-size:14px;color:#111827;flex:1}.placeholder-text[data-v-618a1610]{color:#9ca3af;font-size:14px;flex:1}.dropdown-icon[data-v-618a1610]{display:flex;align-items:center;justify-content:center;color:#6b7280;transition:transform .2s ease}.dropdown-open .dropdown-icon[data-v-618a1610]{transform:rotate(180deg)}.error-message[data-v-618a1610]{margin-top:6px;font-size:13px;color:#ef4444;line-height:1.5}.dropdown-enter-active[data-v-618a1610],.dropdown-leave-active[data-v-618a1610]{transition:opacity .2s ease,transform .2s ease}.dropdown-enter-from[data-v-618a1610],.dropdown-leave-to[data-v-618a1610]{opacity:0;transform:translateY(-8px)}.dropdown-list[data-v-618a1610]{position:absolute;z-index:50;margin-top:8px;width:100%;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:240px;overflow-y:auto;padding:8px 0}.dropdown-item[data-v-618a1610]{display:flex;align-items:center;padding:10px 16px;font-size:14px;color:#374151;cursor:pointer;transition:all .15s ease}.dropdown-item[data-v-618a1610]:hover,.dropdown-item.highlighted[data-v-618a1610]{background-color:#f3f4f6}.dropdown-item.selected[data-v-618a1610]{background-color:#f9fafb;color:#1d4ed8}.custom-checkbox[data-v-618a1610]{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #d1d5db;border-radius:4px;margin-right:12px;transition:all .2s ease}.custom-checkbox.checked[data-v-618a1610]{background-color:#3b82f6;border-color:#3b82f6;color:#fff}.option-text[data-v-618a1610]{flex:1}.no-results[data-v-618a1610]{padding:12px 16px;font-size:14px;color:#6b7280;text-align:center}\n"; document.head.appendChild(style);(function(e,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(e=typeof globalThis<"u"?globalThis:e||self,e.VueMultiselectDropdown=i(e.Vue))})(this,function(e){"use strict";const i=(t,l)=>{const o=t.__vccOpts||t;for(const[c,s]of l)o[c]=s;return o},a={name:"MultiselectCustomDropDown",props:{modelValue:{type:[Array,Object,String,Number,null],default:()=>[]},options:{type:Array,default:()=>[]},multiple:{type:Boolean,default:!1},searchable:{type:Boolean,default:!1},placeholder:{type:String,default:"Select an option"},label:{type:String,default:""},required:{type:Boolean,default:!1},error:{type:String,default:""},labelKey:{type:String,default:"name"},valueKey:{type:String,default:"value"}},data(){return{dropdownOpen:!1,searchTerm:"",filteredOptions:[],selectedItems:[],highlightedIndex:-1,isFocused:!1}},computed:{inputPlaceholder(){return this.multiple&&this.selectedItems.length>0?"":this.selectedItems.length===0?this.placeholder:""}},watch:{modelValue:{immediate:!0,handler(t){this.selectedItems=this.multiple?Array.isArray(t)?t:[]:t?[t]:[]}},options:{immediate:!0,handler(t){this.filteredOptions=Array.isArray(t)?t:[]}},dropdownOpen(t){t&&(this.highlightedIndex=-1,this.$nextTick(()=>{this.searchable&&this.$el.querySelector(".dropdown-input")&&this.$el.querySelector(".dropdown-input").focus()}))}},methods:{toggleDropdown(){this.dropdownOpen=!this.dropdownOpen},filterOptions(){this.filteredOptions=this.options.filter(t=>t[this.labelKey].toLowerCase().includes(this.searchTerm.toLowerCase()))},selectOption(t){if(this.multiple){const l=this.selectedItems.findIndex(o=>o[this.valueKey]===t[this.valueKey]);l===-1?this.selectedItems.push(t):this.selectedItems.splice(l,1),this.$emit("update:modelValue",this.selectedItems)}else this.selectedItems=[t],this.$emit("update:modelValue",t),this.dropdownOpen=!1},isSelected(t){return this.selectedItems.some(l=>l[this.valueKey]===t[this.valueKey])},removeItem(t){this.selectedItems.splice(t,1),this.$emit("update:modelValue",this.selectedItems)},handleClickOutside(t){this.$refs.dropdownRef&&!this.$refs.dropdownRef.contains(t.target)&&(this.dropdownOpen=!1)},onFocus(){this.isFocused=!0,this.dropdownOpen=!0},onBlur(){this.isFocused=!1},handleKeyDown(t){if(this.dropdownOpen)switch(t.key){case"ArrowDown":t.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.filteredOptions.length-1);break;case"ArrowUp":t.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0);break;case"Enter":this.highlightedIndex>=0&&this.highlightedIndex<this.filteredOptions.length&&this.selectOption(this.filteredOptions[this.highlightedIndex]);break;case"Escape":this.dropdownOpen=!1;break}}},mounted(){document.addEventListener("click",this.handleClickOutside),document.addEventListener("keydown",this.handleKeyDown)},beforeUnmount(){document.removeEventListener("click",this.handleClickOutside),document.removeEventListener("keydown",this.handleKeyDown)}},h={class:"dropdown-container",ref:"dropdownRef"},m={key:0,class:"dropdown-label"},p={key:0,class:"required"},f=["onClick"],k=["placeholder"],u={key:2,class:"selected-text"},g={key:3,class:"placeholder-text"},w={key:1,class:"error-message"},y={key:0,class:"dropdown-list"},B=["onClick","onMouseenter"],x={key:0,width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},O={class:"option-text"},I={key:0,class:"no-results"};function E(t,l,o,c,s,r){return e.openBlock(),e.createElementBlock("div",h,[o.label?(e.openBlock(),e.createElementBlock("label",m,[e.createTextVNode(e.toDisplayString(o.label)+" ",1),o.required?(e.openBlock(),e.createElementBlock("span",p,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["dropdown-input-container",{"dropdown-open":s.dropdownOpen,"dropdown-error":o.error,"dropdown-focused":s.isFocused}]),onClick:l[4]||(l[4]=(...n)=>r.toggleDropdown&&r.toggleDropdown(...n))},[o.multiple?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(s.selectedItems,(n,d)=>(e.openBlock(),e.createElementBlock("span",{key:n[o.valueKey],class:"tag-item"},[e.createTextVNode(e.toDisplayString(n[o.labelKey])+" ",1),e.createElementVNode("button",{onClick:e.withModifiers(V=>r.removeItem(d),["stop"]),class:"tag-remove"},l[5]||(l[5]=[e.createElementVNode("svg",{width:"8",height:"8",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M18 6L6 18",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}),e.createElementVNode("path",{d:"M6 6L18 18",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"})],-1)]),8,f)]))),128)):e.createCommentVNode("",!0),o.searchable?e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:1,type:"text","onUpdate:modelValue":l[0]||(l[0]=n=>s.searchTerm=n),onFocus:l[1]||(l[1]=(...n)=>r.onFocus&&r.onFocus(...n)),onBlur:l[2]||(l[2]=(...n)=>r.onBlur&&r.onBlur(...n)),onInput:l[3]||(l[3]=(...n)=>r.filterOptions&&r.filterOptions(...n)),placeholder:r.inputPlaceholder,class:"dropdown-input"},null,40,k)),[[e.vModelText,s.searchTerm]]):!o.multiple&&s.selectedItems.length>0?(e.openBlock(),e.createElementBlock("span",u,e.toDisplayString(s.selectedItems[0][o.labelKey]),1)):!o.multiple&&s.selectedItems.length===0?(e.openBlock(),e.createElementBlock("span",g,e.toDisplayString(o.placeholder),1)):e.createCommentVNode("",!0),l[6]||(l[6]=e.createElementVNode("div",{class:"dropdown-icon"},[e.createElementVNode("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M6 9L12 15L18 9",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"})])],-1))],2),o.error?(e.openBlock(),e.createElementBlock("div",w,e.toDisplayString(o.error),1)):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"dropdown"},{default:e.withCtx(()=>[s.dropdownOpen?(e.openBlock(),e.createElementBlock("ul",y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.filteredOptions,n=>(e.openBlock(),e.createElementBlock("li",{key:n[o.valueKey],onClick:d=>r.selectOption(n),class:e.normalizeClass({"dropdown-item":!0,selected:r.isSelected(n),highlighted:s.highlightedIndex===s.filteredOptions.indexOf(n)}),onMouseenter:d=>s.highlightedIndex=s.filteredOptions.indexOf(n)},[o.multiple?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["custom-checkbox",{checked:r.isSelected(n)}])},[r.isSelected(n)?(e.openBlock(),e.createElementBlock("svg",x,l[7]||(l[7]=[e.createElementVNode("path",{d:"M20 6L9 17L4 12",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"},null,-1)]))):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),e.createElementVNode("span",O,e.toDisplayString(n[o.labelKey]),1)],42,B))),128)),s.filteredOptions.length===0?(e.openBlock(),e.createElementBlock("li",I," No results found ")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),_:1})],512)}return i(a,[["render",E],["__scopeId","data-v-618a1610"]])});