@vuesimple/vs-select
Version:
A simple vue select. Perfect for all your select scenarios.
2 lines (1 loc) • 24.8 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-select{--vs-select-color: #1f73b7;--vs-select-bg: #ffffff;--vs-select-border: #d8dcde;--vs-select-border-hover: #5293c7;--vs-select-hover: #edf7ff;--vs-select-error: #cc3340;--vs-select-icon: #68737d;--vs-select-border-radius: 4px;width:100%;position:relative}.vs-select .vs-select__input-wrapper:hover,.vs-select .vs-select__input-wrapper:focus-within{border-color:var(--vs-select-border-hover)}.vs-select .vs-select__input-wrapper:focus,.vs-select .vs-select__input-wrapper:focus-within{border-color:var(--vs-select-color);box-shadow:#1f73b759 0 0 0 3px}.vs-select__label{line-height:1.42857;color:#2f3941;font-size:14px;font-weight:600;margin-bottom:8px;display:inline-block}.vs-select--cursor-pointer{cursor:pointer}.vs-select--error.vs-select__input-wrapper{border-color:var(--vs-select-error)!important}.vs-select--compact .vs-select__input-wrapper{min-height:32px;max-height:32px}.vs-select--compact .vs-select__input{padding:6px 37px 6px 11px}.vs-select--compact .vs-select__menu--top{bottom:32px}.vs-select--required{color:#cc3340}.vs-select__input-wrapper{overflow:hidden;position:relative;text-align:left;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;outline:0;border:1px solid var(--vs-select-border);border-radius:var(--vs-select-border-radius);background-color:var(--vs-select-bg);width:100%;min-height:40px;box-sizing:border-box;vertical-align:middle;line-height:1.28571;color:#2f3941;font-family:inherit;font-size:14px}.vs-select__input-wrapper .vs-select__icon{position:absolute;top:0;bottom:0;right:0;cursor:pointer;color:var(--vs-select-icon);background:white;display:flex;align-items:center;padding:0 12px}.vs-select__input-wrapper .vs-select__icon svg{transition:.17s all linear;width:12px;height:12px}.vs-select__input-wrapper.vs-select--is-open{border-color:var(--vs-select-border-hover);box-shadow:#1f73b759 0 0 0 3px}.vs-select__input-wrapper.vs-select--is-open:before{transform:rotate(180deg) translateY(-1px)}.vs-select__input-wrapper.vs-select--is-open .vs-select__icon svg{transform:rotate(180deg)}.vs-select__input-wrapper.vs-select--menu{border-color:var(--vs-select-color)}.vs-select__input-wrapper.vs-select--menu .vs-select__input,.vs-select__input-wrapper.vs-select--menu .vs-select__icon{color:var(--vs-select-color)}.vs-select__input-wrapper.vs-select--disabled{background:#f8f9f9;cursor:no-drop;border-color:#e9ebed;user-select:none}.vs-select__input-wrapper.vs-select--disabled:hover{border-color:#e9ebed}.vs-select__input-wrapper.vs-select--disabled .vs-select__input,.vs-select__input-wrapper.vs-select--disabled .vs-select__icon{cursor:no-drop;user-select:none;color:#c2c8cc;background:transparent}.vs-select__input{color:#2f3941;width:100%;border:none!important;padding:10px 37px 10px 15px;box-shadow:none!important;outline:none!important;font-family:inherit;background:transparent;position:relative;z-index:50;line-height:18px}.vs-select__input:read-only{cursor:pointer;user-select:none}.vs-select__menu{z-index:150;max-height:250px;overflow:auto;display:inline-block;position:absolute;margin:0;box-sizing:border-box;border:1px solid #d8dcde;border-radius:var(--vs-select-border-radius);box-shadow:0 10px 20px #04444d26;background-color:#fff;cursor:default;padding:0;min-width:120px;text-align:left;white-space:normal;font-size:14px;font-weight:400;width:100%;left:0}.vs-select__menu--top{bottom:40px;box-shadow:0 -2px 20px #04444d26}.vs-select__menu-item{display:block;position:relative;z-index:0;cursor:pointer;padding:8px 36px;text-decoration:none;line-height:20px;word-wrap:break-word;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vs-select__menu-item:hover,.vs-select__menu-item:focus-within{background-color:var(--vs-select-hover);text-decoration:none}.vs-select__menu-item:focus{outline:none}.vs-select__menu-item:first-child{margin-top:4px}.vs-select__menu-item:last-child{margin-bottom:4px}.vs-select__menu-item:before{position:absolute;top:0;left:0;-webkit-transition:opacity .1s ease-in-out;transition:opacity .1s ease-in-out;opacity:0;background:no-repeat 50%/16px url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' color='%231f73b7'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M1 9l4 4L15 3'/%3E%3C/svg%3E\");width:32px;height:40px;content:\"\"}.vs-select__menu-item--is-disabled{color:#c2c8cc;cursor:no-drop}.vs-select__menu-item--is-disabled:hover{background-color:transparent}.vs-select__menu--no-item{text-align:center}.vs-select .vs-select__menu--is-checked:before,.vs-select .vs-select__menu-item[aria-checked=true]:before{opacity:1}.vs-select .vs-select__menu.vs-select--menu-hidden{display:inline-block;transition:opacity .2s ease-in-out,visibility .2s linear 0s;visibility:hidden;opacity:0}.vs-multiselect{--vs-select-bg: #ffffff;--vs-select-border: #d8dcde;--vs-select-border-hover: #5293c7;--vs-select-hover: #edf7ff;--vs-select-error: #cc3340;--vs-select-icon: #68737d;--vs-select-border-radius: 4px;width:100%;position:relative}.vs-multiselect__select-wrapper:hover{border-color:var(--vs-select-border-hover)}.vs-multiselect__select-wrapper:focus,.vs-multiselect__select-wrapper:focus-within{border-color:var(--vs-select-border-hover);box-shadow:#1f73b759 0 0 0 3px}.vs-multiselect__label{line-height:1.42857;color:#2f3941;font-size:14px;font-weight:600;margin-bottom:8px;display:inline-block}.vs-multiselect__input-wrapper:hover,.vs-multiselect__input-wrapper:focus,.vs-multiselect__input-wrapper:focus-within{background-color:transparent!important}.vs-multiselect--compact .vs-multiselect__select-wrapper{min-height:32px}.vs-multiselect--compact .vs-multiselect__select-wrapper span{padding:7px 37px 7px 11px;line-height:16px}.vs-multiselect--compact .vs-multiselect__menu--top{bottom:32px}.vs-multiselect--required{color:#cc3340}.vs-multiselect__input{width:85%;border:none!important;padding:.71429em 1.14286em;box-shadow:none!important;outline:none!important;font-family:inherit;background:transparent}.vs-multiselect__select-wrapper{display:grid;align-items:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;text-align:left;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;outline:0;border:1px solid var(--vs-select-border);border-radius:var(--vs-select-border-radius);background-color:var(--vs-select-bg);width:100%;min-height:40px;box-sizing:border-box;vertical-align:middle;line-height:1.28571;color:#2f3941;font-family:inherit;font-size:14px}.vs-multiselect__select-wrapper.vs-multiselect--error{border-color:var(--vs-select-error)!important}.vs-multiselect__select-wrapper .vs-multiselect__icon{position:absolute;top:56%;right:14px;cursor:pointer;transform:translateY(-50%);color:var(--vs-select-icon)}.vs-multiselect__select-wrapper .vs-multiselect__icon svg{transition:.17s all linear;width:12px;height:12px}.vs-multiselect__select-wrapper span{padding:10px 40px 10px 15px}.vs-multiselect__select-wrapper.vs-multiselect--is-open{border-color:var(--vs-select-border-hover);box-shadow:#1f73b759 0 0 0 3px}.vs-multiselect__select-wrapper.vs-multiselect--is-open .vs-multiselect__icon svg{transform:rotate(180deg)}.vs-multiselect__select-wrapper.vs-multiselect--disabled{background:#f8f9f9;color:#c2c8cc;cursor:no-drop;border-color:#e9ebed;user-select:none}.vs-multiselect__select-wrapper.vs-multiselect--disabled:hover{border-color:#e9ebed}.vs-multiselect__select-wrapper.vs-multiselect--disabled .vs-multiselect__input,.vs-multiselect__select-wrapper.vs-multiselect--disabled .vs-multiselect__icon{background:transparent;cursor:no-drop;user-select:none;color:#c2c8cc}.vs-multiselect__no-search li:nth-child(2){margin-top:4px}.vs-multiselect__menu{z-index:150;max-height:250px;overflow-x:hidden;overflow-y:auto;display:inline-block;position:absolute;margin:0;box-sizing:border-box;border:1px solid #d8dcde;border-radius:var(--vs-select-border-radius);box-shadow:0 10px 20px #04444d26;background-color:#fff;cursor:default;padding:0;min-width:180px;text-align:left;white-space:normal;font-size:14px;font-weight:400;width:100%;left:0}.vs-multiselect__menu--top{bottom:40px;box-shadow:0 -2px 20px #04444d26}.vs-multiselect__menu-item{display:block;position:relative;z-index:0;cursor:pointer;padding:8px 36px;text-decoration:none;line-height:20px;word-wrap:break-word;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vs-multiselect__menu-item:hover,.vs-multiselect__menu-item:focus-within{background-color:var(--vs-select-hover);text-decoration:none}.vs-multiselect__menu-item:focus{outline:none}.vs-multiselect__menu-item:first-child{margin-top:4px;padding:0}.vs-multiselect__menu-item:last-child{margin-bottom:4px}.vs-multiselect__menu-item:before{position:absolute;top:0;left:0;-webkit-transition:opacity .1s ease-in-out;transition:opacity .1s ease-in-out;opacity:0;background:no-repeat 50%/16px url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' color='%231f73b7'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M1 9l4 4L15 3'/%3E%3C/svg%3E\");width:32px;height:40px;content:\"\"}.vs-multiselect__menu-item--is-disabled{color:#c2c8cc;cursor:no-drop}.vs-multiselect__menu-item--is-disabled:hover{background-color:transparent}.vs-multiselect__menu--no-item{margin-bottom:8px;padding:10px;text-align:center}.vs-multiselect .vs-multiselect__menu--is-checked:before,.vs-multiselect .vs-multiselect__menu-item[aria-checked=true]:before{opacity:1}.vs-multiselect .vs-multiselect__menu.vs-multiselect--menu-hidden{display:inline-block;transition:opacity .2s ease-in-out,visibility .2s linear 0s;visibility:hidden;opacity:0}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d.VsSelect={},d.Vue))})(this,function(d,e){"use strict";const D="",h=(t,s)=>{const l=t.__vccOpts||t;for(const[o,n]of s)l[o]=n;return l},f={props:{label:{type:String,required:!1},required:{type:Boolean},placeholder:{type:String,required:!1,default:"Select"},preselected:{},modelValue:{},options:{type:Array,required:!0},hasEmptyOption:{type:Boolean,required:!1},isError:{type:Boolean,requied:!1},isSearch:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},isMenu:{type:Boolean,default:!1},isCompact:{type:Boolean,default:!1},emptyItemsText:{type:String,default:"No Data Available"}},data(){return{isMenuHidden:!0,inputValue:this.placeholder,selected:null,selectedObject:{},isObject:!1,searchTerm:"",isMenuTop:!1}},computed:{selectOptions(){return this.options.filter(t=>!this.searchTerm||new RegExp(this.searchTerm,"i").test(this.isObject?t.label:t))||""},isReadonly(){return!(this.isSearch&&!this.isMenuHidden&&!this.disabled&&!this.isMenu)}},watch:{inputValue(t){this.isMenuHidden||(this.searchTerm=t)},preselected(){this.selected=this.preselected},modelValue(){this.initOptions()},options:{handler:"initOptions",immediate:!1}},created(){this.initOptions()},mounted(){window&&(window.addEventListener("click",t=>{this.$el.contains(t.target)||this.setSelectClose()}),this.handleScroll(),window.addEventListener("scroll",this.handleScroll))},destroyed(){window&&window.removeEventListener("scroll",this.handleScroll)},methods:{initOptions(){if(this.options.some(t=>typeof t=="object")){if(this.isObject=!0,this.selected="",this.preselected){const t=this.options.filter(s=>s.value==this.preselected);if(t.length>0){this.selectedObject=t[0],this.selected=this.selectedObject.value,this.inputValue=this.selectedObject.label;return}}if(typeof this.modelValue<"u"){const t=this.options.filter(s=>s.value===this.modelValue);t.length>0&&(this.selectedObject=t[0],this.selected=this.selectedObject.value,this.inputValue=this.selectedObject.label)}}else{if(this.isObject=!1,this.selected="",this.preselected){this.selected=this.inputValue=this.preselected;return}this.modelValue&&(this.selected=this.inputValue=this.modelValue)}},onSelectedItem(t){this.searchTerm="",this.inputValue="",this.isMenuHidden=!0,this.isObject?(this.selectedObject=this.options.filter(s=>s.value===t.value)[0],this.selected=this.selectedObject.label,this.$emit("update:modelValue",this.selectedObject.value),this.$emit("change",this.selectedObject.value,this.selectedObject)):(this.selected=this.options.filter(s=>s===t)[0],this.$emit("update:modelValue",this.selected),this.$emit("change",this.options.indexOf(this.selected),this.selected)),this.searchTerm="",this.setSelectClose()},searchSelectList(){this.searchTerm=this.selected},setInnerText(t){this.inputValue=t},handleScroll(){const t=this.$refs["vs-select"],s=this.$refs["vs-select-dropdown"];t.offsetTop+(s&&s.offsetHeight||0)+100>window.innerHeight+window.pageYOffset?this.isMenuTop=!0:this.isMenuTop=!1},setSelectEnv(){if(this.$emit("open"),this.handleScroll(),!this.isMenuHidden&&!this.searchTerm){this.setSelectClose();return}this.$refs["vs-select-box"].focus(),this.isMenuHidden=!1,this.isSearch&&!this.isMenu&&(this.inputValue="")},setSelectClose(){this.isMenuHidden=!0,this.selected&&!this.isObject&&(this.inputValue=this.selected),this.selected&&this.isObject&&(this.inputValue=this.selectedObject.label),!this.selected&&typeof this.selected!="boolean"&&(this.inputValue=this.placeholder)}}},p={key:0,class:"vs-select__label"},b={key:0,class:"vs-select--required"},y=["disabled","readonly","aria-expanded"],_=e.createElementVNode("div",{class:"vs-select__icon"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12"},[e.createElementVNode("path",{fill:"currentColor",d:"M1.646 3.646a.5.5 0 01.638-.057l.07.057L6 7.293l3.646-3.647a.5.5 0 01.638-.057l.07.057a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.638.057l-.07-.057-4-4a.5.5 0 010-.708z"})])],-1),w={key:1,class:"vs-select__menu-wrapper"},O=["aria-selected","onClick","onKeydown","onKeyup","onBlur"],V={key:0},k={key:1},S={key:1,class:"vs-select__menu-item vs-select__menu--no-item",role:"menuitem"};function j(t,s,l,o,n,c){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-select",{"vs-select--compact":l.isCompact}]),ref:"vs-select"},[l.label?(e.openBlock(),e.createElementBlock("label",p,[e.createElementVNode("span",null,e.toDisplayString(l.label),1),l.required?(e.openBlock(),e.createElementBlock("span",b," *")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["vs-select__input-wrapper",[{"vs-select--error":l.isError},{"vs-select--cursor-pointer":!l.isSearch},{"vs-select--is-open":!n.isMenuHidden},{"vs-select--disabled":l.disabled},{"vs-select--menu":l.isMenu}]])},[e.withDirectives(e.createElementVNode("input",{ref:"vs-select-box",class:e.normalizeClass(["vs-select__input",{"vs-select--cursor-pointer":n.isMenuHidden}]),disabled:l.disabled,onClick:s[0]||(s[0]=i=>l.disabled?null:c.setSelectEnv()),onKeydown:s[1]||(s[1]=e.withKeys(e.withModifiers(i=>l.disabled?null:c.setSelectEnv(),["prevent"]),["space"])),onKeyup:s[2]||(s[2]=e.withKeys(i=>l.disabled?null:n.isMenuHidden=!0,["esc"])),"onUpdate:modelValue":s[3]||(s[3]=i=>n.inputValue=i),readonly:c.isReadonly,role:"menu","aria-haspopup":"true","aria-expanded":!n.isMenuHidden},null,42,y),[[e.vModelText,n.inputValue]]),_],2),l.disabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("ul",{class:e.normalizeClass(["vs-select__menu",{"vs-select__menu--top":n.isMenuTop},{"vs-select--menu-hidden":n.isMenuHidden}]),ref:"vs-select-dropdown"},[l.hasEmptyOption?(e.openBlock(),e.createElementBlock("li",{key:0,class:"vs-select__menu-item",onClick:s[4]||(s[4]=i=>c.onSelectedItem(-1)),role:"menuitem"},"-")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.selectOptions,(i,r)=>(e.openBlock(),e.createElementBlock("li",{key:"vs-selected-"+r,class:e.normalizeClass(["vs-select__menu-item",{"vs-select__menu--is-checked":!l.isMenu&&n.selected===i},{"vs-select__menu--is-checked":!l.isMenu&&n.isObject&&n.selectedObject.value===i.value},{"vs-select__menu-item--is-disabled":i.disabled}]),"aria-selected":n.isObject&&n.selectedObject.value===i.value||n.selected===i,onClick:a=>i.disabled?null:c.onSelectedItem(i,r),onKeydown:e.withKeys(e.withModifiers(a=>i.disabled?null:c.onSelectedItem(i,r),["prevent"]),["space"]),onKeyup:[e.withKeys(a=>i.disabled?null:c.onSelectedItem(i,r),["enter"]),s[5]||(s[5]=e.withKeys(a=>n.isMenuHidden=!0,["esc"]))],onBlur:a=>r===c.selectOptions.length-1?c.setSelectClose():null,role:"menuitem",tabIndex:"0"},[n.isObject?(e.openBlock(),e.createElementBlock("span",V,e.toDisplayString(i.label),1)):(e.openBlock(),e.createElementBlock("span",k,e.toDisplayString(i),1))],42,O))),128)),c.selectOptions.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("li",S,e.toDisplayString(l.emptyItemsText),1))],2)]))],2)}const u=h(f,[["render",j]]),L="",B={props:{label:{type:String,required:!1},required:{type:Boolean},placeholder:{type:String,required:!1,default:"Select"},preselected:{type:Array,required:!1},modelValue:{},options:{type:Array,required:!0},hasEmptyOption:{type:Boolean,required:!1},isError:{type:Boolean,requied:!1},isSearch:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},emptyItemsText:{type:String,default:"No Data Available"},isCompact:{type:Boolean,default:!1}},data(){return{isMenuHidden:!0,inputValue:this.placeholder,selected:null,selectedObject:{},isObject:!1,searchTerm:"",selectedArrayObject:[],isMenuTop:!1}},computed:{selectOptions(){return this.options.filter(t=>!this.searchTerm||new RegExp(this.searchTerm,"i").test(this.isObject?t.label:t))||""},selectedItems(){const t=this.selectedArrayObject;return this.isObject?t.length>2?`${t[0].label}, ${t[1].label}, and ${t.length-2} more`:this.selectedArrayObject.map(s=>s.label).join(", "):t.length>2?`${t[0]}, ${t[1]}, and ${t.length-2} more`:this.selectedArrayObject.map(s=>s).join(", ")}},watch:{inputValue(t){this.isMenuHidden||(this.searchTerm=t)},modelValue(t){this.selectedArrayObject=t},options:{handler:"initOptions",immediate:!1}},created(){this.initOptions()},mounted(){window&&(window.addEventListener("click",t=>{this.$el.contains(t.target)||(this.isMenuHidden=!0)}),window.addEventListener("scroll",this.handleScroll))},destroyed(){window&&window.removeEventListener("scroll",this.handleScroll)},methods:{initOptions(){if(this.options.some(t=>typeof t=="object")){if(this.isObject=!0,this.preselected){this.selectedArrayObject=this.options.filter(({value:t})=>this.preselected&&this.preselected.some(s=>s===t));return}this.modelValue&&(this.selectedArrayObject=this.options.filter(({value:t})=>this.modelValue&&this.modelValue.some(s=>s.value===t)))}else{if(this.isObject=!1,this.preselected){this.selectedArrayObject=this.preselected;return}this.modelValue&&(this.selectedArrayObject=this.modelValue)}},setSelected(t){return this.isObject?this.selectedArrayObject.filter(s=>s.value===t.value).length>0:this.selectedArrayObject.filter(s=>s===t).length>0},onSelectedItem(t){this.searchTerm="",this.inputValue="",this.isMenuHidden=!1,this.isObject?this.containsObject(this.selectedArrayObject,t)?this.selectedArrayObject=this.selectedArrayObject.filter(l=>l.value!==t.value):this.selectedArrayObject.push(t):this.selectedArrayObject.includes(t)?this.selectedArrayObject=this.selectedArrayObject.filter(l=>l!==t):this.selectedArrayObject.push(t),this.$emit("update:modelValue",this.selectedArrayObject),this.$emit("change",this.selectedArrayObject),this.searchTerm="",this.inputValue=this.selected},containsObject(t,s){return t.some(l=>l.value===s.value)},searchSelectList(){this.searchTerm=this.selected},isMenu(){this.isMenuHidden=!this.isMenuHidden},setInnerText(t){this.inputValue=t},handleScroll(){const t=this.$refs["vs-multiselect-wrapper"],s=this.$refs["vs-multiselect-dropdown"];t.offsetTop+(s&&s.offsetHeight||0)+100>window.innerHeight+window.pageYOffset?this.isMenuTop=!0:this.isMenuTop=!1},setSelectEnv(){if(this.$emit("open"),this.handleScroll(),!this.isMenuHidden){this.isMenuHidden=!0,this.$refs["vs-multiselect-box"].blur();return}this.isMenuHidden=!1,this.$nextTick(()=>this.$refs["vs-multiselect-box"].focus()),this.selected||(this.inputValue="")}}},E={key:0,class:"vs-multiselect__label"},M={key:0,class:"vs-multiselect--required"},g=["aria-expanded"],v=e.createElementVNode("div",{class:"vs-multiselect__icon"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12"},[e.createElementVNode("path",{fill:"currentColor",d:"M1.646 3.646a.5.5 0 01.638-.057l.07.057L6 7.293l3.646-3.647a.5.5 0 01.638-.057l.07.057a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.638.057l-.07-.057-4-4a.5.5 0 010-.708z"})])],-1),C={key:1,class:"vs-multiselect__menu-wrapper"},T={class:"vs-multiselect__menu-item vs-multiselect__input-wrapper",role:"menuitem"},H=["disabled"],N=["onClick","onKeydown","onKeyup","onBlur","aria-selected"],x={key:0},A={key:1},K={key:1,class:"vs-multiselect__menu-item vs-multiselect__menu--no-item",role:"menuitem"};function I(t,s,l,o,n,c){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-multiselect",{"vs-multiselect--compact":l.isCompact}]),ref:"vs-multiselect-wrapper"},[l.label?(e.openBlock(),e.createElementBlock("label",E,[e.createElementVNode("span",null,e.toDisplayString(l.label),1),l.required?(e.openBlock(),e.createElementBlock("span",M," *")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["vs-multiselect__select-wrapper",[{"vs-multiselect--error":l.isError},{"vs-multiselect--is-open":!n.isMenuHidden},{"vs-multiselect--disabled":l.disabled}]]),onClick:s[0]||(s[0]=i=>l.disabled?null:c.setSelectEnv()),onKeydown:s[1]||(s[1]=e.withKeys(e.withModifiers(i=>l.disabled?null:c.setSelectEnv(),["prevent"]),["space"])),onKeyup:s[2]||(s[2]=e.withKeys(i=>l.disabled?null:n.isMenuHidden=!0,["esc"])),role:"menu",ref:"vs-multiselect","aria-haspopup":"true",tabindex:"0","aria-expanded":!n.isMenuHidden},[e.createElementVNode("span",null,e.toDisplayString(c.selectedItems?c.selectedItems:l.placeholder),1),v],42,g),l.disabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("ul",{class:e.normalizeClass(["vs-multiselect__menu",{"vs-multiselect__menu--top":n.isMenuTop},{"vs-multiselect__no-search":!l.isSearch},{"vs-multiselect--menu-hidden":n.isMenuHidden}]),ref:"vs-multiselect-dropdown"},[l.hasEmptyOption?(e.openBlock(),e.createElementBlock("li",{key:0,class:"vs-multiselect__menu-item",onClick:s[3]||(s[3]=i=>c.onSelectedItem(-1))},"-")):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("li",T,[e.withDirectives(e.createElementVNode("input",{ref:"vs-multiselect-box",class:"vs-multiselect__input",disabled:l.disabled,"onUpdate:modelValue":s[4]||(s[4]=i=>n.inputValue=i),placeholder:"Search..."},null,8,H),[[e.vModelText,n.inputValue]])],512),[[e.vShow,l.isSearch]]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.selectOptions,(i,r)=>(e.openBlock(),e.createElementBlock("li",{key:"vs-selected-"+r,class:e.normalizeClass(["vs-multiselect__menu-item",[{"vs-multiselect__menu--is-checked":c.setSelected(i)},{"vs-multiselect__menu-item--is-disabled":i.disabled}]]),onClick:a=>i.disabled?null:c.onSelectedItem(i,r),onKeydown:e.withKeys(e.withModifiers(a=>i.disabled?null:c.onSelectedItem(i,r),["prevent"]),["space"]),onKeyup:[e.withKeys(a=>i.disabled?null:c.onSelectedItem(i,r),["enter"]),s[5]||(s[5]=e.withKeys(a=>l.disabled?null:n.isMenuHidden=!0,["esc"]))],onBlur:a=>r===c.selectOptions.length-1?n.isMenuHidden=!0:null,"aria-selected":c.setSelected(i),role:"menuitem",tabIndex:"0"},[n.isObject?(e.openBlock(),e.createElementBlock("span",x,e.toDisplayString(i.label),1)):(e.openBlock(),e.createElementBlock("span",A,e.toDisplayString(i),1))],42,N))),128)),c.selectOptions.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("li",K,e.toDisplayString(l.emptyItemsText),1))],2)]))],2)}const m=h(B,[["render",I]]),q={install(t){t.component("VsSelect",u),t.component("VsMultiselect",m)}};d.VsMultiselect=m,d.VsSelect=u,d.plugin=q,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});