import{d as T,e as $,o as j,aT as l,W as a,X as v,bP as k,aF as V,u as R,bh as C,F as A,b2 as D,U as K,r as c,O as N}from"./vendor-reka-Edfq1EPl.js";import{g as z,c as I}from"./registry-DyIszw9-.js";import{u as U}from"./useCsrfToken-CgmSjXCB.js";import{u as X}from"./DynamicField.vue_vue_type_script_setup_true_lang-DYH52Q2k.js";import{u as G}from"./useFormLocale-DV7ezC7W.js";const H={class:"relative"},W=["id","value","placeholder","readonly"],Z={key:1,class:"h-4 w-4 shrink-0 opacity-50",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},J={key:0,class:"border-border bg-popover absolute z-50 mt-1 max-h-60 w-full overflow-y-auto rounded-md border shadow-md"},Q={key:0,class:"text-muted-foreground px-3 py-2 text-sm"},Y={key:1,class:"text-destructive px-3 py-2 text-sm"},q={key:2,class:"text-muted-foreground px-3 py-2 text-sm"},ee=["onMousedown"],re=T({__name:"RelatedInput",props:{field:{},modelValue:{},error:{}},emits:["update:modelValue"],setup(s,{emit:F}){const o=s,y=F,M=z(),S=U(),d=X(),b=G(),u=c(""),f=c([]),h=c(!1),m=c(null),n=c(!1),B=c(null);let p=null;const L=N(()=>{if(o.modelValue==null||o.modelValue==="")return"";const e=f.value.find(t=>String(t.id)===String(o.modelValue));return e?e.label:""});async function x(e){const t=o.field.relatedResource,r=o.field.relatedLabelKey??"name";if(t){p==null||p.abort(),p=new AbortController,h.value=!0,m.value=null;try{const i=new URLSearchParams({label:r});e&&i.set("search",e),b&&i.set("locale",b);const g=await fetch(`/${M}/${t}/options?${i}`,{signal:p.signal,headers:{"X-CSRF-TOKEN":S,Accept:"application/json"}});if(g.ok){const _=await g.json();f.value=_.options}else m.value=`Failed to load options (${g.status}).`}catch(i){if(i instanceof DOMException&&i.name==="AbortError")return;m.value="Failed to load options."}finally{h.value=!1}}}$(u,e=>{n.value&&x(e)}),j(()=>{o.modelValue!=null&&o.modelValue!==""&&x("")});function w(){n.value||(u.value="",n.value=!0,x(""))}function E(e){y("update:modelValue",e.id),u.value="",n.value=!1,d&&o.field.name===d.parentField&&d.setParentOption(e)}function O(){y("update:modelValue",null),u.value="",f.value=[],d&&o.field.name===d.parentField&&d.clearParentOption()}function P(){window.setTimeout(()=>{n.value=!1,u.value=""},150)}return(e,t)=>(l(),a("div",H,[v("div",{class:V(R(I)("border-input bg-background focus-within:ring-ring flex min-h-9 w-full items-center gap-2 rounded-md border px-3 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]",s.error&&"border-destructive",s.field.readonly&&"cursor-not-allowed opacity-50"))},[v("input",{id:s.field.name,ref_key:"inputEl",ref:B,value:n.value?u.value:L.value,type:"text",placeholder:n.value?"Zoeken…":"— Selecteer —",readonly:s.field.readonly,class:"flex-1 bg-transparent outline-none placeholder:text-muted-foreground",onFocus:w,onClick:w,onInput:t[0]||(t[0]=r=>n.value&&(u.value=r.target.value)),onBlur:P},null,40,W),s.modelValue?(l(),a("button",{key:0,type:"button",class:"text-muted-foreground hover:text-foreground shrink-0",onMousedown:k(O,["prevent"])},[...t[1]||(t[1]=[v("svg",{class:"h-3.5 w-3.5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[v("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})],-1)])],32)):(l(),a("svg",Z,[...t[2]||(t[2]=[v("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 9l6 6 6-6"},null,-1)])]))],2),n.value?(l(),a("div",J,[h.value?(l(),a("div",Q," Laden… ")):m.value?(l(),a("div",Y,C(m.value),1)):f.value.length===0?(l(),a("div",q," Geen resultaten gevonden. ")):(l(!0),a(A,{key:3},D(f.value,r=>(l(),a("button",{key:String(r.id),type:"button",class:V(["hover:bg-accent hover:text-accent-foreground flex w-full items-center px-3 py-2 text-sm",{"bg-accent":String(r.id)===String(s.modelValue)}]),onMousedown:k(i=>E(r),["prevent"])},C(r.label),43,ee))),128))])):K("",!0)]))}});export{re as _};
