1import{M as N,x as Y,a1 as Z,Y as w,y as j,z as S,B as C,C as x,L as m,F as g,Z as G,R as v,S as c,J as k,U as a,$ as Q,V as W,a0 as X}from"./runtime-dom.esm-bundler.CqpSJMCm.js";import{_ as ee}from"./_plugin-vue_export-helper.DlAUqK2U.js";const oe={class:"combobox"},ne=["id"],te=["id","aria-controls","aria-expanded","aria-labelledby","aria-activedescendant","onKeydown"],se=["id","aria-labelledby"],ie=["id","aria-selected","onClick"],le={__name:"Dropdown",props:{label:{type:String,default:"Select Option"},options:{type:Array,required:!0},selected:{type:String,default:""}},emits:["select"],setup(r,{emit:F}){const i=r,e=N({focusedIndex:0,keysSoFar:"",open:!1,selected:null}),d=Y(null),T=Z(),B=F,D=w("combobox"),p=w("listbox");j(()=>{E()});function E(){if(i.selected!==""){const o=u(i.selected);if(o>-1){e.selected=i.options[o],e.focusedIndex=o;return}}e.selected=i.options[0]}function b(){e.selected=i.options[e.focusedIndex],e.open=!1}function I(o){p.value.contains(o.relatedTarget)||e.open&&b()}function $(o){e.open?e.focusedIndex<i.options.length-1&&e.focusedIndex++:e.open=!0}function A(o){e.open?(o.altKey&&b(),e.focusedIndex>0&&e.focusedIndex--):(e.open=!0,e.focusedIndex=0)}function H(o){if(!e.open)e.open=!0;else{if(o.key===" "&&e.keysSoFar.length)return;b()}}function M(){e.open=!0,e.focusedIndex=0}function K(){e.open=!0,e.focusedIndex=i.options.length-1}function O(){if(e.open){const o=e.focusedIndex-10;e.focusedIndex=o<0?0:o}}function U(){if(e.open){const o=e.focusedIndex+10;e.focusedIndex=o>=i.options.length-1?i.options.length-1:o}}function L(o){const n=o.key;if(["ArrowUp","ArrowDown","Home","End","PageUp","PageDown","Esc","Enter"].includes(n)||n===" "&&!e.keysSoFar.length)return;const t=R(n.toLowerCase());if(!t)return;const s=u(t.slug);s>-1&&s<i.options.length-1&&(e.focusedIndex=s)}function R(o){const n=e.focusedIndex;e.keysSoFar+=o,V();let t=y(n+1,i.options.length);return t||(t=y(0,n)),t}function y(o,n){const t=i.options;for(let s=o;s<n;s++)if(t[s].title.toString().toLowerCase().indexOf(e.keysSoFar)===0)return t[s];return null}function V(){d.value&&(clearTimeout(d.value),d.value=null),d.value=setTimeout(()=>{e.keysSoFar="",d.value=null},500)}const h=S(()=>e.selected?e.selected.slug:null);S(()=>u(h.value)),C(()=>e.selected,()=>{B("select",e.selected),e.open=!1,e.focusedIndex=u(e.selected.slug)}),C(()=>e.focusedIndex,o=>{if(z(p.value)){const n=document.getElementById(l(i.options[o].slug));P(n,p.value)}});function u(o){return i.options.findIndex(n=>n.slug===o)}function l(o){return`${T}__${o}`}function z(o){return o&&o.clientHeight<o.scrollHeight}function P(o,n){const{offsetHeight:t,offsetTop:s}=o,{offsetHeight:f,scrollTop:_}=n,q=s<_,J=s+t>_+f;q?n.scrollTo(0,s):J&&n.scrollTo(0,s-f+t)}return(o,n)=>(m(),x("div",oe,[g("div",{id:l("combobox-label"),class:"combobox__label u-srOnly",onClick:n[0]||(n[0]=t=>D.value.focus())},v(r.label),9,ne),g("div",{id:l("combobox"),class:k(["combobox__input",{"combobox__input--open":e.open}]),role:"combobox",tabindex:"0","aria-controls":l("listbox"),"aria-expanded":e.open,"aria-haspopup":"listbox","aria-labelledby":l("combobox-label"),"aria-activedescendant":l(r.options[e.focusedIndex].slug),ref:"combobox",onBlur:I,onFocusout:I,onClick:n[1]||(n[1]=t=>e.open=!e.open),onKeydown:[c(a(A,["prevent"]),["up"]),c(a($,["prevent"]),["down"]),c(a(H,["prevent"]),["enter","space"]),c(a(M,["prevent"]),["home"]),c(a(K,["prevent"]),["end"]),n[2]||(n[2]=c(a(t=>e.open=!1,["prevent"]),["esc"])),c(a(O,["prevent"]),["page-up"]),c(a(U,["prevent"]),["page-down"]),L]},v(e.selected?e.selected.title:""),43,te),G(g("div",{id:l("listbox"),class:"combobox__menu",role:"listbox",tabindex:"-1","aria-labelledby":l("combobox-label"),ref:"listbox"},[(m(!0),x(W,null,X(r.options,(t,s)=>(m(),x("div",{id:l(t.slug),class:k(["combobox__option button",{"combobox__option--selected":h.value===t.slug,"combobox__option--focused":s===e.focusedIndex}]),role:"option","aria-selected":s===e.focusedIndex,onClick:f=>e.selected=t},v(t.title),11,ie))),256))],8,se),[[Q,e.open]])]))}},de=ee(le,[["__scopeId","data-v-7de4d508"]]);export{de as default}; 2//# sourceMappingURL=Dropdown.rN4VsomH.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.