@lucidclient/elements
Version:
A lightweight, reactive UI library that bridges HTML and JavaScript through attributes, powered by SolidJS. Adds reactive state and dynamic behaviors to markup while maintaining simplicity.
2 lines • 3.45 kB
JavaScript
import{b as H,c as u,g,l as d,m as v}from"./chunk-OSNUUW4P.js";var M="event",T=e=>e.type==="action"?t=>e.member(t):t=>console.log(e.member),A=(e,t)=>`${e}:${t}`,x=e=>{let t=e.split(H.options.attributes.seperators.handler),n={target:"element",eventName:t[0]};return t[0]&&t.length>1&&["document","body","head","window"].includes(t[0])&&(n.target=t[0],n.eventName=t[1]),n},N=e=>{switch(e.target){case"document":return document;case"body":return document.body;case"head":return document.head;case"window":return window;default:return document}},k=(e,t,n)=>{for(let o of e){let[r,i]=o,s=x(r);if(s.eventName)for(let a of i){let l=d(a);if(!l)continue;let f=A(r,a);n.has(f)||n.set(f,new Map);let c=n.get(f);if(c)if(s.target==="element"){let p=document.querySelectorAll(u(M,r,a));for(let m of p){if(c.has(m))continue;let y=T(l);m.addEventListener(s.eventName,y,{signal:t?.signal}),c.set(m,y)}}else{let p=N(s);if(c.has(p))continue;let m=T(l);p.addEventListener(s.eventName,m,{signal:t?.signal}),c.set(p,m)}}}},C={namespace:M,initialise:(e,t)=>{let n=new AbortController,o=new Map;return k(e,n,o),()=>{n.abort(),o.clear()}}},O=C;import{createEffect as j,createRoot as W}from"solid-js";var S="dom",w=(e,t)=>{let n=g(t);for(let o of e)o instanceof HTMLElement&&(o.innerText=n)},D=(e,t)=>{let n=g(t);for(let o of e)o instanceof HTMLElement&&(o.innerHTML=n)},q=(e,t)=>{let n=g(t);for(let o of e)(o instanceof HTMLInputElement||o instanceof HTMLTextAreaElement||o instanceof HTMLSelectElement)&&(o.value=n)},B=(e,t)=>{for(let n of e)if(n instanceof HTMLElement&&t===!0){setTimeout(()=>n.focus(),0);break}},I=(e,t)=>{for(let n of e)n instanceof HTMLElement&&t===!0&&n.blur()},R=(e,t)=>{for(let n of e)if(n instanceof HTMLElement&&t===!0){n.scrollIntoView({behavior:"smooth"});break}},F=e=>{switch(e){case"text":return w;case"html":return D;case"value":return q;case"focus":return B;case"blur":return I;case"scrollto":return R;default:return w}},K={namespace:S,initialise:e=>{let t;return W(n=>{t=n;for(let o of e){let[r,i]=o;for(let s of i){let a=d(s);if(!a)continue;let l=document.querySelectorAll(u(S,r,s)),f=F(r);j(async()=>{try{let c=await v(a);f(l,c)}catch(c){console.error(c)}})}}}),()=>t()}},V=K;import{createRoot as $,createSignal as z,createEffect as G}from"solid-js";var h="trap",[J,L]=z([]),P=e=>{let t=[],n=document.body.children;for(let o=0;o<n.length;o++){let r=n[o];r instanceof HTMLElement&&r!==e&&!r.contains(e)&&!e.contains(r)&&t.push(r)}return t},Q=(e,t,n)=>{if(t){let o=P(e),r=document.activeElement;L(i=>[...i,{element:e,previousActiveElement:r,siblingElements:o}]);for(let i of o)i.setAttribute("inert","");e.removeAttribute("inert"),e.focus(),document.body.style.overflow="hidden";return}L(o=>{let r=o.find(s=>s.element===e),i=o.filter(s=>s.element!==e);if(r){for(let s of r.siblingElements)s.removeAttribute("inert");i.length===0&&(r.previousActiveElement?.focus(),document.body.style.overflow="")}return i}),n.trapBothWays&&e.setAttribute("inert","")},U=e=>({trapBothWays:e.includes("both")}),X={namespace:h,initialise:e=>{let t;return $(n=>{t=n;for(let[o,r]of e)for(let i of r){let s=d(i);if(!s)continue;let a=U(o),l=document.querySelectorAll(u(h,o,i));G(async()=>{let f=await v(s);for(let c of l)c instanceof HTMLElement&&Q(c,!!f,a)})}}),()=>{for(let n of J())for(let o of n.siblingElements)o.removeAttribute("inert");document.body.style.overflow="",t()}}},Y=X;export{V as dom,O as events,Y as trap};
//# sourceMappingURL=handlers.js.map