UNPKG

@ramstack/alpinegear-main

Version:

@ramstack/alpinegear-main is a combined plugin that includes several Alpine.js directives, providing a convenient all-in-one package.

1 lines 6.83 kB
function e(e,...t){const n=e(...t);return()=>{let e;return n((t=>e=t)),t=e,"function"==typeof t?.get?e.get():e;var t}}function t(e,...t){const n=e(...t);t[t.length-1]=`${t.at(-1)} = __val`;const o=e(...t);return e=>{let t;n((e=>t=e)),function(e){return"function"==typeof e?.set}(t)?t.set(e):o((()=>{}),{scope:{__val:e}})}}const n=Symbol();let o;const a=(...e)=>console.warn("alpine-gear.js:",...e),r=Array.isArray,c=e=>null==e,i=e=>"checkbox"===e.type||"radio"===e.type,l=e=>e instanceof HTMLTemplateElement,u=e=>e.nodeType===Node.ELEMENT_NODE,s=e=>r(e)?e:[e],d=(e,t)=>e==t,f=(e,t)=>e.findIndex((e=>e==t)),p=(e,t)=>e.includes(t),m=(e,t,n,o)=>(e.addEventListener(t,n,o),()=>e.removeEventListener(t,n,o)),v=e=>"object"==typeof e?JSON.parse(JSON.stringify(e)):e;function h(e,t,n=null){const{effect:o,release:a}=Alpine;let r,c,i=!1;const l=o((()=>{r=e(),i||(n?.deep&&JSON.stringify(r),c=r),(i||(n?.immediate??1))&&setTimeout((()=>{t(r,c),c=r}),0),i=!0}));return()=>a(l)}const b=new Map("value,checked,files,innerHTML,innerText,textContent,videoHeight,videoWidth,naturalHeight,naturalWidth,clientHeight,clientWidth,offsetHeight,offsetWidth,open,group".split(",").map((e=>[e.trim().toLowerCase(),e.trim()])));function g({directive:l,entangle:u,evaluateLater:g,mapAttributes:T,mutateDom:_,prefixed:k}){T((e=>({name:e.name.replace(/^&/,k("bound:")),value:e.value}))),l("bound",((l,{expression:T,value:k,modifiers:x},{effect:N,cleanup:y})=>{if(!k)return void a("x-bound directive expects the presence of a bound property name");const E=l.tagName.toUpperCase();T=T?.trim();const L=b.get(k.trim().replace("-","").toLowerCase());T||=L;const w=e(g,l,T),S=t(g,l,T),D=()=>d(l[L],w())||_((()=>l[L]=w())),H=()=>S((e=>"number"===e.type||"range"===e.type)(l)?function(e){return""===e?null:+e}(l[L]):l[L]);let M;switch(L){case"value":!function(){switch(E){case"INPUT":case"TEXTAREA":c(w())&&H(),N(D),y(m(l,"input",H)),M=!0;break;case"SELECT":queueMicrotask((()=>{c(w())&&H(),N((()=>function(e,t){for(const n of e.options)n.selected=f(t,n.value)>=0}(l,s(w()??[])))),y(m(l,"change",(()=>S(function(e){return e.multiple?[...e.selectedOptions].map((e=>e.value)):e.value}(l)))))})),M=!0}}();break;case"checked":i(l)&&(N(D),y(m(l,"change",H)),M=!0);break;case"files":"file"===l.type&&(y(m(l,"input",H)),M=!0);break;case"innerHTML":case"innerText":case"textContent":"true"===l.contentEditable&&(c(w())&&H(),N(D),y(m(l,"input",H)),M=!0);break;case"videoHeight":case"videoWidth":A("VIDEO","resize");break;case"naturalHeight":case"naturalWidth":A("IMG","load");break;case"clientHeight":case"clientWidth":case"offsetHeight":case"offsetWidth":y(function(e,t){return o??=new ResizeObserver((e=>{for(const t of e)for(const e of t.target[n]?.values()??[])e(t)})),e[n]??=new Set,e[n].add(t),o.observe(e),()=>{e[n].delete(t),e[n].size||(o.unobserve(e),e[n]=null)}}(l,H)),M=!0;break;case"open":"DETAILS"===E&&(c(w())&&H(),N(D),y(m(l,"toggle",H)),M=!0);break;case"group":i(l)&&(l.name||_((()=>l.name=T)),N((()=>_((()=>function(e,t){e.checked=r(t)?f(t,e.value)>=0:d(e.value,t)}(l,w()??[]))))),y(m(l,"input",(()=>S(function(e,t){if("radio"===e.type)return e.value;t=s(t);const n=f(t,e.value);return e.checked?n>=0||t.push(e.value):n>=0&&t.splice(n,1),t}(l,w()))))),M=!0)}if(!M){const n=p(x,"in")?"in":p(x,"out")?"out":"inout",o=T===k?(e=>{for(;e&&!e._x_dataStack;)e=(e._x_teleportBack??e).parentElement;return e})(l.parentNode):l;if(!l._x_dataStack)return void a("x-bound directive requires the presence of the x-data directive to bind component properties");if(!o)return void a(`x-bound directive cannot find the parent scope where the '${k}' property is defined`);const r={get:e(g,o,T),set:t(g,o,T)},c={get:e(g,l,k),set:t(g,l,k)};switch(n){case"in":y(h((()=>r.get()),(e=>c.set(v(e)))));break;case"out":y(h((()=>c.get()),(e=>r.set(v(e)))));break;default:y(u(r,c))}}function A(e,t){E===e&&(H(),y(m(l,t,H)),M=!0)}}))}function T({directive:t,evaluateLater:n,mutateDom:o}){t("format",((t,{modifiers:a},{effect:r})=>{const c=/{{(?<expr>.+?)}}/g,i=p(a,"once");function l(e){i?o((()=>e())):r((()=>o((()=>e()))))}!function t(a){switch(a.nodeType){case Node.TEXT_NODE:!function(t){const a=t.textContent.split(c);if(a.length>1){const r=new DocumentFragment;for(let o=0;a.length>o;o++)if(o%2==0)r.appendChild(document.createTextNode(a[o]));else{const c=e(n,t.parentNode,a[o]),i=document.createTextNode("");r.append(i),l((()=>i.textContent=c()))}o((()=>t.parentElement.replaceChild(r,t)))}}(a);break;case Node.ELEMENT_NODE:!function(e){for(let n of e.childNodes)t(n)}(a),function(t){for(let o of t.attributes)if([...o.value.matchAll(c)].length){const a=o.value;l((()=>o.value=a.replace(c,((o,a)=>e(n,t,a)()))))}}(a)}}(t)}))}function _(e,t,{addScopeToNode:n,cleanup:o,initTree:a,mutateDom:r,scope:c={}}){if(e._r_block)return;document.body._r_block??=(()=>{const e=new MutationObserver((e=>{for(let t of e)for(let e of t.addedNodes)e._r_block?.update()}));return e.observe(document.body,{childList:!0,subtree:!0}),e})();let i=l(t)?[...t.content.cloneNode(!0).childNodes]:[t.cloneNode(!0)];r((()=>{for(let t of i)u(t)&&n(t,c,e),e.parentElement.insertBefore(t,e),u(t)&&a(t)})),e._r_block={template:t,update(){r((()=>{for(let t of i??[])e.parentElement.insertBefore(t,e)}))},delete(){e._r_block=null;for(let e of i??[])e.remove();i=null}},o((()=>e._r_block?.delete()))}function k({addScopeToNode:e,directive:t,initTree:n,mutateDom:o}){t("fragment",((t,{},{cleanup:r})=>{l(t)?_(t,t,{addScopeToNode:e,cleanup:r,initTree:n,mutateDom:o}):a("x-fragment can only be used on a 'template' tag")}))}function x({addScopeToNode:t,directive:n,initTree:o,mutateDom:r}){n("match",((n,{},{cleanup:c,effect:i,evaluateLater:u})=>{if(!l(n))return void a("x-match can only be used on a 'template' tag");const s=[];for(let t of n.content.children){const n=t.getAttribute("x-case");null!==n?s.push({el:t,get_value:e(u,n)}):t.hasAttribute("x-default")&&s.push({el:t,get_value:()=>!0,default:!0})}const d=()=>n._r_block?.delete();i((()=>{let e;for(let t of s)t.get_value()&&!e&&(e=t);var a;e?(a=e,n._r_block?.template!==a.el&&(d(),_(n,a.el,{addScopeToNode:t,cleanup:c,initTree:o,mutateDom:r}))):d()}))}))}function N(e){e.directive("template",((e,{expression:t})=>{if(l(e))return void a("x-template cannot be used on a 'template' tag");const n=document.getElementById(t);l(n)?queueMicrotask((()=>{e.innerHTML="",e.append(n.content.cloneNode(!0))})):a("x-template directive can only reference the template tag")}))}function y({addScopeToNode:t,directive:n,initTree:o,mutateDom:r}){n("when",((n,{expression:c},{cleanup:i,effect:u,evaluateLater:s})=>{if(!l(n))return void a("x-when can only be used on a 'template' tag");const d=e(s,c);u((()=>d()?_(n,n,{addScopeToNode:t,cleanup:i,initTree:o,mutateDom:r}):n._r_block?.delete()))}))}export{g as bound,T as format,k as fragment,x as match,N as template,y as when};