diff --git a/css/vue-next-select.css b/css/vue-next-select.css index 7f7ef1b..7bd85aa 100644 --- a/css/vue-next-select.css +++ b/css/vue-next-select.css @@ -1 +1,230 @@ -@keyframes loading{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.icon.delete{display:flex;justify-content:center;align-items:center;padding:0;margin:0;border:0;background:0 0;height:8px;width:8px;min-height:8px;min-width:8px;max-height:8px;max-width:8px;cursor:pointer}.icon.arrow-downward{color:#999;border-style:solid;border-width:4px 4px 0;border-color:#999 transparent transparent;content:'';transition:transform .2s linear;cursor:pointer}.icon.arrow-downward.active{transform:rotate(180deg)}.vue-select{position:relative;display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;width:150px;border-radius:4px;border:1px solid #999;box-sizing:border-box;outline:0}.vue-select[data-is-focusing=true]:not([data-visible-length='0']){border-bottom-left-radius:0;border-bottom-right-radius:0}.vue-select.disabled{background-color:rgba(239,239,239)}.vue-dropdown[data-removable=false] .vue-dropdown-item.selected:hover,.vue-select.disabled *,.vue-select.disabled input,.vue-tags[data-removable=false] .vue-tag.selected img:hover{cursor:not-allowed}.vue-select-header{display:flex;width:100%;align-items:center;justify-content:space-between}.vue-select-header>.icon.arrow-downward,.vue-select-header>.icon.loading,.vue-tag>span{margin-right:4px}.vue-tags{display:flex;flex-wrap:wrap;margin:0;padding:2px;min-height:calc(1rem + 4px);user-select:none}.vue-tags.collapsed{flex-wrap:nowrap;overflow:auto}.vue-tag,.vue-tag.selected{align-items:center;justify-content:center;background-color:#999;border-radius:4px;padding:0 4px;font-size:.8rem}.vue-tag{display:none;list-style-type:none;margin:2px;min-height:1rem}.vue-tag.selected{display:flex}.vue-dropdown,.vue-input{min-width:0;box-sizing:border-box}.vue-input,.vue-input>input{border:0;outline:0;width:100%}.vue-input{display:flex;align-items:center;border-radius:4px;max-width:100%;padding:4px}.vue-input>input{min-width:0;font-size:.8rem;padding:0}.vue-input>input[disabled]{background-color:rgba(239,239,239)}.vue-input>input[readonly],.vue-select-header>.vue-input>input[disabled]{background-color:unset}.vue-dropdown{position:absolute;background-color:#fff;z-index:1;max-height:300px;overflow-y:auto;width:inherit;left:-1px;margin:0;padding:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border:1px solid #999;list-style-type:none}.vue-dropdown[data-visible-length='0']{border:0}.vue-dropdown-item{list-style-type:none;padding:4px;cursor:pointer;min-height:1rem}.vue-dropdown-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.vue-dropdown-item.highlighted{background-color:#41b883}.vue-dropdown-item.disabled{background-color:rgba(239,239,239);cursor:not-allowed}.vue-dropdown-item.selected{background-color:#f3f3f3}.vue-dropdown-item.selected.highlighted{background-color:#ff6a6a}.vue-dropdown[data-addable=false][data-multiple=true] .vue-dropdown-item:not(.selected):hover{cursor:not-allowed}.icon.loading{display:inline-block;position:relative;width:8px;min-width:8px;height:8px;min-height:8px}.icon.loading div{box-sizing:border-box;display:block;position:absolute;border:1px solid #999;width:8px;height:8px;border-radius:50%;animation:loading 1s cubic-bezier(.5,0,.5,1) infinite;border-color:#999 transparent transparent}.icon.loading div:nth-child(1){animation-delay:-.08s}.icon.loading div:nth-child(2){animation-delay:-.16s} \ No newline at end of file +@keyframes loading { + 0% { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.icon.delete { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + margin: 0; + border: 0; + background: 0 0; + height: 8px; + width: 8px; + min-height: 8px; + min-width: 8px; + max-height: 8px; + max-width: 8px; + cursor: pointer; +} +.icon.arrow-downward { + color: #999; + border-style: solid; + border-width: 4px 4px 0; + border-color: #999 transparent transparent; + content: ''; + transition: transform 0.2s linear; + cursor: pointer; +} +.icon.arrow-downward.active { + transform: rotate(180deg); +} +.vue-select { + position: relative; + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-direction: column; + width: 150px; + border-radius: 4px; + border: 1px solid #999; + box-sizing: border-box; + outline: 0; +} +.vue-select[aria-disabled='true'] { + background-color: rgba(239, 239, 239); +} +.vue-dropdown[data-removable='false'] .vue-dropdown-item.selected:hover, +.vue-select[aria-disabled='true'] *, +.vue-select[aria-disabled='true'] input, +.vue-tags[data-removable='false'] .vue-tag.selected img:hover { + cursor: not-allowed; +} +.vue-select-header { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; +} +.vue-select-header .icon.arrow-downward, +.vue-select-header .icon.loading, +.vue-select-input-wrapper .icon.loading, +.vue-tag span { + margin-right: 4px; +} +.vue-tags { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 2px; + min-height: calc(1rem + 4px); + user-select: none; +} +.vue-tags.collapsed { + flex-wrap: nowrap; + overflow: auto; +} +.vue-tag, +.vue-tag.selected { + justify-content: center; + background-color: #999; + padding: 0 4px; + font-size: 0.8rem; +} +.vue-tag { + display: none; + align-items: center; + list-style-type: none; + border-radius: 4px; + margin: 2px; + min-height: 1rem; +} +.vue-tag.selected { + display: flex; +} +.vue-select-input-wrapper { + position: relative; + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; +} +.vue-input, +.vue-tag.selected { + align-items: center; + border-radius: 4px; +} +.vue-input { + display: inline-flex; + border: 0; + outline: 0; + max-width: 100%; + min-width: 0; + width: 100%; + box-sizing: border-box; + padding: 4px; +} +.vue-select[data-is-focusing='false'][aria-disabled='false'] .vue-input input, +input[readonly] { + cursor: default; +} +.vue-dropdown, +.vue-input input { + width: 100%; + min-width: 0; + padding: 0; +} +.vue-input input { + border: 0; + outline: 0; + font-size: 0.8rem; +} +.vue-input input[disabled] { + background-color: rgba(239, 239, 239); +} +.vue-input input[readonly], +.vue-select-header .vue-input input[disabled] { + background-color: unset; +} +.vue-dropdown { + display: none; + position: absolute; + background-color: #fff; + z-index: 1; + overflow-y: auto; + margin: 0; + left: -1px; + box-sizing: content-box; + border: 1px solid #999; + list-style-type: none; +} +.vue-select[aria-expanded='true'] .vue-dropdown { + display: unset; +} +.vue-dropdown[data-visible-length='0'] { + border: 0; +} +.vue-dropdown-item { + list-style-type: none; + padding: 4px; + cursor: pointer; + min-height: 1rem; +} +.vue-dropdown-item.highlighted { + background-color: #41b883; +} +.vue-dropdown-item.disabled { + background-color: rgba(239, 239, 239); + cursor: not-allowed; +} +.vue-dropdown-item.selected { + background-color: #f3f3f3; +} +.vue-dropdown-item.selected.highlighted { + background-color: #ff6a6a; +} +.vue-dropdown[data-addable='false'][data-multiple='true'] .vue-dropdown-item:not(.selected):hover { + cursor: not-allowed; +} +.icon.loading { + display: inline-block; + position: relative; + width: 8px; + min-width: 8px; + height: 8px; + min-height: 8px; +} +.icon.loading div { + box-sizing: border-box; + display: block; + position: absolute; + border: 1px solid #999; + width: 8px; + height: 8px; + border-radius: 50%; + animation: loading 1s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: #999 transparent transparent; +} +.icon.loading div:nth-child(1) { + animation-delay: -0.08s; +} +.icon.loading div:nth-child(2) { + animation-delay: -0.16s; +} +.inline-flex { + display: inline-flex; +} +.vue-select[aria-expanded='true'].direction-bottom { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.vue-select[aria-expanded='true'].direction-top { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.vue-select.direction-top .vue-dropdown { + bottom: 100%; + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +.vue-select.direction-bottom .vue-dropdown { + top: 100%; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} + diff --git a/js/vue-next-select.js b/js/vue-next-select.js index 947d825..7032060 100644 --- a/js/vue-next-select.js +++ b/js/vue-next-select.js @@ -1 +1,1601 @@ -this.VueNextSelect=function(e){"use strict";var l={inheritAttrs:!1,name:"vue-input",props:{modelValue:{required:!0,type:String},placeholder:{required:!0,type:String},disabled:{required:!0,type:Boolean},tabindex:{required:!0,type:Number},autofocus:{required:!0,type:Boolean}},emits:["update:modelValue","input","change","focus","blur","escape"],setup(l,a){const t=e.ref(null);return e.onMounted((()=>{l.autofocus&&t.value.focus()})),e.onUpdated((()=>{l.autofocus&&t.value.focus()})),{handleInput:e=>{a.emit("input",e),a.emit("update:modelValue",e.target.value)},handleChange:e=>{a.emit("change",e),a.emit("update:modelValue",e.target.value)},handleFocus:e=>{a.emit("focus",e)},handleBlur:e=>{a.emit("blur",e)},input:t,handleEscape:e=>{t.value.blur(),a.emit("escape",e)}}}};const a={class:"vue-input"};l.render=function(l,t,o,n,u,i){return e.openBlock(),e.createBlock("div",a,[e.renderSlot(l.$slots,"prepend"),e.createVNode("input",{ref:"input",modelValue:o.modelValue,placeholder:o.placeholder,disabled:o.disabled,onInput:t[1]||(t[1]=(...e)=>n.handleInput&&n.handleInput(...e)),onChange:t[2]||(t[2]=(...e)=>n.handleChange&&n.handleChange(...e)),onFocus:t[3]||(t[3]=(...e)=>n.handleFocus&&n.handleFocus(...e)),onBlur:t[4]||(t[4]=(...e)=>n.handleBlur&&n.handleBlur(...e)),onKeyup:t[5]||(t[5]=e.withKeys(e.withModifiers(((...e)=>n.handleEscape&&n.handleEscape(...e)),["exact"]),["esc"])),tabindex:o.tabindex,autofocus:o.autofocus},null,40,["modelValue","placeholder","disabled","tabindex","autofocus"]),e.renderSlot(l.$slots,"append")])},l.__file="src/components/input.vue";var t={inheritAttrs:!1,name:"vue-tags",props:{modelValue:{required:!0,type:Array,validator:e=>e.every((e=>void 0!==typeof e.key&&void 0!==e.label&&"boolean"==typeof e.selected))},collapseTags:{type:Boolean}},emits:["click"],setup:(l,a)=>({dataAttrs:e.inject("dataAttrs"),handleClick:e=>{a.emit("click",e)}})};t.render=function(l,a,t,o,n,u){return e.openBlock(),e.createBlock("ul",e.mergeProps({class:["vue-tags",{collapsed:t.collapseTags}],onMousedown:a[1]||(a[1]=e.withModifiers((()=>{}),["prevent"])),tabindex:"-1",onClick:a[2]||(a[2]=(...e)=>o.handleClick&&o.handleClick(...e))},o.dataAttrs),[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.modelValue,(a=>(e.openBlock(),e.createBlock("li",{key:a.key,class:["vue-tag",{selected:a.selected}]},[e.renderSlot(l.$slots,"default",{option:a},(()=>[e.createVNode("span",null,e.toDisplayString(a.label),1)]))],2)))),128))],16)},t.__file="src/components/tags.vue";var o={inheritAttrs:!1,name:"vue-dropdown",props:{modelValue:{required:!0,type:Array,validator:e=>e.every((e=>void 0!==typeof e.key&&void 0!==e.label&&"boolean"==typeof e.selected))},headerHeight:{required:!0,type:String}},emits:["click-item","mousemove"],setup:(l,a)=>({dataAttrs:e.inject("dataAttrs"),handleClickItem:(e,l)=>{l.disabled||a.emit("click-item",e,l)},handleMousemove:(e,l)=>{a.emit("mousemove",e,l)}})};o.render=function(l,a,t,o,n,u){return e.openBlock(),e.createBlock("ul",e.mergeProps({class:"vue-dropdown",onMousedown:a[1]||(a[1]=e.withModifiers((()=>{}),["prevent"])),style:{top:t.headerHeight}},o.dataAttrs),[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.modelValue,(a=>(e.openBlock(),e.createBlock(e.Fragment,{key:a.key},[a.visible&&!1===a.hidden?(e.openBlock(),e.createBlock("li",{key:0,onClick:e=>o.handleClickItem(e,a),class:["vue-dropdown-item",{selected:a.selected,disabled:a.disabled,highlighted:a.highlighted}],onMousemove:e.withModifiers((e=>o.handleMousemove(e,a)),["self"])},[e.renderSlot(l.$slots,"default",{option:a},(()=>[e.createVNode("span",null,e.toDisplayString(a.label),1)]))],42,["onClick","onMousemove"])):e.createCommentVNode("v-if",!0)],64)))),128))],16)},o.__file="src/components/dropdown.vue";const n=(e,l,{valueBy:a})=>a(e)===a(l),u=(e,l,{valueBy:a})=>e.some((e=>n(e,l,{valueBy:a}))),i=(e,l,{valueBy:a})=>e.find((e=>a(e)===l)),r=(e,l,{max:a,valueBy:t})=>u(e,l,{valueBy:t})||e.length>=a?e:e.concat(l),d=(e,l,{min:a,valueBy:t})=>!1===u(e,l,{valueBy:t})||e.length<=a?e:e.filter((e=>!1===n(e,l,{valueBy:t}))),c=l=>e.computed((()=>"function"==typeof l.value?l.value:"string"==typeof l.value?e=>l.value.split(".").reduce(((e,l)=>e[l]),e):e=>e));const s={name:"vue-select",inheritAttrs:!1,props:{modelValue:{required:!0},emptyModelValue:{default:null},options:{required:!0,type:Array},visibleOptions:{type:[Array,null],default:null},multiple:{default:!1,type:Boolean},min:{default:0,type:Number},max:{default:1/0,type:Number},closeOnSelect:{default:!1,type:Boolean},clearOnSelect:{default:!1,type:Boolean},trackBy:{type:[String,Function]},hideSelected:{default:!1,type:Boolean},labelBy:{type:[String,Function]},valueBy:{type:[String,Function]},disabledBy:{default:"disabled",type:[String,Function]},disabled:{default:!1,type:Boolean},loading:{default:!1,type:Boolean},placeholder:{default:"Select option",type:String},searchPlaceholder:{default:"Type to search",type:String},searchable:{default:!1,type:Boolean},clearOnClose:{default:!1,type:Boolean},taggable:{default:!1,type:Boolean},collapseTags:{default:!1,type:Boolean},tabindex:{default:0,type:Number},autofocus:{default:!1,type:Boolean}},emits:["update:modelValue","selected","removed","opened","closed","search:input","search:change","search:focus","search:blur"],setup(l,a){const{trackBy:t,labelBy:o,valueBy:n,disabledBy:s,min:p,max:v,options:h}=(l=>({trackBy:c(e.toRef(l,"trackBy")),labelBy:c(e.toRef(l,"labelBy")),valueBy:c(e.toRef(l,"valueBy")),disabledBy:c(e.toRef(l,"disabledBy")),min:e.computed((()=>l.multiple?l.min:Math.min(1,l.min))),max:e.computed((()=>l.multiple?l.max:1)),options:e.isRef(l.options)||e.isReactive(l.options)?e.toRef(l,"options"):e.ref(l.options)}))(l),m=e.getCurrentInstance(),g=e.ref(),f=e.ref(),y=e.computed((()=>f.value?._.refs.input)),b=e.ref(!1);e.watch((()=>b.value),(()=>{b.value?(a.emit("opened"),l.searchable?(y.value!==document.activeElement&&y.value.focus(),a.emit("search:focus")):g.value.focus()):(l.searchable?(y.value===document.activeElement&&y.value.blur(),l.clearOnClose&&E(),a.emit("search:blur")):g.value.blur(),a.emit("closed"))}));const w=()=>{l.disabled||(b.value=!0)},B=()=>{b.value=!1};e.watch((()=>l.disabled),(()=>B()));const I=e.ref(),V=(M=I,k=()=>l.modelValue,N=e.ref("0"),x=function(){e.nextTick((function(){M.value&&(N.value=window.getComputedStyle(M.value).height)}))},e.watch(k,x),e.onMounted(x),N);var M,k,N,x;const S=e.computed((()=>l.searchable&&l.multiple&&l.taggable?"22px":"0px")),C=e.computed((()=>parseFloat(V.value)+parseFloat(S.value)+"px")),F=e.ref(""),D=e.computed((()=>{const e=m.vnode.props["onSearch:input"]||m.vnode.props["onSearch:change"];return F.value&&!e?h.value.filter((e=>(o.value(e)+"").indexOf(F.value)>-1)):void 0})),O=e.ref([]),A=()=>{if(l.multiple){if(!1===Array.isArray(l.modelValue))return!1;if(O.value.length!==l.modelValue.length)return!1;if(Object.keys(O.value).some((e=>O.value[e]!==i(h.value,l.modelValue[e],{valueBy:n.value}))))return!1}else{if(0===O.value.length&&l.modelValue!==l.emptyModelValue)return!1;if(1===O.value.length&&l.modelValue===l.emptyModelValue)return!1;if(O.value[0]!==i(h.value,l.modelValue,{valueBy:n.value}))return!1}return!0},T=()=>{if(A())return;O.value=[];const e=l.multiple?l.modelValue:l.modelValue===l.emptyModelValue?[]:[l.modelValue];for(const l of e){const e=i(h.value,l,{valueBy:n.value});!1!==u(h.value,e,{valueBy:n.value})&&(O.value=r(O.value,e,{max:1/0,valueBy:n.value}))}};T(),e.watch((()=>l.modelValue),(()=>T()),{deep:!0});e.watch((()=>O),(()=>(()=>{if(A())return;const e=O.value.map((e=>n.value(e)));l.multiple?a.emit("update:modelValue",e):e.length?a.emit("update:modelValue",e[0]):a.emit("update:modelValue",l.emptyModelValue)})()),{deep:!0}),e.watch((()=>h.value),(()=>{const e=new Set(O.value.map((e=>n.value(e))));O.value=h.value.filter((l=>e.has(n.value(l))))}),{deep:!0});const E=()=>{y.value.value="",y.value.dispatchEvent(new Event("input")),y.value.dispatchEvent(new Event("change"))},L=e.computed((()=>l.visibleOptions??D.value??h.value)),z=e.ref(0),j=e.computed((()=>{const e=new Set(O.value.map((e=>n.value(e)))),a=new Set(L.value.map((e=>n.value(e))));return h.value.map(((u,i)=>({key:t.value(u),label:o.value(u),selected:e.has(n.value(u)),disabled:s.value(u),visible:a.has(n.value(u)),hidden:!!l.hideSelected&&e.has(n.value(u)),highlighted:i===z.value,originalIndex:i,originalOption:u})))})),{pointerForward:P,pointerBackward:R,pointerSet:_}=function(l,a){var t=function(e){var t=l.value.find((function(l){return l.originalIndex===e}));return void 0!==t&&!1!==o(t)&&(a.value=e,!0)},o=function(e){return!e.disabled&&!e.hidden&&e.visible},n=e.computed((function(){return l.value.some((function(e){return o(e)}))}));return e.watchEffect((function(){if(!1===n.value&&(a.value=null),null===a.value||!1===o(l.value[a.value]))for(var e=0,u=l.value;e({"data-is-focusing":b.value,"data-visible-length":j.value.filter((e=>e.visible&&!1===e.hidden)).length,"data-not-selected-length":h.value.length-j.value.filter((e=>e.selected)).length,"data-selected-length":j.value.filter((e=>e.selected)).length,"data-addable":j.value.filter((e=>e.selected)).lengthe.selected)).length>p.value,"data-total-length":h.value.length,"data-multiple":l.multiple})));e.provide("dataAttrs",Z);const W=e.computed((()=>{const e=j.value.filter((e=>e.selected));return l.multiple?0===e.length?l.placeholder:1===e.length?"1 option selected":e.length+" options selected":0===e.length?l.placeholder:e[0].label+""}));return{isFocusing:b,wrapper:g,input:f,focus:w,blur:B,toggle:()=>{b.value?B():w()},header:I,headerAndInputHeight:C,searchingInputValue:F,handleInputForInput:e=>{a.emit("search:input",e)},handleChangeForInput:e=>{a.emit("search:change",e)},handleFocusForInput:e=>{w()},handleBlurForInput:e=>{B()},optionsWithInfo:j,addOrRemoveOption:(e,t)=>{if(!l.disabled){if(t=t.originalOption,u(O.value,t,{valueBy:n.value}))O.value=d(O.value,t,{min:p.value,valueBy:n.value}),a.emit("removed",t);else{if(!l.multiple){const e=O.value[0];O.value=d(O.value,O.value[0],{min:0,valueBy:n.value}),a.emit("removed",e)}O.value=r(O.value,t,{max:v.value,valueBy:n.value}),a.emit("selected",t)}!0===l.closeOnSelect&&(b.value=!1),!0===l.clearOnSelect&&F.value&&E()}},dataAttrs:Z,innerPlaceholder:W,highlightedOriginalIndex:z,pointerForward:P,pointerBackward:R,pointerSet:_}},components:{VInput:l,VTags:t,VDropdown:o},__VERSION__:"1.3.4"};const p={ref:"header",class:"vue-select-header"},v={key:0,class:"vue-input"},h={class:"icon loading"},m=e.createVNode("div",null,null,-1),g=e.createVNode("div",null,null,-1),f=e.createVNode("div",null,null,-1),y={class:"icon loading"},b=e.createVNode("div",null,null,-1),w=e.createVNode("div",null,null,-1),B=e.createVNode("div",null,null,-1);return s.render=function(l,a,t,o,n,u){const i=e.resolveComponent("v-tags"),r=e.resolveComponent("v-input"),d=e.resolveComponent("v-dropdown");return e.openBlock(),e.createBlock("div",e.mergeProps({ref:"wrapper",class:["vue-select",{disabled:l.disabled}],tabindex:l.isFocusing?-1:l.tabindex,onFocus:a[10]||(a[10]=(...e)=>l.focus&&l.focus(...e)),onBlur:a[11]||(a[11]=()=>!l.searchable&&l.blur())},l.dataAttrs,{onKeypress:a[12]||(a[12]=e.withKeys((()=>null!==l.highlightedOriginalIndex&&l.addOrRemoveOption(l.$event,l.optionsWithInfo[l.highlightedOriginalIndex])),["enter"])),onKeydown:[a[13]||(a[13]=e.withKeys(e.withModifiers(((...e)=>l.pointerForward&&l.pointerForward(...e)),["prevent"]),["down"])),a[14]||(a[14]=e.withKeys(e.withModifiers(((...e)=>l.pointerBackward&&l.pointerBackward(...e)),["prevent"]),["up"]))]}),[e.createVNode("div",p,[l.multiple&&l.taggable&&0===l.modelValue.length||!1===l.searchable&&!1===l.taggable?(e.openBlock(),e.createBlock("div",v,[e.createVNode("input",{placeholder:l.innerPlaceholder,readonly:"",onClick:a[1]||(a[1]=(...e)=>l.focus&&l.focus(...e))},null,8,["placeholder"])])):e.createCommentVNode("v-if",!0),l.multiple&&l.taggable?(e.openBlock(),e.createBlock(e.Fragment,{key:1},[e.createVNode(i,{modelValue:l.optionsWithInfo,"collapse-tags":l.collapseTags,tabindex:"-1",onClick:l.focus},{default:e.withCtx((({option:a})=>[e.renderSlot(l.$slots,"tag",{option:a.originalOption},(()=>[e.createVNode("span",null,e.toDisplayString(a.label),1),e.createVNode("img",{src:"data:image/svg+xml;base64,PHN2ZyBpZD0iZGVsZXRlIiBkYXRhLW5hbWU9ImRlbGV0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPmRlbGV0ZTwvdGl0bGU+PHBhdGggZD0iTTI1NiwyNEMzODMuOSwyNCw0ODgsMTI4LjEsNDg4LDI1NlMzODMuOSw0ODgsMjU2LDQ4OCwyNC4wNiwzODMuOSwyNC4wNiwyNTYsMTI4LjEsMjQsMjU2LDI0Wk0wLDI1NkMwLDM5Ny4xNiwxMTQuODQsNTEyLDI1Niw1MTJTNTEyLDM5Ny4xNiw1MTIsMjU2LDM5Ny4xNiwwLDI1NiwwLDAsMTE0Ljg0LDAsMjU2WiIgZmlsbD0iIzViNWI1ZiIvPjxwb2x5Z29uIHBvaW50cz0iMzgyIDE3Mi43MiAzMzkuMjkgMTMwLjAxIDI1NiAyMTMuMjkgMTcyLjcyIDEzMC4wMSAxMzAuMDEgMTcyLjcyIDIxMy4yOSAyNTYgMTMwLjAxIDMzOS4yOCAxNzIuNzIgMzgyIDI1NiAyOTguNzEgMzM5LjI5IDM4MS45OSAzODIgMzM5LjI4IDI5OC43MSAyNTYgMzgyIDE3Mi43MiIgZmlsbD0iIzViNWI1ZiIvPjwvc3ZnPg==",alt:"delete tag",class:"icon delete",onClick:e.withModifiers((()=>l.addOrRemoveOption(l.$event,a)),["prevent","stop"])},null,8,["onClick"])]))])),_:1},8,["modelValue","collapse-tags","onClick"]),e.createVNode("span",{class:["icon arrow-downward",{active:l.isFocusing}],onClick:a[2]||(a[2]=(...e)=>l.toggle&&l.toggle(...e)),onMousedown:a[3]||(a[3]=e.withModifiers((()=>{}),["prevent","stop"]))},null,34)],64)):(e.openBlock(),e.createBlock(e.Fragment,{key:2},[l.searchable?(e.openBlock(),e.createBlock(r,{key:0,ref:"input",modelValue:l.searchingInputValue,"onUpdate:modelValue":a[4]||(a[4]=e=>l.searchingInputValue=e),disabled:l.disabled,placeholder:l.isFocusing?l.searchPlaceholder:l.innerPlaceholder,onInput:l.handleInputForInput,onChange:l.handleChangeForInput,onFocus:l.handleFocusForInput,onBlur:l.handleBlurForInput,onEscape:l.blur,autofocus:l.autofocus||l.taggable&&l.searchable,tabindex:l.tabindex},null,8,["modelValue","disabled","placeholder","onInput","onChange","onFocus","onBlur","onEscape","autofocus","tabindex"])):e.createCommentVNode("v-if",!0),e.withDirectives(e.createVNode("span",h,[m,g,f],512),[[e.vShow,l.loading]]),e.withDirectives(e.createVNode("span",{class:["icon arrow-downward",{active:l.isFocusing}],onClick:a[5]||(a[5]=(...e)=>l.toggle&&l.toggle(...e)),onMousedown:a[6]||(a[6]=e.withModifiers((()=>{}),["prevent","stop"]))},null,34),[[e.vShow,!1===l.loading]])],64))],512),l.multiple&&l.taggable&&l.searchable?e.withDirectives((e.openBlock(),e.createBlock(r,{key:0,ref:"input",modelValue:l.searchingInputValue,"onUpdate:modelValue":a[7]||(a[7]=e=>l.searchingInputValue=e),disabled:l.disabled,placeholder:l.searchPlaceholder,onInput:l.handleInputForInput,onChange:l.handleChangeForInput,onFocus:l.handleFocusForInput,onBlur:l.handleBlurForInput,onEscape:l.blur,tabindex:l.tabindex,autofocus:l.autofocus||l.taggable&&l.searchable},{append:e.withCtx((()=>[e.withDirectives(e.createVNode("span",y,[b,w,B],512),[[e.vShow,l.loading]])])),_:1},8,["modelValue","disabled","placeholder","onInput","onChange","onFocus","onBlur","onEscape","tabindex","autofocus"])),[[e.vShow,l.isFocusing]]):e.createCommentVNode("v-if",!0),e.withDirectives(e.createVNode(d,{modelValue:l.optionsWithInfo,"onUpdate:modelValue":a[8]||(a[8]=e=>l.optionsWithInfo=e),onClickItem:l.addOrRemoveOption,onMousemove:a[9]||(a[9]=(e,a)=>l.pointerSet(a.originalIndex)),"header-height":l.headerAndInputHeight},{default:e.withCtx((({option:a})=>[e.renderSlot(l.$slots,"dropdown-item",{option:a.originalOption},(()=>[e.createVNode("span",null,e.toDisplayString(a.label),1)]))])),_:1},8,["modelValue","onClickItem","header-height"]),[[e.vShow,l.isFocusing]])],16,["tabindex"])},s.__file="src/index.vue",s}(Vue); +this.VueNextSelect = (function (e) { + 'use strict'; + function t(e) { + return (t = + 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator + ? function (e) { + return typeof e; + } + : function (e) { + return e && 'function' == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype + ? 'symbol' + : typeof e; + })(e); + } + function n(e) { + return ( + (function (e) { + if (Array.isArray(e)) return a(e); + })(e) || + (function (e) { + if (('undefined' != typeof Symbol && null != e[Symbol.iterator]) || null != e['@@iterator']) + return Array.from(e); + })(e) || + o(e) || + (function () { + throw new TypeError( + 'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.' + ); + })() + ); + } + function o(e, t) { + if (e) { + if ('string' == typeof e) return a(e, t); + var n = Object.prototype.toString.call(e).slice(8, -1); + return ( + 'Object' === n && e.constructor && (n = e.constructor.name), + 'Map' === n || 'Set' === n + ? Array.from(e) + : 'Arguments' === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) + ? a(e, t) + : void 0 + ); + } + } + function a(e, t) { + (null == t || t > e.length) && (t = e.length); + for (var n = 0, o = new Array(t); n < t; n++) o[n] = e[n]; + return o; + } + function l(e, t) { + var n = ('undefined' != typeof Symbol && e[Symbol.iterator]) || e['@@iterator']; + if (!n) { + if (Array.isArray(e) || (n = o(e)) || (t && e && 'number' == typeof e.length)) { + n && (e = n); + var a = 0, + l = function () {}; + return { + s: l, + n: function () { + return a >= e.length ? { done: !0 } : { done: !1, value: e[a++] }; + }, + e: function (e) { + throw e; + }, + f: l, + }; + } + throw new TypeError( + 'Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.' + ); + } + var r, + u = !0, + i = !1; + return { + s: function () { + n = n.call(e); + }, + n: function () { + var e = n.next(); + return (u = e.done), e; + }, + e: function (e) { + (i = !0), (r = e); + }, + f: function () { + try { + u || null == n.return || n.return(); + } finally { + if (i) throw r; + } + }, + }; + } + var r = { + inheritAttrs: !1, + name: 'vue-input', + props: { + autocomplete: { required: !1, type: String }, + modelValue: { required: !0, type: String }, + placeholder: { required: !0, type: String }, + disabled: { required: !0, type: Boolean }, + tabindex: { required: !0, type: Number }, + autofocus: { required: !0, type: Boolean }, + comboboxUid: { required: !0, type: Number }, + }, + emits: ['update:modelValue', 'input', 'change', 'focus', 'blur', 'escape'], + setup: function (t, n) { + var o = e.ref(null); + return ( + e.onMounted(function () { + t.autofocus && o.value.focus(); + }), + e.onUpdated(function () { + t.autofocus && o.value.focus(); + }), + { + handleInput: function (e) { + n.emit('input', e), n.emit('update:modelValue', e.target.value); + }, + handleChange: function (e) { + n.emit('change', e), n.emit('update:modelValue', e.target.value); + }, + handleFocus: function (e) { + n.emit('focus', e); + }, + handleBlur: function (e) { + n.emit('blur', e); + }, + input: o, + handleEscape: function (e) { + o.value.blur(), n.emit('escape', e); + }, + } + ); + }, + }, + u = { class: 'vue-input' }, + i = [ + 'autocomplete', + 'modelValue', + 'placeholder', + 'disabled', + 'tabindex', + 'autofocus', + 'aria-controls', + 'aria-labelledby', + ]; + (r.render = function (t, n, o, a, l, r) { + return ( + e.openBlock(), + e.createElementBlock('div', u, [ + e.renderSlot(t.$slots, 'prepend'), + e.createElementVNode( + 'input', + { + ref: 'input', + autocomplete: o.autocomplete, + modelValue: o.modelValue, + placeholder: o.placeholder, + disabled: o.disabled, + onInput: + n[0] || + (n[0] = function () { + return a.handleInput && a.handleInput.apply(a, arguments); + }), + onChange: + n[1] || + (n[1] = function () { + return a.handleChange && a.handleChange.apply(a, arguments); + }), + onFocus: + n[2] || + (n[2] = function () { + return a.handleFocus && a.handleFocus.apply(a, arguments); + }), + onBlur: + n[3] || + (n[3] = function () { + return a.handleBlur && a.handleBlur.apply(a, arguments); + }), + onKeyup: + n[4] || + (n[4] = e.withKeys( + e.withModifiers( + function () { + return a.handleEscape && a.handleEscape.apply(a, arguments); + }, + ['exact'] + ), + ['esc'] + )), + tabindex: o.tabindex, + autofocus: o.autofocus, + 'aria-autocomplete': 'list', + 'aria-controls': 'vs'.concat(o.comboboxUid, '-listbox'), + 'aria-labelledby': 'vs'.concat(o.comboboxUid, '-combobox'), + }, + null, + 40, + i + ), + e.renderSlot(t.$slots, 'append'), + ]) + ); + }), + (r.__file = 'src/components/input.vue'); + var c = { + inheritAttrs: !1, + name: 'vue-tags', + props: { + modelValue: { + required: !0, + type: Array, + validator: function (e) { + return e.every(function (e) { + return void 0 !== t(e.key) && void 0 !== e.label && 'boolean' == typeof e.selected; + }); + }, + }, + collapseTags: { type: Boolean }, + }, + emits: ['click'], + setup: function (t, n) { + return { + dataAttrs: e.inject('dataAttrs'), + handleClick: function (e) { + n.emit('click', e); + }, + }; + }, + }; + (c.render = function (t, n, o, a, l, r) { + return ( + e.openBlock(), + e.createElementBlock( + 'ul', + e.mergeProps( + { + class: ['vue-tags', { collapsed: o.collapseTags }], + onMousedown: n[0] || (n[0] = e.withModifiers(function () {}, ['prevent'])), + tabindex: '-1', + onClick: + n[1] || + (n[1] = function () { + return a.handleClick && a.handleClick.apply(a, arguments); + }), + }, + a.dataAttrs + ), + [ + (e.openBlock(!0), + e.createElementBlock( + e.Fragment, + null, + e.renderList(o.modelValue, function (n) { + return ( + e.openBlock(), + e.createElementBlock( + e.Fragment, + { key: n.key }, + [ + n.group + ? e.createCommentVNode('v-if', !0) + : (e.openBlock(), + e.createElementBlock( + 'li', + { + key: 0, + class: e.normalizeClass(['vue-tag', { selected: n.selected }]), + }, + [ + e.renderSlot(t.$slots, 'default', { option: n }, function () { + return [ + e.createElementVNode( + 'span', + null, + e.toDisplayString(n.label), + 1 + ), + ]; + }), + ], + 2 + )), + ], + 64 + ) + ); + }), + 128 + )), + ], + 16 + ) + ); + }), + (c.__file = 'src/components/tags.vue'); + var d = { + inheritAttrs: !1, + name: 'vue-dropdown', + props: { + modelValue: { + required: !0, + type: Array, + validator: function (e) { + return e.every(function (e) { + return void 0 !== t(e.key) && void 0 !== e.label && 'boolean' == typeof e.selected; + }); + }, + }, + comboboxUid: { required: !0, type: Number }, + maxHeight: { required: !0 }, + highlightedOriginalIndex: { required: !0 }, + }, + emits: ['click-item', 'mouseenter'], + setup: function (t, n) { + return { + dataAttrs: e.inject('dataAttrs'), + handleClickItem: function (e, t) { + t.disabled || n.emit('click-item', e, t); + }, + handleMouseenter: function (e, t) { + n.emit('mouseenter', e, t); + }, + }; + }, + }, + s = ['id', 'aria-multiselectable', 'aria-busy', 'aria-disabled'], + p = ['onClick', 'onMouseenter', 'id', 'aria-selected', 'aria-disabled']; + (d.render = function (t, n, o, a, l, r) { + return ( + e.openBlock(), + e.createElementBlock( + 'ul', + e.mergeProps( + { + class: 'vue-dropdown', + style: { maxHeight: o.maxHeight + 'px' }, + onMousedown: n[0] || (n[0] = e.withModifiers(function () {}, ['prevent'])), + }, + a.dataAttrs, + { + role: 'listbox', + id: 'vs'.concat(o.comboboxUid, '-listbox'), + 'aria-multiselectable': a.dataAttrs['data-multiple'], + 'aria-busy': a.dataAttrs['data-loading'], + 'aria-disabled': a.dataAttrs['data-disabled'], + } + ), + [ + (e.openBlock(!0), + e.createElementBlock( + e.Fragment, + null, + e.renderList(o.modelValue, function (n, l) { + return ( + e.openBlock(), + e.createElementBlock( + e.Fragment, + { key: n.key }, + [ + n.visible && !1 === n.hidden + ? (e.openBlock(), + e.createElementBlock( + 'li', + { + key: 0, + onClick: function (e) { + return a.handleClickItem(e, n); + }, + class: e.normalizeClass([ + 'vue-dropdown-item', + { + selected: n.selected, + disabled: n.disabled, + highlighted: + n.originalIndex === o.highlightedOriginalIndex, + group: n.group, + }, + ]), + onMouseenter: function (e) { + return a.handleMouseenter(e, n); + }, + role: 'option', + id: 'vs'.concat(o.comboboxUid, '-option-').concat(l), + 'aria-selected': !!n.selected || (!!n.disabled && void 0), + 'aria-disabled': n.disabled, + }, + [ + e.renderSlot(t.$slots, 'default', { option: n }, function () { + return [ + e.createElementVNode( + 'span', + null, + e.toDisplayString(n.label), + 1 + ), + ]; + }), + ], + 42, + p + )) + : e.createCommentVNode('v-if', !0), + ], + 64 + ) + ); + }), + 128 + )), + ], + 16, + s + ) + ); + }), + (d.__file = 'src/components/dropdown.vue'); + var v = function (e, t, n) { + var o = n.valueBy; + return o(e) === o(t); + }, + f = function (e, t, n) { + var o = n.valueBy; + return e.some(function (e) { + return v(e, t, { valueBy: o }); + }); + }, + m = function (e, t, n) { + var o = n.valueBy; + return e.find(function (e) { + return o(e) === t; + }); + }, + g = function (e, t, n) { + var o = n.max, + a = n.valueBy; + return f(e, t, { valueBy: a }) || e.length >= o ? e : e.concat(t); + }, + h = function (e, t, n) { + var o = n.min, + a = n.valueBy; + return !1 === f(e, t, { valueBy: a }) || e.length <= o + ? e + : e.filter(function (e) { + return !1 === v(e, t, { valueBy: a }); + }); + }, + y = function (t) { + return e.computed(function () { + return 'function' == typeof t.value + ? t.value + : 'string' == typeof t.value + ? function (e) { + return t.value.split('.').reduce(function (e, t) { + return e[t]; + }, e); + } + : function (e) { + return e; + }; + }); + }, + b = function (t, n) { + var o = e.computed(function () { + return t.value.reduce(function (e, t) { + return Object.assign( + e, + ((n = {}), + (o = t.originalIndex), + (a = t), + o in n + ? Object.defineProperty(n, o, { + value: a, + enumerable: !0, + configurable: !0, + writable: !0, + }) + : (n[o] = a), + n) + ); + var n, o, a; + }, {}); + }), + a = function (e) { + var t = o.value[e]; + return void 0 !== t && !1 !== r(t) && ((n.value = e), !0); + }, + r = function (e) { + return !e.disabled && !e.hidden && e.visible; + }, + u = e.computed(function () { + return t.value.some(function (e) { + return r(e); + }); + }); + return ( + e.watchEffect(function () { + if ((!1 === u.value && (n.value = null), null !== n.value && t.value.length <= n.value)) { + var e, + o = l(t.value.reverse()); + try { + for (o.s(); !(e = o.n()).done; ) { + var i = e.value; + if (a(i.originalIndex)) break; + } + } catch (e) { + o.e(e); + } finally { + o.f(); + } + } + if (null === n.value || !1 === r(t.value[n.value])) { + var c, + d = l(t.value); + try { + for (d.s(); !(c = d.n()).done; ) { + var s = c.value; + if (a(s.originalIndex)) break; + } + } catch (e) { + d.e(e); + } finally { + d.f(); + } + } + }), + { + pointerForward: function () { + if (!1 !== u.value && null !== n.value) + for ( + var e = n.value + 1, o = 0; + e !== n.value && o++ < t.value.length && (t.value.length <= e && (e = 0), !a(e)); + + ) + ++e; + }, + pointerBackward: function () { + if (!1 !== u.value && null !== n.value) + for ( + var e = n.value - 1, o = 0; + e !== n.value && o++ < t.value.length && (e < 0 && (e = t.value.length - 1), !a(e)); + + ) + --e; + }, + pointerSet: a, + } + ); + }; + var B = e.defineComponent({ + name: 'vue-select', + inheritAttrs: !1, + props: { + modelValue: { required: !0 }, + emptyModelValue: {}, + options: { required: !0, type: Array }, + labelBy: { type: [String, Function] }, + valueBy: { type: [String, Function] }, + disabledBy: { default: 'disabled', type: [String, Function] }, + groupBy: { default: 'group', type: [String, Function] }, + visibleOptions: { type: Array, default: null }, + multiple: { default: !1, type: Boolean }, + min: { default: 0, type: Number }, + max: { default: 1 / 0, type: Number }, + searchable: { default: !1, type: Boolean }, + searchPlaceholder: { default: 'Type to search', type: String }, + clearOnSelect: { default: !1, type: Boolean }, + clearOnClose: { default: !1, type: Boolean }, + taggable: { default: !1, type: Boolean }, + collapseTags: { default: !1, type: Boolean }, + autocomplete: { default: 'off', type: String }, + disabled: { default: !1, type: Boolean }, + loading: { default: !1, type: Boolean }, + closeOnSelect: { default: !1, type: Boolean }, + hideSelected: { default: !1, type: Boolean }, + placeholder: { default: 'Select option', type: String }, + tabindex: { default: 0, type: Number }, + autofocus: { default: !1, type: Boolean }, + maxHeight: { default: 300, type: Number }, + openDirection: { + type: String, + validator: function (e) { + return ['top', 'bottom'].includes(e); + }, + }, + }, + emits: [ + 'selected', + 'removed', + 'update:modelValue', + 'focus', + 'blur', + 'toggle', + 'opened', + 'closed', + 'search:input', + 'search:change', + 'search:focus', + 'search:blur', + ], + setup: function (t, o) { + var a = (function (t) { + var n = e.reactive({}), + o = y(e.toRef(t, 'labelBy')); + e.watchEffect(function () { + return (n.labelBy = o.value); + }); + var a = y(e.toRef(t, 'valueBy')); + e.watchEffect(function () { + return (n.valueBy = a.value); + }); + var l = y(e.toRef(t, 'disabledBy')); + e.watchEffect(function () { + return (n.disabledBy = l.value); + }); + var r = y(e.toRef(t, 'groupBy')); + e.watchEffect(function () { + return (n.groupBy = r.value); + }); + var u = e.computed(function () { + return t.multiple ? t.min : Math.min(1, t.min); + }); + e.watchEffect(function () { + return (n.min = u.value); + }); + var i = e.computed(function () { + return t.multiple ? t.max : 1; + }); + return ( + e.watchEffect(function () { + return (n.max = i.value); + }), + e.watchEffect(function () { + return (n.options = t.options); + }), + n + ); + })(t), + r = e.computed(function () { + var e; + return null !== (e = t.emptyModelValue) && void 0 !== e ? e : null; + }), + u = e.getCurrentInstance(), + i = e.ref(), + c = e.ref(), + d = e.ref(), + s = e.computed(function () { + var e; + return null === (e = d.value) || void 0 === e ? void 0 : e._.refs.input; + }), + p = e.ref(!1); + e.watch( + function () { + return p.value; + }, + function () { + p.value + ? (o.emit('opened'), + o.emit('focus'), + t.searchable + ? (s.value !== document.activeElement && s.value.focus(), o.emit('search:focus')) + : i.value.focus()) + : (t.searchable + ? (s.value === document.activeElement && s.value.blur(), + t.clearOnClose && C(), + o.emit('search:blur')) + : i.value.blur(), + o.emit('closed'), + o.emit('blur')), + o.emit('toggle'); + } + ); + var v = function () { + t.disabled || (p.value = !0); + }, + B = function (e) { + i.value.contains(null == e ? void 0 : e.relatedTarget) + ? setTimeout(function () { + i.value.focus(); + }) + : (p.value = !1); + }; + e.watch( + function () { + return t.disabled; + }, + function () { + return B(); + } + ); + var w = e.ref(''), + I = e.computed(function () { + return new RegExp(w.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i'); + }), + x = e.computed(function () { + return w.value + ? a.options.filter(function (e) { + return I.value.test(a.labelBy(e)); + }) + : void 0; + }), + k = e.ref([]), + V = e.computed(function () { + return new Set( + k.value.map(function (e) { + return a.valueBy(e); + }) + ); + }), + M = function () { + if (t.multiple) { + if (!1 === Array.isArray(t.modelValue)) return !1; + if (k.value.length !== t.modelValue.length) return !1; + if ( + Object.keys(k.value).some(function (e) { + return k.value[e] !== m(a.options, t.modelValue[e], { valueBy: a.valueBy }); + }) + ) + return !1; + } else { + if (0 === k.value.length && t.modelValue !== r.value) return !1; + if (1 === k.value.length && t.modelValue === r.value) return !1; + if (k.value[0] !== m(a.options, t.modelValue, { valueBy: a.valueBy })) return !1; + } + return !0; + }, + E = function () { + if (!M()) { + k.value = []; + var e, + n = l(t.multiple ? t.modelValue : t.modelValue === r.value ? [] : [t.modelValue]); + try { + for (n.s(); !(e = n.n()).done; ) { + var o = e.value, + u = m(a.options, o, { valueBy: a.valueBy }); + !1 !== f(a.options, u, { valueBy: a.valueBy }) && + (k.value = g(k.value, u, { max: 1 / 0, valueBy: a.valueBy })); + } + } catch (e) { + n.e(e); + } finally { + n.f(); + } + } + }; + E(), + e.watch( + function () { + return t.modelValue; + }, + function () { + return E(); + }, + { deep: !0 } + ), + e.watch( + function () { + return a.options; + }, + function () { + k.value = a.options.filter(function (e) { + return V.value.has(a.valueBy(e)); + }); + }, + { deep: !0 } + ); + var S, + N = function (e, t) { + (t = t.originalOption).value.every(function (e) { + var t = m(a.options, e, { valueBy: a.valueBy }); + return f(k.value, t, { valueBy: a.valueBy }); + }) + ? t.value.forEach(function (e) { + var t = m(a.options, e, { valueBy: a.valueBy }); + (k.value = h(k.value, t, { min: a.min, valueBy: a.valueBy })), o.emit('removed', t); + }) + : t.value.forEach(function (e) { + var t = m(a.options, e, { valueBy: a.valueBy }); + f(k.value, t, { valueBy: a.valueBy }) || + ((k.value = g(k.value, t, { max: a.max, valueBy: a.valueBy })), + o.emit('selected', t)); + }); + }, + F = function (e, n) { + if (((n = n.originalOption), f(k.value, n, { valueBy: a.valueBy }))) + (k.value = h(k.value, n, { min: a.min, valueBy: a.valueBy })), o.emit('removed', n); + else { + if (!t.multiple && 1 === k.value.length) { + var l = k.value[0]; + (k.value = h(k.value, k.value[0], { min: 0, valueBy: a.valueBy })), o.emit('removed', l); + } + (k.value = g(k.value, n, { max: a.max, valueBy: a.valueBy })), o.emit('selected', n); + } + }, + O = function () { + if (!M()) { + var e = k.value.map(function (e) { + return a.valueBy(e); + }); + t.multiple + ? o.emit('update:modelValue', e) + : e.length + ? o.emit('update:modelValue', e[0]) + : o.emit('update:modelValue', r.value); + } + }, + C = function () { + (s.value.value = ''), + s.value.dispatchEvent(new Event('input')), + s.value.dispatchEvent(new Event('change')); + }, + A = e.computed(function () { + var e, n; + return null !== (n = null !== (e = t.visibleOptions) && void 0 !== e ? e : x.value) && void 0 !== n + ? n + : a.options; + }), + T = e.ref(0), + D = e.computed(function () { + var e, + n = new Set( + A.value.map(function (e) { + return a.valueBy(e); + }) + ), + o = a.options.map(function (e, o) { + var l = { + key: a.valueBy(e), + label: a.labelBy(e), + group: a.groupBy(e), + originalIndex: o, + originalOption: e, + }; + return ( + (l.selected = l.group + ? e.value.every(function (e) { + return V.value.has(e); + }) + : V.value.has(a.valueBy(e))), + (l.disabled = l.group + ? a.disabledBy(e) || + e.value.every(function (e) { + var t = m(a.options, e, { valueBy: a.valueBy }); + return a.disabledBy(t); + }) + : a.disabledBy(e)), + (l.visible = l.group + ? e.value.some(function (e) { + return n.has(e); + }) + : n.has(a.valueBy(e))), + (l.hidden = + !!t.hideSelected && + (l.group + ? e.value.every(function (e) { + return V.value.has(e); + }) + : V.value.has(a.valueBy(e)))), + l + ); + }), + r = l(o); + try { + for (r.s(); !(e = r.n()).done; ) { + var u = e.value; + !1 !== u.group && + u.disabled && + (function () { + var e = new Set(u.originalOption.value); + o.filter(function (t) { + return e.has(a.valueBy(t.originalOption)); + }).forEach(function (e) { + return (e.disabled = !0); + }); + })(); + } + } catch (e) { + r.e(e); + } finally { + r.f(); + } + return o; + }), + L = b(D, T), + j = L.pointerForward, + z = L.pointerBackward, + $ = L.pointerSet, + U = '', + P = /^[\w]$/, + R = e.computed(function () { + var e = n(a.options.keys()); + return e.slice(T.value).concat(e.slice(0, T.value)); + }), + q = function () { + var e, + t = null === (e = i.value) || void 0 === e ? void 0 : e.querySelector('.highlighted'); + if (t && c.value) { + var n, + o = getComputedStyle(t); + for ( + n = 0; + t.offsetTop + + parseFloat(o.height) + + parseFloat(o.paddingTop) + + parseFloat(o.paddingBottom) > + c.value.$el.clientHeight + c.value.$el.scrollTop && n++ < D.value.length; + + ) + c.value.$el.scrollTop = + c.value.$el.scrollTop + + parseFloat(o.height) + + parseFloat(o.paddingTop) + + parseFloat(o.paddingBottom); + for (n = 0; t.offsetTop < c.value.$el.scrollTop && n++ < D.value.length; ) + c.value.$el.scrollTop = + c.value.$el.scrollTop - + parseFloat(o.height) - + parseFloat(o.paddingTop) - + parseFloat(o.paddingBottom); + } + }; + e.watch( + function () { + return [p.value, a.options, V.value]; + }, + function (t, n) { + !0 !== (null == n ? void 0 : n[0]) && + !1 !== p.value && + 0 !== k.value.length && + ($( + a.options.findIndex(function (e) { + return V.value.has(a.valueBy(e)); + }) + ), + e.nextTick(q)); + }, + { deep: !0, immediate: !0 } + ); + var H = e.computed(function () { + return { + 'data-is-focusing': p.value, + 'data-visible-length': D.value.filter(function (e) { + return e.visible && !1 === e.hidden; + }).length, + 'data-not-selected-length': + a.options.length - + D.value.filter(function (e) { + return e.selected; + }).length, + 'data-selected-length': D.value.filter(function (e) { + return e.selected; + }).length, + 'data-addable': + D.value.filter(function (e) { + return e.selected; + }).length < a.max, + 'data-removable': + D.value.filter(function (e) { + return e.selected; + }).length > a.min, + 'data-total-length': a.options.length, + 'data-multiple': t.multiple, + 'data-loading': t.loading, + 'data-disabled': t.disabled, + }; + }); + e.provide('dataAttrs', H); + var _ = e.computed(function () { + return D.value + .filter(function (e) { + return e.selected; + }) + .filter(function (e) { + return !e.group; + }); + }), + W = e.computed(function () { + return t.multiple + ? 0 === _.value.length + ? t.placeholder + : 1 === _.value.length + ? '1 option selected' + : _.value.length + ' options selected' + : 0 === _.value.length + ? t.placeholder + : _.value[0].label + ''; + }), + Z = e.computed(function () { + var e = _.value.map(function (e) { + return e.originalOption; + }); + return t.multiple ? e : e[0] || r.value; + }), + K = e.ref(); + return ( + e.watch( + function () { + return [t.openDirection, p.value]; + }, + function () { + var e, n; + K.value = + null !== + (n = + null !== (e = t.openDirection) && void 0 !== e + ? e + : (function () { + if (void 0 === i.value) return; + if (void 0 === window) return; + return window.innerHeight - i.value.getBoundingClientRect().bottom >= + t.maxHeight + ? 'bottom' + : 'top'; + })()) && void 0 !== n + ? n + : 'bottom'; + }, + { immediate: !0 } + ), + { + instance: u, + isFocusing: p, + wrapper: i, + dropdown: c, + input: d, + focus: v, + blur: B, + toggle: function () { + p.value ? B() : v(); + }, + searchingInputValue: w, + handleInputForInput: function (e) { + o.emit('search:input', e); + }, + handleChangeForInput: function (e) { + o.emit('search:change', e); + }, + handleFocusForInput: function (e) { + v(); + }, + handleBlurForInput: function (e) { + B(); + }, + optionsWithInfo: D, + addOrRemoveOption: function (e, n) { + t.disabled || + (n.group && t.multiple ? N(e, n) : F(e, n), + O(), + !0 === t.closeOnSelect && (p.value = !1), + !0 === t.clearOnSelect && w.value && C()); + }, + dataAttrs: H, + innerPlaceholder: W, + selected: Z, + highlightedOriginalIndex: T, + pointerForward: function () { + j(), e.nextTick(q); + }, + pointerBackward: function () { + z(), e.nextTick(q); + }, + pointerFirst: function () { + var t, + n = l(a.options.keys()); + try { + for (n.s(); !(t = n.n()).done; ) { + var o = t.value; + if ($(o)) break; + } + } catch (e) { + n.e(e); + } finally { + n.f(); + } + e.nextTick(q); + }, + pointerLast: function () { + var t, + o = l(n(a.options.keys()).reverse()); + try { + for (o.s(); !(t = o.n()).done; ) { + var r = t.value; + if ($(r)) break; + } + } catch (e) { + o.e(e); + } finally { + o.f(); + } + e.nextTick(q); + }, + typeAhead: function (e) { + var n, o; + if (!t.searchable) { + var r = !1; + if ( + (P.test(e.key) + ? ((U += e.key.toLowerCase()), (r = !0)) + : 'Space' === e.code && (U += ' '), + r) + ) { + var u, + i = l(R.value); + try { + for (i.s(); !(u = i.n()).done; ) { + var c = u.value; + if ( + !0 === + (null === + (o = + null === (n = a.labelBy(a.options[c])) || void 0 === n + ? void 0 + : n.toLowerCase()) || void 0 === o + ? void 0 + : o.startsWith(U)) && + $(c) + ) + break; + } + } catch (e) { + i.e(e); + } finally { + i.f(); + } + clearTimeout(S), + (S = setTimeout(function () { + U = ''; + }, 500)); + } + } + }, + pointerSet: $, + direction: K, + } + ); + }, + components: { VInput: r, VTags: c, VDropdown: d }, + }); + B.__VERSION__ = '2.10.1'; + var w = [ + 'tabindex', + 'id', + 'role', + 'aria-expanded', + 'aria-owns', + 'aria-activedescendant', + 'aria-busy', + 'aria-disabled', + ], + I = { ref: 'header', class: 'vue-select-header' }, + x = { key: 0, class: 'vue-input' }, + k = ['placeholder', 'autocomplete'], + V = ['onClick'], + M = e.createElementVNode( + 'span', + { class: 'icon loading' }, + [e.createElementVNode('div'), e.createElementVNode('div'), e.createElementVNode('div')], + -1 + ), + E = { key: 0, class: 'vue-select-input-wrapper' }, + S = e.createElementVNode( + 'span', + { class: 'icon loading' }, + [e.createElementVNode('div'), e.createElementVNode('div'), e.createElementVNode('div')], + -1 + ); + return ( + (B.render = function (t, n, o, a, l, r) { + var u = e.resolveComponent('v-tags'), + i = e.resolveComponent('v-input'), + c = e.resolveComponent('v-dropdown'); + return ( + e.openBlock(), + e.createElementBlock( + 'div', + e.mergeProps( + { + ref: 'wrapper', + class: ['vue-select', ['direction-'.concat(t.direction)]], + tabindex: t.isFocusing ? -1 : t.tabindex, + onFocus: + n[9] || + (n[9] = function () { + return t.focus && t.focus.apply(t, arguments); + }), + onBlur: + n[10] || + (n[10] = function (e) { + return !t.searchable && t.blur(e); + }), + }, + Object.assign({}, t.dataAttrs, t.$attrs), + { + onKeypress: + n[11] || + (n[11] = e.withKeys( + e.withModifiers( + function () { + return ( + null !== t.highlightedOriginalIndex && + t.addOrRemoveOption( + t.$event, + t.optionsWithInfo[t.highlightedOriginalIndex] + ) + ); + }, + ['prevent', 'exact'] + ), + ['enter'] + )), + onKeydown: [ + n[12] || + (n[12] = e.withKeys( + e.withModifiers( + function () { + return t.pointerForward && t.pointerForward.apply(t, arguments); + }, + ['prevent', 'exact'] + ), + ['down'] + )), + n[13] || + (n[13] = e.withKeys( + e.withModifiers( + function () { + return t.pointerBackward && t.pointerBackward.apply(t, arguments); + }, + ['prevent', 'exact'] + ), + ['up'] + )), + n[14] || + (n[14] = e.withKeys( + e.withModifiers( + function () { + return t.pointerFirst && t.pointerFirst.apply(t, arguments); + }, + ['prevent', 'exact'] + ), + ['home'] + )), + n[15] || + (n[15] = e.withKeys( + e.withModifiers( + function () { + return t.pointerLast && t.pointerLast.apply(t, arguments); + }, + ['prevent', 'exact'] + ), + ['end'] + )), + n[16] || + (n[16] = function () { + return t.typeAhead && t.typeAhead.apply(t, arguments); + }), + ], + id: 'vs'.concat(t.instance.uid, '-combobox'), + role: t.searchable ? 'combobox' : null, + 'aria-expanded': t.isFocusing, + 'aria-haspopup': 'listbox', + 'aria-owns': 'vs'.concat(t.instance.uid, '-listbox'), + 'aria-activedescendant': + null === t.highlightedOriginalIndex + ? null + : 'vs'.concat(t.instance.uid, '-option-').concat(t.highlightedOriginalIndex), + 'aria-busy': t.loading, + 'aria-disabled': t.disabled, + } + ), + [ + e.createElementVNode( + 'div', + I, + [ + (t.multiple && t.taggable && 0 === t.modelValue.length) || + (!1 === t.searchable && !1 === t.taggable) + ? (e.openBlock(), + e.createElementBlock('div', x, [ + e.renderSlot(t.$slots, 'label', { selected: t.selected }, function () { + return [ + e.createElementVNode( + 'input', + { + placeholder: t.innerPlaceholder, + autocomplete: t.autocomplete, + readonly: '', + onClick: + n[0] || + (n[0] = function () { + return t.focus && t.focus.apply(t, arguments); + }), + }, + null, + 8, + k + ), + ]; + }), + ])) + : e.createCommentVNode('v-if', !0), + t.multiple && t.taggable + ? (e.openBlock(), + e.createElementBlock( + e.Fragment, + { key: 1 }, + [ + e.createVNode( + u, + { + modelValue: t.optionsWithInfo, + 'collapse-tags': t.collapseTags, + tabindex: '-1', + onClick: t.focus, + }, + { + default: e.withCtx(function (n) { + var o = n.option; + return [ + e.renderSlot( + t.$slots, + 'tag', + { + option: o.originalOption, + remove: function () { + return t.addOrRemoveOption(t.$event, o); + }, + }, + function () { + return [ + e.createElementVNode( + 'span', + null, + e.toDisplayString(o.label), + 1 + ), + e.createElementVNode( + 'img', + { + src: 'data:image/svg+xml;base64,PHN2ZyBpZD0iZGVsZXRlIiBkYXRhLW5hbWU9ImRlbGV0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPmRlbGV0ZTwvdGl0bGU+PHBhdGggZD0iTTI1NiwyNEMzODMuOSwyNCw0ODgsMTI4LjEsNDg4LDI1NlMzODMuOSw0ODgsMjU2LDQ4OCwyNC4wNiwzODMuOSwyNC4wNiwyNTYsMTI4LjEsMjQsMjU2LDI0Wk0wLDI1NkMwLDM5Ny4xNiwxMTQuODQsNTEyLDI1Niw1MTJTNTEyLDM5Ny4xNiw1MTIsMjU2LDM5Ny4xNiwwLDI1NiwwLDAsMTE0Ljg0LDAsMjU2WiIgZmlsbD0iIzViNWI1ZiIvPjxwb2x5Z29uIHBvaW50cz0iMzgyIDE3Mi43MiAzMzkuMjkgMTMwLjAxIDI1NiAyMTMuMjkgMTcyLjcyIDEzMC4wMSAxMzAuMDEgMTcyLjcyIDIxMy4yOSAyNTYgMTMwLjAxIDMzOS4yOCAxNzIuNzIgMzgyIDI1NiAyOTguNzEgMzM5LjI5IDM4MS45OSAzODIgMzM5LjI4IDI5OC43MSAyNTYgMzgyIDE3Mi43MiIgZmlsbD0iIzViNWI1ZiIvPjwvc3ZnPg==', + alt: 'delete tag', + class: 'icon delete', + onClick: e.withModifiers( + function () { + return t.addOrRemoveOption( + t.$event, + o + ); + }, + ['prevent', 'stop'] + ), + }, + null, + 8, + V + ), + ]; + } + ), + ]; + }), + _: 3, + }, + 8, + ['modelValue', 'collapse-tags', 'onClick'] + ), + e.renderSlot( + t.$slots, + 'toggle', + { isFocusing: t.isFocusing, toggle: t.toggle }, + function () { + return [ + e.createElementVNode( + 'span', + { + class: e.normalizeClass([ + 'icon arrow-downward', + { active: t.isFocusing }, + ]), + onClick: + n[1] || + (n[1] = function () { + return ( + t.toggle && t.toggle.apply(t, arguments) + ); + }), + onMousedown: + n[2] || + (n[2] = e.withModifiers(function () {}, [ + 'prevent', + 'stop', + ])), + }, + null, + 34 + ), + ]; + } + ), + ], + 64 + )) + : (e.openBlock(), + e.createElementBlock( + e.Fragment, + { key: 2 }, + [ + t.searchable + ? (e.openBlock(), + e.createBlock( + i, + { + key: 0, + ref: 'input', + modelValue: t.searchingInputValue, + 'onUpdate:modelValue': + n[3] || + (n[3] = function (e) { + return (t.searchingInputValue = e); + }), + disabled: t.disabled, + autocomplete: t.autocomplete, + placeholder: t.isFocusing + ? t.searchPlaceholder + : t.innerPlaceholder, + onInput: t.handleInputForInput, + onChange: t.handleChangeForInput, + onFocus: t.handleFocusForInput, + onBlur: t.handleBlurForInput, + onEscape: t.blur, + autofocus: t.autofocus || (t.taggable && t.searchable), + tabindex: t.tabindex, + comboboxUid: t.instance.uid, + }, + null, + 8, + [ + 'modelValue', + 'disabled', + 'autocomplete', + 'placeholder', + 'onInput', + 'onChange', + 'onFocus', + 'onBlur', + 'onEscape', + 'autofocus', + 'tabindex', + 'comboboxUid', + ] + )) + : e.createCommentVNode('v-if', !0), + t.loading + ? e.renderSlot(t.$slots, 'loading', { key: 1 }, function () { + return [M]; + }) + : e.renderSlot( + t.$slots, + 'toggle', + { key: 2, isFocusing: t.isFocusing, toggle: t.toggle }, + function () { + return [ + e.createElementVNode( + 'span', + { + class: e.normalizeClass([ + 'icon arrow-downward', + { active: t.isFocusing }, + ]), + onClick: + n[4] || + (n[4] = function () { + return ( + t.toggle && + t.toggle.apply(t, arguments) + ); + }), + onMousedown: + n[5] || + (n[5] = e.withModifiers( + function () {}, + ['prevent', 'stop'] + )), + }, + null, + 34 + ), + ]; + } + ), + ], + 64 + )), + ], + 512 + ), + t.multiple && t.taggable && t.searchable + ? (e.openBlock(), + e.createElementBlock('div', E, [ + e.withDirectives( + e.createVNode( + i, + { + ref: 'input', + modelValue: t.searchingInputValue, + 'onUpdate:modelValue': + n[6] || + (n[6] = function (e) { + return (t.searchingInputValue = e); + }), + disabled: t.disabled, + autocomplete: t.autocomplete, + placeholder: t.isFocusing ? t.searchPlaceholder : t.innerPlaceholder, + onInput: t.handleInputForInput, + onChange: t.handleChangeForInput, + onFocus: t.handleFocusForInput, + onBlur: t.handleBlurForInput, + onEscape: t.blur, + autofocus: t.autofocus || (t.taggable && t.searchable), + tabindex: t.tabindex, + comboboxUid: t.instance.uid, + }, + null, + 8, + [ + 'modelValue', + 'disabled', + 'autocomplete', + 'placeholder', + 'onInput', + 'onChange', + 'onFocus', + 'onBlur', + 'onEscape', + 'autofocus', + 'tabindex', + 'comboboxUid', + ] + ), + [[e.vShow, t.isFocusing]] + ), + t.loading + ? e.renderSlot(t.$slots, 'loading', { key: 0 }, function () { + return [S]; + }) + : e.createCommentVNode('v-if', !0), + ])) + : e.createCommentVNode('v-if', !0), + e.createVNode( + c, + { + ref: 'dropdown', + modelValue: t.optionsWithInfo, + 'onUpdate:modelValue': + n[7] || + (n[7] = function (e) { + return (t.optionsWithInfo = e); + }), + onClickItem: t.addOrRemoveOption, + onMouseenter: + n[8] || + (n[8] = function (e, n) { + return t.pointerSet(n.originalIndex); + }), + comboboxUid: t.instance.uid, + maxHeight: t.maxHeight, + highlightedOriginalIndex: t.highlightedOriginalIndex, + }, + { + default: e.withCtx(function (n) { + var o = n.option; + return [ + e.renderSlot( + t.$slots, + 'dropdown-item', + { option: o.originalOption }, + function () { + return [ + e.createElementVNode('span', null, e.toDisplayString(o.label), 1), + ]; + } + ), + ]; + }), + _: 3, + }, + 8, + ['modelValue', 'onClickItem', 'comboboxUid', 'maxHeight', 'highlightedOriginalIndex'] + ), + ], + 16, + w + ) + ); + }), + (B.__file = 'src/index.vue'), + B + ); +})(Vue);