1 line
8.2 KiB
JavaScript
1 line
8.2 KiB
JavaScript
(()=>{(function(){let v=!1;function k(d){if(!d||d.hasAttribute("data-initialized"))return;d.setAttribute("data-initialized","true");let r=d.querySelector("button.select-trigger");if(!r){console.error("Select box: Trigger button (.select-trigger) not found in wrapper",d);return}let x=r.getAttribute("data-tui-selectbox-content-id"),A=r.getAttribute("data-tui-selectbox-multiple")==="true",w=r.getAttribute("data-tui-selectbox-show-pills")==="true",y=x?document.getElementById(x):null,c=r.querySelector(".select-value"),a=r.querySelector('input[type="hidden"]');if(!y||!c||!a){console.error("Select box: Missing required elements for initialization.",{wrapper:d,contentID:x,contentExists:!!y,valueElExists:!!c,hiddenInputExists:!!a});return}r.addEventListener("keydown",t=>{(t.key.length===1||t.key==="Backspace"||t.key==="Delete")&&(t.preventDefault(),document.getElementById(x).click(),setTimeout(()=>{let e=document.querySelector("[data-tui-selectbox-search]");e&&(e.focus(),t.key!=="Backspace"&&t.key!=="Delete"&&(e.value=t.key))},0))});let n=y.cloneNode(!0);y.parentNode.replaceChild(n,y);let f=n.querySelector("[data-tui-selectbox-search]");if(f){let t=()=>{let e=window.getComputedStyle(n);e.display!=="none"&&e.visibility!=="hidden"&&e.opacity!=="0"&&f.focus()};document.addEventListener("click",e=>{r.contains(e.target)&&setTimeout(t,50)}),r.addEventListener("keydown",e=>{(e.key==="Enter"||e.key===" ")&&setTimeout(t,50)}),f.addEventListener("input",e=>{let o=e.target.value.toLowerCase().trim();n.querySelectorAll(".select-item").forEach(s=>{let u=s.querySelector(".select-item-text")?.textContent.toLowerCase()||"",i=s.getAttribute("data-tui-selectbox-value")?.toLowerCase()||"",g=o===""||u.includes(o)||i.includes(o);s.style.display=g?"":"none"})})}n.addEventListener("keydown",t=>{if(t.key==="ArrowDown"||t.key==="ArrowUp"){t.preventDefault();let e=Array.from(n.querySelectorAll(".select-item")).filter(s=>s.style.display!=="none");if(e.length===0)return;let o=n.querySelector(".select-item:focus"),l=0;if(o){let s=e.indexOf(o);t.key==="ArrowDown"?l=(s+1)%e.length:l=(s-1+e.length)%e.length}e[l].focus()}else if(t.key==="Enter"){t.preventDefault();let e=n.querySelector(".select-item:focus");e&&h(e)}else t.key==="Escape"&&(t.preventDefault(),n.querySelector(".select-item:focus")?f.focus():document.activeElement===f&&window.closePopover&&(window.closePopover(x,!0),setTimeout(()=>{r.focus()},50)))});let m=n.querySelectorAll('.select-item[data-tui-selectbox-selected="true"]');if(m.length>0)if(A){if(w){c.innerHTML="";let e=document.createElement("div");e.className="flex flex-nowrap overflow-hidden max-w-full whitespace-nowrap gap-1",Array.from(m).forEach(o=>{let l=document.createElement("div");l.className="flex items-center gap-1 px-2 py-1 text-xs rounded-md bg-primary text-primary-foreground";let s=document.createElement("span");s.textContent=o.querySelector(".select-item-text").textContent;let u=document.createElement("button");u.className="hover:text-destructive focus:outline-none",u.innerHTML="x",u.onclick=i=>{i.stopPropagation(),h(o)},l.appendChild(s),l.appendChild(u),e.appendChild(l)}),c.appendChild(e),c.classList.remove("text-muted-foreground"),setTimeout(()=>{let o=e.scrollWidth,l=c.clientWidth;if(o>l){let u=(r.getAttribute("data-tui-selectbox-selected-count-text")||`${m.length} items selected`).replace("{n}",m.length);c.innerHTML=u,c.classList.remove("text-muted-foreground")}},0)}else c.textContent=`${m.length} items selected`,c.classList.remove("text-muted-foreground");let t=Array.from(m).map(e=>e.getAttribute("data-tui-selectbox-value"));a.value=t.join(",")}else{let t=m[0],e=t.querySelector(".select-item-text");if(e&&(c.textContent=e.textContent,c.classList.remove("text-muted-foreground")),a){let o=t.getAttribute("data-value")||"";a.hasAttribute("data-initialized")||(a.value=o,a.setAttribute("data-initialized","true"),a.dispatchEvent(new Event("change",{bubbles:!0})))}}function C(){n.querySelectorAll(".select-item").forEach(t=>{t.getAttribute("data-tui-selectbox-selected")==="true"?(t.classList.add("bg-accent","text-accent-foreground"),t.classList.remove("bg-muted")):t.classList.remove("bg-accent","text-accent-foreground","bg-muted")})}function h(t){if(!t||t.getAttribute("data-tui-selectbox-disabled")==="true"||v)return;v=!0;let e=t.getAttribute("data-tui-selectbox-value"),o=t.querySelector(".select-item-text");if(A){let l=t.getAttribute("data-tui-selectbox-selected")==="true";if(t.setAttribute("data-tui-selectbox-selected",(!l).toString()),l){t.classList.remove("bg-accent","text-accent-foreground");let i=t.querySelector(".select-check");i&&i.classList.replace("opacity-100","opacity-0")}else{t.classList.add("bg-accent","text-accent-foreground");let i=t.querySelector(".select-check");i&&i.classList.replace("opacity-0","opacity-100")}let s=n.querySelectorAll('.select-item[data-tui-selectbox-selected="true"]');if(s.length>0)if(w){c.innerHTML="";let i=document.createElement("div");i.className="flex flex-nowrap overflow-hidden max-w-full whitespace-nowrap gap-1",Array.from(s).forEach(g=>{let p=document.createElement("div");p.className="flex items-center gap-1 px-2 py-0.5 text-xs rounded-full bg-accent text-accent-foreground";let E=document.createElement("span");E.textContent=g.querySelector(".select-item-text").textContent;let b=document.createElement("button");b.className="hover:text-destructive focus:outline-none",b.innerHTML="\xD7",b.onclick=q=>{q.stopPropagation(),h(g)},p.appendChild(E),p.appendChild(b),i.appendChild(p)}),c.appendChild(i),c.classList.remove("text-muted-foreground"),setTimeout(()=>{let g=i.scrollWidth,p=c.clientWidth;if(g>p){let b=(r.getAttribute("data-tui-selectbox-selected-count-text")||`${s.length} items selected`).replace("{n}",s.length);c.innerHTML=b,c.classList.remove("text-muted-foreground")}},0)}else c.textContent=`${s.length} items selected`,c.classList.remove("text-muted-foreground");else c.textContent=c.getAttribute("data-tui-selectbox-placeholder")||"",c.classList.add("text-muted-foreground");let u=Array.from(s).map(i=>i.getAttribute("data-tui-selectbox-value"));a.value=u.join(","),a.dispatchEvent(new Event("change",{bubbles:!0}))}else{n.querySelectorAll(".select-item").forEach(s=>{s.setAttribute("data-tui-selectbox-selected","false"),s.classList.remove("bg-accent","text-accent-foreground","bg-muted");let u=s.querySelector(".select-check");u&&u.classList.replace("opacity-100","opacity-0")}),t.setAttribute("data-tui-selectbox-selected","true"),t.classList.add("bg-accent","text-accent-foreground");let l=t.querySelector(".select-check");if(l&&l.classList.replace("opacity-0","opacity-100"),c&&o&&(c.textContent=o.textContent,c.classList.remove("text-muted-foreground")),a&&e!==null){let s=a.value;a.value=e,s!==e&&a.dispatchEvent(new Event("change",{bubbles:!0}))}window.closePopover?(window.closePopover(x,!0),setTimeout(()=>{r.focus()},50)):console.warn("closePopover function not found")}setTimeout(()=>{v=!1},100)}n.addEventListener("click",t=>{let e=t.target.closest(".select-item");e&&h(e)}),n.addEventListener("keydown",t=>{let e=t.target.closest(".select-item");e&&(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),h(e))}),n.addEventListener("mouseover",t=>{let e=t.target.closest(".select-item");!e||e.getAttribute("data-tui-selectbox-disabled")==="true"||(n.querySelectorAll(".select-item").forEach(o=>{o.classList.remove("bg-accent","text-accent-foreground","bg-muted")}),e.getAttribute("data-tui-selectbox-selected")!=="true"&&e.classList.add("bg-accent","text-accent-foreground"))}),n.addEventListener("mouseleave",C);let S=d.closest("form");S&&S.addEventListener("reset",()=>{n.querySelectorAll(".select-item").forEach(e=>{e.setAttribute("data-tui-selectbox-selected","false");let o=e.querySelector(".select-check");o&&o.classList.replace("opacity-100","opacity-0"),e.classList.remove("bg-accent","text-accent-foreground")});let t=c.getAttribute("data-placeholder")||r.querySelector(".select-value")?.getAttribute("data-placeholder")||"Select...";c.textContent=t,c.classList.add("text-muted-foreground"),a.value="",f&&(f.value="",n.querySelectorAll(".select-item").forEach(e=>{e.style.display=""}))})}function L(d=document){d.querySelectorAll(".select-container").forEach(k)}window.templUI=window.templUI||{},window.templUI.selectbox={init:L},document.addEventListener("DOMContentLoaded",()=>L())})();})();
|